fix: replay ui bugs (#224)

ycjcl868 · ulivz · commit 671024bc96fe · 2025-03-19T19:21:02.000+08:00
diff --git a/apps/agent-tars/package.json b/apps/agent-tars/package.json
@@ -18,6 +18,7 @@
     "build": "rimraf dist out && npm run typecheck && npm run build:reporter && electron-vite build && electron-forge make",
     "test": "vitest run",
     "publish:mac": "npm run build:reporter && electron-vite build && electron-forge publish --arch=universal --platform=darwin",
+    "dev:reporter": "vite dev",
     "build:reporter": "vite build"
   },
   "peerDependencies": {
diff --git a/apps/agent-tars/src/main/ipcRoutes/action.ts b/apps/agent-tars/src/main/ipcRoutes/action.ts
@@ -140,15 +140,20 @@ export const actionRoute = t.router({
         'utf-8',
       );
       const artifacts = await parseArtifacts(messages);
-      const reportContent = reportHtmlTemplate.replace(
-        ' <!-- DATA -->',
-        '<script>window.__OMEGA_REPORT_DATA__ = ' +
-          JSON.stringify({
-            messages,
-            artifacts,
-          }) +
-          ';</script>',
-      );
+      const reportContent = reportHtmlTemplate
+        .replace(
+          ' <!-- DATA -->',
+          '<script>window.__OMEGA_REPORT_DATA__ = ' +
+            JSON.stringify({
+              messages,
+              artifacts,
+            }) +
+            ';</script>',
+        )
+        .replace(
+          /<title>.*?<\/title>/,
+          `<title>${messages?.[0]?.content || 'Agent TARS'}</title>`,
+        );
 
       if (reportApiUrl) {
         const tempPath = path.join(
diff --git a/apps/agent-tars/src/renderer/index.html b/apps/agent-tars/src/renderer/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Omega</title>
+    <title>Agent TARS</title>
     <meta
       http-equiv="Content-Security-Policy"
       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:"
diff --git a/apps/agent-tars/src/renderer/src/agent/AgentFlow.ts b/apps/agent-tars/src/renderer/src/agent/AgentFlow.ts
@@ -180,7 +180,7 @@ export class AgentFlow {
     ]);
 
     if (!this.abortController.signal.aborted) {
-      this.eventManager.addEndEvent('> Omega Agent has finished.');
+      this.eventManager.addEndEvent('> Agent TARS has finished.');
     }
   }
 
diff --git a/apps/agent-tars/src/renderer/src/agent/mockEvents.ts b/apps/agent-tars/src/renderer/src/agent/mockEvents.ts
@@ -1951,7 +1951,7 @@ export const events = [
     id: 'f65c6a4d-3bab-4246-a4b1-f45344133518',
     type: 'end',
     content: {
-      message: '> Omega Agent has finished.',
+      message: '> Agent TARS Agent has finished.',
     },
     timestamp: 1741906222166,
   },
diff --git a/apps/agent-tars/src/renderer/src/components/ChatUI/MenuHeader.tsx b/apps/agent-tars/src/renderer/src/components/ChatUI/MenuHeader.tsx
@@ -36,7 +36,7 @@ export function MenuHeader() {
           <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center shadow-sm overflow-hidden">
             <motion.img
               src={Logo}
-              alt="Omega Logo"
+              alt="Agent TARS Logo"
               className="w-6 h-6 object-contain"
               whileHover={{ rotate: 10, scale: 1.1 }}
               transition={{ type: 'spring', stiffness: 300 }}
@@ -50,7 +50,7 @@ export function MenuHeader() {
             animate={{ opacity: 1 }}
             transition={{ delay: 0.2 }}
           >
-            Omega
+            Agent TARS
           </motion.span>
         </motion.div>
 
diff --git a/apps/agent-tars/src/renderer/src/components/ChatUI/Replay.tsx b/apps/agent-tars/src/renderer/src/components/ChatUI/Replay.tsx
@@ -6,6 +6,7 @@ import { ChatMessageUtil } from '@renderer/utils/ChatMessageUtils';
 import { atom, useAtom } from 'jotai';
 import { useState, useEffect, useRef } from 'react';
 import { FiRotateCw, FiPause, FiPlay } from 'react-icons/fi';
+import { isReportHtmlMode } from '@renderer/constants';
 
 type ButtonState = 'replay' | 'pause' | 'continue';
 
@@ -35,14 +36,19 @@ const BUTTON_CONFIGS: Record<ButtonState, ButtonConfig> = {
 
 const replayAllMessages = atom<MessageItem[]>([]);
 
+// wait 3s to replay
+const DEFAULT_COUNTDOWN = 3;
+
 export function Replay() {
   const [allMessages, setAllMessages] = useAtom(replayAllMessages);
   const [, setEvents] = useAtom(eventsAtom);
   const [, setEventId] = useAtom(currentEventIdAtom);
   const { addMessage, updateMessage, setMessages, messageEndRef, messages } =
     useAppChat();
   const timerRef = useRef<NodeJS.Timeout>();
+  const intervalRef = useRef<NodeJS.Timeout>();
   const [buttonState, setButtonState] = useState<ButtonState>('replay');
+  const [countdown, setCountdown] = useState(DEFAULT_COUNTDOWN);
   const playbackRef = useRef<{
     currentIndex: number;
     eventIndex: number;
@@ -55,10 +61,37 @@ export function Replay() {
     }
   };
 
+  const clearCountDownInterval = () => {
+    setCountdown(0);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+  };
+
   useEffect(() => {
-    return () => clearPlayTimer();
+    return () => {
+      clearPlayTimer();
+      clearCountDownInterval();
+    };
   }, []);
 
+  useEffect(() => {
+    if (isReportHtmlMode && allMessages.length) {
+      intervalRef.current = setInterval(() => {
+        setCountdown((prevCountdown) => {
+          if (prevCountdown > 1) {
+            return prevCountdown - 1;
+          } else {
+            clearCountDownInterval();
+            handleTogglePlay();
+            return 0;
+          }
+        });
+      }, 1000);
+    }
+  }, [allMessages]);
+
   useEffect(() => {
     if (allMessages.length === 0 && messages.length !== 0) {
       setAllMessages(messages);
@@ -131,6 +164,7 @@ export function Replay() {
   };
 
   const handleTogglePlay = () => {
+    clearCountDownInterval();
     switch (buttonState) {
       case 'replay':
       case 'continue':
@@ -146,15 +180,22 @@ export function Replay() {
   const currentConfig = BUTTON_CONFIGS[buttonState];
 
   return (
-    <button
-      onClick={handleTogglePlay}
-      className={`
+    <div>
+      <button
+        onClick={handleTogglePlay}
+        className={`
         flex items-center justify-center mx-auto mb-2 gap-2 px-4 py-2 text-sm font-medium rounded-lg ease-in-out
         ${currentConfig.style}
       `}
-    >
-      {currentConfig.icon}
-      <span>{currentConfig.label}</span>
-    </button>
+      >
+        {currentConfig.icon}
+        <span>{currentConfig.label}</span>
+      </button>
+      {isReportHtmlMode && countdown > 0 && (
+        <p className="text-sm text-gray-500 dark:text-gray-400 text-center pb-2">
+          start replay in <strong>{countdown}</strong> seconds
+        </p>
+      )}
+    </div>
   );
 }
diff --git a/apps/agent-tars/src/renderer/src/components/LeftSidebar/TopBar.tsx b/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}>Agent Tars</span>}
+      {!isCollapsed && <span className={styles.title}>Agent TARS</span>}
       <div
         className={`${styles.controls} ${isCollapsed ? styles.controlsCollapsed : ''}`}
       >
diff --git a/apps/agent-tars/vite.config.ts b/apps/agent-tars/vite.config.ts
@@ -5,7 +5,6 @@ import react from '@vitejs/plugin-react';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const workspaceDeps = ['@ui-tars/electron-ipc'];
 
 export default defineConfig(
   (async () => {

Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,7 @@ export class AgentFlow {`
`180`	`180`	`]);`
`181`	`181`
`182`	`182`	`if (!this.abortController.signal.aborted) {`
`183`		`- this.eventManager.addEndEvent('> Omega Agent has finished.');`
	`183`	`+ this.eventManager.addEndEvent('> Agent TARS has finished.');`
`184`	`184`	`}`
`185`	`185`	`}`
`186`	`186`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export function TopBar({`
`19`	`19`	`}: TopBarProps) {`
`20`	`20`	`return (`
`21`	`21`	<div className={`${styles.topbar} ${isCollapsed ? styles.collapsed : ''}`}>
`22`		`- {!isCollapsed && <span className={styles.title}>Agent Tars</span>}`
	`22`	`+ {!isCollapsed && <span className={styles.title}>Agent TARS</span>}`
`23`	`23`	`<div`
`24`	`24`	className={`${styles.controls} ${isCollapsed ? styles.controlsCollapsed : ''}`}
`25`	`25`	`>`