From 70a187cc18d07a5f26e342393e4ebab95cb1a3bf Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Wed, 8 Mar 2023 23:09:15 +0800
Subject: [PATCH] chore: update ask AI trigger (#1316)

---
 web/src/components/AskAIDialog.tsx | 40 ++++++++++++++++++------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/web/src/components/AskAIDialog.tsx b/web/src/components/AskAIDialog.tsx
index 084dd616..aa86e412 100644
--- a/web/src/components/AskAIDialog.tsx
+++ b/web/src/components/AskAIDialog.tsx
@@ -20,6 +20,7 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
   const fetchingState = useLoading(false);
   const [historyList, setHistoryList] = useState<History[]>([]);
   const [isEnabled, setIsEnabled] = useState<boolean>(true);
+  const [question, setQuestion] = useState<string>("");
 
   useEffect(() => {
     api.checkOpenAIEnabled().then(({ data }) => {
@@ -33,21 +34,20 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
     destroy();
   };
 
-  const handleQuestionTextareaKeyDown = async (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      const question = event.currentTarget.value;
-      event.currentTarget.value = "";
+  const handleQuestionTextareaChange = async (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setQuestion(event.currentTarget.value);
+  };
 
-      fetchingState.setLoading();
-      try {
-        await askQuestion(question);
-      } catch (error: any) {
-        console.error(error);
-        toastHelper.error(error.response.data.error);
-      }
-      fetchingState.setFinish();
+  const handleSendQuestionButtonClick = async () => {
+    fetchingState.setLoading();
+    try {
+      await askQuestion(question);
+    } catch (error: any) {
+      console.error(error);
+      toastHelper.error(error.response.data.error);
     }
+    setQuestion("");
+    fetchingState.setFinish();
   };
 
   const askQuestion = async (question: string) => {
@@ -79,7 +79,13 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
         </button>
       </div>
       <div className="dialog-content-container !w-112 max-w-full">
-        <Textarea className="w-full" placeholder="Ask anything…" onKeyDown={handleQuestionTextareaKeyDown} />
+        <div className="w-full relative">
+          <Textarea className="w-full" placeholder="Ask anything…" value={question} onChange={handleQuestionTextareaChange} />
+          <Icon.Send
+            className="cursor-pointer w-7 p-1 h-auto rounded-md bg-gray-100 dark:bg-zinc-800 absolute right-2 bottom-1.5 shadow hover:opacity-80"
+            onClick={handleSendQuestionButtonClick}
+          />
+        </div>
         {fetchingState.isLoading && (
           <p className="w-full py-2 mt-4 flex flex-row justify-center items-center">
             <Icon.Loader className="w-5 h-auto animate-spin" />
@@ -88,10 +94,12 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
         {historyList.map((history, index) => (
           <div key={index} className="w-full flex flex-col justify-start items-start mt-4 space-y-2">
             <div className="w-full flex flex-row justify-start items-start pr-6">
-              <span className="word-break rounded shadow px-3 py-2 opacity-80 bg-gray-100 dark:bg-zinc-700">{history.question}</span>
+              <span className="word-break rounded-lg rounded-tl-none px-3 py-2 opacity-80 bg-gray-100 dark:bg-zinc-700">
+                {history.question}
+              </span>
             </div>
             <div className="w-full flex flex-row justify-end items-start pl-8 space-x-2">
-              <div className="memo-content-wrapper !w-auto flex flex-col justify-start items-start rounded shadow px-3 py-2 bg-gray-100 dark:bg-zinc-700">
+              <div className="memo-content-wrapper !w-auto flex flex-col justify-start items-start rounded-lg rounded-tr-none px-3 py-2 bg-gray-100 dark:bg-zinc-700">
                 <div className="memo-content-text">{marked(history.answer)}</div>
               </div>
               <Icon.Bot className="mt-2 flex-shrink-0 mr-1 w-6 h-auto opacity-80" />