feat: integrated with artifact resizable

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">
+        <ResizablePanelGroup orientation="horizontal">
-          <MessageList className="size-full" thread={thread} />
+          <ResizablePanel className="relative" defaultSize={46}>
-        </div>
+            <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>
   );
 }

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" />;

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);