@copilotz/chat-ui 0.1.2 → 0.1.3

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat/ChatUI.tsx
-import { useState as useState8, useEffect as useEffect10, useRef as useRef7, useCallback as useCallback4 } from "react";
+import { useState as useState8, useEffect as useEffect10, useRef as useRef7, useCallback as useCallback4, useMemo as useMemo3 } from "react";
 
 // src/config/chatConfig.ts
 var defaultChatConfig = {
@@ -736,27 +736,7 @@ var ToolCallsDisplay = memo(function ToolCallsDisplay2({ toolCalls, label }) {
   ] });
 });
 var arePropsEqual = (prevProps, nextProps) => {
-  if (prevProps.message.id !== nextProps.message.id) return false;
-  if (prevProps.message.content !== nextProps.message.content) return false;
-  if (prevProps.message.isStreaming !== nextProps.message.isStreaming) return false;
-  if (prevProps.message.isComplete !== nextProps.message.isComplete) return false;
-  if (prevProps.message.isEdited !== nextProps.message.isEdited) return false;
-  if (prevProps.message.timestamp !== nextProps.message.timestamp) return false;
-  if (prevProps.message.toolCalls !== nextProps.message.toolCalls) {
-    const prevCalls = prevProps.message.toolCalls;
-    const nextCalls = nextProps.message.toolCalls;
-    if (!prevCalls || !nextCalls || prevCalls.length !== nextCalls.length) return false;
-    for (let i = 0; i < prevCalls.length; i++) {
-      if (prevCalls[i].id !== nextCalls[i].id || prevCalls[i].status !== nextCalls[i].status || prevCalls[i].result !== nextCalls[i].result) {
-        return false;
-      }
-    }
-  }
-  if (prevProps.message.attachments !== nextProps.message.attachments) {
-    const prevAtt = prevProps.message.attachments;
-    const nextAtt = nextProps.message.attachments;
-    if (!prevAtt || !nextAtt || prevAtt.length !== nextAtt.length) return false;
-  }
+  if (prevProps.message !== nextProps.message) return false;
   if (prevProps.isUser !== nextProps.isUser) return false;
   if (prevProps.userAvatar !== nextProps.userAvatar) return false;
   if (prevProps.userName !== nextProps.userName) return false;
@@ -3753,7 +3733,10 @@ var ChatUI = ({
   initialInput,
   onInitialInputConsumed
 }) => {
-  const config = mergeConfig(defaultChatConfig, userConfig);
+  const config = useMemo3(
+    () => mergeConfig(defaultChatConfig, userConfig),
+    [userConfig]
+  );
   const [isMobile, setIsMobile] = useState8(false);
   const [isUserProfileOpen, setIsUserProfileOpen] = useState8(false);
   let userContext;
@@ -3978,6 +3961,62 @@ var ChatUI = ({
       `message-skeleton-${index}`
     );
   }) });
+  const renderedMessageList = useMemo3(() => {
+    if (isMessagesLoading) return renderMessageLoadingSkeleton();
+    return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+      renderSuggestions(),
+      messages.map((message, index) => {
+        const prevMessage = index > 0 ? messages[index - 1] : null;
+        const isGrouped = prevMessage !== null && prevMessage.role === message.role;
+        return /* @__PURE__ */ jsxs14("div", { className: isGrouped ? "space-y-1 -mt-2" : "space-y-2", children: [
+          /* @__PURE__ */ jsx24(
+            Message,
+            {
+              message,
+              userAvatar: user?.avatar,
+              userName: user?.name,
+              assistantAvatar: assistant?.avatar,
+              assistantName: assistant?.name,
+              showTimestamp: config.ui.showTimestamps,
+              showAvatar: config.ui.showAvatars,
+              enableCopy: config.features.enableMessageCopy,
+              enableEdit: config.features.enableMessageEditing,
+              enableRegenerate: config.features.enableRegeneration,
+              enableToolCallsDisplay: config.features.enableToolCallsDisplay,
+              compactMode: config.ui.compactMode,
+              onAction: handleMessageAction,
+              toolUsedLabel: config.labels.toolUsed,
+              thinkingLabel: config.labels.thinking,
+              isGrouped
+            }
+          ),
+          message.role === "assistant" && renderInlineSuggestions(message.id)
+        ] }, message.id);
+      })
+    ] });
+  }, [
+    isMessagesLoading,
+    messages,
+    handleSendMessage,
+    user?.avatar,
+    user?.name,
+    assistant?.avatar,
+    assistant?.name,
+    config.branding.title,
+    config.branding.subtitle,
+    config.ui.showTimestamps,
+    config.ui.showAvatars,
+    config.ui.compactMode,
+    config.features.enableMessageCopy,
+    config.features.enableMessageEditing,
+    config.features.enableRegeneration,
+    config.features.enableToolCallsDisplay,
+    config.labels.toolUsed,
+    config.labels.thinking,
+    handleMessageAction,
+    messageSuggestions,
+    suggestions
+  ]);
   const shouldShowAgentSelector = Boolean(
     config.agentSelector?.enabled && onSelectAgent && agentOptions.length > 0 && (!config.agentSelector?.hideIfSingle || agentOptions.length > 1)
   );
@@ -4038,37 +4077,7 @@ var ChatUI = ({
               viewportClassName: "p-4 overscroll-contain",
               onScrollCapture: handleScroll,
               children: /* @__PURE__ */ jsxs14("div", { className: "max-w-4xl mx-auto space-y-4 pb-4", children: [
-                isMessagesLoading ? renderMessageLoadingSkeleton() : /* @__PURE__ */ jsxs14(Fragment6, { children: [
-                  renderSuggestions(),
-                  messages.map((message, index) => {
-                    const prevMessage = index > 0 ? messages[index - 1] : null;
-                    const isGrouped = prevMessage !== null && prevMessage.role === message.role;
-                    return /* @__PURE__ */ jsxs14("div", { className: isGrouped ? "space-y-1 -mt-2" : "space-y-2", children: [
-                      /* @__PURE__ */ jsx24(
-                        Message,
-                        {
-                          message,
-                          userAvatar: user?.avatar,
-                          userName: user?.name,
-                          assistantAvatar: assistant?.avatar,
-                          assistantName: assistant?.name,
-                          showTimestamp: config.ui.showTimestamps,
-                          showAvatar: config.ui.showAvatars,
-                          enableCopy: config.features.enableMessageCopy,
-                          enableEdit: config.features.enableMessageEditing,
-                          enableRegenerate: config.features.enableRegeneration,
-                          enableToolCallsDisplay: config.features.enableToolCallsDisplay,
-                          compactMode: config.ui.compactMode,
-                          onAction: handleMessageAction,
-                          toolUsedLabel: config.labels.toolUsed,
-                          thinkingLabel: config.labels.thinking,
-                          isGrouped
-                        }
-                      ),
-                      message.role === "assistant" && renderInlineSuggestions(message.id)
-                    ] }, message.id);
-                  })
-                ] }),
+                renderedMessageList,
                 /* @__PURE__ */ jsx24("div", { ref: messagesEndRef })
               ] })
             }