From 125104320e6063237d430e6b506d436f24007c2d Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Fri, 23 May 2025 21:23:52 +0700
Subject: [PATCH] chore: handle many issues with app settings and message
 actions (#5086)

* chore: handle many issues with app settings and message actions

* Update web-app/src/services/mcp.ts

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
---
 web-app/src/containers/ThreadContent.tsx      |  19 +++-
 .../containers/dialogs/AddEditMCPServer.tsx   |  14 ++-
 web-app/src/hooks/useChat.ts                  |   9 +-
 web-app/src/hooks/useMCPServers.ts            | 106 +++++++++---------
 web-app/src/hooks/useModelProvider.ts         |   4 +-
 web-app/src/providers/DataProvider.tsx        |   4 +
 web-app/src/routes/settings/hardware.tsx      |  28 ++---
 web-app/src/routes/settings/mcp-servers.tsx   |   6 +-
 web-app/src/services/mcp.ts                   |   9 ++
 9 files changed, 115 insertions(+), 84 deletions(-)

diff --git a/web-app/src/containers/ThreadContent.tsx b/web-app/src/containers/ThreadContent.tsx
index 07e3593f9..3089a3014 100644
--- a/web-app/src/containers/ThreadContent.tsx
+++ b/web-app/src/containers/ThreadContent.tsx
@@ -125,10 +125,25 @@ export const ThreadContent = memo(
         deleteMessage(toSendMessage.thread_id, toSendMessage.id ?? '')
         toSendMessage = threadMessages.pop()
       }
-      if (toSendMessage)
+      if (toSendMessage) {
+        deleteMessage(toSendMessage.thread_id, toSendMessage.id ?? '')
         sendMessage(toSendMessage.content?.[0]?.text?.value || '')
+      }
     }, [deleteMessage, getMessages, item, sendMessage])
 
