:lightning: chat rendering

src/renderer/components/AIChat/ChatMessageItem.tsx

@@ -32,7 +32,8 @@ interface Props {
 }
 
 function ChatMessageItemInner({ message, linkedAnnotations }: Props): JSX.Element {
-  const { activeFilePath, markSaved } = useEditorStore()
+  const activeFilePath = useEditorStore(s => s.activeFilePath)
+  const markSaved = useEditorStore(s => s.markSaved)
 
   const html = useMemo(() => {
     if (message.role !== 'assistant' || !message.content) return null

src/renderer/components/AIChat/ChatPanel.tsx

@@ -32,8 +32,9 @@ export function ChatPanel(): JSX.Element {
     annotations,
     annotationsByFile,
     addUserMessage,
-    startAssistantMessage,
+    finalizeAssistantMessage,
-    appendToLastAssistantMessage,
+    setStreamingContent,
+    streamingContent,
     setAILoading,
     setAIError,
     setAnnotations,
@@ -49,6 +50,8 @@ export function ChatPanel(): JSX.Element {
   const [showHistory, setShowHistory] = useState(false)
   const [pendingAttachmentCount, setPendingAttachmentCount] = useState(0)
   const [feedbackNotice, setFeedbackNotice] = useState<string | null>(null)
+  const streamingContentRef = useRef('')
+  const streamingRafRef = useRef<number | null>(null)
   const scrollRef = useRef<HTMLDivElement>(null)
   const scrollRafRef = useRef<number | null>(null)
   const prevAnnotationCountRef = useRef(annotations.length)
@@ -71,8 +74,8 @@ export function ChatPanel(): JSX.Element {
 
     setAIError(null)
     setFeedbackNotice(null)
+    streamingContentRef.current = ''
     addUserMessage(text, attachments.map(({ name, mimeType }) => ({ name, mimeType })))
-    startAssistantMessage()
     setAILoading(true)
 
     try {
@@ -89,23 +92,38 @@ export function ChatPanel(): JSX.Element {
           attachments: attachments.length > 0 ? attachments : undefined
         },
         (chunk: string) => {
-          appendToLastAssistantMessage(chunk)
+          streamingContentRef.current += chunk
+          if (streamingRafRef.current === null) {
+            streamingRafRef.current = requestAnimationFrame(() => {
+              streamingRafRef.current = null
+              setStreamingContent(streamingContentRef.current)
+            })
+          }
         }
       )
 
-      // After streaming, parse AI response for annotations.
+      // Cancel any pending rAF and commit to store once
-      // Attachment-driven messages are tagged 'custom' so they appear with a
+      if (streamingRafRef.current !== null) {
-      // distinct visual treatment in the Feedback panel.
+        cancelAnimationFrame(streamingRafRef.current)
-      const currentHistory = useEditorStore.getState().chatHistory
+        streamingRafRef.current = null
-      const lastMsg = currentHistory[currentHistory.length - 1]
+      }
-      if (lastMsg?.role === 'assistant' && lastMsg.content.length > 0) {
+      const finalContent = streamingContentRef.current
+      streamingContentRef.current = ''
+
+      if (finalContent.length > 0) {
+        finalizeAssistantMessage(finalContent)
+
         const overrideType = attachments.length > 0 ? 'custom' as const : undefined
         const latestContent = useEditorStore.getState().activeFileContent
-        const { annotations: parsed, droppedCount } = parseAnnotationsFromAIResponse(lastMsg.content, latestContent, overrideType)
+        const { annotations: parsed, droppedCount } = parseAnnotationsFromAIResponse(finalContent, latestContent, overrideType)
         if (parsed.length > 0) {
+          const currentHistory = useEditorStore.getState().chatHistory
+          const lastMsg = currentHistory[currentHistory.length - 1]
           setAnnotations(parsed)
+          if (lastMsg?.role === 'assistant') {
             linkAnnotationsToMessage(lastMsg.id, parsed.map(a => a.id))
           }
+        }
         if (droppedCount > 0) {
           setFeedbackNotice(
             `${droppedCount} feedback item${droppedCount === 1 ? '' : 's'} couldn't be applied — the referenced text has been edited.`
@@ -120,7 +138,7 @@ export function ChatPanel(): JSX.Element {
     }
   }
 
-  // Auto-scroll to bottom when new content arrives (coalesced to one scroll per animation frame)
+  // Auto-scroll to bottom when new content arrives
   useEffect(() => {
     if (scrollRafRef.current !== null) return
     scrollRafRef.current = requestAnimationFrame(() => {
@@ -128,7 +146,7 @@ export function ChatPanel(): JSX.Element {
       const el = scrollRef.current
       if (el) el.scrollTop = el.scrollHeight
     })
-  }, [chatHistory])
+  }, [chatHistory, streamingContent])
 
   const hasFile = Boolean(activeFilePath)
   const allAnnotationsForFile: TextAnnotation[] =
@@ -137,7 +155,6 @@ export function ChatPanel(): JSX.Element {
   const sessions = (activeFilePath ? chatSessionsByFile[activeFilePath] : undefined) ?? []
   const activeSessionId = activeFilePath ? activeSessionIdByFile[activeFilePath] : undefined
 
-  // Subheader is shown in the chat tab once there is at least one session
   const showSubheader = tab === 'chat' && sessions.length > 0
 
   return (
@@ -161,7 +178,6 @@ export function ChatPanel(): JSX.Element {
         </button>
       </div>
 
-
       {/* ── Chat sub-header: History link + New Chat button ── */}
       {showSubheader && (
         <div className="chat-subheader">
@@ -219,7 +235,7 @@ export function ChatPanel(): JSX.Element {
             {!hasFile && (
               <p className="chat-placeholder">Open a chapter to start a conversation about it.</p>
             )}
-            {hasFile && chatHistory.length === 0 && (
+            {hasFile && chatHistory.length === 0 && !isAILoading && (
               <p className="chat-placeholder">
                 Ask anything about the current chapter — passive voice, plot, character, style...
               </p>
@@ -236,11 +252,15 @@ export function ChatPanel(): JSX.Element {
                 />
               )
             })}
-            {isAILoading && chatHistory[chatHistory.length - 1]?.content === '' && (
+            {isAILoading && (
-              <div className="chat-typing">
+              <div className="chat-message chat-message-assistant">
-                <span />
+                <div className="chat-message-label">Editor AI</div>
-                <span />
+                <div className="chat-message-content">
-                <span />
+                  {streamingContent
+                    ? <span>{streamingContent}</span>
+                    : <div className="chat-typing"><span /><span /><span /></div>
+                  }
+                </div>
               </div>
             )}
             {aiError && (

src/renderer/components/Toolbar/AnalysisToolbar.tsx

@@ -120,8 +120,8 @@ export function AnalysisToolbar(): JSX.Element {
     clearAnnotations,
     setAnalysisMode,
     addUserMessage,
-    startAssistantMessage,
+    finalizeAssistantMessage,
-    appendToLastAssistantMessage,
+    setStreamingContent,
     setAILoading,
     setAIError,
     linkAnnotationsToMessage,
@@ -138,6 +138,9 @@ export function AnalysisToolbar(): JSX.Element {
     selectionWordCount
   } = useEditorStore()
 
+  const streamingContentRef = useRef('')
+  const streamingRafRef = useRef<number | null>(null)
+
   const [analyzeOpen, setAnalyzeOpen] = useState(false)
   const analyzeButtonRef = useRef<HTMLButtonElement>(null)
   const analyzeMenuRef = useRef<HTMLDivElement>(null)
@@ -223,8 +226,8 @@ export function AnalysisToolbar(): JSX.Element {
     setAIError(null)
     setRightPanelTab('chat')
 
+    streamingContentRef.current = ''
     addUserMessage(prompt)
-    startAssistantMessage({ bibleGeneration: true })
     setAILoading(true)
 
     try {
@@ -239,9 +242,25 @@ export function AnalysisToolbar(): JSX.Element {
           userMessage: prompt
         },
         (chunk: string) => {
-          appendToLastAssistantMessage(chunk)
+          streamingContentRef.current += chunk
+          if (streamingRafRef.current === null) {
+            streamingRafRef.current = requestAnimationFrame(() => {
+              streamingRafRef.current = null
+              setStreamingContent(streamingContentRef.current)
+            })
+          }
         }
       )
+
+      if (streamingRafRef.current !== null) {
+        cancelAnimationFrame(streamingRafRef.current)
+        streamingRafRef.current = null
+      }
+      const finalContent = streamingContentRef.current
+      streamingContentRef.current = ''
+      if (finalContent.length > 0) {
+        finalizeAssistantMessage(finalContent, { bibleGeneration: true })
+      }
     } catch (err) {
       setAIError(err instanceof Error ? err.message : 'Generation failed')
     } finally {
@@ -286,8 +305,8 @@ export function AnalysisToolbar(): JSX.Element {
                   ? 'Please identify every past progressive construction (was/were + verb-ing) in this chapter that would be stronger in simple past.'
                   : 'Please give me an honest critique of this chapter.'
 
+    streamingContentRef.current = ''
     addUserMessage(prompt)
-    startAssistantMessage()
     setAILoading(true)
 
     try {
@@ -302,28 +321,44 @@ export function AnalysisToolbar(): JSX.Element {
           userMessage: prompt
         },
         (chunk: string) => {
-          appendToLastAssistantMessage(chunk)
+          streamingContentRef.current += chunk
+          if (streamingRafRef.current === null) {
+            streamingRafRef.current = requestAnimationFrame(() => {
+              streamingRafRef.current = null
+              setStreamingContent(streamingContentRef.current)
+            })
+          }
         }
       )
 
+      if (streamingRafRef.current !== null) {
+        cancelAnimationFrame(streamingRafRef.current)
+        streamingRafRef.current = null
+      }
+      const finalContent = streamingContentRef.current
+      streamingContentRef.current = ''
+
+      if (finalContent.length > 0) {
+        finalizeAssistantMessage(finalContent)
+
         // Parse annotations from response
-      const currentHistory = useEditorStore.getState().chatHistory
-      const lastMsg = currentHistory[currentHistory.length - 1]
-      if (lastMsg?.role === 'assistant' && lastMsg.content.length > 0) {
-        // Force annotation type for modes where the classifier might mis-label.
         const overrideType =
           mode === 'show_tell' ? 'show_tell' :
           mode === 'weak_verbs' ? 'weak_verbs' :
           mode === 'cliches' ? 'cliches' :
           mode === 'past_progressive' ? 'past_progressive' :
           undefined
-        const { annotations: newAnnotations } = parseAnnotationsFromAIResponse(lastMsg.content, activeFileContent, overrideType)
+        const { annotations: newAnnotations } = parseAnnotationsFromAIResponse(finalContent, activeFileContent, overrideType)
         if (newAnnotations.length > 0) {
+          const currentHistory = useEditorStore.getState().chatHistory
+          const lastMsg = currentHistory[currentHistory.length - 1]
           const existing = useEditorStore.getState().annotations.filter((a) => a.type !== mode)
           setAnnotations([...existing, ...newAnnotations])
+          if (lastMsg?.role === 'assistant') {
             linkAnnotationsToMessage(lastMsg.id, newAnnotations.map(a => a.id))
           }
         }
+      }
     } catch (err) {
       setAIError(err instanceof Error ? err.message : 'Analysis failed')
     } finally {

src/renderer/store/editorStore.ts

@@ -28,6 +28,9 @@ interface EditorState {
   addUserMessage: (text: string, attachments?: AttachmentMeta[]) => void
   startAssistantMessage: (opts?: { bibleGeneration?: boolean }) => void
   appendToLastAssistantMessage: (chunk: string) => void
+  finalizeAssistantMessage: (content: string, opts?: { bibleGeneration?: boolean }) => void
+  streamingContent: string
+  setStreamingContent: (content: string) => void
   setAILoading: (loading: boolean) => void
   setAIError: (error: string | null) => void
   newChat: () => void
@@ -216,6 +219,7 @@ export const useEditorStore = create<EditorState>((set, get) => ({
   chatHistory: [],
   isAILoading: false,
   aiError: null,
+  streamingContent: '',
 
   addUserMessage: (text, attachments?) => {
     const msg: ChatMessage = { id: `user-${Date.now()}`, role: 'user', content: text, attachments }
@@ -274,6 +278,21 @@ export const useEditorStore = create<EditorState>((set, get) => ({
     })
   },
 
+  finalizeAssistantMessage: (content, opts?) => {
+    const msg: ChatMessage = { id: `asst-${Date.now()}`, role: 'assistant', content, bibleGeneration: opts?.bibleGeneration }
+    set((s) => {
+      const history = [...s.chatHistory, msg]
+      if (!s.activeFilePath) return { chatHistory: history, streamingContent: '' }
+      const activeId = s.activeSessionIdByFile[s.activeFilePath]
+      const sessions = (s.chatSessionsByFile[s.activeFilePath] ?? []).map(sess =>
+        sess.id === activeId ? { ...sess, messages: history } : sess
+      )
+      return { chatHistory: history, chatSessionsByFile: { ...s.chatSessionsByFile, [s.activeFilePath]: sessions }, streamingContent: '' }
+    })
+  },
+
+  setStreamingContent: (content) => set({ streamingContent: content }),
+
   setAILoading: (isAILoading) => {
     set((s) => {
       if (isAILoading) return { isAILoading }