fix: fix message grouping issues

frontend/src/components/workspace/input-box.tsx

@@ -1,10 +1,5 @@
 import type { ChatStatus } from "ai";
-import {
+import { CheckIcon, LightbulbIcon, LightbulbOffIcon } from "lucide-react";
-  BoxIcon,
-  CheckIcon,
-  LightbulbIcon,
-  LightbulbOffIcon,
-} from "lucide-react";
 import { useCallback, useMemo, useState, type ComponentProps } from "react";
 
 import {

frontend/src/components/workspace/messages/message-list.tsx

@@ -36,43 +36,39 @@ export function MessageList({
       className={cn("flex size-full flex-col justify-center", className)}
     >
       <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-10 pt-12">
-        {groupMessages(
+        {groupMessages(thread.messages, (group) => {
-          thread.messages,
+          if (group.type === "human" || group.type === "assistant") {
-          (group) => {
-            if (group.type === "human" || group.type === "assistant") {
-              return (
-                <MessageListItem
-                  key={group.id}
-                  message={group.messages[0]!}
-                  isLoading={thread.isLoading}
-                />
-              );
-            }
-            if (group.type === "assistant:present-files") {
-              const files = [];
-              for (const message of group.messages) {
-                if (hasPresentFiles(message)) {
-                  files.push(...extractPresentFilesFromMessage(message));
-                }
-              }
-              return (
-                <ArtifactFileList
-                  key={group.id}
-                  files={files}
-                  threadId={threadId}
-                />
-              );
-            }
             return (
-              <MessageGroup
+              <MessageListItem
                 key={group.id}
-                messages={group.messages}
+                message={group.messages[0]!}
                 isLoading={thread.isLoading}
               />
             );
-          },
+          }
-          thread.isLoading,
+          if (group.type === "assistant:present-files") {
-        )}
+            const files = [];
+            for (const message of group.messages) {
+              if (hasPresentFiles(message)) {
+                files.push(...extractPresentFilesFromMessage(message));
+              }
+            }
+            return (
+              <ArtifactFileList
+                key={group.id}
+                files={files}
+                threadId={threadId}
+              />
+            );
+          }
+          return (
+            <MessageGroup
+              key={"group-" + group.id}
+              messages={group.messages}
+              isLoading={thread.isLoading}
+            />
+          );
+        })}
         {thread.isLoading && <StreamingIndicator className="my-4" />}
         <div className="h-40" />
       </ConversationContent>

frontend/src/core/messages/utils.ts

@@ -23,7 +23,6 @@ type MessageGroup =
 export function groupMessages<T>(
   messages: Message[],
   mapper: (group: MessageGroup) => T,
-  isLoading = false,
 ): T[] {
   if (messages.length === 0) {
     return [];
@@ -86,25 +85,28 @@ export function groupMessages<T>(
     }
   }
 
-  if (!isLoading) {
+  // if (!isLoading) {
-    const lastGroup: MessageGroup | undefined = groups[groups.length - 1];
+  //   const lastGroup: MessageGroup | undefined = groups[groups.length - 1];
-    if (
+  //   if (
-      lastGroup?.type === "assistant:processing" &&
+  //     lastGroup?.type === "assistant:processing" &&
-      lastGroup.messages.length > 0
+  //     lastGroup.messages.length > 0
-    ) {
+  //   ) {
-      const reasoningContent = extractReasoningContentFromMessage(
+  //     const lastMessage = lastGroup.messages[lastGroup.messages.length - 1]!;
-        lastGroup.messages[lastGroup.messages.length - 1]!,
+  //     const reasoningContent = extractReasoningContentFromMessage(lastMessage);
-      );
+  //     const content = extractContentFromMessage(lastMessage);
-      const content = extractContentFromMessage(
+  //     if (reasoningContent && !content) {
-        lastGroup.messages[lastGroup.messages.length - 1]!,
+  //       lastGroup.messages.pop();
-      );
+  //       if (lastGroup.messages.length === 0) {
-      if (reasoningContent && !content) {
+  //         groups.pop();
-        const group = groups.pop()!;
+  //       }
-        group.type = "assistant";
+  //       groups.push({
-        groups.push(group);
+  //         id: lastMessage.id,
-      }
+  //         type: "assistant",
-    }
+  //         messages: [lastMessage],
-  }
+  //       });
+  //     }
+  //   }
+  // }
 
   const resultsOfGroups: T[] = [];
   for (const group of groups) {
@@ -162,6 +164,13 @@ export function extractReasoningContentFromMessage(message: Message) {
   return null;
 }
 
+export function removeReasoningContentFromMessage(message: Message) {
+  if (message.type !== "ai" || !message.additional_kwargs) {
+    return;
+  }
+  delete message.additional_kwargs.reasoning_content;
+}
+
 export function extractURLFromImageURLContent(
   content:
     | string