feat: implement message sending functionality in thread input component

recally-io · Sep 3, 2024 · bd96853 · bd96853
1 parent 75070b5
commit bd96853
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 30 deletions.
diff --git a/web/src/components/thread-input.jsx b/web/src/components/thread-input.jsx
@@ -79,6 +79,20 @@ export function ThreadChatInput() {
     }
   };
 
+  const handleSendMessage = async () => {
+    if (text.trim() !== "") {
+      const localText = text.trim();
+      const localImages = images;
+      setText("");
+      setImages([]);
+      await sendThreadMessage.mutateAsync({
+        model: chatModel,
+        text: localText,
+        images: localImages,
+      });
+    }
+  };
+
   const uploadImageButton = () => {
     return (
       <FileButton
@@ -212,7 +226,7 @@ export function ThreadChatInput() {
                     onClick={() => {
                       // Function to remove image
                       setImages((prevImages) =>
-                        prevImages.filter((image) => image !== imgUrl)
+                        prevImages.filter((image) => image !== imgUrl),
                       );
                     }}
                   >
@@ -256,24 +270,7 @@ export function ThreadChatInput() {
             disabled={sendThreadMessage.isPending}
             onKeyDown={async (e) => {
               e.stopPropagation();
-              getHotkeyHandler([
-                [
-                  sendKey,
-                  async () => {
-                    if (text.trim() !== "") {
-                      const localText = text.trim();
-                      const localImages = images
-                      setText("");
-                      setImages([])
-                      await sendThreadMessage.mutateAsync({
-                        model: chatModel,
-                        text: localText,
-                        images: localImages,
-                      });
-                    }
-                  },
-                ],
-              ])(e);
+              getHotkeyHandler([[sendKey, handleSendMessage]])(e);
             }}
             styles={{
               input: {
@@ -286,9 +283,7 @@ export function ThreadChatInput() {
                 radius="lg"
                 aria-label="Settings"
                 disabled={text === "" || sendThreadMessage.isPending}
-                onClick={async () => {
-                  await sendThreadMessage.mutateAsync();
-                }}
+                onClick={handleSendMessage}
               >
                 {sendThreadMessage.isPending ? (
                   <Icon icon="svg-spinners:180-ring" />

diff --git a/web/src/components/thread-sidebar.jsx b/web/src/components/thread-sidebar.jsx
@@ -75,7 +75,7 @@ export default function Sidebar() {
             data={listThreads.data}
             onChange={(item) => {
               var filteredItems = listThreads.data.filter(
-                (i) => i.value == item
+                (i) => i.value == item,
               );
               if (filteredItems.length > 0) {
                 toggleMobileSidebar();

diff --git a/web/src/libs/query-context.jsx b/web/src/libs/query-context.jsx
@@ -80,7 +80,7 @@ export function QueryContextProvider({ children }) {
     },
     onError: (error) => {
       toastError(
-        `Failed to upsert assistant ${assistantId} : ${error.message}`
+        `Failed to upsert assistant ${assistantId} : ${error.message}`,
       );
     },
   });
@@ -95,7 +95,7 @@ export function QueryContextProvider({ children }) {
     },
     onError: (error) => {
       toastError(
-        `Failed to delete assistant ${assistantId} : ${error.message}`
+        `Failed to delete assistant ${assistantId} : ${error.message}`,
       );
     },
   });
@@ -105,7 +105,7 @@ export function QueryContextProvider({ children }) {
       const res = await post(
         `/api/v1/assistants/${assistantId}/threads`,
         null,
-        data
+        data,
       );
       return res.data;
     },
@@ -124,7 +124,7 @@ export function QueryContextProvider({ children }) {
       const res = await post(
         `/api/v1/assistants/${assistantId}/threads/${threadId}/generate-title`,
         null,
-        {}
+        {},
       );
       return res.data;
     },
@@ -173,7 +173,7 @@ export function QueryContextProvider({ children }) {
       const res = await post(
         `/api/v1/assistants/${assistantId}/threads/${newThreadId}/messages`,
         null,
-        payload
+        payload,
       );
       return res.data;
     },
@@ -203,7 +203,7 @@ export function QueryContextProvider({ children }) {
     queryKey: ["get-thread", threadId],
     queryFn: async () => {
       const res = await get(
-        `/api/v1/assistants/${assistantId}/threads/${threadId}`
+        `/api/v1/assistants/${assistantId}/threads/${threadId}`,
       );
 
       return res.data || {};
@@ -233,7 +233,7 @@ export function QueryContextProvider({ children }) {
       const res = await put(
         `/api/v1/assistants/${assistantId}/threads/${threadId}`,
         null,
-        data
+        data,
       );
       return res.data;
     },