add per-tab model persistence and selection functionality

Author: ferenci84

gui/src/components/TabBar/TabBar.tsx

@@ -1,6 +1,7 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useCallback, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useAppSelector } from "../../redux/hooks";
 import styled from "styled-components";
 import { defaultBorderRadius } from "..";
 import { newSession } from "../../redux/slices/sessionSlice";
@@ -10,10 +11,14 @@ import {
   removeTab,
   setActiveTab,
   setTabs,
+  setTabModel,
 } from "../../redux/slices/tabsSlice";
 import { AppDispatch, RootState } from "../../redux/store";
 import { loadSession, saveCurrentSession } from "../../redux/thunks/session";
 import { varWithFallback } from "../../styles/theme";
+import { useAuth } from "../../context/Auth";
+import { selectSelectedChatModel } from "../../redux/slices/configSlice";
+import { updateSelectedModelByRole } from "../../redux/thunks/updateSelectedModelByRole";
 
 // Haven't set up theme colors for tabs yet
 // Will keep it simple and choose from existing ones. Comments show vars we could use
@@ -137,6 +142,11 @@ export const TabBar = React.forwardRef<HTMLDivElement>((_, ref) => {
     (state: RootState) => state.session.history.length > 0,
   );
   const tabs = useSelector((state: RootState) => state.tabs.tabs);
+  const selectedModel = useAppSelector(selectSelectedChatModel);
+  const { selectedProfile } = useAuth();
+  const activeTab = tabs.find((tab) => tab.isActive);
+  const activeTabId = activeTab?.id;
+  const activeTabModel = activeTab?.modelTitle;
 
   // Simple UUID generator for our needs
   const generateId = useCallback(() => {
@@ -155,6 +165,15 @@ export const TabBar = React.forwardRef<HTMLDivElement>((_, ref) => {
     );
   }, [currentSessionId, currentSessionTitle]);
 
+  // Persist selected model into the active tab in Redux
+  useEffect(() => {
+    if (activeTabId && selectedModel?.title) {
+      dispatch(
+        setTabModel({ id: activeTabId, modelTitle: selectedModel.title }),
+      );
+    }
+  }, [activeTabId, selectedModel?.title, dispatch]);
+
   const handleNewTab = async () => {
     // Save current session before creating new one
     if (hasHistory) {
@@ -171,6 +190,7 @@ export const TabBar = React.forwardRef<HTMLDivElement>((_, ref) => {
         title: `Chat ${tabs.length + 1}`,
         isActive: true,
         sessionId: undefined,
+        modelTitle: selectedModel?.title,
       }),
     );
   };
@@ -196,6 +216,16 @@ export const TabBar = React.forwardRef<HTMLDivElement>((_, ref) => {
     }
 
     dispatch(setActiveTab(id));
+    // restore model for this tab
+    if (targetTab.modelTitle && selectedProfile) {
+      void dispatch(
+        updateSelectedModelByRole({
+          selectedProfile,
+          role: "chat",
+          modelTitle: targetTab.modelTitle,
+        }),
+      );
+    }
   };
 
   const handleTabClose = async (id: string) => {

gui/src/redux/slices/tabsSlice.ts

@@ -5,6 +5,7 @@ export interface Tab {
   title: string;
   isActive: boolean;
   sessionId?: string;
+  modelTitle?: string; // store per-tab model
 }
 
 interface TabsState {
@@ -17,6 +18,7 @@ const initialState: TabsState = {
       id: Date.now().toString(36) + Math.random().toString(36).substring(2),
       title: "Chat 1",
       isActive: true,
+      modelTitle: undefined,
     },
   ],
 };
@@ -37,6 +39,16 @@ export const tabsSlice = createSlice({
         tab.id === id ? { ...tab, ...updates } : tab,
       );
     },
+    // Set the model title for a specific tab
+    setTabModel: (
+      state,
+      action: PayloadAction<{ id: string; modelTitle: string }>,
+    ) => {
+      const { id, modelTitle } = action.payload;
+      state.tabs = state.tabs.map((tab) =>
+        tab.id === id ? { ...tab, modelTitle } : tab,
+      );
+    },
     addTab: (state, action: PayloadAction<Tab>) => {
       state.tabs = state.tabs
         .map((tab) => ({
@@ -122,6 +134,7 @@ export const tabsSlice = createSlice({
             title: currentSessionTitle,
             isActive: true,
             sessionId: currentSessionId,
+            modelTitle: undefined,
           });
       }
     },
@@ -131,6 +144,7 @@ export const tabsSlice = createSlice({
 export const {
   setTabs,
   updateTab,
+  setTabModel,
   addTab,
   removeTab,
   setActiveTab,