fix: edit message add image

2025-12-02 14:00:58 +08:00
parent 5cbb38922c
commit ce3a82ddda
11 changed files with 218 additions and 212 deletions
@@ -201,9 +201,11 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {

  const handleUploadChange = useCallback(
    async (data: { file: any; fileList: any }) => {
-      const res = await readAudioFile(data.file);
-      setAudioData(res);
-      setTokenResult(null);
+      try {
+        const res = await readAudioFile(data.file);
+        setAudioData(res);
+        setTokenResult(null);
+      } catch (error) {}
    },
    []
  );
@@ -1,5 +1,4 @@
 import SimpleAudio from '@/components/audio-player/simple-audio';
-import DropDownActions from '@/components/drop-down-actions';
 import IconFont from '@/components/icon-font';
 import UploadAudio from '@/components/upload-audio';
 import HotKeys, { KeyMap } from '@/config/hotkeys';
@@ -11,11 +10,8 @@ import {
 import {
  ClearOutlined,
  CustomerServiceOutlined,
-  LinkOutlined,
-  PictureOutlined,
  SendOutlined,
-  SwapOutlined,
-  UploadOutlined
+  SwapOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Divider, Input, Tooltip } from 'antd';
@@ -32,9 +28,9 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import styled from 'styled-components';
 import { Roles } from '../config';
 import { AudioFormat, MessageItem } from '../config/types';
+import useAddImage from '../hooks/use-add-image';
 import '../style/message-input.less';
 import ThumbImg from './thumb-img';
-import UploadImg from './upload-img';

 const AudioWrapper = styled.div`
  padding-block: 10px;
@@ -300,39 +296,6 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
      });
    };

-    const handleInputImageUrl = (e: any) => {
-      const url = e.target.value;
-      // ends with .png, .jpg, .jpeg
-      const regex = /(https?:\/\/\S+\.(png|jpg|jpeg))/gi;
-      const isValid = regex.test(url);
-      setOpenImgTips(!isValid);
-      if (!isValid) {
-        return;
-      }
-      handleUpdateImgList([
-        {
-          uid: updateUidCount(),
-          dataUrl: e.target.value
-        }
-      ]);
-      setIsFromUrl(false);
-      setOpenImgTips(false);
-    };
-
-    const handleOnEscape = (e: any) => {
-      if (e.key === 'Escape') {
-        setIsFromUrl(false);
-        setOpenImgTips(false);
-      }
-    };
-
-    const handleAddImgFromUrl = () => {
-      setIsFromUrl(true);
-      setTimeout(() => {
-        inputImgRef.current?.focus?.();
-      }, 100);
-    };
-
    const handleUploadAudioChange = async (data: {
      file: any;
      fileList: any[];
@@ -398,6 +361,11 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
      }
    };

+    const { ImageURLInput, UploadImageButton } = useAddImage({
+      handleUpdateImgList: handleUpdateImgList,
+      updateUidCount: updateUidCount
+    });
+
    useImperativeHandle(ref, () => ({
      handleInputChange: handleInputChange
    }));
@@ -451,41 +419,9 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
                {checkLabel}
              </Checkbox>
            )}
-            {actions.includes('upload') && message.role === Roles.User && (
-              <DropDownActions
-                placement={'topLeft'}
-                menu={{
-                  items: [
-                    {
-                      label: (
-                        <UploadImg
-                          handleUpdateImgList={handleUpdateImgList}
-                          size="middle"
-                        >
-                          {intl.formatMessage({ id: 'playground.img.upload' })}
-                        </UploadImg>
-                      ),
-                      key: 'upload_image',
-                      icon: <UploadOutlined />
-                    },
-                    {
-                      label: intl.formatMessage({
-                        id: 'playground.uploadImage.url.button'
-                      }),
-                      key: 'add_image_url',
-                      icon: <LinkOutlined />,
-                      onClick: handleAddImgFromUrl
-                    }
-                  ]
-                }}
-              >
-                <Button
-                  type="text"
-                  size="middle"
-                  icon={<PictureOutlined />}
-                ></Button>
-              </DropDownActions>
-            )}
+            {actions.includes('upload') &&
+              message.role === Roles.User &&
+              UploadImageButton}

            {actions.includes('upload') && message.role === Roles.User && (
              <UploadAudio
@@ -532,6 +468,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
                ))}
              </>
            )}
+            {ImageURLInput}
          </div>
          <div className="actions">
            {actions.includes('add') && (
@@ -603,26 +540,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
            </AudioWrapper>
          )}
        </ImgsWrapper>
-        {isFromUrl && (
-          <Tooltip
-            open={openImgTips}
-            title={intl.formatMessage({
-              id: 'playground.uploadImage.url.invalid'
-            })}
-          >
-            <Input
-              ref={inputImgRef}
-              status={openImgTips ? 'error' : ''}
-              placeholder={intl.formatMessage({
-                id: 'playground.uploadImage.url.holder'
-              })}
-              style={{ width: 360 }}
-              onBlur={handleInputImageUrl}
-              onPressEnter={handleInputImageUrl}
-              onKeyDown={handleOnEscape}
-            ></Input>
-          </Tooltip>
-        )}
+
        <div className="input-box">
          {actions.includes('paste') ? (
            <TextArea
@@ -12,6 +12,7 @@ import {
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
+import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
 import { Roles } from '../../config';
@@ -20,7 +21,7 @@ import {
  MessageItem,
  MessageItemAction
 } from '../../config/types';
-import UploadImg from '../upload-img';
+import useAddImage from '../../hooks/use-add-image';

 interface MessageActionsProps {
  data: MessageItem;
@@ -57,32 +58,47 @@ const MessageActions: React.FC<MessageActionsProps> = ({
    file: any;
    fileList: any[];
  }) => {
-    const base64Audio = await convertFileToBase64(audio.file);
-    const audioData = await readAudioFile(audio.file);
-    updateMessage?.({
-      role: data.role,
-      content: data.content,
-      uid: data.uid,
-      imgs: data.imgs || [],
-      audio: [
-        {
-          uid: audio.file.uid || audio.fileList[0].uid,
-          format: audioTypeMap[audio.file.type] as AudioFormat,
-          base64: base64Audio.split(',')[1],
-          data: _.pick(audioData, ['url', 'name', 'duration'])
-        }
-      ]
-    });
+    try {
+      const base64Audio = await convertFileToBase64(audio.file);
+      const audioData = await readAudioFile(audio.file);
+      updateMessage?.({
+        role: data.role,
+        content: data.content,
+        uid: data.uid,
+        imgs: data.imgs || [],
+        audio: [
+          {
+            uid: audio.file.uid || audio.fileList[0].uid,
+            format: audioTypeMap[audio.file.type] as AudioFormat,
+            base64: base64Audio.split(',')[1],
+            data: _.pick(audioData, ['url', 'name', 'duration'])
+          }
+        ]
+      });
+    } catch (error) {
+      console.log('error uploading audio file', error);
+    }
  };

+  const { ImageURLInput, UploadImageButton, isFromUrl } = useAddImage({
+    size: 'small',
+    handleUpdateImgList: handleUpdateImgList,
+    updateUidCount: () => `img-${Date.now()}`
+  });
+
  return (
    <>
+      {ImageURLInput}
      {actions.length > 1 && !loading ? (
-        <div className="actions">
+        <div
+          className={classNames('actions', {
+            'has-url-input': isFromUrl
+          })}
+        >
          <div className="actions-wrap gap-5">
-            {actions.includes('upload') && data.role === Roles.User && (
-              <UploadImg handleUpdateImgList={handleUpdateImgList} />
-            )}
+            {actions.includes('upload') &&
+              data.role === Roles.User &&
+              UploadImageButton}
            {actions.includes('upload') && data.role === Roles.User && (
              <UploadAudio
                type="text"
@@ -16,10 +16,8 @@ import ThumbImg from '../thumb-img';
 import ThinkContent from './think-content';

 const AudioWrapper = styled.div`
-  padding-top: 10px;
  height: max-content;
  width: max-content;
-  margin-inline: 10px;
 `;

 const ThumbImgWrapper = styled.div.attrs({
@@ -29,6 +27,12 @@ const ThumbImgWrapper = styled.div.attrs({
  justify-content: flex-start;
  overflow-x: auto;
  flex-direction: column;
+  padding: 0px;
+  gap: 8px;
+  &.has-content {
+    padding-inline: 8px;
+    padding-block: 8px 0;
+  }
 `;

 interface MessageBodyProps {
@@ -179,31 +183,6 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
      });
    };

