; 28 | } 29 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { cn } from '@/lib/utils'; 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |

19 |     );
20 |   },
21 | );
22 | Textarea.displayName = 'Textarea';
23 | 
24 | export { Textarea };
25 |

--------------------------------------------------------------------------------
/components/llm-stocks/stock-skeleton.tsx:
--------------------------------------------------------------------------------
 1 | export const StockSkeleton = () => {
 2 |   return (
 3 |     <div className="p-4 rounded-xl bg-zinc-950 text-green-400 border border-zinc-900">
 4 |       <div className="float-right inline-block px-2 py-1 rounded-full bg-white/10 text-xs text-transparent w-fit bg-zinc-700">
 5 |         xxxxxxx
 6 |       </div>
 7 |       <div className="text-lg text-transparent w-fit bg-zinc-700 rounded-md mb-1">
 8 |         xxxx
 9 |       </div>
10 |       <div className="text-3xl font-bold text-transparent w-fit bg-zinc-700 rounded-md">
11 |         xxxx
12 |       </div>
13 |       <div className="text text-xs text-transparent mt-1 bg-zinc-700 w-fit rounded-md">
14 |         xxxxxx xxx xx xxxx xx xxx
15 |       </div>
16 | 
17 |       <div className="-mx-4 relative cursor-col-resize">
18 |         <div style={{ height: 146 }}></div>
19 |       </div>
20 |     </div>
21 |   );
22 | };
23 |

--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import * as React from 'react';
 4 | import * as SeparatorPrimitive from '@radix-ui/react-separator';
 5 | 
 6 | import { cn } from '@/lib/utils';
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = 'horizontal', decorative = true, ...props },
14 |     ref,
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         'shrink-0 bg-border',
22 |         orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
23 |         className,
24 |       )}
25 |       {...props}
26 |     />
27 |   ),
28 | );
29 | Separator.displayName = SeparatorPrimitive.Root.displayName;
30 | 
31 | export { Separator };
32 |

--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { cn } from '@/lib/utils';
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
15 |           className,
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   },
22 | );
23 | Input.displayName = 'Input';
24 | 
25 | export { Input };
26 |

--------------------------------------------------------------------------------
/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from '@/components/ui/toast';
11 | import { useToast } from '@/components/ui/use-toast';
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast();
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         );
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   );
35 | }
36 |

--------------------------------------------------------------------------------
/components/llm-stocks/event.tsx:
--------------------------------------------------------------------------------
 1 | import { format, parseISO } from 'date-fns';
 2 | 
 3 | interface Event {
 4 |   date: string;
 5 |   headline: string;
 6 |   description: string;
 7 | }
 8 | 
 9 | export function Events({ events }: { events: Event[] }) {
10 |   return (
11 |     <div className="flex flex-col sm:flex-row gap-2 overflow-scroll py-4 -mt-2">
12 |       {events.map(event => (
13 |         <div
14 |           key={event.date}
15 |           className="flex flex-col p-4 bg-zinc-900 rounded-md max-w-96 flex-shrink-0"
16 |         >
17 |           <div className="text-zinc-400 text-sm">
18 |             {format(parseISO(event.date), 'dd LLL, yyyy')}
19 |           </div>
20 |           <div className="text-base font-bold text-zinc-200">
21 |             {event.headline.slice(0, 30)}
22 |           </div>
23 |           <div className="text-zinc-500">
24 |             {event.description.slice(0, 70)}...
25 |           </div>
26 |         </div>
27 |       ))}
28 |     </div>
29 |   );
30 | }
31 |

--------------------------------------------------------------------------------
/components/llm-stocks/index.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import dynamic from 'next/dynamic';
 4 | import { StockSkeleton } from './stock-skeleton';
 5 | import { StocksSkeleton } from './stocks-skeleton';
 6 | import { EventsSkeleton } from './events-skeleton';
 7 | 
 8 | export { spinner } from './spinner';
 9 | export { BotCard, BotMessage, SystemMessage } from './message';
10 | 
11 | const Stock = dynamic(() => import('./stock').then(mod => mod.Stock), {
12 |   ssr: false,
13 |   loading: () => <StockSkeleton />,
14 | });
15 | 
16 | const Purchase = dynamic(
17 |   () => import('./stock-purchase').then(mod => mod.Purchase),
18 |   {
19 |     ssr: false,
20 |     loading: () => (
21 |       <div className="bg-zinc-900 rounded-lg px-4 py-5 text-center text-xs">
22 |         Loading stock info...
23 |       </div>
24 |     ),
25 |   },
26 | );
27 | 
28 | const Stocks = dynamic(() => import('./stocks').then(mod => mod.Stocks), {
29 |   ssr: false,
30 |   loading: () => <StocksSkeleton />,
31 | });
32 | 
33 | const Events = dynamic(() => import('./event').then(mod => mod.Events), {
34 |   ssr: false,
35 |   loading: () => <EventsSkeleton />,
36 | });
37 | 
38 | export { Stock, Purchase, Stocks, Events };
39 |

--------------------------------------------------------------------------------
/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 | const TooltipProvider = TooltipPrimitive.Provider;
 9 | 
10 | const Tooltip = TooltipPrimitive.Root;
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger;
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
23 |       className,
24 |     )}
25 |     {...props}
26 |   />
27 | ));
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
31 |

--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 240 10% 3.9%;
 9 |     --muted: 240 4.8% 95.9%;
10 |     --muted-foreground: 240 3.8% 46.1%;
11 |     --popover: 0 0% 100%;
12 |     --popover-foreground: 240 10% 3.9%;
13 |     --card: 0 0% 100%;
14 |     --card-foreground: 240 10% 3.9%;
15 |     --border: 240 5.9% 90%;
16 |     --input: 240 5.9% 90%;
17 |     --primary: 240 5.9% 10%;
18 |     --primary-foreground: 0 0% 98%;
19 |     --secondary: 240 4.8% 95.9%;
20 |     --secondary-foreground: 240 5.9% 10%;
21 |     --accent: 240 4.8% 95.9%;
22 |     --accent-foreground: ;
23 |     --destructive: 0 84.2% 60.2%;
24 |     --destructive-foreground: 0 0% 98%;
25 |     --ring: 240 5% 64.9%;
26 |     --radius: 0.5rem;
27 |   }
28 | 
29 |   .dark {
30 |     --background: 240 10% 3.9%;
31 |     --foreground: 0 0% 98%;
32 |     --muted: 240 3.7% 15.9%;
33 |     --muted-foreground: 240 5% 64.9%;
34 |     --popover: 240 10% 3.9%;
35 |     --popover-foreground: 0 0% 98%;
36 |     --card: 240 10% 3.9%;
37 |     --card-foreground: 0 0% 98%;
38 |     --border: 240 3.7% 15.9%;
39 |     --input: 240 3.7% 15.9%;
40 |     --primary: 0 0% 98%;
41 |     --primary-foreground: 240 5.9% 10%;
42 |     --secondary: 240 3.7% 15.9%;
43 |     --secondary-foreground: 0 0% 98%;
44 |     --accent: 240 3.7% 15.9%;
45 |     --accent-foreground: ;
46 |     --destructive: 0 62.8% 30.6%;
47 |     --destructive-foreground: 0 85.7% 97.3%;
48 |     --ring: 240 3.7% 15.9%;
49 |   }
50 | }
51 | 
52 | @layer base {
53 |   * {
54 |     @apply border-border;
55 |   }
56 |   body {
57 |     @apply bg-background text-foreground;
58 |   }
59 | }
60 |

--------------------------------------------------------------------------------
/lib/utils/tool-definition.ts:
--------------------------------------------------------------------------------
 1 | import { z } from 'zod';
 2 | 
 3 | /**
 4 |  * Any array of ToolDefinitions.
 5 |  */
 6 | export type TAnyToolDefinitionArray = Array<
 7 |   ToolDefinition<string, z.AnyZodObject>
 8 | >;
 9 | 
10 | /**
11 |  * A map of ToolDefinitions, indexed by name.
12 |  */
13 | export type TAnyToolDefinitionMap = Readonly<{
14 |   [K in string]: ToolDefinition<any, any>;
15 | }>;
16 | 
17 | /**
18 |  * Helper type to create a map of ToolDefinitions, indexed by name, from an array of ToolDefinitions.
19 |  */
20 | export type TToolDefinitionMap<
21 |   TToolDefinitionArray extends TAnyToolDefinitionArray,
22 | > = TToolDefinitionArray extends [infer TFirst, ...infer Rest]
23 |   ? TFirst extends TAnyToolDefinitionArray[number]
24 |     ? Rest extends TAnyToolDefinitionArray
25 |       ? Readonly<{ [K in TFirst['name']]: TFirst }> & TToolDefinitionMap<Rest>
26 |       : never
27 |     : never
28 |   : Readonly<{}>;
29 | 
30 | /**
31 |  * A tool definition contains all information required for a language model to generate tool calls.
32 |  */
33 | export interface ToolDefinition<
34 |   NAME extends string,
35 |   PARAMETERS extends z.AnyZodObject,
36 | > {
37 |   /**
38 |    * The name of the tool.
39 |    * Should be understandable for language models and unique among the tools that they know.
40 |    *
41 |    * Note: Using generics to enable result type inference when there are multiple tool calls.
42 |    */
43 |   name: NAME;
44 | 
45 |   /**
46 |    * A optional description of what the tool does. Will be used by the language model to decide whether to use the tool.
47 |    */
48 |   description?: string;
49 | 
50 |   /**
51 |    * The schema of the input that the tool expects. The language model will use this to generate the input.
52 |    * Use descriptions to make the input understandable for the language model.
53 |    */
54 |   parameters: PARAMETERS;
55 | }
56 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-rsc-demo",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "format": "prettier --write \"**/*.{ts,tsx,js,jsx}\"",
11 |     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx}\" --cache"
12 |   },
13 |   "dependencies": {
14 |     "@radix-ui/react-icons": "^1.3.0",
15 |     "@radix-ui/react-label": "^2.0.2",
16 |     "@radix-ui/react-separator": "^1.0.3",
17 |     "@radix-ui/react-slot": "^1.0.2",
18 |     "@radix-ui/react-toast": "^1.1.5",
19 |     "@radix-ui/react-tooltip": "^1.0.7",
20 |     "@upstash/ratelimit": "^1.0.1",
21 |     "@upstash/redis": "^1.28.4",
22 |     "@vercel/analytics": "^1.2.2",
23 |     "@vercel/kv": "^1.0.1",
24 |     "ai": "3.0.2",
25 |     "class-variance-authority": "^0.7.0",
26 |     "clsx": "^2.1.0",
27 |     "d3-scale": "^4.0.2",
28 |     "date-fns": "^3.3.1",
29 |     "geist": "^1.2.2",
30 |     "js-confetti": "^0.12.0",
31 |     "next": "14.1.2-canary.3",
32 |     "next-themes": "^0.2.1",
33 |     "openai": "^4.27.0",
34 |     "react": "^18",
35 |     "react-dom": "^18",
36 |     "react-intersection-observer": "^9.8.0",
37 |     "react-pacman": "^0.0.4",
38 |     "react-swipeable": "^7.0.1",
39 |     "react-textarea-autosize": "^8.5.3",
40 |     "sass": "^1.71.1",
41 |     "tailwind-merge": "^2.2.1",
42 |     "tailwindcss-animate": "^1.0.7",
43 |     "usehooks-ts": "^2.15.1",
44 |     "zod": "3.22.4",
45 |     "zod-to-json-schema": "3.22.4"
46 |   },
47 |   "devDependencies": {
48 |     "@types/d3-scale": "^4.0.8",
49 |     "@types/node": "^20",
50 |     "@types/react": "^18",
51 |     "@types/react-dom": "^18",
52 |     "eslint": "8.57.0",
53 |     "eslint-config-next": "14.1.0",
54 |     "postcss": "^8",
55 |     "prettier": "^3.2.5",
56 |     "tailwindcss": "^3.4.1",
57 |     "typescript": "^5"
58 |   }
59 | }
60 |

--------------------------------------------------------------------------------
/components/header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | 
 3 | import {
 4 |   IconGitHub,
 5 |   IconSeparator,
 6 |   IconSparkles,
 7 |   IconVercel,
 8 | } from '@/components/ui/icons';
 9 | import { Button } from '@/components/ui/button';
10 | 
11 | export async function Header() {
12 |   return (
13 |     <header className="sticky top-0 z-50 flex items-center justify-between w-full px-4 border-b h-14 shrink-0 bg-background backdrop-blur-xl">
14 |       <span className="inline-flex items-center home-links whitespace-nowrap">
15 |         <a href="https://vercel.com" rel="noopener" target="_blank">
16 |           <IconVercel className="w-5 h-5 sm:h-6 sm:w-6" />
17 |         </a>
18 |         <IconSeparator className="w-6 h-6 text-muted-foreground/20" />
19 |         <Link href="/">
20 |           <span className="text-lg font-bold">
21 |             <IconSparkles className="inline mr-0 w-4 sm:w-5 mb-0.5" />
22 |             AI
23 |           </span>
24 |         </Link>
25 |       </span>
26 |       <div className="flex items-center justify-end space-x-2">
27 |         <Button variant="outline" asChild>
28 |           <a
29 |             target="_blank"
30 |             href="https://github.com/vercel/ai/tree/main/examples/next-ai-rsc"
31 |             rel="noopener noreferrer"
32 |           >
33 |             <IconGitHub />
34 |             <span className="hidden ml-2 md:flex">GitHub</span>
35 |           </a>
36 |         </Button>
37 |         <Button asChild>
38 |           <a
39 |             href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Fblob%2Fmain%2Fexamples%2Fnext-ai-rsc&env=OPENAI_API_KEY&envDescription=OpenAI+API+Key&envLink=https%3A%2F%2Fplatform.openai.com%2Fapi-keys"
40 |             target="_blank"
41 |           >
42 |             <IconVercel className="mr-2" />
43 |             <span className="hidden sm:block">Deploy to Vercel</span>
44 |             <span className="sm:hidden">Deploy</span>
45 |           </a>
46 |         </Button>
47 |       </div>
48 |     </header>
49 |   );
50 | }
51 |

