Chat App

Install it

Source

1"use client";
2// beui.dev/components/agents/chat-app
3 
4import type { ComponentProps } from "react";
5import { AnimatedSidebarProvider } from "@/components/motion/animated-sidebar";
6import { cn } from "@/lib/utils";
7 
8export type ChatAppProps = ComponentProps<typeof AnimatedSidebarProvider> & {
9  sidebarWidth?: string;
10};
11 
12export function ChatApp({
13  children,
14  className,
15  sidebarWidth = "17rem",
16  style,
17  ...props
18}: ChatAppProps) {
19  return (
20    <AnimatedSidebarProvider
21      {...props}
22      style={{ ...style, "--sidebar-width": sidebarWidth }}
23      className={cn(
24        "min-h-0 w-full overflow-hidden rounded-2xl border border-border bg-background",
25        className,
26      )}
27    >
28      {children}
29    </AnimatedSidebarProvider>
30  );
31}

What it pulls in

npm packages

• clsx
• lucide-react
• motion
• shiki
• tailwind-merge

Files it writes

• components/agents/chat-app.tsx
• components/agents/agent-activity/index.tsx
• components/agents/ai-sidebar.tsx
• components/agents/approval-card/index.tsx
• components/agents/code-block.tsx
• components/agents/file-diff.tsx
• components/agents/image-generation.tsx
• components/agents/loading-states/thinking-shimmer.tsx
• components/agents/message.tsx
• components/agents/message-bubble.tsx
• components/agents/message-scroller.tsx
• components/agents/prompt-input.tsx
• components/agents/streaming-response.tsx
• components/agents/todo-list.tsx
• components/agents/tool-approval.tsx
• components/agents/tool-result.tsx
• components/motion/animated-sidebar.tsx
• lib/utils.ts
• components/agents/agent-activity/activity-row.tsx
• components/agents/agent-activity/types.ts
• components/agents/agent-disclosure.tsx
• lib/ease.ts
• components/motion/popover-morph.tsx
• components/agents/approval-card/types.ts
• components/motion/action-swap-roll.tsx
• components/motion/button/index.tsx
• components/motion/checkbox.tsx
• components/motion/input.tsx
• components/motion/radio.tsx
• components/agents/agent-code.tsx
• lib/hooks/use-hover-capable.ts
• components/motion/text-shimmer.tsx
• components/agents/message-context.tsx
• components/motion/preview-rail.tsx
• components/motion/select.tsx
• components/agents/citations.tsx
• components/motion/shared-layout-bg.tsx
• components/motion/popover-position.ts
• components/motion/action-swap.tsx
• components/motion/button/base.tsx