styling: redesign input to appear on render in rounded state with exa…

…mple buttons below

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.55",
+  "version": "0.2.56",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

clients/search-component/src/TrieveModal/index.tsx

@@ -22,7 +22,7 @@ import { FloatingSearchInput } from "./FloatingSearchInput";
 
 const Modal = () => {
   useKeyboardNavigation();
-  const { mode, open, setOpen, setMode, props } = useModalState();
+  const { mode, open, setOpen, setMode, setQuery, props } = useModalState();
   const { askQuestion, chatWithGroup } = useChatState();
 
   useEffect(() => {
@@ -79,7 +79,7 @@ const Modal = () => {
     };
   }, [open]);
 
-  const eventListener: EventListener = useCallback((e: Event) => {
+  const chatWithGroupListener: EventListener = useCallback((e: Event) => {
     try {
       const customEvent = e as CustomEvent<{
         message?: string;
@@ -104,6 +104,27 @@ const Modal = () => {
     }
   }, []);
 
+  const openWithTextListener: EventListener = useCallback((e: Event) => {
+    try {
+      const customEvent = e as CustomEvent<{
+        text: string;
+      }>;
+
+      const defaultMode = props.defaultSearchMode || "search";
+      if (defaultMode === "chat") {
+        setOpen(true);
+        setMode("chat");
+        askQuestion(customEvent.detail.text);
+      } else {
+        setOpen(true);
+        setMode("search");
+        setQuery(customEvent.detail.text);
+      }
+    } catch (e) {
+      console.log("error on event listener for group chat", e);
+    }
+  }, []);
+
   useEffect(() => {
     const script = document.createElement("script");
     script.src =
@@ -112,15 +133,19 @@ const Modal = () => {
 
     document.head.appendChild(script);
 
-    try {
-      window.removeEventListener("trieve-start-chat-with-group", eventListener);
-    } catch (e) {
-      console.log("eror on initial listener remove", e);
-    }
-    window.addEventListener("trieve-start-chat-with-group", eventListener);
+    window.addEventListener(
+      "trieve-start-chat-with-group",
+      chatWithGroupListener
+    );
+    window.addEventListener("trieve-open-with-text", openWithTextListener);
 
     return () => {
-      window.removeEventListener("trieve-start-chat-with-group", eventListener);
+      window.removeEventListener(
+        "trieve-start-chat-with-group",
+        chatWithGroupListener
+      );
+
+      window.removeEventListener("trieve-open-with-text", openWithTextListener);
     };
   }, []);
 

clients/search-component/src/utils/hooks/chat-context.tsx

@@ -70,6 +70,8 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
     new AbortController()
   );
   const [isDoneReading, setIsDoneReading] = useState(true);
+  const [scrollTimeout, setScrollTimeout] = useState<NodeJS.Timeout | null>();
+
   const createTopic = async ({ question }: { question: string }) => {
     if (!currentTopic) {
       called.current = true;
@@ -154,12 +156,17 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
           ],
         ]);
 
-        setTimeout(() => {
+        if (scrollTimeout) {
+          clearTimeout(scrollTimeout);
+        }
+
+        const curScrollTimeout = setTimeout(() => {
           modalRef.current?.scroll({
             top: modalRef.current.scrollHeight + 200,
             behavior: "smooth",
           });
-        });
+        }, 75);
+        setScrollTimeout(curScrollTimeout);
       }
     }
   };

clients/search-component/src/utils/hooks/setClickTriggers.ts

@@ -18,7 +18,7 @@ export const setClickTriggers = (
     const newElement = element.cloneNode(true);
     element?.parentNode?.replaceChild(newElement, element);
     return newElement as unknown as Element;
-  }
+  };
 
   props.buttonTriggers?.forEach((trigger) => {
     let element: Element | null = document.querySelector(trigger.selector);
@@ -31,8 +31,8 @@ export const setClickTriggers = (
         startTransition(() => {
           setMode(trigger.mode);
           setOpen(true);
-        })
+        });
       });
     }
-  })
-}
+  });
+};

frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx

@@ -752,17 +752,18 @@ const PublicPageControls = () => {
             <div class="flex items-center gap-1">
               <label class="block">Video Position</label>
               <Tooltip
-                tooltipText="Position of the video on the page. Either floating or centered."
+                tooltipText="Position of the video on the page. Either floating or product."
                 body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
               />
             </div>
-            <input
-              placeholder="floating | product"
-              value={extraParams.videoPosition || ""}
-              onInput={(e) => {
-                setExtraParams("videoPosition", e.currentTarget.value);
+            <Select
+              display={(option) => option}
+              onSelected={(option) => {
+                setExtraParams("videoPosition", option);
               }}
-              class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+              class="bg-white py-1"
+              selected={extraParams.videoPosition || "static"}
+              options={["static", "floating", "product"]}
             />
           </div>
         </div>
@@ -843,28 +844,6 @@ const PublicPageControls = () => {
                   options={["search", "chat"]}
                 />
               </div>
-              <div class="grow">
-                <div class="flex items-center gap-1">
-                  <label class="block" for="">
-                    Default Search Mode
-                  </label>
-                  <Tooltip
-                    tooltipText="Set the initial search mode"
-                    body={
-                      <FaRegularCircleQuestion class="h-3 w-3 text-black" />
-                    }
-                  />
-                </div>
-                <Select
-                  display={(option) => option}
-                  onSelected={(option) => {
-                    setExtraParams("defaultSearchMode", option);
-                  }}
-                  class="bg-white py-1"
-                  selected={extraParams.defaultSearchMode || "search"}
-                  options={["search", "chat"]}
-                />
-              </div>
 
               <div class="grow">
                 <div class="flex items-center gap-1">

server/src/public/navbar.html

@@ -1,6 +1,6 @@
 <nav class="border-b">
   <div
-    class="max-w-screen-2xl mx-auto w-full p-2 flex items-center justify-center flex-col gap-2 sm:gap-4 sm:justify-between sm:!flex-row md:gap-4 lg:gap-6"
+    class="max-w-screen-2xl mx-auto w-full py-2 px-4 flex items-center justify-center flex-col gap-2 sm:gap-4 sm:justify-between sm:!flex-row md:gap-4 lg:gap-6"
   >
     <a class="flex items-center" href="https://trieve.ai">
       <img
@@ -46,6 +46,10 @@
         <i class="fa-regular fa-envelope"></i>
         <span> [email protected] </span>
       </a>
+      <a target="_blank" href="https://cal.com/nick.k">
+        <i class="fa-regular fa-calendar"></i>
+        Sales
+      </a>
       <a
         target="_blank"
         href="https://join.slack.com/t/trievecommunityslack/shared_invite/zt-2v7zyxytf-zWLVgqI8avB5x5Br7INQgw"
@@ -58,14 +62,9 @@
       <a target="_blank" href="tel:+16282224090">
         <i class="fa-solid fa-phone"></i>
       </a>
-      <a
-        class="action-link flex items-center gap-1"
-        target="_blank"
-        href="https://cal.com/nick.k"
-      >
-        <i class="fa-regular fa-calendar"></i>
-        <span> Give Feedback </span>
-      </a>
+      <button id="tr-search-icon">
+        <i class="fa-solid fa-magnifying-glass"></i>
+      </button>
     </div>
   </div>
 </nav>