--------------------------------------------------------------------------------
/components/llm-stocks/stocks.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useActions, useUIState } from 'ai/rsc';
 4 | 
 5 | import type { AI } from '../../app/action';
 6 | 
 7 | export function Stocks({ stocks }: { stocks: any[] }) {
 8 |   const [, setMessages] = useUIState<typeof AI>();
 9 |   const { submitUserMessage } = useActions();
10 | 
11 |   return (
12 |     <div className="flex flex-col sm:flex-row text-sm gap-2 mb-4 overflow-y-scroll pb-4">
13 |       {stocks.map(stock => (
14 |         <button
15 |           key={stock.symbol}
16 |           className="bg-zinc-900 text-left p-2 rounded-lg flex flex-row gap-2 cursor-pointer hover:bg-zinc-800 sm:w-52"
17 |           onClick={async () => {
18 |             const response = await submitUserMessage(`View ${stock.symbol}`);
19 |             setMessages(currentMessages => [...currentMessages, response]);
20 |           }}
21 |         >
22 |           <div
23 |             className={`text-xl ${
24 |               stock.delta > 0 ? 'text-green-600' : 'text-red-600'
25 |             } p-2 w-11 bg-white/10 flex flex-row justify-center rounded-md`}
26 |           >
27 |             {stock.delta > 0 ? '↑' : '↓'}
28 |           </div>
29 |           <div className="flex flex-col">
30 |             <div className="text-zinc-300 bold uppercase">{stock.symbol}</div>
31 |             <div className="text-zinc-500 text-base">${stock.price}</div>
32 |           </div>
33 |           <div className="flex flex-col ml-auto">
34 |             <div
35 |               className={`${
36 |                 stock.delta > 0 ? 'text-green-600' : 'text-red-600'
37 |               } bold uppercase text-right`}
38 |             >
39 |               {` ${((stock.delta / stock.price) * 100).toFixed(2)}%`}
40 |             </div>
41 |             <div
42 |               className={`${
43 |                 stock.delta > 0 ? 'text-green-700' : 'text-red-700'
44 |               } text-base text-right`}
45 |             >
46 |               {stock.delta}
47 |             </div>
48 |           </div>
49 |         </button>
50 |       ))}
51 |     </div>
52 |   );
53 | }
54 |

--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Slot } from '@radix-ui/react-slot';
 3 | import { cva, type VariantProps } from 'class-variance-authority';
 4 | 
 5 | import { cn } from '@/lib/utils';
 6 | 
 7 | const buttonVariants = cva(
 8 |   'inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           'bg-primary text-primary-foreground shadow-md hover:bg-primary/90',
14 |         destructive:
15 |           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
16 |         outline:
17 |           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
18 |         secondary:
19 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
20 |         ghost: 'shadow-none hover:bg-accent hover:text-accent-foreground',
21 |         link: 'text-primary underline-offset-4 shadow-none hover:underline',
22 |       },
23 |       size: {
24 |         default: 'h-8 px-4 py-2',
25 |         sm: 'h-8 rounded-md px-3',
26 |         lg: 'h-11 rounded-md px-8',
27 |         icon: 'h-8 w-8 p-0',
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: 'default',
32 |       size: 'default',
33 |     },
34 |   },
35 | );
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean;
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : 'button';
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     );
53 |   },
54 | );
55 | Button.displayName = 'Button';
56 | 
57 | export { Button, buttonVariants };
58 |

--------------------------------------------------------------------------------
/components/llm-stocks/message.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { IconAI, IconUser } from '@/components/ui/icons';
 4 | import { cn } from '@/lib/utils';
 5 | 
 6 | // Different types of message bubbles.
 7 | 
 8 | export function UserMessage({ children }: { children: React.ReactNode }) {
 9 |   return (
10 |     <div className="group relative flex items-start md:-ml-12">
11 |       <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
12 |         <IconUser />
13 |       </div>
14 |       <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
15 |         {children}
16 |       </div>
17 |     </div>
18 |   );
19 | }
20 | 
21 | export function BotMessage({
22 |   children,
23 |   className,
24 | }: {
25 |   children: React.ReactNode;
26 |   className?: string;
27 | }) {
28 |   return (
29 |     <div className={cn('group relative flex items-start md:-ml-12', className)}>
30 |       <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground">
31 |         <IconAI />
32 |       </div>
33 |       <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
34 |         {children}
35 |       </div>
36 |     </div>
37 |   );
38 | }
39 | 
40 | export function BotCard({
41 |   children,
42 |   showAvatar = true,
43 | }: {
44 |   children: React.ReactNode;
45 |   showAvatar?: boolean;
46 | }) {
47 |   return (
48 |     <div className="group relative flex items-start md:-ml-12">
49 |       <div
50 |         className={cn(
51 |           'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground',
52 |           !showAvatar && 'invisible',
53 |         )}
54 |       >
55 |         <IconAI />
56 |       </div>
57 |       <div className="ml-4 flex-1 px-1">{children}</div>
58 |     </div>
59 |   );
60 | }
61 | 
62 | export function SystemMessage({ children }: { children: React.ReactNode }) {
63 |   return (
64 |     <div
65 |       className={
66 |         'mt-2 flex items-center justify-center gap-2 text-xs text-gray-500'
67 |       }
68 |     >
69 |       <div className={'max-w-[600px] flex-initial px-2 py-2'}>{children}</div>
70 |     </div>
71 |   );
72 | }
73 |

--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next';
 2 | import { GeistMono } from 'geist/font/mono';
 3 | import { GeistSans } from 'geist/font/sans';
 4 | import { Analytics } from '@vercel/analytics/react';
 5 | import { Toaster } from '@/components/ui/toaster';
 6 | import './globals.css';
 7 | 
 8 | import { AI } from './action';
 9 | import { Header } from '@/components/header';
10 | import { Providers } from '@/components/providers';
11 | 
12 | const meta = {
13 |   title: 'AI RSC Demo',
14 |   description:
15 |     'Demo of an interactive financial assistant built using Next.js and Vercel AI SDK.',
16 | };
17 | export const metadata: Metadata = {
18 |   ...meta,
19 |   title: {
20 |     default: 'AI RSC Demo',
21 |     template: `%s - AI RSC Demo`,
22 |   },
23 |   icons: {
24 |     icon: '/favicon.ico',
25 |     shortcut: '/favicon-16x16.png',
26 |     apple: '/apple-touch-icon.png',
27 |   },
28 |   twitter: {
29 |     ...meta,
30 |     card: 'summary_large_image',
31 |     site: '@vercel',
32 |   },
33 |   openGraph: {
34 |     ...meta,
35 |     locale: 'en-US',
36 |     type: 'website',
37 |   },
38 | };
39 | 
40 | export const viewport = {
41 |   themeColor: [
42 |     { media: '(prefers-color-scheme: light)', color: 'white' },
43 |     { media: '(prefers-color-scheme: dark)', color: 'black' },
44 |   ],
45 | };
46 | 
47 | export default function RootLayout({
48 |   children,
49 | }: Readonly<{
50 |   children: React.ReactNode;
51 | }>) {
52 |   return (
53 |     <html lang="en" suppressHydrationWarning>
54 |       <body
55 |         className={`font-sans antialiased ${GeistSans.variable} ${GeistMono.variable}`}
56 |       >
57 |         <Toaster />
58 |         <AI>
59 |           <Providers
60 |             attribute="class"
61 |             defaultTheme="system"
62 |             enableSystem
63 |             disableTransitionOnChange
64 |           >
65 |             <div className="flex flex-col min-h-screen">
66 |               <Header />
67 |               <main className="flex flex-col flex-1 bg-muted/50 dark:bg-background">
68 |                 {children}
69 |               </main>
70 |             </div>
71 |           </Providers>
72 |         </AI>
73 |         <Analytics />
74 |       </body>
75 |     </html>
76 |   );
77 | }
78 | 
79 | export const runtime = 'edge';
80 |

--------------------------------------------------------------------------------
/components/pacman.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | // @ts-ignore
 4 | import ReactPacman from "react-pacman";
 5 | import { useState, useEffect, useRef } from "react";
 6 | import { useSwipeable } from "react-swipeable";
 7 | 
 8 | export const EAST = 0;
 9 | export const NORTH = 1;
10 | export const WEST = 2;
11 | export const SOUTH = 3;
12 | 
13 | export function Pacman() {
14 |   const [isGameStopped, setStopGame] = useState(false);
15 |   const [isMobile, setIsMobile] = useState<boolean | null>(null);
16 |   const ref = useRef<ReactPacman>(null);
17 |   const handlers = useSwipeable({
18 |     onSwiped: (eventData) => {
19 |       switch (eventData.dir) {
20 |         case "Up":
21 |           ref.current?.changeDirection(NORTH);
22 |           break;
23 |         case "Down":
24 |           ref.current?.changeDirection(SOUTH);
25 |           break;
26 |         case "Left":
27 |           ref.current?.changeDirection(WEST);
28 |           break;
29 |         case "Right":
30 |           ref.current?.changeDirection(EAST);
31 |           break;
32 |       }
33 |     },
34 |     preventScrollOnSwipe: true,
35 |   });
36 | 
37 |   useEffect(() => {
38 |     setIsMobile(window.innerWidth <= 640);
39 |     window.addEventListener("resize", () => {
40 |       setIsMobile(window.innerWidth <= 640);
41 |     });
42 |   }, []);
43 |   return (
44 |     <div>
45 |       {isGameStopped ? (
46 |         <p>Thanks for playing react-pacman!</p>
47 |       ) : (
48 |         <div className="flex flex-col items-center gap-2" {...handlers}>
49 |           {isMobile && (
50 |             <p className="text-sm text-gray-500">Swipe on the board to move</p>
51 |           )}
52 |           <div className="p-4 overflow-hidden flex w-full items-center justify-center border rounded-xl bg-zinc-950">
53 |             <ReactPacman ref={ref} gridSize={isMobile ? 10 : 12} />
54 |           </div>
55 |           <p className="text-sm text-gray-500">
56 |             Courtesy of{" "}
57 |             <a
58 |               target="_blank"
59 |               className="text-gray-800 underline"
60 |               href="https://github.com/nurra01/react-pacman"
61 |             >
62 |               react-pacman
63 |             </a>{" "}
64 |             (MIT) /{" "}
65 |             <button
66 |               className="text-gray-800 underline"
67 |               onClick={() => setStopGame(true)}
68 |             >
69 |               Stop game
70 |             </button>
71 |           </p>
72 |         </div>
73 |       )}
74 |     </div>
75 |   );
76 | }
77 |

--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import { fontFamily } from 'tailwindcss/defaultTheme';
 2 | import type { Config } from 'tailwindcss';
 3 | 
 4 | const config: Config = {
 5 |   content: [
 6 |     './ai_user_components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |     './components/**/*.{js,ts,jsx,tsx}',
 9 |     './ai_hooks/**/*.{js,ts,jsx,tsx}',
10 |   ],
11 |   theme: {
12 |     extend: {
13 |       fontFamily: {
14 |         sans: ['var(--font-geist-sans)', ...fontFamily.sans],
15 |         mono: ['var(--font-geist-mono)', ...fontFamily.mono],
16 |       },
17 |       backgroundImage: {
18 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
19 |         'gradient-conic':
20 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
21 |       },
22 |       colors: {
23 |         green: {
24 |           '50': '#f0fdf6',
25 |           '100': '#dbfdec',
26 |           '200': '#baf8d9',
27 |           '300': '#68eeac',
28 |           '400': '#47e195',
29 |           '500': '#1fc876',
30 |           '600': '#13a65e',
31 |           '700': '#13824c',
32 |           '800': '#146740',
33 |           '900': '#135436',
34 |           '950': '#042f1c',
35 |         },
36 |         border: 'hsl(var(--border))',
37 |         input: 'hsl(var(--input))',
38 |         ring: 'hsl(var(--ring))',
39 |         background: 'hsl(var(--background))',
40 |         foreground: 'hsl(var(--foreground))',
41 |         primary: {
42 |           DEFAULT: 'hsl(var(--primary))',
43 |           foreground: 'hsl(var(--primary-foreground))',
44 |         },
45 |         secondary: {
46 |           DEFAULT: 'hsl(var(--secondary))',
47 |           foreground: 'hsl(var(--secondary-foreground))',
48 |         },
49 |         destructive: {
50 |           DEFAULT: 'hsl(var(--destructive))',
51 |           foreground: 'hsl(var(--destructive-foreground))',
52 |         },
53 |         muted: {
54 |           DEFAULT: 'hsl(var(--muted))',
55 |           foreground: 'hsl(var(--muted-foreground))',
56 |         },
57 |         accent: {
58 |           DEFAULT: 'hsl(var(--accent))',
59 |           foreground: 'hsl(var(--accent-foreground))',
60 |         },
61 |         popover: {
62 |           DEFAULT: 'hsl(var(--popover))',
63 |           foreground: 'hsl(var(--popover-foreground))',
64 |         },
65 |         card: {
66 |           DEFAULT: 'hsl(var(--card))',
67 |           foreground: 'hsl(var(--card-foreground))',
68 |         },
69 |       },
70 |     },
71 |   },
72 |   plugins: [require('tailwindcss-animate')],
73 | };
74 | export default config;
75 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a href="https://sdk.vercel.ai/rsc-demo">
 2 |   <img alt="Generative UI Demo" src="https://github.com/vercel/ai/assets/4060187/f21fa839-c710-4f09-9af4-2056f603d98f">
 3 |   <h1 align="center">Generative UI Demo</h1>
 4 | </a>
 5 | 
 6 | <p align="center">
 7 |   An experimental preview of AI SDK 3.0 with Generative UI support
 8 | </p>
 9 | 
