diff --git a/src/assets/logo/icon_black.svg b/src/assets/logo/icon_black.svg new file mode 100644 index 000000000..752962fb5 --- /dev/null +++ b/src/assets/logo/icon_black.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo/icon_white.svg b/src/assets/logo/icon_white.svg new file mode 100644 index 000000000..4cefd0711 --- /dev/null +++ b/src/assets/logo/icon_white.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo/logo_black.png b/src/assets/logo/logo_black.png new file mode 100644 index 000000000..72106e0e4 Binary files /dev/null and b/src/assets/logo/logo_black.png differ diff --git a/src/assets/logo/logo_white.png b/src/assets/logo/logo_white.png new file mode 100644 index 000000000..e575b582a Binary files /dev/null and b/src/assets/logo/logo_white.png differ diff --git a/src/components/AddWorker/ToolSelect.tsx b/src/components/AddWorker/ToolSelect.tsx index 7bf46b055..7d6091770 100644 --- a/src/components/AddWorker/ToolSelect.tsx +++ b/src/components/AddWorker/ToolSelect.tsx @@ -12,905 +12,806 @@ // limitations under the License. // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= -import { - fetchGet, - fetchPost, - proxyFetchGet, - proxyFetchPost, - proxyFetchPut, -} from '@/api/http'; -import githubIcon from '@/assets/github.svg'; -import IntegrationList from '@/components/IntegrationList'; -import { Badge } from '@/components/ui/badge'; -import { capitalizeFirstLetter, getProxyBaseURL } from '@/lib'; -import { useAuthStore } from '@/store/authStore'; -import { CircleAlert, Store, X } from 'lucide-react'; -import { - forwardRef, - useCallback, - useEffect, - useImperativeHandle, - useRef, - useState, -} from 'react'; -import { useTranslation } from 'react-i18next'; -import { Button } from '../ui/button'; -import { Textarea } from '../ui/textarea'; -import { TooltipSimple } from '../ui/tooltip'; +import React, { + useEffect, + useRef, + useState, + useImperativeHandle, + forwardRef, +} from "react"; +import { Badge } from "@/components/ui/badge"; +import { CircleAlert, Store, X } from "lucide-react"; +import { proxyFetchGet, proxyFetchPost, proxyFetchPut, fetchPost, fetchGet } from "@/api/http"; +import { Input } from "../ui/input"; +import { Textarea } from "../ui/textarea"; +import { Button } from "../ui/button"; +import githubIcon from "@/assets/github.svg"; +import { TooltipSimple } from "../ui/tooltip"; +import IntegrationList from "@/components/IntegrationList"; +import { getProxyBaseURL } from "@/lib"; +import { capitalizeFirstLetter } from "@/lib"; +import { useAuthStore } from "@/store/authStore"; +import { useTranslation } from "react-i18next"; interface McpItem { - id: number; - name: string; - key: string; - description: string; - category?: { name: string }; - home_page?: string; - install_command?: { - env?: { [key: string]: string }; - }; - toolkit?: string; - isLocal?: boolean; + id: number; + name: string; + key: string; + description: string; + category?: { name: string }; + home_page?: string; + install_command?: { + env?: { [key: string]: string }; + }; + toolkit?: string; + isLocal?: boolean; } interface ToolSelectProps { - onShowEnvConfig?: (mcp: McpItem) => void; - onSelectedToolsChange?: (tools: McpItem[]) => void; - initialSelectedTools?: McpItem[]; + onShowEnvConfig?: (mcp: McpItem) => void; + onSelectedToolsChange?: (tools: McpItem[]) => void; + initialSelectedTools?: McpItem[]; } const ToolSelect = forwardRef< - { installMcp: (id: number, env?: any, activeMcp?: any) => Promise }, - ToolSelectProps + { installMcp: (id: number, env?: any, activeMcp?: any) => Promise }, + ToolSelectProps >(({ onShowEnvConfig, onSelectedToolsChange, initialSelectedTools }, ref) => { - const { t } = useTranslation(); - // state management - remove internal selected state, use parent passed initialSelectedTools - const [keyword, setKeyword] = useState(''); - const [mcpList, setMcpList] = useState([]); - const [allMcpList, setAllMcpList] = useState([]); - const [customMcpList, setCustomMcpList] = useState([]); - const [isOpen, setIsOpen] = useState(false); - const [installed, setInstalled] = useState<{ [id: number]: boolean }>({}); - const [installing, setInstalling] = useState<{ [id: number]: boolean }>({}); - const [installedIds, setInstalledIds] = useState([]); - const { email } = useAuthStore(); - // add: integration service list - const [integrations, setIntegrations] = useState([]); - const addOptionRef = useRef<(item: McpItem, isLocal?: boolean) => void>( - null! - ); - const fetchIntegrationsData = useCallback( - (keyword?: string) => { - proxyFetchGet('/api/config/info') - .then((res) => { - if (res && typeof res === 'object' && !res.error) { - const baseURL = getProxyBaseURL(); + const { t } = useTranslation(); + // state management - remove internal selected state, use parent passed initialSelectedTools + const [keyword, setKeyword] = useState(""); + const [mcpList, setMcpList] = useState([]); + const [allMcpList, setAllMcpList] = useState([]); + const [customMcpList, setCustomMcpList] = useState([]); + const [isOpen, setIsOpen] = useState(false); + const [installed, setInstalled] = useState<{ [id: number]: boolean }>({}); + const [installing, setInstalling] = useState<{ [id: number]: boolean }>({}); + const [installedIds, setInstalledIds] = useState([]); + const { email } = useAuthStore(); + // add: integration service list + const [integrations, setIntegrations] = useState([]); + const fetchIntegrationsData = (keyword?: string) => { + proxyFetchGet("/api/config/info").then((res) => { + if (res && typeof res === "object" && !res.error) { + const baseURL = getProxyBaseURL(); - const list = Object.entries(res) - .filter(([key]) => { - if (!keyword) return true; - return key.toLowerCase().includes(keyword.toLowerCase()); - }) - .map(([key, value]: [string, any]) => { - let onInstall = null; + const list = Object.entries(res) + .filter(([key]) => { + if (!keyword) return true; + return key.toLowerCase().includes(keyword.toLowerCase()); + }) + .map(([key, value]: [string, any]) => { + let onInstall = null; - // Special handling for Notion MCP - if (key.toLowerCase() === 'notion') { - onInstall = async () => { - try { - const response = await fetchPost('/install/tool/notion'); - if (response.success) { - // Check if there's a warning (connection failed but installation marked as complete) - if (response.warning) { - console.warn( - 'Notion MCP connection warning:', - response.warning - ); - // Still proceed but log the warning - } - // Save to config to mark as installed - await proxyFetchPost('/api/configs', { - config_group: 'Notion', - config_name: 'MCP_REMOTE_CONFIG_DIR', - config_value: - response.toolkit_name || 'NotionMCPToolkit', - }); - console.log('Notion MCP installed successfully'); - // After successful installation, add to selected tools - const notionItem = { - id: 0, // Use 0 for integration items - key: key, - name: key, - description: - 'Notion workspace integration for reading and managing Notion pages', - toolkit: 'notion_mcp_toolkit', // Add the toolkit name - isLocal: true, - }; - addOptionRef.current?.(notionItem, true); - } else { - console.error( - 'Failed to install Notion MCP:', - response.error || 'Unknown error' - ); - throw new Error( - response.error || 'Failed to install Notion MCP' - ); - } - } catch (error: any) { - console.error( - 'Failed to install Notion MCP:', - error.message - ); - throw error; - } - }; - } else if (key.toLowerCase() === 'google calendar') { - onInstall = async () => { - try { - const response = await fetchPost( - '/install/tool/google_calendar' - ); - if (response.success) { - if (response.warning) { - console.warn( - 'Google Calendar connection warning:', - response.warning - ); - } - try { - const existingConfigs = - await proxyFetchGet('/api/configs'); - const existing = Array.isArray(existingConfigs) - ? existingConfigs.find( - (c: any) => - c.config_group?.toLowerCase() === - 'google calendar' && - c.config_name === 'GOOGLE_REFRESH_TOKEN' - ) - : null; + // Special handling for Notion MCP + if (key.toLowerCase() === 'notion') { + onInstall = async () => { + try { + const response = await fetchPost("/install/tool/notion"); + if (response.success) { + // Check if there's a warning (connection failed but installation marked as complete) + if (response.warning) { + console.warn("Notion MCP connection warning:", response.warning); + // Still proceed but log the warning + } + // Save to config to mark as installed + await proxyFetchPost("/api/configs", { + config_group: "Notion", + config_name: "MCP_REMOTE_CONFIG_DIR", + config_value: response.toolkit_name || "NotionMCPToolkit", + }); + console.log("Notion MCP installed successfully"); + // After successful installation, add to selected tools + const notionItem = { + id: 0, // Use 0 for integration items + key: key, + name: key, + description: "Notion workspace integration for reading and managing Notion pages", + toolkit: "notion_mcp_toolkit", // Add the toolkit name + isLocal: true + }; + addOption(notionItem, true); + } else { + console.error("Failed to install Notion MCP:", response.error || "Unknown error"); + throw new Error(response.error || "Failed to install Notion MCP"); + } + } catch (error: any) { + console.error("Failed to install Notion MCP:", error.message); + throw error; + } + }; + } else if (key.toLowerCase() === 'google calendar') { + onInstall = async () => { + try { + const response = await fetchPost("/install/tool/google_calendar"); + if (response.success) { + if (response.warning) { + console.warn("Google Calendar connection warning:", response.warning); + } + try { + const existingConfigs = await proxyFetchGet("/api/configs"); + const existing = Array.isArray(existingConfigs) + ? existingConfigs.find((c: any) => + c.config_group?.toLowerCase() === "google calendar" && + c.config_name === "GOOGLE_REFRESH_TOKEN" + ) + : null; - const configPayload = { - config_group: 'Google Calendar', - config_name: 'GOOGLE_REFRESH_TOKEN', - config_value: 'exists', - }; + const configPayload = { + config_group: "Google Calendar", + config_name: "GOOGLE_REFRESH_TOKEN", + config_value: "exists", + }; - if (existing) { - await proxyFetchPut( - `/api/configs/${existing.id}`, - configPayload - ); - } else { - await proxyFetchPost('/api/configs', configPayload); - } - } catch (configError) { - console.warn( - 'Failed to persist Google Calendar config', - configError - ); - } - console.log('Google Calendar installed successfully'); - const calendarItem = { - id: 0, // Use 0 for integration items - key: key, - name: key, - description: - 'Google Calendar integration for managing events and schedules', - toolkit: 'google_calendar_toolkit', // Add the toolkit name - isLocal: true, - }; - addOptionRef.current?.(calendarItem, true); - } else if (response.status === 'authorizing') { - console.log( - 'Google Calendar authorization in progress. Please complete in browser.' - ); - if (response.message) { - console.log(response.message); - } - } else { - console.error( - 'Failed to install Google Calendar:', - response.error || 'Unknown error' - ); - throw new Error( - response.error || 'Failed to install Google Calendar' - ); - } - return response; - } catch (error: any) { - if (!error.message?.includes('authorization')) { - console.error( - 'Failed to install Google Calendar:', - error.message - ); - throw error; - } - return null; // Return null on authorization flow errors - } - }; - } else { - onInstall = () => - (window.location.href = `${baseURL}/api/oauth/${key.toLowerCase()}/login`); - } + if (existing) { + await proxyFetchPut(`/api/configs/${existing.id}`, configPayload); + } else { + await proxyFetchPost("/api/configs", configPayload); + } + } catch (configError) { + console.warn("Failed to persist Google Calendar config", configError); + } + console.log("Google Calendar installed successfully"); + const calendarItem = { + id: 0, // Use 0 for integration items + key: key, + name: key, + description: "Google Calendar integration for managing events and schedules", + toolkit: "google_calendar_toolkit", // Add the toolkit name + isLocal: true + }; + addOption(calendarItem, true); + } else if (response.status === "authorizing") { + console.log("Google Calendar authorization in progress. Please complete in browser."); + if (response.message) { + console.log(response.message); + } + } else { + console.error("Failed to install Google Calendar:", response.error || "Unknown error"); + throw new Error(response.error || "Failed to install Google Calendar"); + } + return response; + } catch (error: any) { + if (!error.message?.includes("authorization")) { + console.error("Failed to install Google Calendar:", error.message); + throw error; + } + return null; // Return null on authorization flow errors + } + }; + } else { + onInstall = () => + (window.location.href = `${baseURL}/api/oauth/${key.toLowerCase()}/login`); + } - return { - key: key, - name: key, - env_vars: value.env_vars, - toolkit: value.toolkit, - desc: - value.env_vars && value.env_vars.length > 0 - ? `${t('layout.environmental-variables-required')} ${value.env_vars.join( - ', ' - )}` - : key.toLowerCase() === 'notion' - ? t('layout.notion-workspace-integration') - : key.toLowerCase() === 'google calendar' - ? t('layout.google-calendar-integration') - : '', - onInstall, - }; - }); - setIntegrations(list); - } else { - console.error('Failed to fetch integrations:', res); - setIntegrations([]); - } - }) - .catch((error) => { - console.error('Error fetching integrations:', error); - setIntegrations([]); - }); - }, - [t] - ); + return { + key: key, + name: key, + env_vars: value.env_vars, + toolkit: value.toolkit, + desc: + value.env_vars && value.env_vars.length > 0 + ? `${t("layout.environmental-variables-required")} ${value.env_vars.join( + ", " + )}` + : key.toLowerCase() === 'notion' + ? t("layout.notion-workspace-integration") + : key.toLowerCase() === 'google calendar' + ? t("layout.google-calendar-integration") + : "", + onInstall, + }; + }); + setIntegrations(list); + } else { + console.error("Failed to fetch integrations:", res); + setIntegrations([]); + } + }).catch((error) => { + console.error("Error fetching integrations:", error); + setIntegrations([]); + }); + }; - // Refs - const inputRef = useRef(null); - const debounceTimerRef = useRef(null); - const containerRef = useRef(null); + // Refs + const inputRef = useRef(null); + const debounceTimerRef = useRef(null); + const containerRef = useRef(null); - // constants - const categoryIconMap: Record = { - anthropic: 'Anthropic', - community: 'Community', - official: 'Official', - camel: 'Camel', - }; + // constants + const categoryIconMap: Record = { + anthropic: "Anthropic", + community: "Community", + official: "Official", + camel: "Camel", + }; - const svgIcons = import.meta.glob('@/assets/mcp/*.svg', { - eager: true, - query: '?url', - import: 'default', - }); + const svgIcons = import.meta.glob("@/assets/mcp/*.svg", { + eager: true, + query: "?url", + import: "default", + }); - // data fetching - const fetchData = useCallback((keyword?: string) => { - proxyFetchGet('/api/mcps', { - keyword: keyword || '', - page: 1, - size: 100, - }) - .then((res) => { - // Add defensive check for API errors - if (res && res.items && Array.isArray(res.items)) { - setAllMcpList(res.items); - } else { - console.error('Failed to fetch MCPs:', res); - setAllMcpList([]); - } - }) - .catch((error) => { - console.error('Error fetching MCPs:', error); - setAllMcpList([]); - }); - }, []); + // data fetching + const fetchData = (keyword?: string) => { + proxyFetchGet("/api/mcps", { + keyword: keyword || "", + page: 1, + size: 100, + }).then((res) => { + // Add defensive check for API errors + if (res && res.items && Array.isArray(res.items)) { + setAllMcpList(res.items); + } else { + console.error("Failed to fetch MCPs:", res); + setAllMcpList([]); + } + }).catch((error) => { + console.error("Error fetching MCPs:", error); + setAllMcpList([]); + }); + }; - const fetchInstalledMcps = () => { - proxyFetchGet('/api/mcp/users') - .then((res) => { - let dataList = []; - let ids: number[] = []; - if (Array.isArray(res)) { - ids = res.map((item: any) => item.mcp_id); - dataList = res; - } else if (res && Array.isArray(res.items)) { - ids = res.items.map((item: any) => item.mcp_id); - dataList = res.items; - } - setInstalledIds(ids); + const fetchInstalledMcps = () => { + proxyFetchGet("/api/mcp/users").then((res) => { + let dataList = []; + let ids: number[] = []; + if (Array.isArray(res)) { + ids = res.map((item: any) => item.mcp_id); + dataList = res; + } else if (res && Array.isArray(res.items)) { + ids = res.items.map((item: any) => item.mcp_id); + dataList = res.items; + } + setInstalledIds(ids); - const customMcpList = dataList.filter((item: any) => item.mcp_id === 0); - setCustomMcpList(customMcpList); - }) - .catch((error) => { - console.error('Error fetching installed MCPs:', error); - setInstalledIds([]); - setCustomMcpList([]); - }); - }; + const customMcpList = dataList.filter((item: any) => item.mcp_id === 0); + setCustomMcpList(customMcpList); + }).catch((error) => { + console.error("Error fetching installed MCPs:", error); + setInstalledIds([]); + setCustomMcpList([]); + }); + }; - // only surface installed MCPs from the market list - useEffect(() => { - // Add defensive check and fix logic: should filter when installedIds has items - if (Array.isArray(allMcpList) && installedIds.length > 0) { - const filtered = allMcpList.filter((item) => - installedIds.includes(item.id) - ); - setMcpList(filtered); - } else if (Array.isArray(allMcpList)) { - // If no installed IDs, show empty list instead of all - setMcpList([]); - } - }, [allMcpList, installedIds]); + // only surface installed MCPs from the market list + useEffect(() => { + // Add defensive check and fix logic: should filter when installedIds has items + if (Array.isArray(allMcpList) && installedIds.length > 0) { + const filtered = allMcpList.filter((item) => installedIds.includes(item.id)); + setMcpList(filtered); + } else if (Array.isArray(allMcpList)) { + // If no installed IDs, show empty list instead of all + setMcpList([]); + } + }, [allMcpList, installedIds]); - // public save env/config logic - const saveEnvAndConfig = async ( - provider: string, - envVarKey: string, - value: string - ) => { - // First fetch current configs to check for existing ones - const configsRes = await proxyFetchGet('/api/configs'); - const configs = Array.isArray(configsRes) ? configsRes : []; + // public save env/config logic + const saveEnvAndConfig = async ( + provider: string, + envVarKey: string, + value: string + ) => { + // First fetch current configs to check for existing ones + const configsRes = await proxyFetchGet("/api/configs"); + const configs = Array.isArray(configsRes) ? configsRes : []; - const configPayload = { - config_group: capitalizeFirstLetter(provider), - config_name: envVarKey, - config_value: value, - }; + const configPayload = { + config_group: capitalizeFirstLetter(provider), + config_name: envVarKey, + config_value: value, + }; - // Check if config already exists - const existingConfig = configs.find( - (c: any) => - c.config_name === envVarKey && - c.config_group?.toLowerCase() === provider.toLowerCase() - ); + // Check if config already exists + const existingConfig = configs.find( + (c: any) => c.config_name === envVarKey && + c.config_group?.toLowerCase() === provider.toLowerCase() + ); - if (existingConfig) { - // Update existing config - await proxyFetchPut(`/api/configs/${existingConfig.id}`, configPayload); - } else { - // Create new config - await proxyFetchPost('/api/configs', configPayload); - } + if (existingConfig) { + // Update existing config + await proxyFetchPut(`/api/configs/${existingConfig.id}`, configPayload); + } else { + // Create new config + await proxyFetchPost("/api/configs", configPayload); + } - if (window.electronAPI?.envWrite) { - await window.electronAPI.envWrite(email, { key: envVarKey, value }); - } - }; - // MCP install related - const installMcp = async ( - id: number, - envValue?: { [key: string]: any }, - activeMcp?: any - ) => { - // is exa search or google calendar - if (activeMcp && envValue) { - const env: { [key: string]: string } = {}; - Object.keys(envValue).map((key) => { - env[key] = envValue[key]?.value; - }); - activeMcp.install_command.env = env; + if (window.electronAPI?.envWrite) { + await window.electronAPI.envWrite(email, { key: envVarKey, value }); + } + }; + // MCP install related + const installMcp = async ( + id: number, + envValue?: { [key: string]: any }, + activeMcp?: any + ) => { + // is exa search or google calendar + if (activeMcp && envValue) { + const env: { [key: string]: string } = {}; + Object.keys(envValue).map((key) => { + env[key] = envValue[key]?.value; + }); + activeMcp.install_command.env = env; - // Save all env vars and wait for completion - console.log('[installMcp] Saving env vars for', activeMcp.key); - try { - await Promise.all( - Object.keys(activeMcp.install_command.env).map(async (key) => { - console.log( - '[installMcp] Saving', - key, - '=', - activeMcp.install_command.env[key] - ); - return saveEnvAndConfig( - activeMcp.key, - key, - activeMcp.install_command.env[key] - ); - }) - ); - console.log('[installMcp] All env vars saved successfully'); - } catch (error) { - console.error('[installMcp] Failed to save env vars:', error); - // Continue anyway to trigger installation - } + // Save all env vars and wait for completion + console.log("[installMcp] Saving env vars for", activeMcp.key); + try { + await Promise.all( + Object.keys(activeMcp.install_command.env).map(async (key) => { + console.log("[installMcp] Saving", key, "=", activeMcp.install_command.env[key]); + return saveEnvAndConfig( + activeMcp.key, + key, + activeMcp.install_command.env[key] + ); + }) + ); + console.log("[installMcp] All env vars saved successfully"); + } catch (error) { + console.error("[installMcp] Failed to save env vars:", error); + // Continue anyway to trigger installation + } - if (activeMcp.key !== 'Google Calendar') { - const integrationItem = integrations.find( - (item) => item.key === activeMcp.key - ); - addOption( - { - id: activeMcp.id, - key: activeMcp.key, - name: activeMcp.name ?? activeMcp.key, - description: - typeof integrationItem?.desc === 'string' - ? integrationItem.desc - : '', - toolkit: integrationItem?.toolkit, - isLocal: true, - }, - true - ); - return; - } + if (activeMcp.key !== "Google Calendar") { + const integrationItem = integrations.find( + (item) => item.key === activeMcp.key + ); + addOption( + { + id: activeMcp.id, + key: activeMcp.key, + name: activeMcp.name ?? activeMcp.key, + description: + typeof integrationItem?.desc === "string" + ? integrationItem.desc + : "", + toolkit: integrationItem?.toolkit, + isLocal: true, + }, + true + ); + return; + } - // Trigger instantiation for Google Calendar - if (activeMcp.key === 'Google Calendar') { - console.log( - '[ToolSelect installMcp] Starting Google Calendar installation' - ); - try { - const response = await fetchPost('/install/tool/google_calendar'); + // Trigger instantiation for Google Calendar + if (activeMcp.key === "Google Calendar") { + console.log("[ToolSelect installMcp] Starting Google Calendar installation"); + try { + const response = await fetchPost("/install/tool/google_calendar"); - if (response.success) { - console.log('[ToolSelect installMcp] Immediate success'); - // Mark as successfully installed by writing refresh token marker - const existingConfigs = await proxyFetchGet('/api/configs'); - const existing = Array.isArray(existingConfigs) - ? existingConfigs.find( - (c: any) => - c.config_group?.toLowerCase() === 'google calendar' && - c.config_name === 'GOOGLE_REFRESH_TOKEN' - ) - : null; + if (response.success) { + console.log("[ToolSelect installMcp] Immediate success"); + // Mark as successfully installed by writing refresh token marker + const existingConfigs = await proxyFetchGet("/api/configs"); + const existing = Array.isArray(existingConfigs) + ? existingConfigs.find((c: any) => + c.config_group?.toLowerCase() === "google calendar" && + c.config_name === "GOOGLE_REFRESH_TOKEN" + ) + : null; - const configPayload = { - config_group: 'Google Calendar', - config_name: 'GOOGLE_REFRESH_TOKEN', - config_value: 'exists', - }; + const configPayload = { + config_group: "Google Calendar", + config_name: "GOOGLE_REFRESH_TOKEN", + config_value: "exists", + }; - if (existing) { - await proxyFetchPut(`/api/configs/${existing.id}`, configPayload); - } else { - await proxyFetchPost('/api/configs', configPayload); - } + if (existing) { + await proxyFetchPut(`/api/configs/${existing.id}`, configPayload); + } else { + await proxyFetchPost("/api/configs", configPayload); + } - // Refresh integrations to update install status - fetchIntegrationsData(); + // Refresh integrations to update install status + fetchIntegrationsData(); - const selectedItem = { - id: activeMcp.id, - key: activeMcp.key, - name: activeMcp.name, - description: - 'Google Calendar integration for managing events and schedules', - toolkit: 'google_calendar_toolkit', - isLocal: true, - }; - addOption(selectedItem, true); - } else if (response.status === 'authorizing') { - // Authorization in progress - browser should have opened - console.log( - '[ToolSelect installMcp] Authorization required, starting polling loop' - ); + const selectedItem = { + id: activeMcp.id, + key: activeMcp.key, + name: activeMcp.name, + description: "Google Calendar integration for managing events and schedules", + toolkit: "google_calendar_toolkit", + isLocal: true + }; + addOption(selectedItem, true); + } else if (response.status === "authorizing") { + // Authorization in progress - browser should have opened + console.log("[ToolSelect installMcp] Authorization required, starting polling loop"); - // WAIT for OAuth status completion instead of using setInterval - const start = Date.now(); - const timeoutMs = 5 * 60 * 1000; // 5 minutes + // WAIT for OAuth status completion instead of using setInterval + const start = Date.now(); + const timeoutMs = 5 * 60 * 1000; // 5 minutes - while (Date.now() - start < timeoutMs) { - try { - const statusResponse = await fetchGet( - '/oauth/status/google_calendar' - ); - console.log( - '[ToolSelect installMcp] OAuth status:', - statusResponse.status - ); + while (Date.now() - start < timeoutMs) { + try { + const statusResponse = await fetchGet("/oauth/status/google_calendar"); + console.log("[ToolSelect installMcp] OAuth status:", statusResponse.status); - if (statusResponse.status === 'success') { - console.log( - '[ToolSelect installMcp] Authorization completed successfully!' - ); + if (statusResponse.status === "success") { + console.log("[ToolSelect installMcp] Authorization completed successfully!"); - // Try installing again now that authorization is complete - const retryResponse = await fetchPost( - '/install/tool/google_calendar' - ); - if (retryResponse.success) { - // Mark as successfully installed - const existingConfigs = await proxyFetchGet('/api/configs'); - const existing = Array.isArray(existingConfigs) - ? existingConfigs.find( - (c: any) => - c.config_group?.toLowerCase() === - 'google calendar' && - c.config_name === 'GOOGLE_REFRESH_TOKEN' - ) - : null; + // Try installing again now that authorization is complete + const retryResponse = await fetchPost("/install/tool/google_calendar"); + if (retryResponse.success) { + // Mark as successfully installed + const existingConfigs = await proxyFetchGet("/api/configs"); + const existing = Array.isArray(existingConfigs) + ? existingConfigs.find((c: any) => + c.config_group?.toLowerCase() === "google calendar" && + c.config_name === "GOOGLE_REFRESH_TOKEN" + ) + : null; - const configPayload = { - config_group: 'Google Calendar', - config_name: 'GOOGLE_REFRESH_TOKEN', - config_value: 'exists', - }; + const configPayload = { + config_group: "Google Calendar", + config_name: "GOOGLE_REFRESH_TOKEN", + config_value: "exists", + }; - if (existing) { - await proxyFetchPut( - `/api/configs/${existing.id}`, - configPayload - ); - } else { - await proxyFetchPost('/api/configs', configPayload); - } + if (existing) { + await proxyFetchPut(`/api/configs/${existing.id}`, configPayload); + } else { + await proxyFetchPost("/api/configs", configPayload); + } - fetchIntegrationsData(); + fetchIntegrationsData(); - const selectedItem = { - id: activeMcp.id, - key: activeMcp.key, - name: activeMcp.name, - description: - 'Google Calendar integration for managing events and schedules', - toolkit: 'google_calendar_toolkit', - isLocal: true, - }; - addOption(selectedItem, true); - } - console.log( - '[ToolSelect installMcp] Installation complete, returning' - ); - return; - } else if (statusResponse.status === 'failed') { - console.error( - '[ToolSelect installMcp] Authorization failed:', - statusResponse.error - ); - return; - } else if (statusResponse.status === 'cancelled') { - console.log( - '[ToolSelect installMcp] Authorization cancelled' - ); - return; - } - } catch (error) { - console.error( - '[ToolSelect installMcp] Error polling OAuth status:', - error - ); - } + const selectedItem = { + id: activeMcp.id, + key: activeMcp.key, + name: activeMcp.name, + description: "Google Calendar integration for managing events and schedules", + toolkit: "google_calendar_toolkit", + isLocal: true + }; + addOption(selectedItem, true); + } + console.log("[ToolSelect installMcp] Installation complete, returning"); + return; + } else if (statusResponse.status === "failed") { + console.error("[ToolSelect installMcp] Authorization failed:", statusResponse.error); + return; + } else if (statusResponse.status === "cancelled") { + console.log("[ToolSelect installMcp] Authorization cancelled"); + return; + } + } catch (error) { + console.error("[ToolSelect installMcp] Error polling OAuth status:", error); + } - // Wait before next poll - await new Promise((r) => setTimeout(r, 1500)); - } + // Wait before next poll + await new Promise((r) => setTimeout(r, 1500)); + } - console.log('[ToolSelect installMcp] Polling timeout'); - return; - } else { - console.error( - 'Failed to install Google Calendar:', - response.error || 'Unknown error' - ); - } - } catch (error: any) { - console.error('Failed to install Google Calendar:', error.message); - } - } - return; - } - setInstalling((prev) => ({ ...prev, [id]: true })); - try { - await proxyFetchPost('/api/mcp/install?mcp_id=' + id); - setInstalled((prev) => ({ ...prev, [id]: true })); - const installedMcp = mcpList.find((mcp) => mcp.id === id); - if (window.ipcRenderer && installedMcp) { - const env: { [key: string]: string } = {}; - if (envValue) { - Object.keys(envValue).map((key) => { - env[key] = envValue[key]?.value; - }); - installedMcp.install_command!.env = env; - } + console.log("[ToolSelect installMcp] Polling timeout"); + return; + } else { + console.error("Failed to install Google Calendar:", response.error || "Unknown error"); + } + } catch (error: any) { + console.error("Failed to install Google Calendar:", error.message); + } + } + return; + } + setInstalling((prev) => ({ ...prev, [id]: true })); + try { + await proxyFetchPost("/api/mcp/install?mcp_id=" + id); + setInstalled((prev) => ({ ...prev, [id]: true })); + const installedMcp = mcpList.find((mcp) => mcp.id === id); + if (window.ipcRenderer && installedMcp) { + const env: { [key: string]: string } = {}; + if (envValue) { + Object.keys(envValue).map((key) => { + env[key] = envValue[key]?.value; + }); + installedMcp.install_command!.env = env; + } - await window.ipcRenderer.invoke( - 'mcp-install', - installedMcp.key, - installedMcp.install_command - ); - } - // after install successfully, automatically add to selected list - if (installedMcp) { - addOption(installedMcp); - } - } catch (e) { - console.error('Failed to install MCP:', e); - } finally { - setInstalling((prev) => ({ ...prev, [id]: false })); - } - }; + await window.ipcRenderer.invoke( + "mcp-install", + installedMcp.key, + installedMcp.install_command + ); + } + // after install successfully, automatically add to selected list + if (installedMcp) { + addOption(installedMcp); + } + } catch (e) { + console.error("Failed to install MCP:", e); + } finally { + setInstalling((prev) => ({ ...prev, [id]: false })); + } + }; - // expose install method to parent component - useImperativeHandle(ref, () => ({ - installMcp, - })); + // expose install method to parent component + useImperativeHandle(ref, () => ({ + installMcp, + })); - const checkEnv = (id: number) => { - const mcp = mcpList.find((mcp) => mcp.id === id); - if (mcp && Object.keys(mcp?.install_command?.env || {}).length > 0) { - if (onShowEnvConfig) { - onShowEnvConfig(mcp); - } - } else { - installMcp(id); - } - }; + const checkEnv = (id: number) => { + const mcp = mcpList.find((mcp) => mcp.id === id); + if (mcp && Object.keys(mcp?.install_command?.env || {}).length > 0) { + if (onShowEnvConfig) { + onShowEnvConfig(mcp); + } + } else { + installMcp(id); + } + }; - // select management - const addOption = (item: McpItem, isLocal?: boolean) => { - setKeyword(''); - const currentSelected = initialSelectedTools || []; - console.log(currentSelected.find((i) => i.id === item.id)); - if (isLocal) { - if (!currentSelected.find((i) => i.key === item.key)) { - const newSelected = [...currentSelected, { ...item, isLocal }]; - onSelectedToolsChange?.(newSelected); - } - return; - } - if (!currentSelected.find((i) => i.id === item.id)) { - if (!isLocal) isLocal = false; - const newSelected = [...currentSelected, { ...item, isLocal }]; - onSelectedToolsChange?.(newSelected); - } - }; - addOptionRef.current = addOption; + // select management + const addOption = (item: McpItem, isLocal?: boolean) => { + setKeyword(""); + const currentSelected = initialSelectedTools || []; + console.log(currentSelected.find((i) => i.id === item.id)); + if (isLocal) { + if (!currentSelected.find((i) => i.key === item.key)) { + const newSelected = [...currentSelected, { ...item, isLocal }]; + onSelectedToolsChange?.(newSelected); + } + return; + } + if (!currentSelected.find((i) => i.id === item.id)) { + if (!isLocal) isLocal = false; + const newSelected = [...currentSelected, { ...item, isLocal }]; + onSelectedToolsChange?.(newSelected); + } - const removeOption = (item: McpItem) => { - const currentSelected = initialSelectedTools || []; - const newSelected = currentSelected.filter((i) => i.id !== item.id); - onSelectedToolsChange?.(newSelected); - }; + }; - // tool functions - const getCategoryIcon = (categoryName?: string) => { - if (!categoryName) return ; + const removeOption = (item: McpItem) => { + const currentSelected = initialSelectedTools || []; + const newSelected = currentSelected.filter((i) => i.id !== item.id); + onSelectedToolsChange?.(newSelected); + }; - const iconKey = categoryIconMap[categoryName]; - const iconUrl = iconKey - ? (svgIcons[`/src/assets/mcp/${iconKey}.svg`] as string) - : undefined; + // tool functions + const getCategoryIcon = (categoryName?: string) => { + if (!categoryName) return ; - return iconUrl ? ( - {categoryName} - ) : ( - - ); - }; + const iconKey = categoryIconMap[categoryName]; + const iconUrl = iconKey + ? (svgIcons[`/src/assets/mcp/${iconKey}.svg`] as string) + : undefined; - const getGithubRepoName = (homePage?: string) => { - if (!homePage || !homePage.startsWith('https://github.com/')) return null; - const parts = homePage.split('/'); - return parts.length > 4 ? parts[4] : homePage; - }; + return iconUrl ? ( + {categoryName} + ) : ( + + ); + }; - const getInstallButtonText = (itemId: number) => { - if (installedIds.includes(itemId)) return t('layout.installed'); - if (installing[itemId]) return t('layout.installing'); - if (installed[itemId]) return t('layout.installed'); - return t('layout.install'); - }; + const getGithubRepoName = (homePage?: string) => { + if (!homePage || !homePage.startsWith("https://github.com/")) return null; + const parts = homePage.split("/"); + return parts.length > 4 ? parts[4] : homePage; + }; - // Effects - useEffect(() => { - fetchData(); - fetchIntegrationsData(); - fetchInstalledMcps(); - }, [fetchData, fetchIntegrationsData]); + const getInstallButtonText = (itemId: number) => { + if (installedIds.includes(itemId)) return t("layout.installed"); + if (installing[itemId]) return t("layout.installing"); + if (installed[itemId]) return t("layout.installed"); + return t("layout.install"); + }; - useEffect(() => { - if (debounceTimerRef.current) { - clearTimeout(debounceTimerRef.current); - } + // Effects + useEffect(() => { + fetchData(); + fetchIntegrationsData(); + fetchInstalledMcps(); + }, []); - debounceTimerRef.current = setTimeout(() => { - fetchData(keyword); - fetchIntegrationsData(keyword); - }, 500); + useEffect(() => { + if (debounceTimerRef.current) { + clearTimeout(debounceTimerRef.current); + } - return () => { - if (debounceTimerRef.current) { - clearTimeout(debounceTimerRef.current); - } - }; - }, [keyword, fetchIntegrationsData, fetchData]); + debounceTimerRef.current = setTimeout(() => { + fetchData(keyword); + fetchIntegrationsData(keyword); + }, 500); - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if ( - containerRef.current && - !containerRef.current.contains(event.target as Node) - ) { - setIsOpen(false); - } - }; + return () => { + if (debounceTimerRef.current) { + clearTimeout(debounceTimerRef.current); + } + }; + }, [keyword]); - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, []); + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + containerRef.current && + !containerRef.current.contains(event.target as Node) + ) { + setIsOpen(false); + } + }; - // render functions - const renderSelectedItems = () => ( - <> - {(initialSelectedTools || []).map((item: any) => ( - - {item.name || item.mcp_name || item.key || `tool_${item.id}`} -
- removeOption(item)} - /> -
- - ))} - - ); + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); - const renderMcpItem = (item: McpItem) => ( -
{ - // check if already installed - const isAlreadyInstalled = - installedIds.includes(item.id) || installed[item.id]; + // render functions + const renderSelectedItems = () => ( + <> + {(initialSelectedTools || []).map((item: any) => ( + + {item.name || item.mcp_name || item.key || `tool_${item.id}`} +
+ removeOption(item)} + /> +
+ + ))} + + ); - if (isAlreadyInstalled) { - // if already installed, add to selected list directly - addOption(item); - setKeyword(''); - } else { - // if not installed, first check environment configuration, then install and add to selected list - checkEnv(item.id); - } - }} - className="flex cursor-pointer justify-between px-3 py-2 hover:bg-gray-100" - > -
- {getCategoryIcon(item.category?.name)} -
- {item.name} -
- - e.stopPropagation()} - /> - -
-
- {getGithubRepoName(item.home_page) && ( -
- github - - {getGithubRepoName(item.home_page)} - -
- )} - -
-
- ); + const renderMcpItem = (item: McpItem) => ( +
{ + // check if already installed + const isAlreadyInstalled = + installedIds.includes(item.id) || installed[item.id]; - const renderCustomMcpItem = (item: any) => ( -
{ - addOption(item); - setKeyword(''); - }} - className="flex cursor-pointer justify-between px-3 py-2 hover:bg-gray-100" - > -
- {/* {getCategoryIcon(item.category?.name)} */} -
- {item.mcp_name} -
- - e.stopPropagation()} - /> - -
-
- -
-
- ); - return ( -
-
-
- {t('workforce.agent-tool')} - - - -
-
{ - inputRef.current?.focus(); - setIsOpen(true); - }} - className="flex max-h-[120px] min-h-[60px] w-full flex-wrap justify-start gap-1 overflow-y-auto rounded-lg border border-solid border-input-border-default bg-input-bg-default px-[6px] py-1" - > - {renderSelectedItems()} -