feat: Search for the answers you want based on the selected knowledge base #2247 (#2287)

### What problem does this PR solve?

feat: Search for the answers you want based on the selected knowledge
base #2247

### Type of change


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

web/src/pages/search/hooks.ts

@@ -1,26 +1,19 @@
-import { MessageType } from '@/constants/chat';
 import { useTestChunkRetrieval } from '@/hooks/knowledge-hooks';
 import { useSendMessageWithSse } from '@/hooks/logic-hooks';
+import { IAnswer } from '@/interfaces/database/chat';
 import api from '@/utils/api';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { IMessage } from '../chat/interface';
+import { isEmpty } from 'lodash';
+import { useCallback, useEffect, useState } from 'react';
 
 export const useSendQuestion = (kbIds: string[]) => {
   const { send, answer, done } = useSendMessageWithSse(api.ask);
   const { testChunk, loading } = useTestChunkRetrieval();
   const [sendingLoading, setSendingLoading] = useState(false);
-
-  const message: IMessage = useMemo(() => {
-    return {
-      id: '',
-      content: answer.answer,
-      role: MessageType.Assistant,
-      reference: answer.reference,
-    };
-  }, [answer]);
+  const [currentAnswer, setCurrentAnswer] = useState({} as IAnswer);
 
   const sendQuestion = useCallback(
     (question: string) => {
+      setCurrentAnswer({} as IAnswer);
       setSendingLoading(true);
       send({ kb_ids: kbIds, question });
       testChunk({ kb_id: kbIds, highlight: true, question });
@@ -28,11 +21,17 @@ export const useSendQuestion = (kbIds: string[]) => {
     [send, testChunk, kbIds],
   );
 
+  useEffect(() => {
+    if (!isEmpty(answer)) {
+      setCurrentAnswer(answer);
+    }
+  }, [answer]);
+
   useEffect(() => {
     if (done) {
       setSendingLoading(false);
     }
   }, [done]);
 
-  return { sendQuestion, message, loading, sendingLoading };
+  return { sendQuestion, loading, sendingLoading, answer: currentAnswer };
 };

web/src/pages/search/index.less

@@ -1,5 +1,7 @@
 .searchPage {
-  // height: 100%;
+  .card {
+    width: 100%;
+  }
 }
 
 .searchSide {

web/src/pages/search/index.tsx

@@ -1,10 +1,10 @@
 import HightLightMarkdown from '@/components/highlight-markdown';
 import { ImageWithPopover } from '@/components/image';
-import MessageItem from '@/components/message-item';
 import { useSelectTestingResult } from '@/hooks/knowledge-hooks';
 import { IReference } from '@/interfaces/database/chat';
 import { Card, Flex, Input, Layout, List, Space } from 'antd';
 import { useState } from 'react';
+import MarkdownContent from '../chat/markdown-content';
 import { useSendQuestion } from './hooks';
 import SearchSidebar from './sidebar';
 
@@ -16,8 +16,7 @@ const { Search } = Input;
 const SearchPage = () => {
   const [checkedList, setCheckedList] = useState<string[]>([]);
   const list = useSelectTestingResult();
-  const { sendQuestion, message, sendingLoading } =
-    useSendQuestion(checkedList);
+  const { sendQuestion, answer, sendingLoading } = useSendQuestion(checkedList);
 
   return (
     <Layout className={styles.searchPage}>
@@ -33,19 +32,20 @@ const SearchPage = () => {
                 placeholder="input search text"
                 onSearch={sendQuestion}
                 size="large"
-              />
-              <MessageItem
-                item={message}
-                nickname="You"
-                reference={message.reference ?? ({} as IReference)}
                 loading={sendingLoading}
-                index={0}
-              ></MessageItem>
+                disabled={checkedList.length === 0}
+              />
+              <MarkdownContent
+                loading={sendingLoading}
+                content={answer.answer}
+                reference={answer.reference ?? ({} as IReference)}
+                clickDocumentButton={() => {}}
+              ></MarkdownContent>
               <List
                 dataSource={list.chunks}
                 renderItem={(item) => (
                   <List.Item>
-                    <Card>
+                    <Card className={styles.card}>
                       <Space>
                         <ImageWithPopover id={item.img_id}></ImageWithPopover>
                         <HightLightMarkdown>