provide thumbnail for audio and adjust style

src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx

@@ -42,11 +42,11 @@ import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
 import { uploadEditorMediaAssetFile } from '@/src/services/image-editor/editorMediaAssetUploadClient.ts';
 import { createEditorProjectResource } from '@/src/services/image-editor/editorProjectClient.ts';
 
+import { useImageCanvasContextStore } from '../useImageCanvasContextStore.ts';
 import {
   type EditorAgentConversationClient,
   useEditorAgentConversation,
 } from './useEditorAgentConversation';
-import { useImageCanvasContextStore } from '../useImageCanvasContextStore.ts';
 
 type AttachmentPickerTab = 'canvas' | 'library';
 

src/components/image-editor/EditorAgentConversation/MessageBubble.tsx

@@ -133,25 +133,35 @@ function GenerationRecordsView({
           {generation.videos.length ? (
             <div className="mt-2 grid grid-cols-1 gap-2">
               {generation.videos.map((video, index) => (
-                <ResolvedAssetVideo
-                  src={video.videoSrc}
-                  objectKey={video.objectKey}
+                <div
                   key={`${generation.toolCallId}-${video.resourceId ?? index}`}
-                  preload="metadata"
-                  className="h-full w-full object-cover"
-                  controls
-                  playsInline
-                />
+                  className="overflow-hidden rounded-xl border border-slate-200 bg-slate-100"
+                >
+                  <ResolvedAssetVideo
+                    src={video.videoSrc}
+                    objectKey={video.objectKey}
+                    poster={video.thumbnailSrc ?? undefined}
+                    preload="metadata"
+                    // the height is decided by width (already stable) and the video aspect radio
+                    className="h-full w-full object-cover"
+                    controls
+                    playsInline
+                  />
+                </div>
               ))}
             </div>
           ) : null}
           {generation.audios.length ? (
             <div className="mt-2 grid grid-cols-1 gap-2">
               {generation.audios.map((audio, index) => (
-                <ResolvedAssetAudio
+                <div
                   key={`${generation.toolCallId}-${audio.resourceId ?? index}`}
-                  audio={audio}
-                />
+                  className="overflow-hidden rounded-xl border border-slate-200 bg-slate-100"
+                >
+                  <ResolvedAssetAudio
+                    audio={audio}
+                  />
+                </div>
               ))}
             </div>
           ) : null}
@@ -161,28 +171,21 @@ function GenerationRecordsView({
   );
 }
 function ResolvedAssetAudio({
-  audio,
-}: {
+                              audio,
+                            }: {
   audio: EditorAgentGenerationRecord['audios'][number];
 }) {
   const { resolvedUrl } = useResolvedAssetReadUrl(audio.audioSrc, {
     objectKey: audio.objectKey,
   });
   return (
-    <div className="rounded-xl border border-slate-200 bg-slate-50 p-2">
-      <div className="mb-1 flex items-center gap-1.5 text-[11px] text-slate-500">
-        <FileAudio className="h-3.5 w-3.5" aria-hidden="true" />
-        <span className="truncate">{audio.audioKind ?? 'audio'}</span>
-        {audio.durationSeconds ? <span>{audio.durationSeconds}s</span> : null}
-      </div>
-      <audio
-        controls
-        preload="metadata"
-        src={resolvedUrl == '' ? null : resolvedUrl}
-        className="h-16 w-full"
-        aria-label="生成音频预览"
-      />
-    </div>
+    <audio
+      controls
+      preload="metadata"
+      src={resolvedUrl == '' ? null : resolvedUrl}
+      className="w-full"
+      aria-label="生成音频预览"
+    />
   );
 }