| import { useI18n, type MsgKey } from '../i18n'; |
| import type { Health, ModelOption, ProviderId } from '../types'; |
|
|
| export const OPEN_CONNECTIONS = 'testajani:open-connections'; |
| export const openConnections = () => window.dispatchEvent(new Event(OPEN_CONNECTIONS)); |
|
|
| export function providerOf(id: string | null | undefined): ProviderId { |
| if (id?.startsWith('openai:')) return 'openai'; |
| if (id?.startsWith('anthropic:')) return 'anthropic'; |
| return 'ollama'; |
| } |
|
|
| export const PROVIDER_LABEL: Record<ProviderId, string> = { ollama: 'Ollama', openai: 'OpenAI', anthropic: 'Claude' }; |
|
|
| |
| export function allModels(health: Health | null): ModelOption[] { |
| if (!health) return []; |
| return health.models_all || health.ollama.models.map((m) => ({ id: m, provider: 'ollama' as const, name: m })); |
| } |
|
|
| export function modelName(id: string, health: Health | null): string { |
| return allModels(health).find((m) => m.id === id)?.name || id.replace(/^(openai|anthropic):/, ''); |
| } |
|
|
| const ORDER: ProviderId[] = ['ollama', 'openai', 'anthropic']; |
|
|
| export default function ModelSelect({ health, value, onChange, style }: { |
| health: Health | null; value: string; onChange: (v: string) => void; style?: React.CSSProperties; |
| }) { |
| const { t } = useI18n(); |
| const models = allModels(health); |
| const known = models.some((m) => m.id === value); |
| const groups = ORDER.map((p) => ({ p, items: models.filter((m) => m.provider === p) })).filter((g) => g.items.length); |
| if (!models.length) { |
| return <input type="text" value={value} onChange={(e) => onChange(e.target.value)} style={{ width: 170, ...style }} />; |
| } |
| return ( |
| <select value={value} style={style} onChange={(e) => { |
| if (e.target.value === '__add__') { openConnections(); return; } |
| onChange(e.target.value); |
| }}> |
| {!known && value && <option value={value}>{t('ws.notInstalled', { m: value })}</option>} |
| {groups.map((g) => ( |
| <optgroup key={g.p} label={t(`model.group.${g.p}` as MsgKey)}> |
| {g.items.map((m) => <option key={m.id} value={m.id}>{m.name}</option>)} |
| </optgroup> |
| ))} |
| <option value="__add__">{t('model.add')}</option> |
| </select> |
| ); |
| } |
|
|
