Skip to content

⚡ Bolt: optimize chat UI performance #537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ngoiyaeric wants to merge 1 commit into
base: main
Choose a base branch
from
Open

⚡ Bolt: optimize chat UI performance #537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Bolt Journal - Performance Learnings

## 2025-05-14 - React State Synchronization Optimization
**Learning:** Using `useState` + `useEffect` to synchronize state derived from props (e.g., `showEmptyScreen` from `messages.length`) causes unnecessary extra render cycles.
**Action:** Always prefer derived variables (`const showEmptyScreen = messages.length === 0`) for simple UI logic to ensure immediate updates and cleaner code.

## 2025-05-14 - Chat UI Re-render Prevention
**Learning:** In a chat application, the main message list (`ChatMessages`) often re-renders whenever the user types in the input field because they share a parent component (`Chat`). This is especially expensive if the message list performs computations like grouping.
**Action:** Wrap high-frequency UI components like `ChatMessages` in `React.memo` and use `useMemo` for any O(n) data transformations (like message grouping) to keep the UI responsive during user interaction.
Comment on lines +3 to +9
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add blank lines below headings to satisfy MD022.

Both ## headings on lines 3 and 7 are immediately followed by content, triggering MD022 blanks-around-headings.

📝 Proposed fix 
 ## 2025-05-14 - React State Synchronization Optimization
+
 **Learning:** Using `useState` + `useEffect` to synchronize state derived from props...
 **Action:** Always prefer derived variables...

 ## 2025-05-14 - Chat UI Re-render Prevention
+
 **Learning:** In a chat application, the main message list...
 **Action:** Wrap high-frequency UI components...
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
## 2025-05-14 - React State Synchronization Optimization
**Learning:** Using `useState` + `useEffect` to synchronize state derived from props (e.g., `showEmptyScreen` from `messages.length`) causes unnecessary extra render cycles.
**Action:** Always prefer derived variables (`const showEmptyScreen = messages.length === 0`) for simple UI logic to ensure immediate updates and cleaner code.
## 2025-05-14 - Chat UI Re-render Prevention
**Learning:** In a chat application, the main message list (`ChatMessages`) often re-renders whenever the user types in the input field because they share a parent component (`Chat`). This is especially expensive if the message list performs computations like grouping.
**Action:** Wrap high-frequency UI components like `ChatMessages` in `React.memo` and use `useMemo` for any O(n) data transformations (like message grouping) to keep the UI responsive during user interaction.
## 2025-05-14 - React State Synchronization Optimization
**Learning:** Using `useState` + `useEffect` to synchronize state derived from props (e.g., `showEmptyScreen` from `messages.length`) causes unnecessary extra render cycles.
**Action:** Always prefer derived variables (`const showEmptyScreen = messages.length === 0`) for simple UI logic to ensure immediate updates and cleaner code.
## 2025-05-14 - Chat UI Re-render Prevention
**Learning:** In a chat application, the main message list (`ChatMessages`) often re-renders whenever the user types in the input field because they share a parent component (`Chat`). This is especially expensive if the message list performs computations like grouping.
**Action:** Wrap high-frequency UI components like `ChatMessages` in `React.memo` and use `useMemo` for any O(n) data transformations (like message grouping) to keep the UI responsive during user interaction.
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)

[warning] 3-3: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below

(MD022, blanks-around-headings)

[warning] 7-7: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below

(MD022, blanks-around-headings)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.jules/bolt.md around lines 3 - 9, The Markdown headings "2025-05-14 - React
State Synchronization Optimization" and "2025-05-14 - Chat UI Re-render
Prevention" are missing blank lines after the `##` heading lines causing MD022;
fix by inserting a single blank line immediately after each heading line (the
two headings named above) so the heading is separated from the following
paragraph content and satisfies the blanks-around-headings rule.

72 changes: 40 additions & 32 deletions components/chat-messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,50 @@
'use client'

import { StreamableValue, useUIState } from 'ai/rsc'
import type { AI, UIState } from '@/app/actions'
import { memo, useMemo } from 'react'
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if React namespace is declared globally anywhere in the project
rg -n "declare namespace React" --type ts --type tsx -g '!node_modules' || echo "No React namespace declarations found"

# Check for tsconfig files
fd tsconfig -type f -e json

# Check for any global.d.ts or similar that might expose React
fd "global.d.ts" || fd ".d.ts" -path "*/src/*" -type f

Repository: QueueLab/QCX

Length of output: 309

🏁 Script executed:

