add inline parameter

Author: cdxker

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

@@ -1,12 +1,12 @@
+/* prettier-ignore-start */
+
 /* eslint-disable */
 
 // @ts-nocheck
 
 // noinspection JSUnusedGlobalSymbols
 
-// 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.
+// This file is auto-generated by TanStack Router
 
 import { createFileRoute } from '@tanstack/react-router'
 
@@ -22,13 +22,11 @@ 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))
@@ -95,6 +93,8 @@ export const routeTree = rootRoute
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 
+/* prettier-ignore-end */
+
 /* ROUTE_MANIFEST_START
 {
   "routes": {

clients/search-component/example/src/routes/ecommerce.tsx

@@ -33,10 +33,11 @@ export default function ECommerce() {
   );
   const defaultSearchMode =
     import.meta.env.VITE_DEFAULT_SEARCH_MODE ?? "search";
-  
   const defaultAIQuestions = (
     import.meta.env.VITE_DEFAULT_AI_QUESTIONS ?? ""
   ).split(",");
+  const inline = 
+    import.meta.env.VITE_INLINE == "true";
 
   const [theme, setTheme] = useState<"light" | "dark">("light");
   const [component, setComponent] = useState(0);
@@ -108,6 +109,7 @@ export default function ECommerce() {
               floatingSearchIconPosition={floatingSearchIconPosition}
               showFloatingSearchIcon={showFloatingSearchIcon}
               showFloatingInput={showFloatingInput}
+              inline={inline}
             />
           </>
         ) : (

clients/search-component/example/src/routes/index.lazy.tsx

@@ -34,6 +34,8 @@ export default function Home() {
   const defaultAiQuestions = (
     import.meta.env.VITE_DEFAULT_AI_QUESTIONS ?? "What is Trieve?,How to perform autocomplete search?,How do I install the TS SDK?"
   ).split(",");
+  const inline = 
+    import.meta.env.VITE_INLINE == "true";
 
   const [theme, setTheme] = useState<"light" | "dark">("light");
   const [component, setComponent] = useState(0);
@@ -159,6 +161,7 @@ export default function Home() {
               showFloatingButton={showFloatingButton}
               showFloatingSearchIcon={showFloatingSearchIcon}
               showFloatingInput={showFloatingInput}
+              inline={inline}
             />
           </>
         ) : (

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

@@ -37,7 +37,9 @@ export const ChatMode = () => {
 
   return (
     <Suspense>
-      <div className="chat-outer-wrapper" ref={modalRef}>
+      <div className={`chat-outer-wrapper ${props.inline ? "": "chat-outer-popup"}`} ref={modalRef}>
+
+        {!props.inline &&
         <div
           className={`close-modal-button chat ${props.type}`}
           onClick={() => setOpen(false)}
@@ -59,7 +61,7 @@ export const ChatMode = () => {
             <line x1="6" y1="6" x2="18" y2="18" />
           </svg>
           <span>Close</span>
-        </div>
+        </div>}
         <div
           className={`system-information-wrapper${
             currentGroup ? " with-group" : ""

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

@@ -23,12 +23,16 @@ body {
   }
 
   #trieve-search-modal {
-    @apply animate-contentShow scroll-smooth fixed top-[calc(40%-30vh)] left-[50%] max-h-[60vh] w-[90vw] sm:max-w-[800px] -translate-x-[50%] rounded-lg shadow-2xl focus:outline-none z-[999] overflow-hidden text-base;
+    @apply animate-contentShow scroll-smooth max-h-[60vh] w-[90vw] sm:max-w-[800px] rounded-lg focus:outline-none overflow-hidden text-base;
 
     color: var(--tv-zinc-950);
     background-color: var(--tv-zinc-50);
     font-family: var(--tv-prop-brand-font-family);
 
+    &.trieve-popup-modal {
+      @apply top-[calc(40%-30vh)] left-[50%] shadow-2xl fixed -translate-x-[50%];
+    }
+
     .group-chat-carousel {
       @apply pl-4 flex gap-2 w-full overflow-x-auto;
     }
@@ -67,7 +71,11 @@ body {
       }
 
       .chat-outer-wrapper {
-        @apply justify-between w-full h-full mt-10 sm:mt-12;
+        @apply justify-between w-full h-full;
+
+        &.chat-outer-popup {
+          @apply mt-10 sm:mt-12;
+        }
       }
     }
 
@@ -132,7 +140,7 @@ body {
     }
 
     .mode-switch-wrapper {
-      @apply flex items-center justify-end mt-2 absolute top-2.5 right-4 z-30 font-medium;
+      @apply flex items-center justify-end mt-2 absolute font-medium;
 
       &.docs.chat, &.pdf.chat {
         @apply top-0;
@@ -545,17 +553,26 @@ body {
 
     @media (max-height: 800px) {
       .chat-outer-wrapper {
-        @apply pb-6;
+        &.chat-outer-popup {
+          @apply pb-6;
+        }
       }
+
     }
     @media (max-height: 600px) {
       .chat-outer-wrapper {
-        @apply pb-16;
+        &.chat-outer-popup {
+          @apply pb-16;
+        }
       }
     }
 
     .chat-outer-wrapper {
-      @apply flex flex-col mt-12 px-4 scroll-smooth;
+      @apply flex flex-col px-4 scroll-smooth mt-0;
+
+      &.chat-outer-popup {
+        @apply mt-12;
+      }
 
       .ai-message {
         .message-wrapper {

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

@@ -175,31 +175,35 @@ const Modal = () => {
 
   return (
     <>
-      <OpenModalButton
+      {!props.inline && <OpenModalButton
         setOpen={() => {
           startTransition(() => {
             setOpen(true);
             setMode(props.defaultSearchMode || "search");
           });
         }}
-      />
-      {open && (
+      />}
+      {(props.inline || open) && (
         <>
+          {!props.inline &&
           <div
             onClick={() => {
               setOpen(false);
             }}
             id="trieve-search-modal-overlay"
             style={{ zIndex: props.zIndex ?? 1000 }}
           ></div>
+          }
           <div
             id="trieve-search-modal"
             className={`${mode === "chat" ? "chat-modal-mobile " : ""} ${
               props.theme === "dark" ? "dark " : ""
+            } ${
+              props.inline ? "trieve-inline-modal" : "trieve-popup-modal"
             } ${props.type}`.trim()}
             style={{ zIndex: props.zIndex ? props.zIndex + 1 : 1001 }}
           >
-            {props.allowSwitchingModes && <ModeSwitch />}
+            {props.allowSwitchingModes && !props.inline && <ModeSwitch />}
             <div
               className="search-container"
               style={{ display: mode === "search" ? "block" : "none" }}

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

@@ -96,6 +96,7 @@ export type ModalProps = {
     mode: SearchModes;
     removeListeners?: boolean;
   }[];
+  inline: boolean;
   zIndex?: number;
   showFloatingButton?: boolean;
   floatingButtonPosition?:
@@ -146,6 +147,7 @@ const defaultProps = {
   floatingSearchIconPosition: "right" as "left" | "right",
   showFloatingSearchIcon: false,
   showFloatingInput: false,
+  inline: false,
 };
 
 const ModalContext = createContext<{