feat(chat-export): Add document creation workflow for exported messages

- Integrate document store with MessageItem to create/import documents on preview
- Handle multiple response formats from workflow service (nested, direct, single record)
- Add loading state and spinner overlay during document creation
- Implement automatic document import using export record download URL
- Enhance workflowService to parse and standardize export record metadata
- Update BlockEditor loading spinner with proper padding for better UX
- Add user-friendly success message when documents are generated
- Provide fallback documentId mapping for records missing explicit documentId field

src/components/ChatPanel/MessageItem.tsx

@@ -10,11 +10,13 @@
  * @module components/ChatPanel/MessageItem
  */
 
-import React, { memo, useCallback } from 'react';
-import { Typography, Card } from 'antd';
-import { FileTextOutlined, DownloadOutlined } from '@ant-design/icons';
+import React, { memo, useCallback, useState } from 'react';
+import { Typography, Card, message as antdMessage, Spin } from 'antd';
+import { FileTextOutlined, DownloadOutlined, LoadingOutlined } from '@ant-design/icons';
 import { formatDate } from '../../utils/formatDate';
 import type { ChatMessage } from '../../types/chat';
+import { useDocumentStore } from '../../stores/documentStore';
+import { useChatStore } from '../../stores/chatStore';
 
 const { Text } = Typography;
 
