feat(react-client): add mcp zustand store

Author: jbeckerdm

libs/react-client/src/store/chat.ts

@@ -25,15 +25,21 @@ interface ChatState {
   setCommands: (commands: ICommand[]) => void;
   setSideView: (
     sideViewOrSetter?:
-      | { title: string; elements: IMessageElement[] }
-      | ((old?: { title: string; elements: IMessageElement[] }) =>
+      | { title: string; elements: IMessageElement[]; key?: string }
+      | ((old?: {
+          title: string;
+          elements: IMessageElement[];
+          key?: string;
+        }) =>
           | {
               title: string;
               elements: IMessageElement[];
+              key?: string;
             }
           | undefined)
   ) => void;
   setChatProfile: (chatProfile: string) => void;
+  setChatSettingsValue: (chatSettingsValue: any) => void;
   resetChatSettingsInputs: () => void;
   resetChatSettingsValue: () => void;
 }
@@ -87,6 +93,10 @@ export const useChatStore = create<ChatState>((set, get) => ({
     set({ chatProfile });
   },
 
+  setChatSettingsValue: (chatSettingsValue) => {
+    set({ chatSettingsValue });
+  },
+
   resetChatSettingsInputs: () => {
     set({ chatSettingsInputs: [] });
   },

libs/react-client/src/store/index.ts

@@ -1,6 +1,7 @@
 export * from './auth';
 export * from './chat';
 export * from './config';
+export * from './mcp';
 export * from './messages';
 export * from './session';
 export * from './thread';

libs/react-client/src/store/mcp.ts

@@ -0,0 +1,22 @@
+import { persist } from 'zustand/middleware';
+import { create } from 'zustand/react';
+
+import { IMcp } from '../types';
+import { stateOrSetter } from './utils';
+
+interface McpState {
+  mcps: IMcp[];
+  setMcps: (mcpsOrSetter: ((prev: IMcp[]) => IMcp[]) | IMcp[]) => void;
+}
+
+export const useMcpStore = create<McpState>()(
+  persist(
+    (set) => ({
+      mcps: [] as IMcp[],
+      setMcps: (mcpsOrSetter) => stateOrSetter(set, 'mcps', mcpsOrSetter)
+    }),
+    {
+      name: 'mcp_storage_key'
+    }
+  )
+);

libs/react-client/src/types/index.ts

@@ -9,3 +9,4 @@ export * from './thread';
 export * from './history';
 export * from './config';
 export * from './mcp';
+export * from './session';

libs/react-client/src/useChatSession.ts

@@ -6,6 +6,7 @@ import {
   IAction,
   ICommand,
   IElement,
+  IMcp,
   IMessageElement,
   IStep,
   ITasklistElement,
@@ -22,6 +23,7 @@ import { OutputAudioChunk } from './types/audio';
 
 import { ChainlitContext } from './context';
 import { useChatStore } from './store/chat';
+import { useMcpStore } from './store/mcp';
 import { useMessagesStore } from './store/messages';
 import { useSessionState } from './store/session';
 import { useThreadStore } from './store/thread';
@@ -122,7 +124,7 @@ const useChatSession = () => {
       socket.on('connect', () => {
         socket.emit('connection_successful');
         setSession((s) => ({ ...s!, error: false }));
-        setMcps((prev) =>
+        setMcps((prev: IMcp[]) =>
           prev.map((mcp) => {
             const promise =
               mcp.clientType === 'sse'