@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.1

package/src/legacy/chatbot/ui/MessageList.tsx

@@ -0,0 +1,764 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+import { css } from '@emotion/react';
+import { convertUrlsToLinks, walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import { useChatBot } from '../context/ChatBotContext';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import {
+  messageListContainer,
+  messageBubble,
+  userMessage,
+  messageContent,
+  userMessageContent,
+  retryMessageContent,
+  chatbotButton,
+  connectedButton,
+  loadingIndicator,
+  modelIndicator,
+  modelBadge,
+  modelDot,
+  streamingCaret,
+  streamingContainer,
+  streamingHeader,
+  streamingIcon,
+  streamingToolName,
+  streamingProgressPercent,
+  streamingProgressContainer,
+  streamingProgressBar,
+  streamingPartialText,
+  streamingStatus,
+  streamingStepsContainer,
+  streamingStepItem,
+  streamingStepCheck,
+  piiTokenReveal,
+} from './styles/isolatedStyles';
+
+const piiTokenStatic: React.CSSProperties = {
+  fontFamily: 'monospace',
+  fontWeight: 400,
+  display: 'inline',
+};
+
+/**
+ * Highlight PII tokens in anonymized content.
+ * When animate=true (live transition), each token gets a staggered glow animation.
+ * When animate=false (loaded from history), tokens are styled statically.
+ */
+function highlightPiiTokens(text: string, animate: boolean = false): React.ReactNode {
+  const parts = text.split(/(<?[A-Z][A-Z_]*_\d+>?)/g);
+  if (parts.length === 1) return text;
+  let tokenIndex = 0;
+  return React.createElement(React.Fragment, null,
+    ...parts.map((part, i) => {
+      if (/^<?[A-Z][A-Z_]*_\d+>?$/.test(part)) {
+        const idx = tokenIndex++;
+        if (animate) {
+          return React.createElement('span', {
+            key: i,
+            css: piiTokenReveal,
+            style: { animationDelay: `${idx * 0.25 + 0.6}s` },
+          }, part);
+        }
+        return React.createElement('span', { key: i, style: piiTokenStatic }, part);
+      }
+      return part;
+    })
+  );
+}
+
+// ===== PII Bubble Header =====
+
+/** Word-boundary match — prevents PERSON_1 from matching inside PERSON_11 */
+function tokenInText(text: string, token: string): boolean {
+  return new RegExp(`\\b${token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(text);
+}
+
+const ShieldIcon: React.FC = () => (
+  <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
+  </svg>
+);
+
+// --- Styles: all PII header styles co-located for maintainability ---
+
+/** Scan line overlay on the blue bubble during scanning */
+const piiScanOverlay = css`
+  overflow: hidden !important;
+  &::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: inherit !important;
+    pointer-events: none !important;
+    z-index: 1 !important;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255,255,255,0.06) 30%,
+      rgba(255,255,255,0.18) 50%,
+      rgba(255,255,255,0.06) 70%,
+      transparent 100%
+    ) !important;
+    @keyframes piiScanLine {
+      0%   { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    animation: piiScanLine 1.8s ease-in-out infinite !important;
+  }
+`;
+
+/** Content fade-in when text swaps from original → redacted */
+const piiContentFadeIn = css`
+  @keyframes piiFadeIn {
+    0%   { opacity: 0.2; }
+    100% { opacity: 1; }
+  }
+  animation: piiFadeIn 0.6s ease-out !important;
+`;
+
+const piiHeaderRow = css`
+  display: flex !important;
+  align-items: center !important;
+  gap: 5px !important;
+  font-size: 11px !important;
+  font-weight: 500 !important;
+  font-family: inherit !important;
+  margin-bottom: 6px !important;
+  padding-bottom: 5px !important;
+  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
+  color: rgba(255,255,255,0.85) !important;
+`;
+
+const piiScanLabel = css`
+  @keyframes piiPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  display: inline-flex !important;
+  align-items: baseline !important;
+  animation: piiPulse 1.2s ease-in-out infinite !important;
+`;
+
+const piiBounceDot0 = css`
+  @keyframes piiBounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-3px); }
+  }
+  display: inline-block !important;
+  margin-left: 2px !important;
+  animation: piiBounce 0.6s ease-in-out infinite !important;
+  animation-delay: 0ms !important;
+`;
+const piiBounceDot1 = css`
+  display: inline-block !important;
+  animation: piiBounce 0.6s ease-in-out infinite !important;
+  animation-delay: 150ms !important;
+`;
+const piiBounceDot2 = css`
+  display: inline-block !important;
+  animation: piiBounce 0.6s ease-in-out infinite !important;
+  animation-delay: 300ms !important;
+`;
+
+/** Below-bubble green badge: "✓ {N} items protected ▸" */
+const piiBelowBubbleBtn = css`
+  all: unset !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  font-family: inherit !important;
+  color: #2e7d32 !important;
+  background: #e8f5e9 !important;
+  border-radius: 12px !important;
+  padding: 3px 10px !important;
+  margin-top: 6px !important;
+  cursor: pointer !important;
+  &:hover { background: #c8e6c9 !important; }
+`;
+
+const piiNoPiiStyle = css`
+  @keyframes piiFadeOut {
+    0%   { opacity: 1; }
+    70%  { opacity: 1; }
+    100% { opacity: 0; }
+  }
+  animation: piiFadeOut 2s ease-out forwards !important;
+`;
+
+/** Entity mapping panel — below bubble, original card style */
+const piiEntityPanel = css`
+  margin-top: 6px !important;
+  padding: 8px 12px !important;
+  background-color: #fafafa !important;
+  border: 1px solid #e0e0e0 !important;
+  border-radius: 8px !important;
+  font-family: inherit !important;
+`;
+
+const piiEntityRowStyle = css`
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  font-size: 11px !important;
+  line-height: 1.6 !important;
+`;
+
+const piiOriginalStyle = css`
+  color: #d32f2f !important;
+  text-decoration: line-through !important;
+  font-family: inherit !important;
+`;
+
+const piiArrowStyle = css`
+  color: #bdbdbd !important;
+  font-size: 10px !important;
+`;
+
+const piiTokenMappingStyle = css`
+  color: #1565c0 !important;
+  font-family: monospace !important;
+  font-weight: 600 !important;
+`;
+
+// --- Component ---
+
+type PiiPhase = 'idle' | 'scanning' | 'done' | 'no-pii' | 'faded';
+
+/** Green checkmark icon for below-bubble badge */
+const GreenCheckIcon: React.FC = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="#2e7d32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+  </svg>
+);
+
+/** Status-only header inside the bubble */
+const PiiStatusHeader: React.FC<{
+  message: Message;
+}> = React.memo(({ message }) => {
+  const getInitialPhase = (): PiiPhase => {
+    if (message.piiStatus === 'complete' && message.piiProtection?.anonymizedContent) return 'done';
+    if (message.piiStatus === 'none') return 'faded';
+    if (message.piiStatus === 'scanning') return 'scanning';
+    return 'idle';
+  };
+
+  const [phase, setPhase] = React.useState<PiiPhase>(getInitialPhase);
+  const prevStatusRef = React.useRef(message.piiStatus);
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
+
+  React.useEffect(() => {
+    const prev = prevStatusRef.current;
+    const curr = message.piiStatus;
+    prevStatusRef.current = curr;
+    if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; }
+
+    if (curr === 'scanning' && prev !== 'scanning') {
+      setPhase('scanning');
+    } else if (curr === 'complete') {
+      setPhase(message.piiProtection?.anonymizedContent ? 'done' : 'faded');
+    } else if (curr === 'none') {
+      if (prev === 'scanning') {
+        setPhase('no-pii');
+        timerRef.current = setTimeout(() => setPhase('faded'), 2000);
+      } else {
+        setPhase('faded');
+      }
+    }
+  }, [message.piiStatus, message.piiProtection?.anonymizedContent]);
+
+  if (phase === 'idle' || phase === 'faded') return null;
+
+  if (phase === 'scanning') {
+    const step = message.piiStep ?? 0;
+    const label = step >= 1 ? 'Sending' : 'Scanning';
+    return (
+      <div css={piiHeaderRow}>
+        <ShieldIcon />
+        <span css={piiScanLabel}>
+          {label}
+          <span css={piiBounceDot0}>.</span>
+          <span css={piiBounceDot1}>.</span>
+          <span css={piiBounceDot2}>.</span>
+        </span>
+      </div>
+    );
+  }
+
+  if (phase === 'no-pii') {
+    return (
+      <div css={[piiHeaderRow, piiNoPiiStyle]}>
+        <ShieldIcon />
+        <span>No sensitive data found</span>
+      </div>
+    );
+  }
+
+  // Done: simple status label
+  return (
+    <div css={piiHeaderRow}>
+      <ShieldIcon />
+      <span>✓ Protected</span>
+    </div>
+  );
+});
+
+export const MessageList: React.FC = () => {
+  const {
+    messages,
+    isLoading,
+    isTtsProcessing,
+    requiresGesture,
+    retryTtsWithGesture,
+    connectWallet,
+    signInWallet,
+    hitAddress,
+    isAutoConnecting,
+    isNeedSignInWithWallet,
+    enableAIT,
+    isAITLoading,
+    isAITEnabling,
+    sendMessage,
+    permissions,
+    availableModels,
+    serviceId,
+    piiDisplayMode,
+  } = useChatBot();
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  React.useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  // Track which message's PII entity panel is expanded (only one at a time)
+  const [expandedPiiMsgId, setExpandedPiiMsgId] = React.useState<string | null>(null);
+
+  const handleButtonClick = async (buttonType: string, message: Message) => {
+    // Prevent sending messages while AI Agent is processing
+    if (isLoading) {
+      return;
+    }
+
+    if (buttonType === 'connectWallet') {
+      connectWallet(true);
+    } else if (buttonType === 'signIn') {
+      signInWallet(true);
+    } else if (buttonType === 'enableAIT') {
+      const requiredPermission = message.metadata?.requiredPermission;
+      if (requiredPermission) {
+        const success = await enableAIT(requiredPermission);
+        if (success) {
+          // Find the last user message
+          const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
+          if (lastUserMsg && lastUserMsg.content) {
+            // Re-execute the previous user message (retryCount=1 to skip duplicate PII log)
+            await sendMessage(lastUserMsg.content, 1);
+          }
+        }
+      }
+    } else if (buttonType === 'continue') {
+      const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
+      if (lastUserMsg && lastUserMsg.content) {
+        // Re-execute the previous user message (retryCount=1 to skip duplicate PII log)
+        await sendMessage(lastUserMsg.content, 1);
+      }
+    }
+  };
+
+  // Get model display name from API-provided model list
+  const getModelDisplayName = (modelValue?: string) => {
+    if (!modelValue) return '';
+    // Special case: show "Adi" for specific serviceId
+    const targetServiceId = 'e48fc2b9-a7d1-49e3-85cb-9d621a0bf774';
+    if (serviceId && serviceId.trim() === targetServiceId) {
+      return 'Adi';
+    }
+    // Find model in the list returned by API
+    const model = availableModels.find(m => m.value === modelValue);
+    // Use label from API or fallback to value
+    return model?.label || modelValue;
+  };
+
+  return (
+    <div css={messageListContainer}>
+      {messages.map((message) => {
+        // Determine user message content based on piiStep
+        // Show redacted as soon as piiStep >= 1 ({N} protected) — data available
+        const showRedacted = message.role === 'user'
+          && piiDisplayMode === 'redacted'
+          && message.piiProtection?.anonymizedContent
+          && (message.piiStep !== undefined && message.piiStep >= 1);
+
+        // Is the bubble currently in scanning state? (for scan overlay animation)
+        const isUserScanning = message.role === 'user'
+          && piiDisplayMode === 'redacted'
+          && message.piiStatus === 'scanning';
+        const showPiiHeader = message.role === 'user'
+          && piiDisplayMode === 'redacted'
+          && !!message.piiStatus;
+        const isPiiExpanded = expandedPiiMsgId === message.id;
+
+        // Compute relevant entity mapping for this message
+        let relevantMapping: Record<string, string> = {};
+        if (showPiiHeader && message.piiProtection?.mapping && message.piiProtection?.anonymizedContent) {
+          const content = message.piiProtection.anonymizedContent;
+          for (const [original, token] of Object.entries(message.piiProtection.mapping)) {
+            if (tokenInText(content, token)) {
+              relevantMapping[original] = token;
+            }
+          }
+        }
+        const entityCount = Object.keys(relevantMapping).length;
+
+        const isAgentLikeStream =
+          message.metadata?.agentLlmStream
+          || message.metadata?.voiceRealtime
+          || message.metadata?.model?.endsWith('-stream');
+
+        const isAgentStreamAwaitingFirstToken =
+          message.role === 'assistant'
+          && message.isStreaming
+          && (message.metadata?.agentLlmStream || message.metadata?.model?.endsWith('-stream'))
+          && !(message.partialContent ?? '').length;
+
+        if (isAgentStreamAwaitingFirstToken) {
+          return null;
+        }
+
+        return (
+        <div
+          key={message.id}
+          css={message.role === 'user' ? userMessage : messageBubble}
+        >
+          <div
+            css={[
+              message.role === 'user'
+                ? userMessageContent
+                : message.metadata?.isRetry
+                  ? retryMessageContent
+                  : messageContent,
+              isUserScanning && piiScanOverlay,
+            ]}
+          >
+            {/* PII Status Header — inside bubble, status only */}
+            {showPiiHeader && (
+              <PiiStatusHeader message={message} />
+            )}
+
+            {message.metadata?.isRetry && (
+              <span css={css`margin-right: 8px !important; font-size: 14px !important;`}>🔄</span>
+            )}
+
+            {/* Display attachments */}
+            {message.attachments && message.attachments.length > 0 && (
+              <div
+                css={css`
+                  display: flex !important;
+                  flex-wrap: wrap !important;
+                  gap: 8px !important;
+                  margin-bottom: ${message.content ? '10px' : '0'} !important;
+                `}
+              >
+                {message.attachments.map((attachment, idx) => (
+                  <div
+                    key={idx}
+                    css={css`
+                      position: relative !important;
+                      display: inline-block !important;
+                      border: 1px solid #ddd !important;
+                      border-radius: 8px !important;
+                      overflow: hidden !important;
+                      background: #f5f5f5 !important;
+                      max-width: 200px !important;
+                    `}
+                  >
+                    {attachment.type === 'image' && (
+                      <img
+                        src={attachment.url}
+                        alt={attachment.name}
+                        css={css`
+                          max-width: 200px !important;
+                          max-height: 200px !important;
+                          object-fit: cover !important;
+                          display: block !important;
+                          cursor: pointer !important;
+                        `}
+                        onClick={() => {
+                          // Open image in new window on click
+                          const newWindow = window.open();
+                          if (newWindow) {
+                            newWindow.document.write(`<img src="${attachment.url}" style="max-width: 100%; height: auto;" />`);
+                          }
+                        }}
+                      />
+                    )}
+                    {attachment.type === 'file' && (
+                      <div
+                        css={css`
+                          padding: 20px 15px !important;
+                          text-align: center !important;
+                          min-width: 150px !important;
+                          display: flex !important;
+                          align-items: center !important;
+                          justify-content: center !important;
+                          flex-direction: column !important;
+                          gap: 8px !important;
+                        `}
+                      >
+                        <AttachFileIcon css={css`font-size: 32px !important; color: #666 !important;`} />
+                        <span
+                          css={css`
+                            font-size: 12px !important;
+                            color: #666 !important;
+                            word-break: break-word !important;
+                            max-width: 120px !important;
+                          `}
+                        >
+                          {attachment.name}
+                        </span>
+                        {attachment.size && (
+                          <span
+                            css={css`
+                              font-size: 10px !important;
+                              color: #999 !important;
+                            `}
+                          >
+                            {(attachment.size / 1024).toFixed(1)} KB
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Voice realtime: user + assistant stream in history bubbles */}
+            {message.isStreaming && message.metadata?.voiceRealtime
+              && (message.partialContent ?? '').length > 0 && (
+              <div css={streamingPartialText}>
+                {message.role === 'assistant'
+                  ? convertUrlsToLinks(message.partialContent ?? '')
+                  : message.partialContent}
+                <span css={streamingCaret}>▊</span>
+              </div>
+            )}
+
+            {/* Agent SSE (text chat): stream after first token */}
+            {message.isStreaming && message.role === 'assistant'
+              && (message.metadata?.agentLlmStream || message.metadata?.model?.endsWith('-stream'))
+              && !message.metadata?.voiceRealtime
+              && (message.partialContent ?? '').length > 0 && (
+              <div css={streamingPartialText}>
+                {convertUrlsToLinks(message.partialContent ?? '')}
+                <span css={streamingCaret}>▊</span>
+              </div>
+            )}
+
+            {/* Mode 1: Token streaming (e.g. LangGraph) */}
+            {message.isStreaming && message.partialContent
+              && !message.metadata?.voiceRealtime
+              && !(message.metadata?.agentLlmStream || message.metadata?.model?.endsWith('-stream')) && (
+              <div css={streamingPartialText}>
+                {message.role === 'assistant' ? convertUrlsToLinks(message.partialContent) : message.partialContent}
+                <span css={streamingCaret}>▊</span>
+              </div>
+            )}
+
+            {/* Mode 2: tool/progress streaming — never for Agent SSE (`agentLlmStream` or *-stream model id) */}
+            {message.isStreaming && !message.partialContent && message.role === 'assistant'
+              && !isAgentLikeStream && (
+              <div css={streamingContainer}>
+                <div css={streamingHeader}>
+                  <span css={streamingIcon}>🔧</span>
+                  <span css={streamingToolName}>
+                    {message.streamingToolName || 'Processing'}
+                  </span>
+                  {message.streamingProgress !== undefined && (
+                    <span css={streamingProgressPercent}>
+                      {message.streamingProgress}%
+                    </span>
+                  )}
+                </div>
+
+                {/* Progress bar */}
+                {message.streamingProgress !== undefined && (
+                  <div css={streamingProgressContainer}>
+                    <div css={[streamingProgressBar, css`width: ${message.streamingProgress}% !important;`]} />
+                  </div>
+                )}
+
+                {/* Status message */}
+                {message.streamingStatus && (
+                  <div css={streamingStatus}>
+                    {message.streamingStatus}
+                  </div>
+                )}
+
+                {/* Steps list */}
+                {message.streamingSteps && message.streamingSteps.length > 0 && (
+                  <div css={streamingStepsContainer}>
+                    {message.streamingSteps.map((step, idx) => (
+                      <div key={idx} css={streamingStepItem}>
+                        <span css={streamingStepCheck}>✓</span>
+                        <span>{step}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Final content - display final message content */}
+            {!message.isStreaming && (() => {
+              // User message with redacted PII available — show tokens with fade-in
+              if (showRedacted) {
+                const isLive = message.piiStatus === 'scanning';
+                const content = highlightPiiTokens(message.piiProtection!.anonymizedContent!, isLive);
+                return isLive
+                  ? <span css={piiContentFadeIn}>{content}</span>
+                  : content;
+              }
+
+              // User message during scanning (step 0) — show original text (scan overlay handles animation)
+              if (isUserScanning && !showRedacted) {
+                return message.content;
+              }
+
+              // Assistant message with redacted PII
+              if (message.role === 'assistant'
+                && piiDisplayMode === 'redacted'
+                && message.piiProtection?.anonymizedContent) {
+                return highlightPiiTokens(message.piiProtection.anonymizedContent, false);
+              }
+
+              // Default
+              return message.role === 'assistant'
+                ? convertUrlsToLinks(message.content)
+                : message.content;
+            })()}
+            {message.button && (
+              <div css={css`margin-top: 10px !important;`}>
+                <button
+                  onClick={() => {
+                    if (message.button && message.button.trim()) {
+                      handleButtonClick(message.button, message);
+                    }
+                  }}
+                  disabled={isAutoConnecting ||
+                    (message.button === 'connectWallet' && Boolean(hitAddress)) ||
+                    (message.button === 'signIn' && !isNeedSignInWithWallet) ||
+                    (message.button === 'enableAIT' && (isAITLoading || isAITEnabling ||
+                      (message.metadata?.requiredPermission && permissions.includes(message.metadata.requiredPermission)))) || false}
+                  css={
+                    (message.button === 'connectWallet' && Boolean(hitAddress)) ? connectedButton :
+                      (message.button === 'signIn' && !isNeedSignInWithWallet) ? connectedButton :
+                        (message.button === 'continue') ? connectedButton :
+                          (message.button === 'enableAIT' && (message.metadata?.requiredPermission && permissions.includes(message.metadata.requiredPermission))) ? connectedButton :
+                            chatbotButton
+                  }
+                >
+                  {isAutoConnecting ? 'Connecting...' :
+                    message.button === 'connectWallet' ? (Boolean(hitAddress) ? 'Connected' : walletTextUtils.getWalletText('Connect Wallet', serviceId)) :
+                      message.button === 'signIn' ? (!isNeedSignInWithWallet ? 'Signed In' : 'Sign In') :
+                        message.button === 'continue' ? 'Continue' :
+                          message.button === 'enableAIT' ?
+                            ((isAITLoading || isAITEnabling) ? 'Enabling...' :
+                              (message.metadata?.requiredPermission && permissions.includes(message.metadata.requiredPermission)) ? 'AIT Enabled' : 'Enable AIT Permissions') :
+                            message.button}
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* PII Label + Entity Mapping Panel — below bubble */}
+          {showPiiHeader && message.piiStatus === 'complete' && entityCount > 0 && (
+            <div css={css`text-align: right !important;`}>
+              <button css={piiBelowBubbleBtn} onClick={() => setExpandedPiiMsgId(v => v === message.id ? null : message.id)} type="button">
+                <GreenCheckIcon />
+                {entityCount} item{entityCount !== 1 ? 's' : ''} protected {isPiiExpanded ? '▴' : '▸'}
+              </button>
+              {isPiiExpanded && (
+                <div css={piiEntityPanel}>
+                  {Object.entries(relevantMapping).map(([original, token]) => (
+                    <div key={original} css={piiEntityRowStyle}>
+                      <span css={piiOriginalStyle}>{original}</span>
+                      <span css={piiArrowStyle}>→</span>
+                      <span css={piiTokenMappingStyle}>{token}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {message.role === 'assistant' && message.metadata?.model && (
+            <div css={css`
+              ${modelIndicator}
+              gap: 8px !important;
+            `}>
+              <div css={modelBadge}>
+                <span css={modelDot}></span>
+                {getModelDisplayName(message.metadata.model)}
+              </div>
+              {(isTtsProcessing || requiresGesture) && !isLoading && message.id === messages[messages.length - 1]?.id && (
+                <div css={css`
+                  display: flex !important;
+                  align-items: center !important;
+                  font-size: 12px !important;
+                  color: #666 !important;
+                  gap: 4px !important;
+                `}>
+                  <span role="img" aria-hidden="true">🔊</span>
+                  <span>
+                    {requiresGesture ? (
+                      <button
+                        onClick={() => retryTtsWithGesture && retryTtsWithGesture()}
+                        css={css`
+                          background: none !important;
+                          border: none !important;
+                          color: #1976d2 !important;
+                          padding: 0 !important;
+                          text-decoration: underline !important;
+                          cursor: pointer !important;
+                        `}
+                      >Tap to play voice</button>
+                    ) : 'Preparing voice reply...'}
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      );
+      })}
+      {isLoading && (() => {
+        // During PII pipeline (step 0-1), hide "Thinking..." — message hasn't been sent to AI yet.
+        // Only show once Send step (2) is reached, meaning the anonymized message was sent to AI.
+        if (piiDisplayMode === 'redacted') {
+          const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
+          if (lastUserMsg?.piiStatus === 'scanning' && (lastUserMsg.piiStep === undefined || lastUserMsg.piiStep < 2)) {
+            return null;
+          }
+        }
+        return (
+          <div css={loadingIndicator}>
+            Thinking...
+          </div>
+        );
+      })()}
+      <div ref={messagesEndRef} />
+    </div>
+  );
+};