10 | ## Features
11 | 
12 | - [Next.js](https://nextjs.org) App Router + React Server Components
13 | - [Vercel AI SDK 3.0](https://sdk.vercel.ai/docs) for Generative UI
14 | - OpenAI Tools/Function Calling
15 | - [shadcn/ui](https://ui.shadcn.com)
16 | 
17 | ## Quick Links
18 | 
19 | - [Read the blog post](https://vercel.com/blog/ai-sdk-3-generative-ui)
20 | - [See the demo](https://sdk.vercel.ai/demo)
21 | - [Visit the docs](https://sdk.vercel.ai/docs/concepts/ai-rsc)
22 | 
23 | ## Deploy Your Own
24 | 
25 | You can deploy your own version of the demo to Vercel with one click:
26 | 
27 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Fblob%2Fmain%2Fexamples%2Fnext-ai-rsc&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key&envLink=https%3A%2F%2Fplatform.openai.com%2Fapi-keys)
28 | 
29 | ## Running locally
30 | 
31 | You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js AI Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary.
32 | 
33 | > Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.
34 | 
35 | 1. Install Vercel CLI: `npm i -g vercel`
36 | 2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
37 | 3. Download your environment variables: `vercel env pull`
38 | 
39 | ```bash
40 | pnpm install
41 | pnpm dev
42 | ```
43 | 
44 | Your app should now be running on [localhost:3000](http://localhost:3000/).
45 | 
46 | ## Authors
47 | 
48 | This library is created by [Vercel](https://vercel.com) and [Next.js](https://nextjs.org) team members, with contributions from:
49 | 
50 | - Shu Ding ([@shuding\_](https://twitter.com/shuding_)) - [Vercel](https://vercel.com)
51 | - Max Leiter ([@max_leiter](https://twitter.com/max_leiter)) - [Vercel](https://vercel.com)
52 | - Jeremy Philemon ([@jeremyphilemon](https://github.com/jeremyphilemon)) - [Vercel](https://vercel.com)
53 | - shadcn ([@shadcn](https://twitter.com/shadcn)) - [Vercel](https://vercel.com)
54 | - Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer)) - [Vercel](https://vercel.com)
55 |

--------------------------------------------------------------------------------
/components/empty-screen.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/ui/button";
 2 | import { ExternalLink } from "@/components/external-link";
 3 | import { IconArrowRight } from "@/components/ui/icons";
 4 | 
 5 | const exampleMessages = [
 6 |   {
 7 |     heading: "Play pacman",
 8 |     message: "Play pacman",
 9 |   },
10 |   {
11 |     heading: "Throw confetti",
12 |     message: "Throw confetti",
13 |   },
14 |   {
15 |     heading: "What are the trending stocks?",
16 |     message: "What are the trending stocks?",
17 |   },
18 |   {
19 |     heading: "What's the stock price of AAPL?",
20 |     message: "What's the stock price of AAPL?",
21 |   },
22 |   {
23 |     heading: "I'd like to buy 10 shares of MSFT",
24 |     message: "I'd like to buy 10 shares of MSFT",
25 |   },
26 | ];
27 | 
28 | export function EmptyScreen({
29 |   submitMessage,
30 | }: {
31 |   submitMessage: (message: string) => void;
32 | }) {
33 |   return (
34 |     <div className="mx-auto max-w-2xl px-4">
35 |       <div className="rounded-lg border bg-background p-8 mb-4">
36 |         <h1 className="mb-2 text-lg font-semibold">
37 |           Welcome to AI SDK 3.0 Generative UI demo!
38 |         </h1>
39 |         <p className="mb-2 leading-normal text-muted-foreground">
40 |           This is a demo of an interactive financial assistant. It can show you
41 |           stocks, tell you their prices, and even help you buy shares.
42 |         </p>
43 |         <p className="mb-2 leading-normal text-muted-foreground">
44 |           The demo is built with{" "}
45 |           <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and the{" "}
46 |           <ExternalLink href="https://sdk.vercel.ai/docs">
47 |             Vercel AI SDK
48 |           </ExternalLink>
49 |           .
50 |         </p>
51 |         <p className="mb-2 leading-normal text-muted-foreground">
52 |           It uses{" "}
53 |           <ExternalLink href="https://vercel.com/blog/ai-sdk-3-generative-ui">
54 |             React Server Components
55 |           </ExternalLink>{" "}
56 |           to combine text with UI generated as output of the LLM. The UI state
57 |           is synced through the SDK so the model is aware of your interactions
58 |           as they happen.
59 |         </p>
60 |         <p className="leading-normal text-muted-foreground">Try an example:</p>
61 |         <div className="mt-4 flex flex-col items-start space-y-2 mb-4">
62 |           {exampleMessages.map((message, index) => (
63 |             <Button
64 |               key={index}
65 |               variant="link"
66 |               className="h-auto p-0 text-base"
67 |               onClick={async () => {
68 |                 submitMessage(message.message);
69 |               }}
70 |             >
71 |               <IconArrowRight className="mr-2 text-muted-foreground" />
72 |               {message.heading}
73 |             </Button>
74 |           ))}
75 |         </div>
76 |       </div>
77 |       <p className="leading-normal text-muted-foreground text-[0.8rem] text-center">
78 |         Note: This is not real financial advice.
79 |       </p>
80 |     </div>
81 |   );
82 | }
83 |

--------------------------------------------------------------------------------
/lib/utils/index.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   TAnyToolDefinitionArray,
  3 |   TToolDefinitionMap,
  4 | } from '@/lib/utils/tool-definition';
  5 | import { OpenAIStream } from 'ai';
  6 | import type OpenAI from 'openai';
  7 | import zodToJsonSchema from 'zod-to-json-schema';
  8 | import { type ClassValue, clsx } from 'clsx';
  9 | import { twMerge } from 'tailwind-merge';
 10 | import { z } from 'zod';
 11 | 
 12 | const consumeStream = async (stream: ReadableStream) => {
 13 |   const reader = stream.getReader();
 14 |   while (true) {
 15 |     const { done } = await reader.read();
 16 |     if (done) break;
 17 |   }
 18 | };
 19 | 
 20 | export function runOpenAICompletion<
 21 |   T extends Omit<
 22 |     Parameters<typeof OpenAI.prototype.chat.completions.create>[0],
 23 |     'functions'
 24 |   >,
 25 |   const TFunctions extends TAnyToolDefinitionArray,
 26 | >(
 27 |   openai: OpenAI,
 28 |   params: T & {
 29 |     functions: TFunctions;
 30 |   },
 31 | ) {
 32 |   let text = '';
 33 |   let hasFunction = false;
 34 | 
 35 |   type TToolMap = TToolDefinitionMap<TFunctions>;
 36 |   let onTextContent: (text: string, isFinal: boolean) => void = () => {};
 37 | 
 38 |   const functionsMap: Record<string, TFunctions[number]> = {};
 39 |   for (const fn of params.functions) {
 40 |     functionsMap[fn.name] = fn;
 41 |   }
 42 | 
 43 |   let onFunctionCall = {} as any;
 44 | 
 45 |   const { functions, ...rest } = params;
 46 | 
 47 |   (async () => {
 48 |     consumeStream(
 49 |       OpenAIStream(
 50 |         (await openai.chat.completions.create({
 51 |           ...rest,
 52 |           stream: true,
 53 |           functions: functions.map(fn => ({
 54 |             name: fn.name,
 55 |             description: fn.description,
 56 |             parameters: zodToJsonSchema(fn.parameters) as Record<
 57 |               string,
 58 |               unknown
 59 |             >,
 60 |           })),
 61 |         })) as any,
 62 |         {
 63 |           async experimental_onFunctionCall(functionCallPayload) {
 64 |             hasFunction = true;
 65 | 
 66 |             if (!onFunctionCall[functionCallPayload.name]) {
 67 |               return;
 68 |             }
 69 | 
 70 |             // we need to convert arguments from z.input to z.output
 71 |             // this is necessary if someone uses a .default in their schema
 72 |             const zodSchema = functionsMap[functionCallPayload.name].parameters;
 73 |             const parsedArgs = zodSchema.safeParse(
 74 |               functionCallPayload.arguments,
 75 |             );
 76 | 
 77 |             if (!parsedArgs.success) {
 78 |               throw new Error(
 79 |                 `Invalid function call in message. Expected a function call object`,
 80 |               );
 81 |             }
 82 | 
 83 |             onFunctionCall[functionCallPayload.name]?.(parsedArgs.data);
 84 |           },
 85 |           onToken(token) {
 86 |             text += token;
 87 |             if (text.startsWith('{')) return;
 88 |             onTextContent(text, false);
 89 |           },
 90 |           onFinal() {
 91 |             if (hasFunction) return;
 92 |             onTextContent(text, true);
 93 |           },
 94 |         },
 95 |       ),
 96 |     );
 97 |   })();
 98 | 
 99 |   return {
100 |     onTextContent: (
101 |       callback: (text: string, isFinal: boolean) => void | Promise<void>,
102 |     ) => {
103 |       onTextContent = callback;
104 |     },
105 |     onFunctionCall: <TName extends TFunctions[number]['name']>(
106 |       name: TName,
107 |       callback: (
108 |         args: z.output<
109 |           TName extends keyof TToolMap
110 |             ? TToolMap[TName] extends infer TToolDef
111 |               ? TToolDef extends TAnyToolDefinitionArray[number]
112 |                 ? TToolDef['parameters']
113 |                 : never
114 |               : never
115 |             : never
116 |         >,
117 |       ) => void | Promise<void>,
118 |     ) => {
119 |       onFunctionCall[name] = callback;
120 |     },
121 |   };
122 | }
123 | 
124 | export function cn(...inputs: ClassValue[]) {
125 |   return twMerge(clsx(inputs));
126 | }
127 | 
128 | export const formatNumber = (value: number) =>
129 |   new Intl.NumberFormat('en-US', {
130 |     style: 'currency',
131 |     currency: 'USD',
132 |   }).format(value);
133 | 
134 | export const runAsyncFnWithoutBlocking = (
135 |   fn: (...args: any) => Promise<any>,
136 | ) => {
137 |   fn();
138 | };
139 | 
140 | export const sleep = (ms: number) =>
141 |   new Promise(resolve => setTimeout(resolve, ms));
142 | 
143 | // Fake data
144 | export function getStockPrice(name: string) {
145 |   let total = 0;
146 |   for (let i = 0; i < name.length; i++) {
147 |     total = (total + name.charCodeAt(i) * 9999121) % 9999;
148 |   }
149 |   return total / 100;
150 | }
151 |

--------------------------------------------------------------------------------
/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | // Inspired by react-hot-toast library
  2 | import * as React from 'react';
  3 | 
  4 | import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
  5 | 
  6 | const TOAST_LIMIT = 1;
  7 | const TOAST_REMOVE_DELAY = 1000000;
  8 | 
  9 | type ToasterToast = ToastProps & {
 10 |   id: string;
 11 |   title?: React.ReactNode;
 12 |   description?: React.ReactNode;
 13 |   action?: ToastActionElement;
 14 | };
 15 | 
 16 | const actionTypes = {
 17 |   ADD_TOAST: 'ADD_TOAST',
 18 |   UPDATE_TOAST: 'UPDATE_TOAST',
 19 |   DISMISS_TOAST: 'DISMISS_TOAST',
 20 |   REMOVE_TOAST: 'REMOVE_TOAST',
 21 | } as const;
 22 | 
 23 | let count = 0;
 24 | 
 25 | function genId() {
 26 |   count = (count + 1) % Number.MAX_SAFE_INTEGER;
 27 |   return count.toString();
 28 | }
 29 | 
 30 | type ActionType = typeof actionTypes;
 31 | 
 32 | type Action =
 33 |   | {
 34 |       type: ActionType['ADD_TOAST'];
 35 |       toast: ToasterToast;
 36 |     }
 37 |   | {
 38 |       type: ActionType['UPDATE_TOAST'];
 39 |       toast: Partial<ToasterToast>;
 40 |     }
 41 |   | {
 42 |       type: ActionType['DISMISS_TOAST'];
 43 |       toastId?: ToasterToast['id'];
 44 |     }
 45 |   | {
 46 |       type: ActionType['REMOVE_TOAST'];
 47 |       toastId?: ToasterToast['id'];
 48 |     };
 49 | 
 50 | interface State {
 51 |   toasts: ToasterToast[];
 52 | }
 53 | 
 54 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 55 | 
 56 | const addToRemoveQueue = (toastId: string) => {
 57 |   if (toastTimeouts.has(toastId)) {
 58 |     return;
 59 |   }
 60 | 
 61 |   const timeout = setTimeout(() => {
 62 |     toastTimeouts.delete(toastId);
 63 |     dispatch({
 64 |       type: 'REMOVE_TOAST',
 65 |       toastId: toastId,
 66 |     });
 67 |   }, TOAST_REMOVE_DELAY);
 68 | 
 69 |   toastTimeouts.set(toastId, timeout);
 70 | };
 71 | 
 72 | export const reducer = (state: State, action: Action): State => {
 73 |   switch (action.type) {
 74 |     case 'ADD_TOAST':
 75 |       return {
 76 |         ...state,
 77 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 78 |       };
 79 | 
 80 |     case 'UPDATE_TOAST':
 81 |       return {
 82 |         ...state,
 83 |         toasts: state.toasts.map(t =>
 84 |           t.id === action.toast.id ? { ...t, ...action.toast } : t,
 85 |         ),
 86 |       };
 87 | 
 88 |     case 'DISMISS_TOAST': {
 89 |       const { toastId } = action;
 90 | 
 91 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 92 |       // but I'll keep it here for simplicity
 93 |       if (toastId) {
 94 |         addToRemoveQueue(toastId);
 95 |       } else {
 96 |         state.toasts.forEach(toast => {
 97 |           addToRemoveQueue(toast.id);
 98 |         });
 99 |       }
100 | 
101 |       return {
102 |         ...state,
103 |         toasts: state.toasts.map(t =>
104 |           t.id === toastId || toastId === undefined
105 |             ? {
106 |                 ...t,
107 |                 open: false,
108 |               }
109 |             : t,
110 |         ),
111 |       };
112 |     }
113 |     case 'REMOVE_TOAST':
114 |       if (action.toastId === undefined) {
115 |         return {
116 |           ...state,
117 |           toasts: [],
118 |         };
119 |       }
120 |       return {
121 |         ...state,
122 |         toasts: state.toasts.filter(t => t.id !== action.toastId),
123 |       };
124 |   }
125 | };
126 | 
127 | const listeners: Array<(state: State) => void> = [];
128 | 
129 | let memoryState: State = { toasts: [] };
130 | 
131 | function dispatch(action: Action) {
132 |   memoryState = reducer(memoryState, action);
133 |   listeners.forEach(listener => {
134 |     listener(memoryState);
135 |   });
136 | }
137 | 
138 | type Toast = Omit<ToasterToast, 'id'>;
139 | 
140 | function toast({ ...props }: Toast) {
141 |   const id = genId();
142 | 
143 |   const update = (props: ToasterToast) =>
144 |     dispatch({
145 |       type: 'UPDATE_TOAST',
146 |       toast: { ...props, id },
147 |     });
148 |   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
149 | 
150 |   dispatch({
151 |     type: 'ADD_TOAST',
152 |     toast: {
153 |       ...props,
154 |       id,
155 |       open: true,
156 |       onOpenChange: open => {
157 |         if (!open) dismiss();
158 |       },
159 |     },
160 |   });
161 | 
162 |   return {
163 |     id: id,
164 |     dismiss,
165 |     update,
166 |   };
167 | }
168 | 
169 | function useToast() {
170 |   const [state, setState] = React.useState<State>(memoryState);
171 | 
172 |   React.useEffect(() => {
173 |     listeners.push(setState);
174 |     return () => {
175 |       const index = listeners.indexOf(setState);
176 |       if (index > -1) {
177 |         listeners.splice(index, 1);
178 |       }
179 |     };
180 |   }, [state]);
181 | 
182 |   return {
183 |     ...state,
184 |     toast,
185 |     dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
186 |   };
187 | }
188 | 
189 | export { useToast, toast };
190 |

--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import { Cross2Icon } from '@radix-ui/react-icons';
  3 | import * as ToastPrimitives from '@radix-ui/react-toast';
  4 | import { cva, type VariantProps } from 'class-variance-authority';
  5 | 
  6 | import { cn } from '@/lib/utils';
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider;
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
 18 |       className,
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ));
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 24 | 
 25 | const toastVariants = cva(
 26 |   'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: 'border bg-background text-foreground',
 31 |         destructive:
 32 |           'destructive group border-destructive bg-destructive text-destructive-foreground',
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: 'default',
 37 |     },
 38 |   },
 39 | );
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   );
 53 | });
 54 | Toast.displayName = ToastPrimitives.Root.displayName;
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
 64 |       className,
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ));
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName;
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
 79 |       className,
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <Cross2Icon className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ));
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName;
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn('text-sm font-semibold [&+div]:text-xs', className)}
 96 |     {...props}
 97 |   />
 98 | ));
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName;
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn('text-sm opacity-90', className)}
108 |     {...props}
109 |   />
110 | ));
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName;
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>;
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | };
128 |

