MessageBubble.tsx

src/components/MessageBubble.tsx

1. import { memo, useState } from 'react'
3. import type { Message } from '../ipc/gen/Message'
4. import { seconds, shortModel, thousands, usd } from '../lib/format'
5. import { useStore } from '../state/store'
6. import { AttachmentChip, AttachmentImage } from './Attachment'
7. import { Markdown } from './Markdown'
9. export function CostLine({ m }: { m: Message }) {
10. const est = m.usage_source === 'estimated'
11. const u = m.usage
12. if (m.usage_source === 'none') return null
13. return (
14. <span className="cost-line" data-testid="cost-line">
15. {thousands(u.prompt_tokens)} in{u.cached_tokens > 0 ? ` (${thousands(u.cached_tokens)} cached)` : ''},{' '}
16. {thousands(u.completion_tokens)} out, <strong>{m.prices ? usd(m.cost_nanousd) : 'price unknown'}</strong>
17. {est && (
18. <abbr className="est" title="Estimated: the server did not report token counts">
19. est.
20. </abbr>
21. )}
22. </span>
23. )
24. }
26. interface Props {
27. m: Message
28. live?: { text: string; reasoning: string } | null
29. isLastAssistant?: boolean
30. }
32. export const MessageBubble = memo(function MessageBubble({ m, live, isLastAssistant }: Props) {
33. const [editing, setEditing] = useState(false)
34. const [draft, setDraft] = useState(m.content)
35. const regenerate = useStore((s) => s.regenerate)
36. const editAndResend = useStore((s) => s.editAndResend)
37. const busy = useStore((s) => !!s.streaming)
39. if (m.role === 'user') {
40. return (
41. <div className="msg user" data-testid="msg-user">
42. <div className="bubble">
43. {m.attachments
44. .filter((a) => a.kind === 'image')
45. .map((a) => (
46. <AttachmentImage key={a.id} a={a} />
47. ))}
48. {m.attachments.some((a) => a.kind === 'text') && (
49. <div className="chips">
50. {m.attachments
51. .filter((a) => a.kind === 'text')
52. .map((a) => (
53. <AttachmentChip key={a.id} a={a} />
54. ))}
55. </div>
56. )}
57. {editing ? (
58. <div className="edit">
59. <textarea
60. value={draft}
61. onChange={(e) => setDraft(e.target.value)}
62. rows={Math.min(10, draft.split('\n').length + 1)}
63. autoFocus
64. />
65. <div className="row end">
66. <button className="ghost" onClick={() => setEditing(false)}>
67. Cancel
68. </button>
69. <button
70. className="primary"
71. disabled={!draft.trim() || busy}
72. onClick={() => {
73. setEditing(false)
74. void editAndResend(m.id, draft)
75. }}
76. >
77. Send edit
78. </button>
79. </div>
80. </div>
81. ) : (
82. m.content && <div className="user-text selectable">{m.content}</div>
83. )}
84. </div>
85. {!editing && (
86. <div className="msg-actions">
87. <button className="ghost small" onClick={() => void navigator.clipboard?.writeText(m.content)}>
88. Copy
89. </button>
90. <button
91. className="ghost small"
92. disabled={busy}
93. onClick={() => {
94. setDraft(m.content)
95. setEditing(true)
96. }}
97. >
98. Edit
99. </button>
100. </div>
101. )}
102. </div>
103. )
104. }
106. const text = live ? live.text : m.content
107. const reasoning = live ? live.reasoning : m.reasoning
108. return (
109. <div className={`msg assistant ${m.status}`} data-testid="msg-assistant" aria-busy={!!live}>
110. {reasoning && (
111. <details className="reasoning">
112. <summary>{live && !text ? 'Thinking...' : 'Reasoning'}</summary>
113. <div className="reasoning-text selectable">{reasoning}</div>
114. </details>
115. )}
116. {text ? (
117. <Markdown text={text} />
118. ) : live ? (
119. <div className="typing" aria-label="Waiting for the reply">
120. <span />
121. <span />
122. <span />
123. </div>
124. ) : null}
125. {live && text && <span className="caret" aria-hidden />}
126. {m.status === 'error' && !live && (
127. <div className="msg-error" role="alert">
128. {m.error_message ?? 'The reply failed.'}
129. </div>
130. )}
131. {m.status === 'cancelled' && !live && <div className="msg-note">Stopped.</div>}
132. {!live && (
133. <div className="msg-meta">
134. <span className="model-tag">{shortModel(m.model_id ?? '')}</span>
135. <CostLine m={m} />
136. {m.duration_ms != null && <span className="timing">{seconds(m.duration_ms)}</span>}
137. <span className="spacer" />
138. <button className="ghost small" onClick={() => void navigator.clipboard?.writeText(m.content)}>
139. Copy
140. </button>
141. {isLastAssistant && (
142. <button className="ghost small" disabled={busy} onClick={() => void regenerate()}>
143. {m.status === 'complete' ? 'Regenerate' : 'Retry'}
144. </button>
145. )}
146. </div>
147. )}
148. </div>
149. )
150. })