import { Head, useForm } from '@inertiajs/react'; import { useState } from 'react'; import { useConfirm } from '@/components/confirm-dialog-provider'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useT } from '@/lib/i18n'; type ProviderKey = 'cloudflare' | 'openai' | 'openrouter' | 'qdrant'; type Props = { has_keys: Record; public_fields: Record; global_byok_required: boolean; }; export default function ByokKeysPage({ has_keys, public_fields, global_byok_required, }: Props) { const { t } = useT(); const confirm = useConfirm(); const form = useForm({ cloudflare_account_id: public_fields.cloudflare_account_id ?? '', cloudflare_api_token: '', cloudflare_vectorize_index: public_fields.cloudflare_vectorize_index ?? '', cloudflare_chat_model: public_fields.cloudflare_chat_model ?? '', cloudflare_embed_model: public_fields.cloudflare_embed_model ?? '', openai_api_key: '', openai_chat_model: public_fields.openai_chat_model ?? '', openai_embed_model: public_fields.openai_embed_model ?? '', openrouter_api_key: '', openrouter_chat_model: public_fields.openrouter_chat_model ?? '', qdrant_url: public_fields.qdrant_url ?? '', qdrant_api_key: '', qdrant_collection: public_fields.qdrant_collection ?? '', }); const submit = (e: React.FormEvent) => { e.preventDefault(); form.patch('/settings/byok-keys', { preserveScroll: true }); }; const clear = async (provider: ProviderKey) => { const ok = await confirm({ title: t('Clear keys?'), message: t('Clear all keys for this provider?'), confirmLabel: t('Clear'), danger: true, }); if (!ok) { return; } form.delete(`/settings/byok-keys/${provider}`, { preserveScroll: true, }); }; return ( <>

{t('API keys (BYOK)')}

{global_byok_required ? t( 'This deployment requires every workspace to supply its own AI provider keys. Pick whichever provider you want to use and drop the credentials below.', ) : t( 'BYOK is enabled for your workspace. Paste your own AI provider keys to take the chat off the operator’s shared infrastructure.', )}

{t('Cloudflare Workers AI')} {has_keys.cloudflare ? ( {t('configured')} ) : ( {t('not set')} )} {t( 'Recommended. Same vendor for chat, embeddings, vector DB, browser rendering — single bill, lowest per-conversation cost.', )}
form.setData( 'cloudflare_account_id', e.target.value, ) } />
form.setData( 'cloudflare_api_token', e.target.value, ) } />
form.setData( 'cloudflare_vectorize_index', e.target.value, ) } />
form.setData( 'cloudflare_chat_model', e.target.value, ) } />
{has_keys.cloudflare && ( )} {t('OpenAI')} {has_keys.openai ? ( {t('configured')} ) : ( {t('not set')} )}
form.setData( 'openai_api_key', e.target.value, ) } />
form.setData( 'openai_chat_model', e.target.value, ) } />
{has_keys.openai && ( )} {t('Qdrant')} {has_keys.qdrant ? ( {t('configured')} ) : ( {t('not set')} )} {t( 'Self-hosted vector store. Use this when you don’t want chunks to leave your infrastructure.', )}
form.setData( 'qdrant_url', e.target.value, ) } />
form.setData( 'qdrant_api_key', e.target.value, ) } />
form.setData( 'qdrant_collection', e.target.value, ) } />
{has_keys.qdrant && ( )}
); }