Composer.tsx

src/components/Composer.tsx

1. import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
3. import type { Estimate } from '../ipc/gen/Estimate'
4. import { IMAGE_EXT, isVision, tokens, usd } from '../lib/format'
5. import { useCurrentModel, useStore } from '../state/store'
6. import { AttachmentChip } from './Attachment'
8. export interface ComposerHandle {
9. setText(t: string): void
10. focus(): void
11. }
13. /** "~$0.0012", but "<$0.0001" rather than "~<$0.0001". */
14. const approx = (v: string) => (v.startsWith('<') ? v : `~${v}`)
16. function isImage(name: string, type: string) {
17. return type.startsWith('image/') || IMAGE_EXT.test(name)
18. }
20. export const Composer = forwardRef<ComposerHandle>(function Composer(_, ref) {
21. const [text, setText] = useState('')
22. const [estimate, setEstimate] = useState<Estimate | null>(null)
23. const [dragging, setDragging] = useState(false)
24. const area = useRef<HTMLTextAreaElement>(null)
25. const send = useStore((s) => s.send)
26. const stop = useStore((s) => s.stop)
27. const streaming = useStore((s) => s.streaming)
28. const drafts = useStore((s) => s.drafts)
29. const addDrafts = useStore((s) => s.addDrafts)
30. const removeDraft = useStore((s) => s.removeDraft)
31. const client = useStore((s) => s.client)
32. const settings = useStore((s) => s.settings)
33. const view = useStore((s) => s.view)
34. const toast = useStore((s) => s.toast)
35. const current = useCurrentModel()
36. const isLocal = current.info?.tags.includes('local') ?? false
37. const vision =
38. !!current.info && (isVision(current.info) || (isLocal && !!settings?.vision_models.includes(current.modelId)))
40. useImperativeHandle(ref, () => ({
41. setText: (t) => {
42. setText(t)
43. area.current?.focus()
44. },
45. focus: () => area.current?.focus(),
46. }))
48. // Grow with the text, up to a limit.
49. useEffect(() => {
50. const el = area.current
51. if (!el) return
52. el.style.height = 'auto'
53. el.style.height = `${Math.min(el.scrollHeight, 240)}px`
54. }, [text])
56. // What this prompt would cost to send (debounced).
57. useEffect(() => {
58. if (!client || !current.modelId) return
59. const t = setTimeout(() => {
60. client
61. .estimatePrompt({
62. conversationId: view?.conversation.id ?? null,
63. providerId: current.providerId,
64. modelId: current.modelId,
65. text,
66. imageCount: drafts.filter((d) => d.kind === 'image').length,
67. })
68. .then(setEstimate)
69. .catch(() => setEstimate(null))
70. }, 250)
71. return () => clearTimeout(t)
72. }, [client, text, drafts, current.providerId, current.modelId, view?.conversation.id, view?.messages.length])
74. const submit = async () => {
75. if (streaming) return
76. const t = text
77. setText('')
78. const ok = await send(t)
79. if (!ok) setText(t)
80. }
82. const ingest = async (files: File[]) => {
83. if (!client) return
84. for (const f of files) {
85. if (isImage(f.name, f.type) && !vision) {
86. toast(`${current.modelId || 'This model'} cannot read images. Pick a vision model first.`, 'error')
87. continue
88. }
89. try {
90. const bytes = new Uint8Array(await f.arrayBuffer())
91. const name = f.name || (f.type === 'image/png' ? 'pasted.png' : 'pasted.txt')
92. addDrafts([await client.attachBytes(name, bytes)])
93. } catch (err) {
94. toast(String(err), 'error')
95. }
96. }
97. }
99. const over = estimate && estimate.context_length && estimate.prompt_tokens > estimate.context_length
100. return (
101. <div
102. className={`composer glass ${dragging ? 'dragging' : ''}`}
103. onDragOver={(e) => {
104. e.preventDefault()
105. setDragging(true)
106. }}
107. onDragLeave={() => setDragging(false)}
108. onDrop={(e) => {
109. e.preventDefault()
110. setDragging(false)
111. void ingest([...e.dataTransfer.files])
112. }}
113. >
114. {drafts.length > 0 && (
115. <div className="chips">
116. {drafts.map((d) => (
117. <AttachmentChip key={d.id} a={d} onRemove={() => void removeDraft(d.id)} />
118. ))}
119. </div>
120. )}
121. <textarea
122. ref={area}
123. data-testid="composer-input"
124. aria-label="Message"
125. placeholder={vision ? 'Ask anything, or drop an image or file' : 'Ask anything, or drop a text file'}
126. rows={1}
127. value={text}
128. onChange={(e) => setText(e.target.value)}
129. onPaste={(e) => {
130. const files = [...e.clipboardData.files]
131. if (files.length) {
132. e.preventDefault()
133. void ingest(files)
134. }
135. }}
136. onKeyDown={(e) => {
137. const sendKey = settings?.send_on_enter ?? true
138. if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && (sendKey || e.metaKey || e.ctrlKey)) {
139. e.preventDefault()
140. void submit()
141. } else if (e.key === 'Escape' && streaming) {
142. e.preventDefault()
143. void stop()
144. }
145. }}
146. />
147. <div className="composer-bar">
148. <button
149. className="ghost icon"
150. aria-label="Attach files"
151. title={vision ? 'Attach images or text files' : 'Attach text files'}
152. onClick={async () => {
153. if (!client) return
154. try {
155. addDrafts(await client.pickAttachments(vision))
156. } catch (err) {
157. toast(String(err), 'error')
158. }
159. }}
160. >
161. <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden>
162. <path
163. d="M13.5 6.5l-6 6a1.8 1.8 0 002.5 2.5l6.5-6.5a3.2 3.2 0 00-4.5-4.5L5.5 10.5a4.6 4.6 0 006.5 6.5l5-5"
164. fill="none"
165. stroke="currentColor"
166. strokeWidth="1.6"
167. strokeLinecap="round"
168. />
169. </svg>
170. </button>
171. <span className={`estimate ${over ? 'over' : ''}`} data-testid="estimate">
172. {estimate && estimate.prompt_tokens > 4
173. ? `~${tokens(estimate.prompt_tokens)} tokens in${current.info && current.info.prices.input_per_m > 0 ? `, ${approx(usd(estimate.prompt_cost_nanousd))}` : ''}${over ? ', over the context window' : ''}`
174. : ''}
175. </span>
176. {streaming ? (
177. <button className="stop" onClick={() => void stop()} data-testid="stop">
178. Stop
179. </button>
180. ) : (
181. <button
182. className="primary send"
183. data-testid="send"
184. disabled={!text.trim() && !drafts.length}
185. onClick={() => void submit()}
186. >
187. Send
188. </button>
189. )}
190. </div>
191. </div>
192. )
193. })