97 lines
3.8 KiB
TypeScript
97 lines
3.8 KiB
TypeScript
import { Component, createMemo, createSignal, Show } from "solid-js"
|
|
import { useSync } from "@/context/sync"
|
|
import { useSDK } from "@/context/sdk"
|
|
import { Dialog } from "@opencode-ai/ui/dialog"
|
|
import { List } from "@opencode-ai/ui/list"
|
|
import { Switch } from "@opencode-ai/ui/switch"
|
|
import { useLanguage } from "@/context/language"
|
|
|
|
export const DialogSelectMcp: Component = () => {
|
|
const sync = useSync()
|
|
const sdk = useSDK()
|
|
const language = useLanguage()
|
|
const [loading, setLoading] = createSignal<string | null>(null)
|
|
|
|
const items = createMemo(() =>
|
|
Object.entries(sync.data.mcp ?? {})
|
|
.map(([name, status]) => ({ name, status: status.status }))
|
|
.sort((a, b) => a.name.localeCompare(b.name)),
|
|
)
|
|
|
|
const toggle = async (name: string) => {
|
|
if (loading()) return
|
|
setLoading(name)
|
|
const status = sync.data.mcp[name]
|
|
if (status?.status === "connected") {
|
|
await sdk.client.mcp.disconnect({ name })
|
|
} else {
|
|
await sdk.client.mcp.connect({ name })
|
|
}
|
|
const result = await sdk.client.mcp.status()
|
|
if (result.data) sync.set("mcp", result.data)
|
|
setLoading(null)
|
|
}
|
|
|
|
const enabledCount = createMemo(() => items().filter((i) => i.status === "connected").length)
|
|
const totalCount = createMemo(() => items().length)
|
|
|
|
return (
|
|
<Dialog
|
|
title={language.t("dialog.mcp.title")}
|
|
description={language.t("dialog.mcp.description", { enabled: enabledCount(), total: totalCount() })}
|
|
>
|
|
<List
|
|
search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
|
|
emptyMessage={language.t("dialog.mcp.empty")}
|
|
key={(x) => x?.name ?? ""}
|
|
items={items}
|
|
filterKeys={["name", "status"]}
|
|
sortBy={(a, b) => a.name.localeCompare(b.name)}
|
|
onSelect={(x) => {
|
|
if (x) toggle(x.name)
|
|
}}
|
|
>
|
|
{(i) => {
|
|
const mcpStatus = () => sync.data.mcp[i.name]
|
|
const status = () => mcpStatus()?.status
|
|
const error = () => {
|
|
const s = mcpStatus()
|
|
return s?.status === "failed" ? s.error : undefined
|
|
}
|
|
const enabled = () => status() === "connected"
|
|
return (
|
|
<div class="w-full flex items-center justify-between gap-x-3">
|
|
<div class="flex flex-col gap-0.5 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="truncate">{i.name}</span>
|
|
<Show when={status() === "connected"}>
|
|
<span class="text-11-regular text-text-weaker">{language.t("mcp.status.connected")}</span>
|
|
</Show>
|
|
<Show when={status() === "failed"}>
|
|
<span class="text-11-regular text-text-weaker">{language.t("mcp.status.failed")}</span>
|
|
</Show>
|
|
<Show when={status() === "needs_auth"}>
|
|
<span class="text-11-regular text-text-weaker">{language.t("mcp.status.needs_auth")}</span>
|
|
</Show>
|
|
<Show when={status() === "disabled"}>
|
|
<span class="text-11-regular text-text-weaker">{language.t("mcp.status.disabled")}</span>
|
|
</Show>
|
|
<Show when={loading() === i.name}>
|
|
<span class="text-11-regular text-text-weak">{language.t("common.loading.ellipsis")}</span>
|
|
</Show>
|
|
</div>
|
|
<Show when={error()}>
|
|
<span class="text-11-regular text-text-weaker truncate">{error()}</span>
|
|
</Show>
|
|
</div>
|
|
<div onClick={(e) => e.stopPropagation()}>
|
|
<Switch checked={enabled()} disabled={loading() === i.name} onChange={() => toggle(i.name)} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}}
|
|
</List>
|
|
</Dialog>
|
|
)
|
|
}
|