feat: show connected providers in /connect dialog (#8351)

This commit is contained in:
Akshar Patel
2026-01-14 02:35:59 -05:00
committed by GitHub
parent f9fcdead55
commit a57c8669b6

View File

@@ -26,67 +26,72 @@ export function createDialogProviderOptions() {
const sync = useSync() const sync = useSync()
const dialog = useDialog() const dialog = useDialog()
const sdk = useSDK() const sdk = useSDK()
const connected = createMemo(() => new Set(sync.data.provider_next.connected))
const options = createMemo(() => { const options = createMemo(() => {
return pipe( return pipe(
sync.data.provider_next.all, sync.data.provider_next.all,
sortBy((x) => PROVIDER_PRIORITY[x.id] ?? 99), sortBy((x) => PROVIDER_PRIORITY[x.id] ?? 99),
map((provider) => ({ map((provider) => {
title: provider.name, const isConnected = connected().has(provider.id)
value: provider.id, return {
description: { title: provider.name,
opencode: "(Recommended)", value: provider.id,
anthropic: "(Claude Max or API key)", description: {
openai: "(ChatGPT Plus/Pro or API key)", opencode: "(Recommended)",
}[provider.id], anthropic: "(Claude Max or API key)",
category: provider.id in PROVIDER_PRIORITY ? "Popular" : "Other", openai: "(ChatGPT Plus/Pro or API key)",
async onSelect() { }[provider.id],
const methods = sync.data.provider_auth[provider.id] ?? [ category: provider.id in PROVIDER_PRIORITY ? "Popular" : "Other",
{ footer: isConnected ? "Connected" : undefined,
type: "api", async onSelect() {
label: "API key", const methods = sync.data.provider_auth[provider.id] ?? [
}, {
] type: "api",
let index: number | null = 0 label: "API key",
if (methods.length > 1) { },
index = await new Promise<number | null>((resolve) => { ]
dialog.replace( let index: number | null = 0
() => ( if (methods.length > 1) {
<DialogSelect index = await new Promise<number | null>((resolve) => {
title="Select auth method" dialog.replace(
options={methods.map((x, index) => ({ () => (
title: x.label, <DialogSelect
value: index, title="Select auth method"
}))} options={methods.map((x, index) => ({
onSelect={(option) => resolve(option.value)} title: x.label,
/> value: index,
), }))}
() => resolve(null), onSelect={(option) => resolve(option.value)}
) />
}) ),
} () => resolve(null),
if (index == null) return )
const method = methods[index] })
if (method.type === "oauth") {
const result = await sdk.client.provider.oauth.authorize({
providerID: provider.id,
method: index,
})
if (result.data?.method === "code") {
dialog.replace(() => (
<CodeMethod providerID={provider.id} title={method.label} index={index} authorization={result.data!} />
))
} }
if (result.data?.method === "auto") { if (index == null) return
dialog.replace(() => ( const method = methods[index]
<AutoMethod providerID={provider.id} title={method.label} index={index} authorization={result.data!} /> if (method.type === "oauth") {
)) const result = await sdk.client.provider.oauth.authorize({
providerID: provider.id,
method: index,
})
if (result.data?.method === "code") {
dialog.replace(() => (
<CodeMethod providerID={provider.id} title={method.label} index={index} authorization={result.data!} />
))
}
if (result.data?.method === "auto") {
dialog.replace(() => (
<AutoMethod providerID={provider.id} title={method.label} index={index} authorization={result.data!} />
))
}
} }
} if (method.type === "api") {
if (method.type === "api") { return dialog.replace(() => <ApiMethod providerID={provider.id} title={method.label} />)
return dialog.replace(() => <ApiMethod providerID={provider.id} title={method.label} />) }
} },
}, }
})), }),
) )
}) })
return options return options