feat: send question with retrieval api #2247 (#2272)

### What problem does this PR solve?
feat: send question with retrieval api #2247

### Type of change


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

web/src/pages/search/index.tsx

@@ -1,37 +1,65 @@
-import { Layout } from 'antd';
-import React from 'react';
+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 { useSendQuestion } from './hooks';
 import SearchSidebar from './sidebar';
 
-const { Header, Content, Footer } = Layout;
+import styles from './index.less';
+
+const { Content } = Layout;
+const { Search } = Input;
 
 const SearchPage = () => {
+  const [checkedList, setCheckedList] = useState<string[]>([]);
+  const list = useSelectTestingResult();
+  const { sendQuestion, message, sendingLoading } =
+    useSendQuestion(checkedList);
+
   return (
-    <Layout hasSider>
-      <SearchSidebar></SearchSidebar>
-      <Layout style={{ marginInlineStart: 200 }}>
-        <Header style={{ padding: 0 }} />
-        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
-          <div
-            style={{
-              padding: 24,
-              textAlign: 'center',
-            }}
-          >
-            <p>long content</p>
-            {
-              // indicates very long content
-              Array.from({ length: 100 }, (_, index) => (
-                <React.Fragment key={index}>
-                  {index % 20 === 0 && index ? 'more' : '...'}
-                  <br />
-                </React.Fragment>
-              ))
-            }
-          </div>
+    <Layout className={styles.searchPage}>
+      <SearchSidebar
+        checkedList={checkedList}
+        setCheckedList={setCheckedList}
+      ></SearchSidebar>
+      <Layout>
+        <Content>
+          <Flex className={styles.content}>
+            <section className={styles.main}>
+              <Search
+                placeholder="input search text"
+                onSearch={sendQuestion}
+                size="large"
+              />
+              <MessageItem
+                item={message}
+                nickname="You"
+                reference={message.reference ?? ({} as IReference)}
+                loading={sendingLoading}
+                index={0}
+              ></MessageItem>
+              <List
+                dataSource={list.chunks}
+                renderItem={(item) => (
+                  <List.Item>
+                    <Card>
+                      <Space>
+                        <ImageWithPopover id={item.img_id}></ImageWithPopover>
+                        <HightLightMarkdown>
+                          {item.highlight}
+                        </HightLightMarkdown>
+                      </Space>
+                    </Card>
+                  </List.Item>
+                )}
+              />
+            </section>
+            <section className={styles.graph}></section>
+          </Flex>
         </Content>
-        <Footer style={{ textAlign: 'center' }}>
-          Ant Design ©{new Date().getFullYear()} Created by Ant UED
-        </Footer>
       </Layout>
     </Layout>
   );