ModelPicker.tsx

src/components/ModelPicker.tsx

1. import { useEffect, useMemo, useRef, useState } from 'react'
3. import type { ModelInfo } from '../ipc/gen/ModelInfo'
4. import { isVision, priceLabel, tokens } from '../lib/format'
5. import { useCurrentModel, useStore } from '../state/store'
7. type Filter = 'all' | 'favorites' | 'vision' | 'reasoning' | 'local'
8. const FILTERS: [Filter, string][] = [
9. ['all', 'All'],
10. ['favorites', 'Favorites'],
11. ['vision', 'Vision'],
12. ['reasoning', 'Reasoning'],
13. ['local', 'Local'],
14. ]
16. export function ModelPicker({ onClose }: { onClose: () => void }) {
17. const [q, setQ] = useState('')
18. const [filter, setFilter] = useState<Filter>('all')
19. const [cursor, setCursor] = useState(0)
20. const input = useRef<HTMLInputElement>(null)
21. const models = useStore((s) => s.models)
22. const providers = useStore((s) => s.providers)
23. const settings = useStore((s) => s.settings)
24. const saveSettings = useStore((s) => s.saveSettings)
25. const chooseModel = useStore((s) => s.chooseModel)
26. const refreshModels = useStore((s) => s.refreshModels)
27. const current = useCurrentModel()
28. useEffect(() => input.current?.focus(), [])
30. const favs = settings?.favorite_models ?? []
31. const rows = useMemo(() => {
32. const words = q.toLowerCase().split(/\s+/).filter(Boolean)
33. const all: ModelInfo[] = providers.flatMap((p) => models[p.id]?.models ?? [])
34. return all.filter((m) => {
35. const hay = `${m.id} ${m.provider_id}`.toLowerCase()
36. if (!words.every((w) => hay.includes(w))) return false
37. if (filter === 'favorites') return favs.includes(m.id)
38. if (filter === 'vision') return isVision(m)
39. if (filter === 'reasoning') return m.tags.includes('reasoning')
40. if (filter === 'local') return m.tags.includes('local')
41. return true
42. })
43. }, [q, filter, models, providers, favs])
45. const pick = (m: ModelInfo) => {
46. void chooseModel(m.provider_id, m.id)
47. onClose()
48. }
49. const toggleFav = (id: string) => {
50. if (!settings) return
51. const next = favs.includes(id) ? favs.filter((f) => f !== id) : [...favs, id]
52. void saveSettings({ ...settings, favorite_models: next })
53. }
54. const di = models.deepinfra
55. const source =
56. di?.source === 'snapshot'
57. ? `Prices as of ${di.snapshot_date ?? 'the bundled list'} (offline copy)`
58. : di?.fetched_at
59. ? `Prices from DeepInfra, updated ${new Date(di.fetched_at).toLocaleString()}`
60. : ''
62. return (
63. <div
64. className="popover model-picker glass-strong"
65. role="dialog"
66. aria-label="Choose a model"
67. onKeyDown={(e) => {
68. if (e.key === 'Escape') onClose()
69. if (e.key === 'ArrowDown') {
70. e.preventDefault()
71. setCursor((c) => Math.min(c + 1, rows.length - 1))
72. }
73. if (e.key === 'ArrowUp') {
74. e.preventDefault()
75. setCursor((c) => Math.max(c - 1, 0))
76. }
77. if (e.key === 'Enter' && rows[cursor]) pick(rows[cursor])
78. }}
79. >
80. <input
81. ref={input}
82. className="search-input"
83. placeholder="Search models"
84. value={q}
85. onChange={(e) => {
86. setQ(e.target.value)
87. setCursor(0)
88. }}
89. aria-label="Search models"
90. />
91. <div className="filters" role="tablist">
92. {FILTERS.map(([f, label]) => (
93. <button
94. key={f}
95. role="tab"
96. aria-selected={filter === f}
97. className={`pill ${filter === f ? 'on' : ''}`}
98. onClick={() => {
99. setFilter(f)
100. setCursor(0)
101. }}
102. >
103. {label}
104. </button>
105. ))}
106. </div>
107. <div className="model-head">
108. <span>Model</span>
109. <span>In / out per 1M</span>
110. <span>Context</span>
111. </div>
112. <ul className="model-list" role="listbox" aria-label="Models">
113. {rows.map((m, i) => {
114. const selected = m.id === current.modelId && m.provider_id === current.providerId
115. return (
116. <li
117. key={`${m.provider_id}/${m.id}`}
118. role="option"
119. aria-selected={selected}
120. className={`model-row ${i === cursor ? 'cursor' : ''} ${selected ? 'selected' : ''}`}
121. onMouseEnter={() => setCursor(i)}
122. onClick={() => pick(m)}
123. >
124. <span className="model-name">
125. <button
126. className={`star ${favs.includes(m.id) ? 'on' : ''}`}
127. aria-label={favs.includes(m.id) ? 'Remove from favorites' : 'Add to favorites'}
128. onClick={(e) => {
129. e.stopPropagation()
130. toggleFav(m.id)
131. }}
132. >
133. ★
134. </button>
135. <span className="model-id">{m.id}</span>
136. {m.tags.includes('vision') && <span className="tag">vision</span>}
137. {m.tags.includes('reasoning') && <span className="tag">reasoning</span>}
138. {m.provider_id !== 'deepinfra' && (
139. <span className="tag local">{providers.find((p) => p.id === m.provider_id)?.name ?? 'local'}</span>
140. )}
141. </span>
142. <span className="model-price">{priceLabel(m.prices)}</span>
143. <span className="model-ctx">{m.context_length ? tokens(m.context_length) : ''}</span>
144. </li>
145. )
146. })}
147. {rows.length === 0 && <li className="empty-row">No models match.</li>}
148. </ul>
149. <div className="picker-foot">
150. <span className="muted small">{source}</span>
151. <button className="ghost small" onClick={() => providers.forEach((p) => void refreshModels(p.id, true))}>
152. Refresh
153. </button>
154. </div>
155. </div>
156. )
157. }