--------------------------------------------------------------------------------
/components/llm-stocks/stock-purchase.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useId, useState } from 'react';
  4 | import { useActions, useAIState, useUIState } from 'ai/rsc';
  5 | import { formatNumber } from '@/lib/utils';
  6 | 
  7 | import type { AI } from '../../app/action';
  8 | 
  9 | export function Purchase({
 10 |   defaultAmount,
 11 |   name,
 12 |   price,
 13 | }: {
 14 |   defaultAmount?: number;
 15 |   name: string;
 16 |   price: number;
 17 | }) {
 18 |   const [value, setValue] = useState(defaultAmount || 100);
 19 |   const [purchasingUI, setPurchasingUI] = useState<null | React.ReactNode>(
 20 |     null,
 21 |   );
 22 |   const [history, setHistory] = useAIState<typeof AI>();
 23 |   const [, setMessages] = useUIState<typeof AI>();
 24 |   const { confirmPurchase } = useActions();
 25 | 
 26 |   // Unique identifier for this UI component.
 27 |   const id = useId();
 28 | 
 29 |   // Whenever the slider changes, we need to update the local value state and the history
 30 |   // so LLM also knows what's going on.
 31 |   function onSliderChange(e: React.ChangeEvent<HTMLInputElement>) {
 32 |     const newValue = Number(e.target.value);
 33 |     setValue(newValue);
 34 | 
 35 |     // Insert a hidden history info to the list.
 36 |     const info = {
 37 |       role: 'system' as const,
 38 |       content: `[User has changed to purchase ${newValue} shares of ${name}. Total cost: $${(
 39 |         newValue * price
 40 |       ).toFixed(2)}]`,
 41 | 
 42 |       // Identifier of this UI component, so we don't insert it many times.
 43 |       id,
 44 |     };
 45 | 
 46 |     // If last history state is already this info, update it. This is to avoid
 47 |     // adding every slider change to the history.
 48 |     if (history[history.length - 1]?.id === id) {
 49 |       setHistory([...history.slice(0, -1), info]);
 50 |       return;
 51 |     }
 52 | 
 53 |     // If it doesn't exist, append it to history.
 54 |     setHistory([...history, info]);
 55 |   }
 56 | 
 57 |   return (
 58 |     <div className="rounded-xl bg-zinc-950 p-4 text-green-400 border">
 59 |       <div className="float-right inline-block rounded-full bg-white/10 px-2 py-1 text-xs">
 60 |         +1.23% ↑
 61 |       </div>
 62 |       <div className="text-lg text-zinc-300">{name}</div>
 63 |       <div className="text-3xl font-bold">${price}</div>
 64 |       {purchasingUI ? (
 65 |         <div className="mt-4 text-zinc-200">{purchasingUI}</div>
 66 |       ) : (
 67 |         <>
 68 |           <div className="relative mt-6 pb-6">
 69 |             <p>Shares to purchase</p>
 70 |             <input
 71 |               id="labels-range-input"
 72 |               type="range"
 73 |               value={value}
 74 |               onChange={onSliderChange}
 75 |               min="10"
 76 |               max="1000"
 77 |               className="h-1 w-full cursor-pointer appearance-none rounded-lg bg-zinc-600 accent-green-500 dark:bg-zinc-700"
 78 |             />
 79 |             <span className="absolute bottom-1 start-0 text-xs text-zinc-400">
 80 |               10
 81 |             </span>
 82 |             <span className="absolute bottom-1 start-1/3 -translate-x-1/2 text-xs text-zinc-400 rtl:translate-x-1/2">
 83 |               100
 84 |             </span>
 85 |             <span className="absolute bottom-1 start-2/3 -translate-x-1/2 text-xs text-zinc-400 rtl:translate-x-1/2">
 86 |               500
 87 |             </span>
 88 |             <span className="absolute bottom-1 end-0 text-xs text-zinc-400">
 89 |               1000
 90 |             </span>
 91 |           </div>
 92 | 
 93 |           <div className="mt-6">
 94 |             <p>Total cost</p>
 95 |             <div className="flex items-center sm:items-end sm:gap-2 text-xl sm:text-3xl font-bold flex-wrap">
 96 |               <div className="flex flex-col basis-1/3 sm:basis-auto sm:flex-row sm:items-center sm:gap-2 tabular-nums">
 97 |                 {value}
 98 |                 <span className="mb-1 text-sm font-normal text-zinc-600 dark:text-zinc-400 sm:mb-0">
 99 |                   shares
100 |                 </span>
101 |               </div>
102 |               <div className="basis-1/3 text-center sm:basis-auto">×</div>
103 |               <span className="flex flex-col basis-1/3 sm:basis-auto sm:flex-row sm:items-center sm:gap-2 tabular-nums">
104 |                 ${price}
105 |                 <span className="mb-1 ml-1 text-sm font-normal text-zinc-600 dark:text-zinc-400 sm:mb-0">
106 |                   per share
107 |                 </span>
108 |               </span>
109 |               <div className="basis-full text-center sm:text-left sm:basis-auto border-t border-t-zinc-700 mt-2 pt-2 sm:border-0 sm:mt-0 sm:pt-0">
110 |                 = <span>{formatNumber(value * price)}</span>
111 |               </div>
112 |             </div>
113 |           </div>
114 | 
115 |           <button
116 |             className="mt-6 w-full rounded-lg bg-green-500 dark:bg-green-500 px-4 py-2 text-zinc-900"
117 |             onClick={async () => {
118 |               const response = await confirmPurchase(name, price, value);
119 |               setPurchasingUI(response.purchasingUI);
120 | 
121 |               // Insert a new system message to the UI.
122 |               setMessages((currentMessages: any) => [
123 |                 ...currentMessages,
124 |                 response.newMessage,
125 |               ]);
126 |             }}
127 |           >
128 |             Purchase
129 |           </button>
130 |         </>
131 |       )}
132 |     </div>
133 |   );
134 | }
135 |

--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useEffect, useRef, useState } from 'react';
  4 | 
  5 | import { useUIState, useActions, useAIState } from 'ai/rsc';
  6 | import { UserMessage } from '@/components/llm-stocks/message';
  7 | 
  8 | import { type AI } from './action';
  9 | import { ChatScrollAnchor } from '@/lib/hooks/chat-scroll-anchor';
 10 | import { FooterText } from '@/components/footer';
 11 | import Textarea from 'react-textarea-autosize';
 12 | import { useEnterSubmit } from '@/lib/hooks/use-enter-submit';
 13 | import {
 14 |   Tooltip,
 15 |   TooltipContent,
 16 |   TooltipTrigger,
 17 | } from '@/components/ui/tooltip';
 18 | import { IconArrowElbow, IconPlus } from '@/components/ui/icons';
 19 | import { Button } from '@/components/ui/button';
 20 | import { ChatList } from '@/components/chat-list';
 21 | import { EmptyScreen } from '@/components/empty-screen';
 22 | import { toast } from '@/components/ui/use-toast';
 23 | 
 24 | export default function Page() {
 25 |   const [messages, setMessages] = useUIState<typeof AI>();
 26 |   const { submitUserMessage } = useActions();
 27 |   const [inputValue, setInputValue] = useState('');
 28 |   const { formRef, onKeyDown } = useEnterSubmit();
 29 |   const inputRef = useRef<HTMLTextAreaElement>(null);
 30 | 
 31 |   useEffect(() => {
 32 |     const handleKeyDown = (e: KeyboardEvent) => {
 33 |       if (e.key === '/') {
 34 |         if (
 35 |           e.target &&
 36 |           ['INPUT', 'TEXTAREA'].includes((e.target as any).nodeName)
 37 |         ) {
 38 |           return;
 39 |         }
 40 |         e.preventDefault();
 41 |         e.stopPropagation();
 42 |         if (inputRef?.current) {
 43 |           inputRef.current.focus();
 44 |         }
 45 |       }
 46 |     };
 47 | 
 48 |     document.addEventListener('keydown', handleKeyDown);
 49 | 
 50 |     return () => {
 51 |       document.removeEventListener('keydown', handleKeyDown);
 52 |     };
 53 |   }, [inputRef]);
 54 | 
 55 |   return (
 56 |     <div>
 57 |       <div className="pb-[200px] pt-4 md:pt-10">
 58 |         {messages.length ? (
 59 |           <>
 60 |             <ChatList messages={messages} />
 61 |           </>
 62 |         ) : (
 63 |           <EmptyScreen
 64 |             submitMessage={async message => {
 65 |               // Add user message UI
 66 |               setMessages(currentMessages => [
 67 |                 ...currentMessages,
 68 |                 {
 69 |                   id: Date.now(),
 70 |                   display: <UserMessage>{message}</UserMessage>,
 71 |                 },
 72 |               ]);
 73 | 
 74 |               // Submit and get response message
 75 |               const responseMessage = await submitUserMessage(message);
 76 |               setMessages(currentMessages => [
 77 |                 ...currentMessages,
 78 |                 responseMessage,
 79 |               ]);
 80 |             }}
 81 |           />
 82 |         )}
 83 |         <ChatScrollAnchor trackVisibility={true} />
 84 |       </div>
 85 |       <div className="fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% duration-300 ease-in-out animate-in dark:from-background/10 dark:from-10% dark:to-background/80 peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
 86 |         <div className="mx-auto sm:max-w-2xl sm:px-4">
 87 |           <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
 88 |             <form
 89 |               ref={formRef}
 90 |               onSubmit={async (e: any) => {
 91 |                 e.preventDefault();
 92 | 
 93 |                 // Blur focus on mobile
 94 |                 if (window.innerWidth < 600) {
 95 |                   e.target['message']?.blur();
 96 |                 }
 97 | 
 98 |                 const value = inputValue.trim();
 99 |                 setInputValue('');
100 |                 if (!value) return;
101 | 
102 |                 // Add user message UI
103 |                 setMessages(currentMessages => [
104 |                   ...currentMessages,
105 |                   {
106 |                     id: Date.now(),
107 |                     display: <UserMessage>{value}</UserMessage>,
108 |                   },
109 |                 ]);
110 | 
111 |                 try {
112 |                   // Submit and get response message
113 |                   const responseMessage = await submitUserMessage(value);
114 |                   setMessages(currentMessages => [
115 |                     ...currentMessages,
116 |                     responseMessage,
117 |                   ]);
118 |                 } catch (error) {
119 |                   // You may want to show a toast or trigger an error state.
120 |                   console.error(error);
121 |                 }
122 |               }}
123 |             >
124 |               <div className="relative flex flex-col w-full px-8 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12">
125 |                 <Tooltip>
126 |                   <TooltipTrigger asChild>
127 |                     <Button
128 |                       variant="outline"
129 |                       size="icon"
130 |                       className="absolute left-0 w-8 h-8 p-0 rounded-full top-4 bg-background sm:left-4"
131 |                       onClick={e => {
132 |                         e.preventDefault();
133 |                         window.location.reload();
134 |                       }}
135 |                     >
136 |                       <IconPlus />
137 |                       <span className="sr-only">New Chat</span>
138 |                     </Button>
139 |                   </TooltipTrigger>
140 |                   <TooltipContent>New Chat</TooltipContent>
141 |                 </Tooltip>
142 |                 <Textarea
143 |                   ref={inputRef}
144 |                   tabIndex={0}
145 |                   onKeyDown={onKeyDown}
146 |                   placeholder="Send a message."
147 |                   className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
148 |                   autoFocus
149 |                   spellCheck={false}
150 |                   autoComplete="off"
151 |                   autoCorrect="off"
152 |                   name="message"
153 |                   rows={1}
154 |                   value={inputValue}
155 |                   onChange={e => setInputValue(e.target.value)}
156 |                 />
157 |                 <div className="absolute right-0 top-4 sm:right-4">
158 |                   <Tooltip>
159 |                     <TooltipTrigger asChild>
160 |                       <Button
161 |                         type="submit"
162 |                         size="icon"
163 |                         disabled={inputValue === ''}
164 |                       >
165 |                         <IconArrowElbow />
166 |                         <span className="sr-only">Send message</span>
167 |                       </Button>
168 |                     </TooltipTrigger>
169 |                     <TooltipContent>Send message</TooltipContent>
170 |                   </Tooltip>
171 |                 </div>
172 |               </div>
173 |             </form>
174 |             <FooterText className="hidden sm:block" />
175 |           </div>
176 |         </div>
177 |       </div>
178 |     </div>
179 |   );
180 | }
181 |

