feature: add inline send icon

Author: cdxker

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

@@ -39,23 +39,21 @@ export const ChatMode = () => {
 
   return (
     <Suspense>
-      {(props.inline) && (currentQuestion || messages.length) ? <div className="inline-chat-header">
+      {props.inline && messages.length ? <div className="inline-chat-header">
         <div>
           <p>
             {props.inlineHeader}
           </p>
         </div>
          <button
           onClick={() =>
-            currentQuestion
-              ? askQuestion(currentQuestion)
-              : isDoneReading
+              isDoneReading
                 ? clearConversation()
                 : stopGeneratingMessage()
           }
           className="clear-button"
         >
-          {currentQuestion ? "Enter" : isDoneReading ? "Clear" : "Stop"}
+          {isDoneReading ? "Clear" : "Stop"}
         </button> 
       </div>: null}
       <div className={`chat-outer-wrapper ${props.inline ? "": "chat-outer-popup"}`} ref={modalRef}>
@@ -140,6 +138,7 @@ export const ChatMode = () => {
           </div>
         )}
         <div className="input-wrapper chat">
+          {!props.inline ?
           <button
             onClick={() => {
               if (currentGroup) {
@@ -150,7 +149,7 @@ export const ChatMode = () => {
             className="back-icon"
           >
             <i className="fa-solid fa-chevron-left"></i>
-          </button>
+          </button> : null}
           <form
             onSubmit={(e) => {
               e.preventDefault();
@@ -162,12 +161,24 @@ 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}`}>
           {(!props.inline) && (currentQuestion || messages.length) ? (

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

@@ -214,8 +214,9 @@ body {
     }
 
     .inline-chat-header {
-      @apply flex justify-between px-4 py-4 rounded-t-lg;
-      background-color: var(--tv-zinc-400);
+      @apply flex justify-between px-4 py-4 rounded-t-lg border-b-2;
+
+      background-color: var(--tv-zinc-100);
     }
 
     .chat-footer-wrapper {
@@ -228,6 +229,10 @@ body {
       background-color: var(--tv-prop-brand-color);
     }
 
+    .inline-submit-icon {
+      @apply top-[0.825rem] right-7 absolute z-20;
+    }
+
     .trieve-footer {
       @apply sticky px-3 items-center bottom-[1px] flex flex-col;
       background-color: var(--tv-zinc-50);
@@ -796,6 +801,10 @@ body {
         color: var(--tv-zinc-400);
       }
 
+      &.inline-input {
+        @apply pl-2;
+      }
+
       &:focus {
         border: 1px solid var(--tv-prop-brand-color);
       }

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

@@ -60,7 +60,7 @@ const ChatContext = createContext<{
 });
 
 function ChatProvider({ children }: { children: React.ReactNode }) {
-  const { query, trieveSDK, modalRef, setMode, setCurrentGroup } =
+  const { query, trieveSDK, setMode, setCurrentGroup } =
     useModalState();
   const [currentQuestion, setCurrentQuestion] = useState(query);
   const [currentTopic, setCurrentTopic] = useState("");

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

@@ -917,7 +917,7 @@ const PublicPageControls = () => {
                 </div>
                 <input
                   type="number"
-                  placeholder="1000"
+                  placeholder="3"
                   value={extraParams.numberOfSuggestions ?? 3}
                   onInput={(e) => {
                     setExtraParams("numberOfSuggestions", parseInt(e.currentTarget.value));