+    const removeMessage = useCallback(() => {
+      if (item.role === 'assistant' || item.role === 'tool') {
+        const threadMessages = getMessages(item.thread_id)
+        let toSendMessage = threadMessages.pop()
+        while (toSendMessage && toSendMessage?.role !== 'user') {
+          deleteMessage(toSendMessage.thread_id, toSendMessage.id ?? '')
+          toSendMessage = threadMessages.pop()
+        }
+      } else {
+        deleteMessage(item.thread_id, item.id)
+      }
+    }, [deleteMessage, getMessages, item])
+
     const editMessage = useCallback(
       (messageId: string) => {
         const threadMessages = getMessages(item.thread_id)
@@ -302,7 +317,7 @@ export const ThreadContent = memo(
                       <button
                         className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
                         onClick={() => {
-                          deleteMessage(item.thread_id, item.id)
+                          removeMessage()
                         }}
                       >
                         <IconTrash size={16} />
diff --git a/web-app/src/containers/dialogs/AddEditMCPServer.tsx b/web-app/src/containers/dialogs/AddEditMCPServer.tsx
index a3e7be94a..acb5c06b6 100644
--- a/web-app/src/containers/dialogs/AddEditMCPServer.tsx
+++ b/web-app/src/containers/dialogs/AddEditMCPServer.tsx
@@ -118,14 +118,16 @@ export default function AddEditMCPServer({
     if (open && editingKey && initialData) {
       setServerName(editingKey)
       setCommand(initialData.command)
-      setArgs(initialData.args.length > 0 ? initialData.args : [''])
+      setArgs(initialData.args?.length > 0 ? initialData.args : [''])
 
-      // Convert env object to arrays of keys and values
-      const keys = Object.keys(initialData.env)
-      const values = keys.map((key) => initialData.env[key])
+      if (initialData.env) {
+        // Convert env object to arrays of keys and values
+        const keys = Object.keys(initialData.env)
+        const values = keys.map((key) => initialData.env[key])
 
-      setEnvKeys(keys.length > 0 ? keys : [''])
-      setEnvValues(values.length > 0 ? values : [''])
+        setEnvKeys(keys.length > 0 ? keys : [''])
+        setEnvValues(values.length > 0 ? values : [''])
+      }
     } else if (open) {
       // Add mode - reset form
       resetForm()
diff --git a/web-app/src/hooks/useChat.ts b/web-app/src/hooks/useChat.ts
index 7756442a8..6ed48f9d9 100644
--- a/web-app/src/hooks/useChat.ts
+++ b/web-app/src/hooks/useChat.ts
@@ -98,6 +98,9 @@ export const useChat = () => {
         let isCompleted = false
 
         let attempts = 0
+        const availableTools = selectedModel?.capabilities?.includes('tools')
+          ? tools
+          : []
         while (
           !isCompleted &&
           !abortController.signal.aborted &&
@@ -110,9 +113,11 @@ export const useChat = () => {
             provider,
             builder.getMessages(),
             abortController,
-            tools,
+            availableTools,
             // TODO: replace it with according provider setting later on
-            selectedProvider === 'llama.cpp' && tools.length > 0 ? false : true
+            selectedProvider === 'llama.cpp' && availableTools.length > 0
+              ? false
+              : true
           )
 
           if (!completion) throw new Error('No completion received')
diff --git a/web-app/src/hooks/useMCPServers.ts b/web-app/src/hooks/useMCPServers.ts
index b63c7c0de..d225ab755 100644
--- a/web-app/src/hooks/useMCPServers.ts
+++ b/web-app/src/hooks/useMCPServers.ts
@@ -1,6 +1,4 @@
 import { create } from 'zustand'
-import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStorageKey } from '@/constants/localStorage'
 import { updateMCPConfig } from '@/services/mcp'
 
 // Define the structure of an MCP server configuration
@@ -25,60 +23,58 @@ type MCPServerStoreState = {
   addServer: (key: string, config: MCPServerConfig) => void
   editServer: (key: string, config: MCPServerConfig) => void
   deleteServer: (key: string) => void
+  setServers: (servers: MCPServers) => void
 }
 
-export const useMCPServers = create<MCPServerStoreState>()(
-  persist(
-    (set) => ({
-      open: true,
-      mcpServers: {}, // Start with empty object
-      loading: false,
-      deletedServerKeys: [],
-      setLeftPanel: (value) => set({ open: value }),
+export const useMCPServers = create<MCPServerStoreState>()((set) => ({
+  open: true,
+  mcpServers: {}, // Start with empty object
+  loading: false,
+  deletedServerKeys: [],
+  setLeftPanel: (value) => set({ open: value }),
 
-      // Add a new MCP server or update if the key already exists
-      addServer: (key, config) =>
-        set((state) => {
-          const mcpServers = { ...state.mcpServers, [key]: config }
-          updateMCPConfig(JSON.stringify({ mcpServers }))
-          return { mcpServers }
-        }),
-
-      // Edit an existing MCP server configuration
-      editServer: (key, config) =>
-        set((state) => {
-          // Only proceed if the server exists
-          if (!state.mcpServers[key]) return state
-
-          const mcpServers = { ...state.mcpServers, [key]: config }
-          updateMCPConfig(JSON.stringify({ mcpServers }))
-          return { mcpServers }
-        }),
-
-      // Delete an MCP server by key
-      deleteServer: (key) =>
-        set((state) => {
-          // Create a copy of the current state
-          const updatedServers = { ...state.mcpServers }
-
-          // Delete the server if it exists
-          if (updatedServers[key]) {
-            delete updatedServers[key]
-          }
-          updateMCPConfig(
-            JSON.stringify({
-              mcpServers: updatedServers,
-            })
-          )
-          return {
-            mcpServers: updatedServers,
-            deletedServerKeys: [...state.deletedServerKeys, key],
-          }
-        }),
+  // Add a new MCP server or update if the key already exists
+  addServer: (key, config) =>
+    set((state) => {
+      const mcpServers = { ...state.mcpServers, [key]: config }
+      updateMCPConfig(JSON.stringify({ mcpServers }))
+      return { mcpServers }
     }),
-    {
-      name: localStorageKey.settingMCPSevers, // Using existing key for now
-      storage: createJSONStorage(() => localStorage),
-    }
-  )
-)
+
+  // Edit an existing MCP server configuration
+  editServer: (key, config) =>
+    set((state) => {
+      // Only proceed if the server exists
+      if (!state.mcpServers[key]) return state
+
+      const mcpServers = { ...state.mcpServers, [key]: config }
+      updateMCPConfig(JSON.stringify({ mcpServers }))
+      return { mcpServers }
+    }),
+  setServers: (servers) =>
+    set((state) => {
+      const mcpServers = { ...state.mcpServers, ...servers }
+      updateMCPConfig(JSON.stringify({ mcpServers }))
+      return { mcpServers }
+    }),
+  // Delete an MCP server by key
+  deleteServer: (key) =>
+    set((state) => {
+      // Create a copy of the current state
+      const updatedServers = { ...state.mcpServers }
+
+      // Delete the server if it exists
+      if (updatedServers[key]) {
+        delete updatedServers[key]
+      }
+      updateMCPConfig(
+        JSON.stringify({
+          mcpServers: updatedServers,
+        })
+      )
+      return {
+        mcpServers: updatedServers,
+        deletedServerKeys: [...state.deletedServerKeys, key],
+      }
+    }),
+}))
diff --git a/web-app/src/hooks/useModelProvider.ts b/web-app/src/hooks/useModelProvider.ts
index 18d81822b..3d128f409 100644
--- a/web-app/src/hooks/useModelProvider.ts
+++ b/web-app/src/hooks/useModelProvider.ts
@@ -33,8 +33,8 @@ export const useModelProvider = create<ModelProviderState>()(
             )
             const models = existingProvider?.models || []
             const mergedModels = [
-              ...(provider?.models ?? []),
-              ...models.filter(
+              ...models,
+              ...(provider?.models ?? []).filter(
                 (e) => !provider?.models.some((m) => m.id === e.id)
               ),
             ]
diff --git a/web-app/src/providers/DataProvider.tsx b/web-app/src/providers/DataProvider.tsx
index 98cf01ce2..73333c5a2 100644
--- a/web-app/src/providers/DataProvider.tsx
+++ b/web-app/src/providers/DataProvider.tsx
@@ -8,18 +8,22 @@ import { getProviders } from '@/services/providers'
 import { fetchThreads } from '@/services/threads'
 import { ModelManager } from '@janhq/core'
 import { useEffect } from 'react'
+import { useMCPServers } from '@/hooks/useMCPServers'
+import { getMCPConfig } from '@/services/mcp'
 
 export function DataProvider() {
   const { setProviders } = useModelProvider()
   const { setThreads } = useThreads()
   const { setMessages } = useMessages()
   const { checkForUpdate } = useAppUpdater()
+  const { setServers } = useMCPServers()
 
   useEffect(() => {
     fetchModels().then((models) => {
       models?.forEach((model) => ModelManager.instance().register(model))
       getProviders().then(setProviders)
     })
+    getMCPConfig().then((data) => setServers(data.mcpServers ?? []))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
diff --git a/web-app/src/routes/settings/hardware.tsx b/web-app/src/routes/settings/hardware.tsx
index bd52e8f52..ff899d3b4 100644
--- a/web-app/src/routes/settings/hardware.tsx
+++ b/web-app/src/routes/settings/hardware.tsx
@@ -225,7 +225,7 @@ function Hardware() {
                 title="Name"
                 actions={
                   <span className="text-main-view-fg/80">
-                    {hardwareData.os.name}
+                    {hardwareData.os?.name}
                   </span>
                 }
               />
@@ -233,7 +233,7 @@ function Hardware() {
                 title="Version"
                 actions={
                   <span className="text-main-view-fg/80">
-                    {hardwareData.os.version}
+                    {hardwareData.os?.version}
                   </span>
                 }
               />
@@ -245,7 +245,7 @@ function Hardware() {
                 title="Model"
                 actions={
                   <span className="text-main-view-fg/80">
-                    {hardwareData.cpu.model}
+                    {hardwareData.cpu?.model}
                   </span>
                 }
               />
@@ -253,7 +253,7 @@ function Hardware() {
                 title="Architecture"
                 actions={
                   <span className="text-main-view-fg/80">
-                    {hardwareData.cpu.arch}
+                    {hardwareData.cpu?.arch}
                   </span>
                 }
               />
@@ -261,16 +261,16 @@ function Hardware() {
                 title="Cores"
                 actions={
                   <span className="text-main-view-fg/80">
-                    {hardwareData.cpu.cores}
+                    {hardwareData.cpu?.cores}
                   </span>
                 }
               />
-              {hardwareData.cpu.instructions.join(', ').length > 0 && (
+              {hardwareData.cpu?.instructions.join(', ').length > 0 && (
                 <CardItem
                   title="Instructions"
                   actions={
                     <span className="text-main-view-fg/80">
-                      {hardwareData.cpu.instructions.join(', ')}
+                      {hardwareData.cpu?.instructions?.join(', ')}
                     </span>
                   }
                 />
@@ -280,11 +280,11 @@ function Hardware() {
                 actions={
                   <div className="flex items-center gap-2">
                     <Progress
-                      value={hardwareData.cpu.usage}
+                      value={hardwareData.cpu?.usage}
                       className="h-2 w-10"
                     />
                     <span className="text-main-view-fg/80">
-                      {hardwareData.cpu.usage.toFixed(2)}%
+                      {hardwareData.cpu?.usage?.toFixed(2)}%
                     </span>
                   </div>
                 }
@@ -305,7 +305,7 @@ function Hardware() {
                 title="Available RAM"
                 actions={
                   <span className="text-main-view-fg/80">
-                    {formatMegaBytes(hardwareData.ram.available)}
+                    {formatMegaBytes(hardwareData.ram?.available)}
                   </span>
                 }
               />
@@ -315,16 +315,16 @@ function Hardware() {
                   <div className="flex items-center gap-2">
                     <Progress
                       value={
-                        ((hardwareData.ram.total - hardwareData.ram.available) /
-                          hardwareData.ram.total) *
+                        ((hardwareData.ram?.total - hardwareData.ram?.available) /
+                          hardwareData.ram?.total) *
                         100
                       }
                       className="h-2 w-10"
                     />
                     <span className="text-main-view-fg/80">
                       {(
-                        ((hardwareData.ram.total - hardwareData.ram.available) /
-                          hardwareData.ram.total) *
+                        ((hardwareData.ram?.total - hardwareData.ram?.available) /
+                          hardwareData.ram?.total) *
                         100
                       ).toFixed(2)}
                       %
diff --git a/web-app/src/routes/settings/mcp-servers.tsx b/web-app/src/routes/settings/mcp-servers.tsx
index d92691c57..953f586ab 100644
--- a/web-app/src/routes/settings/mcp-servers.tsx
+++ b/web-app/src/routes/settings/mcp-servers.tsx
@@ -140,7 +140,7 @@ function MCPServers() {
 
     const intervalId = setInterval(() => {
       getConnectedServers().then(setConnectedServers)
-    }, 5000)
+    }, 3000)
 
     return () => clearInterval(intervalId)
   }, [setConnectedServers])
@@ -223,9 +223,9 @@ function MCPServers() {
                       <div className="text-sm text-main-view-fg/70">
                         <div>Command: {config.command}</div>
                         <div className="my-1 break-all">
-                          Args: {config.args.join(', ')}
+                          Args: {config?.args?.join(', ')}
                         </div>
-                        {Object.keys(config.env).length > 0 && (
+                        {config.env && Object.keys(config.env).length > 0 && (
                           <div className="break-all">
                             Env:{' '}
                             {Object.entries(config.env)
diff --git a/web-app/src/services/mcp.ts b/web-app/src/services/mcp.ts
index 116fba713..1360679e3 100644
--- a/web-app/src/services/mcp.ts
+++ b/web-app/src/services/mcp.ts
@@ -10,6 +10,15 @@ export const updateMCPConfig = async (configs: string) => {
   await window.core?.api?.restartMcpServers()
 }
 
+/**
+ * @description This function gets the MCP configuration.
+ * @returns {Promise<object>} The MCP configuration.
+ */
+export const getMCPConfig = async () => {
+  const mcpConfig = JSON.parse((await window.core?.api?.getMcpConfigs()) ?? '{}')
+  return mcpConfig
+}
+
 /**
  * @description This function gets the MCP configuration.
  * @returns {Promise<string>} The MCP configuration.