--------------------------------------------------------------------------------
/app/action.tsx:
--------------------------------------------------------------------------------
  1 | import "server-only";
  2 | 
  3 | import { createAI, createStreamableUI, getMutableAIState } from "ai/rsc";
  4 | import OpenAI from "openai";
  5 | 
  6 | import {
  7 |   spinner,
  8 |   BotCard,
  9 |   BotMessage,
 10 |   SystemMessage,
 11 |   Stock,
 12 |   Purchase,
 13 |   Stocks,
 14 |   Events,
 15 | } from "@/components/llm-stocks";
 16 | import { Pacman } from "@/components/pacman";
 17 | import { Confetti } from "@/components/confetti";
 18 | 
 19 | import {
 20 |   runAsyncFnWithoutBlocking,
 21 |   sleep,
 22 |   formatNumber,
 23 |   runOpenAICompletion,
 24 | } from "@/lib/utils";
 25 | import { z } from "zod";
 26 | import { StockSkeleton } from "@/components/llm-stocks/stock-skeleton";
 27 | import { EventsSkeleton } from "@/components/llm-stocks/events-skeleton";
 28 | import { StocksSkeleton } from "@/components/llm-stocks/stocks-skeleton";
 29 | import { messageRateLimit } from "@/lib/rate-limit";
 30 | import { headers } from "next/headers";
 31 | 
 32 | const openai = new OpenAI({
 33 |   apiKey: process.env.OPENAI_API_KEY || "",
 34 | });
 35 | 
 36 | async function confirmPurchase(symbol: string, price: number, amount: number) {
 37 |   "use server";
 38 | 
 39 |   const aiState = getMutableAIState<typeof AI>();
 40 | 
 41 |   const purchasing = createStreamableUI(
 42 |     <div className="inline-flex items-start gap-1 md:items-center">
 43 |       {spinner}
 44 |       <p className="mb-2">
 45 |         Purchasing {amount} ${symbol}...
 46 |       </p>
 47 |     </div>,
 48 |   );
 49 | 
 50 |   const systemMessage = createStreamableUI(null);
 51 | 
 52 |   runAsyncFnWithoutBlocking(async () => {
 53 |     // You can update the UI at any point.
 54 |     await sleep(1000);
 55 | 
 56 |     purchasing.update(
 57 |       <div className="inline-flex items-start gap-1 md:items-center">
 58 |         {spinner}
 59 |         <p className="mb-2">
 60 |           Purchasing {amount} ${symbol}... working on it...
 61 |         </p>
 62 |       </div>,
 63 |     );
 64 | 
 65 |     await sleep(1000);
 66 | 
 67 |     purchasing.done(
 68 |       <div>
 69 |         <p className="mb-2">
 70 |           You have successfully purchased {amount} ${symbol}. Total cost:{" "}
 71 |           {formatNumber(amount * price)}
 72 |         </p>
 73 |       </div>,
 74 |     );
 75 | 
 76 |     systemMessage.done(
 77 |       <SystemMessage>
 78 |         You have purchased {amount} shares of {symbol} at ${price}. Total cost ={" "}
 79 |         {formatNumber(amount * price)}.
 80 |       </SystemMessage>,
 81 |     );
 82 | 
 83 |     aiState.done([
 84 |       ...aiState.get(),
 85 |       {
 86 |         role: "system",
 87 |         content: `[User has purchased ${amount} shares of ${symbol} at ${price}. Total cost = ${
 88 |           amount * price
 89 |         }]`,
 90 |       },
 91 |     ]);
 92 |   });
 93 | 
 94 |   return {
 95 |     purchasingUI: purchasing.value,
 96 |     newMessage: {
 97 |       id: Date.now(),
 98 |       display: systemMessage.value,
 99 |     },
100 |   };
101 | }
102 | 
103 | async function submitUserMessage(content: string) {
104 |   "use server";
105 | 
106 |   const reply = createStreamableUI(
107 |     <BotMessage className="items-center">{spinner}</BotMessage>,
108 |   );
109 | 
110 |   const ip = headers().get("x-real-ip") ?? "local";
111 |   const rl = await messageRateLimit.limit(ip);
112 | 
113 |   if (!rl.success) {
114 |     reply.done(
115 |       <BotMessage>Rate limit exceeded. Try again in 15 minutes.</BotMessage>,
116 |     );
117 |     return {
118 |       id: Date.now(),
119 |       display: reply.value,
120 |     };
121 |   }
122 | 
123 |   const aiState = getMutableAIState<typeof AI>();
124 |   aiState.update([
125 |     ...aiState.get(),
126 |     {
127 |       role: "user",
128 |       content,
129 |     },
130 |   ]);
131 | 
132 |   const completion = runOpenAICompletion(openai, {
133 |     model: "gpt-4-turbo-preview",
134 |     stream: true,
135 |     messages: [
136 |       {
137 |         role: "system",
138 |         content: `\
139 | You are a stock trading conversation bot and you can help users buy stocks, step by step.
140 | You can let the user play pacman, as many times as they want.
141 | You can let the user throw confetti, as many times as they want, to celebrate.
142 | You and the user can discuss stock prices and the user can adjust the amount of stocks they want to buy, or place an order, in the UI.
143 | 
144 | Messages inside [] means that it's a UI element or a user event. For example:
145 | - "[Price of AAPL = 100]" means that an interface of the stock price of AAPL is shown to the user.
146 | - "[User has changed the amount of AAPL to 10]" means that the user has changed the amount of AAPL to 10 in the UI.
147 | 
148 | If the user requests playing pacman, call \`play_pacman\` to play pacman.
149 | If the user requests throwing confetti, call \`throw_confetti\` to throw confetti.
150 | If the user requests purchasing a stock, call \`show_stock_purchase_ui\` to show the purchase UI.
151 | If the user just wants the price, call \`show_stock_price\` to show the price.
152 | If you want to show trending stocks, call \`list_stocks\`.
153 | If you want to show events, call \`get_events\`.
154 | If the user wants to sell stock, or complete another impossible task, respond that you are a demo and cannot do that.
155 | 
156 | Besides that, you can also chat with users and do some calculations if needed.`,
157 |       },
158 |       ...aiState.get().map((info: any) => ({
159 |         role: info.role,
160 |         content: info.content,
161 |         name: info.name,
162 |       })),
163 |     ],
164 |     functions: [
165 |       {
166 |         name: "play_pacman",
167 |         description: "Play pacman with the user.",
168 |         parameters: z.object({}),
169 |       },
170 |       {
171 |         name: "throw_confetti",
172 |         description: "Throw confetti to the user. Use this to celebrate.",
173 |         parameters: z.object({}),
174 |       },
175 |       {
176 |         name: "show_stock_price",
177 |         description:
178 |           "Get the current stock price of a given stock or currency. Use this to show the price to the user.",
179 |         parameters: z.object({
180 |           symbol: z
181 |             .string()
182 |             .describe(
183 |               "The name or symbol of the stock or currency. e.g. DOGE/AAPL/USD.",
184 |             ),
185 |           price: z.number().describe("The price of the stock."),
186 |           delta: z.number().describe("The change in price of the stock"),
187 |         }),
188 |       },
189 |       {
190 |         name: "show_stock_purchase_ui",
191 |         description:
192 |           "Show price and the UI to purchase a stock or currency. Use this if the user wants to purchase a stock or currency.",
193 |         parameters: z.object({
194 |           symbol: z
195 |             .string()
196 |             .describe(
197 |               "The name or symbol of the stock or currency. e.g. DOGE/AAPL/USD.",
198 |             ),
199 |           price: z.number().describe("The price of the stock."),
200 |           numberOfShares: z
201 |             .number()
202 |             .describe(
203 |               "The **number of shares** for a stock or currency to purchase. Can be optional if the user did not specify it.",
204 |             ),
205 |         }),
206 |       },
207 |       {
208 |         name: "list_stocks",
209 |         description: "List three imaginary stocks that are trending.",
210 |         parameters: z.object({
211 |           stocks: z.array(
212 |             z.object({
213 |               symbol: z.string().describe("The symbol of the stock"),
214 |               price: z.number().describe("The price of the stock"),
215 |               delta: z.number().describe("The change in price of the stock"),
216 |             }),
217 |           ),
218 |         }),
219 |       },
220 |       {
221 |         name: "get_events",
222 |         description:
223 |           "List funny imaginary events between user highlighted dates that describe stock activity.",
224 |         parameters: z.object({
225 |           events: z.array(
226 |             z.object({
227 |               date: z
228 |                 .string()
229 |                 .describe("The date of the event, in ISO-8601 format"),
230 |               headline: z.string().describe("The headline of the event"),
231 |               description: z.string().describe("The description of the event"),
232 |             }),
233 |           ),
234 |         }),
235 |       },
236 |     ],
237 |     temperature: 0,
238 |   });
239 | 
240 |   completion.onTextContent((content: string, isFinal: boolean) => {
241 |     reply.update(<BotMessage>{content}</BotMessage>);
242 |     if (isFinal) {
243 |       reply.done();
244 |       aiState.done([...aiState.get(), { role: "assistant", content }]);
245 |     }
246 |   });
247 | 
248 |   completion.onFunctionCall("list_stocks", async ({ stocks }) => {
249 |     reply.update(
250 |       <BotCard>
251 |         <StocksSkeleton />
252 |       </BotCard>,
253 |     );
254 | 
255 |     await sleep(1000);
256 | 
257 |     reply.done(
258 |       <BotCard>
259 |         <Stocks stocks={stocks} />
260 |       </BotCard>,
261 |     );
262 | 
263 |     aiState.done([
264 |       ...aiState.get(),
265 |       {
266 |         role: "function",
267 |         name: "list_stocks",
268 |         content: JSON.stringify(stocks),
269 |       },
270 |     ]);
271 |   });
272 | 
273 |   completion.onFunctionCall("get_events", async ({ events }) => {
274 |     reply.update(
275 |       <BotCard>
276 |         <EventsSkeleton />
277 |       </BotCard>,
278 |     );
279 | 
280 |     await sleep(1000);
281 | 
282 |     reply.done(
283 |       <BotCard>
284 |         <Events events={events} />
285 |       </BotCard>,
286 |     );
287 | 
288 |     aiState.done([
289 |       ...aiState.get(),
290 |       {
291 |         role: "function",
292 |         name: "list_stocks",
293 |         content: JSON.stringify(events),
294 |       },
295 |     ]);
296 |   });
297 | 
298 |   completion.onFunctionCall("play_pacman", () => {
299 |     reply.done(
300 |       <BotMessage>
301 |         <Pacman />
302 |       </BotMessage>,
303 |     );
304 |     aiState.done([
305 |       ...aiState.get(),
306 |       {
307 |         role: "function",
308 |         name: "play_pacman",
309 |         content: `[User has requested to play pacman]`,
310 |       },
311 |     ]);
312 |   });
313 | 
314 |   completion.onFunctionCall("throw_confetti", () => {
315 |     reply.done(
316 |       <BotMessage>
317 |         <Confetti />
318 |       </BotMessage>,
319 |     );
320 |     aiState.done([
321 |       ...aiState.get(),
322 |       {
323 |         role: "function",
324 |         name: "throw_confetti",
325 |         content: `[User has requested to throw confetti]`,
326 |       },
327 |     ]);
328 |   });
329 | 
330 |   completion.onFunctionCall(
331 |     "show_stock_price",
332 |     async ({ symbol, price, delta }) => {
333 |       reply.update(
334 |         <BotCard>
335 |           <StockSkeleton />
336 |         </BotCard>,
337 |       );
338 | 
339 |       await sleep(1000);
340 | 
341 |       reply.done(
342 |         <BotCard>
343 |           <Stock name={symbol} price={price} delta={delta} />
344 |         </BotCard>,
345 |       );
346 | 
347 |       aiState.done([
348 |         ...aiState.get(),
349 |         {
350 |           role: "function",
351 |           name: "show_stock_price",
352 |           content: `[Price of ${symbol} = ${price}]`,
353 |         },
354 |       ]);
355 |     },
356 |   );
357 | 
358 |   completion.onFunctionCall(
359 |     "show_stock_purchase_ui",
360 |     ({ symbol, price, numberOfShares = 100 }) => {
361 |       if (numberOfShares <= 0 || numberOfShares > 1000) {
362 |         reply.done(<BotMessage>Invalid amount</BotMessage>);
363 |         aiState.done([
364 |           ...aiState.get(),
365 |           {
366 |             role: "function",
367 |             name: "show_stock_purchase_ui",
368 |             content: `[Invalid amount]`,
369 |           },
370 |         ]);
371 |         return;
372 |       }
373 | 
374 |       reply.done(
375 |         <>
376 |           <BotMessage>
377 |             Sure!{" "}
378 |             {typeof numberOfShares === "number"
379 |               ? `Click the button below to purchase ${numberOfShares} shares of $${symbol}:`
380 |               : `How many $${symbol} would you like to purchase?`}
381 |           </BotMessage>
382 |           <BotCard showAvatar={false}>
383 |             <Purchase
384 |               defaultAmount={numberOfShares}
385 |               name={symbol}
386 |               price={+price}
387 |             />
388 |           </BotCard>
389 |         </>,
390 |       );
391 |       aiState.done([
392 |         ...aiState.get(),
393 |         {
394 |           role: "function",
395 |           name: "show_stock_purchase_ui",
396 |           content: `[UI for purchasing ${numberOfShares} shares of ${symbol}. Current price = ${price}, total cost = ${
397 |             numberOfShares * price
398 |           }]`,
399 |         },
400 |       ]);
401 |     },
402 |   );
403 | 
404 |   return {
405 |     id: Date.now(),
406 |     display: reply.value,
407 |   };
408 | }
409 | 
410 | // Define necessary types and create the AI.
411 | 
412 | const initialAIState: {
413 |   role: "user" | "assistant" | "system" | "function";
414 |   content: string;
415 |   id?: string;
416 |   name?: string;
417 | }[] = [];
418 | 
419 | const initialUIState: {
420 |   id: number;
421 |   display: React.ReactNode;
422 | }[] = [];
423 | 
424 | export const AI = createAI({
425 |   actions: {
426 |     submitUserMessage,
427 |     confirmPurchase,
428 |   },
429 |   initialUIState,
430 |   initialAIState,
431 | });
432 |

