feat: added performance statistics info when using embedded LLM

src/components/ChatBox.css

@@ -226,6 +226,12 @@
   font-weight: bold;
 }
 
+.message-performance-info {
+  margin-top: 8px;
+  font-size: 10px;
+  color: #909090;
+}
+
 /* Abort link styling */
 .abort-link {
   background: none !important;
@@ -310,4 +316,4 @@
   100% {
     background-position: -200% 0%;
   }
-}
+}

src/components/ChatBox.tsx

@@ -434,6 +434,7 @@ const ChatBox: React.FC<ChatBoxProps> = ({ isVisible }) => {
               key={message.id}
               content={message.content}
               isStreaming={message.isStreaming}
+              performanceInfo={message.performanceInfo}
               onAbort={message.isStreaming ? handleAbort : undefined}
             />
           )

src/components/chat/AssistantMessage.tsx

@@ -3,11 +3,13 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import type { PerformanceInfo } from '../../agent/llm/StreamingTypes';
 
 interface AssistantMessageProps {
   content: string;
   isStreaming?: boolean;
   onAbort?: () => void;
+  performanceInfo?: PerformanceInfo;
 }
 
 // Memoized code component to prevent SyntaxHighlighter re-renders
@@ -30,7 +32,19 @@ const CodeComponent = memo(({ inline, className, children, ...props }: any) => {
   );
 });
 
-const AssistantMessage: React.FC<AssistantMessageProps> = ({ content, isStreaming, onAbort }) => {
+const formatTps = (value?: number): string | null => {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+    return null;
+  }
+
+  return value.toFixed(1);
+};
+
+const AssistantMessage: React.FC<AssistantMessageProps> = ({ content, isStreaming, onAbort, performanceInfo }) => {
+  const prefillTps = formatTps(performanceInfo?.prefillTps);
+  const generationTps = formatTps(performanceInfo?.generationTps);
+  const hasPerformanceInfo = Boolean(prefillTps || generationTps);
+
   const renderContent = () => {
     // Handle special abort link for streaming messages
     if (isStreaming && onAbort && content.includes('click here to abort')) {
@@ -83,6 +97,13 @@ const AssistantMessage: React.FC<AssistantMessageProps> = ({ content, isStreamin
     <div className="message-container message-assistant">
       <div className="message-content">
         {renderContent()}
+        {hasPerformanceInfo && (
+          <div className="message-performance-info">
+            {prefillTps ? `Prefill: ${prefillTps} t/s` : 'Prefill: -'}
+            {' · '}
+            {generationTps ? `Generation: ${generationTps} t/s` : 'Generation: -'}
+          </div>
+        )}
       </div>
     </div>
   );