perf: optimize BubbleList to avoid rerender

Author: fu050409

.changes/bubble-perf.md

@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:perf
+---
+
+Optimize performance of `BubbleList` component, avoid extra rerender overheads.

playground/src/Chat.tsx

@@ -1,5 +1,5 @@
 import { MessageSquarePlus } from "lucide-react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { BubbleList } from "../../dist/bubble";
 import { Button } from "../../dist/button";
 import { FileUpload } from "../../dist/file-upload";
@@ -17,6 +17,7 @@ import { useMateChat } from "../../dist/utils/core";
 export function Chat() {
   const initialMessages: MessageParam[] = [
     {
+      id: "1",
       role: "user",
       content: "Hello, how are you?",
       avatar: {
@@ -25,6 +26,7 @@ export function Chat() {
       align: "right",
     },
     {
+      id: "2",
       role: "assistant",
       content:
         "I'm doing well, thank you! How can I assist you today? \
@@ -48,10 +50,10 @@ export function Chat() {
     initialMessages,
   );
 
-  const onClear = () => {
+  const onClear = useCallback(() => {
     setPrompt("");
     setMessages([]);
-  };
+  }, [setMessages]);
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">

src/bubble.tsx

@@ -252,12 +252,7 @@ export function BubbleList({
   background = "right-solid",
   footer,
   pending,
-  assistant = {
-    avatar: {
-      text: "A",
-    },
-    align: "left",
-  },
+  assistant,
   isPending = true,
   messages,
   threshold = 8,
@@ -324,6 +319,23 @@ export function BubbleList({
     }
   }, [isScrollAtBottom]);
 
+  const handleTouchStart = useCallback(() => {
+    pauseScroll.current = true;
+  }, []);
+
+  const handleTouchEnd = useCallback(() => {
+    if (isScrollAtBottom()) {
+      pauseScroll.current = false;
+      scrollContainer(false);
+    } else {
+      pauseScroll.current = true;
+    }
+  }, [isScrollAtBottom, scrollContainer]);
+
+  const handleTouchMove = useCallback(() => {
+    pauseScroll.current = true;
+  }, []);
+
   return (
     <div
       data-slot="bubble-list"
@@ -332,30 +344,19 @@ export function BubbleList({
       )}
       ref={containerRef}
       onWheel={handleWheel}
-      onTouchStart={() => {
-        pauseScroll.current = true;
-      }}
-      onTouchEnd={() => {
-        if (isScrollAtBottom()) {
-          pauseScroll.current = false;
-          scrollContainer(false);
-        } else {
-          pauseScroll.current = true;
-        }
-      }}
-      onTouchMove={() => {
-        pauseScroll.current = true;
-      }}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onTouchMove={handleTouchMove}
       {...props}
     >
       <div
         data-slot="bubble-items"
         className="flex flex-col max-w-full flex-1 gap-4"
         ref={contentRef}
       >
-        {messages.map((message, index) => (
+        {messages.map((message) => (
           <div
-            key={message.content.slice(0, 8) + index.toString()}
+            key={message.id}
             data-slot="bubble-item"
             className={twMerge(
               clsx(

src/sender.tsx

@@ -106,6 +106,7 @@ export interface SenderProps extends React.ComponentProps<"div"> {
   onSend?: (controller: AbortController) => void;
   toolbar?: React.ReactNode;
 }
+
 export function Sender({
   className,
   initialMessage = "",

src/utils/backend.ts

@@ -1,6 +1,7 @@
 import { createNanoEvents, type Emitter } from "nanoevents";
 import OpenAI, { type ClientOptions } from "openai";
 import type { Backend, Events, EventTypes, MessageParam } from "./types";
+import { getRandomId } from "./utils";
 
 /**
  * Configuration options for the `OpenAIBackend` class.
@@ -84,7 +85,7 @@ export class OpenAIBackend implements Backend {
    */
   async input(prompt: string, options?: InputOptions): Promise<void> {
     this.emitter.emit("input", {
-      id: Symbol(),
+      id: getRandomId(16),
       type: "input",
       payload: { prompt },
     });
@@ -112,7 +113,7 @@ export class OpenAIBackend implements Backend {
       for await (const chunk of response) {
         const chunkMessage = chunk.choices[0].delta.content || "";
         this.emitter.emit("chunk", {
-          id: Symbol(chunk.id),
+          id: chunk.id,
           type: "chunk",
           payload: { chunk: chunkMessage },
         });
@@ -121,13 +122,13 @@ export class OpenAIBackend implements Backend {
       }
     } catch (error) {
       this.emitter.emit("error", {
-        id: Symbol(),
+        id: getRandomId(16),
         type: "error",
         payload: { error: (error as Error).message },
       });
     }
     this.emitter.emit("finish", {
-      id: Symbol(),
+      id: getRandomId(16),
       type: "finish",
       payload: { message: prompt },
     });

src/utils/chat.ts

@@ -42,6 +42,7 @@ export function useChat(
         setMessages((prevMessages) => [
           ...prevMessages,
           {
+            id: event.id,
             role: "user",
             name: "User",
             content: event.payload.prompt,
@@ -61,6 +62,7 @@ export function useChat(
         setMessages((prevMessages) => [
           ...prevMessages,
           {
+            id: event.id,
             role: "system",
             name: "Error",
             content: event.payload.error,
@@ -87,6 +89,7 @@ export function useChat(
           return [
             ...prev,
             {
+              id: event.id,
               role: "assistant",
               content: event.payload.chunk,
               avatar: {

src/utils/types.ts

@@ -2,7 +2,7 @@ import type { Emitter } from "nanoevents";
 import type { AvatarProps } from "../bubble";
 
 export interface BaseEvent<T extends string> {
-  id: symbol;
+  id: string;
   type: T;
   payload?: unknown;
   timestamp?: number;
@@ -47,6 +47,7 @@ export type Events = {
 };
 
 export interface MessageParam {
+  id: string;
   role: "user" | "assistant" | "system" | "developer";
   name?: string;
   content: string;

src/utils/utils.ts

@@ -0,0 +1,6 @@
+export function getRandomId(length: number) {
+  if (typeof window === "undefined") {
+    return Math.random().toString(36).substring(2, length);
+  }
+  return window.crypto.randomUUID();
+}