ChatView.tsx

src/components/ChatView.tsx

1. import { useEffect, useLayoutEffect, useRef } from 'react'
3. import { mod } from '../lib/theme'
4. import { useCurrentModel, useStore } from '../state/store'
5. import { MessageBubble } from './MessageBubble'
7. const SUGGESTIONS = [
8. 'Explain this error message in plain words',
9. 'Tighten a paragraph without changing its voice',
10. 'Draft a small shell script and review it for safety',
11. ]
13. export function ChatView({ onSuggest }: { onSuggest: (text: string) => void }) {
14. const view = useStore((s) => s.view)
15. const streaming = useStore((s) => s.streaming)
16. const keys = useStore((s) => s.keys)
17. const setPanel = useStore((s) => s.setPanel)
18. const current = useCurrentModel()
19. const providers = useStore((s) => s.providers)
20. const scroller = useRef<HTMLDivElement>(null)
21. const pinned = useRef(true)
23. // Follow the reply while it streams, unless the reader has scrolled up.
24. useLayoutEffect(() => {
25. const el = scroller.current
26. if (el && pinned.current) el.scrollTop = el.scrollHeight
27. }, [view?.messages.length, streaming?.text])
28. useEffect(() => {
29. pinned.current = true
30. }, [view?.conversation.id])
32. const provider = providers.find((p) => p.id === current.providerId)
33. const needsKey = provider?.requires_key && keys[provider.id] === false
35. if (!view || view.messages.length === 0) {
36. return (
37. <div className="chat-scroll" ref={scroller}>
38. <div className="empty">
39. <div className="empty-mark" aria-hidden />
40. <h1>What are we working on?</h1>
41. {needsKey ? (
42. <p className="muted">
43. Add your {provider?.name} API key to start.{' '}
44. <button className="link" onClick={() => setPanel('settings')}>
45. Open Settings
46. </button>
47. </p>
48. ) : (
49. <p className="muted">
50. Every reply shows what it cost. {mod}K searches past chats; {mod}N starts a new one.
51. </p>
52. )}
53. <div className="suggestions">
54. {SUGGESTIONS.map((s) => (
55. <button key={s} className="suggestion glass-tint" onClick={() => onSuggest(s)}>
56. {s}
57. </button>
58. ))}
59. </div>
60. </div>
61. </div>
62. )
63. }
65. const lastAssistant = [...view.messages].reverse().find((m) => m.role === 'assistant')
66. return (
67. <div
68. className="chat-scroll"
69. ref={scroller}
70. onScroll={(e) => {
71. const el = e.currentTarget
72. pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80
73. }}
74. >
75. <div className="thread" data-testid="thread">
76. {view.conversation.system_prompt && (
77. <details className="system-prompt">
78. <summary>System prompt</summary>
79. <div className="selectable">{view.conversation.system_prompt}</div>
80. </details>
81. )}
82. {view.messages.map((m) => (
83. <MessageBubble
84. key={m.id}
85. m={m}
86. live={streaming && streaming.assistantId === m.id ? streaming : null}
87. isLastAssistant={m.id === lastAssistant?.id}
88. />
89. ))}
90. </div>
91. </div>
92. )
93. }