55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { useMemo, useCallback } from 'react'
|
|
import { IconWorld } from '@tabler/icons-react'
|
|
import { MCPToolComponentProps } from '@janhq/core'
|
|
|
|
// List of tool names considered as web search tools
|
|
const WEB_SEARCH_TOOL_NAMES = ['google_search', 'scrape'];
|
|
|
|
export const WebSearchButton = ({
|
|
tools,
|
|
isToolEnabled,
|
|
onToolToggle,
|
|
}: MCPToolComponentProps) => {
|
|
const webSearchTools = useMemo(
|
|
() => tools.filter((tool) => WEB_SEARCH_TOOL_NAMES.includes(tool.name)),
|
|
[tools]
|
|
)
|
|
|
|
// Early return if no web search tools available
|
|
if (webSearchTools.length === 0) {
|
|
return null
|
|
}
|
|
|
|
// Check if all web search tools are enabled
|
|
const isEnabled = useMemo(
|
|
() => webSearchTools.every((tool) => isToolEnabled(tool.name)),
|
|
[webSearchTools, isToolEnabled]
|
|
)
|
|
|
|
const handleToggle = useCallback(() => {
|
|
// Toggle all web search tools at once
|
|
const newState = !isEnabled
|
|
webSearchTools.forEach((tool) => {
|
|
onToolToggle(tool.name, newState)
|
|
})
|
|
}, [isEnabled, webSearchTools, onToolToggle])
|
|
|
|
return (
|
|
<button
|
|
onClick={handleToggle}
|
|
className={`h-7 px-2 py-1 flex items-center justify-center rounded-md transition-all duration-200 ease-in-out gap-1 cursor-pointer ml-0.5 border-0 ${
|
|
isEnabled
|
|
? 'bg-accent/20 text-accent'
|
|
: 'bg-transparent text-main-view-fg/70 hover:bg-main-view-fg/5'
|
|
}`}
|
|
title={isEnabled ? 'Disable Web Search' : 'Enable Web Search'}
|
|
>
|
|
<IconWorld
|
|
size={16}
|
|
className={isEnabled ? 'text-accent' : 'text-main-view-fg/70'}
|
|
/>
|
|
<span className={`text-sm font-medium ${isEnabled ? 'text-accent' : ''}`}>Search</span>
|
|
</button>
|
|
)
|
|
}
|