From 4ef371dca8f4b516f62f315e6747715bd8e39c14 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 16 May 2026 01:05:21 +0000
Subject: [PATCH] refactor: extract assistant UI template with sidebar and
 sections

Agent-Logs-Url: https://github.com/Abdullakala/voltagent/sessions/1cd85bc0-ef67-4f3e-9540-1f32dfbad913

Co-authored-by: Abdullakala <122768967+Abdullakala@users.noreply.github.com>
---
 examples/with-assistant-ui/app/assistant.tsx  | 45 +----------------
 .../assistant-ui/assistant-ui-template.tsx    | 50 +++++++++++++++++++
 2 files changed, 52 insertions(+), 43 deletions(-)
 create mode 100644 examples/with-assistant-ui/components/assistant-ui/assistant-ui-template.tsx

diff --git a/examples/with-assistant-ui/app/assistant.tsx b/examples/with-assistant-ui/app/assistant.tsx
index 981121757..4ea29b396 100644
--- a/examples/with-assistant-ui/app/assistant.tsx
+++ b/examples/with-assistant-ui/app/assistant.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import { Thread } from "@/components/assistant-ui/thread";
-import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { Separator } from "@/components/ui/separator";
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { AssistantUiTemplate } from "@/components/assistant-ui/assistant-ui-template";
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { AssistantChatTransport, useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
@@ -24,37 +13,7 @@ export const Assistant = () => {
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
-      <SidebarProvider>
-        <div className="flex h-dvh w-full pr-0.5">
-          <ThreadListSidebar />
-          <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-              <SidebarTrigger />
-              <Separator orientation="vertical" className="mr-2 h-4" />
-              <Breadcrumb>
-                <BreadcrumbList>
-                  <BreadcrumbItem className="hidden md:block">
-                    <BreadcrumbLink
-                      href="https://www.assistant-ui.com/docs/getting-started"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Build Your Own ChatGPT UX
-                    </BreadcrumbLink>
-                  </BreadcrumbItem>
-                  <BreadcrumbSeparator className="hidden md:block" />
-                  <BreadcrumbItem>
-                    <BreadcrumbPage>Starter Template</BreadcrumbPage>
-                  </BreadcrumbItem>
-                </BreadcrumbList>
-              </Breadcrumb>
-            </header>
-            <div className="flex-1 overflow-hidden">
-              <Thread />
-            </div>
-          </SidebarInset>
-        </div>
-      </SidebarProvider>
+      <AssistantUiTemplate />
     </AssistantRuntimeProvider>
   );
 };
diff --git a/examples/with-assistant-ui/components/assistant-ui/assistant-ui-template.tsx b/examples/with-assistant-ui/components/assistant-ui/assistant-ui-template.tsx
new file mode 100644
index 000000000..c2efa21c8
--- /dev/null
+++ b/examples/with-assistant-ui/components/assistant-ui/assistant-ui-template.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+
+export const AssistantUiTemplate = () => {
+  return (
+    <SidebarProvider>
+      <div className="flex h-dvh w-full pr-0.5">
+        <ThreadListSidebar />
+        <SidebarInset>
+          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink
+                    href="https://www.assistant-ui.com/docs/getting-started"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Build Your Own ChatGPT UX
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Starter Template</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </header>
+          <div className="flex-1 overflow-hidden">
+            <Thread />
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  );
+};