webui: save model name with conversation history (#13570)

Author: deepanshu2015

tools/server/webui/src/components/ChatMessage.tsx

@@ -37,7 +37,7 @@ export default function ChatMessage({
   onChangeSibling(sibling: Message['id']): void;
   isPending?: boolean;
 }) {
-  const { viewingChat, config } = useAppContext();
+  const { viewingChat, config, serverProps } = useAppContext();
   const [editingContent, setEditingContent] = useState<string | null>(null);
   const timings = useMemo(
     () =>
@@ -189,11 +189,18 @@ export default function ChatMessage({
                   </div>
                 </div>
               )}
+              
+              {/* Show model name only after AI messages */}
+              {msg.role === 'assistant' && serverProps?.model_path && (
+                <div className="text-xs opacity-50 mt-2">
+                  {serverProps.model_path.split(/(\\|\/)/).pop()}
+                </div>
+              )}
             </>
           )}
         </div>
       </div>
-
+        
       {/* actions for each message */}
       {msg.content !== null && (
         <div

tools/server/webui/src/utils/app.context.tsx

@@ -305,8 +305,10 @@ export const AppContextProvider = ({
     if (isGenerating(convId ?? '') || content.trim().length === 0) return false;
 
     if (convId === null || convId.length === 0 || leafNodeId === null) {
+      const modelName = serverProps?.model_path?.split(/(\\|\/)/).pop();
       const conv = await StorageUtils.createConversation(
-        content.substring(0, 256)
+        content.substring(0, 256),
+        modelName
       );
       convId = conv.id;
       leafNodeId = conv.currNode;

tools/server/webui/src/utils/storage.ts

@@ -25,11 +25,17 @@ const db = new Dexie('LlamacppWebui') as Dexie & {
 
 // https://dexie.org/docs/Version/Version.stores()
 db.version(1).stores({
-  // Unlike SQL, you don’t need to specify all properties but only the one you wish to index.
+  // Unlike SQL, you don't need to specify all properties but only the one you wish to index.
   conversations: '&id, lastModified',
   messages: '&id, convId, [convId+id], timestamp',
 });
 
+db.version(2).stores({
+  // Version 2: Added modelName field to conversations
+  conversations: '&id, lastModified, modelName',
+  messages: '&id, convId, [convId+id], timestamp',
+});
+
 // convId is a string prefixed with 'conv-'
 const StorageUtils = {
   /**
@@ -93,14 +99,18 @@ const StorageUtils = {
   /**
    * create a new conversation with a default root node
    */
-  async createConversation(name: string): Promise<Conversation> {
+  async createConversation(
+    name: string,
+    modelName?: string
+  ): Promise<Conversation> {
     const now = Date.now();
     const msgId = now;
     const conv: Conversation = {
       id: `conv-${now}`,
       lastModified: now,
       currNode: msgId,
       name,
+      modelName,
     };
     await db.conversations.add(conv);
     // create a root node

tools/server/webui/src/utils/types.ts

@@ -103,6 +103,7 @@ export interface Conversation {
   lastModified: number; // timestamp from Date.now()
   currNode: Message['id']; // the current message node being viewed
   name: string;
+  modelName?: string; // optional model name extracted from serverProps
 }
 
 export interface ViewingChat {