diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
index ff005bae8..76a3505b4 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
@@ -7,6 +7,7 @@ import type {
 } from '@/packages/shared/src/contracts';
 import { attachmentKey } from '@/src/components/image-editor/EditorAgentConversation/common.ts';
 import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
+import { ResolvedAssetVideo } from '@/src/components/ResolvedAssetVideo.tsx';
 import { useResolvedAssetReadUrl } from '@/src/hooks/useResolvedAssetReadUrl.ts';
 
 function toolLabel(toolName: EditorAgentGenerationRecord['toolName']) {
@@ -132,9 +133,14 @@ function GenerationRecordsView({
           {generation.videos.length ? (
             <div className="mt-2 grid grid-cols-1 gap-2">
               {generation.videos.map((video, index) => (
-                <GenerationVideoPreview
+                <ResolvedAssetVideo
+                  src={video.videoSrc}
+                  objectKey={video.objectKey}
                   key={`${generation.toolCallId}-${video.resourceId ?? index}`}
-                  video={video}
+                  preload="metadata"
+                  className="h-full w-full object-cover"
+                  controls
+                  playsInline
                 />
               ))}
             </div>
@@ -142,7 +148,7 @@ function GenerationRecordsView({
           {generation.audios.length ? (
             <div className="mt-2 grid grid-cols-1 gap-2">
               {generation.audios.map((audio, index) => (
-                <GenerationAudioPreview
+                <ResolvedAssetAudio
                   key={`${generation.toolCallId}-${audio.resourceId ?? index}`}
                   audio={audio}
                 />
@@ -154,38 +160,7 @@ function GenerationRecordsView({
     </div>
   );
 }
-
-function GenerationVideoPreview({
-  video,
-}: {
-  video: EditorAgentGenerationRecord['videos'][number];
-}) {
-  const { resolvedUrl } = useResolvedAssetReadUrl(video.videoSrc, {
-    objectKey: video.objectKey,
-  });
-  const posterSrc = video.thumbnailSrc ?? undefined;
-  return (
-    <div className="overflow-hidden rounded-xl border border-slate-200 bg-slate-950">
-      <video
-        controls
-        preload="metadata"
-        poster={posterSrc}
-        // An empty string ("") was passed to the src attribute. This may cause the browser to download the whole page again over the network.
-        src={resolvedUrl == '' ? null : resolvedUrl}
-        className="h-24 w-full bg-slate-950 object-cover"
-        aria-label="生成视频预览"
-      />
-      {video.objectKey || video.durationSeconds ? (
-        <div className="flex items-center justify-between gap-2 px-2 py-1 text-[10px] text-slate-300">
-          <span className="truncate">{video.assetKind ?? 'video'}</span>
-          {video.durationSeconds ? <span>{video.durationSeconds}s</span> : null}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function GenerationAudioPreview({
+function ResolvedAssetAudio({
   audio,
 }: {
   audio: EditorAgentGenerationRecord['audios'][number];