Add debug transcript components

2026-03-13 07:11:48 +08:00
parent def6a11338
commit d87d3616e9
7 changed files with 1096 additions and 0 deletions
--- a/web/components/debug-transcript/TranscriptAssistantBlock.tsx
+++ b/web/components/debug-transcript/TranscriptAssistantBlock.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Badge } from '@/components/UI';
+
+import MessageTool from './MessageTool';
+import type { DebugTranscriptTextRow, DebugTranscriptToolRow } from './types';
+
+const TranscriptAssistantBlock: React.FC<{
+  message?: DebugTranscriptTextRow;
+  tools: DebugTranscriptToolRow[];
+}> = ({ message, tools }) => {
+  const isStreaming = Boolean(message?.isStreaming) || tools.some((tool) => tool.status === 'pending');
+
+  return (
+    <div className="flex justify-start">
+      <div className="w-full max-w-[85%] rounded-lg border border-white/10 bg-card px-3 py-2 text-sm text-foreground shadow-sm">
+        <div className="mb-1 flex flex-wrap items-center gap-1.5">
+          <span className="text-[10px] uppercase tracking-wider opacity-70">AI</span>
+          {typeof message?.ttfbMs === 'number' && Number.isFinite(message.ttfbMs) && (
+            <Badge
+              variant="outline"
+              className="border-cyan-300/40 bg-cyan-500/10 px-1.5 py-0.5 text-[10px] text-cyan-200"
+            >
+              TTFB {Math.round(message.ttfbMs)}ms
+            </Badge>
+          )}
+          {tools.length > 0 && (
+            <Badge variant="outline" className="border-white/15 bg-black/10 px-1.5 py-0.5 text-[10px]">
+              {tools.length} tool{tools.length > 1 ? 's' : ''}
+            </Badge>
+          )}
+          {isStreaming && <span className="inline-flex h-2 w-2 animate-pulse rounded-full bg-primary/80" />}
+        </div>
+
+        {message?.text ? (
+          <div className="whitespace-pre-wrap break-words">{message.text}</div>
+        ) : null}
+
+        {tools.length > 0 && (
+          <div className={message?.text ? 'mt-3 border-t border-white/10 pt-3' : 'mt-1'}>
+            <div className="space-y-2">
+              {tools.map((tool) => (
+                <MessageTool key={tool.id} row={tool} nested />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(TranscriptAssistantBlock);