QuickApp.tsx

src/QuickApp.tsx

1. import { useEffect, useLayoutEffect, useRef, useState } from 'react'
3. import { Markdown } from './components/Markdown'
4. import { CostLine } from './components/MessageBubble'
5. import type { IpcClient } from './ipc/client'
6. import type { Message } from './ipc/gen/Message'
7. import type { Settings } from './ipc/gen/Settings'
8. import type { StreamEvent } from './ipc/gen/StreamEvent'
9. import { ipc } from './ipc'
10. import { shortModel } from './lib/format'
11. import { mod, QUICK_HEIGHT, QUICK_MAX, useTheme } from './lib/theme'
12. import { useStore } from './state/store'
14. /** The small always-on-top prompt: one question, one answer, hand off with Cmd+Enter. */
15. export function QuickApp() {
16. const [client, setClient] = useState<IpcClient | null>(null)
17. const [settings, setSettings] = useState<Settings | null>(null)
18. const [vibrancy, setVibrancy] = useState(false)
19. const [text, setText] = useState('')
20. const [answer, setAnswer] = useState('')
21. const [done, setDone] = useState<Message | null>(null)
22. const [error, setError] = useState<string | null>(null)
23. const [conversationId, setConversationId] = useState<string | null>(null)
24. const [streamId, setStreamId] = useState<string | null>(null)
25. // Enter before the settings have loaded: remember it and send once they have.
26. const [queued, setQueued] = useState(false)
27. const input = useRef<HTMLInputElement>(null)
28. const body = useRef<HTMLDivElement>(null)
29. useTheme(settings, vibrancy)
31. useEffect(() => {
32. void ipc().then(async (c) => {
33. useStore.setState({ client: c })
34. setClient(c)
35. setSettings(await c.getSettings())
36. setVibrancy((await c.appInfo()).vibrancy)
37. c.on('settings-changed', (s) => setSettings(s as Settings))
38. c.on('quick-shown', () => {
39. setText('')
40. setAnswer('')
41. setDone(null)
42. setError(null)
43. setConversationId(null)
44. void c.resizeQuick(QUICK_HEIGHT)
45. input.current?.focus()
46. })
47. input.current?.focus()
48. })
49. }, [])
51. // Grow the window to fit the answer.
52. useLayoutEffect(() => {
53. if (!client) return
54. const h =
55. answer || error ? Math.min(QUICK_MAX, QUICK_HEIGHT + (body.current?.scrollHeight ?? 0) + 44) : QUICK_HEIGHT
56. void client.resizeQuick(h)
57. }, [answer, error, done, client])
59. const ask = async () => {
60. if (!text.trim() || streamId) return
61. if (!client || !settings) {
62. setQueued(true)
63. return
64. }
65. setQueued(false)
66. setAnswer('')
67. setDone(null)
68. setError(null)
69. try {
70. const conv = await client.createConversation(settings.quick_provider_id, settings.quick_model_id, null, 'quick')
71. setConversationId(conv.id)
72. const ack = await client.sendMessage({ conversation_id: conv.id, text, attachment_ids: [] }, (e: StreamEvent) => {
73. if (e.type === 'delta') setAnswer((a) => a + e.text)
74. if (e.type === 'done') {
75. setDone(e.message)
76. setStreamId(null)
77. }
78. if (e.type === 'error') {
79. setDone(e.message)
80. setError(e.error)
81. setStreamId(null)
82. }
83. })
84. setStreamId(ack.stream_id)
85. } catch (err) {
86. setError(String(err))
87. }
88. }
90. useEffect(() => {
91. if (queued && client && settings) void ask()
92. }, [queued, client, settings])
94. return (
95. <div className="quick glass" data-testid="quick">
96. <div className="quick-row" data-tauri-drag-region>
97. <span className="quick-mark" aria-hidden />
98. <input
99. ref={input}
100. className="quick-input"
101. placeholder="Ask quickly"
102. aria-label="Quick prompt"
103. value={text}
104. onChange={(e) => setText(e.target.value)}
105. onKeyDown={(e) => {
106. if (e.key === 'Escape') {
107. if (streamId) void client?.cancelStream(streamId)
108. else void client?.hideQuick()
109. } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
110. e.preventDefault()
111. if (conversationId) void client?.quickOpenInMain(conversationId)
112. } else if (e.key === 'Enter') {
113. e.preventDefault()
114. void ask()
115. }
116. }}
117. />
118. <span className="quick-model" title={settings?.quick_model_id}>
119. {settings ? shortModel(settings.quick_model_id) : ''}
120. </span>
121. </div>
122. {(answer || error) && (
123. <div className="quick-body" ref={body}>
124. {answer && <Markdown text={answer} />}
125. {error && <div className="msg-error">{error}</div>}
126. <div className="quick-foot">
127. {done && <CostLine m={done} />}
128. <span className="spacer" />
129. {conversationId && <span className="muted small">{mod}Enter opens in Cortex</span>}
130. </div>
131. </div>
132. )}
133. </div>
134. )
135. }