feat: support artifact in replay process (#225)

Author: sanyuan0704

apps/agent-tars/src/main/ipcRoutes/action.ts

@@ -10,7 +10,10 @@ import fs, { readFile } from 'fs-extra';
 import { shell } from 'electron';
 import fetch from 'node-fetch';
 import FormData from 'form-data';
-import { normalizeMessages } from '@main/utils/normalizeOmegaData';
+import {
+  normalizeMessages,
+  parseArtifacts,
+} from '@main/utils/normalizeOmegaData';
 
 export interface MCPTool {
   id: string;
@@ -136,10 +139,14 @@ export const actionRoute = t.router({
         path.join(__dirname, '../reporter/index.html'),
         'utf-8',
       );
+      const artifacts = await parseArtifacts(messages);
       const reportContent = reportHtmlTemplate.replace(
         ' <!-- DATA -->',
         '<script>window.__OMEGA_REPORT_DATA__ = ' +
-          JSON.stringify(messages) +
+          JSON.stringify({
+            messages,
+            artifacts,
+          }) +
           ';</script>',
       );
 

apps/agent-tars/src/main/llmProvider/providers/AnthropicProvider.ts

@@ -33,8 +33,8 @@ export class AnthropicProvider extends BaseProvider {
     super(config);
 
     // Use environment variables or defaults
-    const apiKey = config.apiKey || process.env.ANTHROPIC_API_KEY;
-    const baseURL = config.baseURL || process.env.ANTHROPIC_API_BASE_URL;
+    const apiKey = config.apiKey || process.env.ANTHROPIC_API_KEY || '';
+    const baseURL = config.baseURL || process.env.ANTHROPIC_API_BASE_URL || '';
 
     if (!apiKey) {
       throw new Error(

apps/agent-tars/src/main/utils/normalizeOmegaData.ts

@@ -1,4 +1,5 @@
 import { readFile } from 'fs-extra';
+import path from 'path';
 
 interface ImageItem {
   type: 'image';
@@ -20,9 +21,12 @@ interface OmegaAgentMessage {
   };
 }
 
-export async function normalizeMessages(
-  messages: Array<OmegaAgentMessage | any>,
-) {
+function isImage(filePath: string): boolean {
+  const ext = path.extname(filePath).toLowerCase();
+  return ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp'].includes(ext);
+}
+
+export async function normalizeMessages(messages: Array<OmegaAgentMessage>) {
   const normalizedMessages = await Promise.all(
     messages.map(async (item) => {
       if (item.type !== 'omega-agent') {
@@ -89,3 +93,52 @@ export async function normalizeMessages(
 
   return normalizedMessages;
 }
+
+export async function parseArtifacts(messages: Array<OmegaAgentMessage>) {
+  let artifacts: {
+    [key: string]: {
+      content: string;
+    };
+  } = {};
+
+  await Promise.all(
+    messages.map(async (item) => {
+      if (item.type !== 'omega-agent') {
+        return;
+      }
+
+      await Promise.all(
+        item.content.events.map(async (event) => {
+          if (event.type === 'chat-text') {
+            const { attachments = [] } = event.content;
+            await Promise.all(
+              attachments.map(async (attachment) => {
+                const artifactPath = attachment.path;
+                const fileName = path.basename(artifactPath);
+
+                try {
+                  if (isImage(artifactPath)) {
+                    const base64Content = await readFile(
+                      artifactPath,
+                      'base64',
+                    );
+                    artifacts[fileName] = {
+                      content: `data:image/${path.extname(artifactPath).slice(1)};base64,${base64Content}`,
+                    };
+                  } else {
+                    const content = await readFile(artifactPath, 'utf-8');
+                    artifacts[fileName] = { content };
+                  }
+                } catch (error) {
+                  console.error(`Failed to read file: ${artifactPath}`, error);
+                }
+              }),
+            );
+          }
+        }),
+      );
+    }),
+  );
+
+  return artifacts;
+}

apps/agent-tars/src/renderer/index.html

@@ -8,9 +8,9 @@
       content="default-src 'self' 'unsafe-inline' file: data: blob:; img-src 'self' file: data: blob:; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://fonts.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net/npm/ https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; font-src 'self' https://cdnjs.cloudflare.com https://fonts.googleapis.com; worker-src 'self' blob:; connect-src 'self' https://cdn.jsdelivr.net/npm/ blob:"
     />
   </head>
-  <!-- DATA -->
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <!-- DATA -->
   </body>
 </html>

apps/agent-tars/src/renderer/src/agent/Greeter.ts

@@ -70,7 +70,7 @@ export class Greeter {
           },
         });
       });
-    } catch (error) {
+    } catch (error: any) {
       console.log(error);
       throw error;
     }

apps/agent-tars/src/renderer/src/components/AgentApp/index.tsx

@@ -11,21 +11,45 @@ import { useFileSystemSettings } from '@renderer/hooks/useFileSystemSettings';
 
 export function AgentApp() {
   const [showCanvas] = useAtom(showCanvasAtom);
-  // Initialize file system settings
+
   useFileSystemSettings();
 
+  if (isReportHtmlMode) {
+    return (
+      <div className="w-full h-full flex">
+        <div className="flex flex-1 w-full h-full overflow-hidden">
+          <div
+            className="flex-shrink-0"
+            style={{ width: showCanvas ? '45%' : '100%' }}
+          >
+            <OpenAgentChatUI />
+          </div>
+          {showCanvas && (
+            <div
+              className="flex-shrink-0 bg-background border-l border-divider"
+              style={{ width: '55%' }}
+            >
+              <CanvasPanel />
+            </div>
+          )}
+        </div>
+        <Toaster position="top-center" />
+        <FilePermissionHandler />
+      </div>
+    );
+  }
+
   return (
     <div className="w-full h-full flex">
-      {!isReportHtmlMode ? (
-        <div>
-          <LeftSidebar />
-        </div>
-      ) : null}
+      <div>
+        <LeftSidebar />
+      </div>
 
       <div
         className="flex flex-1 w-full h-full overflow-hidden"
         style={{
           maxHeight: '100vh',
+          maxWidth: '100vw',
         }}
       >
         <motion.div

apps/agent-tars/src/renderer/src/components/AgentFlowMessage/events/ChatText.tsx

@@ -7,6 +7,7 @@ import { useAtom } from 'jotai';
 import { canvasStateManager } from '@renderer/state/canvas';
 import { CanvasType } from '@renderer/type/canvas';
 import { ipcClient } from '@renderer/api';
+import { isReportHtmlMode } from '@renderer/constants';
 
 interface AttachmentItemProps {
   path: string;
@@ -50,11 +51,21 @@ export function ChatText({ event }: { event: EventItem }) {
   const [, updateCanvasState] = useAtom(canvasStateManager.updateState);
 
   const handleAttachmentClick = async (filePath: string) => {
-    const content = await ipcClient.getFileContent({
-      filePath,
-    });
+    let content: string | null = null;
+    if (isReportHtmlMode) {
+      const artifacts = window.__OMEGA_REPORT_DATA__?.artifacts || {};
+      const fileName = filePath.split('/').pop()!;
+      content = artifacts[fileName].content || '';
+    } else {
+      content = await ipcClient.getFileContent({
+        filePath,
+      });
+    }
+
+    if (!content) {
+      return;
+    }
 
-    console.log('content', content);
     updateCanvasState({
       isVisible: true,
       dataSource: {

apps/agent-tars/src/renderer/src/components/CanvasPanel/EventPlayer/index.tsx

@@ -154,7 +154,12 @@ export function EventPlayer() {
   };
 
   return (
-    <div className="flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg shadow-xl">
+    <div
+      className="flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg shadow-xl"
+      style={{
+        maxHeight: '100vh',
+      }}
+    >
       {/* Header */}
       <div className="flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-800">
         <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">

apps/agent-tars/src/renderer/src/components/ChatUI/index.tsx

@@ -23,7 +23,14 @@ import { DEFAULT_APP_ID } from '../LeftSidebar';
 
 declare global {
   interface Window {
-    __OMEGA_REPORT_DATA__?: MessageItem[];
+    __OMEGA_REPORT_DATA__?: {
+      messages: MessageItem[];
+      artifacts: {
+        [key: string]: {
+          content: string;
+        };
+      };
+    };
   }
 }
 
@@ -69,7 +76,8 @@ export function OpenAgentChatUI() {
 
   useEffect(() => {
     async function init() {
-      const messages = window.__OMEGA_REPORT_DATA__ ?? (await initMessages());
+      const messages =
+        window.__OMEGA_REPORT_DATA__?.messages ?? (await initMessages());
       setMessages(messages || []);
       const events = extractHistoryEvents(messages as unknown as MessageItem[]);
       setEvents(events);

apps/agent-tars/src/renderer/src/components/LeftSidebar/TopBar.tsx

@@ -19,7 +19,7 @@ export function TopBar({
 }: TopBarProps) {
   return (
     <div className={`${styles.topbar} ${isCollapsed ? styles.collapsed : ''}`}>
-      {!isCollapsed && <span className={styles.title}>Omega</span>}
+      {!isCollapsed && <span className={styles.title}>Agent Tars</span>}
       <div
         className={`${styles.controls} ${isCollapsed ? styles.controlsCollapsed : ''}`}
       >

apps/agent-tars/src/renderer/src/hooks/useAgentFlow.ts

@@ -58,7 +58,7 @@ export function useAgentFlow() {
       const result = await ipcClient.askLLMText({
         messages: [
           Message.systemMessage(
-            `You are conversation summary expert.Please give a title for the coversation topic, the topic should be no more than 20 words.You can only output the topic content, don't output any other words.Use the same with as the language of the user input.`,
+            `You are conversation summary expert.Please give a title for the coversation topic, the topic should be no more than 20 words.You can only output the topic content, don't output any other words.Use the same with as the language of the user input.The language should be the same as the user input.`,
           ),
           Message.userMessage(
             `user input: ${userMessageContent}, please give me the topic title.`,