From 6aa2ea8da4285c3ca00b5849fb8e7b5a84e407d7 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 15 Apr 2025 20:01:31 +0700
Subject: [PATCH] chore: update UI mcp settings

---
 web/package.json                              |   1 +
 web/screens/Settings/MCP/configuration.tsx    |  98 +++++++++
 web/screens/Settings/MCP/index.tsx            | 113 +++-------
 web/screens/Settings/MCP/search.tsx           | 208 ++++++++++++++++++
 .../ThreadCenterPanel/TextMessage/index.tsx   |   3 +-
 5 files changed, 333 insertions(+), 90 deletions(-)
 create mode 100644 web/screens/Settings/MCP/configuration.tsx
 create mode 100644 web/screens/Settings/MCP/search.tsx

diff --git a/web/package.json b/web/package.json
index 7999c74e9..cdf2d8d8b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -37,6 +37,7 @@
     "marked": "^9.1.2",
     "next": "14.2.3",
     "next-themes": "^0.2.1",
+    "npx-scope-finder": "^1.3.0",
     "openai": "^4.90.0",
     "postcss": "8.4.31",
     "postcss-url": "10.1.3",
diff --git a/web/screens/Settings/MCP/configuration.tsx b/web/screens/Settings/MCP/configuration.tsx
new file mode 100644
index 000000000..b829066d2
--- /dev/null
+++ b/web/screens/Settings/MCP/configuration.tsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect, useCallback } from 'react'
+
+import { Button, TextArea } from '@janhq/joi'
+import { useAtomValue } from 'jotai'
+
+import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
+
+const MCPConfiguration = () => {
+  const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
+  const [configContent, setConfigContent] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+
+  const readConfigFile = useCallback(async () => {
+    try {
+      // Read the file
+      const content = await window.core?.api.getMcpConfigs()
+      setConfigContent(content)
+
+      setError('')
+    } catch (err) {
+      console.error('Error reading config file:', err)
+      setError('Failed to read config file')
+    }
+  }, [janDataFolderPath])
+
+  useEffect(() => {
+    if (janDataFolderPath) {
+      readConfigFile()
+    }
+  }, [janDataFolderPath, readConfigFile])
+
+  const saveConfigFile = useCallback(async () => {
+    try {
+      setIsSaving(true)
+      setSuccess('')
+      setError('')
+
+      // Validate JSON
+      try {
+        JSON.parse(configContent)
+      } catch (err) {
+        setError('Invalid JSON format')
+        setIsSaving(false)
+        return
+      }
+      await window.core?.api?.saveMcpConfigs({ configs: configContent })
+
+      setSuccess('Config saved successfully')
+      setIsSaving(false)
+    } catch (err) {
+      console.error('Error saving config file:', err)
+      setError('Failed to save config file')
+      setIsSaving(false)
+    }
+  }, [janDataFolderPath, configContent])
+
+  return (
+    <>
+      {error && (
+        <div className="mb-4 rounded bg-[hsla(var(--destructive-bg))] px-4 py-3 text-[hsla(var(--destructive-fg))]">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="mb-4 rounded bg-[hsla(var(--success-bg))] px-4 py-3 text-[hsla(var(--success-fg))]">
+          {success}
+        </div>
+      )}
+
+      <div className="mb-4 mt-2">
+        <label className="mb-2 block text-sm font-medium">
+          Configuration File (JSON)
+        </label>
+        <TextArea
+          // className="h-80 w-full rounded border border-gray-800 p-2 font-mono text-sm"
+          className="font-mono text-xs"
+          value={configContent}
+          rows={20}
+          onChange={(e) => {
+            setConfigContent(e.target.value)
+            setSuccess('')
+          }}
+        />
+      </div>
+
+      <div className="flex justify-end">
+        <Button onClick={saveConfigFile} disabled={isSaving}>
+          {isSaving ? 'Saving...' : 'Save Config'}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default MCPConfiguration
diff --git a/web/screens/Settings/MCP/index.tsx b/web/screens/Settings/MCP/index.tsx
index 90cb785f5..b45339220 100644
--- a/web/screens/Settings/MCP/index.tsx
+++ b/web/screens/Settings/MCP/index.tsx
@@ -1,100 +1,37 @@
 import React, { useState, useEffect, useCallback } from 'react'
 
-import { fs, joinPath } from '@janhq/core'
-import { Button } from '@janhq/joi'
+import { ScrollArea, Tabs } from '@janhq/joi'
+import MCPSearch from './search'
+import MCPConfiguration from './configuration'
 import { useAtomValue } from 'jotai'
-
-import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
+import { showScrollBarAtom } from '@/helpers/atoms/Setting.atom'
 
 const MCP = () => {
-  const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
-  const [configContent, setConfigContent] = useState('')
-  const [isSaving, setIsSaving] = useState(false)
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState('')
-
-  console.log(janDataFolderPath, 'janDataFolderPath')
-
-  const readConfigFile = useCallback(async () => {
-    try {
-      // Read the file
-      const content = await window.core?.api.getMcpConfigs()
-      setConfigContent(content)
-
-      setError('')
-    } catch (err) {
-      console.error('Error reading config file:', err)
-      setError('Failed to read config file')
-    }
-  }, [janDataFolderPath])
-
-  useEffect(() => {
-    if (janDataFolderPath) {
-      readConfigFile()
-    }
-  }, [janDataFolderPath, readConfigFile])
-
-  const saveConfigFile = useCallback(async () => {
-    try {
-      setIsSaving(true)
-      setSuccess('')
-      setError('')
-
-      // Validate JSON
-      try {
-        JSON.parse(configContent)
-      } catch (err) {
-        setError('Invalid JSON format')
-        setIsSaving(false)
-        return
-      }
-      await window.core?.api?.saveMcpConfigs({ configs: configContent })
-
-      setSuccess('Config saved successfully')
-      setIsSaving(false)
-    } catch (err) {
-      console.error('Error saving config file:', err)
-      setError('Failed to save config file')
-      setIsSaving(false)
-    }
-  }, [janDataFolderPath, configContent])
+  const [tabValue, setTabValue] = useState('search_mcp')
+  const showScrollBar = useAtomValue(showScrollBarAtom)
 
   return (
-    <div className="p-4">
-      <h2 className="mb-4 text-xl font-bold">MCP Configuration</h2>
-
-      {error && (
-        <div className="mb-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700">
-          {error}
+    <ScrollArea
+      type={showScrollBar ? 'always' : 'scroll'}
+      className="h-full w-full"
+    >
+      <div className="block w-full px-4 pb-4">
+        <div className="sticky top-0 bg-[hsla(var(--app-bg))] py-4">
+          <h2 className="mb-4 text-lg font-bold">MCP servers</h2>
+          <Tabs
+            options={[
+              { name: 'Search MCP', value: 'search_mcp' },
+              { name: 'Configuration', value: 'config' },
+            ]}
+            tabStyle="segmented"
+            value={tabValue}
+            onValueChange={(value) => setTabValue(value as string)}
+          />
         </div>
-      )}
-
-      {success && (
-        <div className="mb-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700">
-          {success}
-        </div>
-      )}
-
-      <div className="mb-4">
-        <label className="mb-2 block text-sm font-medium">
-          Configuration File (JSON)
-        </label>
-        <textarea
-          className="h-80 w-full rounded border border-gray-800 p-2 font-mono text-sm"
-          value={configContent}
-          onChange={(e) => {
-            setConfigContent(e.target.value)
-            setSuccess('')
-          }}
-        />
+        {tabValue === 'search_mcp' && <MCPSearch />}
+        {tabValue === 'config' && <MCPConfiguration />}
       </div>
-
-      <div className="flex justify-end">
-        <Button onClick={saveConfigFile} disabled={isSaving}>
-          {isSaving ? 'Saving...' : 'Save Config'}
-        </Button>
-      </div>
-    </div>
+    </ScrollArea>
   )
 }
 
diff --git a/web/screens/Settings/MCP/search.tsx b/web/screens/Settings/MCP/search.tsx
new file mode 100644
index 000000000..22aebd284
--- /dev/null
+++ b/web/screens/Settings/MCP/search.tsx
@@ -0,0 +1,208 @@
+import React, { useState, useEffect, useCallback } from 'react'
+
+import { npxFinder, NPMPackage } from 'npx-scope-finder'
+
+import { Button, Input } from '@janhq/joi'
+import { PlusIcon } from 'lucide-react'
+import { toaster } from '@/containers/Toast'
+
+interface MCPConfig {
+  mcpServers: {
+    [key: string]: {
+      command: string
+      args: string[]
+      env: Record<string, string>
+    }
+  }
+}
+
+const MCPSearch = () => {
+  const [showToast, setShowToast] = useState(false)
+  const [toastMessage, setToastMessage] = useState('')
+  const [toastType, setToastType] = useState<'success' | 'error'>('success')
+  const [orgName, setOrgName] = useState('@modelcontextprotocol')
+  const [packages, setPackages] = useState<NPMPackage[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const searchOrganizationPackages = useCallback(async () => {
+    if (!orgName) return
+
+    try {
+      setLoading(true)
+      setError('')
+
+      // Remove @ symbol if present at the beginning
+      // const scopeName = orgName.startsWith('@') ? orgName.substring(1) : orgName
+
+      // Use npxFinder to search for packages from the specified organization
+      const result = await npxFinder(orgName)
+
+      setPackages(result || [])
+    } catch (err) {
+      console.error('Error searching for packages:', err)
+      setError('Failed to search for packages. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }, [orgName])
+
+  // Search for packages when the component mounts
+  useEffect(() => {
+    searchOrganizationPackages()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <>
+      <h2 className="mt-2 text-lg font-bold">NPX Package List</h2>
+      <p className="text-[hsla(var(--text-secondary))]">
+        Search and add npm packages as MCP servers
+      </p>
+
+      <div className="mt-6">
+        <div className="flex gap-2">
+          <input
+            id="orgName"
+            type="text"
+            value={orgName}
+            onChange={(e) => setOrgName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && orgName) {
+                e.preventDefault()
+                searchOrganizationPackages()
+              }
+            }}
+            className="input w-full"
+            placeholder="Enter npm scope name (e.g. @janhq)"
+          />
+          <Button
+            onClick={searchOrganizationPackages}
+            disabled={loading || !orgName}
+          >
+            {loading ? 'Searching...' : 'Search'}
+          </Button>
+        </div>
+        {error && <p className="mt-2 text-sm text-red-500">{error}</p>}
+      </div>
+
+      {packages.length > 0 ? (
+        <div className="mt-6">
+          {packages.map((pkg, index) => (
+            <div
+              key={index}
+              className="my-2 rounded-xl border border-[hsla(var(--app-border))]"
+            >
+              <div className="flex justify-between border-b border-[hsla(var(--app-border))] px-4 py-3">
+                <span>{pkg.name?.split('/')[1]}</span>
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-sm text-[hsla(var(--text-secondary))]">
+                    {pkg.version}
+                  </span>
+                  <Button theme="icon" onClick={() => handleAddToConfig(pkg)}>
+                    <PlusIcon />
+                  </Button>
+                </div>
+              </div>
+              <div className="px-4 py-3">
+                <p>{pkg.description || 'No description'}</p>
+                <p className="my-2 whitespace-nowrap text-[hsla(var(--text-secondary))]">
+                  Usage: npx {pkg.name}
+                </p>
+                <a
+                  target="_blank"
+                  href={`https://www.npmjs.com/package/${pkg.name}`}
+                >{`https://www.npmjs.com/package/${pkg.name}`}</a>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        !loading && (
+          <div className="mt-4">
+            <p>
+              No packages found. Try searching for a different organization.
+            </p>
+          </div>
+        )
+      )}
+
+      {showToast && (
+        <div
+          className={`fixed bottom-4 right-4 z-50 rounded-md p-4 shadow-lg ${
+            toastType === 'success'
+              ? 'bg-green-100 text-green-800'
+              : 'bg-red-100 text-red-800'
+          }`}
+        >
+          <div className="flex items-center justify-between">
+            <span>{toastMessage}</span>
+            <button
+              onClick={() => setShowToast(false)}
+              className="ml-4 text-gray-500 hover:text-gray-700"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+
+  // Function to add a package to the MCP configuration
+  async function handleAddToConfig(pkg: NPMPackage) {
+    try {
+      // Get current configuration
+      const currentConfig = await window.core?.api.getMcpConfigs()
+
+      // Parse the configuration
+      let config: MCPConfig
+      try {
+        config = JSON.parse(currentConfig || '{"mcpServers": {}}')
+      } catch (err) {
+        // If parsing fails, start with an empty configuration
+        config = { mcpServers: {} }
+      }
+
+      // Generate a unique server name based on the package name
+      const serverName = pkg.name?.split('/')[1] || 'unknown'
+
+      // Check if this server already exists
+      if (config.mcpServers[serverName]) {
+        toaster({
+          title: `Add ${serverName} success`,
+          description: `Server ${serverName} already exists in configuration`,
+          type: 'error',
+        })
+        return
+      }
+
+      // Add the new server configuration
+      config.mcpServers[serverName] = {
+        command: 'npx',
+        args: ['-y', pkg.name || ''],
+        env: {},
+      }
+
+      // Save the updated configuration
+      await window.core?.api?.saveMcpConfigs({
+        configs: JSON.stringify(config, null, 2),
+      })
+
+      toaster({
+        title: `Add ${serverName} success`,
+        description: `Added ${serverName} to MCP configuration`,
+        type: 'success',
+      })
+    } catch (err) {
+      toaster({
+        title: `Add ${pkg.name?.split('/')[1] || 'unknown'} failed`,
+        description: `Failed to add package to configuration`,
+        type: 'error',
+      })
+      console.error('Error adding package to configuration:', err)
+    }
+  }
+}
+
+export default MCPSearch
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index 3af675de5..9d1558ec9 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -81,7 +81,7 @@ const MessageContainer: React.FC<
         'group relative mx-auto px-4',
         !(props.metadata && 'parent_id' in props.metadata) && 'py-2',
         chatWidth === 'compact' && 'max-w-[700px]',
-        isUser && 'pb-4 pt-0'
+        !isUser && 'pb-4 pt-0'
       )}
     >
       {!(props.metadata && 'parent_id' in props.metadata) && (
@@ -92,7 +92,6 @@ const MessageContainer: React.FC<
           )}
         >
           {!isUser && !isSystem && <LogoMark width={28} />}
-
           <div
             className={twMerge(
               'font-extrabold capitalize',