@copilotz/chat-ui 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -880,7 +880,6 @@ var arePropsEqual = (prevProps, nextProps) => {
   if (prevProps.markdown !== nextProps.markdown) return false;
   if (prevProps.isExpanded !== nextProps.isExpanded) return false;
   if (prevProps.onToggleExpanded !== nextProps.onToggleExpanded) return false;
-  if (prevProps.isGrouped !== nextProps.isGrouped) return false;
   if (prevProps.assistantAvatar !== nextProps.assistantAvatar) return false;
   return true;
 };
@@ -911,7 +910,6 @@ var Message = (0, import_react2.memo)(({
   markdown,
   isExpanded = false,
   onToggleExpanded,
-  isGrouped = false,
   agentOptions = []
 }) => {
   const [isEditing, setIsEditing] = (0, import_react2.useState)(false);
@@ -984,7 +982,7 @@ var Message = (0, import_react2.memo)(({
       onMouseEnter: () => setShowActions(true),
       onMouseLeave: () => setShowActions(false),
       children: [
-        !isGrouped && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `flex gap-3 ${messageIsUser ? "flex-row-reverse" : "flex-row"} w-full mb-1`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `flex gap-3 ${messageIsUser ? "flex-row-reverse" : "flex-row"} w-full mb-1`, children: [
           showAvatar && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `flex-shrink-0 ${compactMode ? "mt-1" : "mt-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Avatar, { className: compactMode ? "h-6 w-6" : "h-8 w-8", children: messageIsUser ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarImage, { src: userAvatar, alt: userName }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarFallback, { className: "bg-primary text-primary-foreground", children: userName.charAt(0).toUpperCase() })
@@ -4997,6 +4995,81 @@ function getMessageSpeakerKey(message) {
   }
   return message.role;
 }
+var mergeToolCalls = (activities) => {
+  const merged = /* @__PURE__ */ new Map();
+  for (const activity of activities) {
+    if (!Array.isArray(activity.toolCalls)) continue;
+    for (const toolCall of activity.toolCalls) {
+      const key = toolCall.id || `${toolCall.name}:${JSON.stringify(toolCall.arguments ?? {})}`;
+      merged.set(key, toolCall);
+    }
+  }
+  return merged.size > 0 ? Array.from(merged.values()) : void 0;
+};
+var mergeReasoning = (activities) => {
+  const segments = activities.map((activity) => activity.reasoning?.trim()).filter((value) => Boolean(value));
+  if (segments.length === 0) return void 0;
+  return segments.filter((segment, index) => index === 0 || segment !== segments[index - 1]).join("\n\n");
+};
+var mergeGroupActivity = (messages) => {
+  const activities = messages.map((message) => message.activity).filter((activity) => Boolean(activity));
+  if (activities.length === 0) return void 0;
+  const lastActivity = activities[activities.length - 1];
+  const mergedReasoning = mergeReasoning(activities);
+  const mergedToolCalls = mergeToolCalls(activities);
+  return {
+    ...lastActivity,
+    ...mergedReasoning ? { reasoning: mergedReasoning } : {},
+    ...mergedToolCalls ? { toolCalls: mergedToolCalls } : {}
+  };
+};
+var mergeMessageGroup = (messages) => {
+  const firstMessage = messages[0];
+  const lastMessage = messages[messages.length - 1];
+  const content = messages.map((message) => message.content.trim()).filter((value) => value.length > 0).join("\n\n");
+  const attachments = messages.flatMap((message) => message.attachments ?? []);
+  return {
+    ...lastMessage,
+    id: lastMessage.id,
+    content,
+    timestamp: firstMessage.timestamp,
+    attachments: attachments.length > 0 ? attachments : void 0,
+    isStreaming: lastMessage.isStreaming,
+    isComplete: lastMessage.isComplete,
+    isEdited: messages.some((message) => message.isEdited),
+    originalContent: void 0,
+    editedAt: lastMessage.editedAt,
+    activity: mergeGroupActivity(messages),
+    senderName: lastMessage.senderName ?? firstMessage.senderName,
+    senderAgentId: lastMessage.senderAgentId ?? firstMessage.senderAgentId,
+    metadata: lastMessage.metadata
+  };
+};
+var groupMessagesForRender = (messages) => {
+  if (messages.length === 0) return [];
+  const groups = [];
+  let currentGroup = [messages[0]];
+  const flushGroup = () => {
+    const mergedMessage = mergeMessageGroup(currentGroup);
+    groups.push({
+      id: mergedMessage.id,
+      message: mergedMessage,
+      suggestionMessageId: currentGroup[currentGroup.length - 1].id
+    });
+  };
+  for (let index = 1; index < messages.length; index++) {
+    const previous = currentGroup[currentGroup.length - 1];
+    const next = messages[index];
+    if (previous.role === next.role && getMessageSpeakerKey(previous) === getMessageSpeakerKey(next)) {
+      currentGroup.push(next);
+      continue;
+    }
+    flushGroup();
+    currentGroup = [next];
+  }
+  flushGroup();
+  return groups;
+};
 var ChatUI = ({
   messages = [],
   threads = [],
@@ -5090,8 +5163,9 @@ var ChatUI = ({
   }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = (0, import_react9.useState)(false);
   const [isCustomVisible, setIsCustomVisible] = (0, import_react9.useState)(false);
+  const groupedMessages = (0, import_react9.useMemo)(() => groupMessagesForRender(messages), [messages]);
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
-    count: messages.length,
+    count: groupedMessages.length,
     getScrollElement: () => scrollAreaRef.current,
     estimateSize: () => 100,
     overscan: 5
@@ -5129,20 +5203,20 @@ var ChatUI = ({
   }, [state.showSidebar, isMobile, config.customComponent]);
   const prevMessageCountRef = (0, import_react9.useRef)(0);
   (0, import_react9.useEffect)(() => {
-    if (messages.length === 0) {
+    if (groupedMessages.length === 0) {
       prevMessageCountRef.current = 0;
       return;
     }
     if (prependSnapshotRef.current) {
-      prevMessageCountRef.current = messages.length;
+      prevMessageCountRef.current = groupedMessages.length;
       return;
     }
     const wasEmpty = prevMessageCountRef.current === 0;
-    prevMessageCountRef.current = messages.length;
+    prevMessageCountRef.current = groupedMessages.length;
     if (wasEmpty) {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
+          virtualizer.scrollToIndex(groupedMessages.length - 1, { align: "end" });
         });
       });
       return;
@@ -5157,7 +5231,7 @@ var ChatUI = ({
         viewport.scrollTop = viewport.scrollHeight;
       }
     });
-  }, [messages, state.isAtBottom, virtualizer]);
+  }, [groupedMessages, state.isAtBottom, virtualizer]);
   (0, import_react9.useEffect)(() => {
     virtualizer.measure();
   }, [expandedMessageIds, virtualizer]);
@@ -5167,13 +5241,13 @@ var ChatUI = ({
   (0, import_react9.useEffect)(() => {
     const snapshot = prependSnapshotRef.current;
     if (!snapshot) return;
-    if (messages.length <= snapshot.messageCount) {
+    if (groupedMessages.length <= snapshot.messageCount) {
       if (!isLoadingOlderMessages) {
         prependSnapshotRef.current = null;
       }
       return;
     }
-    if ((messages[0]?.id ?? null) === snapshot.firstMessageId) {
+    if ((groupedMessages[0]?.id ?? null) === snapshot.firstMessageId) {
       if (!isLoadingOlderMessages) {
         prependSnapshotRef.current = null;
       }
@@ -5189,20 +5263,20 @@ var ChatUI = ({
         prependSnapshotRef.current = null;
       });
     });
-  }, [messages, isLoadingOlderMessages, virtualizer]);
+  }, [groupedMessages, isLoadingOlderMessages, virtualizer]);
   const requestOlderMessages = (0, import_react9.useCallback)(() => {
     if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages) return;
     const viewport = scrollAreaRef.current;
     prependSnapshotRef.current = viewport ? {
       scrollHeight: viewport.scrollHeight,
       scrollTop: viewport.scrollTop,
-      firstMessageId: messages[0]?.id ?? null,
-      messageCount: messages.length
+      firstMessageId: groupedMessages[0]?.id ?? null,
+      messageCount: groupedMessages.length
     } : null;
     onLoadOlderMessages();
-  }, [hasMoreMessagesBefore, isLoadingOlderMessages, messages, onLoadOlderMessages]);
+  }, [groupedMessages, hasMoreMessagesBefore, isLoadingOlderMessages, onLoadOlderMessages]);
   (0, import_react9.useEffect)(() => {
-    const validMessageIds = new Set(messages.map((message) => message.id));
+    const validMessageIds = new Set(groupedMessages.map((group) => group.id));
     setExpandedMessageIds((prev) => {
       const activeIds = Object.keys(prev);
       const staleIds = activeIds.filter((messageId) => !validMessageIds.has(messageId));
@@ -5215,7 +5289,7 @@ var ChatUI = ({
       });
       return next;
     });
-  }, [messages]);
+  }, [groupedMessages]);
   const handleScroll = (0, import_react9.useCallback)((e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
@@ -5317,7 +5391,7 @@ var ChatUI = ({
   }, [config?.customComponent?.component, closeSidebar, isMobile]);
   const SuggestionIconComponents = [import_lucide_react14.MessageSquare, import_lucide_react14.Lightbulb, import_lucide_react14.Zap, import_lucide_react14.HelpCircle];
   const renderSuggestions = () => {
-    if (messages.length > 0 || !suggestions.length) return null;
+    if (groupedMessages.length > 0 || !suggestions.length) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col items-center justify-center min-h-[60vh] py-8 px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-center mb-8", children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 mb-4 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Sparkles, { className: "w-7 h-7 text-primary" }) }),
@@ -5482,7 +5556,7 @@ var ChatUI = ({
               onScrollCapture: handleScroll,
               style: { contain: "strict" },
               children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "max-w-4xl mx-auto pb-4", children: [
-                messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                groupedMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5491,7 +5565,7 @@ var ChatUI = ({
                     children: config.labels.loadOlderMessages
                   }
                 ) : null }),
-                isMessagesLoading ? renderMessageLoadingSkeleton() : messages.length === 0 ? renderSuggestions() : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                isMessagesLoading ? renderMessageLoadingSkeleton() : groupedMessages.length === 0 ? renderSuggestions() : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "div",
                   {
                     style: {
@@ -5500,9 +5574,8 @@ var ChatUI = ({
                       position: "relative"
                     },
                     children: virtualizer.getVirtualItems().map((virtualRow) => {
-                      const message = messages[virtualRow.index];
-                      const prevMessage = virtualRow.index > 0 ? messages[virtualRow.index - 1] : null;
-                      const isGrouped = prevMessage !== null && prevMessage.role === message.role && getMessageSpeakerKey(prevMessage) === getMessageSpeakerKey(message);
+                      const group = groupedMessages[virtualRow.index];
+                      const message = group.message;
                       return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                         "div",
                         {
@@ -5515,20 +5588,19 @@ var ChatUI = ({
                             width: "100%",
                             transform: `translateY(${virtualRow.start}px)`
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: virtualRow.index === 0 ? "" : isGrouped ? "pt-2" : "pt-4", children: [
+                          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: virtualRow.index === 0 ? "" : "pt-4", children: [
                             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                               Message,
                               {
                                 message,
                                 ...messageProps,
-                                isGrouped,
                                 isExpanded: Boolean(expandedMessageIds[message.id])
                               }
                             ),
-                            message.role === "assistant" && renderInlineSuggestions(message.id)
+                            message.role === "assistant" && renderInlineSuggestions(group.suggestionMessageId)
                           ] })
                         },
-                        message.id
+                        group.id
                       );
                     })
                   }