ChatHeader.tsx

src/components/ChatHeader.tsx

1. import { useState } from 'react'
3. import { priceLabel, shortModel, usd } from '../lib/format'
4. import { useCurrentModel, useStore } from '../state/store'
5. import { ModelPicker } from './ModelPicker'
7. export function ChatHeader() {
8. const view = useStore((s) => s.view)
9. const current = useCurrentModel()
10. const presets = useStore((s) => s.presets)
11. const applyPreset = useStore((s) => s.applyPreset)
12. const pending = useStore((s) => s.pending)
13. const client = useStore((s) => s.client)
14. const refreshConversations = useStore((s) => s.refreshConversations)
15. const open = useStore((s) => s.open)
16. const newChat = useStore((s) => s.newChat)
17. const toast = useStore((s) => s.toast)
18. const [picker, setPicker] = useState(false)
19. const [menu, setMenu] = useState<null | 'preset' | 'more'>(null)
20. const [renaming, setRenaming] = useState(false)
21. const [title, setTitle] = useState('')
23. const conv = view?.conversation
24. const total = view?.messages.reduce((s, m) => s + m.cost_nanousd, 0) ?? 0
25. const estimated = view?.messages.some((m) => m.usage_source === 'estimated')
26. const presetId = conv ? conv.preset_id : pending.presetId
27. const preset = presets.find((p) => p.id === presetId)
28. const price = current.info?.prices
30. const act = async (f: () => Promise<unknown>, done?: string) => {
31. setMenu(null)
32. try {
33. await f()
34. if (done) toast(done)
35. await refreshConversations()
36. } catch (err) {
37. toast(String(err), 'error')
38. }
39. }
41. return (
42. <header className="chat-header" data-tauri-drag-region>
43. <div className="title-wrap" data-tauri-drag-region>
44. {renaming && conv ? (
45. <input
46. className="title-input"
47. autoFocus
48. value={title}
49. onChange={(e) => setTitle(e.target.value)}
50. onBlur={() => setRenaming(false)}
51. onKeyDown={async (e) => {
52. if (e.key === 'Enter') {
53. await client?.renameConversation(conv.id, title)
54. setRenaming(false)
55. await open(conv.id)
56. await refreshConversations()
57. }
58. if (e.key === 'Escape') setRenaming(false)
59. }}
60. aria-label="Chat title"
61. />
62. ) : (
63. <h1
64. className="chat-title"
65. onDoubleClick={() => {
66. if (conv) {
67. setTitle(conv.title)
68. setRenaming(true)
69. }
70. }}
71. title={conv ? 'Double-click to rename' : undefined}
72. >
73. {conv?.title ?? 'New chat'}
74. </h1>
75. )}
76. {conv && total > 0 && (
77. <span className="chat-total" data-testid="chat-total" title="This conversation so far">
78. {usd(total)}
79. {estimated ? ' est.' : ''}
80. </span>
81. )}
82. </div>
83. <div className="header-actions">
84. <div className="anchor">
85. <button
86. className="model-button glass-tint"
87. onClick={() => setPicker((v) => !v)}
88. aria-haspopup="dialog"
89. aria-expanded={picker}
90. data-testid="model-button"
91. >
92. <span className="model-button-name">
93. {current.modelId ? shortModel(current.modelId) : 'Choose a model'}
94. </span>
95. {price && <span className="model-button-price">{priceLabel(price)}</span>}
96. </button>
97. {picker && <ModelPicker onClose={() => setPicker(false)} />}
98. </div>
99. <div className="anchor">
100. <button
101. className="ghost"
102. onClick={() => setMenu(menu === 'preset' ? null : 'preset')}
103. aria-haspopup="menu"
104. aria-expanded={menu === 'preset'}
105. >
106. {preset ? preset.name : 'Preset'}
107. </button>
108. {menu === 'preset' && (
109. <div className="popover menu glass-strong" role="menu">
110. <button
111. role="menuitem"
112. className={!preset ? 'checked' : ''}
113. onClick={() => {
114. setMenu(null)
115. void applyPreset(null)
116. }}
117. >
118. No preset
119. </button>
120. {presets.map((p) => (
121. <button
122. role="menuitem"
123. key={p.id}
124. className={p.id === presetId ? 'checked' : ''}
125. title={p.system_prompt}
126. onClick={() => {
127. setMenu(null)
128. void applyPreset(p)
129. }}
130. >
131. {p.name}
132. </button>
133. ))}
134. <hr />
135. <button
136. role="menuitem"
137. onClick={() => {
138. setMenu(null)
139. useStore.getState().setPanel('settings')
140. }}
141. >
142. Edit presets...
143. </button>
144. </div>
145. )}
146. </div>
147. {conv && (
148. <div className="anchor">
149. <button
150. className="ghost icon"
151. onClick={() => setMenu(menu === 'more' ? null : 'more')}
152. aria-label="More actions"
153. aria-haspopup="menu"
154. aria-expanded={menu === 'more'}
155. >
156. <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden>
157. <circle cx="4.5" cy="10" r="1.6" fill="currentColor" />
158. <circle cx="10" cy="10" r="1.6" fill="currentColor" />
159. <circle cx="15.5" cy="10" r="1.6" fill="currentColor" />
160. </svg>
161. </button>
162. {menu === 'more' && client && (
163. <div className="popover menu right glass-strong" role="menu">
164. <button
165. role="menuitem"
166. onClick={() =>
167. act(async () => {
168. const r = await client.exportConversation(conv.id)
169. toast(`Exported to ${r.path}`)
170. })
171. }
172. >
173. Export to vault
174. </button>
175. <button
176. role="menuitem"
177. onClick={() => act(() => client.setPinned(conv.id, !conv.pinned).then(() => open(conv.id)))}
178. >
179. {conv.pinned ? 'Unpin' : 'Pin'}
180. </button>
181. <button
182. role="menuitem"
183. onClick={() => {
184. setTitle(conv.title)
185. setRenaming(true)
186. setMenu(null)
187. }}
188. >
189. Rename
190. </button>
191. <button
192. role="menuitem"
193. onClick={() => act(() => client.setArchived(conv.id, true).then(newChat), 'Archived.')}
194. >
195. Archive
196. </button>
197. <hr />
198. <button
199. role="menuitem"
200. className="danger"
201. onClick={() => {
202. if (window.confirm(`Delete "${conv.title}"? This cannot be undone.`))
203. void act(() => client.deleteConversation(conv.id).then(newChat), 'Deleted.')
204. else setMenu(null)
205. }}
206. >
207. Delete
208. </button>
209. </div>
210. )}
211. </div>
212. )}
213. </div>
214. </header>
215. )
216. }