Merge pull request #471 from Oxygen-Low/bolt-optimize-chatbot-memo-11837395110191223168

⚡ Bolt: Memoize filtered models arrays in Chatbot

Author: Oxygen-Low

.jules/bolt.md

@@ -2,6 +2,8 @@
 
 **Learning:** Static arrays that contain JSX elements (e.g. configuring categories or routing with icons) created inside a React component render function are re-allocated on every single render. This forces child components and `useMemo` hooks depending on them to constantly re-evaluate.
 **Action:** Always define static configuration structures containing JSX elements outside the component body.
+
 ## 2024-05-17 - [ReactMarkdown Memoization Pattern]
+
 **Learning:** In streaming chat interfaces (like `Chatbot.tsx`), placing inline object or function definitions (like the `components` prop for `ReactMarkdown`) inside a `React.memo` wrapped child component causes that heavy component to re-render constantly. This happens because the parent `ChatMessage` is memoized and might try to avoid re-renders, but when it does re-render due to prop changes (like new tokens in `m.content`), it recreates the `components` object, which then forces `ReactMarkdown` (a very heavy component with SyntaxHighlighter) to completely re-render from scratch instead of just updating text.
 **Action:** Always extract static configuration objects, such as `ReactMarkdown`'s `components` mappings or custom renderers, outside of the React render body. If they depend on props/state, use `useMemo`. This prevents O(n) re-renders during frequent streaming state updates.

.jules/palette.md

@@ -1,6 +1,9 @@
 ## 2023-10-27 - [Add aria-pressed to custom toggles]
+
 **Learning:** Custom toggle buttons and selection items (like themes, fonts, or feature switches) constructed with `button` elements often lack implicit state for screen readers. Using CSS classes alone for visual active state is insufficient for accessibility.
 **Action:** Always map the boolean active state of a custom toggle or selection button to the `aria-pressed` attribute (e.g., `aria-pressed={isActive}`). For multi-selection or lists, `aria-selected` within a `role="listbox"` or `role="tablist"` might be more appropriate, but `aria-pressed` is crucial for standalone toggles.
+
 ## 2025-02-28 - Add missing ARIA labels to Music Player
+
 **Learning:** Icon-only buttons without `aria-label` or `title` attributes are completely inaccessible to screen readers and difficult for sighted users to identify. When adding ARIA attributes to toggle buttons (like "Shuffle"), it is important to include `aria-pressed` to communicate the active state to assistive technologies.
 **Action:** Always add `aria-label` and `title` to icon-only buttons. For stateful toggle buttons, implement `aria-pressed={state}` dynamically.

client/components/apps/Chatbot.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import {
   Plus,
   Trash2,
@@ -149,9 +149,7 @@ const ChatMessage = React.memo(
                 : "bg-slate-900 border border-slate-800 text-slate-200",
             )}
           >
-            <ReactMarkdown
-              components={memoizedMarkdownComponents}
-            >
+            <ReactMarkdown components={memoizedMarkdownComponents}>
               {displayContent}
             </ReactMarkdown>
           </div>
@@ -270,6 +268,21 @@ export function ChatbotApp() {
   const lastParsedLengthRef = useRef(0);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
+  /**
+   * ⚡ Bolt Performance Optimization:
+   * Memoize filtered models (horde vs non-horde) so we don't recalculate
+   * these arrays on every render (which happens frequently as the user types).
+   */
+  const hordeModels = useMemo(() => {
+    return models.filter((m) => m.provider === "horde");
+  }, [models]);
+
+  const otherModels = useMemo(() => {
+    return models.filter((m) => m.provider !== "horde");
+  }, [models]);
+
+  const hasHordeModels = hordeModels.length > 0;
+
   const fetchData = async () => {
     if (!session?.user?.id) return;
 
@@ -702,31 +715,27 @@ export function ChatbotApp() {
                 setSelection(m, p);
               }}
             >
-              {models.some((m) => m.provider === "horde") && (
+              {hasHordeModels && (
                 <optgroup label="Default (AI Horde)">
-                  {models
-                    .filter((m) => m.provider === "horde")
-                    .map((m) => (
-                      <option
-                        key={`${m.provider}:${m.model_id}`}
-                        value={`${m.provider}:${m.model_id}`}
-                      >
-                        {formatModelLabel(m.provider, m.model_id)}
-                      </option>
-                    ))}
-                </optgroup>
-              )}
-              <optgroup label="Other Models">
-                {models
-                  .filter((m) => m.provider !== "horde")
-                  .map((m) => (
+                  {hordeModels.map((m) => (
                     <option
                       key={`${m.provider}:${m.model_id}`}
                       value={`${m.provider}:${m.model_id}`}
                     >
                       {formatModelLabel(m.provider, m.model_id)}
                     </option>
                   ))}
+                </optgroup>
+              )}
+              <optgroup label="Other Models">
+                {otherModels.map((m) => (
+                  <option
+                    key={`${m.provider}:${m.model_id}`}
+                    value={`${m.provider}:${m.model_id}`}
+                  >
+                    {formatModelLabel(m.provider, m.model_id)}
+                  </option>
+                ))}
               </optgroup>
             </select>
           </div>