Add debug transcript components

web/components/debug-transcript/MessageText.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/UI';
+
+import type { DebugTranscriptTextRow } from './types';
+
+const roleLabelMap: Record<DebugTranscriptTextRow['role'], string> = {
+  user: 'Me',
+  assistant: 'AI',
+  notice: 'Debug',
+};
+
+const MessageText: React.FC<{
+  row: DebugTranscriptTextRow;
+}> = ({ row }) => {
+  if (row.role === 'notice') {
+    return (
+      <div className="flex justify-start">
+        <div className="max-w-full rounded-md border border-white/10 bg-black/25 px-3 py-2 text-[11px] text-muted-foreground">
+          <div className="mb-1 flex items-center gap-2">
+            <span className="uppercase tracking-[0.14em] opacity-70">{roleLabelMap[row.role]}</span>
+          </div>
+          <div className="whitespace-pre-wrap break-words">{row.text}</div>
+        </div>
+      </div>
+    );
+  }
+
+  const isUser = row.role === 'user';
+
+  return (
+    <div className={cn('flex', isUser ? 'justify-end' : 'justify-start')}>
+      <div
+        className={cn(
+          'max-w-[85%] rounded-lg px-3 py-2 text-sm',
+          isUser
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-card border border-white/10 shadow-sm text-foreground'
+        )}
+      >
+        <div className="mb-1 flex flex-wrap items-center gap-1.5">
+          <span className="text-[10px] uppercase tracking-wider opacity-70">
+            {roleLabelMap[row.role]}
+          </span>
+          {row.role === 'assistant' &&
+            typeof row.ttfbMs === 'number' &&
+            Number.isFinite(row.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(row.ttfbMs)}ms
+              </Badge>
+            )}
+          {row.role === 'assistant' && row.isStreaming && (
+            <span className="inline-flex h-2 w-2 animate-pulse rounded-full bg-primary/80" />
+          )}
+        </div>
+        <div className="whitespace-pre-wrap break-words">{row.text}</div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(MessageText);
+