feature: fix mobile view for search component

clients/search-component/example/src/routeTree.gen.ts

@@ -1,12 +1,12 @@
-/* prettier-ignore-start */
-
 /* eslint-disable */
 
 // @ts-nocheck
 
 // noinspection JSUnusedGlobalSymbols
 
-// This file is auto-generated by TanStack Router
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { createFileRoute } from '@tanstack/react-router'
 
@@ -22,11 +22,13 @@ const IndexLazyImport = createFileRoute('/')()
 // Create/Update Routes
 
 const EcommerceRoute = EcommerceImport.update({
+  id: '/ecommerce',
   path: '/ecommerce',
   getParentRoute: () => rootRoute,
 } as any)
 
 const IndexLazyRoute = IndexLazyImport.update({
+  id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
@@ -93,8 +95,6 @@ export const routeTree = rootRoute
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 
-/* prettier-ignore-end */
-
 /* ROUTE_MANIFEST_START
 {
   "routes": {

clients/search-component/package.json

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

clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx

@@ -79,7 +79,7 @@ export const Message = ({
   idx: number;
   message: Message;
 }) => {
-  const { rateChatCompletion, isDoneReading } = useChatState();
+  const { rateChatCompletion, isDoneReading, messages } = useChatState();
   const [positive, setPositive] = React.useState<boolean | null>(null);
   const [copied, setCopied] = React.useState<boolean>(false);
   const { props } = useModalState();
@@ -264,7 +264,7 @@ export const Message = ({
                   </div>
                 )
               : null}
-              {props.followupQuestions && 
+              {props.followupQuestions && messages.length == idx + 1 &&
                 <FollowupQueries /> }
             {isDoneReading && <div className="feedback-wrapper">
               <span className="spacer"></span>

clients/search-component/src/TrieveModal/Chat/ChatMode.tsx

@@ -67,7 +67,13 @@ export const ChatMode = () => {
         {!props.inline && (
           <div
             className={`close-modal-button chat ${props.type}`}
-            onClick={() => setOpen(false)}
+            onClick={() =>
+              messages.length < 1
+                ? setOpen(false)
+                : isDoneReading
+                  ? clearConversation()
+                  : stopGeneratingMessage()
+            }
           >
             <svg
               className="close-icon"
@@ -85,9 +91,25 @@ export const ChatMode = () => {
               <line x1="18" y1="6" x2="6" y2="18" />
               <line x1="6" y1="6" x2="18" y2="18" />
             </svg>
-            <span>Close</span>
+            <span>{messages.length < 1 ? "Close" : isDoneReading ? "Clear" : "Stop"} </span>
           </div>
         )}
+        {!props.inline && (currentQuestion || messages.length) ? (
+          <div className="chat-controls-row">
+            <button
+              onClick={() =>
+                currentQuestion
+                  ? askQuestion(currentQuestion)
+                  : isDoneReading
+                    ? clearConversation()
+                    : stopGeneratingMessage()
+              }
+              className="clear-button"
+            >
+              {currentQuestion ? "Enter" : isDoneReading ? "Clear" : "Stop"}
+            </button>
+          </div>
+        ) : null}
         <div
           className={`system-information-wrapper${
             currentGroup ? " with-group" : ""
@@ -149,7 +171,7 @@ export const ChatMode = () => {
             </button>
           </div>
         )}
-        <div className="input-wrapper chat">
+        <div className={`input-wrapper chat ${props.type == "ecommerce" ? "": props.type} ${props.inline && "inline-input-wrapper"}`}>
           {!props.inline ? (
             <button
               onClick={() => {
@@ -176,9 +198,7 @@ export const ChatMode = () => {
               value={currentQuestion}
               className={`${props.inline ? "inline-input" : ""}`}
               onChange={(e) => setCurrentQuestion(e.target.value)}
-              placeholder={`Ask me anything about${
-                props.brandName ? ` ${props.brandName}` : ""
-              }`}
+              placeholder="Ask anything ..."
             />
           </form>
           <button
@@ -194,22 +214,6 @@ export const ChatMode = () => {
           <UploadImage />
         </div>
         <div className={`trieve-footer chat ${props.type}`}>
-          {!props.inline && (currentQuestion || messages.length) ? (
-            <div className="chat-controls-row">
-              <button
-                onClick={() =>
-                  currentQuestion
-                    ? askQuestion(currentQuestion)
-                    : isDoneReading
-                      ? clearConversation()
-                      : stopGeneratingMessage()
-                }
-                className="clear-button"
-              >
-                {currentQuestion ? "Enter" : isDoneReading ? "Clear" : "Stop"}
-              </button>
-            </div>
-          ) : null}
           <div className="tags-row">
             {props.tags?.length ? <Tags /> : null}
             <div className="tags-spacer"></div>

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

@@ -139,8 +139,8 @@ export const SparklesIcon = (props: SVGAttributes<SVGElement>) => (
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
+    strokeLinecap="round"
+    strokeLinejoin="round"
     strokeWidth={2}
     {...props}
   >
@@ -160,9 +160,9 @@ export const DownloadIcon = () => (
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
   >
     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
     <polyline points="7 10 12 15 17 10" />

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

@@ -30,7 +30,7 @@ body {
     font-family: var(--tv-prop-brand-font-family);
 
     &:not(.trieve-popup-modal) {
-      @apply border;
+      @apply border max-w-sm;
     }
 
     &.trieve-popup-modal {
@@ -63,7 +63,7 @@ body {
       @apply h-full;
 
       .chat-outer-wrapper {
-        @apply overflow-auto sm:max-h-[50vh] max-h-[87vh];
+        @apply overflow-auto sm:max-h-[calc(50vh-122px)] max-h-[87vh];
       }
     }
 
@@ -457,11 +457,7 @@ body {
       }
 
       .system {
-        @apply mt-2 sm:mt-8 mb-5 items-center overflow-ellipsis;
-
-        .code-markdown {
-          max-width: 45vw;
-        }
+        @apply mt-2 sm:mt-8 mb-5 items-center overflow-ellipsis max-w-[100vw];
 
         p {
           @apply pb-1;
@@ -773,7 +769,11 @@ body {
 
       &.docs,
       &.pdf {
-        @apply m-2;
+        @apply m-2 mr-0;
+      }
+
+      &.inline-input-wrapper {
+        @apply ml-2;
       }
 
       .input-flex {
@@ -786,7 +786,12 @@ body {
       }
 
       &.chat {
-        @apply mb-2 flex-row sticky px-2;
+        @apply mb-2 flex-row sticky;
+
+        &.docs,
+        &.pdf {
+          @apply pl-2 pr-0;
+        }
 
         &::after {
           @apply -top-[7px];
@@ -1243,12 +1248,6 @@ body {
         }
       }
     }
-    #trieve-search-modal.ecommerce {
-      @apply top-1 max-w-[90rem] w-[95vw] pt-10 px-4 rounded-lg;
-      &.trieve-popup-modal {
-        @apply max-w-[90rem] pt-10 px-4;
-      }
-    }
 
     .pdf-item {
       @apply rounded-md p-2 hover:bg-neutral-100;
@@ -1268,6 +1267,19 @@ body {
       @apply overflow-hidden;
     }
   }
+
+  #trieve-search-modal.ecommerce {
+    @apply top-1 max-w-[90rem] w-[95vw] pt-10 px-4 rounded-lg;
+
+    &:not(.trieve-popup-modal) {
+      @apply top-1 px-0 pt-0;
+    }
+
+    &.trieve-popup-modal {
+      @apply max-w-[90rem] pt-10 px-4;
+    }
+  }
+
 }
 
 body {

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

@@ -85,7 +85,7 @@ const Modal = () => {
         group: ChunkGroup;
         betterGroupName?: string;
       }>;
-      if (customEvent.detail.group) {
+      if (customEvent.detail.group && !props.inline) {
         setOpen(true);
         if (customEvent.detail.betterGroupName) {
           customEvent.detail.group.name = customEvent.detail.betterGroupName;
@@ -111,6 +111,8 @@ const Modal = () => {
       }>;
 
       const defaultMode = props.defaultSearchMode || "search";
+      if (props.inline) return;
+
       if (defaultMode === "chat") {
         setOpen(true);
         setMode("chat");
@@ -226,13 +228,13 @@ const Modal = () => {
             </div>
             <div
               className={
-                mode === "chat" && !fullscreenPdfState ? " chat-container" : " "
+                mode === "chat" && !fullscreenPdfState ? "chat-container" : ""
               }
-              style={{
+              style={props.type == "pdf" ? {
                 display:
                   mode === "chat" && !fullscreenPdfState ? "block" : "none",
                 maxHeight: fullscreenPdfState ? "none" : "60vh",
-              }}
+              }: {}}
             >
               <ChatMode />
             </div>

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

@@ -35,6 +35,7 @@ export const useFollowupQuestions = () => {
         trieve: trieveSDK,
         abortController,
         group: currentGroup,
+        query,
         count: props.numberOfSuggestions ?? 3,
         context: "You are an assistant searching through a docs website"
       });

server/src/public/page.html

@@ -418,6 +418,21 @@
       .brand-name {
         font-weight: 500;
       }
+
+      #trieve-search-modal.ecommerce:not(.trieve-popup-modal) {
+        max-width: 20rem !important;
+        @media (min-width: 768px) {
+          max-width: 33rem !important;
+        }
+        @media (min-width: 1024px) {
+          max-width: 30rem !important;
+        }
+
+        @media (min-width: 1536px) {
+          max-width: 38rem !important;
+        }
+      }
+
     </style>
 
     <script type="module">