feat: add loading to ChatContainer and set font family to inter and add tooltip to Form.Item and download documents on the document list page (#136)

* feat: download documents on the document list page

* feat: add tooltip to Form.Item

* feat: set font family to inter

* feat: add loading to ChatContainer

web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx

@@ -50,7 +50,12 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
           </button>
         </Upload>
       </Form.Item>
-      <Form.Item name={'language'} label="Language" initialValue={'Chinese'}>
+      <Form.Item
+        name={'language'}
+        label="Language"
+        initialValue={'Chinese'}
+        tooltip="coming soon"
+      >
         <Select
           options={[
             { value: 'Chinese', label: 'Chinese' },
@@ -61,12 +66,14 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
       <Form.Item
         name={['prompt_config', 'empty_response']}
         label="Empty response"
+        tooltip="coming soon"
       >
         <Input placeholder="" />
       </Form.Item>
       <Form.Item
         name={['prompt_config', 'prologue']}
         label="Set an opener"
+        tooltip="coming soon"
         initialValue={"Hi! I'm your assistant, what can I do for you?"}
       >
         <Input.TextArea autoSize={{ minRows: 5 }} />
@@ -74,6 +81,7 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
       <Form.Item
         label="Select one context"
         name="kb_ids"
+        tooltip="coming soon"
         rules={[
           {
             required: true,

web/src/pages/chat/chat-configuration-modal/index.less

@@ -5,11 +5,18 @@
 .variableContainer {
   padding-bottom: 20px;
   .variableAlign {
-    text-align: right;
+    text-align: end;
   }
 
   .variableLabel {
-    margin-right: 16px;
+    margin-right: 14px;
+  }
+
+  .variableIcon {
+    margin-inline-start: 4px;
+    color: rgba(0, 0, 0, 0.45);
+    cursor: help;
+    writing-mode: horizontal-tb;
   }
 
   .variableTable {

web/src/pages/chat/chat-configuration-modal/model-setting.tsx

@@ -46,6 +46,7 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
       <Form.Item
         label="Model"
         name="llm_id"
+        tooltip="coming soon"
         rules={[{ required: true, message: 'Please select!' }]}
       >
         <Select options={modelOptions} showSearch />
@@ -54,6 +55,7 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
       <Form.Item
         label="Parameters"
         name="parameters"
+        tooltip="coming soon"
         initialValue={ModelVariableType.Precise}
         // rules={[{ required: true, message: 'Please input!' }]}
       >

web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx

@@ -1,5 +1,5 @@
 import SimilaritySlider from '@/components/similarity-slider';
-import { DeleteOutlined } from '@ant-design/icons';
+import { DeleteOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import {
   Button,
   Col,
@@ -11,6 +11,7 @@ import {
   Switch,
   Table,
   TableProps,
+  Tooltip,
 } from 'antd';
 import classNames from 'classnames';
 import {
@@ -153,6 +154,7 @@ const PromptEngine = (
       <Form.Item
         label="System"
         rules={[{ required: true, message: 'Please input!' }]}
+        tooltip="coming soon"
         name={['prompt_config', 'system']}
         initialValue={`你是一个智能助手，请总结知识库的内容来回答问题，请列举知识库中的数据详细回答。当所有知识库内容都与问题无关时，你的回答必须包括“知识库中未找到您要的答案！”这句话。回答需要考虑聊天历史。
         以下是知识库：
@@ -173,10 +175,15 @@ const PromptEngine = (
       </Form.Item>
       <section className={classNames(styles.variableContainer)}>
         <Row align={'middle'} justify="end">
-          <Col span={6} className={styles.variableAlign}>
-            <label className={styles.variableLabel}>Variables</label>
+          <Col span={7} className={styles.variableAlign}>
+            <label className={styles.variableLabel}>
+              Variables
+              <Tooltip title="coming soon">
+                <QuestionCircleOutlined className={styles.variableIcon} />
+              </Tooltip>
+            </label>
           </Col>
-          <Col span={18} className={styles.variableAlign}>
+          <Col span={17} className={styles.variableAlign}>
             <Button size="small" onClick={handleAdd}>
               Add
             </Button>
@@ -184,8 +191,8 @@ const PromptEngine = (
         </Row>
         {dataSource.length > 0 && (
           <Row>
-            <Col span={6}></Col>
-            <Col span={18}>
+            <Col span={7}> </Col>
+            <Col span={17}>
               <Table
                 dataSource={dataSource}
                 columns={columns}

web/src/pages/chat/chat-container/index.tsx

@@ -18,6 +18,7 @@ import {
   Popover,
   Skeleton,
   Space,
+  Spin,
 } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useMemo } from 'react';
@@ -31,6 +32,7 @@ import {
   useFetchConversationOnMount,
   useGetFileIcon,
   useGetSendButtonDisabled,
+  useSelectConversationLoading,
   useSendMessage,
 } from '../hooks';
 
@@ -259,29 +261,32 @@ const ChatContainer = () => {
     useClickDrawer();
   const disabled = useGetSendButtonDisabled();
   useGetFileIcon();
+  const loading = useSelectConversationLoading();
 
   return (
     <>
       <Flex flex={1} className={styles.chatContainer} vertical>
         <Flex flex={1} vertical className={styles.messageContainer}>
           <div>
-            {conversation?.message?.map((message) => {
-              const assistantMessages = conversation?.message
-                ?.filter((x) => x.role === MessageType.Assistant)
-                .slice(1);
-              const referenceIndex = assistantMessages.findIndex(
-                (x) => x.id === message.id,
-              );
-              const reference = conversation.reference[referenceIndex];
-              return (
-                <MessageItem
-                  key={message.id}
-                  item={message}
-                  reference={reference}
-                  clickDocumentButton={clickDocumentButton}
-                ></MessageItem>
-              );
-            })}
+            <Spin spinning={loading}>
+              {conversation?.message?.map((message) => {
+                const assistantMessages = conversation?.message
+                  ?.filter((x) => x.role === MessageType.Assistant)
+                  .slice(1);
+                const referenceIndex = assistantMessages.findIndex(
+                  (x) => x.id === message.id,
+                );
+                const reference = conversation.reference[referenceIndex];
+                return (
+                  <MessageItem
+                    key={message.id}
+                    item={message}
+                    reference={reference}
+                    clickDocumentButton={clickDocumentButton}
+                  ></MessageItem>
+                );
+              })}
+            </Spin>
           </div>
           <div ref={ref} />
         </Flex>

web/src/pages/chat/hooks.ts

@@ -773,6 +773,9 @@ export const useSelectDialogListLoading = () => {
 export const useSelectConversationListLoading = () => {
   return useOneNamespaceEffectsLoading('chatModel', ['listConversation']);
 };
+export const useSelectConversationLoading = () => {
+  return useOneNamespaceEffectsLoading('chatModel', ['getConversation']);
+};
 
 export const useGetSendButtonDisabled = () => {
   const { dialogId, conversationId } = useGetChatSearchParams();