-    const handleDeleteLastImage = useCallback(() => {
-      if (data.imgs && data.imgs?.length > 0) {
-        const newImgList = [...(data.imgs || [])];
-        const lastImage = newImgList.pop();
-        if (lastImage) {
-          handleDeleteImg(lastImage.uid);
-        }
-      }
-    }, [data.imgs, handleDeleteImg]);
-
-    const handleKeyDown = useCallback(
-      (event: any) => {
-        if (
-          event.key === 'Backspace' &&
-          data.content === '' &&
-          data.imgs &&
-          data.imgs?.length > 0
-        ) {
-          // inputref blur
-          event.preventDefault();
-          handleDeleteLastImage();
-        }
-      },
-      [data, handleDeleteLastImage]
-    );
    const handleClickWrapper = (e: any) => {
      e.stopPropagation();
      e.preventDefault();
@@ -218,7 +197,7 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
              data.imgs?.length || (data.audio && data.audio?.length > 0)
          })}
        >
-          <div className="justify-start ">
+          <div className="justify-start">
            <ThumbImg
              editable={editable}
              dataList={data.imgs || []}
@@ -249,7 +228,12 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
          })}
          onClick={handleClickWrapper}
        >
-          <ThumbImgWrapper>
+          <ThumbImgWrapper
+            className={classNames({
+              'has-content':
+                data.imgs?.length || (data.audio && data.audio?.length > 0)
+            })}
+          >
            <ThumbImg
              style={{ paddingBlockEnd: 0 }}
              editable={editable}
@@ -257,7 +241,7 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
              onDelete={handleDeleteImg}
            />
            {data.audio && data.audio.length > 0 && (
-              <AudioWrapper className={data.imgs?.length ? '' : 'm-l-10'}>
+              <AudioWrapper>
                <SimpleAudio
                  url={data.audio?.[0]?.data.url}
                  name={data.audio?.[0]?.data.name}