@@ -56,6 +58,7 @@ const exportCardStyle: React.CSSProperties = {
   marginTop: '8px',
   cursor: 'pointer',
   transition: 'all 0.2s',
+  position: 'relative',
 };
 
 const exportCardBodyStyle: React.CSSProperties = {
@@ -132,15 +135,45 @@ export interface MessageItemProps {
 const MessageItem: React.FC<MessageItemProps> = memo(
   ({ message, onPreviewDocument, className }) => {
     const { role, content, timestamp, exportRecord } = message;
+    const [isCreatingDocument, setIsCreatingDocument] = useState(false);
+    const createDocument = useDocumentStore((state) => state.createDocument);
+    const currentSessionId = useChatStore((state) => state.currentSessionId);
 
     /**
      * Handle preview document click
+     * 
+     * This function needs to ensure the document exists in the document management
+     * system before opening the editor. The workflow returns an export record with
+     * a recordId and downloadUrl, but the document hasn't been imported yet.
+     * 
+     * Steps:
+     * 1. Call POST /api/v1/documents to create/import the document
+     * 2. Use the returned documentId to open the editor
      */
-    const handlePreviewClick = useCallback(() => {
-      if (exportRecord && onPreviewDocument) {
-        onPreviewDocument(exportRecord.documentId, exportRecord.fileName);
+    const handlePreviewClick = useCallback(async () => {
+      if (!exportRecord || !onPreviewDocument || isCreatingDocument) return;
+
+      try {
+        setIsCreatingDocument(true);
+        
+        // Create/import document using the export record's download URL
+        // The backend will download the file and parse it into blocks
+        const response = await createDocument({
+          userId: 'default-user', // TODO: Get from auth context
+          fileUrl: exportRecord.downloadUrl,
+          sessionId: currentSessionId || 'default-session',
+        });
+        
+        // Now we can open the preview with the document ID
+        onPreviewDocument(response.documentId, exportRecord.fileName);
+        
+      } catch (error) {
+        console.error('Failed to create document:', error);
+        antdMessage.error('打开文档失败: ' + (error instanceof Error ? error.message : '未知错误'));
+      } finally {
+        setIsCreatingDocument(false);
       }
-    }, [exportRecord, onPreviewDocument]);
+    }, [exportRecord, onPreviewDocument, isCreatingDocument, createDocument, currentSessionId]);
 
     /**
      * Handle download document click
@@ -226,6 +259,24 @@ const MessageItem: React.FC<MessageItemProps> = memo(
             onClick={handlePreviewClick}
             data-testid="export-record-card"
           >
+            {isCreatingDocument && (
+              <div
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                  zIndex: 1,
+                }}
+              >
+                <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
+              </div>
+            )}
             <div style={exportCardHeaderStyle}>
               <FileTextOutlined style={exportCardIconStyle} />
               <div style={exportCardTitleStyle}>{exportRecord.fileName}</div>

src/components/Editor/BlockEditor.tsx

@@ -82,7 +82,9 @@ export const BlockEditor: React.FC<BlockEditorProps> = ({
   if (isLoading) {
     return (
       <div className="block-editor-loading">
-        <Spin size="large" tip="加载文档中..." />
+        <Spin size="large" tip="加载文档中...">
+          <div style={{ padding: '50px' }} />
+        </Spin>
       </div>
     );
   }

src/services/workflowService.ts

@@ -203,21 +203,64 @@ export const triggerDocumentWorkflow = async (
       try {
         const parsedContent = JSON.parse(content);
         
-        // If parsed content has records array
-        if (parsedContent.records && Array.isArray(parsedContent.records) && parsedContent.records.length > 0) {
+        // Handle nested response format: { code: 0, data: { records: [...] } }
+        if (parsedContent.code === 0 && parsedContent.data?.records && Array.isArray(parsedContent.data.records)) {
+          const records = parsedContent.data.records;
+          if (records.length > 0) {
+            const record = records[0];
+            exportRecord = {
+              recordId: record.recordId,
+              fileName: record.fileName || '导出文档.docx',
+              downloadUrl: record.downloadUrl,
+              documentId: record.documentId || record.recordId,
+            };
+            
+            // Update content to be more user-friendly
+            content = '✅ 文档已生成，点击下方卡片预览或下载';
+          }
+        }
+        // Handle direct records array format
+        else if (parsedContent.records && Array.isArray(parsedContent.records) && parsedContent.records.length > 0) {
           const record = parsedContent.records[0];
           exportRecord = {
             recordId: record.recordId,
-            fileName: record.fileName,
+            fileName: record.fileName || '导出文档.docx',
+            downloadUrl: record.downloadUrl,
+            documentId: record.documentId || record.recordId,
+          };
+          
+          // Update content to be more user-friendly
+          content = '✅ 文档已生成，点击下方卡片预览或下载';
+        }
+        // Handle single record object format (not wrapped in array)
+        else if (parsedContent.recordId && parsedContent.downloadUrl) {
+          exportRecord = {
+            recordId: parsedContent.recordId,
+            fileName: parsedContent.fileName || '导出文档.docx',
+            downloadUrl: parsedContent.downloadUrl,
+            documentId: parsedContent.documentId || parsedContent.recordId,
+          };
+          
+          // Update content to be more user-friendly
+          content = '✅ 文档已生成，点击下方卡片预览或下载';
+        }
+        // Handle nested data format with single record
+        else if (parsedContent.data && parsedContent.data.recordId) {
+          const record = parsedContent.data;
+          exportRecord = {
+            recordId: record.recordId,
+            fileName: record.fileName || '导出文档.docx',
             downloadUrl: record.downloadUrl,
-            documentId: record.documentId,
+            documentId: record.documentId || record.recordId,
           };
           
           // Update content to be more user-friendly
-          content = '✅ 文档已生成，请查看下方链接';
+          content = '✅ 文档已生成，点击下方卡片预览或下载';
         }
       } catch (e) {
-        // Content looks like JSON but failed to parse
+        // Content looks like JSON but failed to parse, log for debugging
+        console.warn('Failed to parse JSON content:', e);
+        console.warn('Content:', content);
       }
     }
 
@@ -230,6 +273,7 @@ export const triggerDocumentWorkflow = async (
         downloadUrl: data.exportRecord.downloadUrl,
         documentId: data.exportRecord.documentId,
       };
+      content = '✅ 文档已生成，点击下方卡片预览或下载';
     } else if (!exportRecord && data.records && data.records.length > 0) {
       // Records array format (take the first one)
       const record = data.records[0];
@@ -239,6 +283,7 @@ export const triggerDocumentWorkflow = async (
         downloadUrl: record.downloadUrl,
         documentId: record.documentId,
       };
+      content = '✅ 文档已生成，点击下方卡片预览或下载';
     }
     
     return {

src/stores/documentStore.ts

@@ -70,6 +70,7 @@ export const useDocumentStore = create<DocumentStoreState>((set, get) => ({
    * Save status is set to 'saved' after successful creation.
    *
    * @param req - Document creation request (userId, fileUrl, sessionId)
+   * @returns The created document with its ID
    * @throws {Error} When document creation fails
    */
   createDocument: async (req: CreateDocumentRequest) => {
@@ -90,6 +91,9 @@ export const useDocumentStore = create<DocumentStoreState>((set, get) => ({
 
       // Refresh document list to include the new document
       await get().fetchDocumentList();
+      
+      // Return the created document info
+      return { documentId: response.documentId, document: fullDocument };
     } catch (error) {
       set({ saveStatus: 'error' });
       throw error;

src/types/store.ts

@@ -25,8 +25,8 @@ export interface DocumentStoreState {
   saveStatus: SaveStatus;
 
   // Actions
-  /** Create a new document */
-  createDocument: (req: CreateDocumentRequest) => Promise<void>;
+  /** Create a new document and return its ID */
+  createDocument: (req: CreateDocumentRequest) => Promise<{ documentId: string; document: Document }>;
   /** Fetch a document by ID */
   fetchDocument: (id: string, includeBlocks?: boolean) => Promise<void>;
   /** Fetch document list with optional filters */