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)
2025-05-30 10:05:35 +08:00 · 2024-08-15 16:10:21 +08:00 · 2024-08-15 16:10:21 +08:00 · d3ff1a30bf
commit d3ff1a30bf
parent 6acc46bc7b
10 changed files with 146 additions and 122 deletions
--- a/web/src/assets/svg/paper-clip.svg
+++ b/web/src/assets/svg/paper-clip.svg
@ -0,0 +1,6 @@
+<svg t="1723702162999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8508"
+    width="200" height="200">
+    <path
+        d="M780.8 166.4V742.4c0 92.928-56.32 268.8-268.8 268.8S243.2 835.328 243.2 742.4V204.8a230.4 230.4 0 0 1 23.296-93.952A179.2 179.2 0 0 1 435.2 12.8a179.2 179.2 0 0 1 168.704 98.048A228.608 228.608 0 0 1 627.2 204.8v499.2A111.872 111.872 0 0 1 512 819.2a111.872 111.872 0 0 1-115.2-115.2V358.4a38.4 38.4 0 0 1 76.8 0v345.6A35.072 35.072 0 0 0 512 742.4a35.328 35.328 0 0 0 38.4-38.912V204.8A109.568 109.568 0 0 0 435.2 89.6a102.4 102.4 0 0 0-100.096 55.552A158.976 158.976 0 0 0 320 204.8v537.6c0 19.456 6.912 192 192 192 189.952 0 192-184.064 192-192V166.4a38.4 38.4 0 0 1 76.8 0"
+        fill="#030000" p-id="8509"></path>
+</svg>
--- a/web/src/components/api-service/chat-overview-modal/index.tsx
+++ b/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>
    </>
  );
--- a/web/src/components/api-service/hooks.ts
+++ b/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,
  };
 };
--- a/web/src/components/message-input/index.less
+++ b/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;
--- a/web/src/components/message-input/index.tsx
+++ b/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
--- a/web/src/locales/en.ts
+++ b/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',
--- a/web/src/locales/zh-traditional.ts
+++ b/web/src/locales/zh-traditional.ts
@ -392,6 +392,8 @@ export default {
      extensionTitle: 'Chrome 插件',
      tokenError: '請先創建 Api Token!',
      searching: '搜索中',
+      parsing: '解析中',
+      uploading: '上傳中',
    },
    setting: {
      profile: '概述',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -409,6 +409,8 @@ export default {
      extensionTitle: 'Chrome 插件',
      tokenError: '请先创建 Api Token!',
      searching: '搜索中',
+      parsing: '解析中',
+      uploading: '上传中',
    },
    setting: {
      profile: '概要',
--- a/web/src/pages/chat/share/large.tsx
+++ b/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>
    </>
  );
--- a/web/src/utils/file-util.ts
+++ b/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];
+};