show model in message

Author: lx-0

src/components/chat/ChatComponent.tsx

@@ -80,14 +80,17 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
   const handleSendMessage = async () => {
     if (!inputMessage.trim()) return;
 
+    // Find the selected model info
+    const selectedModelInfo = AVAILABLE_MODELS.find((m) => m.id === selectedModel);
+
     const userMessageId = addChatMessage('user', inputMessage);
     setInputMessage('');
 
     try {
       const response = await llmApiService.sendMessage(inputMessage, selectedModel, {
         stream: false,
       });
-      addChatMessage('assistant', response.content);
+      addChatMessage('assistant', response.content, undefined, undefined, selectedModelInfo);
     } catch (error) {
       console.error('API error:', error);
       addChatMessage(

src/components/chat/ChatMessage.tsx

@@ -34,7 +34,12 @@ export interface ChatMessageData {
   content: string;
   subprocesses: Subprocess[];
   isExpanded?: boolean;
-  timestamp?: Date; // Add timestamp
+  timestamp?: Date;
+  model?: {
+    id: string;
+    name: string;
+    provider: string;
+  };
 }
 
 interface ChatMessageProps {
@@ -92,21 +97,24 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
     [handleCopyMessage]
   ); // Only recreate when handleCopyMessage changes
 
-  const TimeStampRow = useCallback(
+  const MetaInfo = useCallback(
     () => (
-      <span className="text-xs text-muted-foreground mb-1 px-2 opacity-30 hover:opacity-100 transition-opacity">
-        {message.type} • {message.timestamp ? new Date(message.timestamp).toLocaleTimeString() : ''}
-      </span>
+      <div className="flex flex-col gap-0.5 text-xs text-muted-foreground mb-1 px-2">
+        <span className="opacity-30 hover:opacity-100 transition-opacity">
+          {message.type} • {message.model && message.model?.name + ' • '}
+          {message.timestamp ? new Date(message.timestamp).toLocaleTimeString() : ''}
+        </span>
+      </div>
     ),
-    [message.type, message.timestamp]
+    [message.type, message.timestamp, message.model]
   );
 
   // For log messages
   if (message.type === 'log') {
     return (
       <div className="mb-4 px-4">
         <div className="flex flex-col max-w-[80%]">
-          <TimeStampRow />
+          <MetaInfo />
           <div className="rounded-lg bg-muted/50 p-4">
             <div
               className="cursor-pointer flex flex-col"
@@ -172,7 +180,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
     );
   }
 
-  // Render chat messages (user/assistant) in WhatsApp style
+  // For chat messages
   return (
     <div
       className={cn(
@@ -181,7 +189,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
       )}
     >
       <div className="flex flex-col max-w-[80%]">
-        <TimeStampRow />
+        <MetaInfo />
         <div
           className={cn(
             'rounded-2xl px-4 py-2',

src/hooks/useChatMessages.ts

@@ -1,4 +1,5 @@
 import { ChatMessageData, Subprocess, SubprocessStatus } from '@/components/chat/ChatMessage';
+import { LLMModel } from '@/lib/llm/types';
 import { useCallback, useState } from 'react';
 
 type SubprocessUpdater = (subprocess: Subprocess) => Subprocess;
@@ -13,6 +14,7 @@ export const useChatMessages = () => {
       content: string,
       title?: string,
       service?: string,
+      model?: LLMModel,
       isExpanded = true
     ) => {
       const newMessage: ChatMessageData = {
@@ -24,6 +26,13 @@ export const useChatMessages = () => {
         subprocesses: [],
         isExpanded,
         timestamp: new Date(),
+        model: model
+          ? {
+              id: model.id,
+              name: model.name,
+              provider: model.provider,
+            }
+          : undefined,
       };
       setChatMessages((prev) => [...prev, newMessage]);
       return newMessage.id;