20 | {children}
21 |
22 |
17 | {children}
18 |
19 | );
20 |
21 | export type ActionProps = ComponentProps{tooltip}
58 |div]:max-w-[80%]',
20 | className,
21 | )}
22 | {...props}
23 | />
24 | );
25 |
26 | export type MessageContentProps = HTMLAttributes;
27 |
28 | export const MessageContent = ({
29 | children,
30 | className,
31 | ...props
32 | }: MessageContentProps) => (
33 | & {
47 | src: string;
48 | name?: string;
49 | };
50 |
51 | export const MessageAvatar = ({
52 | src,
53 | name,
54 | className,
55 | ...props
56 | }: MessageAvatarProps) => (
57 |
61 | {name?.slice(0, 2) || 'ME'}
63 |
64 | );
65 |
--------------------------------------------------------------------------------
/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function ScrollArea({
9 | className,
10 | children,
11 | ...props
12 | }: React.ComponentProps) {
13 | return (
14 |
19 |
23 | {children}
24 |
25 |
28 | )
29 | }
30 |
31 | function ScrollBar({
32 | className,
33 | orientation = "vertical",
34 | ...props
35 | }: React.ComponentProps) {
36 | return (
37 |
50 |
55 | )
56 | }
57 |
58 | export { ScrollArea, ScrollBar }
59 |
--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function TooltipProvider({
9 | delayDuration = 0,
10 | ...props
11 | }: React.ComponentProps) {
12 | return (
13 | ) {
24 | return (
25 |
26 |
28 | )
29 | }
30 |
31 | function TooltipTrigger({
32 | ...props
33 | }: React.ComponentProps) {
34 | return ) {
43 | return (
44 |
45 |
54 | {children}
55 |
57 |
58 | )
59 | }
60 |
61 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
62 |
--------------------------------------------------------------------------------
/components/ai-elements/source.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { BookIcon, ChevronDownIcon } from 'lucide-react';
4 | import type { ComponentProps } from 'react';
5 | import {
6 | Collapsible,
7 | CollapsibleContent,
8 | CollapsibleTrigger,
9 | } from '@/components/ui/collapsible';
10 | import { cn } from '@/lib/utils';
11 |
12 | export type SourcesProps = ComponentProps<'div'>;
13 |
14 | export const Sources = ({ className, ...props }: SourcesProps) => (
15 | & {
22 | count: number;
23 | };
24 |
25 | export const SourcesTrigger = ({
26 | className,
27 | count,
28 | children,
29 | ...props
30 | }: SourcesTriggerProps) => (
31 |
32 | {children ?? (
33 | <>
34 |
39 | );
40 |
41 | export type SourcesContentProps = ComponentProps;
42 |
43 | export const SourcesContent = ({
44 | className,
45 | ...props
46 | }: SourcesContentProps) => (
47 | & {
46 | asChild?: boolean
47 | }) {
48 | const Comp = asChild ? Slot : "button"
49 |
50 | return (
51 | & {
82 | size?: number;
83 | };
84 |
85 | export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
86 | ;
39 |
40 | export const Task = ({
41 | defaultOpen = true,
42 | className,
43 | ...props
44 | }: TaskProps) => (
45 | & {
56 | title: string;
57 | };
58 |
59 | export const TaskTrigger = ({
60 | children,
61 | className,
62 | title,
63 | ...props
64 | }: TaskTriggerProps) => (
65 |
66 | {children ?? (
67 |
74 | );
75 |
76 | export type TaskContentProps = ComponentProps;
77 |
78 | export const TaskContent = ({
79 | children,
80 | className,
81 | ...props
82 | }: TaskContentProps) => (
83 |
90 |
94 | );
95 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## AI Elements — Next.js AI chat UI
2 |
3 | This is a modern chat UI built with Next.js App Router and the AI SDK. It streams model responses with reasoning and sources, supports web search, and lets users switch models.
4 |
5 | ### Features
6 | - **Streaming responses** with the AI SDK `streamText`
7 | - **Reasoning and sources** panes (toggleable in the UI)
8 | - **Model picker** (e.g. `openai/gpt-4o`, `deepseek/deepseek-r1`)
9 | - **Web search** toggle that routes to `perplexity/sonar`
10 | - **Dark/light theme** with system preference
11 |
12 | ### Tech stack
13 | - **Next.js 15** (App Router)
14 | - **React 19**
15 | - **AI SDK 5** (`ai`, `@ai-sdk/react`)
16 | - **Radix UI** + small UI primitives in `components/ui`
17 |
18 | ---
19 |
20 | ## Quickstart
21 |
22 | ### 1) Prerequisites
23 | - Node.js 18.17+ (Node 20+ recommended)
24 | - npm, yarn, pnpm, or bun
25 |
26 | ### 2) Install dependencies
27 | ```bash
28 | pnpm install
29 | # or: npm install / yarn / bun install
30 | ```
31 |
32 | ### 3) Configure environment variables
33 | Create a local env file and set the keys you plan to use.
34 | ```bash
35 | cp .env.example .env.local
36 | ```
37 |
38 | You can run via an AI Gateway (recommended) or connect directly to providers.
39 |
40 | #### Option A: AI Gateway (recommended)
41 | Set these variables:
42 |
43 | ```bash
44 | AI_GATEWAY_URL= # e.g. your AI Gateway base URL
45 | AI_GATEWAY_API_KEY=
46 | ```
47 |
48 | Notes:
49 | - The app uses model IDs like `openai/gpt-4o`, `deepseek/deepseek-r1`, and `perplexity/sonar`.
50 | - Ensure your gateway is configured to route these model IDs to the corresponding providers.
51 |
52 | #### Option B: Direct provider keys
53 | Set the keys for the models you intend to use:
54 |
55 | ```bash
56 | OPENAI_API_KEY=
57 | DEEPSEEK_API_KEY=
58 | PERPLEXITY_API_KEY=
59 | # Optional advanced overrides if needed:
60 | # OPENAI_BASE_URL=
61 | # DEEPSEEK_API_BASE=
62 | # PERPLEXITY_BASE_URL=
63 | ```
64 |
65 | Security tips:
66 | - Do not prefix server-only secrets with `NEXT_PUBLIC_`.
67 | - Keep real secrets out of git. Use `.env.local` for local dev; it’s gitignored.
68 | - If any secret was committed previously (e.g. in `.env`), rotate it.
69 |
70 | ### 4) Start the app
71 | ```bash
72 | pnpm dev
73 | # or: npm run dev / yarn dev / bun dev
74 | ```
75 | Open `http://localhost:3000`.
76 |
77 | ---
78 |
79 | ## Scripts
80 | ```bash
81 | pnpm dev # start dev server (Turbopack)
82 | pnpm build # production build
83 | pnpm start # start production server
84 | pnpm lint # run ESLint
85 | ```
86 |
87 | ---
88 |
89 | ## How it works
90 | - **Client**: `components/ai-chat.tsx` uses `useChat` from `@ai-sdk/react`. It lets users select a model and toggle web search. Submissions are sent to the API with `{ model, webSearch }`.
91 | - **Server**: `app/api/chat/route.ts` calls `streamText` and streams tokens back. When web search is on, it uses the `perplexity/sonar` model; otherwise it uses the selected model. The response includes reasoning and sources, which the UI renders.
92 |
93 | You can add more models by editing the `models` array in `components/ai-chat.tsx`.
94 |
95 | ---
96 |
97 | ## Deployment
98 | - Deploy on Vercel or any Node host. Ensure the same env vars are set in the hosting environment.
99 |
100 | ---
101 |
102 | ## Troubleshooting
103 | - 401 or 403 errors: check that your `AI_GATEWAY_API_KEY` or provider API keys are set and valid.
104 | - Model not found: ensure the gateway or provider supports the model ID you selected.
105 | - No streaming: verify your host supports streaming responses and that the route isn’t buffered by a proxy.
106 |
107 | ---
108 |
109 | ## License
110 | MIT (or your preferred license)
111 |
112 |
--------------------------------------------------------------------------------
/components/ai-elements/code-block.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { CheckIcon, CopyIcon } from 'lucide-react';
4 | import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
5 | import { createContext, useContext, useState } from 'react';
6 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
7 | import {
8 | oneDark,
9 | oneLight,
10 | } from 'react-syntax-highlighter/dist/esm/styles/prism';
11 | import { Button } from '@/components/ui/button';
12 | import { cn } from '@/lib/utils';
13 |
14 | type CodeBlockContextType = {
15 | code: string;
16 | };
17 |
18 | const CodeBlockContext = createContext({
19 | code: '',
20 | });
21 |
22 | export type CodeBlockProps = HTMLAttributes & {
23 | code: string;
24 | language: string;
25 | showLineNumbers?: boolean;
26 | children?: ReactNode;
27 | };
28 |
29 | export const CodeBlock = ({
30 | code,
31 | language,
32 | showLineNumbers = false,
33 | className,
34 | children,
35 | ...props
36 | }: CodeBlockProps) => (
37 |
38 |
100 | );
101 |
102 | export type CodeBlockCopyButtonProps = ComponentProps & {
103 | onCopy?: () => void;
104 | onError?: (error: Error) => void;
105 | timeout?: number;
106 | };
107 |
108 | export const CodeBlockCopyButton = ({
109 | onCopy,
110 | onError,
111 | timeout = 2000,
112 | children,
113 | className,
114 | ...props
115 | }: CodeBlockCopyButtonProps) => {
116 | const [isCopied, setIsCopied] = useState(false);
117 | const { code } = useContext(CodeBlockContext);
118 |
119 | const copyToClipboard = async () => {
120 | if (typeof window === 'undefined' || !navigator.clipboard.writeText) {
121 | onError?.(new Error('Clipboard API not available'));
122 | return;
123 | }
124 |
125 | try {
126 | await navigator.clipboard.writeText(code);
127 | setIsCopied(true);
128 | onCopy?.();
129 | setTimeout(() => setIsCopied(false), timeout);
130 | } catch (error) {
131 | onError?.(error as Error);
132 | }
133 | };
134 |
135 | const Icon = isCopied ? CheckIcon : CopyIcon;
136 |
137 | return (
138 |
147 | );
148 | };
149 |
--------------------------------------------------------------------------------
/components/ai-elements/tool.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import {
4 | CheckCircleIcon,
5 | ChevronDownIcon,
6 | CircleIcon,
7 | ClockIcon,
8 | WrenchIcon,
9 | XCircleIcon,
10 | } from 'lucide-react';
11 | import type { ComponentProps, ReactNode } from 'react';
12 | import { Badge } from '@/components/ui/badge';
13 | import {
14 | Collapsible,
15 | CollapsibleContent,
16 | CollapsibleTrigger,
17 | } from '@/components/ui/collapsible';
18 | import { cn } from '@/lib/utils';
19 | import type { ToolUIPart } from 'ai';
20 | import { CodeBlock } from './code-block';
21 |
22 | export type ToolProps = ComponentProps;
23 |
24 | export const Tool = ({ className, ...props }: ToolProps) => (
25 |
54 | {icons[status]}
55 | {labels[status]}
56 |
57 | );
58 | };
59 |
60 | export const ToolHeader = ({
61 | className,
62 | type,
63 | state,
64 | ...props
65 | }: ToolHeaderProps) => (
66 |
73 |
80 | );
81 |
82 | export type ToolContentProps = ComponentProps;
83 |
84 | export const ToolContent = ({ className, ...props }: ToolContentProps) => (
85 | (null);
23 |
24 | const useReasoning = () => {
25 | const context = useContext(ReasoningContext);
26 | if (!context) {
27 | throw new Error('Reasoning components must be used within Reasoning');
28 | }
29 | return context;
30 | };
31 |
32 | export type ReasoningProps = ComponentProps & {
33 | isStreaming?: boolean;
34 | open?: boolean;
35 | defaultOpen?: boolean;
36 | onOpenChange?: (open: boolean) => void;
37 | duration?: number;
38 | };
39 |
40 | export const Reasoning = memo(
41 | ({
42 | className,
43 | isStreaming = false,
44 | open,
45 | defaultOpen = false,
46 | onOpenChange,
47 | duration: durationProp,
48 | children,
49 | ...props
50 | }: ReasoningProps) => {
51 | const [isOpen, setIsOpen] = useControllableState({
52 | prop: open,
53 | defaultProp: defaultOpen,
54 | onChange: onOpenChange,
55 | });
56 | const [duration, setDuration] = useControllableState({
57 | prop: durationProp,
58 | defaultProp: 0,
59 | });
60 |
61 | const [hasAutoClosedRef, setHasAutoClosedRef] = useState(false);
62 | const [startTime, setStartTime] = useState(null);
63 |
64 | // Track duration when streaming starts and ends
65 | useEffect(() => {
66 | if (isStreaming) {
67 | if (startTime === null) {
68 | setStartTime(Date.now());
69 | }
70 | } else if (startTime !== null) {
71 | setDuration(Math.round((Date.now() - startTime) / 1000));
72 | setStartTime(null);
73 | }
74 | }, [isStreaming, startTime, setDuration]);
75 |
76 | // Auto-open when streaming starts, auto-close when streaming ends (once only)
77 | useEffect(() => {
78 | if (isStreaming && !isOpen) {
79 | setIsOpen(true);
80 | } else if (!isStreaming && isOpen && !defaultOpen && !hasAutoClosedRef) {
81 | // Add a small delay before closing to allow user to see the content
82 | const timer = setTimeout(() => {
83 | setIsOpen(false);
84 | setHasAutoClosedRef(true);
85 | }, 1000);
86 | return () => clearTimeout(timer);
87 | }
88 | }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosedRef]);
89 |
90 | const handleOpenChange = (open: boolean) => {
91 | setIsOpen(open);
92 | };
93 |
94 | return (
95 |
98 |
104 | {children}
105 |
106 |
107 | );
108 | },
109 | );
110 |
111 | export type ReasoningTriggerProps = ComponentProps<
112 | typeof CollapsibleTrigger
113 | > & {
114 | title?: string;
115 | };
116 |
117 | export const ReasoningTrigger = memo(
118 | ({
119 | className,
120 | title = 'Reasoning',
121 | children,
122 | ...props
123 | }: ReasoningTriggerProps) => {
124 | const { isStreaming, isOpen, duration } = useReasoning();
125 |
126 | return (
127 |
134 | {children ?? (
135 | <>
136 |
151 | );
152 | },
153 | );
154 |
155 | export type ReasoningContentProps = ComponentProps<
156 | typeof CollapsibleContent
157 | > & {
158 | children: string;
159 | };
160 |
161 | export const ReasoningContent = memo(
162 | ({ className, children, ...props }: ReasoningContentProps) => (
163 |
171 | {children}
172 |
173 | ),
174 | );
175 |
176 | Reasoning.displayName = 'Reasoning';
177 | ReasoningTrigger.displayName = 'ReasoningTrigger';
178 | ReasoningContent.displayName = 'ReasoningContent';
179 |
--------------------------------------------------------------------------------
/components/ai-elements/branch.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
4 | import type { ComponentProps, HTMLAttributes, ReactElement } from 'react';
5 | import { createContext, useContext, useEffect, useState } from 'react';
6 | import { Button } from '@/components/ui/button';
7 | import { cn } from '@/lib/utils';
8 | import type { UIMessage } from 'ai';
9 |
10 | type BranchContextType = {
11 | currentBranch: number;
12 | totalBranches: number;
13 | goToPrevious: () => void;
14 | goToNext: () => void;
15 | branches: ReactElement[];
16 | setBranches: (branches: ReactElement[]) => void;
17 | };
18 |
19 | const BranchContext = createContext(null);
20 |
21 | const useBranch = () => {
22 | const context = useContext(BranchContext);
23 |
24 | if (!context) {
25 | throw new Error('Branch components must be used within Branch');
26 | }
27 |
28 | return context;
29 | };
30 |
31 | export type BranchProps = HTMLAttributes & {
32 | defaultBranch?: number;
33 | onBranchChange?: (branchIndex: number) => void;
34 | };
35 |
36 | export const Branch = ({
37 | defaultBranch = 0,
38 | onBranchChange,
39 | className,
40 | ...props
41 | }: BranchProps) => {
42 | const [currentBranch, setCurrentBranch] = useState(defaultBranch);
43 | const [branches, setBranches] = useState([]);
44 |
45 | const handleBranchChange = (newBranch: number) => {
46 | setCurrentBranch(newBranch);
47 | onBranchChange?.(newBranch);
48 | };
49 |
50 | const goToPrevious = () => {
51 | const newBranch =
52 | currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
53 | handleBranchChange(newBranch);
54 | };
55 |
56 | const goToNext = () => {
57 | const newBranch =
58 | currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
59 | handleBranchChange(newBranch);
60 | };
61 |
62 | const contextValue: BranchContextType = {
63 | currentBranch,
64 | totalBranches: branches.length,
65 | goToPrevious,
66 | goToNext,
67 | branches,
68 | setBranches,
69 | };
70 |
71 | return (
72 |
73 |
42 |
44 | );
45 |
46 | export type MessageAvatarProps = ComponentProps{children}
43 | Used {count} sources
35 |
93 |
95 | );
96 |
--------------------------------------------------------------------------------
/components/ai-elements/task.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import type { ComponentProps } from 'react';
4 | import { cn } from '@/lib/utils';
5 | import {
6 | Collapsible,
7 | CollapsibleTrigger,
8 | CollapsibleContent,
9 | } from '@/components/ui/collapsible';
10 | import { ChevronDownIcon, SearchIcon } from 'lucide-react';
11 |
12 | export type TaskItemFileProps = ComponentProps<'div'>;
13 |
14 | export const TaskItemFile = ({
15 | children,
16 | className,
17 | ...props
18 | }: TaskItemFileProps) => (
19 |
26 | {children}
27 |
28 | );
29 |
30 | export type TaskItemProps = ComponentProps<'div'>;
31 |
32 | export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
33 |
34 | {children}
35 |
36 | );
37 |
38 | export type TaskProps = ComponentProps
68 |
72 | )}
73 | {title}
70 |
91 | {children}
92 |
93 |
45 |
99 |
46 |
67 | {code}
68 |
69 |
90 | {code}
91 |
92 | {children && (
93 |
98 |
94 | {children}
95 |
96 | )}
97 |
74 |
78 |
100 |
107 | );
108 |
109 | export type ToolOutputProps = ComponentProps<'div'> & {
110 | output: ReactNode;
111 | errorText: ToolUIPart['errorText'];
112 | };
113 |
114 | export const ToolOutput = ({
115 | className,
116 | output,
117 | errorText,
118 | ...props
119 | }: ToolOutputProps) => {
120 | if (!(output || errorText)) {
121 | return null;
122 | }
123 |
124 | return (
125 | 101 | Parameters 102 |
103 |
104 |
106 |
126 |
141 | );
142 | };
143 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | @import "tw-animate-css";
3 |
4 | @custom-variant dark (&:is(.dark *));
5 |
6 | @theme inline {
7 | --color-background: var(--background);
8 | --color-foreground: var(--foreground);
9 | --font-sans: var(--font-geist-sans);
10 | --font-mono: var(--font-geist-mono);
11 | --color-sidebar-ring: var(--sidebar-ring);
12 | --color-sidebar-border: var(--sidebar-border);
13 | --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14 | --color-sidebar-accent: var(--sidebar-accent);
15 | --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16 | --color-sidebar-primary: var(--sidebar-primary);
17 | --color-sidebar-foreground: var(--sidebar-foreground);
18 | --color-sidebar: var(--sidebar);
19 | --color-chart-5: var(--chart-5);
20 | --color-chart-4: var(--chart-4);
21 | --color-chart-3: var(--chart-3);
22 | --color-chart-2: var(--chart-2);
23 | --color-chart-1: var(--chart-1);
24 | --color-ring: var(--ring);
25 | --color-input: var(--input);
26 | --color-border: var(--border);
27 | --color-destructive: var(--destructive);
28 | --color-accent-foreground: var(--accent-foreground);
29 | --color-accent: var(--accent);
30 | --color-muted-foreground: var(--muted-foreground);
31 | --color-muted: var(--muted);
32 | --color-secondary-foreground: var(--secondary-foreground);
33 | --color-secondary: var(--secondary);
34 | --color-primary-foreground: var(--primary-foreground);
35 | --color-primary: var(--primary);
36 | --color-popover-foreground: var(--popover-foreground);
37 | --color-popover: var(--popover);
38 | --color-card-foreground: var(--card-foreground);
39 | --color-card: var(--card);
40 | --radius-sm: calc(var(--radius) - 4px);
41 | --radius-md: calc(var(--radius) - 2px);
42 | --radius-lg: var(--radius);
43 | --radius-xl: calc(var(--radius) + 4px);
44 | }
45 |
46 | :root {
47 | --radius: 0.625rem;
48 | --background: oklch(1 0 0);
49 | --foreground: oklch(0.147 0.004 49.25);
50 | --card: oklch(1 0 0);
51 | --card-foreground: oklch(0.147 0.004 49.25);
52 | --popover: oklch(1 0 0);
53 | --popover-foreground: oklch(0.147 0.004 49.25);
54 | --primary: oklch(0.216 0.006 56.043);
55 | --primary-foreground: oklch(0.985 0.001 106.423);
56 | --secondary: oklch(0.97 0.001 106.424);
57 | --secondary-foreground: oklch(0.216 0.006 56.043);
58 | --muted: oklch(0.97 0.001 106.424);
59 | --muted-foreground: oklch(0.553 0.013 58.071);
60 | --accent: oklch(0.97 0.001 106.424);
61 | --accent-foreground: oklch(0.216 0.006 56.043);
62 | --destructive: oklch(0.577 0.245 27.325);
63 | --border: oklch(0.923 0.003 48.717);
64 | --input: oklch(0.923 0.003 48.717);
65 | --ring: oklch(0.709 0.01 56.259);
66 | --chart-1: oklch(0.646 0.222 41.116);
67 | --chart-2: oklch(0.6 0.118 184.704);
68 | --chart-3: oklch(0.398 0.07 227.392);
69 | --chart-4: oklch(0.828 0.189 84.429);
70 | --chart-5: oklch(0.769 0.188 70.08);
71 | --sidebar: oklch(0.985 0.001 106.423);
72 | --sidebar-foreground: oklch(0.147 0.004 49.25);
73 | --sidebar-primary: oklch(0.216 0.006 56.043);
74 | --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
75 | --sidebar-accent: oklch(0.97 0.001 106.424);
76 | --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
77 | --sidebar-border: oklch(0.923 0.003 48.717);
78 | --sidebar-ring: oklch(0.709 0.01 56.259);
79 | }
80 |
81 | .dark {
82 | --background: oklch(0.147 0.004 49.25);
83 | --foreground: oklch(0.985 0.001 106.423);
84 | --card: oklch(0.216 0.006 56.043);
85 | --card-foreground: oklch(0.985 0.001 106.423);
86 | --popover: oklch(0.216 0.006 56.043);
87 | --popover-foreground: oklch(0.985 0.001 106.423);
88 | --primary: oklch(0.923 0.003 48.717);
89 | --primary-foreground: oklch(0.216 0.006 56.043);
90 | --secondary: oklch(0.268 0.007 34.298);
91 | --secondary-foreground: oklch(0.985 0.001 106.423);
92 | --muted: oklch(0.268 0.007 34.298);
93 | --muted-foreground: oklch(0.709 0.01 56.259);
94 | --accent: oklch(0.268 0.007 34.298);
95 | --accent-foreground: oklch(0.985 0.001 106.423);
96 | --destructive: oklch(0.704 0.191 22.216);
97 | --border: oklch(1 0 0 / 10%);
98 | --input: oklch(1 0 0 / 15%);
99 | --ring: oklch(0.553 0.013 58.071);
100 | --chart-1: oklch(0.488 0.243 264.376);
101 | --chart-2: oklch(0.696 0.17 162.48);
102 | --chart-3: oklch(0.769 0.188 70.08);
103 | --chart-4: oklch(0.627 0.265 303.9);
104 | --chart-5: oklch(0.645 0.246 16.439);
105 | --sidebar: oklch(0.216 0.006 56.043);
106 | --sidebar-foreground: oklch(0.985 0.001 106.423);
107 | --sidebar-primary: oklch(0.488 0.243 264.376);
108 | --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
109 | --sidebar-accent: oklch(0.268 0.007 34.298);
110 | --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
111 | --sidebar-border: oklch(1 0 0 / 10%);
112 | --sidebar-ring: oklch(0.553 0.013 58.071);
113 | }
114 |
115 | @layer base {
116 | * {
117 | @apply border-border outline-ring/50;
118 | }
119 | body {
120 | @apply bg-background text-foreground;
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/components/ai-elements/reasoning.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useControllableState } from '@radix-ui/react-use-controllable-state';
4 | import {
5 | Collapsible,
6 | CollapsibleContent,
7 | CollapsibleTrigger,
8 | } from '@/components/ui/collapsible';
9 | import { BrainIcon, ChevronDownIcon } from 'lucide-react';
10 | import type { ComponentProps } from 'react';
11 | import { createContext, memo, useContext, useEffect, useState } from 'react';
12 | import { cn } from '@/lib/utils';
13 | import { Response } from './response';
14 |
15 | type ReasoningContextValue = {
16 | isStreaming: boolean;
17 | isOpen: boolean;
18 | setIsOpen: (open: boolean) => void;
19 | duration: number;
20 | };
21 |
22 | const ReasoningContext = createContext127 | {errorText ? 'Error' : 'Result'} 128 |
129 |
137 | {errorText &&
140 | {errorText}
}
138 | {output && {output}
}
139 | Thinking...
139 | ) : ( 140 |Thought for {duration} seconds
141 | )} 142 |div]:pb-0', className)}
75 | {...props}
76 | />
77 |
78 | );
79 | };
80 |
81 | export type BranchMessagesProps = HTMLAttributes;
82 |
83 | export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
84 | const { currentBranch, setBranches, branches } = useBranch();
85 | const childrenArray = Array.isArray(children) ? children : [children];
86 |
87 | // Use useEffect to update branches when they change
88 | useEffect(() => {
89 | if (branches.length !== childrenArray.length) {
90 | setBranches(childrenArray);
91 | }
92 | }, [childrenArray, branches, setBranches]);
93 |
94 | return childrenArray.map((branch, index) => (
95 | & {
109 | from: UIMessage['role'];
110 | };
111 |
112 | export const BranchSelector = ({
113 | className,
114 | from,
115 | ...props
116 | }: BranchSelectorProps) => {
117 | const { totalBranches } = useBranch();
118 |
119 | // Don't render if there's only one branch
120 | if (totalBranches <= 1) {
121 | return null;
122 | }
123 |
124 | return (
125 |
133 | );
134 | };
135 |
136 | export type BranchPreviousProps = ComponentProps;
137 |
138 | export const BranchPrevious = ({
139 | className,
140 | children,
141 | ...props
142 | }: BranchPreviousProps) => {
143 | const { goToPrevious, totalBranches } = useBranch();
144 |
145 | return (
146 |
163 | );
164 | };
165 |
166 | export type BranchNextProps = ComponentProps;
167 |
168 | export const BranchNext = ({
169 | className,
170 | children,
171 | ...props
172 | }: BranchNextProps) => {
173 | const { goToNext, totalBranches } = useBranch();
174 |
175 | return (
176 |
193 | );
194 | };
195 |
196 | export type BranchPageProps = HTMLAttributes;
197 |
198 | export const BranchPage = ({ className, ...props }: BranchPageProps) => {
199 | const { currentBranch, totalBranches } = useBranch();
200 |
201 | return (
202 |
209 | {currentBranch + 1} of {totalBranches}
210 |
211 | );
212 | };
213 |
--------------------------------------------------------------------------------
/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import useEmblaCarousel, {
5 | type UseEmblaCarouselType,
6 | } from "embla-carousel-react"
7 | import { ArrowLeft, ArrowRight } from "lucide-react"
8 |
9 | import { cn } from "@/lib/utils"
10 | import { Button } from "@/components/ui/button"
11 |
12 | type CarouselApi = UseEmblaCarouselType[1]
13 | type UseCarouselParameters = Parameters
14 | type CarouselOptions = UseCarouselParameters[0]
15 | type CarouselPlugin = UseCarouselParameters[1]
16 |
17 | type CarouselProps = {
18 | opts?: CarouselOptions
19 | plugins?: CarouselPlugin
20 | orientation?: "horizontal" | "vertical"
21 | setApi?: (api: CarouselApi) => void
22 | }
23 |
24 | type CarouselContextProps = {
25 | carouselRef: ReturnType[0]
26 | api: ReturnType[1]
27 | scrollPrev: () => void
28 | scrollNext: () => void
29 | canScrollPrev: boolean
30 | canScrollNext: boolean
31 | } & CarouselProps
32 |
33 | const CarouselContext = React.createContext(null)
34 |
35 | function useCarousel() {
36 | const context = React.useContext(CarouselContext)
37 |
38 | if (!context) {
39 | throw new Error("useCarousel must be used within a ) => {
80 | if (event.key === "ArrowLeft") {
81 | event.preventDefault()
82 | scrollPrev()
83 | } else if (event.key === "ArrowRight") {
84 | event.preventDefault()
85 | scrollNext()
86 | }
87 | },
88 | [scrollPrev, scrollNext]
89 | )
90 |
91 | React.useEffect(() => {
92 | if (!api || !setApi) return
93 | setApi(api)
94 | }, [api, setApi])
95 |
96 | React.useEffect(() => {
97 | if (!api) return
98 | onSelect(api)
99 | api.on("reInit", onSelect)
100 | api.on("select", onSelect)
101 |
102 | return () => {
103 | api?.off("select", onSelect)
104 | }
105 | }, [api, onSelect])
106 |
107 | return (
108 |
121 |
132 | )
133 | }
134 |
135 | function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
136 | const { carouselRef, orientation } = useCarousel()
137 |
138 | return (
139 | ) {
180 | const { orientation, scrollPrev, canScrollPrev } = useCarousel()
181 |
182 | return (
183 |
201 | )
202 | }
203 |
204 | function CarouselNext({
205 | className,
206 | variant = "outline",
207 | size = "icon",
208 | ...props
209 | }: React.ComponentProps) {
210 | const { orientation, scrollNext, canScrollNext } = useCarousel()
211 |
212 | return (
213 |
231 | )
232 | }
233 |
234 | export {
235 | type CarouselApi,
236 | Carousel,
237 | CarouselContent,
238 | CarouselItem,
239 | CarouselPrevious,
240 | CarouselNext,
241 | }
242 |
--------------------------------------------------------------------------------
/components/ai-chat.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Conversation,
5 | ConversationContent,
6 | ConversationScrollButton,
7 | } from "@/components/ai-elements/conversation";
8 | import { Message, MessageContent } from "@/components/ai-elements/message";
9 | import {
10 | PromptInput,
11 | PromptInputButton,
12 | PromptInputModelSelect,
13 | PromptInputModelSelectContent,
14 | PromptInputModelSelectItem,
15 | PromptInputModelSelectTrigger,
16 | PromptInputModelSelectValue,
17 | PromptInputSubmit,
18 | PromptInputTextarea,
19 | PromptInputToolbar,
20 | PromptInputTools,
21 | } from "@/components/ai-elements/prompt-input";
22 | import { useState } from "react";
23 | import { useChat } from "@ai-sdk/react";
24 | import { Response } from "@/components/ai-elements/response";
25 | import { GlobeIcon } from "lucide-react";
26 | import {
27 | Source,
28 | Sources,
29 | SourcesContent,
30 | SourcesTrigger,
31 | } from "@/components/ai-elements/source";
32 | import {
33 | Reasoning,
34 | ReasoningContent,
35 | ReasoningTrigger,
36 | } from "@/components/ai-elements/reasoning";
37 | import { Loader } from "@/components/ai-elements/loader";
38 |
39 | const models = [
40 | {
41 | name: "GPT 4o",
42 | value: "openai/gpt-4o",
43 | },
44 | {
45 | name: "Deepseek R1",
46 | value: "deepseek/deepseek-r1",
47 | },
48 | ];
49 |
50 | const AIChat = () => {
51 | const [input, setInput] = useState("");
52 | const [model, setModel] = useState(models[0].value);
53 | const [webSearch, setWebSearch] = useState(false);
54 | const { messages, sendMessage, status } = useChat();
55 |
56 | const handleSubmit = (e: React.FormEvent) => {
57 | e.preventDefault();
58 | if (input.trim()) {
59 | sendMessage(
60 | { text: input },
61 | {
62 | body: {
63 | model: model,
64 | webSearch: webSearch,
65 | },
66 | }
67 | );
68 | setInput("");
69 | }
70 | };
71 |
72 | return (
73 | ) {
12 | return ) {
18 | return ) {
24 | return & {
33 | size?: "sm" | "default"
34 | }) {
35 | return (
36 |
45 | {children}
46 |
47 |
49 |
50 | )
51 | }
52 |
53 | function SelectContent({
54 | className,
55 | children,
56 | position = "popper",
57 | ...props
58 | }: React.ComponentProps) {
59 | return (
60 |
61 |
72 |
80 | {children}
81 |
82 |
84 |
85 | )
86 | }
87 |
88 | function SelectLabel({
89 | className,
90 | ...props
91 | }: React.ComponentProps) {
92 | return (
93 | ) {
106 | return (
107 |
115 |
116 |
117 |
119 |
120 | {children}
121 |
122 | )
123 | }
124 |
125 | function SelectSeparator({
126 | className,
127 | ...props
128 | }: React.ComponentProps) {
129 | return (
130 | ) {
142 | return (
143 |
151 |
153 | )
154 | }
155 |
156 | function SelectScrollDownButton({
157 | className,
158 | ...props
159 | }: React.ComponentProps) {
160 | return (
161 |
169 |
171 | )
172 | }
173 |
174 | export {
175 | Select,
176 | SelectContent,
177 | SelectGroup,
178 | SelectItem,
179 | SelectLabel,
180 | SelectScrollDownButton,
181 | SelectScrollUpButton,
182 | SelectSeparator,
183 | SelectTrigger,
184 | SelectValue,
185 | }
186 |
--------------------------------------------------------------------------------
/components/ai-elements/inline-citation.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import type { ComponentProps } from 'react';
5 | import { cn } from '@/lib/utils';
6 | import { Badge } from '@/components/ui/badge';
7 | import {
8 | HoverCard,
9 | HoverCardTrigger,
10 | HoverCardContent,
11 | } from '@/components/ui/hover-card';
12 | import {
13 | Carousel,
14 | CarouselContent,
15 | CarouselItem,
16 | useCarousel,
17 | } from '@/components/ui/carousel';
18 | import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
19 |
20 | export type InlineCitationProps = ComponentProps<'span'>;
21 |
22 | export const InlineCitation = ({
23 | className,
24 | ...props
25 | }: InlineCitationProps) => (
26 |
30 | );
31 |
32 | export type InlineCitationTextProps = ComponentProps<'span'>;
33 |
34 | export const InlineCitationText = ({
35 | className,
36 | ...props
37 | }: InlineCitationTextProps) => (
38 |
42 | );
43 |
44 | export type InlineCitationCardProps = ComponentProps;
45 |
46 | export const InlineCitationCard = (props: InlineCitationCardProps) => (
47 |
60 |
65 | {sources.length ? (
66 | <>
67 | {new URL(sources[0]).hostname}{' '}
68 | {sources.length > 1 && `+${sources.length - 1}`}
69 |
70 | ) : (
71 | 'unknown'
72 | )}
73 |
74 |
75 | );
76 |
77 | export type InlineCitationCardBodyProps = ComponentProps<'div'>;
78 |
79 | export const InlineCitationCardBody = ({
80 | className,
81 | ...props
82 | }: InlineCitationCardBodyProps) => (
83 | ;
87 |
88 | export const InlineCitationCarousel = ({
89 | className,
90 | ...props
91 | }: InlineCitationCarouselProps) => (
92 | (null);
29 |
30 | const useWebPreview = () => {
31 | const context = useContext(WebPreviewContext);
32 | if (!context) {
33 | throw new Error('WebPreview components must be used within a WebPreview');
34 | }
35 | return context;
36 | };
37 |
38 | export type WebPreviewProps = ComponentProps<'div'> & {
39 | defaultUrl?: string;
40 | onUrlChange?: (url: string) => void;
41 | };
42 |
43 | export const WebPreview = ({
44 | className,
45 | children,
46 | defaultUrl = '',
47 | onUrlChange,
48 | ...props
49 | }: WebPreviewProps) => {
50 | const [url, setUrl] = useState(defaultUrl);
51 | const [consoleOpen, setConsoleOpen] = useState(false);
52 |
53 | const handleUrlChange = (newUrl: string) => {
54 | setUrl(newUrl);
55 | onUrlChange?.(newUrl);
56 | };
57 |
58 | const contextValue: WebPreviewContextValue = {
59 | url,
60 | setUrl: handleUrlChange,
61 | consoleOpen,
62 | setConsoleOpen,
63 | };
64 |
65 | return (
66 |
67 |
77 | );
78 | };
79 |
80 | export type WebPreviewNavigationProps = ComponentProps<'div'>;
81 |
82 | export const WebPreviewNavigation = ({
83 | className,
84 | children,
85 | ...props
86 | }: WebPreviewNavigationProps) => (
87 | & {
96 | tooltip?: string;
97 | };
98 |
99 | export const WebPreviewNavigationButton = ({
100 | onClick,
101 | disabled,
102 | tooltip,
103 | children,
104 | ...props
105 | }: WebPreviewNavigationButtonProps) => (
106 |
107 |
108 |
109 |
119 |
120 |
121 |
123 |
124 |
125 | );
126 |
127 | export type WebPreviewUrlProps = ComponentProps;
128 |
129 | export const WebPreviewUrl = ({
130 | value,
131 | onChange,
132 | onKeyDown,
133 | ...props
134 | }: WebPreviewUrlProps) => {
135 | const { url, setUrl } = useWebPreview();
136 |
137 | const handleKeyDown = (event: React.KeyboardEvent) => {
138 | if (event.key === 'Enter') {
139 | const target = event.target as HTMLInputElement;
140 | setUrl(target.value);
141 | }
142 | onKeyDown?.(event);
143 | };
144 |
145 | return (
146 |
154 | );
155 | };
156 |
157 | export type WebPreviewBodyProps = ComponentProps<'iframe'> & {
158 | loading?: ReactNode;
159 | };
160 |
161 | export const WebPreviewBody = ({
162 | className,
163 | loading,
164 | src,
165 | ...props
166 | }: WebPreviewBodyProps) => {
167 | const { url } = useWebPreview();
168 |
169 | return (
170 |
206 |
207 |
219 |
220 |
226 |
250 |
251 | );
252 | };
253 |
--------------------------------------------------------------------------------
/components/ai-elements/prompt-input.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Loader2Icon, SendIcon, SquareIcon, XIcon } from 'lucide-react';
4 | import type {
5 | ComponentProps,
6 | HTMLAttributes,
7 | KeyboardEventHandler,
8 | } from 'react';
9 | import { Children, useCallback, useEffect, useRef } from 'react';
10 | import { Button } from '@/components/ui/button';
11 | import {
12 | Select,
13 | SelectContent,
14 | SelectItem,
15 | SelectTrigger,
16 | SelectValue,
17 | } from '@/components/ui/select';
18 | import { Textarea } from '@/components/ui/textarea';
19 | import { cn } from '@/lib/utils';
20 | import type { ChatStatus } from 'ai';
21 |
22 | type UseAutoResizeTextareaProps = {
23 | minHeight: number;
24 | maxHeight?: number;
25 | };
26 |
27 | const useAutoResizeTextarea = ({
28 | minHeight,
29 | maxHeight,
30 | }: UseAutoResizeTextareaProps) => {
31 | const textareaRef = useRef(null);
32 |
33 | const adjustHeight = useCallback(
34 | (reset?: boolean) => {
35 | const textarea = textareaRef.current;
36 | if (!textarea) {
37 | return;
38 | }
39 |
40 | if (reset) {
41 | textarea.style.height = `${minHeight}px`;
42 | return;
43 | }
44 |
45 | // Temporarily shrink to get the right scrollHeight
46 | textarea.style.height = `${minHeight}px`;
47 |
48 | // Calculate new height
49 | const newHeight = Math.max(
50 | minHeight,
51 | Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY),
52 | );
53 |
54 | textarea.style.height = `${newHeight}px`;
55 | },
56 | [minHeight, maxHeight],
57 | );
58 |
59 | useEffect(() => {
60 | // Set initial height
61 | const textarea = textareaRef.current;
62 | if (textarea) {
63 | textarea.style.height = `${minHeight}px`;
64 | }
65 | }, [minHeight]);
66 |
67 | // Adjust height on window resize
68 | useEffect(() => {
69 | const handleResize = () => adjustHeight();
70 | window.addEventListener('resize', handleResize);
71 | return () => window.removeEventListener('resize', handleResize);
72 | }, [adjustHeight]);
73 |
74 | return { textareaRef, adjustHeight };
75 | };
76 |
77 | export type PromptInputProps = HTMLAttributes;
78 |
79 | export const PromptInput = ({ className, ...props }: PromptInputProps) => (
80 |
87 | );
88 |
89 | export type PromptInputTextareaProps = ComponentProps & {
90 | minHeight?: number;
91 | maxHeight?: number;
92 | };
93 |
94 | export const PromptInputTextarea = ({
95 | onChange,
96 | className,
97 | placeholder = 'What would you like to know?',
98 | minHeight = 48,
99 | maxHeight = 164,
100 | ...props
101 | }: PromptInputTextareaProps) => {
102 | const { textareaRef, adjustHeight } = useAutoResizeTextarea({
103 | minHeight,
104 | maxHeight,
105 | });
106 |
107 | const handleKeyDown: KeyboardEventHandler = (e) => {
108 | if (e.key === 'Enter') {
109 | if (e.shiftKey) {
110 | // Allow newline
111 | return;
112 | }
113 |
114 | // Submit on Enter (without Shift)
115 | e.preventDefault();
116 | const form = e.currentTarget.form;
117 | if (form) {
118 | form.requestSubmit();
119 | }
120 | }
121 | };
122 |
123 | return (
124 |
div]:pb-0',
98 | index === currentBranch ? 'block' : 'hidden',
99 | )}
100 | key={branch.key}
101 | {...props}
102 | >
103 | {branch}
104 |
105 | ));
106 | };
107 |
108 | export type BranchSelectorProps = HTMLAttributes
129 | {children}
130 |
131 |
144 |
152 |
153 | )
154 | }
155 |
156 | function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
157 | const { orientation } = useCarousel()
158 |
159 | return (
160 |
171 | )
172 | }
173 |
174 | function CarouselPrevious({
175 | className,
176 | variant = "outline",
177 | size = "icon",
178 | ...props
179 | }: React.ComponentProps
74 |
180 | );
181 | };
182 |
183 | export default AIChat;
184 |
--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SelectPrimitive from "@radix-ui/react-select"
5 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | function Select({
10 | ...props
11 | }: React.ComponentProps
75 |
76 |
77 | {messages.map((message) => (
78 |
137 |
139 |
140 |
141 | setInput(e.target.value)}
143 | value={input}
144 | />
145 |
146 |
147 | setWebSearch(!webSearch)}
150 | >
151 |
154 | {
156 | setModel(value);
157 | }}
158 | value={model}
159 | >
160 |
161 |
163 |
164 | {models.map((model) => (
165 |
169 | {model.name}
170 |
171 | ))}
172 |
173 |
174 |
175 |
177 |
178 |
179 |
79 | {message.role === "assistant" && (
80 |
81 | {message.parts.map((part, i) => {
82 | switch (part.type) {
83 | case "source-url":
84 | return (
85 | <>
86 | part.type === "source-url"
90 | ).length
91 | }
92 | />
93 |
94 |
100 |
101 | );
102 | }
103 | })}
104 |
105 | )}
106 |
107 |
108 | {message.parts.map((part, i) => {
109 | switch (part.type) {
110 | case "text":
111 | return (
112 |
113 | {part.text}
114 |
115 | );
116 | case "reasoning":
117 | return (
118 |
123 | {part.text}
125 |
126 | );
127 | default:
128 | return null;
129 | }
130 | })}
131 |
132 |
133 |
134 | ))}
135 | {status === "submitted" &&
157 | {children ?? `${current}/${count}`}
158 |
159 | );
160 | };
161 |
162 | export type InlineCitationCarouselPrevProps = ComponentProps<'button'>;
163 |
164 | export const InlineCitationCarouselPrev = ({
165 | className,
166 | ...props
167 | }: InlineCitationCarouselPrevProps) => {
168 | const { api } = useCarousel();
169 |
170 | const handleClick = React.useCallback(() => {
171 | if (api) {
172 | api.scrollPrev();
173 | }
174 | }, [api]);
175 |
176 | return (
177 |
186 | );
187 | };
188 |
189 | export type InlineCitationCarouselNextProps = ComponentProps<'button'>;
190 |
191 | export const InlineCitationCarouselNext = ({
192 | className,
193 | ...props
194 | }: InlineCitationCarouselNextProps) => {
195 | const { api } = useCarousel();
196 |
197 | const handleClick = React.useCallback(() => {
198 | if (api) {
199 | api.scrollNext();
200 | }
201 | }, [api]);
202 |
203 | return (
204 |
213 | );
214 | };
215 |
216 | export type InlineCitationSourceProps = ComponentProps<'div'> & {
217 | title?: string;
218 | url?: string;
219 | description?: string;
220 | };
221 |
222 | export const InlineCitationSource = ({
223 | title,
224 | url,
225 | description,
226 | className,
227 | children,
228 | ...props
229 | }: InlineCitationSourceProps) => (
230 |
231 | {title && (
232 |
244 | );
245 |
246 | export type InlineCitationQuoteProps = ComponentProps<'blockquote'>;
247 |
248 | export const InlineCitationQuote = ({
249 | children,
250 | className,
251 | ...props
252 | }: InlineCitationQuoteProps) => (
253 | {title}
233 | )} 234 | {url && ( 235 |{url}
236 | )} 237 | {description && ( 238 |239 | {description} 240 |
241 | )} 242 | {children} 243 |260 | {children} 261 |262 | ); 263 | -------------------------------------------------------------------------------- /components/ai-elements/web-preview.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { ChevronDownIcon } from 'lucide-react'; 4 | import type { ComponentProps, ReactNode } from 'react'; 5 | import { createContext, useContext, useState } from 'react'; 6 | import { Button } from '@/components/ui/button'; 7 | import { 8 | Collapsible, 9 | CollapsibleContent, 10 | CollapsibleTrigger, 11 | } from '@/components/ui/collapsible'; 12 | import { Input } from '@/components/ui/input'; 13 | import { 14 | Tooltip, 15 | TooltipContent, 16 | TooltipProvider, 17 | TooltipTrigger, 18 | } from '@/components/ui/tooltip'; 19 | import { cn } from '@/lib/utils'; 20 | 21 | export type WebPreviewContextValue = { 22 | url: string; 23 | setUrl: (url: string) => void; 24 | consoleOpen: boolean; 25 | setConsoleOpen: (open: boolean) => void; 26 | }; 27 | 28 | const WebPreviewContext = createContext
74 | {children}
75 |
76 |
91 | {children}
92 |
93 | );
94 |
95 | export type WebPreviewNavigationButtonProps = ComponentProps{tooltip}
122 |
171 |
178 | {loading}
179 |
180 | );
181 | };
182 |
183 | export type WebPreviewConsoleProps = ComponentProps<'div'> & {
184 | logs?: Array<{
185 | level: 'log' | 'warn' | 'error';
186 | message: string;
187 | timestamp: Date;
188 | }>;
189 | };
190 |
191 | export const WebPreviewConsole = ({
192 | className,
193 | logs = [],
194 | children,
195 | ...props
196 | }: WebPreviewConsoleProps) => {
197 | const { consoleOpen, setConsoleOpen } = useWebPreview();
198 |
199 | return (
200 |
227 | {logs.length === 0 ? (
228 |
249 | No console output
229 | ) : ( 230 | logs.map((log, index) => ( 231 |
240 |
241 | {log.timestamp.toLocaleTimeString()}
242 | {' '}
243 | {log.message}
244 |
245 | ))
246 | )}
247 | {children}
248 |