feature: inline parameter

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/package.json

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

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

@@ -60,6 +60,7 @@ export const AIInitialMessage = () => {
         </p>
         <GroupChatImgCarousel />
       </span>
+      <p></p>
       {!messages.length && !currentGroup ? <SuggestedQuestions /> : null}
     </>
   );

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

@@ -25,30 +25,16 @@ export const ChatMessage = ({
   const { props } = useModalState();
 
   return (
-    <>
+    <div key={idx}>
       {message.type == "user" ? (
-        <>
-          <span className="ai-avatar user">
-            <i className="fa-regular fa-user"></i>
-            <p
-              className="tag"
-              // style mostly transparent brand color
-              style={{
-                backgroundColor: props.brandColor
-                  ? `${props.brandColor}18`
-                  : "#CB53EB18",
-                color: props.brandColor ?? "#CB53EB",
-              }}
-            >
-              User
-            </p>
-          </span>
+        <div className="" key={idx}>
           <div className={message.type}>
             <span className="user-text"> {message.text}</span>
           </div>
-        </>
+        </div>
       ) : (
-        <>
+        <div className={props.inline ? "": "message-wrapper"} key={idx}>
+          {!props.inline && 
           <span className="ai-avatar assistant">
             {props.brandLogoImgSrcUrl ? (
               <img
@@ -70,10 +56,11 @@ export const ChatMessage = ({
               AI assistant
             </p>
           </span>
+            }
           <Message key={idx} message={message} idx={idx} />
-        </>
+        </div>
       )}
-    </>
+    </div>
   );
 };
 
@@ -84,7 +71,7 @@ export const Message = ({
   idx: number;
   message: Message;
 }) => {
-  const { rateChatCompletion } = useChatState();
+  const { rateChatCompletion, isDoneReading } = useChatState();
   const [positive, setPositive] = React.useState<boolean | null>(null);
   const [copied, setCopied] = React.useState<boolean>(false);
   const { props } = useModalState();
@@ -187,12 +174,12 @@ export const Message = ({
         <div
           className={`system ${props.type === "ecommerce" ? "ecommerce" : ""}`}
         >
-          {message.additional && props.type === "ecommerce" && (
+          {message.additional && props.type === "ecommerce" && !props.inline &&(
             <div className="additional-image-links">
               <Carousel>{ecommerceItems}</Carousel>
             </div>
           )}
-          {youtubeItems && youtubeItems.length > 0 && (
+          {youtubeItems && youtubeItems.length > 0 && !props.inline && (
             <div className="additional-image-links">
               <Carousel>{youtubeItems}</Carousel>
             </div>
@@ -260,7 +247,9 @@ export const Message = ({
                   </div>
                 )
               : null}
-            <div className="feedback-wrapper">
+              {props.followupQuestions && 
+                <FollowupQueries /> }
+            {isDoneReading && <div className="feedback-wrapper">
               <span className="spacer"></span>
               <div className="feedback-icons">
                 {copied ? (
@@ -306,10 +295,8 @@ export const Message = ({
                   <i className="fa-regular fa-thumbs-down"></i>
                 </button>
               </div>
-            </div>
+            </div>}
           </div>
-          {props.followupQuestions && 
-            <FollowupQueries /> }
         </div>
       ) : null}
     </div>

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

@@ -4,6 +4,8 @@ import { AIInitialMessage } from "./AIInitalMessage";
 import { useChatState } from "../../utils/hooks/chat-context";
 import { ChatMessage } from "./ChatMessage";
 import { Tags } from "../Tags";
+import { SparklesIcon } from "../icons";
+import { SuggestedQuestions } from "./SuggestedQuestions";
 
 export const ChatMode = () => {
   const {
@@ -37,7 +39,25 @@ export const ChatMode = () => {
 
   return (
     <Suspense>
-      <div className="chat-outer-wrapper" ref={modalRef}>
+      {props.inline && messages.length ? <div className="inline-chat-header">
+        <div>
+          <p>
+            {props.inlineHeader}
+          </p>
+        </div>
+         <button
+          onClick={() =>
+              isDoneReading
+                ? clearConversation()
+                : stopGeneratingMessage()
+          }
+          className="clear-button"
+        >
+          {isDoneReading ? "Clear" : "Stop"}
+        </button> 
+      </div>: null}
+      <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 +79,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" : ""
@@ -68,14 +88,29 @@ export const ChatMode = () => {
           <div className="ai-message">
             <div className="chat-modal-wrapper">
               <div className="ai-message initial-message">
-                <AIInitialMessage />
+                {props.inline ?  
+                  <>
+                    {!messages.length && !currentGroup ? 
+                    <>
+                    <div className="ai-avatar">
+                      {props.brandLogoImgSrcUrl ? (
+                        <img
+                          src={props.brandLogoImgSrcUrl}
+                          alt={props.brandName || "Brand logo"}
+                        />
+                      ) : (
+                        <SparklesIcon />
+                      )}
+                    </div>
+                    </>
+                    : null}
+                    {!messages.length && !currentGroup ? <SuggestedQuestions /> : null}
+                  </>
+                : <AIInitialMessage />
+                }
               </div>
-              {messages.map((chat, i) => (
-                <div key={i} className="message-wrapper">
-                  {chat.map((message, idx) => (
-                    <ChatMessage key={idx} idx={idx} message={message} />
-                  ))}
-                </div>
+              {messages.map((message, i) => (
+                <ChatMessage key={`${i}-message`} idx={i} message={message} />
               ))}
             </div>
           </div>
@@ -99,6 +134,7 @@ export const ChatMode = () => {
           </div>
         )}
         <div className="input-wrapper chat">
+          {!props.inline ?
           <button
             onClick={() => {
               if (currentGroup) {
@@ -109,7 +145,7 @@ export const ChatMode = () => {
             className="back-icon"
           >
             <i className="fa-solid fa-chevron-left"></i>
-          </button>
+          </button> : null}
           <form
             onSubmit={(e) => {
               e.preventDefault();
@@ -121,15 +157,27 @@ export const ChatMode = () => {
             <input
               ref={chatInput}
               value={currentQuestion}
+              className={`${props.inline ? "inline-input": ""}`}
               onChange={(e) => setCurrentQuestion(e.target.value)}
               placeholder={`Ask me anything about${
                 props.brandName ? ` ${props.brandName}` : ""
               }`}
             />
           </form>
+          {props.inline ?
+          <button
+            onClick={() => {
+              if (currentQuestion) {
+                  askQuestion(currentQuestion)
+              }
+            }}
+            className="inline-submit-icon"
+          >
+            <i className="fa-solid fa-paper-plane"></i>
+          </button> : null}
         </div>
         <div className={`trieve-footer chat ${props.type}`}>
-          {currentQuestion || messages.length ? (
+          {(!props.inline) && (currentQuestion || messages.length) ? (
             <div className="chat-controls-row">
               <button
                 onClick={() =>

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

@@ -1,17 +1,23 @@
 import React from "react";
 import { useSuggestedQuestions } from "../../utils/hooks/useSuggestedQuestions";
 import { useChatState } from "../../utils/hooks/chat-context";
+import { useModalState } from "../../utils/hooks/modal-context";
 export const SuggestedQuestions = () => {
   const { askQuestion, setCurrentQuestion } = useChatState();
   const {
     suggestedQuestions,
     isLoadingSuggestedQueries,
     refetchSuggestedQuestion,
   } = useSuggestedQuestions();
+
+  const {
+    props
+  } = useModalState()
+
   return (
     <>
-      <p></p>
-      <div>
+      <div className={props.inline ? "inline-suggestions-wrapper": ""}>
+        {!props.inline &&
         <p className="header">
           <button
             onClick={refetchSuggestedQuestion}
@@ -22,13 +28,13 @@ export const SuggestedQuestions = () => {
             <i className="fa-solid fa-arrow-rotate-right"></i>
           </button>{" "}
           Example questions
-        </p>
-        <div className="questions">
-          {!suggestedQuestions.length && (
+        </p>}
+        <div className={`questions ${props.inline ? "inline-questions" : ""}`}>
+          {!props.inline && !suggestedQuestions.length ? (
             <p className="suggested-question empty-state-loading">
               Loading example questions...
             </p>
-          )}
+          ) : null}
           {suggestedQuestions.length ? (
             <>
               {suggestedQuestions.map((q) => (

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

@@ -7,9 +7,9 @@ export const ModeSwitch = () => {
 
   return (
     <div
-      className={`mode-switch-wrapper ${mode} ${query ? "has-query " : ""}${
-        props.type
-      }`.trim()}
+      className={`mode-switch-wrapper ${mode} ${query ? "has-query " : ""}
+            ${props.inline ? "" : "mode-switch-popup"}
+       ${props.type}`.trim()}
     >
       <div>
         <button