style: simple audio player

src/pages/dashboard/apis/index.ts

@@ -7,5 +7,6 @@ export async function queryDashboardData() {
 }
 
 export async function queryDashboardUsageData() {
-  return request(`${DASHBOARD_API}/usage`);
+  // return request(`${DASHBOARD_API}/usage`);
+  return {};
 }

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

@@ -1,4 +1,4 @@
-import AudioElement from '@/components/audio-player/audio-element';
+import SimpleAudio from '@/components/audio-player/simple-audio';
 import IconFont from '@/components/icon-font';
 import UploadAudio from '@/components/upload-audio';
 import HotKeys, { KeyMap } from '@/config/hotkeys';
@@ -322,14 +322,10 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
       });
     };
 
-    const handleDeleteAudio = (uid: number | string) => {
-      const list = _.filter(
-        message.audio,
-        (item: MessageItem) => item.uid !== uid
-      );
+    const handleDeleteAudio = () => {
       setMessage({
         ...message,
-        audio: list
+        audio: []
       });
     };
 
@@ -517,11 +513,11 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
           ></ThumbImg>
           {message.audio && message.audio.length > 0 && (
             <AudioWrapper>
-              <AudioElement
-                src={message.audio?.[0].data?.url}
+              <SimpleAudio
+                url={message.audio?.[0].data?.url}
+                height={44}
                 onDelete={handleDeleteAudio}
-                controls
-              ></AudioElement>
+              ></SimpleAudio>
             </AudioWrapper>
           )}
         </div>

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

@@ -1,4 +1,4 @@
-import AudioElement from '@/components/audio-player/audio-element';
+import SimpleAudio from '@/components/audio-player/simple-audio';
 import FullMarkdown from '@/components/markdown-viewer/full-markdown';
 import { Input } from 'antd';
 import classNames from 'classnames';
@@ -17,9 +17,7 @@ import ThinkContent from './think-content';
 
 const AudioWrapper = styled.div`
   padding-left: 10px;
-  audio {
-    padding-top: 10px;
-  }
+  padding-top: 10px;
 `;
 
 interface MessageBodyProps {
@@ -132,6 +130,16 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
       });
     };
 
+    const handleDeleteAudio = () => {
+      updateMessage?.({
+        role: data.role,
+        content: data.content,
+        uid: data.uid,
+        audio: [],
+        imgs: data.imgs || []
+      });
+    };
+
     const handleMessageChange = (e: any) => {
       updateMessage?.({
         imgs: data.imgs || [],
@@ -207,10 +215,11 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
             />
             {data.audio && data.audio.length > 0 && (
               <AudioWrapper>
-                <AudioElement
-                  src={data.audio?.[0]?.data.url}
-                  controls
-                ></AudioElement>
+                <SimpleAudio
+                  url={data.audio?.[0]?.data.url}
+                  actions={[]}
+                  height={44}
+                ></SimpleAudio>
               </AudioWrapper>
             )}
           </div>
@@ -236,10 +245,11 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
             />
             {data.audio && data.audio.length > 0 && (
               <AudioWrapper>
-                <AudioElement
-                  src={data.audio?.[0]?.data.url}
-                  controls
-                ></AudioElement>
+                <SimpleAudio
+                  url={data.audio?.[0]?.data.url}
+                  onDelete={handleDeleteAudio}
+                  height={44}
+                ></SimpleAudio>
               </AudioWrapper>
             )}
           </div>