@lobehub/chat 1.131.4 → 1.132.1

package/packages/prompts/src/prompts/files/index.test.ts

@@ -1,4 +1,4 @@
-import { ChatFileItem, ChatImageItem } from '@lobechat/types';
+import { ChatFileItem, ChatImageItem, ChatVideoItem } from '@lobechat/types';
 import { describe, expect, it } from 'vitest';
 
 import { filesPrompts } from './index';
@@ -19,6 +19,12 @@ describe('filesPrompts', () => {
     url: 'https://example.com/test.pdf',
   };
 
+  const mockVideo: ChatVideoItem = {
+    id: 'video-1',
+    alt: 'test video',
+    url: 'https://example.com/video.mp4',
+  };
+
   it('should generate prompt with only images', () => {
     const result = filesPrompts({
       imageList: [mockImage],
@@ -37,7 +43,6 @@ describe('filesPrompts', () => {
 <images_docstring>here are user upload images you can refer to</images_docstring>
 <image name="test image" url="https://example.com/image.jpg"></image>
 </images>
-
 </files_info>
 <!-- END SYSTEM CONTEXT -->`,
     );
@@ -57,7 +62,6 @@ describe('filesPrompts', () => {
 2. the context is only required when user's queries rely on it.
 </context.instruction>
 <files_info>
-
 <files>
 <files_docstring>here are user upload files you can refer to</files_docstring>
 <file id="file-1" name="test.pdf" type="application/pdf" size="1024" url="https://example.com/test.pdf"></file>
@@ -184,4 +188,145 @@ describe('filesPrompts', () => {
       <!-- END SYSTEM CONTEXT -->"
     `);
   });
+
+  describe('Video functionality', () => {
+    it('should generate prompt with only videos', () => {
+      const result = filesPrompts({
+        videoList: [mockVideo],
+      });
+
+      expect(result).toEqual(
+        `<!-- SYSTEM CONTEXT (NOT PART OF USER QUERY) -->
+<context.instruction>following part contains context information injected by the system. Please follow these instructions:
+
+1. Always prioritize handling user-visible content.
+2. the context is only required when user's queries rely on it.
+</context.instruction>
+<files_info>
+<videos>
+<videos_docstring>here are user upload videos you can refer to</videos_docstring>
+<video name="test video" url="https://example.com/video.mp4"></video>
+</videos>
+</files_info>
+<!-- END SYSTEM CONTEXT -->`,
+      );
+    });
+
+    it('should generate prompt with videos and images', () => {
+      const result = filesPrompts({
+        imageList: [mockImage],
+        videoList: [mockVideo],
+      });
+
+      expect(result).toEqual(
+        `<!-- SYSTEM CONTEXT (NOT PART OF USER QUERY) -->
+<context.instruction>following part contains context information injected by the system. Please follow these instructions:
+
+1. Always prioritize handling user-visible content.
+2. the context is only required when user's queries rely on it.
+</context.instruction>
+<files_info>
+<images>
+<images_docstring>here are user upload images you can refer to</images_docstring>
+<image name="test image" url="https://example.com/image.jpg"></image>
+</images>
+<videos>
+<videos_docstring>here are user upload videos you can refer to</videos_docstring>
+<video name="test video" url="https://example.com/video.mp4"></video>
+</videos>
+</files_info>
+<!-- END SYSTEM CONTEXT -->`,
+      );
+    });
+
+    it('should generate prompt with all media types', () => {
+      const result = filesPrompts({
+        imageList: [mockImage],
+        fileList: [mockFile],
+        videoList: [mockVideo],
+      });
+
+      expect(result).toEqual(
+        `<!-- SYSTEM CONTEXT (NOT PART OF USER QUERY) -->
+<context.instruction>following part contains context information injected by the system. Please follow these instructions:
+
+1. Always prioritize handling user-visible content.
+2. the context is only required when user's queries rely on it.
+</context.instruction>
+<files_info>
+<images>
+<images_docstring>here are user upload images you can refer to</images_docstring>
+<image name="test image" url="https://example.com/image.jpg"></image>
+</images>
+<files>
+<files_docstring>here are user upload files you can refer to</files_docstring>
+<file id="file-1" name="test.pdf" type="application/pdf" size="1024" url="https://example.com/test.pdf"></file>
+</files>
+<videos>
+<videos_docstring>here are user upload videos you can refer to</videos_docstring>
+<video name="test video" url="https://example.com/video.mp4"></video>
+</videos>
+</files_info>
+<!-- END SYSTEM CONTEXT -->`,
+      );
+    });
+
+    it('should handle multiple videos', () => {
+      const videos: ChatVideoItem[] = [
+        mockVideo,
+        {
+          id: 'video-2',
+          alt: 'second video',
+          url: 'https://example.com/video2.mp4',
+        },
+      ];
+
+      const result = filesPrompts({
+        videoList: videos,
+      });
+
+      expect(result).toContain('test video');
+      expect(result).toContain('second video');
+      expect(result).toMatch(/<video.*?>.*<video.*?>/s); // Check for multiple video tags
+    });
+
+    it('should handle videos without url when addUrl is false', () => {
+      const result = filesPrompts({
+        videoList: [mockVideo],
+        addUrl: false,
+      });
+
+      expect(result).toMatchInlineSnapshot(`
+        "<!-- SYSTEM CONTEXT (NOT PART OF USER QUERY) -->
+        <context.instruction>following part contains context information injected by the system. Please follow these instructions:
+
+        1. Always prioritize handling user-visible content.
+        2. the context is only required when user's queries rely on it.
+        </context.instruction>
+        <files_info>
+        <videos>
+        <videos_docstring>here are user upload videos you can refer to</videos_docstring>
+        <video name="test video"></video>
+        </videos>
+        </files_info>
+        <!-- END SYSTEM CONTEXT -->"
+      `);
+    });
+
+    it('should return empty string when all lists are empty', () => {
+      const result = filesPrompts({
+        imageList: [],
+        fileList: [],
+        videoList: [],
+      });
+
+      expect(result).toEqual('');
+    });
+
+    it('should return empty string when no lists are provided', () => {
+      const result = filesPrompts({});
+
+      expect(result).toEqual('');
+    });
+  });
 });

package/packages/prompts/src/prompts/files/index.ts

@@ -1,18 +1,31 @@
-import { ChatFileItem, ChatImageItem } from '@lobechat/types';
+import { ChatFileItem, ChatImageItem, ChatVideoItem } from '@lobechat/types';
 
 import { filePrompts } from './file';
 import { imagesPrompts } from './image';
+import { videosPrompts } from './video';
 
 export const filesPrompts = ({
   imageList,
   fileList,
+  videoList,
   addUrl = true,
 }: {
   addUrl?: boolean;
   fileList?: ChatFileItem[];
-  imageList: ChatImageItem[];
+  imageList?: ChatImageItem[];
+  videoList?: ChatVideoItem[];
 }) => {
-  if (imageList.length === 0 && (fileList || []).length === 0) return '';
+  const hasImages = (imageList || []).length > 0;
+  const hasFiles = (fileList || []).length > 0;
+  const hasVideos = (videoList || []).length > 0;
+
+  if (!hasImages && !hasFiles && !hasVideos) return '';
+
+  const contentParts = [
+    hasImages ? imagesPrompts(imageList!, addUrl) : '',
+    hasFiles ? filePrompts(fileList!, addUrl) : '',
+    hasVideos ? videosPrompts(videoList!, addUrl) : '',
+  ].filter(Boolean);
 
   const prompt = `<!-- SYSTEM CONTEXT (NOT PART OF USER QUERY) -->
 <context.instruction>following part contains context information injected by the system. Please follow these instructions:
@@ -21,8 +34,7 @@ export const filesPrompts = ({
 2. the context is only required when user's queries rely on it.
 </context.instruction>
 <files_info>
-${imagesPrompts(imageList, addUrl)}
-${fileList ? filePrompts(fileList, addUrl) : ''}
+${contentParts.join('\n')}
 </files_info>
 <!-- END SYSTEM CONTEXT -->`;
 

package/packages/prompts/src/prompts/files/video.ts

@@ -0,0 +1,17 @@
+import { ChatVideoItem } from '@lobechat/types';
+
+const videoPrompt = (item: ChatVideoItem, attachUrl: boolean) =>
+  attachUrl
+    ? `<video name="${item.alt}" url="${item.url}"></video>`
+    : `<video name="${item.alt}"></video>`;
+
+export const videosPrompts = (videoList: ChatVideoItem[], addUrl: boolean = true) => {
+  if (videoList.length === 0) return '';
+
+  const prompt = `<videos>
+<videos_docstring>here are user upload videos you can refer to</videos_docstring>
+${videoList.map((item) => videoPrompt(item, addUrl)).join('\n')}
+</videos>`;
+
+  return prompt.trim();
+};

package/packages/types/src/agent/index.ts

@@ -1,4 +1,4 @@
-import { LLMParams } from '../../../model-bank/src/types/aiModel';
+import { LLMParams } from 'model-bank';
 import { FileItem } from '../files';
 import { KnowledgeBaseItem } from '../knowledgeBase';
 import { FewShots } from '../llm';

package/packages/types/src/message/chat.ts

@@ -5,6 +5,7 @@ import type { ChatMessageError, MessageMetadata, MessageRoleType, ModelReasoning
 import { ChatImageItem } from './image';
 import { ChatPluginPayload, ChatToolPayload } from './tools';
 import { Translate } from './translate';
+import { ChatVideoItem } from './video';
 
 export interface ChatTranslate extends Translate {
   content?: string;
@@ -63,13 +64,11 @@ export interface ChatMessage {
   id: string;
   imageList?: ChatImageItem[];
   meta: MetaData;
-
   metadata?: MessageMetadata | null;
   /**
    * observation id
    */
   observationId?: string;
-
   /**
    * parent message id
    */
@@ -83,14 +82,12 @@ export interface ChatMessage {
   quotaId?: string;
   ragQuery?: string | null;
   ragQueryId?: string | null;
-
   ragRawQuery?: string | null;
   reasoning?: ModelReasoning | null;
   /**
    * message role type
    */
   role: MessageRoleType;
-
   search?: GroundingSearch | null;
   sessionId?: string;
   threadId?: string | null;
@@ -105,6 +102,7 @@ export interface ChatMessage {
    */
   traceId?: string;
   updatedAt: number;
+  videoList?: ChatVideoItem[];
 }
 
 export interface CreateMessageParams

package/packages/types/src/message/index.ts

@@ -5,6 +5,7 @@ export * from './chat';
 export * from './image';
 export * from './rag';
 export * from './tools';
+export * from './video';
 
 export interface SendMessageParams {
   /**

package/packages/types/src/message/video.ts

@@ -0,0 +1,5 @@
+export interface ChatVideoItem {
+  alt: string;
+  id: string;
+  url: string;
+}

package/packages/utils/src/client/index.ts

@@ -3,3 +3,4 @@ export * from './downloadFile';
 export * from './exportFile';
 export * from './fetchEventSource';
 export * from './sanitize';
+export * from './videoValidation';

package/packages/utils/src/client/videoValidation.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+
+import { validateVideoFileSize } from './videoValidation';
+
+describe('validateVideoFileSize', () => {
+  it('should return valid for non-video files', () => {
+    const mockFile = new File(['test'], 'test.txt', { type: 'text/plain' });
+    const result = validateVideoFileSize(mockFile);
+
+    expect(result.isValid).toBe(true);
+    expect(result.actualSize).toBeUndefined();
+  });
+
+  it('should return valid for video files under 20MB', () => {
+    const mockVideoFile = new File(['x'.repeat(10 * 1024 * 1024)], 'video.mp4', {
+      type: 'video/mp4',
+    });
+    const result = validateVideoFileSize(mockVideoFile);
+
+    expect(result.isValid).toBe(true);
+    expect(result.actualSize).toBe('10.0 MB');
+  });
+
+  it('should return invalid for video files over 20MB', () => {
+    const mockLargeVideoFile = new File(['x'.repeat(25 * 1024 * 1024)], 'large-video.mp4', {
+      type: 'video/mp4',
+    });
+    const result = validateVideoFileSize(mockLargeVideoFile);
+
+    expect(result.isValid).toBe(false);
+    expect(result.actualSize).toBe('25.0 MB');
+  });
+
+  it('should return invalid for video files exactly at 20MB limit plus 1 byte', () => {
+    const mockBoundaryFile = new File(['x'.repeat(20 * 1024 * 1024 + 1)], 'boundary.mp4', {
+      type: 'video/mp4',
+    });
+    const result = validateVideoFileSize(mockBoundaryFile);
+
+    expect(result.isValid).toBe(false);
+    expect(result.actualSize).toBe('20.0 MB');
+  });
+
+  it('should return valid for video files exactly at 20MB limit', () => {
+    const mockBoundaryFile = new File(['x'.repeat(20 * 1024 * 1024)], 'boundary.mp4', {
+      type: 'video/mp4',
+    });
+    const result = validateVideoFileSize(mockBoundaryFile);
+
+    expect(result.isValid).toBe(true);
+    expect(result.actualSize).toBe('20.0 MB');
+  });
+});

package/packages/utils/src/client/videoValidation.ts

@@ -0,0 +1,21 @@
+import { formatSize } from '../format';
+
+const VIDEO_SIZE_LIMIT = 20 * 1024 * 1024; // 20MB in bytes
+
+export interface VideoValidationResult {
+  actualSize?: string;
+  isValid: boolean;
+}
+
+export const validateVideoFileSize = (file: File): VideoValidationResult => {
+  if (!file.type.startsWith('video/')) {
+    return { isValid: true };
+  }
+
+  const isValid = file.size <= VIDEO_SIZE_LIMIT;
+
+  return {
+    actualSize: formatSize(file.size),
+    isValid,
+  };
+};

package/packages/utils/src/parseModels.ts

@@ -90,6 +90,10 @@ export const parseModelString = async (
             model.abilities!.files = true;
             break;
           }
+          case 'video': {
+            model.abilities!.video = true;
+            break;
+          }
           case 'search': {
             model.abilities!.search = true;
             break;

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/useSend.ts

@@ -38,13 +38,14 @@ export const useSend = () => {
   const { analytics } = useAnalytics();
   const checkGeminiChineseWarning = useGeminiChineseWarning();
 
-  const fileList = fileChatSelectors.chatUploadFileList(useFileStore.getState());
+  // 使用订阅以保持最新文件列表
+  const reactiveFileList = useFileStore(fileChatSelectors.chatUploadFileList);
   const [isUploadingFiles, clearChatUploadFileList] = useFileStore((s) => [
     fileChatSelectors.isUploadingFiles(s),
     s.clearChatUploadFileList,
   ]);
 
-  const isInputEmpty = isContentEmpty && fileList.length === 0;
+  const isInputEmpty = isContentEmpty && reactiveFileList.length === 0;
 
   const canNotSend =
     isInputEmpty || isUploadingFiles || isSendButtonDisabledByMessage || isSendingMessage;
@@ -63,6 +64,8 @@ export const useSend = () => {
     if (chatSelectors.isAIGenerating(store)) return;
 
     const inputMessage = store.inputMessage;
+    // 发送时再取一次最新的文件列表，防止闭包拿到旧值
+    const fileList = fileChatSelectors.chatUploadFileList(useFileStore.getState());
 
     // if there is no message and no image, then we should not send the message
     if (!inputMessage && fileList.length === 0) return;
@@ -92,9 +95,11 @@ export const useSend = () => {
     // 获取分析数据
     const userStore = getUserStoreState();
 
-    // 直接使用现有数据结构判断消息类型
+    // 直接使用现有数据结构判断消息类型（支持 video）
     const hasImages = fileList.some((file) => file.file?.type?.startsWith('image'));
-    const messageType = fileList.length === 0 ? 'text' : hasImages ? 'image' : 'file';
+    const hasVideos = fileList.some((file) => file.file?.type?.startsWith('video'));
+    const messageType =
+      fileList.length === 0 ? 'text' : hasVideos ? 'video' : hasImages ? 'image' : 'file';
 
     analytics?.track({
       name: 'send_message',

package/src/components/ModelSelect/index.tsx

@@ -1,3 +1,4 @@
+import { ChatModelCard } from '@lobechat/types';
 import { IconAvatarProps, ModelIcon, ProviderIcon } from '@lobehub/icons';
 import { Avatar, Icon, Tag, Text, Tooltip } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
@@ -9,15 +10,15 @@ import {
   LucideImage,
   LucidePaperclip,
   ToyBrick,
+  Video,
 } from 'lucide-react';
+import { ModelAbilities } from 'model-bank';
 import numeral from 'numeral';
 import { FC, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { ModelAbilities } from '../../../packages/model-bank/src/types/aiModel';
 import { AiProviderSourceType } from '@/types/aiProvider';
-import { ChatModelCard } from '@/types/llm';
 import { formatTokenNumber } from '@/utils/format';
 
 export const TAG_CLASSNAME = 'lobe-model-info-tags';
@@ -99,6 +100,17 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             </Tag>
           </Tooltip>
         )}
+        {model.video && (
+          <Tooltip
+            placement={placement}
+            styles={{ root: { pointerEvents: 'none' } }}
+            title={t('ModelSelect.featureTag.video')}
+          >
+            <Tag className={styles.tag} color={'magenta'} size={'small'}>
+              <Icon icon={Video} />
+            </Tag>
+          </Tooltip>
+        )}
         {model.functionCall && (
           <Tooltip
             placement={placement}

package/src/features/ChatInput/ActionBar/Upload/ClientMode.tsx

@@ -4,6 +4,7 @@ import { FileUp, LucideImage } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { message } from '@/components/AntdStaticMethods';
 import { useModelSupportFiles } from '@/hooks/useModelSupportFiles';
 import { useModelSupportVision } from '@/hooks/useModelSupportVision';
 import { useAgentStore } from '@/store/agent';
@@ -26,6 +27,12 @@ const FileUpload = memo(() => {
     <Upload
       accept={enabledFiles ? undefined : 'image/*'}
       beforeUpload={async (file) => {
+        // Check if trying to upload non-image files in client mode
+        if (!enabledFiles && !file.type.startsWith('image')) {
+          message.warning(t('upload.clientMode.fileNotSupported'));
+          return false;
+        }
+
         await upload([file]);
 
         return false;

package/src/features/ChatInput/ActionBar/Upload/ServerMode.tsx

@@ -1,3 +1,4 @@
+import { validateVideoFileSize } from '@lobechat/utils/client';
 import { MenuProps, Tooltip } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { css, cx } from 'antd-style';
@@ -5,9 +6,10 @@ import { FileUp, FolderUp, ImageUp, Paperclip } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { message } from '@/components/AntdStaticMethods';
 import { useModelSupportVision } from '@/hooks/useModelSupportVision';
 import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/slices/chat';
+import { agentSelectors } from '@/store/agent/selectors';
 import { useFileStore } from '@/store/file';
 
 import Action from '../components/Action';
@@ -61,7 +63,19 @@ const FileUpload = memo(() => {
       label: (
         <Upload
           beforeUpload={async (file) => {
-            if (!canUploadImage && file.type.startsWith('image')) return false;
+            if (!canUploadImage && (file.type.startsWith('image') || file.type.startsWith('video')))
+              return false;
+
+            // Validate video file size
+            const validation = validateVideoFileSize(file);
+            if (!validation.isValid) {
+              message.error(
+                t('upload.validation.videoSizeExceeded', {
+                  actualSize: validation.actualSize,
+                }),
+              );
+              return false;
+            }
 
             await upload([file]);
 
@@ -80,7 +94,19 @@ const FileUpload = memo(() => {
       label: (
         <Upload
           beforeUpload={async (file) => {
-            if (!canUploadImage && file.type.startsWith('image')) return false;
+            if (!canUploadImage && (file.type.startsWith('image') || file.type.startsWith('video')))
+              return false;
+
+            // Validate video file size
+            const validation = validateVideoFileSize(file);
+            if (!validation.isValid) {
+              message.error(
+                t('upload.validation.videoSizeExceeded', {
+                  actualSize: validation.actualSize,
+                }),
+              );
+              return false;
+            }
 
             await upload([file]);
 

package/src/features/ChatInput/components/UploadDetail/UploadStatus.tsx

@@ -38,7 +38,7 @@ const UploadStatus = memo<UploadStateProps>(({ status, size, uploadState }) => {
         <Flexbox align={'center'} gap={4} horizontal>
           <Progress percent={uploadState?.progress} size={14} type="circle" />
           <Text style={{ fontSize: 12 }} type={'secondary'}>
-            {formatSize(size * ((uploadState?.progress || 0) / 100), 0)} / {formatSize(size)}
+            {formatSize(size * ((uploadState?.progress || 0) / 100), 0)}
           </Text>
         </Flexbox>
       );

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -3,6 +3,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { LOADING_FLAT } from '@/const/message';
 import ImageFileListViewer from '@/features/Conversation/Messages/User/ImageFileListViewer';
+import VideoFileListViewer from '@/features/Conversation/Messages/User/VideoFileListViewer';
 import { useChatStore } from '@/store/chat';
 import { aiChatSelectors, chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
@@ -18,7 +19,7 @@ export const AssistantMessage = memo<
   ChatMessage & {
     editableContent: ReactNode;
   }
->(({ id, tools, content, chunksList, search, imageList, ...props }) => {
+>(({ id, tools, content, chunksList, search, imageList, videoList, ...props }) => {
   const editing = useChatStore(chatSelectors.isMessageEditing(id));
   const generating = useChatStore(chatSelectors.isMessageGenerating(id));
 
@@ -30,6 +31,7 @@ export const AssistantMessage = memo<
 
   const showSearch = !!search && !!search.citations?.length;
   const showImageItems = !!imageList && imageList.length > 0;
+  const showVideoItems = !!videoList && videoList.length > 0;
 
   // remove \n to avoid empty content
   // refs: https://github.com/lobehub/lobe-chat/pull/6153
@@ -67,6 +69,7 @@ export const AssistantMessage = memo<
         )
       )}
       {showImageItems && <ImageFileListViewer items={imageList} />}
+      {showVideoItems && <VideoFileListViewer items={videoList} />}
       {tools && (
         <Flexbox gap={8}>
           {tools.map((toolCall, index) => (

package/src/features/Conversation/Messages/User/VideoFileListViewer.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatVideoItem } from '@/types/message';
+
+interface VideoFileListViewerProps {
+  items: ChatVideoItem[];
+}
+
+const VideoFileListViewer = memo<VideoFileListViewerProps>(({ items }) => {
+  return (
+    <Flexbox gap={8}>
+      {items.map((item) => (
+        <video
+          controls
+          key={item.id}
+          style={{
+            borderRadius: 8,
+            maxHeight: 400,
+            maxWidth: '100%',
+          }}
+        >
+          <source src={item.url} />
+          {item.alt}
+        </video>
+      ))}
+    </Flexbox>
+  );
+});
+
+export default VideoFileListViewer;

package/src/features/Conversation/Messages/User/index.tsx

@@ -7,18 +7,20 @@ import { ChatMessage } from '@/types/message';
 
 import FileListViewer from './FileListViewer';
 import ImageFileListViewer from './ImageFileListViewer';
+import VideoFileListViewer from './VideoFileListViewer';
 
 export const UserMessage = memo<
   ChatMessage & {
     editableContent: ReactNode;
   }
->(({ id, editableContent, content, imageList, fileList }) => {
+>(({ id, editableContent, content, imageList, videoList, fileList }) => {
   if (content === LOADING_FLAT) return <BubblesLoading />;
 
   return (
     <Flexbox gap={8} id={id}>
       {editableContent}
       {imageList && imageList?.length > 0 && <ImageFileListViewer items={imageList} />}
+      {videoList && videoList?.length > 0 && <VideoFileListViewer items={videoList} />}
       {fileList && fileList?.length > 0 && (
         <div style={{ marginTop: 8 }}>
           <FileListViewer items={fileList} />