feat: Click on the relevant question tag to continue searching for answers #2247 (#2320)

### What problem does this PR solve?

feat: Click on the relevant question tag to continue searching for
answers #2247

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/search/hooks.ts

@@ -4,7 +4,7 @@ import { useSendMessageWithSse } from '@/hooks/logic-hooks';
 import { IAnswer } from '@/interfaces/database/chat';
 import api from '@/utils/api';
 import { isEmpty } from 'lodash';
-import { useCallback, useEffect, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 
 export const useSendQuestion = (kbIds: string[]) => {
   const { send, answer, done } = useSendMessageWithSse(api.ask);
@@ -18,6 +18,7 @@ export const useSendQuestion = (kbIds: string[]) => {
     data: mindMap,
     loading: mindMapLoading,
   } = useFetchMindMap();
+  const [searchStr, setSearchStr] = useState<string>('');
 
   const sendQuestion = useCallback(
     (question: string) => {
@@ -34,10 +35,26 @@ export const useSendQuestion = (kbIds: string[]) => {
     [send, testChunk, kbIds, fetchRelatedQuestions, fetchMindMap],
   );
 
+  const handleSearchStrChange: ChangeEventHandler<HTMLInputElement> =
+    useCallback((e) => {
+      setSearchStr(e.target.value);
+    }, []);
+
+  const handleClickRelatedQuestion = useCallback(
+    (question: string) => () => {
+      setSearchStr(question);
+      sendQuestion(question);
+    },
+    [sendQuestion],
+  );
+
   useEffect(() => {
     if (!isEmpty(answer)) {
       setCurrentAnswer(answer);
     }
+    return () => {
+      setCurrentAnswer({} as IAnswer);
+    };
   }, [answer]);
 
   useEffect(() => {
@@ -54,5 +71,8 @@ export const useSendQuestion = (kbIds: string[]) => {
     relatedQuestions: relatedQuestions?.slice(0, 5) ?? [],
     mindMap,
     mindMapLoading,
+    handleClickRelatedQuestion,
+    searchStr,
+    handleSearchStrChange,
   };
 };

web/src/pages/search/index.less

@@ -1,10 +1,17 @@
 .searchPage {
   .card {
     width: 100%;
+    :global(.ant-card-body) {
+      padding: 14px;
+    }
+    p {
+      margin: 0;
+    }
   }
   .tag {
     padding: 4px 8px;
     font-size: 14px;
+    cursor: pointer;
   }
 }
 
@@ -56,3 +63,12 @@
     padding-right: 10px;
   }
 }
+.answerWrapper {
+  background-color: #e6f4ff;
+  padding: 14px;
+  margin-top: 16px;
+  border-radius: 8px;
+  & > p {
+    margin: 0;
+  }
+}

web/src/pages/search/index.tsx

@@ -19,11 +19,14 @@ const SearchPage = () => {
   const list = useSelectTestingResult();
   const {
     sendQuestion,
+    handleClickRelatedQuestion,
+    handleSearchStrChange,
     answer,
     sendingLoading,
     relatedQuestions,
     mindMap,
     mindMapLoading,
+    searchStr,
   } = useSendQuestion(checkedList);
 
   return (
@@ -37,18 +40,24 @@ const SearchPage = () => {
           <Flex className={styles.content}>
             <section className={styles.main}>
               <Search
+                value={searchStr}
+                onChange={handleSearchStrChange}
                 placeholder="input search text"
                 onSearch={sendQuestion}
                 size="large"
                 loading={sendingLoading}
                 disabled={checkedList.length === 0}
               />
-              <MarkdownContent
-                loading={sendingLoading}
-                content={answer.answer}
-                reference={answer.reference ?? ({} as IReference)}
-                clickDocumentButton={() => {}}
-              ></MarkdownContent>
+              {answer.answer && (
+                <div className={styles.answerWrapper}>
+                  <MarkdownContent
+                    loading={sendingLoading}
+                    content={answer.answer}
+                    reference={answer.reference ?? ({} as IReference)}
+                    clickDocumentButton={() => {}}
+                  ></MarkdownContent>
+                </div>
+              )}
               <List
                 dataSource={list.chunks}
                 renderItem={(item) => (
@@ -68,7 +77,11 @@ const SearchPage = () => {
                 <Card>
                   <Flex wrap="wrap" gap={'10px 0'}>
                     {relatedQuestions?.map((x, idx) => (
-                      <Tag key={idx} className={styles.tag}>
+                      <Tag
+                        key={idx}
+                        className={styles.tag}
+                        onClick={handleClickRelatedQuestion(x)}
+                      >
                         {x}
                       </Tag>
                     ))}