fix: upload a audio will clear imgs, #2163

src/pages/playground/components/multiple-chat/message-actions.tsx

@@ -1,12 +1,29 @@
 import CopyButton from '@/components/copy-button';
-import { EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import UploadAudio from '@/components/upload-audio';
+import { convertFileToBase64, readAudioFile } from '@/utils/load-audio-file';
+import {
+  CustomerServiceOutlined,
+  EditOutlined,
+  MinusCircleOutlined
+} from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
+import _ from 'lodash';
 import React, { useCallback } from 'react';
 import { Roles } from '../../config';
-import { MessageItem, MessageItemAction } from '../../config/types';
+import {
+  AudioFormat,
+  MessageItem,
+  MessageItemAction
+} from '../../config/types';
 import UploadImg from '../upload-img';
 
+const audioTypeMap: Record<string, string> = {
+  'audio/wav': 'wav',
+  'audio/mp3': 'mp3',
+  'audio/mpeg': 'mp3'
+};
+
 interface MessageActionsProps {
   data: MessageItem;
   actions: MessageItemAction[];
@@ -32,12 +49,35 @@ const MessageActions: React.FC<MessageActionsProps> = ({
         role: data.role,
         content: data.content,
         uid: data.uid,
+        audio: data.audio || [],
         imgs: [...(data.imgs || []), ...list]
       });
     },
     [data, updateMessage]
   );
 
+  const handleUploadAudioChange = async (audio: {
+    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'])
+        }
+      ]
+    });
+  };
+
   return (
     <>
       {actions.length > 1 && !loading ? (
@@ -46,6 +86,16 @@ const MessageActions: React.FC<MessageActionsProps> = ({
             {actions.includes('upload') && data.role === Roles.User && (
               <UploadImg handleUpdateImgList={handleUpdateImgList} />
             )}
+            {actions.includes('upload') && data.role === Roles.User && (
+              <UploadAudio
+                type="text"
+                accept={'.mp3,.wav'}
+                size="small"
+                shape="default"
+                icon={<CustomerServiceOutlined />}
+                onChange={handleUploadAudioChange}
+              ></UploadAudio>
+            )}
             {actions.includes('edit') && data.role === Roles.Assistant && (
               <Tooltip title={intl.formatMessage({ id: 'common.button.edit' })}>
                 <Button