feat: Add MessageInput to the external chat page #1880 (#1963)

### What problem does this PR solve?
feat: Add MessageInput to the external chat page #1880

### Type of change

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

web/src/components/api-service/chat-overview-modal/index.tsx

@@ -50,13 +50,8 @@ const ChatOverviewModal = ({
     hideModal: hideApiKeyModal,
     showModal: showApiKeyModal,
   } = useSetModalState();
-  const {
-    embedVisible,
-    hideEmbedModal,
-    showEmbedModal,
-    embedToken,
-    errorContextHolder,
-  } = useShowEmbedModal(id, idKey);
+  const { embedVisible, hideEmbedModal, showEmbedModal, embedToken } =
+    useShowEmbedModal(id, idKey);
 
   const { pickerValue, setPickerValue } = useFetchNextStats();
 
@@ -64,7 +59,7 @@ const ChatOverviewModal = ({
     return current && current > dayjs().endOf('day');
   };
 
-  const { handlePreview, contextHolder } = usePreviewChat(id, idKey);
+  const { handlePreview } = usePreviewChat(id, idKey);
 
   return (
     <>
@@ -138,8 +133,6 @@ const ChatOverviewModal = ({
           visible={embedVisible}
           hideModal={hideEmbedModal}
         ></EmbedModal>
-        {contextHolder}
-        {errorContextHolder}
       </Modal>
     </>
   );

web/src/components/api-service/hooks.ts

@@ -63,13 +63,12 @@ export const useSelectChartStatsList = (): ChartStatsType => {
 };
 
 export const useShowTokenEmptyError = () => {
-  const [messageApi, contextHolder] = message.useMessage();
   const { t } = useTranslate('chat');
 
   const showTokenEmptyError = useCallback(() => {
-    messageApi.error(t('tokenError'));
-  }, [messageApi, t]);
-  return { showTokenEmptyError, contextHolder };
+    message.error(t('tokenError'));
+  }, [t]);
+  return { showTokenEmptyError };
 };
 
 const getUrlWithToken = (token: string) => {
@@ -78,7 +77,7 @@ const getUrlWithToken = (token: string) => {
 };
 
 const useFetchTokenListBeforeOtherStep = (dialogId: string, idKey: string) => {
-  const { showTokenEmptyError, contextHolder } = useShowTokenEmptyError();
+  const { showTokenEmptyError } = useShowTokenEmptyError();
 
   const { data: tokenList, refetch } = useFetchTokenList({ [idKey]: dialogId });
 
@@ -98,7 +97,6 @@ const useFetchTokenListBeforeOtherStep = (dialogId: string, idKey: string) => {
 
   return {
     token,
-    contextHolder,
     handleOperate,
   };
 };
@@ -110,8 +108,10 @@ export const useShowEmbedModal = (dialogId: string, idKey: string) => {
     showModal: showEmbedModal,
   } = useSetModalState();
 
-  const { handleOperate, token, contextHolder } =
-    useFetchTokenListBeforeOtherStep(dialogId, idKey);
+  const { handleOperate, token } = useFetchTokenListBeforeOtherStep(
+    dialogId,
+    idKey,
+  );
 
   const handleShowEmbedModal = useCallback(async () => {
     const succeed = await handleOperate();
@@ -125,15 +125,11 @@ export const useShowEmbedModal = (dialogId: string, idKey: string) => {
     hideEmbedModal,
     embedVisible,
     embedToken: token,
-    errorContextHolder: contextHolder,
   };
 };
 
 export const usePreviewChat = (dialogId: string, idKey: string) => {
-  const { handleOperate, contextHolder } = useFetchTokenListBeforeOtherStep(
-    dialogId,
-    idKey,
-  );
+  const { handleOperate } = useFetchTokenListBeforeOtherStep(dialogId, idKey);
 
   const open = useCallback((t: string) => {
     window.open(getUrlWithToken(t), '_blank');
@@ -148,6 +144,5 @@ export const usePreviewChat = (dialogId: string, idKey: string) => {
 
   return {
     handlePreview,
-    contextHolder,
   };
 };

web/src/components/message-input/index.less

@@ -1,11 +1,23 @@
 .messageInputWrapper {
   margin-right: 20px;
+  background-color: #f5f5f8;
+  border-radius: 8px;
+  :global(.ant-input-affix-wrapper) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   .documentCard {
     :global(.ant-card-body) {
       padding: 10px;
       position: relative;
     }
   }
+  .listWrapper {
+    padding: 0 10px;
+  }
+  .inputWrapper {
+    border-radius: 8px;
+  }
   .deleteIcon {
     position: absolute;
     right: -4px;

web/src/components/message-input/index.tsx

@@ -1,14 +1,13 @@
 import { Authorization } from '@/constants/authorization';
 import { useTranslate } from '@/hooks/common-hooks';
-import { useRemoveNextDocument } from '@/hooks/document-hooks';
+import {
+  useFetchDocumentInfosByIds,
+  useRemoveNextDocument,
+} from '@/hooks/document-hooks';
 import { getAuthorization } from '@/utils/authorization-util';
 import { getExtension } from '@/utils/document-util';
-import {
-  CloseCircleOutlined,
-  LoadingOutlined,
-  PlusOutlined,
-  UploadOutlined,
-} from '@ant-design/icons';
+import { formatBytes } from '@/utils/file-util';
+import { CloseCircleOutlined, LoadingOutlined } from '@ant-design/icons';
 import type { GetProp, UploadFile } from 'antd';
 import {
   Button,
@@ -22,10 +21,11 @@ import {
   Upload,
   UploadProps,
 } from 'antd';
+import classNames from 'classnames';
 import get from 'lodash/get';
-import { ChangeEventHandler, useCallback, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import FileIcon from '../file-icon';
-
+import SvgIcon from '../svg-icon';
 import styles from './index.less';
 
 type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
@@ -33,6 +33,14 @@ const { Text } = Typography;
 
 const getFileId = (file: UploadFile) => get(file, 'response.data.0');
 
+const getFileIds = (fileList: UploadFile[]) => {
+  const ids = fileList.reduce((pre, cur) => {
+    return pre.concat(get(cur, 'response.data', []));
+  }, []);
+
+  return ids;
+};
+
 interface IProps {
   disabled: boolean;
   value: string;
@@ -41,6 +49,7 @@ interface IProps {
   onPressEnter(documentIds: string[]): void;
   onInputChange: ChangeEventHandler<HTMLInputElement>;
   conversationId: string;
+  uploadUrl?: string;
 }
 
 const getBase64 = (file: FileType): Promise<string> =>
@@ -59,9 +68,11 @@ const MessageInput = ({
   sendLoading,
   onInputChange,
   conversationId,
+  uploadUrl = '/v1/document/upload_and_parse',
 }: IProps) => {
   const { t } = useTranslate('chat');
   const { removeDocument } = useRemoveNextDocument();
+  const { data: documentInfos, setDocumentIds } = useFetchDocumentInfosByIds();
 
   const [fileList, setFileList] = useState<UploadFile[]>([]);
 
@@ -78,9 +89,7 @@ const MessageInput = ({
 
   const handlePressEnter = useCallback(async () => {
     if (isUploadingFile) return;
-    const ids = fileList.reduce((pre, cur) => {
-      return pre.concat(get(cur, 'response.data', []));
-    }, []);
+    const ids = getFileIds(fileList);
 
     onPressEnter(ids);
     setFileList([]);
@@ -99,13 +108,18 @@ const MessageInput = ({
     [removeDocument],
   );
 
-  const uploadButton = (
-    <button style={{ border: 0, background: 'none' }} type="button">
-      <PlusOutlined />
-      <div style={{ marginTop: 8 }}>Upload</div>
-    </button>
+  const getDocumentInfoById = useCallback(
+    (id: string) => {
+      return documentInfos.find((x) => x.id === id);
+    },
+    [documentInfos],
   );
 
+  useEffect(() => {
+    const ids = getFileIds(fileList);
+    setDocumentIds(ids);
+  }, [fileList, setDocumentIds]);
+
   return (
     <Flex gap={20} vertical className={styles.messageInputWrapper}>
       <Input
@@ -113,23 +127,30 @@ const MessageInput = ({
         placeholder={t('sendPlaceholder')}
         value={value}
         disabled={disabled}
+        className={classNames({ [styles.inputWrapper]: fileList.length === 0 })}
         suffix={
           <Space>
-            <Upload
-              action="/v1/document/upload_and_parse"
-              // listType="picture-card"
-              fileList={fileList}
-              onPreview={handlePreview}
-              onChange={handleChange}
-              multiple
-              headers={{ [Authorization]: getAuthorization() }}
-              data={{ conversation_id: conversationId }}
-              method="post"
-              onRemove={handleRemove}
-              showUploadList={false}
-            >
-              <Button icon={<UploadOutlined />}></Button>
-            </Upload>
+            {conversationId && (
+              <Upload
+                action={uploadUrl}
+                fileList={fileList}
+                onPreview={handlePreview}
+                onChange={handleChange}
+                multiple
+                headers={{ [Authorization]: getAuthorization() }}
+                data={{ conversation_id: conversationId }}
+                method="post"
+                onRemove={handleRemove}
+                showUploadList={false}
+              >
+                <Button
+                  type={'text'}
+                  icon={
+                    <SvgIcon name="paper-clip" width={18} height={22}></SvgIcon>
+                  }
+                ></Button>
+              </Upload>
+            )}
             <Button
               type="primary"
               onClick={handlePressEnter}
@@ -143,71 +164,58 @@ const MessageInput = ({
         onPressEnter={handlePressEnter}
         onChange={onInputChange}
       />
-      {/* <Upload
-        action="/v1/document/upload_and_parse"
-        listType="picture-card"
-        fileList={fileList}
-        onPreview={handlePreview}
-        onChange={handleChange}
-        multiple
-        headers={{ [Authorization]: getAuthorization() }}
-        data={{ conversation_id: conversationId }}
-        method="post"
-        onRemove={handleRemove}
-      >
-        {fileList.length >= 8 ? null : uploadButton}
-      </Upload> */}
+
       {fileList.length > 0 && (
         <List
           grid={{
             gutter: 16,
             xs: 1,
-            sm: 2,
-            md: 2,
+            sm: 1,
+            md: 1,
             lg: 1,
             xl: 2,
             xxl: 4,
           }}
           dataSource={fileList}
+          className={styles.listWrapper}
           renderItem={(item) => {
             const fileExtension = getExtension(item.name);
+            const id = getFileId(item);
 
             return (
               <List.Item>
                 <Card className={styles.documentCard}>
-                  <>
-                    <Flex gap={10} align="center">
-                      {item.status === 'uploading' || !item.response ? (
-                        <Spin
-                          indicator={
-                            <LoadingOutlined style={{ fontSize: 24 }} spin />
-                          }
-                        />
+                  <Flex gap={10} align="center">
+                    {item.status === 'uploading' || !item.response ? (
+                      <Spin
+                        indicator={
+                          <LoadingOutlined style={{ fontSize: 24 }} spin />
+                        }
+                      />
+                    ) : (
+                      <FileIcon id={id} name={item.name}></FileIcon>
+                    )}
+                    <Flex vertical style={{ width: '90%' }}>
+                      <Text
+                        ellipsis={{ tooltip: item.name }}
+                        className={styles.nameText}
+                      >
+                        <b> {item.name}</b>
+                      </Text>
+                      {item.percent !== 100 ? (
+                        t('uploading')
+                      ) : !item.response ? (
+                        t('parsing')
                       ) : (
-                        <FileIcon
-                          id={getFileId(item)}
-                          name={item.name}
-                        ></FileIcon>
+                        <Space>
+                          <span>{fileExtension?.toUpperCase()},</span>
+                          <span>
+                            {formatBytes(getDocumentInfoById(id)?.size ?? 0)}
+                          </span>
+                        </Space>
                       )}
-                      <Flex vertical style={{ width: '90%' }}>
-                        <Text
-                          ellipsis={{ tooltip: item.name }}
-                          className={styles.nameText}
-                        >
-                          <b> {item.name}</b>
-                        </Text>
-                        {item.percent !== 100 ? (
-                          '上传中'
-                        ) : !item.response ? (
-                          '解析中'
-                        ) : (
-                          <Space>
-                            <span>{fileExtension?.toUpperCase()},</span>
-                          </Space>
-                        )}
-                      </Flex>
                     </Flex>
-                  </>
+                  </Flex>
 
                   {item.status !== 'uploading' && (
                     <CloseCircleOutlined

web/src/locales/en.ts

@@ -422,6 +422,8 @@ The above is the content you need to summarize.`,
       extensionTitle: 'Chrome Extension',
       tokenError: 'Please create API Token first!',
       searching: 'searching...',
+      parsing: 'Parsing',
+      uploading: 'Uploading',
     },
     setting: {
       profile: 'Profile',

web/src/locales/zh-traditional.ts

@@ -392,6 +392,8 @@ export default {
       extensionTitle: 'Chrome 插件',
       tokenError: '請先創建 Api Token!',
       searching: '搜索中',
+      parsing: '解析中',
+      uploading: '上傳中',
     },
     setting: {
       profile: '概述',

web/src/locales/zh.ts

@@ -409,6 +409,8 @@ export default {
       extensionTitle: 'Chrome 插件',
       tokenError: '请先创建 Api Token!',
       searching: '搜索中',
+      parsing: '解析中',
+      uploading: '上传中',
     },
     setting: {
       profile: '概要',

web/src/pages/chat/share/large.tsx

@@ -1,8 +1,8 @@
+import MessageInput from '@/components/message-input';
 import MessageItem from '@/components/message-item';
 import { MessageType } from '@/constants/chat';
-import { useTranslate } from '@/hooks/common-hooks';
 import { useSendButtonDisabled } from '@/pages/chat/hooks';
-import { Button, Flex, Input, Spin } from 'antd';
+import { Flex, Spin } from 'antd';
 import { forwardRef } from 'react';
 import {
   useCreateSharedConversationOnMount,
@@ -10,11 +10,9 @@ import {
   useSendSharedMessage,
 } from '../shared-hooks';
 import { buildMessageItemReference } from '../utils';
-
 import styles from './index.less';
 
 const ChatContainer = () => {
-  const { t } = useTranslate('chat');
   const { conversationId } = useCreateSharedConversationOnMount();
   const {
     currentConversation: conversation,
@@ -65,24 +63,17 @@ const ChatContainer = () => {
           </div>
           <div ref={ref} />
         </Flex>
-        <Input
-          size="large"
-          placeholder={t('sendPlaceholder')}
+
+        <MessageInput
           value={value}
-          //   disabled={disabled}
-          suffix={
-            <Button
-              type="primary"
-              onClick={handlePressEnter}
-              loading={sendLoading}
-              disabled={sendDisabled}
-            >
-              {t('send')}
-            </Button>
-          }
+          disabled={false}
+          sendDisabled={sendDisabled}
+          conversationId={conversationId}
+          onInputChange={handleInputChange}
           onPressEnter={handlePressEnter}
-          onChange={handleInputChange}
-        />
+          sendLoading={sendLoading}
+          uploadUrl="/v1/api/document/upload_and_parse"
+        ></MessageInput>
       </Flex>
     </>
   );

web/src/utils/file-util.ts

@@ -85,3 +85,16 @@ export const downloadFile = ({
   downloadElement.click();
   document.body.removeChild(downloadElement);
 };
+
+const Units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+export const formatBytes = (x: string | number) => {
+  let l = 0,
+    n = (typeof x === 'string' ? parseInt(x, 10) : x) || 0;
+
+  while (n >= 1024 && ++l) {
+    n = n / 1024;
+  }
+
+  return n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + Units[l];
+};