fix: upload a audio will clear imgs, #2163

src/pages/playground/components/message-input.tsx

@@ -35,6 +35,7 @@ const audioTypeMap: Record<string, string> = {
 };
 
 const AudioWrapper = styled.div`
+  padding-block: 10px;
   audio {
     padding-top: 10px;
   }
@@ -297,17 +298,19 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
       try {
         const base64Audio = await convertFileToBase64(data.file);
         const audioData = await readAudioFile(data.file);
-        console.log('audioData====', audioData);
+        console.log('audioData====', message.imgs);
-        setMessage({
+        setMessage((pre) => {
-          ...message,
+          return {
-          audio: [
+            ...pre,
-            {
+            audio: [
-              uid: updateUidCount(),
+              {
-              format: audioTypeMap[data.file.type] as AudioFormat,
+                uid: updateUidCount(),
-              base64: base64Audio.split(',')[1],
+                format: audioTypeMap[data.file.type] as AudioFormat,
-              data: _.pick(audioData, ['url', 'name', 'duration'])
+                base64: base64Audio.split(',')[1],
-            }
+                data: _.pick(audioData, ['url', 'name', 'duration'])
-          ]
+              }
+            ]
+          };
         });
       } catch (error) {
         console.error('Error converting audio to Base64:', error);

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

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

@@ -16,7 +16,6 @@ import ThumbImg from '../thumb-img';
 import ThinkContent from './think-content';
 
 const AudioWrapper = styled.div`
-  padding-left: 10px;
   padding-top: 10px;
 `;
 
@@ -207,7 +206,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 || []}
@@ -238,14 +237,14 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
           })}
           onClick={handleClickWrapper}
         >
-          <div className="justify-start">
+          <div className="justify-start ">
             <ThumbImg
               editable={editable}
               dataList={data.imgs || []}
               onDelete={handleDeleteImg}
             />
             {data.audio && data.audio.length > 0 && (
-              <AudioWrapper>
+              <AudioWrapper className={data.imgs?.length ? '' : 'm-l-10'}>
                 <SimpleAudio
                   url={data.audio?.[0]?.data.url}
                   name={data.audio?.[0]?.data.name}