styling: add rounded mode to eCommerce search and option to hide draw…

…n text
devflowinc · Dec 19, 2024 · 61bea24 · 61bea24
1 parent 2bf8314
commit 61bea24
Show file tree

Hide file tree

Showing 10 changed files with 256 additions and 194 deletions.
diff --git a/clients/search-component/src/TrieveModal/Search/ProductItem.tsx b/clients/search-component/src/TrieveModal/Search/ProductItem.tsx
@@ -34,6 +34,15 @@ export const ProductItem = ({
     [item]
   );
 
+  const filteredVariants = useMemo(() => {
+    return uniquifyVariants(
+      item.chunk.metadata?.variants as unknown as {
+        featured_image: { src: string };
+        title: string;
+      }[]
+    )?.filter((variant) => variant.featured_image?.src);
+  }, [item]);
+
   const [shownImage, setShownImage] = useState<string>(
     item.chunk?.image_urls?.[0] || ""
   );
@@ -170,29 +179,22 @@ export const ProductItem = ({
                 }}
               />
               <>
-                {item.chunk.metadata?.variants?.length > 1 ? (
+                {filteredVariants.length > 1 ? (
                   <div className="variants">
                     <span className="variants-title">Variants:</span>
-                    {uniquifyVariants(
-                      item.chunk.metadata.variants as unknown as {
-                        featured_image: { src: string };
-                        title: string;
-                      }[]
-                    )
-                      ?.filter((variant) => variant.featured_image?.src)
-                      ?.map((variant) => (
-                        <button
-                          key={variant.title}
-                          onClick={(ev) => {
-                            ev.preventDefault();
-                            ev.stopPropagation();
-                            ev.nativeEvent.stopImmediatePropagation();
-                            setShownImage(variant.featured_image?.src);
-                          }}
-                        >
-                          {variant.title}
-                        </button>
-                      ))}
+                    {filteredVariants.map((variant) => (
+                      <button
+                        key={variant.title}
+                        onClick={(ev) => {
+                          ev.preventDefault();
+                          ev.stopPropagation();
+                          ev.nativeEvent.stopImmediatePropagation();
+                          setShownImage(variant.featured_image?.src);
+                        }}
+                      >
+                        {variant.title}
+                      </button>
+                    ))}
                   </div>
                 ) : null}
               </>

diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -29,8 +29,8 @@ body {
     background-color: var(--tv-zinc-50);
     font-family: var(--tv-prop-brand-font-family);
 
-    f .group-chat-carousel {
-      @apply pl-2 flex gap-2 w-full overflow-x-auto;
+    .group-chat-carousel {
+      @apply pl-4 flex gap-2 w-full overflow-x-auto;
     }
 
     .suspense-fallback {
@@ -62,12 +62,13 @@ body {
     &.chat-modal-mobile {
       @apply flex flex-col top-0 sm:top-[calc(40%-30vh)] pt-4 max-h-[100vh] w-full sm:w-[90vw] rounded-none sm:rounded-lg;
 
+      &.docs {
+        @apply h-screen;
+      }
+
       .chat-outer-wrapper {
         @apply justify-between w-full h-full mt-10 sm:mt-12;
       }
-      .system-information-wrapper {
-        @apply sm:mb-8;
-      }
     }
 
     .trieve-elements-docs {
@@ -82,7 +83,7 @@ body {
     }
 
     .trieve-elements-ecommerce {
-      @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-0.5 py-2 max-w-6xl mx-auto pr-0.5;
+      @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-0.5 py-2 max-w-7xl mx-auto pr-0.5;
 
       > li.start-chat-li {
         @apply col-span-2 sm:col-span-3 md:col-span-4 lg:col-span-5;
@@ -157,7 +158,7 @@ body {
     .mode-switch-wrapper.ecommerce.search {
       @apply top-[2.625rem];
 
-      right: calc(max(calc(50vw - 36rem), 1.25rem) + 0.25rem);
+      right: calc(max(calc(50% - 39.85rem), 1.25rem) + 0.25rem);
     }
 
     .mode-switch-wrapper.ecommerce.chat {
@@ -170,10 +171,11 @@ body {
       border-color: var(--tv-zinc-200);
 
       li {
+        @apply border-t-2 rounded-sm;
+
         button {
           @apply flex gap-1 items-center py-1 px-2;
         }
-        @apply border-t-2;
         border-color: transparent;
         &:hover,
         &.active {
@@ -224,7 +226,7 @@ body {
       }
 
       .bottom-row {
-        @apply flex items-center 2xl:px-0 w-full mx-auto max-w-6xl;
+        @apply flex items-center 2xl:px-0 w-full mx-auto max-w-7xl;
 
         .spacer {
           @apply flex-1;
@@ -412,10 +414,18 @@ body {
         ol {
           @apply list-decimal pl-4 my-4;
         }
+
+        hr {
+          @apply mb-4;
+        }
       }
 
       .system.ecommerce {
         @apply max-w-[100vw];
+
+        hr {
+          @apply mb-4;
+        }
       }
     }
 
@@ -503,7 +513,7 @@ body {
     }
 
     .chat-outer-wrapper {
-      @apply flex flex-col mt-12 px-2 scroll-smooth;
+      @apply flex flex-col mt-12 px-4 scroll-smooth;
 
       .ai-message {
         .message-wrapper {
@@ -520,7 +530,7 @@ body {
           @apply sm:w-12 sm:h-12 rounded-full flex items-center space-x-2;
 
           &.user {
-            @apply sm:w-10 h-10 ml-1;
+            @apply sm:w-10 ml-1;
           }
 
           &.assistant {
@@ -541,11 +551,11 @@ body {
         }
 
         .brand-paragraph {
-          @apply leading-8;
+          @apply leading-8 text-ellipsis;
         }
 
         .brand-name {
-          @apply text-white px-1.5 py-1 rounded-md font-[500] whitespace-nowrap text-ellipsis;
+          @apply text-white px-1.5 py-1 rounded-md font-[500] text-ellipsis line-clamp-1 w-fit;
         }
       }
     }
@@ -556,7 +566,7 @@ body {
       @apply w-full h-full flex justify-center items-center shrink-0;
 
       img {
-        @apply max-h-48 shrink-0;
+        @apply max-h-48 shrink-0 overflow-hidden rounded-lg;
       }
     }
 
@@ -575,10 +585,8 @@ body {
     /* SUGGESTED QUESTIONS */
 
     .system-information-wrapper {
-      @apply mb-10;
-
       &.with-group {
-        @apply mb-24;
+        @apply mb-8 sm:mb-0;
       }
 
       p {
@@ -612,7 +620,7 @@ body {
       }
 
       .questions {
-        @apply text-sm flex flex-wrap gap-2;
+        @apply text-sm flex flex-wrap gap-2 pb-12;
 
         .suggested-question {
           @apply p-2 text-left rounded-md border transition-all;
@@ -676,7 +684,7 @@ body {
     }
 
     .input-wrapper.ecommerce {
-      @apply max-w-6xl mx-auto;
+      @apply max-w-7xl mx-auto;
     }
 
     input {
@@ -698,7 +706,7 @@ body {
     }
 
     input.search-input.ecommerce {
-      @apply rounded-sm;
+      @apply rounded-lg;
     }
 
     .chat-footer-wrapper {
@@ -713,8 +721,10 @@ body {
 
     ul {
       &:not(.chat-ul) {
-        @apply overflow-y-auto overflow-x-hidden max-h-[calc(60vh-130px)] sm:max-h-[420px];
+        @apply overflow-y-auto overflow-x-hidden max-h-[calc(80vh-130px)] sm:max-h-[calc(60vh-130px)];
         &:not(.trieve-elements-docs) {
+          @apply max-h-[calc(98vh-130px)] sm:max-h-[calc(60vh-130px)];
+
           &:not(.commands) &:not(.trieve-elements-ecommerce) {
             @apply mt-4;
           }
@@ -1057,11 +1067,7 @@ body {
   }
 
   #trieve-search-modal.ecommerce {
-    @apply top-0 max-w-full w-screen pt-10 px-4 rounded-none;
-  }
-
-  #trieve-search-modal.chat-modal-mobile.ecommerce {
-    @apply top-0 max-w-full w-screen pt-0 px-4;
+    @apply top-1 max-w-[90rem] w-[95vw] pt-10 px-4 rounded-lg;
   }
 }
 

diff --git a/clients/search-component/src/TrieveModal/index.tsx b/clients/search-component/src/TrieveModal/index.tsx
@@ -22,34 +22,44 @@ const Modal = () => {
   const { askQuestion, chatWithGroup } = useChatState();
 
   useEffect(() => {
-    setClickTriggers(
-      setOpen,
-      setMode,
-      props
-    );
+    setClickTriggers(setOpen, setMode, props);
   }, []);
 
   useEffect(() => {
     const onViewportResize = () => {
       const viewportHeight = window.visualViewport?.height;
-      const trieveSearchModal = document.getElementById("trieve-search-modal");
-      if (trieveSearchModal) {
-        trieveSearchModal.style.maxHeight = `${viewportHeight}px`;
-      }
+      const chatOuterWrapper = document.querySelector(".chat-outer-wrapper");
 
-      const chatOuterWrapper = document.querySelector(
-        ".chat-outer-wrapper"
-      );
-      if (chatOuterWrapper) {
-        (chatOuterWrapper as HTMLElement).style.maxHeight =
-          `calc(${viewportHeight}px - 100px)`;
+      if ((window.visualViewport?.width ?? 1000) <= 768) {
+        const trieveSearchModal = document.getElementById(
+          "trieve-search-modal"
+        );
+        if (trieveSearchModal) {
+          trieveSearchModal.style.maxHeight = `calc(${viewportHeight}px - ${
+            props.type == "ecommerce" ? "0.5rem" : "0rem"
+          })`;
+        }
+
+        if (chatOuterWrapper) {
+          (chatOuterWrapper as HTMLElement).style.maxHeight =
+            `calc(${viewportHeight}px - ${
+              props.type == "ecommerce" ? "220px" : "200px"
+            })`;
+        }
+      } else {
+        if (chatOuterWrapper) {
+          (chatOuterWrapper as HTMLElement).style.maxHeight = `calc(60vh - ${
+            props.type == "ecommerce" ? "220px" : "200px"
+          })`;
+        }
       }
+
       if (chatOuterWrapper) {
-        chatOuterWrapper.scrollTop =
-          chatOuterWrapper.scrollHeight;
+        chatOuterWrapper.scrollTop = chatOuterWrapper.scrollHeight;
       }
     };
 
+    onViewportResize();
     window.addEventListener("resize", onViewportResize);
 
     return () => {
@@ -67,11 +77,11 @@ const Modal = () => {
 
     const eventListener: EventListener = (e: Event) => {
       const customEvent = e as CustomEvent<{
-        message: string;
+        message?: string;
         group: ChunkGroup;
         betterGroupName?: string;
       }>;
-      if (customEvent.detail?.message && customEvent.detail.group) {
+      if (customEvent.detail.group) {
         setOpen(true);
         if (customEvent.detail.betterGroupName) {
           customEvent.detail.group.name = customEvent.detail.betterGroupName;
@@ -80,7 +90,9 @@ const Modal = () => {
           customEvent.detail.group,
           customEvent.detail.betterGroupName
         );
-        askQuestion(customEvent.detail.message, customEvent.detail.group);
+        if (customEvent.detail.message) {
+          askQuestion(customEvent.detail.message, customEvent.detail.group);
+        }
       }
     };
     window.removeEventListener("trieve-start-chat-with-group", eventListener);
@@ -112,7 +124,7 @@ const Modal = () => {
     document.documentElement.style.setProperty(
       "--tv-prop-brand-font-family",
       props.brandFontFamily ??
-      `Maven Pro, ui-sans-serif, system-ui, sans-serif,
+        `Maven Pro, ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
     );
   }, [props.brandColor, props.brandFontFamily]);
@@ -138,8 +150,9 @@ const Modal = () => {
           ></div>
           <div
             id="trieve-search-modal"
-            className={`${mode === "chat" ? "chat-modal-mobile " : ""} ${props.theme === "dark" ? "dark " : ""
-              } ${props.type}`.trim()}
+            className={`${mode === "chat" ? "chat-modal-mobile " : ""} ${
+              props.theme === "dark" ? "dark " : ""
+            } ${props.type}`.trim()}
             style={{ zIndex: props.zIndex ? props.zIndex + 1 : 1001 }}
           >
             {props.allowSwitchingModes && <ModeSwitch />}

diff --git a/clients/ts-sdk/openapi.json b/clients/ts-sdk/openapi.json
@@ -12376,6 +12376,10 @@
             ],
             "nullable": true
           },
+          "hideDrawnText": {
+            "type": "boolean",
+            "nullable": true
+          },
           "navLogoImgSrcUrl": {
             "type": "string",
             "nullable": true

diff --git a/clients/ts-sdk/src/types.gen.ts b/clients/ts-sdk/src/types.gen.ts
@@ -2073,6 +2073,7 @@ export type PublicPageParameters = {
     forBrandName?: (string) | null;
     headingPrefix?: (string) | null;
     heroPattern?: ((HeroPattern) | null);
+    hideDrawnText?: (boolean) | null;
     navLogoImgSrcUrl?: (string) | null;
     openGraphMetadata?: ((OpenGraphMetadata) | null);
     openLinksInNewTab?: (boolean) | null;