#!/bin/bash
# Find tsconfig.json files
find . -maxdepth 3 -name "tsconfig.json" -type f -exec echo "=== {} ===" \; -exec cat {} \;

# Find global.d.ts files
find . -name "global.d.ts" -o -name "*.d.ts" | grep -E "(global|types|declarations)" | head -10

# Check package.json for `@types/react` version
cat package.json | grep -A2 -B2 "@types/react" || echo "No `@types/react` found in package.json"

# Look at the actual file mentioned in the review
echo "=== Checking components/chat-messages.tsx ===" 
head -60 components/chat-messages.tsx | cat -n

Repository: QueueLab/QCX

Length of output: 4397

Import ReactNode from React and replace React.ReactNode with ReactNode in type annotations.

The codebase uses @types/react@^19.1.8, which removed the global React namespace. Line 3 imports only memo and useMemo as named imports, leaving React.ReactNode at lines 37, 40, and 55 undefined. This will produce TypeScript error TS2304: Cannot find namespace 'React'.

🐛 Proposed fix 
-import { memo, useMemo } from 'react'
+import { memo, useMemo, type ReactNode } from 'react'
-    return Object.values(groupedMessages).map(group => ({
-      ...group,
-      components: (group as any).components as React.ReactNode[]
-    })) as {
-      id: string
-      components: React.ReactNode[]
-      isCollapsed?: StreamableValue<boolean>
-    }[]
+    return Object.values(groupedMessages).map(group => ({
+      ...group,
+      components: (group as any).components as ReactNode[]
+    })) as {
+      id: string
+      components: ReactNode[]
+      isCollapsed?: StreamableValue<boolean>
+    }[]
       (
         groupedMessage: {
           id: string
-          components: React.ReactNode[]
+          components: ReactNode[]
           isCollapsed?: StreamableValue<boolean>
         }
       ) => (
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/chat-messages.tsx` at line 3, The file imports only memo and
useMemo from React but uses the React namespace type React.ReactNode in type
annotations (e.g., in the ChatMessages component props/children and any types
around message rendering), which fails with `@types/react`@^19.1.8; fix by adding
ReactNode to the import list (import { memo, useMemo, ReactNode } from 'react')
and replace occurrences of React.ReactNode with plain ReactNode in the
component/type declarations (search for React.ReactNode in this file and update
usages near the ChatMessages props and message render types).

import { StreamableValue } from 'ai/rsc'
import type { UIState } from '@/app/actions'
import { CollapsibleMessage } from './collapsible-message'

interface ChatMessagesProps {
messages: UIState
}

export function ChatMessages({ messages }: ChatMessagesProps) {
if (!messages.length) {
return null
}

export const ChatMessages = memo(({ messages }: ChatMessagesProps) => {
// Group messages based on ID, and if there are multiple messages with the same ID, combine them into one message
const groupedMessages = messages.reduce(
(acc: { [key: string]: any }, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [],
isCollapsed: message.isCollapsed
const groupedMessagesArray = useMemo(() => {
if (!messages.length) {
return []
}

const groupedMessages = messages.reduce(
(acc: { [key: string]: any }, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [],
isCollapsed: message.isCollapsed
}
}
}
acc[message.id].components.push(message.component)
return acc
},
{}
)
acc[message.id].components.push(message.component)
return acc
},
{}
)

// Convert grouped messages into an array with explicit type
const groupedMessagesArray = Object.values(groupedMessages).map(group => ({
...group,
components: group.components as React.ReactNode[]
})) as {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}[]
// Convert grouped messages into an array with explicit type
return Object.values(groupedMessages).map(group => ({
...group,
components: (group as any).components as React.ReactNode[]
})) as {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}[]
Comment on lines +19 to +42
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Excessive any casts — the grouping accumulator can be properly typed.

The accumulator is typed as { [key: string]: any }, forcing a double cast (group as any).components as ReactNode[] to recover the real type. The spread-then-override pattern (...group, components: ...) adds no structural change beyond a runtime cast. A proper intermediate type eliminates all the any noise:

♻️ Proposed refactor 
+    type GroupedEntry = {
+      id: string
+      components: ReactNode[]
+      isCollapsed?: StreamableValue<boolean>
+    }
+
     const groupedMessages = messages.reduce(
-      (acc: { [key: string]: any }, message) => {
+      (acc: Record<string, GroupedEntry>, message) => {
         if (!acc[message.id]) {
           acc[message.id] = {
             id: message.id,
             components: [],
             isCollapsed: message.isCollapsed
           }
         }
         acc[message.id].components.push(message.component)
         return acc
       },
       {}
     )
 
-    return Object.values(groupedMessages).map(group => ({
-      ...group,
-      components: (group as any).components as React.ReactNode[]
-    })) as {
-      id: string
-      components: React.ReactNode[]
-      isCollapsed?: StreamableValue<boolean>
-    }[]
+    return Object.values(groupedMessages)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const groupedMessages = messages.reduce(
(acc: { [key: string]: any }, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [],
isCollapsed: message.isCollapsed
}
}
}
acc[message.id].components.push(message.component)
return acc
},
{}
)
acc[message.id].components.push(message.component)
return acc
},
{}
)
// Convert grouped messages into an array with explicit type
const groupedMessagesArray = Object.values(groupedMessages).map(group => ({
...group,
components: group.components as React.ReactNode[]
})) as {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}[]
// Convert grouped messages into an array with explicit type
return Object.values(groupedMessages).map(group => ({
...group,
components: (group as any).components as React.ReactNode[]
})) as {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}[]
type GroupedEntry = {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}
const groupedMessages = messages.reduce(
(acc: Record<string, GroupedEntry>, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [],
isCollapsed: message.isCollapsed
}
}
acc[message.id].components.push(message.component)
return acc
},
{}
)
return Object.values(groupedMessages)
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/chat-messages.tsx` around lines 19 - 42, The grouping reduce uses
a loose `{ [key: string]: any }` accumulator causing unnecessary `any` casts;
update the reduce accumulator to a typed interface (e.g., GroupMap =
Record<string, { id: string; components: React.ReactNode[]; isCollapsed?:
StreamableValue<boolean> }>) inside the `messages.reduce` call so
`acc[message.id]` and `acc[message.id].components.push(message.component)` are
type-safe, then return `Object.values(groupedMessages)` without casting by
preserving that explicit type for `groupedMessages` and the final array shape
(refer to `groupedMessages`, the `messages.reduce` callback, and the final
`Object.values(...).map(...)` return).

}, [messages])
Comment on lines +14 to +43
Copy link

