fix

QuivrHQ · Jan 28, 2024 · 0ca00ff · 0ca00ff
1 parent 21f45de
commit 0ca00ff
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -1,7 +1,7 @@
 "use client";
-import { useTranslation } from "react-i18next";
 
-import Button from "@/lib/components/ui/Button";
+import Icon from "@/lib/components/ui/Icon/Icon";
+import { LoaderIcon } from "@/lib/components/ui/LoaderIcon/LoaderIcon";
 
 import { OnboardingQuestions } from "./components";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
@@ -11,7 +11,11 @@ export const ChatInput = (): JSX.Element => {
   const { setMessage, submitQuestion, generatingAnswer, message } =
     useChatInput();
 
-  const { t } = useTranslation(["chat"]);
+  const handleSubmitQuestion = () => {
+    if (message.trim() !== "") {
+      submitQuestion();
+    }
+  };
 
   return (
     <>
@@ -21,30 +25,27 @@ export const ChatInput = (): JSX.Element => {
           data-testid="chat-input-form"
           onSubmit={(e) => {
             e.preventDefault();
-            submitQuestion();
+            handleSubmitQuestion();
           }}
           className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
         >
           <div className="flex flex-1">
             <ChatEditor
               message={message}
               setMessage={setMessage}
-              onSubmit={submitQuestion}
+              onSubmit={handleSubmitQuestion}
             />
           </div>
-
-          <div className="flex flex-row items-center gap-4">
-            <Button
-              className="px-3 py-2 sm:px-4 sm:py-2 bg-primary border-0"
-              type="submit"
-              isLoading={generatingAnswer}
-              data-testid="submit-button"
-            >
-              {generatingAnswer
-                ? t("thinking", { ns: "chat" })
-                : t("chat", { ns: "chat" })}
-            </Button>
-          </div>
+          {generatingAnswer ? (
+            <LoaderIcon size="large" color="accent" />
+          ) : (
+            <Icon
+              name="followUp"
+              size="large"
+              color="accent"
+              disabled={!message}
+            />
+          )}
         </form>
       </div>
     </>

diff --git a/frontend/lib/components/ui/Icon/Icon.module.scss b/frontend/lib/components/ui/Icon/Icon.module.scss
@@ -46,5 +46,6 @@
 }
 
 .disabled {
+  color: Colors.$black;
   opacity: 0.2;
 }
diff --git a/frontend/lib/helpers/iconList.ts b/frontend/lib/helpers/iconList.ts
@@ -1,5 +1,6 @@
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { FaCheckCircle, FaRegUserCircle } from "react-icons/fa";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
 import { IconType } from "react-icons/lib";
 import {
   LuBrain,
@@ -18,6 +19,7 @@ export const iconList: { [name: string]: IconType } = {
   chevronDown: LuChevronDown,
   chevronRight: LuChevronRight,
   copy: LuCopy,
+  followUp: FaArrowUpFromBracket,
   hastag: RiHashtag,
   loader: AiOutlineLoading3Quarters,
   search: LuSearch,