feat: add send message button to thread input

Introduce a dedicated ActionIcon for sending messages in the ThreadChatInput component. Remove the redundant right section in the input field and improve code organization.
recally-io · Sep 11, 2024 · 7a5380f · 7a5380f
1 parent 0910aea
commit 7a5380f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/web/src/components/thread-input.jsx b/web/src/components/thread-input.jsx
@@ -259,6 +259,19 @@ export function ThreadChatInput() {
             {selectModel()}
             {selectSendHotKey()}
           </Group>
+          <ActionIcon
+            variant="filled"
+            radius="lg"
+            aria-label="Settings"
+            disabled={text === "" || sendThreadMessage.isPending}
+            onClick={handleSendMessage}
+          >
+            {sendThreadMessage.isPending ? (
+              <Icon icon="svg-spinners:180-ring" />
+            ) : (
+              <Icon icon="tabler:arrow-up"></Icon>
+            )}
+          </ActionIcon>
         </Group>
       </Flex>
     );
@@ -293,21 +306,6 @@ export function ThreadChatInput() {
                 border: "none",
               },
             }}
-            rightSection={
-              <ActionIcon
-                variant="filled"
-                radius="lg"
-                aria-label="Settings"
-                disabled={text === "" || sendThreadMessage.isPending}
-                onClick={handleSendMessage}
-              >
-                {sendThreadMessage.isPending ? (
-                  <Icon icon="svg-spinners:180-ring" />
-                ) : (
-                  <Icon icon="tabler:arrow-up"></Icon>
-                )}
-              </ActionIcon>
-            }
             value={text}
             onChange={(e) => setText(e.currentTarget.value)}
             inputContainer={renderAttachmentTextArea}

diff --git a/web/src/libs/query-context.jsx b/web/src/libs/query-context.jsx
@@ -122,7 +122,6 @@ export function QueryContextProvider({ children }) {
       queryClient.invalidateQueries({
         queryKey: ["list-threads", assistantId],
       });
-      navigate(`/assistants/${assistantId}/threads/${data.id}`);
     },
     enabled: isLogin && !!assistantId,
   });
@@ -184,7 +183,9 @@ export function QueryContextProvider({ children }) {
         payload,
       );
       if (isNewThread) {
-        queryClient.invalidateQueries(["get-thread", newThreadId]);
+        navigate(`/assistants/${assistantId}/threads/${newThreadId}`, {
+          replace: true,
+        });
       }
       return res.data;
     },