@charliecreates charliecreates bot Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useMemo is doing the right thing for performance, but the reducer is typed as { [key: string]: any } and the mapping uses (group as any). This is an unnecessary escape hatch that weakens safety and makes future refactors riskier. You can keep the memoization while strongly typing the accumulator/group structure (no any) and avoid the extra cast in the map.

Also, since you already compute groupedMessagesArray, you can derive the render-early null check from it (or just rely on groupedMessagesArray.length === 0) to avoid checking messages.length twice (minor, but keeps the logic single-sourced).

Suggestion

Replace the any-typed accumulator with a concrete type and remove (group as any).

Example:

type GroupedMessage = {
  id: string
  components: React.ReactNode[]
  isCollapsed?: StreamableValue<boolean>
}

type GroupedMessageMap = Record<string, GroupedMessage>

const groupedMessagesArray = useMemo(() => {
  const grouped = messages.reduce<GroupedMessageMap>((acc, message) => {
    const id = message.id
    if (!acc[id]) acc[id] = { id, components: [], isCollapsed: message.isCollapsed }
    acc[id].components.push(message.component)
    return acc
  }, {})

  return Object.values(grouped)
}, [messages])

if (groupedMessagesArray.length === 0) return null

Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.


if (!messages.length) {
return null
}

return (
<>
Expand All @@ -47,8 +54,7 @@ export function ChatMessages({ messages }: ChatMessagesProps) {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
},
index
}
) => (
<CollapsibleMessage
key={`${groupedMessage.id}`}
Expand All @@ -67,4 +73,6 @@ export function ChatMessages({ messages }: ChatMessagesProps) {
)}
</>
)
}
})

ChatMessages.displayName = 'ChatMessages'
6 changes: 1 addition & 5 deletions components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function Chat({ id }: ChatProps) {
const { isUsageOpen } = useUsageToggle();
const { isCalendarOpen } = useCalendarToggle()
const [input, setInput] = useState('')
const [showEmptyScreen, setShowEmptyScreen] = useState(false)
const showEmptyScreen = messages.length === 0
const [isSubmitting, setIsSubmitting] = useState(false)
const [suggestions, setSuggestions] = useState<PartialRelated | null>(null)
const chatPanelRef = useRef<ChatPanelRef>(null);
Expand All @@ -48,10 +48,6 @@ export function Chat({ id }: ChatProps) {
const handleMobileSubmit = () => {
chatPanelRef.current?.submitForm();
};

useEffect(() => {
setShowEmptyScreen(messages.length === 0)
}, [messages])

useEffect(() => {
// Check if device is mobile
Expand Down