From ca70e2dcf7c473062faef6eeac4c0147e0babf87 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Fri, 16 Jan 2026 21:55:31 +0800
Subject: [PATCH] feat: integrated with artifact resizable

---
 .../app/workspace/chats/[thread_id]/page.tsx  | 36 +++++++++++--------
 .../workspace/message-list/message-group.tsx  | 22 ++++++++++++
 .../workspace/workspace-container.tsx         | 18 ----------
 3 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index 0cc15bf..f9d0c4c 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -4,13 +4,13 @@ import { useParams, useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { BreadcrumbItem } from "@/components/ui/breadcrumb";
+import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/message-list/message-list";
 import {
   WorkspaceContainer,
   WorkspaceBody,
   WorkspaceHeader,
-  WorkspaceFooter,
 } from "@/components/workspace/workspace-container";
 import { useLocalSettings } from "@/core/settings";
 import { type AgentThread } from "@/core/threads";
@@ -61,21 +61,27 @@ export default function ChatPage() {
         </BreadcrumbItem>
       </WorkspaceHeader>
       <WorkspaceBody>
-        <div className="flex size-full justify-center">
-          <MessageList className="size-full" thread={thread} />
-        </div>
+        <ResizablePanelGroup orientation="horizontal">
+          <ResizablePanel className="relative" defaultSize={46}>
+            <div className="flex size-full justify-center">
+              <MessageList className="size-full" thread={thread} />
+            </div>
+            <div className="absolute right-0 bottom-0 left-0 flex justify-center px-4">
+              <InputBox
+                className="w-full max-w-(--container-width-md)"
+                autoFocus={isNewThread}
+                status={thread.isLoading ? "streaming" : "ready"}
+                context={threadContext}
+                onContextChange={setThreadContext}
+                onSubmit={handleSubmit}
+                onStop={handleStop}
+              />
+            </div>
+          </ResizablePanel>
+          {/* <ResizableHandle />
+          <ResizablePanel defaultSize={64}></ResizablePanel> */}
+        </ResizablePanelGroup>
       </WorkspaceBody>
-      <WorkspaceFooter>
-        <InputBox
-          className="max-w-(--container-width-md)"
-          autoFocus={isNewThread}
-          status={thread.isLoading ? "streaming" : "ready"}
-          context={threadContext}
-          onContextChange={setThreadContext}
-          onSubmit={handleSubmit}
-          onStop={handleStop}
-        />
-      </WorkspaceFooter>
     </WorkspaceContainer>
   );
 }
diff --git a/frontend/src/components/workspace/message-list/message-group.tsx b/frontend/src/components/workspace/message-list/message-group.tsx
index dcc7ae1..3c849b9 100644
--- a/frontend/src/components/workspace/message-list/message-group.tsx
+++ b/frontend/src/components/workspace/message-list/message-group.tsx
@@ -1,6 +1,7 @@
 import type { Message } from "@langchain/langgraph-sdk";
 import {
   BookOpenTextIcon,
+  FileTextIcon,
   FolderOpenIcon,
   GlobeIcon,
   LightbulbIcon,
@@ -219,6 +220,24 @@ function ToolCall({
         )}
       </ChainOfThoughtStep>
     );
+  } else if (name === "present_files") {
+    return (
+      <ChainOfThoughtStep
+        key={id}
+        label={`Present file${(args as { filepaths: string[] }).filepaths.length > 1 ? "s" : ""}`}
+        icon={FileTextIcon}
+      >
+        <ChainOfThoughtSearchResult>
+          {(args as { filepaths: string[] }).filepaths.map(
+            (filepath: string) => (
+              <ChainOfThoughtSearchResult key={filepath}>
+                {filepath}
+              </ChainOfThoughtSearchResult>
+            ),
+          )}
+        </ChainOfThoughtSearchResult>
+      </ChainOfThoughtStep>
+    );
   } else {
     const description: string | undefined = (args as { description: string })
       ?.description;
@@ -324,6 +343,9 @@ function describeStep(step: CoTStep | undefined): {
     } else if (step.name === "bash") {
       label = "Execute command";
       icon = <SquareTerminalIcon className="size-4" />;
+    } else if (step.name === "present_files") {
+      label = `Present file${(step.args as { filepaths: string[] }).filepaths.length > 1 ? "s" : ""}`;
+      icon = <FileTextIcon className="size-4" />;
     } else {
       label = `Call tool "${step.name}"`;
       icon = <WrenchIcon className="size-4" />;
diff --git a/frontend/src/components/workspace/workspace-container.tsx b/frontend/src/components/workspace/workspace-container.tsx
index bd15631..71898ef 100644
--- a/frontend/src/components/workspace/workspace-container.tsx
+++ b/frontend/src/components/workspace/workspace-container.tsx
@@ -122,24 +122,6 @@ export function WorkspaceBody({
   );
 }
 
-export function WorkspaceFooter({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"footer">) {
-  return (
-    <footer
-      className={cn(
-        "absolute right-0 bottom-0 left-0 z-30 flex justify-center",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </footer>
-  );
-}
-
 function nameOfSegment(segment: string | undefined) {
   if (!segment) return "Home";
   return segment[0]?.toUpperCase() + segment.slice(1);