Merge pull request #5278 from menloresearch/feat/token-speed-modification

✨ Feat: Token Speed Display Feature

web-app/src/containers/ThreadContent.tsx

@@ -34,6 +34,9 @@ import {
 } from '@/components/ui/tooltip'
 import { formatDate } from '@/utils/formatDate'
 import { AvatarEmoji } from '@/containers/AvatarEmoji'
+
+import TokenSpeedIndicator from '@/containers/TokenSpeedIndicator'
+
 import CodeEditor from '@uiw/react-textarea-code-editor'
 import '@uiw/react-textarea-code-editor/dist.css'
 
@@ -360,8 +363,8 @@ export const ThreadContent = memo(
                   className={cn(
                     'flex items-center gap-2',
                     item.isLastMessage &&
-                      streamingContent &&
-                      'opacity-0 visibility-hidden pointer-events-none'
+                    streamingContent &&
+                    'opacity-0 visibility-hidden pointer-events-none'
                   )}
                 >
                   <CopyButton text={item.content?.[0]?.text.value || ''} />
@@ -445,6 +448,10 @@ export const ThreadContent = memo(
                       </TooltipContent>
                     </Tooltip>
                   )}
+
+                  <TokenSpeedIndicator
+                    metadata={item.metadata}
+                  />
                 </div>
               </div>
             )}

web-app/src/containers/TokenSpeedIndicator.tsx

@@ -0,0 +1,22 @@
+import { IconBrandSpeedtest } from '@tabler/icons-react'
+
+interface TokenSpeedIndicatorProps {
+  metadata?: Record<string, unknown>
+}
+
+export const TokenSpeedIndicator = ({
+  metadata
+}: TokenSpeedIndicatorProps) => {
+  const persistedTokenSpeed = (metadata?.tokenSpeed as { tokenSpeed: number })?.tokenSpeed
+
+  return (
+    <div className="flex items-center gap-1 text-main-view-fg/60 text-xs">
+      <IconBrandSpeedtest size={16} />
+      <span>
+        {Math.round(persistedTokenSpeed)} tokens/sec
+      </span>
+    </div>
+  )
+}
+
+export default TokenSpeedIndicator

web-app/src/hooks/useChat.ts

@@ -401,8 +401,12 @@ export const useChat = () => {
           // Create a final content object for adding to the thread
           const finalContent = newAssistantThreadContent(
             activeThread.id,
-            accumulatedText
+            accumulatedText,
+            {
+              tokenSpeed: useAppState.getState().tokenSpeed,
+            }
           )
+
           builder.addAssistantMessage(accumulatedText, undefined, toolCalls)
           const updatedMessage = await postMessageProcessing(
             toolCalls,