{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "chat-04",
	"type": "registry:block",
	"description": "A chat with multiple agents support.",
	"dependencies": ["ai", "@ai-sdk/react", "@ai-sdk/openai"],
	"registryDependencies": [
		"card",
		"badge",
		"breadcrumb",
		"separator",
		"sidebar",
		"tooltip",
		"button",
		"avatar",
		"dropdown-menu",
		"@simple-ai/chat-input",
		"@simple-ai/chat-message-area",
		"@simple-ai/chat-message",
		"@simple-ai/tool-invocation",
		"@simple-ai/chat-suggestions",
		"@simple-ai/reasoning",
		"@simple-ai/messages",
		"@simple-ai/models",
		"@simple-ai/agent-respond",
		"@simple-ai/ai-utils",
		"@simple-ai/agents-tools-registry"
	],
	"files": [
		{
			"path": "./src/registry/blocks/chat-04/page.tsx",
			"content": "import { ChatMain } from \"@/registry/blocks/chat-04/components/chat/chat-main\";\nimport { AppLayout } from \"@/registry/blocks/chat-04/components/layout/app-layout\";\n\nexport default function Page() {\n\treturn (\n\t\t<AppLayout sidebarChildren={null}>\n\t\t\t<ChatMain />\n\t\t</AppLayout>\n\t);\n}\n",
			"type": "registry:page",
			"target": "app/chat/page.tsx"
		},
		{
			"path": "./src/registry/blocks/chat-04/route.ts",
			"content": "import { agentExecute, agentRoute } from \"@/registry/ai/agent-route-respond\";\nimport { agents } from \"@/registry/ai/agents/agents-registry\";\n\nexport async function POST(req: Request) {\n\tconst { messages, mentions } = await req.json();\n\tconst agentId = agentRoute(mentions);\n\tconst agent = agents[agentId];\n\treturn agentExecute({ agentId, agent, messages });\n}\n",
			"type": "registry:page",
			"target": "app/api/ai/agents/route.ts"
		},
		{
			"path": "./src/registry/blocks/chat-04/lib/config.ts",
			"content": "import { HomeIcon, SettingsIcon } from \"lucide-react\";\n\nexport const config: {\n\tmainRoutes: {\n\t\tpath: string;\n\t\tmatchExpression: RegExp;\n\t\tlabel: string;\n\t\ticon: React.ComponentType;\n\t}[];\n} = {\n\tmainRoutes: [\n\t\t{\n\t\t\tpath: \"/\",\n\t\t\tlabel: \"Home\",\n\t\t\tmatchExpression: /^\\/$/,\n\t\t\ticon: HomeIcon,\n\t\t},\n\t\t{\n\t\t\tpath: \"/settings\",\n\t\t\tlabel: \"Settings\",\n\t\t\tmatchExpression: /^\\/settings$/,\n\t\t\ticon: SettingsIcon,\n\t\t},\n\t],\n};\n",
			"type": "registry:lib"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/layout/app-layout.tsx",
			"content": "import { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\";\nimport { AppSidebar } from \"@/registry/blocks/chat-04/components/layout/app-sidebar\";\n\nexport function AppLayout({\n\tchildren,\n\tsidebarChildren,\n}: {\n\tchildren: React.ReactNode;\n\tsidebarChildren: React.ReactNode;\n}) {\n\treturn (\n\t\t<SidebarProvider defaultOpen={false}>\n\t\t\t<AppSidebar>{sidebarChildren}</AppSidebar>\n\t\t\t<div className=\"h-svh relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:p-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:pl-2 md:peer-data-[variant=inset]:pl-0\">\n\t\t\t\t<SidebarInset className=\"overflow-y-auto rounded-xl shadow\">\n\t\t\t\t\t{children}\n\t\t\t\t</SidebarInset>\n\t\t\t</div>\n\t\t</SidebarProvider>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/layout/app-layout-skeleton.tsx",
			"content": "import { SidebarInset } from \"@/components/ui/sidebar\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\n\nfunction SkeletonSidebar() {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"bg-sidebar text-sidebar-foreground flex h-svh w-64 flex-col\"\n\t\t\tdata-slot=\"sidebar\"\n\t\t>\n\t\t\t<div className=\"flex flex-col gap-2 p-4\">\n\t\t\t\t<Skeleton className=\"h-8 w-32 mb-4\" />\n\t\t\t\t<Skeleton className=\"h-8 w-24 mb-2\" />\n\t\t\t\t<Skeleton className=\"h-8 w-24 mb-2\" />\n\t\t\t\t<Skeleton className=\"h-8 w-24 mb-2\" />\n\t\t\t</div>\n\t\t\t<div className=\"flex-1 flex flex-col gap-2 p-4\">\n\t\t\t\t{Array.from({ length: 5 }).map((_, i) => (\n\t\t\t\t\t<Skeleton\n\t\t\t\t\t\tkey={`skeleton-item-${\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton items\n\t\t\t\t\t\t\ti\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tclassName=\"h-8 w-full mb-2\"\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div className=\"p-4 border-t border-sidebar-border\">\n\t\t\t\t<Skeleton className=\"h-8 w-20\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function AppLayoutSkeleton() {\n\treturn (\n\t\t<div className=\"flex h-svh w-full overflow-hidden bg-sidebar\">\n\t\t\t<div data-variant=\"inset\" className=\"group peer\">\n\t\t\t\t<SkeletonSidebar />\n\t\t\t</div>\n\t\t\t<div className=\"h-svh relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:p-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:pl-2 md:peer-data-[variant=inset]:pl-0\">\n\t\t\t\t<SidebarInset className=\"overflow-y-auto rounded-xl shadow\">\n\t\t\t\t\t<div className=\"p-4 w-full h-full\">\n\t\t\t\t\t\t<Skeleton className=\"h-full w-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t</SidebarInset>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/layout/app-header.tsx",
			"content": "import { Separator } from \"@/components/ui/separator\";\nimport { SidebarTrigger } from \"@/components/ui/sidebar\";\nimport { cn } from \"@/lib/utils\";\n\nexport function AppHeader({ children }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<header className=\"group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear\">\n\t\t\t<div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n\t\t\t\t<SidebarTrigger className=\"-ml-1 md:hidden\" />\n\t\t\t\t<AppHeaderSeparator className=\"md:hidden\" />\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</header>\n\t);\n}\n\nexport function AppHeaderIcon({\n\tchildren,\n\tclassName,\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"flex justify-center items-center [&_svg]:size-5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n\nexport function AppHeaderTitle({\n\tchildren,\n\tclassName,\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span className={cn(\"text-base font-medium\", className)}>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n\nexport function AppHeaderSeparator({ className }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<Separator\n\t\t\torientation=\"vertical\"\n\t\t\tclassName={cn(\"mx-2 data-[orientation=vertical]:h-4\", className)}\n\t\t/>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/layout/app-sidebar.tsx",
			"content": "\"use client\";\n\nimport { MessageCircle, PanelLeft, Search } from \"lucide-react\";\nimport { usePathname } from \"next/navigation\";\nimport type { ComponentProps } from \"react\";\nimport {\n\tSidebar,\n\tSidebarContent,\n\tSidebarFooter,\n\tSidebarHeader,\n\tSidebarMenu,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n\tSidebarSeparator,\n\tuseSidebar,\n} from \"@/components/ui/sidebar\";\nimport { cn } from \"@/lib/utils\";\nimport { AppMainNav } from \"@/registry/blocks/chat-04/components/layout/app-main-nav\";\nimport { AppSecondaryNav } from \"@/registry/blocks/chat-04/components/layout/app-secondary-nav\";\nimport { AppUserNav } from \"@/registry/blocks/chat-04/components/layout/app-user-nav\";\n\nexport function AppSidebar({ children }: ComponentProps<typeof Sidebar>) {\n\tconst { toggleSidebar } = useSidebar();\n\tconst pathname = usePathname();\n\n\treturn (\n\t\t<Sidebar variant=\"inset\" collapsible=\"icon\">\n\t\t\t<SidebarHeader>\n\t\t\t\t<SidebarMenu>\n\t\t\t\t\t<SidebarMenuItem className=\"flex items-center justify-between\">\n\t\t\t\t\t\t<div className=\"flex size-7 group-data-[collapsible=icon]:hidden items-center justify-center rounded-lg bg-primary\">\n\t\t\t\t\t\t\t<MessageCircle className=\"h-5 w-5 text-primary-foreground\" />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<SidebarMenuButton\n\t\t\t\t\t\t\tclassName=\"w-fit [&>svg]:size-5 md:flex justify-center hidden\"\n\t\t\t\t\t\t\ttooltip=\"Toggle Sidebar\"\n\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t\tonClick={toggleSidebar}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PanelLeft />\n\t\t\t\t\t\t\t<span className=\"sr-only\">Toggle Sidebar</span>\n\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t</SidebarMenu>\n\t\t\t\t<SidebarMenu>\n\t\t\t\t\t<SidebarMenuItem className=\"flex items-center justify-between\">\n\t\t\t\t\t\t<SidebarMenuButton\n\t\t\t\t\t\t\ttooltip=\"Search\"\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"group-data-[collapsible=icon]:bg-sidebar\",\n\t\t\t\t\t\t\t\t\"group-data-[collapsible=icon]:hover:bg-sidebar-accent\",\n\t\t\t\t\t\t\t\t\"group-data-[collapsible=icon]:shadow-none\",\n\t\t\t\t\t\t\t\t\"group-data-[collapsible=icon]:hover:shadow-none\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Search />\n\t\t\t\t\t\t\t<span>Search</span>\n\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t</SidebarMenu>\n\t\t\t</SidebarHeader>\n\t\t\t<SidebarContent className=\"overflow-x-hidden\">\n\t\t\t\t<SidebarSeparator />\n\t\t\t\t<AppMainNav currentPath={pathname} />\n\t\t\t\t<SidebarSeparator className=\"group-data-[collapsible=icon]:hidden\" />\n\t\t\t\t{children}\n\t\t\t\t<AppSecondaryNav currentPath={pathname} className=\"mt-auto\" />\n\t\t\t</SidebarContent>\n\t\t\t<SidebarFooter>\n\t\t\t\t<AppUserNav />\n\t\t\t</SidebarFooter>\n\t\t</Sidebar>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/layout/app-main-nav.tsx",
			"content": "import Link from \"next/link\";\nimport type { ComponentProps } from \"react\";\nimport {\n\tSidebarGroup,\n\tSidebarGroupContent,\n\tSidebarMenu,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n} from \"@/components/ui/sidebar\";\nimport { config } from \"@/registry/blocks/chat-04/lib/config\";\n\nexport function AppMainNav({\n\tcurrentPath,\n\t...props\n}: ComponentProps<typeof SidebarGroup> & { currentPath: string }) {\n\treturn (\n\t\t<SidebarGroup {...props}>\n\t\t\t<SidebarGroupContent>\n\t\t\t\t<SidebarMenu>\n\t\t\t\t\t{config.mainRoutes.map((item, index) => (\n\t\t\t\t\t\t<SidebarMenuItem key={`${item.path}-${index}`}>\n\t\t\t\t\t\t\t<SidebarMenuButton\n\t\t\t\t\t\t\t\ttooltip={item.label}\n\t\t\t\t\t\t\t\tisActive={item.matchExpression.test(\n\t\t\t\t\t\t\t\t\tcurrentPath,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Link href={item.path}>\n\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t<span>{item.label}</span>\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</SidebarMenu>\n\t\t\t</SidebarGroupContent>\n\t\t</SidebarGroup>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/layout/app-secondary-nav.tsx",
			"content": "import { Settings, Sun } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport {\n\tSidebarGroup,\n\tSidebarGroupContent,\n\tSidebarMenu,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n} from \"@/components/ui/sidebar\";\n\nexport function AppSecondaryNav({\n\tcurrentPath,\n\t...props\n}: ComponentProps<typeof SidebarGroup> & {\n\tcurrentPath: string;\n}) {\n\treturn (\n\t\t<SidebarGroup {...props}>\n\t\t\t<SidebarGroupContent>\n\t\t\t\t<SidebarMenu>\n\t\t\t\t\t<SidebarMenuItem>\n\t\t\t\t\t\t<SidebarMenuButton size=\"sm\" tooltip=\"Settings\">\n\t\t\t\t\t\t\t<Settings />\n\t\t\t\t\t\t\t<span>Settings</span>\n\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t<SidebarMenuItem>\n\t\t\t\t\t\t<SidebarMenuButton size=\"sm\" tooltip=\"Theme\">\n\t\t\t\t\t\t\t<Sun />\n\t\t\t\t\t\t\t<span>Theme</span>\n\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t</SidebarMenu>\n\t\t\t</SidebarGroupContent>\n\t\t</SidebarGroup>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/layout/app-user-nav.tsx",
			"content": "\"use client\";\n\nimport { ChevronsUpDown, LogOut } from \"lucide-react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n\tSidebarMenu,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n\tuseSidebar,\n} from \"@/components/ui/sidebar\";\n\nconst MOCK_USER = {\n\tname: \"John Doe\",\n\temail: \"john.doe@example.com\",\n\timage: \"/avatar-1.png\",\n\torganization: {\n\t\tname: \"Acme Inc.\",\n\t},\n};\n\nexport function AppUserNav() {\n\tconst { isMobile } = useSidebar();\n\n\tconst user = MOCK_USER;\n\tconst activeOrganization = user.organization;\n\treturn (\n\t\t<SidebarMenu>\n\t\t\t<SidebarMenuItem>\n\t\t\t\t<DropdownMenu>\n\t\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t\t<SidebarMenuButton\n\t\t\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\t\t\tclassName=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Avatar className=\"h-8 w-8 rounded-lg\">\n\t\t\t\t\t\t\t\t<AvatarImage\n\t\t\t\t\t\t\t\t\tsrc={user.image ?? undefined}\n\t\t\t\t\t\t\t\t\talt={user.name}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<AvatarFallback className=\"rounded-lg\">\n\t\t\t\t\t\t\t\t\t{user.name?.substring(0, 2).toUpperCase()}\n\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t\t\t<div className=\"grid flex-1 text-left text-sm leading-tight\">\n\t\t\t\t\t\t\t\t<span className=\"truncate font-semibold\">\n\t\t\t\t\t\t\t\t\t{user.name}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span className=\"truncate text-xs\">\n\t\t\t\t\t\t\t\t\t{user.email}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ChevronsUpDown className=\"ml-auto size-4\" />\n\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t<DropdownMenuContent\n\t\t\t\t\t\tclassName=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n\t\t\t\t\t\tside={isMobile ? \"bottom\" : \"right\"}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tsideOffset={4}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownMenuLabel className=\"p-0 font-normal\">\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n\t\t\t\t\t\t\t\t<Avatar className=\"h-8 w-8 rounded-lg\">\n\t\t\t\t\t\t\t\t\t<AvatarImage\n\t\t\t\t\t\t\t\t\t\tsrc={user.image ?? undefined}\n\t\t\t\t\t\t\t\t\t\talt={user.name}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<AvatarFallback className=\"rounded-lg\">\n\t\t\t\t\t\t\t\t\t\t{user.name\n\t\t\t\t\t\t\t\t\t\t\t?.substring(0, 2)\n\t\t\t\t\t\t\t\t\t\t\t.toUpperCase()}\n\t\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t\t\t\t<div className=\"grid flex-1 text-left text-sm leading-tight\">\n\t\t\t\t\t\t\t\t\t<span className=\"truncate font-semibold\">\n\t\t\t\t\t\t\t\t\t\t{user.name}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"truncate text-xs\">\n\t\t\t\t\t\t\t\t\t\t{user.email}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</DropdownMenuLabel>\n\t\t\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t\t\t<div className=\"px-2 py-2 flex items-center justify-start gap-2\">\n\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-muted-foreground\">\n\t\t\t\t\t\t\t\tOrganization:\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span className=\"truncate font-semibold text-sm\">\n\t\t\t\t\t\t\t\t{activeOrganization?.name}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t\t\t<LogOut className=\"mr-2 size-4\" />\n\t\t\t\t\t\t\tLog out\n\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t</DropdownMenu>\n\t\t\t</SidebarMenuItem>\n\t\t</SidebarMenu>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/chat/chat-main.tsx",
			"content": "\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport { DefaultChatTransport } from \"ai\";\nimport type { AIUIMessage } from \"@/registry/ai/messages\";\nimport { ChatContent } from \"@/registry/blocks/chat-04/components/chat/chat-content\";\nimport { ChatHeader } from \"@/registry/blocks/chat-04/components/chat/chat-header\";\n\nexport function ChatMain() {\n\tconst { messages, sendMessage, status, stop, setMessages } =\n\t\tuseChat<AIUIMessage>({\n\t\t\tid: \"chat-04\",\n\t\t\ttransport: new DefaultChatTransport({\n\t\t\t\tapi: \"/api/ai/agents\",\n\t\t\t}),\n\t\t});\n\n\treturn (\n\t\t<div className=\"flex-1 flex flex-col h-full\">\n\t\t\t<ChatHeader setMessages={setMessages} />\n\t\t\t<ChatContent\n\t\t\t\tmessages={messages}\n\t\t\t\tsendMessage={sendMessage}\n\t\t\t\tstatus={status}\n\t\t\t\tstop={stop}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/chat/chat-header.tsx",
			"content": "\"use client\";\n\nimport type { useChat } from \"@ai-sdk/react\";\nimport { MessagesSquare, RotateCcw, Users } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport type { AIUIMessage } from \"@/registry/ai/messages\";\nimport {\n\tAppHeader,\n\tAppHeaderIcon,\n\tAppHeaderSeparator,\n} from \"@/registry/blocks/chat-04/components/layout/app-header\";\n\nexport function ChatHeader({\n\tsetMessages,\n}: {\n\tsetMessages: ReturnType<typeof useChat<AIUIMessage>>[\"setMessages\"];\n}) {\n\tconst connectionStatus = \"connected\";\n\treturn (\n\t\t<AppHeader>\n\t\t\t<AppHeaderIcon className=\"hidden md:flex\">\n\t\t\t\t<MessagesSquare />\n\t\t\t</AppHeaderIcon>\n\t\t\t<AppHeaderSeparator className=\"hidden md:block\" />\n\n\t\t\t<ChatHeaderRoomName>Dev Team</ChatHeaderRoomName>\n\t\t\t<div className=\"ml-auto flex items-center\">\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\tonClick={() => setMessages([])}\n\t\t\t\t\tclassName=\"h-7 w-7 mr-2\"\n\t\t\t\t\ttitle=\"Reset chat messages\"\n\t\t\t\t>\n\t\t\t\t\t<RotateCcw className=\"h-4 w-4\" />\n\t\t\t\t</Button>\n\n\t\t\t\t<ChatHeaderRoomMemberCount>{10}</ChatHeaderRoomMemberCount>\n\t\t\t\t<AppHeaderSeparator />\n\t\t\t\t<Tooltip>\n\t\t\t\t\t<TooltipTrigger>\n\t\t\t\t\t\t<ChatRoomConnectionStatus\n\t\t\t\t\t\t\tconnectionStatus={connectionStatus}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t<TooltipContent side=\"bottom\">\n\t\t\t\t\t\t<p className=\"capitalize\">{connectionStatus}</p>\n\t\t\t\t\t</TooltipContent>\n\t\t\t\t</Tooltip>\n\t\t\t</div>\n\t\t</AppHeader>\n\t);\n}\n\nfunction ChatHeaderRoomName({\n\tclassName,\n\t...props\n}: ComponentProps<typeof Button>) {\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"sm\"\n\t\t\tclassName={cn(\"text-base h-7\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ChatHeaderRoomMemberCount({\n\tclassName,\n\tchildren,\n\t...props\n}: ComponentProps<typeof Button> & { children: number }) {\n\treturn (\n\t\t<Button variant=\"ghost\" size=\"sm\" className=\"gap-2 h-7\" {...props}>\n\t\t\t<Users className=\"h-4 w-4\" />\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\nfunction ChatRoomConnectionStatus({\n\tclassName,\n\tconnectionStatus,\n\t...props\n}: ComponentProps<\"div\"> & {\n\tconnectionStatus: \"connected\" | \"connecting\" | \"disconnected\";\n}) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"h-2 w-2 rounded-full transition-colors\",\n\t\t\t\t{\n\t\t\t\t\t\"bg-green-500\": connectionStatus === \"connected\",\n\t\t\t\t\t\"bg-yellow-500\": connectionStatus === \"connecting\",\n\t\t\t\t\t\"bg-orange-500\": connectionStatus === \"disconnected\",\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n",
			"type": "registry:component"
		},
		{
			"path": "./src/registry/blocks/chat-04/components/chat/chat-content.tsx",
			"content": "\"use client\";\n\nimport type { useChat } from \"@ai-sdk/react\";\nimport { ThumbsUp } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { agentsList } from \"@/registry/ai/agents/agents-registry\";\nimport { uiMessageToText } from \"@/registry/ai/ai-utils\";\nimport type { AIUIMessage } from \"@/registry/ai/messages\";\nimport {\n\tChatInput,\n\tChatInputEditor,\n\tChatInputGroupAddon,\n\tChatInputMention,\n\tChatInputSubmitButton,\n\tcreateMentionConfig,\n\tuseChatInput,\n} from \"@/registry/ui/chat-input\";\nimport {\n\tChatMessage,\n\tChatMessageAction,\n\tChatMessageActionCopy,\n\tChatMessageActions,\n\tChatMessageAuthor,\n\tChatMessageAvatar,\n\tChatMessageAvatarAssistantIcon,\n\tChatMessageAvatarFallback,\n\tChatMessageAvatarImage,\n\tChatMessageAvatarUserIcon,\n\tChatMessageContainer,\n\tChatMessageContent,\n\tChatMessageHeader,\n\tChatMessageMarkdown,\n\tChatMessageTimestamp,\n} from \"@/registry/ui/chat-message\";\nimport {\n\tChatMessageArea,\n\tChatMessageAreaContent,\n\tChatMessageAreaScrollButton,\n} from \"@/registry/ui/chat-message-area\";\nimport {\n\tChatSuggestion,\n\tChatSuggestions,\n\tChatSuggestionsContent,\n\tChatSuggestionsHeader,\n\tChatSuggestionsTitle,\n} from \"@/registry/ui/chat-suggestions\";\nimport { Reasoning } from \"@/registry/ui/reasoning\";\nimport {\n\tToolInvocation,\n\tToolInvocationContentCollapsible,\n\tToolInvocationHeader,\n\tToolInvocationName,\n\tToolInvocationRawData,\n} from \"@/registry/ui/tool-invocation\";\n\nexport const DEFAULT_CHAT_SUGGESTIONS = [\n\t\"Hello! Can you help me with a coding question?\",\n\t\"Tell me about your capabilities and what you can do\",\n\t\"I need help organizing my project management workflow\",\n\t\"Can you explain a complex topic in simple terms?\",\n];\n\nfunction NoChatMessages({\n\tonSuggestionClick,\n}: {\n\tonSuggestionClick: (suggestion: string) => void;\n}) {\n\treturn (\n\t\t<div className=\"flex flex-col gap-2 p-2 justify-end items-center h-full\">\n\t\t\t<ChatSuggestions>\n\t\t\t\t<ChatSuggestionsHeader>\n\t\t\t\t\t<ChatSuggestionsTitle>\n\t\t\t\t\t\tTry these prompts:\n\t\t\t\t\t</ChatSuggestionsTitle>\n\t\t\t\t</ChatSuggestionsHeader>\n\t\t\t\t<ChatSuggestionsContent>\n\t\t\t\t\t{DEFAULT_CHAT_SUGGESTIONS.map((suggestion) => (\n\t\t\t\t\t\t<ChatSuggestion\n\t\t\t\t\t\t\tkey={suggestion}\n\t\t\t\t\t\t\tonClick={() => onSuggestionClick(suggestion)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{suggestion}\n\t\t\t\t\t\t</ChatSuggestion>\n\t\t\t\t\t))}\n\t\t\t\t</ChatSuggestionsContent>\n\t\t\t</ChatSuggestions>\n\t\t</div>\n\t);\n}\n\ntype ReturnOfUseChat = ReturnType<typeof useChat<AIUIMessage>>;\n\nexport function ChatContent({\n\tclassName,\n\tmessages,\n\tsendMessage,\n\tstatus,\n\tstop,\n\t...props\n}: ComponentPropsWithoutRef<\"div\"> & {\n\tmessages: ReturnOfUseChat[\"messages\"];\n\tsendMessage: ReturnOfUseChat[\"sendMessage\"];\n\tstatus: ReturnOfUseChat[\"status\"];\n\tstop: ReturnOfUseChat[\"stop\"];\n}) {\n\tconst isLoading = status === \"streaming\" || status === \"submitted\";\n\n\t// Use the new hook with custom onSubmit\n\tconst { value, onChange, handleSubmit, mentionConfigs } = useChatInput({\n\t\tmentions: {\n\t\t\tagents: createMentionConfig({\n\t\t\t\ttype: \"agents\",\n\t\t\t\ttrigger: \"@\",\n\t\t\t\titems: agentsList,\n\t\t\t}),\n\t\t},\n\t\tonSubmit: (parsedValue) => {\n\t\t\tsendMessage(\n\t\t\t\t{\n\t\t\t\t\trole: \"user\",\n\t\t\t\t\tparts: [{ type: \"text\", text: parsedValue.content }],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tbody: {\n\t\t\t\t\t\tmentions: parsedValue.agents,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t);\n\t\t},\n\t});\n\n\treturn (\n\t\t<div className=\"flex-1 flex flex-col overflow-y-auto\" {...props}>\n\t\t\t<ChatMessageArea>\n\t\t\t\t<ChatMessageAreaContent className=\"pt-6\">\n\t\t\t\t\t{messages.length === 0 ? (\n\t\t\t\t\t\t<NoChatMessages\n\t\t\t\t\t\t\tonSuggestionClick={(suggestion) => {\n\t\t\t\t\t\t\t\tsendMessage({\n\t\t\t\t\t\t\t\t\trole: \"user\",\n\t\t\t\t\t\t\t\t\tparts: [{ type: \"text\", text: suggestion }],\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tmessages.map((message) => {\n\t\t\t\t\t\t\tconst userName =\n\t\t\t\t\t\t\t\tmessage.role === \"user\"\n\t\t\t\t\t\t\t\t\t? \"You\"\n\t\t\t\t\t\t\t\t\t: (message.metadata?.agent?.name ??\n\t\t\t\t\t\t\t\t\t\t\"Assistant\");\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ChatMessage key={message.id}>\n\t\t\t\t\t\t\t\t\t<ChatMessageActions>\n\t\t\t\t\t\t\t\t\t\t<ChatMessageActionCopy\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tnavigator.clipboard.writeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\tuiMessageToText(message),\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<ChatMessageAction label=\"Like\">\n\t\t\t\t\t\t\t\t\t\t\t<ThumbsUp className=\"size-4\" />\n\t\t\t\t\t\t\t\t\t\t</ChatMessageAction>\n\t\t\t\t\t\t\t\t\t</ChatMessageActions>\n\t\t\t\t\t\t\t\t\t<ChatMessageAvatar>\n\t\t\t\t\t\t\t\t\t\t{message.role === \"user\" ? (\n\t\t\t\t\t\t\t\t\t\t\t<ChatMessageAvatarUserIcon />\n\t\t\t\t\t\t\t\t\t\t) : !message.metadata?.agent?.image ? (\n\t\t\t\t\t\t\t\t\t\t\t<ChatMessageAvatarAssistantIcon />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t<ChatMessageAvatarImage\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tmessage.metadata?.agent\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.image\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<ChatMessageAvatarFallback>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{message.metadata?.agent?.name\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.charAt(0)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.toUpperCase()}\n\t\t\t\t\t\t\t\t\t\t\t\t</ChatMessageAvatarFallback>\n\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</ChatMessageAvatar>\n\n\t\t\t\t\t\t\t\t\t<ChatMessageContainer>\n\t\t\t\t\t\t\t\t\t\t<ChatMessageHeader>\n\t\t\t\t\t\t\t\t\t\t\t<ChatMessageAuthor>\n\t\t\t\t\t\t\t\t\t\t\t\t{userName}\n\t\t\t\t\t\t\t\t\t\t\t</ChatMessageAuthor>\n\t\t\t\t\t\t\t\t\t\t\t<ChatMessageTimestamp\n\t\t\t\t\t\t\t\t\t\t\t\tcreatedAt={new Date()}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</ChatMessageHeader>\n\n\t\t\t\t\t\t\t\t\t\t<ChatMessageContent>\n\t\t\t\t\t\t\t\t\t\t\t{message.parts.map(\n\t\t\t\t\t\t\t\t\t\t\t\t(part, index) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (part.type === \"text\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ChatMessageMarkdown\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`${message.id}-text-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontent={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpart.text\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpart.type ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"reasoning\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Reasoning\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`reasoning-${message.id}-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontent={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpart.text\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisLastPart={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.parts\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.length -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpart.type.startsWith(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"tool-\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"toolCallId\" in\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpart\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!(\"state\" in part)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst toolPart =\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpart as {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype: string;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolCallId: string;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstate:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t| \"input-streaming\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t| \"input-available\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t| \"output-available\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t| \"output-error\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinput?: unknown;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toutput?: unknown;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrorText?: string;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst hasInput =\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.input !=\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.input !==\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tundefined;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst hasOutput =\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.output !=\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.output !==\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tundefined;\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst toolName =\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.type.slice(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ToolInvocation\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.toolCallId\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ToolInvocationHeader>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ToolInvocationName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.state\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisError={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.state ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"output-error\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ToolInvocationHeader>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{(hasInput ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasOutput ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.errorText) && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ToolInvocationContentCollapsible>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{hasInput && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ToolInvocationRawData\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.input\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Arguments\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{toolPart.errorText && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ToolInvocationRawData\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terror: toolPart.errorText,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Error\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{hasOutput && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ToolInvocationRawData\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoolPart.output\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Result\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ToolInvocationContentCollapsible>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ToolInvocation>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</ChatMessageContent>\n\t\t\t\t\t\t\t\t\t</ChatMessageContainer>\n\t\t\t\t\t\t\t\t</ChatMessage>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})\n\t\t\t\t\t)}\n\t\t\t\t</ChatMessageAreaContent>\n\t\t\t\t<ChatMessageAreaScrollButton alignment=\"center\" />\n\t\t\t</ChatMessageArea>\n\t\t\t<div className=\"px-2 py-4 max-w-2xl mx-auto w-full\">\n\t\t\t\t<ChatInput\n\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\tisStreaming={isLoading}\n\t\t\t\t\tonStop={stop}\n\t\t\t\t>\n\t\t\t\t\t<ChatInputMention\n\t\t\t\t\t\ttype={mentionConfigs.agents.type}\n\t\t\t\t\t\ttrigger={mentionConfigs.agents.trigger}\n\t\t\t\t\t\titems={mentionConfigs.agents.items}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(item) => (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Avatar className=\"h-6 w-6\">\n\t\t\t\t\t\t\t\t\t<AvatarImage\n\t\t\t\t\t\t\t\t\t\t//src={item.image ?? \"/placeholder.jpg\"}\n\t\t\t\t\t\t\t\t\t\talt={item.name}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<AvatarFallback>\n\t\t\t\t\t\t\t\t\t\t{item.name[0].toUpperCase()}\n\t\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t\t</Avatar>\n\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"text-sm font-medium truncate max-w-[120px]\"\n\t\t\t\t\t\t\t\t\ttitle={item.name}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.name}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<Badge variant=\"outline\" className=\"ml-auto\">\n\t\t\t\t\t\t\t\t\tAgent\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ChatInputMention>\n\t\t\t\t\t<ChatInputEditor\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\tplaceholder=\"Type @ for agents\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ChatInputGroupAddon align=\"block-end\">\n\t\t\t\t\t\t<ChatInputSubmitButton className=\"ml-auto\" />\n\t\t\t\t\t</ChatInputGroupAddon>\n\t\t\t\t</ChatInput>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:component"
		}
	],
	"envVars": {
		"OPENAI_API_KEY": ""
	},
	"docs": "Get an OpenAI API key from https://platform.openai.com/ and add it to the environment variables file and run the dev server. \n\nLearn more about how to use the Vercel AI SDK https://ai-sdk.dev/docs/introduction.",
	"categories": ["chat"]
}