--------------------------------------------------------------------------------
/components/llm-stocks/stock.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useState, useRef, useEffect, useId } from 'react';
  4 | import { scaleLinear } from 'd3-scale';
  5 | import { subMonths, format } from 'date-fns';
  6 | import { useResizeObserver } from 'usehooks-ts';
  7 | import { useAIState } from 'ai/rsc';
  8 | 
  9 | import type { AI } from '../../app/action';
 10 | 
 11 | export function Stock({ name = 'DOGE', price = 12.34, delta = 1 }) {
 12 |   const [history, setHistory] = useAIState<typeof AI>();
 13 |   const [selectedDuration, setSelectedDuration] = useState('6M');
 14 |   const id = useId();
 15 | 
 16 |   const [priceAtTime, setPriceAtTime] = useState({
 17 |     time: '00:00',
 18 |     value: price.toFixed(2),
 19 |     x: 0,
 20 |   });
 21 | 
 22 |   const [startHighlight, setStartHighlight] = useState(0);
 23 |   const [endHighlight, setEndHighlight] = useState(0);
 24 | 
 25 |   const chartRef = useRef<HTMLDivElement>(null);
 26 |   const { width = 0 } = useResizeObserver({
 27 |     ref: chartRef,
 28 |     box: 'border-box',
 29 |   });
 30 | 
 31 |   const xToDate = scaleLinear(
 32 |     [0, width],
 33 |     [subMonths(new Date(), 6), new Date()],
 34 |   );
 35 |   const xToValue = scaleLinear(
 36 |     [0, width],
 37 |     [price - price / 2, price + price / 2],
 38 |   );
 39 | 
 40 |   useEffect(() => {
 41 |     if (startHighlight && endHighlight) {
 42 |       const message = {
 43 |         id,
 44 |         role: 'system' as const,
 45 |         content: `[User has highlighted dates between between ${format(
 46 |           xToDate(startHighlight),
 47 |           'd LLL',
 48 |         )} and ${format(xToDate(endHighlight), 'd LLL, yyyy')}`,
 49 |       };
 50 | 
 51 |       if (history[history.length - 1]?.id === id) {
 52 |         setHistory([...history.slice(0, -1), message]);
 53 |       } else {
 54 |         setHistory([...history, message]);
 55 |       }
 56 |     }
 57 |   }, [startHighlight, endHighlight, history, id, setHistory, xToDate]);
 58 | 
 59 |   return (
 60 |     <div className="p-4 text-green-400 border rounded-xl bg-zinc-950">
 61 |       <div className="inline-block float-right px-2 py-1 text-xs rounded-full bg-white/10">
 62 |         {`${delta > 0 ? '+' : ''}${((delta / price) * 100).toFixed(2)}% ${
 63 |           delta > 0 ? '↑' : '↓'
 64 |         }`}
 65 |       </div>
 66 |       <div className="text-lg text-zinc-300">{name}</div>
 67 |       <div className="text-3xl font-bold">${price}</div>
 68 |       <div className="mt-1 text-xs text text-zinc-500">
 69 |         Closed: Feb 27, 4:59 PM EST
 70 |       </div>
 71 | 
 72 |       <div
 73 |         className="relative -mx-4 cursor-col-resize"
 74 |         onPointerDown={event => {
 75 |           if (chartRef.current) {
 76 |             const { clientX } = event;
 77 |             const { left } = chartRef.current.getBoundingClientRect();
 78 | 
 79 |             setStartHighlight(clientX - left);
 80 |             setEndHighlight(0);
 81 | 
 82 |             setPriceAtTime({
 83 |               time: format(xToDate(clientX), 'dd LLL yy'),
 84 |               value: xToValue(clientX).toFixed(2),
 85 |               x: clientX - left,
 86 |             });
 87 |           }
 88 |         }}
 89 |         onPointerUp={event => {
 90 |           if (chartRef.current) {
 91 |             const { clientX } = event;
 92 |             const { left } = chartRef.current.getBoundingClientRect();
 93 | 
 94 |             setEndHighlight(clientX - left);
 95 |           }
 96 |         }}
 97 |         onPointerMove={event => {
 98 |           if (chartRef.current) {
 99 |             const { clientX } = event;
100 |             const { left } = chartRef.current.getBoundingClientRect();
101 | 
102 |             setPriceAtTime({
103 |               time: format(xToDate(clientX), 'dd LLL yy'),
104 |               value: xToValue(clientX).toFixed(2),
105 |               x: clientX - left,
106 |             });
107 |           }
108 |         }}
109 |         onPointerLeave={() => {
110 |           setPriceAtTime({
111 |             time: '00:00',
112 |             value: price.toFixed(2),
113 |             x: 0,
114 |           });
115 |         }}
116 |         ref={chartRef}
117 |       >
118 |         {priceAtTime.x > 0 ? (
119 |           <div
120 |             className="absolute z-10 flex gap-2 p-2 rounded-md pointer-events-none select-none bg-zinc-800 w-fit"
121 |             style={{
122 |               left: priceAtTime.x - 124 / 2,
123 |               top: 30,
124 |             }}
125 |           >
126 |             <div className="text-xs tabular-nums">${priceAtTime.value}</div>
127 |             <div className="text-xs text-zinc-400 tabular-nums">
128 |               {priceAtTime.time}
129 |             </div>
130 |           </div>
131 |         ) : null}
132 | 
133 |         {startHighlight ? (
134 |           <div
135 |             className="absolute w-5 h-32 border rounded-md pointer-events-none select-none bg-zinc-500/20 border-zinc-500"
136 |             style={{
137 |               left: startHighlight,
138 |               width: endHighlight
139 |                 ? endHighlight - startHighlight
140 |                 : priceAtTime.x - startHighlight,
141 |               bottom: 0,
142 |             }}
143 |           ></div>
144 |         ) : null}
145 | 
146 |         <svg
147 |           className="uch-psvg"
148 |           viewBox="0 0 250.0 168.0"
149 |           height="150"
150 |           width="100%"
151 |           preserveAspectRatio="none"
152 |         >
153 |           <defs>
154 |             <linearGradient
155 |               id="fill-id-tsuid_31"
156 |               x1="0%"
157 |               x2="0%"
158 |               y1="0%"
159 |               y2="100%"
160 |             >
161 |               <stop offset="0%" stopColor="#34a853" stopOpacity="0.38"></stop>
162 |               <stop offset="13%" stopColor="#e6f4ea" stopOpacity="0"></stop>
163 |             </linearGradient>
164 |             <clipPath id="range-id-tsuid_31">
165 |               <rect height="100%" width="0" x="0" y="0"></rect>
166 |             </clipPath>
167 |             <defs>
168 |               <linearGradient
169 |                 id="chart-grad-_f1bJZYLUHqWpxc8Prs2meA_33"
170 |                 x1="0%"
171 |                 x2="0%"
172 |                 y1="0%"
173 |                 y2="100%"
174 |               >
175 |                 <stop offset="0%" stopColor="#34a853" stopOpacity="0.38"></stop>
176 |                 <stop offset="13%" stopColor="#e6f4ea" stopOpacity="0"></stop>
177 |               </linearGradient>
178 |             </defs>
179 |             <clipPath id="mask-_f1bJZYLUHqWpxc8Prs2meA_32">
180 |               <rect height="218" width="250" x="0" y="-5"></rect>
181 |             </clipPath>
182 |           </defs>
183 |           <path
184 |             d="M  0 42.86 L 0.89 46.26 L 1.78 44.3 L 2.68 44.24 L 3.57 42 L 4.46 43.42 L 5.35 43.62 L 6.25 47 L 7.14 47.65 L 8.03 47.69 L 8.92 45.55 L 9.82 43.19 L 10.71 43.9 L 11.6 42.83 L 12.49 42.81 L 13.39 46.75 L 14.28 43.06 L 15.17 40.8 L 16.06 39.72 L 16.96 39.77 L 17.85 45.77 L 18.74 44.93 L 19.63 44.35 L 20.53 40.29 L 21.42 42.77 L 22.31 42.12 L 23.2 43.4 L 24.1 47.95 L 24.99 50.15 L 25.88 48.59 L 26.77 42.18 L 27.67 44.1 L 28.56 39.91 L 29.45 44.92 L 30.34 47.62 L 31.24 48.06 L 32.13 47.67 L 33.02 56.47 L 33.91 57.74 L 34.8 65.48 L 35.7 64.47 L 36.59 47.25 L 37.48 58.26 L 38.37 52.04 L 39.27 55.8 L 40.16 92.92 L 41.05 105.2 L 41.94 102 L 42.84 106.14 L 43.73 78.71 L 44.62 104.6 L 45.51 96.58 L 46.41 67.56 L 47.3 69.53 L 48.19 69.99 L 49.08 66.75 L 49.98 69.72 L 50.87 70.13 L 51.76 71.3 L 52.65 70.03 L 53.55 67.92 L 54.44 66.41 L 55.33 97.12 L 56.22 95.93 L 57.12 95.03 L 58.01 95.09 L 58.9 65.56 L 59.79 65.12 L 60.69 82.42 L 61.58 74.7 L 62.47 71.13 L 63.36 82.43 L 64.26 96.02 L 65.15 100.36 L 66.04 98.6 L 66.93 103.37 L 67.82 102.12 L 68.72 97.08 L 69.61 89.74 L 70.5 90.7 L 71.39 93.46 L 72.29 94.24 L 73.18 97.8 L 74.07 97.88 L 74.96 96.63 L 75.86 96.27 L 76.75 97.15 L 77.64 100.12 L 78.53 100.51 L 79.43 106.59 L 80.32 104.54 L 81.21 100.31 L 82.1 118.76 L 83 106.24 L 83.89 114.8 L 84.78 174.89 L 85.67 122.28 L 86.57 149.25 L 87.46 151.47 L 88.35 153.38 L 89.24 153.5 L 90.14 149.24 L 91.03 122.44 L 91.92 122.08 L 92.81 147.16 L 93.71 147.46 L 94.6 119.13 L 95.49 117.97 L 96.38 122.22 L 97.28 116.38 L 98.17 119.53 L 99.06 119.65 L 99.95 120.15 L 100.84 120.22 L 101.74 121.28 L 102.63 121.4 L 103.52 122.97 L 104.41 122.15 L 105.31 120.6 L 106.2 116.55 L 107.09 122.23 L 107.98 120.96 L 108.88 119.54 L 109.77 120.19 L 110.66 120.99 L 111.55 119.92 L 112.45 115.69 L 113.34 116.33 L 114.23 116.07 L 115.12 115.34 L 116.02 111.34 L 116.91 107.23 L 117.8 113.21 L 118.69 98.77 L 119.59 97.04 L 120.48 96.56 L 121.37 96.36 L 122.26 99.7 L 123.16 103.33 L 124.05 100.38 L 124.94 99.68 L 125.83 99.02 L 126.73 102.56 L 127.62 103.25 L 128.51 103.38 L 129.4 104.89 L 130.3 118.07 L 131.19 100.82 L 132.08 103.06 L 132.97 103.47 L 133.86 99.8 L 134.76 111.28 L 135.65 107.73 L 136.54 107.46 L 137.43 108.08 L 138.33 109.82 L 139.22 110.94 L 140.11 111.3 L 141 108.14 L 141.9 109.35 L 142.79 108.38 L 143.68 99.08 L 144.57 99.02 L 145.47 98.61 L 146.36 99.07 L 147.25 99.26 L 148.14 95.1 L 149.04 92.08 L 149.93 92.76 L 150.82 92.87 L 151.71 83.31 L 152.61 82.93 L 153.5 84.86 L 154.39 84.12 L 155.28 94.08 L 156.18 93.31 L 157.07 94.23 L 157.96 94.58 L 158.85 99.33 L 159.75 80 L 160.64 90.28 L 161.53 84.07 L 162.42 68.37 L 163.32 76.88 L 164.21 81.78 L 165.1 80.72 L 165.99 73.89 L 166.88 77.14 L 167.78 67.58 L 168.67 59.82 L 169.56 61.91 L 170.45 61.07 L 171.35 73.74 L 172.24 77.02 L 173.13 78.61 L 174.02 71.59 L 174.92 68.24 L 175.81 72.14 L 176.7 65.37 L 177.59 76.73 L 178.49 88.02 L 179.38 88.01 L 180.27 88.27 L 181.16 86.23 L 182.06 86.14 L 182.95 89.54 L 183.84 94.16 L 184.73 97.72 L 185.63 81.52 L 186.52 92.85 L 187.41 94.14 L 188.3 93.06 L 189.2 92.64 L 190.09 92.44 L 190.98 91.75 L 191.87 90.53 L 192.77 88.27 L 193.66 85.44 L 194.55 82.26 L 195.44 85.08 L 196.34 85.65 L 197.23 53.43 L 198.12 72.01 L 199.01 38.37 L 199.9 69.43 L 200.8 74.46 L 201.69 74.22 L 202.58 82.46 L 203.47 77.01 L 204.37 87.8 L 205.26 91.56 L 206.15 76.69 L 207.04 76.46 L 207.94 78.13 L 208.83 80.06 L 209.72 92.79 L 210.61 87.74 L 211.51 88.21 L 212.4 88.47 L 213.29 87.35 L 214.18 89.69 L 215.08 77.37 L 215.97 87.95 L 216.86 75.16 L 217.75 70.47 L 218.65 85.11 L 219.54 88.1 L 220.43 88.06 L 221.32 86.34 L 222.22 76.91 L 223.11 75.33 L 224 73.6 L 224.89 25.31 L 225.79 44.14 L 226.68 43.93 L 227.57 45.13 L 228.46 44.03 L 229.36 35.73 L 230.25 33.65 L 231.14 34.81 L 232.03 17.64 L 232.92 21.13 L 233.82 19.37 L 234.71 24.66 L 235.6 23.87 L 236.49 22.56 L 237.39 28.48 L 238.28 25.33 L 239.17 28.51 L 240.06 30.83 L 240.96 35.79 L 241.85 34.6 L 242.74 31.2 L 243.63 32.97 L 244.53 33.01 L 245.42 31.38 L 246.31 30.21 L 247.2 27.75 L 248.1 25.27 L 248.99 23 L 249.88 23 L 250 23 L 2000 0 L 2000 1000 L -1000 1000"
185 |             clipPath="url(#range-id-tsuid_31)"
186 |             className="range-normal-line"
187 |             stroke="none"
188 |             strokeWidth={2}
189 |             fill='url("#fill-id-tsuid_31")'
190 |           ></path>
191 |           <path
192 |             clipPath="url(#mask-_f1bJZYLUHqWpxc8Prs2meA_32)"
193 |             d="M 0 42.86 L 0.89 46.26 L 1.78 44.3 L 2.68 44.24 L 3.57 42 L 4.46 43.42 L 5.35 43.62 L 6.25 47 L 7.14 47.65 L 8.03 47.69 L 8.92 45.55 L 9.82 43.19 L 10.71 43.9 L 11.6 42.83 L 12.49 42.81 L 13.39 46.75 L 14.28 43.06 L 15.17 40.8 L 16.06 39.72 L 16.96 39.77 L 17.85 45.77 L 18.74 44.93 L 19.63 44.35 L 20.53 40.29 L 21.42 42.77 L 22.31 42.12 L 23.2 43.4 L 24.1 47.95 L 24.99 50.15 L 25.88 48.59 L 26.77 42.18 L 27.67 44.1 L 28.56 39.91 L 29.45 44.92 L 30.34 47.62 L 31.24 48.06 L 32.13 47.67 L 33.02 56.47 L 33.91 57.74 L 34.8 65.48 L 35.7 64.47 L 36.59 47.25 L 37.48 58.26 L 38.37 52.04 L 39.27 55.8 L 40.16 92.92 L 41.05 105.2 L 41.94 102 L 42.84 106.14 L 43.73 78.71 L 44.62 104.6 L 45.51 96.58 L 46.41 67.56 L 47.3 69.53 L 48.19 69.99 L 49.08 66.75 L 49.98 69.72 L 50.87 70.13 L 51.76 71.3 L 52.65 70.03 L 53.55 67.92 L 54.44 66.41 L 55.33 97.12 L 56.22 95.93 L 57.12 95.03 L 58.01 95.09 L 58.9 65.56 L 59.79 65.12 L 60.69 82.42 L 61.58 74.7 L 62.47 71.13 L 63.36 82.43 L 64.26 96.02 L 65.15 100.36 L 66.04 98.6 L 66.93 103.37 L 67.82 102.12 L 68.72 97.08 L 69.61 89.74 L 70.5 90.7 L 71.39 93.46 L 72.29 94.24 L 73.18 97.8 L 74.07 97.88 L 74.96 96.63 L 75.86 96.27 L 76.75 97.15 L 77.64 100.12 L 78.53 100.51 L 79.43 106.59 L 80.32 104.54 L 81.21 100.31 L 82.1 118.76 L 83 106.24 L 83.89 114.8 L 84.78 174.89 L 85.67 122.28 L 86.57 149.25 L 87.46 151.47 L 88.35 153.38 L 89.24 153.5 L 90.14 149.24 L 91.03 122.44 L 91.92 122.08 L 92.81 147.16 L 93.71 147.46 L 94.6 119.13 L 95.49 117.97 L 96.38 122.22 L 97.28 116.38 L 98.17 119.53 L 99.06 119.65 L 99.95 120.15 L 100.84 120.22 L 101.74 121.28 L 102.63 121.4 L 103.52 122.97 L 104.41 122.15 L 105.31 120.6 L 106.2 116.55 L 107.09 122.23 L 107.98 120.96 L 108.88 119.54 L 109.77 120.19 L 110.66 120.99 L 111.55 119.92 L 112.45 115.69 L 113.34 116.33 L 114.23 116.07 L 115.12 115.34 L 116.02 111.34 L 116.91 107.23 L 117.8 113.21 L 118.69 98.77 L 119.59 97.04 L 120.48 96.56 L 121.37 96.36 L 122.26 99.7 L 123.16 103.33 L 124.05 100.38 L 124.94 99.68 L 125.83 99.02 L 126.73 102.56 L 127.62 103.25 L 128.51 103.38 L 129.4 104.89 L 130.3 118.07 L 131.19 100.82 L 132.08 103.06 L 132.97 103.47 L 133.86 99.8 L 134.76 111.28 L 135.65 107.73 L 136.54 107.46 L 137.43 108.08 L 138.33 109.82 L 139.22 110.94 L 140.11 111.3 L 141 108.14 L 141.9 109.35 L 142.79 108.38 L 143.68 99.08 L 144.57 99.02 L 145.47 98.61 L 146.36 99.07 L 147.25 99.26 L 148.14 95.1 L 149.04 92.08 L 149.93 92.76 L 150.82 92.87 L 151.71 83.31 L 152.61 82.93 L 153.5 84.86 L 154.39 84.12 L 155.28 94.08 L 156.18 93.31 L 157.07 94.23 L 157.96 94.58 L 158.85 99.33 L 159.75 80 L 160.64 90.28 L 161.53 84.07 L 162.42 68.37 L 163.32 76.88 L 164.21 81.78 L 165.1 80.72 L 165.99 73.89 L 166.88 77.14 L 167.78 67.58 L 168.67 59.82 L 169.56 61.91 L 170.45 61.07 L 171.35 73.74 L 172.24 77.02 L 173.13 78.61 L 174.02 71.59 L 174.92 68.24 L 175.81 72.14 L 176.7 65.37 L 177.59 76.73 L 178.49 88.02 L 179.38 88.01 L 180.27 88.27 L 181.16 86.23 L 182.06 86.14 L 182.95 89.54 L 183.84 94.16 L 184.73 97.72 L 185.63 81.52 L 186.52 92.85 L 187.41 94.14 L 188.3 93.06 L 189.2 92.64 L 190.09 92.44 L 190.98 91.75 L 191.87 90.53 L 192.77 88.27 L 193.66 85.44 L 194.55 82.26 L 195.44 85.08 L 196.34 85.65 L 197.23 53.43 L 198.12 72.01 L 199.01 38.37 L 199.9 69.43 L 200.8 74.46 L 201.69 74.22 L 202.58 82.46 L 203.47 77.01 L 204.37 87.8 L 205.26 91.56 L 206.15 76.69 L 207.04 76.46 L 207.94 78.13 L 208.83 80.06 L 209.72 92.79 L 210.61 87.74 L 211.51 88.21 L 212.4 88.47 L 213.29 87.35 L 214.18 89.69 L 215.08 77.37 L 215.97 87.95 L 216.86 75.16 L 217.75 70.47 L 218.65 85.11 L 219.54 88.1 L 220.43 88.06 L 221.32 86.34 L 222.22 76.91 L 223.11 75.33 L 224 73.6 L 224.89 25.31 L 225.79 44.14 L 226.68 43.93 L 227.57 45.13 L 228.46 44.03 L 229.36 35.73 L 230.25 33.65 L 231.14 34.81 L 232.03 17.64 L 232.92 21.13 L 233.82 19.37 L 234.71 24.66 L 235.6 23.87 L 236.49 22.56 L 237.39 28.48 L 238.28 25.33 L 239.17 28.51 L 240.06 30.83 L 240.96 35.79 L 241.85 34.6 L 242.74 31.2 L 243.63 32.97 L 244.53 33.01 L 245.42 31.38 L 246.31 30.21 L 247.2 27.75 L 248.1 25.27 L 248.99 23 L 249.88 23 L 250 23 L 2000 0 L 2000 1000 L -1000 1000"
194 |             stroke="#34a853"
195 |             style={{ fill: 'url(#chart-grad-_f1bJZYLUHqWpxc8Prs2meA_33)' }}
196 |           ></path>
197 |         </svg>
198 |       </div>
199 |     </div>
200 |   );
201 | }
202 |

