diff --git a/components/chat-input.tsx b/components/chat-input.tsx
index 30e11eb..db6503b 100644
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -24,7 +24,6 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogTrigger,
 } from "@/components/ui/dialog";
 import Image from "next/image";
 
diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
new file mode 100644
index 0000000..aef8c88
--- /dev/null
+++ b/components/chat-message-display.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import type React from "react";
+import { useRef, useEffect } from "react";
+import Image from "next/image";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import ExamplePanel from "./chat-example-panel";
+import { Message } from "ai";
+import { convertToLegalXml } from "@/lib/utils";
+
+interface ChatMessageDisplayProps {
+    messages: Message[];
+    error?: Error | null;
+    setInput: (input: string) => void;
+    setFiles: (files: FileList | undefined) => void;
+    onDisplayChart: (xml: string) => void;
+    stepCounterRef: React.MutableRefObject<number>;
+}
+
+export function ChatMessageDisplay({
+    messages,
+    error,
+    setInput,
+    setFiles,
+    onDisplayChart,
+    stepCounterRef,
+}: ChatMessageDisplayProps) {
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [messages]);
+
+    const renderToolInvocation = (toolInvocation: any) => {
+        const callId = toolInvocation.toolCallId;
+
+        switch (toolInvocation.toolName) {
+            case "display_diagram": {
+                switch (toolInvocation.state) {
+                    case "partial-call": {
+                        const currentXml = toolInvocation.args?.xml || "";
+
+                        // Increment the step counter
+                        stepCounterRef.current += 1;
+
+                        // Determine whether to show details based on a simple threshold
+                        if (
+                            stepCounterRef.current >= 50 &&
+                            stepCounterRef.current % 20 === 0
+                        ) {
+                            onDisplayChart(convertToLegalXml(currentXml));
+                        }
+                        return (
+                            <div
+                                key={callId}
+                                className="mt-2 text-sm bg-blue-50 p-2 rounded border border-blue-200"
+                            >
+                                <div className="font-medium">
+                                    Generating diagram...
+                                </div>
+                                <div className="text-xs text-gray-500 mt-1">
+                                    Tool: display_diagram
+                                    <div className="mt-1 font-mono text-xs">
+                                        onDisplayChart
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    }
+                    case "call":
+                        return (
+                            <div
+                                key={callId}
+                                className="mt-2 text-sm bg-yellow-50 p-2 rounded border border-yellow-200"
+                            >
+                                <div className="font-medium">
+                                    Displaying diagram...
+                                </div>
+                                <div className="text-xs text-gray-500 mt-1">
+                                    Tool: display_diagram
+                                    <div className="mt-1 font-mono text-xs">
+                                        Args:{" "}
+                                        {JSON.stringify(
+                                            toolInvocation.args,
+                                            null,
+                                            2
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    case "result":
+                        return null;
+                }
+                break;
+            }
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <ScrollArea className="h-full pr-4">
+            {messages.length === 0 ? (
+                <ExamplePanel setInput={setInput} setFiles={setFiles} />
+            ) : (
+                messages.map((message) => (
+                    <div
+                        key={message.id}
+                        className={`mb-4 ${
+                            message.role === "user" ? "text-right" : "text-left"
+                        }`}
+                    >
+                        <div
+                            className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
+                                message.role === "user"
+                                    ? "bg-primary text-primary-foreground"
+                                    : "bg-muted text-muted-foreground"
+                            }`}
+                        >
+                            {message.parts
+                                ? message.parts.map((part, index) => {
+                                      switch (part.type) {
+                                          case "text":
+                                              return (
+                                                  <div key={index}>
+                                                      {part.text}
+                                                  </div>
+                                              );
+                                          case "tool-invocation":
+                                              return renderToolInvocation(
+                                                  part.toolInvocation
+                                              );
+                                          default:
+                                              return null;
+                                      }
+                                  })
+                                : message.content}
+                        </div>
+
+                        {message?.experimental_attachments
+                            ?.filter((attachment) =>
+                                attachment?.contentType?.startsWith("image/")
+                            )
+                            .map((attachment, index) => (
+                                <div
+                                    key={`${message.id}-${index}`}
+                                    className={`mt-2 ${
+                                        message.role === "user"
+                                            ? "text-right"
+                                            : "text-left"
+                                    }`}
+                                >
+                                    <div className="inline-block">
+                                        <Image
+                                            src={attachment.url}
+                                            width={200}
+                                            height={200}
+                                            alt={
+                                                attachment.name ??
+                                                `attachment-${index}`
+                                            }
+                                            className="rounded-md border"
+                                            style={{
+                                                objectFit: "contain",
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            ))}
+
+                        {(message as any).function_call && (
+                            <div className="mt-2 text-left">
+                                <div className="text-xs text-gray-500">
+                                    Using tool:{" "}
+                                    {(message as any).function_call.name}
+                                    ...
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                ))
+            )}
+            {error && (
+                <div className="text-red-500 text-sm mt-2">
+                    Error: {error.message}
+                </div>
+            )}
+            <div ref={messagesEndRef} />
+        </ScrollArea>
+    );
+}
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index 0b55666..59473b8 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -2,7 +2,6 @@
 
 import type React from "react";
 import { useRef, useEffect, useState } from "react";
-import Image from "next/image";
 
 import {
     Card,
@@ -11,11 +10,9 @@ import {
     CardHeader,
     CardTitle,
 } from "@/components/ui/card";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { useChat } from "@ai-sdk/react";
 import { ChatInput } from "@/components/chat-input";
-import { convertToLegalXml } from "@/lib/utils";
-import ExamplePanel from "./chat-example-panel";
+import { ChatMessageDisplay } from "./chat-message-display";
 interface ChatPanelProps {
     onDisplayChart: (xml: string) => void;
     onFetchChart: () => Promise<string>;
@@ -33,7 +30,6 @@ export default function ChatPanel({
     const stepCounterRef = useRef<number>(0);
     // Add state for file attachments
     const [files, setFiles] = useState<FileList | undefined>(undefined);
-    // Add state to control visibility of prompt examples panel
     // Add state for showing the history dialog
     const [showHistory, setShowHistory] = useState(false);
 
@@ -101,185 +97,20 @@ export default function ChatPanel({
         setShowHistory(false);
     };
 
-    // Helper function to render tool invocations
-    const renderToolInvocation = (toolInvocation: any) => {
-        const callId = toolInvocation.toolCallId;
-
-        switch (toolInvocation.toolName) {
-            case "display_diagram": {
-                switch (toolInvocation.state) {
-                    case "partial-call": {
-                        const currentXml = toolInvocation.args?.xml || "";
-
-                        // Increment the step counter
-                        stepCounterRef.current += 1;
-                        // Log the current step
-
-                        // Determine whether to show details based on a simple threshold
-                        // Rather than comparing lengths (which can cause re-renders)
-                        if (
-                            stepCounterRef.current >= 50 &&
-                            stepCounterRef.current % 20 === 0
-                        ) {
-                            onDisplayChart(convertToLegalXml(currentXml));
-                        }
-                        return (
-                            <div
-                                key={callId}
-                                className="mt-2 text-sm bg-blue-50 p-2 rounded border border-blue-200"
-                            >
-                                <div className="font-medium">
-                                    Generating diagram...
-                                </div>
-                                <div className="text-xs text-gray-500 mt-1">
-                                    Tool: display_diagram
-                                    <div className="mt-1 font-mono text-xs">
-                                        onDisplayChart
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    }
-                    case "call":
-                        return (
-                            <div
-                                key={callId}
-                                className="mt-2 text-sm bg-yellow-50 p-2 rounded border border-yellow-200"
-                            >
-                                <div className="font-medium">
-                                    Displaying diagram...
-                                </div>
-                                <div className="text-xs text-gray-500 mt-1">
-                                    Tool: display_diagram
-                                    <div className="mt-1 font-mono text-xs">
-                                        Args:{" "}
-                                        {JSON.stringify(
-                                            toolInvocation.args,
-                                            null,
-                                            2
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    case "result":
-                        return null;
-                }
-                break;
-            }
-            default:
-                return null;
-        }
-    };
-
     return (
         <Card className="h-full flex flex-col rounded-none py-0 gap-0">
             <CardHeader className="p-4 text-center">
                 <CardTitle>Next-AI-Drawio</CardTitle>
             </CardHeader>
             <CardContent className="flex-grow overflow-hidden px-2">
-                <ScrollArea className="h-full pr-4">
-                    {messages.length === 0 ? (
-                        <ExamplePanel
-                            setInput={setInput}
-                            setFiles={handleFileChange}
-                        />
-                    ) : (
-                        messages.map((message) => (
-                            <div
-                                key={message.id}
-                                className={`mb-4 ${
-                                    message.role === "user"
-                                        ? "text-right"
-                                        : "text-left"
-                                }`}
-                            >
-                                <div
-                                    className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
-                                        message.role === "user"
-                                            ? "bg-primary text-primary-foreground"
-                                            : "bg-muted text-muted-foreground"
-                                    }`}
-                                >
-                                    {/* Render message content based on parts if available */}
-                                    {message.parts
-                                        ? message.parts.map((part, index) => {
-                                              switch (part.type) {
-                                                  case "text":
-                                                      return (
-                                                          <div key={index}>
-                                                              {part.text}
-                                                          </div>
-                                                      );
-                                                  case "tool-invocation":
-                                                      return renderToolInvocation(
-                                                          part.toolInvocation
-                                                      );
-                                                  default:
-                                                      return null;
-                                              }
-                                          })
-                                        : // Fallback to simple content for older format
-                                          message.content}
-                                </div>
-
-                                {/* Display image attachments */}
-                                {message?.experimental_attachments
-                                    ?.filter((attachment) =>
-                                        attachment?.contentType?.startsWith(
-                                            "image/"
-                                        )
-                                    )
-                                    .map((attachment, index) => (
-                                        <div
-                                            key={`${message.id}-${index}`}
-                                            className={`mt-2 ${
-                                                message.role === "user"
-                                                    ? "text-right"
-                                                    : "text-left"
-                                            }`}
-                                        >
-                                            <div className="inline-block">
-                                                <Image
-                                                    src={attachment.url}
-                                                    width={200}
-                                                    height={200}
-                                                    alt={
-                                                        attachment.name ??
-                                                        `attachment-${index}`
-                                                    }
-                                                    className="rounded-md border"
-                                                    style={{
-                                                        objectFit: "contain",
-                                                    }}
-                                                />
-                                            </div>
-                                        </div>
-                                    ))}
-
-                                {/* Legacy support for function_call format */}
-                                {(message as any).function_call && (
-                                    <div className="mt-2 text-left">
-                                        <div className="text-xs text-gray-500">
-                                            Using tool:{" "}
-                                            {
-                                                (message as any).function_call
-                                                    .name
-                                            }
-                                            ...
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        ))
-                    )}
-                    {error && (
-                        <div className="text-red-500 text-sm mt-2">
-                            Error: {error.message}
-                        </div>
-                    )}
-                    <div ref={messagesEndRef} />
-                </ScrollArea>
+                <ChatMessageDisplay
+                    messages={messages}
+                    error={error}
+                    setInput={setInput}
+                    setFiles={handleFileChange}
+                    onDisplayChart={onDisplayChart}
+                    stepCounterRef={stepCounterRef}
+                />
             </CardContent>
 
             <CardFooter className="p-2">