--------------------------------------------------------------------------------
/components/ui/icons.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import * as React from 'react';
  4 | 
  5 | import { cn } from '@/lib/utils';
  6 | 
  7 | function IconAI({ className, ...props }: React.ComponentProps<'svg'>) {
  8 |   return (
  9 |     <svg
 10 |       fill="currentColor"
 11 |       viewBox="0 0 256 256"
 12 |       role="img"
 13 |       xmlns="http://www.w3.org/2000/svg"
 14 |       className={cn('h-4 w-4', className)}
 15 |       {...props}
 16 |     >
 17 |       <path d="M197.58,129.06l-51.61-19-19-51.65a15.92,15.92,0,0,0-29.88,0L78.07,110l-51.65,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0l19-51.61,51.65-19a15.92,15.92,0,0,0,0-29.88ZM140.39,163a15.87,15.87,0,0,0-9.43,9.43l-19,51.46L93,172.39A15.87,15.87,0,0,0,83.61,163h0L32.15,144l51.46-19A15.87,15.87,0,0,0,93,115.61l19-51.46,19,51.46a15.87,15.87,0,0,0,9.43,9.43l51.46,19ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path>
 18 |     </svg>
 19 |   );
 20 | }
 21 | 
 22 | function IconVercel({ className, ...props }: React.ComponentProps<'svg'>) {
 23 |   return (
 24 |     <svg
 25 |       aria-label="Vercel logomark"
 26 |       role="img"
 27 |       viewBox="0 0 74 64"
 28 |       className={cn('h-4 w-4', className)}
 29 |       {...props}
 30 |     >
 31 |       <path
 32 |         d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
 33 |         fill="currentColor"
 34 |       ></path>
 35 |     </svg>
 36 |   );
 37 | }
 38 | 
 39 | function IconGitHub({ className, ...props }: React.ComponentProps<'svg'>) {
 40 |   return (
 41 |     <svg
 42 |       role="img"
 43 |       viewBox="0 0 24 24"
 44 |       xmlns="http://www.w3.org/2000/svg"
 45 |       fill="currentColor"
 46 |       className={cn('h-4 w-4', className)}
 47 |       {...props}
 48 |     >
 49 |       <title>GitHub</title>
 50 |       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
 51 |     </svg>
 52 |   );
 53 | }
 54 | 
 55 | function IconSeparator({ className, ...props }: React.ComponentProps<'svg'>) {
 56 |   return (
 57 |     <svg
 58 |       fill="none"
 59 |       shapeRendering="geometricPrecision"
 60 |       stroke="currentColor"
 61 |       strokeLinecap="round"
 62 |       strokeLinejoin="round"
 63 |       strokeWidth="1.5"
 64 |       viewBox="0 0 24 24"
 65 |       aria-hidden="true"
 66 |       className={cn('h-4 w-4', className)}
 67 |       {...props}
 68 |     >
 69 |       <path d="M16.88 3.549L7.12 20.451"></path>
 70 |     </svg>
 71 |   );
 72 | }
 73 | 
 74 | function IconArrowRight({ className, ...props }: React.ComponentProps<'svg'>) {
 75 |   return (
 76 |     <svg
 77 |       xmlns="http://www.w3.org/2000/svg"
 78 |       viewBox="0 0 256 256"
 79 |       fill="currentColor"
 80 |       className={cn('h-4 w-4', className)}
 81 |       {...props}
 82 |     >
 83 |       <path d="m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z" />
 84 |     </svg>
 85 |   );
 86 | }
 87 | 
 88 | function IconUser({ className, ...props }: React.ComponentProps<'svg'>) {
 89 |   return (
 90 |     <svg
 91 |       xmlns="http://www.w3.org/2000/svg"
 92 |       viewBox="0 0 256 256"
 93 |       fill="currentColor"
 94 |       className={cn('h-4 w-4', className)}
 95 |       {...props}
 96 |     >
 97 |       <path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z" />
 98 |     </svg>
 99 |   );
100 | }
101 | 
102 | function IconPlus({ className, ...props }: React.ComponentProps<'svg'>) {
103 |   return (
104 |     <svg
105 |       xmlns="http://www.w3.org/2000/svg"
106 |       viewBox="0 0 256 256"
107 |       fill="currentColor"
108 |       className={cn('h-4 w-4', className)}
109 |       {...props}
110 |     >
111 |       <path d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8Z" />
112 |     </svg>
113 |   );
114 | }
115 | 
116 | function IconArrowElbow({ className, ...props }: React.ComponentProps<'svg'>) {
117 |   return (
118 |     <svg
119 |       xmlns="http://www.w3.org/2000/svg"
120 |       viewBox="0 0 256 256"
121 |       fill="currentColor"
122 |       className={cn('h-4 w-4', className)}
123 |       {...props}
124 |     >
125 |       <path d="M200 32v144a8 8 0 0 1-8 8H67.31l34.35 34.34a8 8 0 0 1-11.32 11.32l-48-48a8 8 0 0 1 0-11.32l48-48a8 8 0 0 1 11.32 11.32L67.31 168H184V32a8 8 0 0 1 16 0Z" />
126 |     </svg>
127 |   );
128 | }
129 | 
130 | function IconSpinner({ className, ...props }: React.ComponentProps<'svg'>) {
131 |   return (
132 |     <svg
133 |       xmlns="http://www.w3.org/2000/svg"
134 |       viewBox="0 0 256 256"
135 |       fill="currentColor"
136 |       className={cn('h-4 w-4 animate-spin', className)}
137 |       {...props}
138 |     >
139 |       <path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" />
140 |     </svg>
141 |   );
142 | }
143 | 
144 | function IconMessage({ className, ...props }: React.ComponentProps<'svg'>) {
145 |   return (
146 |     <svg
147 |       xmlns="http://www.w3.org/2000/svg"
148 |       viewBox="0 0 256 256"
149 |       fill="currentColor"
150 |       className={cn('h-4 w-4', className)}
151 |       {...props}
152 |     >
153 |       <path d="M216 48H40a16 16 0 0 0-16 16v160a15.84 15.84 0 0 0 9.25 14.5A16.05 16.05 0 0 0 40 240a15.89 15.89 0 0 0 10.25-3.78.69.69 0 0 0 .13-.11L82.5 208H216a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16ZM40 224Zm176-32H82.5a16 16 0 0 0-10.3 3.75l-.12.11L40 224V64h176Z" />
154 |     </svg>
155 |   );
156 | }
157 | 
158 | function IconCopy({ className, ...props }: React.ComponentProps<'svg'>) {
159 |   return (
160 |     <svg
161 |       xmlns="http://www.w3.org/2000/svg"
162 |       viewBox="0 0 256 256"
163 |       fill="currentColor"
164 |       className={cn('h-4 w-4', className)}
165 |       {...props}
166 |     >
167 |       <path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
168 |     </svg>
169 |   );
170 | }
171 | 
172 | function IconCheck({ className, ...props }: React.ComponentProps<'svg'>) {
173 |   return (
174 |     <svg
175 |       xmlns="http://www.w3.org/2000/svg"
176 |       viewBox="0 0 256 256"
177 |       fill="currentColor"
178 |       className={cn('h-4 w-4', className)}
179 |       {...props}
180 |     >
181 |       <path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
182 |     </svg>
183 |   );
184 | }
185 | 
186 | function IconClose({ className, ...props }: React.ComponentProps<'svg'>) {
187 |   return (
188 |     <svg
189 |       xmlns="http://www.w3.org/2000/svg"
190 |       viewBox="0 0 256 256"
191 |       fill="currentColor"
192 |       className={cn('h-4 w-4', className)}
193 |       {...props}
194 |     >
195 |       <path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z" />
196 |     </svg>
197 |   );
198 | }
199 | 
200 | function IconShare({ className, ...props }: React.ComponentProps<'svg'>) {
201 |   return (
202 |     <svg
203 |       xmlns="http://www.w3.org/2000/svg"
204 |       fill="currentColor"
205 |       className={cn('h-4 w-4', className)}
206 |       viewBox="0 0 256 256"
207 |       {...props}
208 |     >
209 |       <path d="m237.66 106.35-80-80A8 8 0 0 0 144 32v40.35c-25.94 2.22-54.59 14.92-78.16 34.91-28.38 24.08-46.05 55.11-49.76 87.37a12 12 0 0 0 20.68 9.58c11-11.71 50.14-48.74 107.24-52V192a8 8 0 0 0 13.66 5.65l80-80a8 8 0 0 0 0-11.3ZM160 172.69V144a8 8 0 0 0-8-8c-28.08 0-55.43 7.33-81.29 21.8a196.17 196.17 0 0 0-36.57 26.52c5.8-23.84 20.42-46.51 42.05-64.86C99.41 99.77 127.75 88 152 88a8 8 0 0 0 8-8V51.32L220.69 112Z" />
210 |     </svg>
211 |   );
212 | }
213 | 
214 | function IconUsers({ className, ...props }: React.ComponentProps<'svg'>) {
215 |   return (
216 |     <svg
217 |       xmlns="http://www.w3.org/2000/svg"
218 |       fill="currentColor"
219 |       className={cn('h-4 w-4', className)}
220 |       viewBox="0 0 256 256"
221 |       {...props}
222 |     >
223 |       <path d="M117.25 157.92a60 60 0 1 0-66.5 0 95.83 95.83 0 0 0-47.22 37.71 8 8 0 1 0 13.4 8.74 80 80 0 0 1 134.14 0 8 8 0 0 0 13.4-8.74 95.83 95.83 0 0 0-47.22-37.71ZM40 108a44 44 0 1 1 44 44 44.05 44.05 0 0 1-44-44Zm210.14 98.7a8 8 0 0 1-11.07-2.33A79.83 79.83 0 0 0 172 168a8 8 0 0 1 0-16 44 44 0 1 0-16.34-84.87 8 8 0 1 1-5.94-14.85 60 60 0 0 1 55.53 105.64 95.83 95.83 0 0 1 47.22 37.71 8 8 0 0 1-2.33 11.07Z" />
224 |     </svg>
225 |   );
226 | }
227 | 
228 | function IconExternalLink({
229 |   className,
230 |   ...props
231 | }: React.ComponentProps<'svg'>) {
232 |   return (
233 |     <svg
234 |       xmlns="http://www.w3.org/2000/svg"
235 |       fill="currentColor"
236 |       className={cn('h-4 w-4', className)}
237 |       viewBox="0 0 256 256"
238 |       {...props}
239 |     >
240 |       <path d="M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8Z" />
241 |     </svg>
242 |   );
243 | }
244 | 
245 | function IconChevronUpDown({
246 |   className,
247 |   ...props
248 | }: React.ComponentProps<'svg'>) {
249 |   return (
250 |     <svg
251 |       xmlns="http://www.w3.org/2000/svg"
252 |       fill="currentColor"
253 |       className={cn('h-4 w-4', className)}
254 |       viewBox="0 0 256 256"
255 |       {...props}
256 |     >
257 |       <path d="M181.66 170.34a8 8 0 0 1 0 11.32l-48 48a8 8 0 0 1-11.32 0l-48-48a8 8 0 0 1 11.32-11.32L128 212.69l42.34-42.35a8 8 0 0 1 11.32 0Zm-96-84.68L128 43.31l42.34 42.35a8 8 0 0 0 11.32-11.32l-48-48a8 8 0 0 0-11.32 0l-48 48a8 8 0 0 0 11.32 11.32Z" />
258 |     </svg>
259 |   );
260 | }
261 | 
262 | function IconSparkles({ className, ...props }: React.ComponentProps<'svg'>) {
263 |   return (
264 |     <svg
265 |       viewBox="0 0 14 17"
266 |       fill="none"
267 |       xmlns="http://www.w3.org/2000/svg"
268 |       className={cn('h-4 w-4', className)}
269 |       {...props}
270 |     >
271 |       <path
272 |         d="M7.73047 16.2559C7.81836 16.2559 7.88916 16.2266 7.94287 16.168C8.00146 16.1143 8.03809 16.0435 8.05273 15.9556C8.15039 15.1841 8.25781 14.5347 8.375 14.0073C8.49707 13.48 8.6582 13.0479 8.8584 12.7109C9.05859 12.374 9.32471 12.1055 9.65674 11.9053C9.98877 11.7051 10.4136 11.5513 10.9312 11.4438C11.4536 11.3315 12.0933 11.2339 12.8501 11.1509C12.9429 11.1411 13.0161 11.1069 13.0698 11.0483C13.1284 10.9897 13.1577 10.9165 13.1577 10.8286C13.1577 10.7407 13.1284 10.6675 13.0698 10.6089C13.0161 10.5503 12.9429 10.5161 12.8501 10.5063C12.0933 10.4233 11.4536 10.3281 10.9312 10.2207C10.4136 10.1084 9.98877 9.95215 9.65674 9.75195C9.32471 9.55176 9.05859 9.2832 8.8584 8.94629C8.6582 8.60938 8.49707 8.17725 8.375 7.6499C8.25781 7.12256 8.15039 6.4707 8.05273 5.69434C8.03809 5.61133 8.00146 5.54297 7.94287 5.48926C7.88916 5.43066 7.81836 5.40137 7.73047 5.40137C7.64258 5.40137 7.56934 5.43066 7.51074 5.48926C7.45703 5.54297 7.42285 5.61133 7.4082 5.69434C7.31543 6.4707 7.20801 7.12256 7.08594 7.6499C6.96875 8.17725 6.80762 8.60938 6.60254 8.94629C6.40234 9.2832 6.13623 9.55176 5.8042 9.75195C5.47217 9.95215 5.04736 10.1084 4.52979 10.2207C4.01221 10.3281 3.37256 10.4233 2.61084 10.5063C2.51807 10.5161 2.44238 10.5503 2.38379 10.6089C2.3252 10.6675 2.2959 10.7407 2.2959 10.8286C2.2959 10.9165 2.3252 10.9897 2.38379 11.0483C2.44238 11.1069 2.51807 11.1411 2.61084 11.1509C3.36768 11.2485 4.00488 11.3584 4.52246 11.4805C5.04004 11.5977 5.4624 11.7539 5.78955 11.9492C6.12158 12.1445 6.3877 12.4082 6.58789 12.7402C6.78809 13.0674 6.94922 13.4922 7.07129 14.0146C7.19336 14.5371 7.30566 15.1841 7.4082 15.9556C7.42285 16.0435 7.45703 16.1143 7.51074 16.168C7.56934 16.2266 7.64258 16.2559 7.73047 16.2559ZM3.03564 8.57275C3.09424 8.57275 3.14307 8.55322 3.18213 8.51416C3.22119 8.4751 3.24316 8.42871 3.24805 8.375C3.31152 7.91113 3.375 7.55225 3.43848 7.29834C3.50195 7.03955 3.60205 6.84668 3.73877 6.71973C3.87549 6.58789 4.07812 6.48535 4.34668 6.41211C4.61523 6.33887 4.98877 6.25586 5.46729 6.16309C5.59424 6.14355 5.65771 6.07275 5.65771 5.95068C5.65771 5.89209 5.63818 5.8457 5.59912 5.81152C5.56494 5.77246 5.521 5.74805 5.46729 5.73828C4.98877 5.66992 4.61279 5.604 4.33936 5.54053C4.0708 5.47217 3.86816 5.37207 3.73145 5.24023C3.59961 5.10352 3.50195 4.90332 3.43848 4.63965C3.375 4.37109 3.31152 4.00244 3.24805 3.53369C3.2334 3.40186 3.1626 3.33594 3.03564 3.33594C2.90869 3.33594 2.83545 3.4043 2.81592 3.54102C2.76221 4 2.70361 4.35889 2.64014 4.61768C2.57666 4.87646 2.47656 5.07178 2.33984 5.20361C2.20312 5.33057 1.99805 5.43066 1.72461 5.50391C1.45605 5.57227 1.08252 5.65039 0.604004 5.73828C0.477051 5.7627 0.413574 5.8335 0.413574 5.95068C0.413574 6.07275 0.486816 6.14355 0.633301 6.16309C1.10205 6.24609 1.4707 6.32178 1.73926 6.39014C2.0127 6.4585 2.21533 6.55859 2.34717 6.69043C2.479 6.82227 2.57666 7.02002 2.64014 7.28369C2.70361 7.54248 2.76221 7.90381 2.81592 8.36768C2.83545 8.50439 2.90869 8.57275 3.03564 8.57275ZM6.40479 3.82666C6.48291 3.82666 6.53174 3.78271 6.55127 3.69482C6.61475 3.32861 6.67578 3.06006 6.73438 2.88916C6.79297 2.71338 6.90771 2.58887 7.07861 2.51562C7.24951 2.44238 7.5376 2.37158 7.94287 2.30322C8.03076 2.28369 8.07471 2.23486 8.07471 2.15674C8.07471 2.06885 8.03076 2.02002 7.94287 2.01025C7.5376 1.93701 7.24951 1.86621 7.07861 1.79785C6.90771 1.72461 6.79297 1.60254 6.73438 1.43164C6.67578 1.25586 6.61475 0.982422 6.55127 0.611328C6.53174 0.523438 6.48291 0.479492 6.40479 0.479492C6.31689 0.479492 6.26807 0.523438 6.2583 0.611328C6.18994 0.982422 6.12646 1.25586 6.06787 1.43164C6.01416 1.60254 5.89941 1.72461 5.72363 1.79785C5.55273 1.86621 5.26465 1.93701 4.85938 2.01025C4.77148 2.02002 4.72754 2.06885 4.72754 2.15674C4.72754 2.23486 4.77148 2.28369 4.85938 2.30322C5.26465 2.37158 5.55273 2.44238 5.72363 2.51562C5.89941 2.58887 6.01416 2.71338 6.06787 2.88916C6.12646 3.06006 6.18994 3.32861 6.2583 3.69482C6.26807 3.78271 6.31689 3.82666 6.40479 3.82666Z"
273 |         fill="currentColor"
274 |       />
275 |     </svg>
276 |   );
277 | }
278 | 
279 | export {
280 |   IconAI,
281 |   IconVercel,
282 |   IconGitHub,
283 |   IconSeparator,
284 |   IconUser,
285 |   IconPlus,
286 |   IconArrowRight,
287 |   IconArrowElbow,
288 |   IconSpinner,
289 |   IconMessage,
290 |   IconCopy,
291 |   IconCheck,
292 |   IconClose,
293 |   IconShare,
294 |   IconUsers,
295 |   IconExternalLink,
296 |   IconChevronUpDown,
297 |   IconSparkles,
298 | };
299 |

--------------------------------------------------------------------------------