; 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/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 |

--------------------------------------------------------------------------------
/lib/utils/tool-definition.ts:
--------------------------------------------------------------------------------
 1 | import { z } from 'zod';
 2 | 
 3 | /**
 4 |  * A tool definition contains all information required for a language model to generate tool calls.
 5 |  */
 6 | export interface ToolDefinition<NAME extends string, PARAMETERS> {
 7 |   /**
 8 |    * The name of the tool.
 9 |    * Should be understandable for language models and unique among the tools that they know.
10 |    *
11 |    * Note: Using generics to enable result type inference when there are multiple tool calls.
12 |    */
13 |   name: NAME;
14 | 
15 |   /**
16 |    * A optional description of what the tool does. Will be used by the language model to decide whether to use the tool.
17 |    */
18 |   description?: string;
19 | 
20 |   /**
21 |    * The schema of the input that the tool expects. The language model will use this to generate the input.
22 |    * Use descriptions to make the input understandable for the language model.
23 |    */
24 |   parameters: z.Schema<PARAMETERS>;
25 | }
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-shop/user-purchases.tsx:
--------------------------------------------------------------------------------
 1 | import { Purchase, purchaseSchema } from '@/lib/schemas/purchase.schema';
 2 | import { DataTable } from './purchase-table';
 3 | import { ColumnDef } from '@tanstack/react-table';
 4 | 
 5 | export const columns: ColumnDef<Purchase>[] = [
 6 |   {
 7 |     accessorKey: 'id',
 8 |     header: 'ID',
 9 |   },
10 |   {
11 |     accessorKey: 'product.name',
12 |     header: 'Product',
13 |   },
14 |   {
15 |     accessorKey: 'product.price',
16 |     header: 'Price',
17 |   },
18 |   {
19 |     accessorKey: 'invoiceUrl',
20 |     header: 'Invoice',
21 |   },
22 | ];
23 | 
24 | export function UserPurchases({ purchases }: { purchases: Purchase[] }) {
25 |   return (
26 |     <div className="relative mx-auto max-w-2xl" id="user-purchases">
27 |       <h1 className="text-2xl font-bold mb-4">Your Purchases</h1>
28 |       <div className="space-y-4">
29 |         <DataTable columns={columns} data={purchases} />
30 |       </div>
31 |     </div>
32 |   );
33 | }
34 |

--------------------------------------------------------------------------------
/components/llm-shop/product-skeleton.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | export function ProductSkeleton() {
 4 |   return (
 5 |     <>
 6 |       <div className="space-y-3 max-w-full border-transparent border shadow-sm hover:border-primary-foreground flex flex-row gap-4">
 7 |         <div className="overflow-hidden rounded-md w-fit">
 8 |           <img
 9 |             alt={`skeleton`}
10 |             loading="lazy"
11 |             width="150"
12 |             height="150"
13 |             decoding="async"
14 |             data-nimg="1"
15 |             className="h-auto w-auto object-cover transition-all hover:scale-105 aspect-square max-w-[100px]"
16 |           />
17 |         </div>
18 |         <div className="space-y-1 text-sm flex flex-col justify-between w-full">
19 |           <div className="mb-4">
20 |             <div className="flex items-center justify-between mb-2">
21 |               <h3 className="font-medium leading-none text-xl"></h3>
22 |               <span></span>
23 |             </div>
24 |             <p className="text-xs text-muted-foreground"></p>
25 |           </div>
26 |         </div>
27 |       </div>
28 |     </>
29 |   );
30 | }
31 |

--------------------------------------------------------------------------------
/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 |

--------------------------------------------------------------------------------
/components/footer.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import React from 'react';
 4 | 
 5 | import { cn } from '@/lib/utils';
 6 | import { AI } from '@/app/action';
 7 | import { useUIState, useActions } from 'ai/rsc';
 8 | 
 9 | const commans = ['Show products', 'Show my purchases', 'Buy laptop'];
10 | 
11 | export function FooterText({ className, ...props }: React.ComponentProps<'p'>) {
12 |   const [, setMessages] = useUIState<typeof AI>();
13 |   const { submitUserMessage } = useActions();
14 | 
15 |   const handleCommand = async (command: string) => {
16 |     const response = await submitUserMessage(command);
17 |     setMessages((currentMessages) => [...currentMessages, response]);
18 |   };
19 | 
20 |   return (
21 |     <>
22 |       <p
23 |         className={cn(
24 |           'px-2 text-center text-xs leading-normal text-muted-foreground',
25 |           className,
26 |         )}
27 |         {...props}
28 |       >
29 |         Suggested commands:{' '}
30 |         {commans.map((command, i) => (
31 |           <span
32 |             key={command}
33 |             className="text-blue-500 hover:underline padding-4 cursor-pointer"
34 |             onClick={() => handleCommand(command)}
35 |           >
36 |             {i === 0 ? '' : ', '}
37 |             {command}
38 |           </span>
39 |         ))}
40 |       </p>
41 |     </>
42 |   );
43 | }
44 |

--------------------------------------------------------------------------------
/components/empty-screen.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button';
 2 | import { IconArrowRight } from '@/components/ui/icons';
 3 | 
 4 | const exampleMessages = [
 5 |   {
 6 |     heading: 'Show a list of products',
 7 |     message: 'Show a list of products',
 8 |   },
 9 | ];
10 | 
11 | export function EmptyScreen({
12 |   submitMessage,
13 | }: {
14 |   submitMessage: (message: string) => void;
15 | }) {
16 |   return (
17 |     <div className="mx-auto max-w-2xl px-4">
18 |       <div className="rounded-lg border bg-background p-8 mb-4">
19 |         <h1 className="mb-2 text-lg font-semibold">Chat based store</h1>
20 |         <p className="mb-2 leading-normal text-muted-foreground">
21 |           This is a demo of a chat based store. You can ask questions or try
22 |           purchasing a product.
23 |         </p>
24 | 
25 |         <p className="leading-normal text-muted-foreground">Try an example:</p>
26 |         <div className="mt-4 flex flex-col items-start space-y-2 mb-4">
27 |           {exampleMessages.map((message, index) => (
28 |             <Button
29 |               key={index}
30 |               variant="link"
31 |               className="h-auto p-0 text-base"
32 |               onClick={async () => {
33 |                 submitMessage(message.message);
34 |               }}
35 |             >
36 |               <IconArrowRight className="mr-2 text-muted-foreground" />
37 |               {message.heading}
38 |             </Button>
39 |           ))}
40 |         </div>
41 |       </div>
42 |     </div>
43 |   );
44 | }
45 |

--------------------------------------------------------------------------------
/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 |

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

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

--------------------------------------------------------------------------------
/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-shop/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 |

--------------------------------------------------------------------------------
/components/llm-shop/product.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useActions, useUIState } from 'ai/rsc';
 4 | 
 5 | import type { AI } from '../../app/action';
 6 | import { Button } from '../ui/button';
 7 | import { type Product } from '@/lib/schemas/product.schema';
 8 | 
 9 | export function Product({ product }: { product: Product }) {
10 |   const [, setMessages] = useUIState<typeof AI>();
11 |   const { submitUserMessage } = useActions();
12 | 
13 |   return (
14 |     <>
15 |       <div
16 |         key={product.id}
17 |         className="space-y-3 max-w-full border-transparent border shadow-sm hover:border-primary-foreground flex flex-row gap-4"
18 |       >
19 |         <div className="overflow-hidden rounded-md w-fit">
20 |           <img
21 |             alt={`Image of ${product.name}`}
22 |             loading="lazy"
23 |             width="150"
24 |             height="150"
25 |             decoding="async"
26 |             data-nimg="1"
27 |             className="h-auto w-auto object-cover transition-all hover:scale-105 aspect-square max-w-[100px]"
28 |             src={product.image}
29 |           />
30 |         </div>
31 |         <div className="space-y-1 text-sm flex flex-col justify-between w-full">
32 |           <div className="mb-4">
33 |             <div className="flex items-center justify-between mb-2">
34 |               <h3 className="font-medium leading-none text-xl">
35 |                 {product.name}
36 |               </h3>
37 |               <span>
38 |                 {new Intl.NumberFormat('en-US', {
39 |                   style: 'currency',
40 |                   currency: 'USD',
41 |                 }).format(product.price)}
42 |               </span>
43 |             </div>
44 |             <p className="text-xs text-muted-foreground">
45 |               {product.description}
46 |             </p>
47 |           </div>
48 |         </div>
49 |       </div>
50 |       <div className="flex flex-col gap-2 mt-4">
51 |         <Button
52 |           variant={'default'}
53 |           onClick={async () => {
54 |             const response = await submitUserMessage(
55 |               `Purchasing ${product.name} with id ${product.id}`,
56 |             );
57 |             setMessages((currentMessages) => [...currentMessages, response]);
58 |           }}
59 |         >
60 |           Purchase
61 |         </Button>
62 |       </div>
63 |     </>
64 |   );
65 | }
66 |

--------------------------------------------------------------------------------
/components/llm-shop/purchase-table.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import {
 4 |   ColumnDef,
 5 |   flexRender,
 6 |   getCoreRowModel,
 7 |   useReactTable,
 8 | } from '@tanstack/react-table';
 9 | 
10 | import {
11 |   Table,
12 |   TableBody,
13 |   TableCell,
14 |   TableHead,
15 |   TableHeader,
16 |   TableRow,
17 | } from '@/components/ui/table';
18 | 
19 | interface DataTableProps<TData, TValue> {
20 |   columns: ColumnDef<TData, TValue>[];
21 |   data: TData[];
22 | }
23 | 
24 | export function DataTable<TData, TValue>({
25 |   columns,
26 |   data,
27 | }: DataTableProps<TData, TValue>) {
28 |   const table = useReactTable({
29 |     data,
30 |     columns,
31 |     getCoreRowModel: getCoreRowModel(),
32 |   });
33 | 
34 |   return (
35 |     <div className="rounded-md border">
36 |       <Table>
37 |         <TableHeader>
38 |           {table.getHeaderGroups().map((headerGroup) => (
39 |             <TableRow key={headerGroup.id}>
40 |               {headerGroup.headers.map((header) => {
41 |                 return (
42 |                   <TableHead key={header.id}>
43 |                     {header.isPlaceholder
44 |                       ? null
45 |                       : flexRender(
46 |                           header.column.columnDef.header,
47 |                           header.getContext(),
48 |                         )}
49 |                   </TableHead>
50 |                 );
51 |               })}
52 |             </TableRow>
53 |           ))}
54 |         </TableHeader>
55 |         <TableBody>
56 |           {table.getRowModel().rows?.length ? (
57 |             table.getRowModel().rows.map((row) => (
58 |               <TableRow
59 |                 key={row.id}
60 |                 data-state={row.getIsSelected() && 'selected'}
61 |               >
62 |                 {row.getVisibleCells().map((cell) => (
63 |                   <TableCell key={cell.id}>
64 |                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
65 |                   </TableCell>
66 |                 ))}
67 |               </TableRow>
68 |             ))
69 |           ) : (
70 |             <TableRow>
71 |               <TableCell colSpan={columns.length} className="h-24 text-center">
72 |                 No results.
73 |               </TableCell>
74 |             </TableRow>
75 |           )}
76 |         </TableBody>
77 |       </Table>
78 |     </div>
79 |   );
80 | }
81 |

--------------------------------------------------------------------------------
/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 |

--------------------------------------------------------------------------------
/components/llm-shop/products.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useActions, useUIState } from 'ai/rsc';
 4 | 
 5 | import type { AI } from '../../app/action';
 6 | import { Button } from '../ui/button';
 7 | import { type Product } from '@/lib/schemas/product.schema';
 8 | 
 9 | export function Products({ products }: { products: Product[] }) {
10 |   const [, setMessages] = useUIState<typeof AI>();
11 |   const { submitUserMessage } = useActions();
12 | 
13 |   return (
14 |     <div className="flex flex-wrap gap-4 justify-stretch">
15 |       {products.map((product) => (
16 |         <div
17 |           key={product.id}
18 |           className="space-y-3 sm:max-w-[200px] border-transparent border shadow-sm hover:border-primary-foreground basis-full"
19 |         >
20 |           <div className="overflow-hidden rounded-md">
21 |             <img
22 |               alt={`Image of ${product.name}`}
23 |               loading="lazy"
24 |               width="150"
25 |               height="150"
26 |               decoding="async"
27 |               data-nimg="1"
28 |               className="h-auto object-cover transition-all hover:scale-105 max-h-[150px] min-h-[150px] w-full"
29 |               src={product.image}
30 |             />
31 |           </div>
32 |           <div className="space-y-1 text-sm flex flex-col justify-between">
33 |             <div className="mb-4">
34 |               <div className="flex items-center justify-between mb-2">
35 |                 <h3 className="font-medium leading-none">{product.name}</h3>
36 |                 <span>
37 |                   {new Intl.NumberFormat('en-US', {
38 |                     style: 'currency',
39 |                     currency: 'USD',
40 |                   }).format(product.price)}
41 |                 </span>
42 |               </div>
43 |               <p className="text-xs text-muted-foreground">
44 |                 {product.description.slice(0, 150)}...
45 |               </p>
46 |             </div>
47 |             <div className="flex flex-col gap-2">
48 |               <Button
49 |                 variant={'default'}
50 |                 onClick={async () => {
51 |                   const response = await submitUserMessage(
52 |                     `Purchasing ${product.name} with id ${product.id} [run \`show_purchase_ui\` function]`,
53 |                   );
54 |                   setMessages((currentMessages) => [
55 |                     ...currentMessages,
56 |                     response,
57 |                   ]);
58 |                 }}
59 |               >
60 |                 Purchase
61 |               </Button>
62 |               <Button
63 |                 variant={'secondary'}
64 |                 onClick={async () => {
65 |                   const response = await submitUserMessage(
66 |                     `Show details for ${product.name}`,
67 |                   );
68 |                   setMessages((currentMessages) => [
69 |                     ...currentMessages,
70 |                     response,
71 |                   ]);
72 |                 }}
73 |               >
74 |                 View
75 |               </Button>
76 |             </div>
77 |           </div>
78 |         </div>
79 |       ))}
80 |     </div>
81 |   );
82 | }
83 |

--------------------------------------------------------------------------------
/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | 
  3 | import { cn } from '@/lib/utils';
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn('w-full caption-bottom text-sm', className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ));
 17 | Table.displayName = 'Table';
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
 24 | ));
 25 | TableHeader.displayName = 'TableHeader';
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn('[&_tr:last-child]:border-0', className)}
 34 |     {...props}
 35 |   />
 36 | ));
 37 | TableBody.displayName = 'TableBody';
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
 47 |       className,
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ));
 52 | TableFooter.displayName = 'TableFooter';
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
 62 |       className,
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ));
 67 | TableRow.displayName = 'TableRow';
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
 77 |       className,
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ));
 82 | TableHead.displayName = 'TableHead';
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn(
 91 |       'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
 92 |       className,
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ));
 97 | TableCell.displayName = 'TableCell';
 98 | 
 99 | const TableCaption = React.forwardRef<
100 |   HTMLTableCaptionElement,
101 |   React.HTMLAttributes<HTMLTableCaptionElement>
102 | >(({ className, ...props }, ref) => (
103 |   <caption
104 |     ref={ref}
105 |     className={cn('mt-4 text-sm text-muted-foreground', className)}
106 |     {...props}
107 |   />
108 | ));
109 | TableCaption.displayName = 'TableCaption';
110 | 
111 | export {
112 |   Table,
113 |   TableHeader,
114 |   TableBody,
115 |   TableFooter,
116 |   TableHead,
117 |   TableRow,
118 |   TableCell,
119 |   TableCaption,
120 | };
121 |

--------------------------------------------------------------------------------
/lib/utils/index.tsx:
--------------------------------------------------------------------------------
  1 | import { ToolDefinition } from '@/lib/utils/tool-definition';
  2 | import { OpenAIStream } from 'ai';
  3 | import type OpenAI from 'openai';
  4 | import zodToJsonSchema from 'zod-to-json-schema';
  5 | import { type ClassValue, clsx } from 'clsx';
  6 | import { twMerge } from 'tailwind-merge';
  7 | 
  8 | const consumeStream = async (stream: ReadableStream) => {
  9 |   const reader = stream.getReader();
 10 |   while (true) {
 11 |     const { done } = await reader.read();
 12 |     if (done) break;
 13 |   }
 14 | };
 15 | 
 16 | export function runOpenAICompletion<
 17 |   T extends Omit<
 18 |     Parameters<typeof OpenAI.prototype.chat.completions.create>[0],
 19 |     'functions'
 20 |   > & {
 21 |     functions: ToolDefinition<any, any>[];
 22 |   },
 23 | >(openai: OpenAI, params: T) {
 24 |   let text = '';
 25 |   let hasFunction = false;
 26 | 
 27 |   type FunctionNames =
 28 |     T['functions'] extends Array<any> ? T['functions'][number]['name'] : never;
 29 | 
 30 |   let onTextContent: (text: string, isFinal: boolean) => void = () => {};
 31 | 
 32 |   let onFunctionCall: Record<string, (args: Record<string, any>) => void> = {};
 33 | 
 34 |   const { functions, ...rest } = params;
 35 | 
 36 |   (async () => {
 37 |     consumeStream(
 38 |       OpenAIStream(
 39 |         (await openai.chat.completions.create({
 40 |           ...rest,
 41 |           stream: true,
 42 |           functions: functions.map((fn) => ({
 43 |             name: fn.name,
 44 |             description: fn.description,
 45 |             parameters: zodToJsonSchema(fn.parameters) as Record<
 46 |               string,
 47 |               unknown
 48 |             >,
 49 |           })),
 50 |         })) as any,
 51 |         {
 52 |           async experimental_onFunctionCall(functionCallPayload) {
 53 |             hasFunction = true;
 54 |             onFunctionCall[
 55 |               functionCallPayload.name as keyof typeof onFunctionCall
 56 |             ]?.(functionCallPayload.arguments as Record<string, any>);
 57 |           },
 58 |           onToken(token) {
 59 |             text += token;
 60 |             if (text.startsWith('{')) return;
 61 |             onTextContent(text, false);
 62 |           },
 63 |           onFinal() {
 64 |             if (hasFunction) return;
 65 |             onTextContent(text, true);
 66 |           },
 67 |         },
 68 |       ),
 69 |     );
 70 |   })();
 71 | 
 72 |   return {
 73 |     onTextContent: (
 74 |       callback: (text: string, isFinal: boolean) => void | Promise<void>,
 75 |     ) => {
 76 |       onTextContent = callback;
 77 |     },
 78 |     onFunctionCall: (
 79 |       name: FunctionNames,
 80 |       callback: (args: any) => void | Promise<void>,
 81 |     ) => {
 82 |       onFunctionCall[name] = callback;
 83 |     },
 84 |   };
 85 | }
 86 | 
 87 | export function cn(...inputs: ClassValue[]) {
 88 |   return twMerge(clsx(inputs));
 89 | }
 90 | 
 91 | export const formatNumber = (value: number) =>
 92 |   new Intl.NumberFormat('en-US', {
 93 |     style: 'currency',
 94 |     currency: 'USD',
 95 |   }).format(value);
 96 | 
 97 | export const runAsyncFnWithoutBlocking = (
 98 |   fn: (...args: any) => Promise<any>,
 99 | ) => {
100 |   fn();
101 | };
102 | 
103 | export const sleep = (ms: number) =>
104 |   new Promise((resolve) => setTimeout(resolve, ms));
105 | 
106 | // Fake data
107 | export function getStockPrice(name: string) {
108 |   let total = 0;
109 |   for (let i = 0; i < name.length; i++) {
110 |     total = (total + name.charCodeAt(i) * 9999121) % 9999;
111 |   }
112 |   return total / 100;
113 | }
114 |

--------------------------------------------------------------------------------
/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 |

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

--------------------------------------------------------------------------------
/components/llm-shop/checkout.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { AI } from '@/app/action';
  4 | import { Button } from '../ui/button';
  5 | import { useId, useState } from 'react';
  6 | import { useAIState } from 'ai/rsc';
  7 | import { cn, sleep } from '@/lib/utils';
  8 | import { OTPInput, SlotProps } from 'input-otp';
  9 | import { Purchase } from '@/lib/schemas/purchase.schema';
 10 | import { Product } from '@/lib/schemas/product.schema';
 11 | import { SystemMessage } from './message';
 12 | 
 13 | enum PaymentStatus {
 14 |   Idle,
 15 |   Pending,
 16 |   Success,
 17 |   Failed,
 18 | }
 19 | 
 20 | enum Views {
 21 |   EnterOtp,
 22 |   Success,
 23 |   Failed,
 24 | }
 25 | 
 26 | export function Checkout({ product }: { product: Product }) {
 27 |   const [history, setHistory] = useAIState<typeof AI>();
 28 | 
 29 |   const [view, setView] = useState(Views.EnterOtp);
 30 |   const [systemMessages, setSystemMessages] = useState<string[]>([]);
 31 |   const [status, setStatus] = useState(PaymentStatus.Idle);
 32 |   const [otp, setOtp] = useState('');
 33 | 
 34 |   const id = useId();
 35 | 
 36 |   const submit = async (e: React.FormEvent<HTMLFormElement>) => {
 37 |     e.preventDefault();
 38 | 
 39 |     setStatus(PaymentStatus.Pending);
 40 | 
 41 |     if (otp.length !== 6) {
 42 |       setStatus(PaymentStatus.Idle);
 43 |       return;
 44 |     }
 45 | 
 46 |     try {
 47 |       await sleep(500);
 48 | 
 49 |       if (Math.random() > 0.8) {
 50 |         throw new Error('Payment failed');
 51 |       }
 52 | 
 53 |       const invoiceId = String(Math.floor(Math.random() * 1000));
 54 |       const purchase: Purchase = {
 55 |         invoiceUrl: `https://example.com/invoice/${invoiceId}`,
 56 |         product,
 57 |         id: invoiceId,
 58 |       };
 59 | 
 60 |       const info = {
 61 |         role: 'system' as const,
 62 |         content: `User has successfully purchased ${product.name} with id ${product.id}. Full purchase ${JSON.stringify(
 63 |           purchase,
 64 |         )}`,
 65 |         id,
 66 |       };
 67 | 
 68 |       setHistory([...history, info]);
 69 |       setStatus(PaymentStatus.Success);
 70 |       setView(Views.Success);
 71 |       setSystemMessages((prev) => [
 72 |         ...prev,
 73 |         `You have successfully purchased ${product.name} for a total of ${new Intl.NumberFormat(
 74 |           'en-US',
 75 |           { style: 'currency', currency: 'USD' },
 76 |         ).format(product.price)}`,
 77 |       ]);
 78 |     } catch (error) {
 79 |       const info = {
 80 |         role: 'system' as const,
 81 |         content: `User has failed to purchase ${product.name} with id ${product.id}`,
 82 |         id,
 83 |       };
 84 | 
 85 |       if (history[history.length - 1]?.id === id) {
 86 |         setHistory([...history.slice(0, -1), info]);
 87 |         return;
 88 |       } else {
 89 |         setHistory([...history, info]);
 90 |       }
 91 | 
 92 |       setSystemMessages((prev) => [
 93 |         ...prev,
 94 |         `Payment for ${product.name} failed. Please try again.`,
 95 |       ]);
 96 |       setStatus(PaymentStatus.Failed);
 97 |       setView(Views.Failed);
 98 |     }
 99 |   };
100 | 
101 |   return (
102 |     <>
103 |       <div>
104 |         <h1 className="font-bold text-2xl">Checkout</h1>
105 |         <hr className="my-4" />
106 |         <div className="flex flex-row gap-4 align-middle justify-between">
107 |           <h2 className="font-bold text-xl block">{product.name}</h2>
108 |           <span>
109 |             {new Intl.NumberFormat('en-US', {
110 |               style: 'currency',
111 |               currency: 'USD',
112 |             }).format(product.price)}
113 |           </span>
114 |         </div>
115 | 
116 |         {view === Views.EnterOtp && (
117 |           <div className="p-4 border-slate-300/20 border-2 rounded-md bg-slate-100/5 my-6 flex flex-col sm:flex-row gap-4 align-middle justify-center">
118 |             <div>
119 |               <strong className="text-center">
120 |                 Complete your payment by entering the OTP sent to your phone
121 |               </strong>
122 | 
123 |               <p>
124 |                 An OTP has been sent to your phone number ending in{' '}
125 |                 <strong>**** 1234</strong>
126 |               </p>
127 |             </div>
128 |             <form
129 |               onSubmit={submit}
130 |               className="my-4 flex flex-col align-middle justify-center gap-4"
131 |             >
132 |               <div className="flex flex-row align-middle justify-center">
133 |                 <OTPInput
134 |                   maxLength={6}
135 |                   containerClassName="group flex items-center has-[:disabled]:opacity-30 align-middle w-content"
136 |                   onChange={(value) => {
137 |                     setOtp(value);
138 |                   }}
139 |                   render={({ slots }) => (
140 |                     <>
141 |                       <div className="flex">
142 |                         {slots.slice(0, 3).map((slot, idx) => (
143 |                           <Slot key={idx} {...slot} />
144 |                         ))}
145 |                       </div>
146 | 
147 |                       <FakeDash />
148 | 
149 |                       <div className="flex">
150 |                         {slots.slice(3).map((slot, idx) => (
151 |                           <Slot key={idx} {...slot} />
152 |                         ))}
153 |                       </div>
154 |                     </>
155 |                   )}
156 |                 />
157 |               </div>
158 | 
159 |               <Button
160 |                 variant={'default'}
161 |                 disabled={
162 |                   [PaymentStatus.Pending, PaymentStatus.Success].includes(
163 |                     status,
164 |                   ) || otp.length !== 6
165 |                 }
166 |               >
167 |                 {status === PaymentStatus.Pending
168 |                   ? 'Processing...'
169 |                   : status === PaymentStatus.Success
170 |                     ? 'Payment successful'
171 |                     : status === PaymentStatus.Failed
172 |                       ? 'Payment failed. Go ahead and retry'
173 |                       : 'Complete payment'}
174 |               </Button>
175 |             </form>
176 |           </div>
177 |         )}
178 | 
179 |         {view === Views.Success && (
180 |           <div className="p-4 border-emerald-300/20 border-2 rounded-md bg-emerald-100/5 my-6">
181 |             <h2 className="font-bold text-xl">Payment successful</h2>
182 | 
183 |             <p className="mt-2">
184 |               Your payment has been successfully processed. You will receive a
185 |               confirmation email shortly.
186 |             </p>
187 |           </div>
188 |         )}
189 | 
190 |         {view === Views.Failed && (
191 |           <div className="flex align-middle justify-between gap-4 my-4">
192 |             <span className="block text-red-500">Payment failed</span>
193 |             <Button
194 |               variant={'default'}
195 |               onClick={() => {
196 |                 setView(Views.EnterOtp);
197 |                 setStatus(PaymentStatus.Idle);
198 |               }}
199 |             >
200 |               Retry payment
201 |             </Button>
202 |           </div>
203 |         )}
204 |       </div>
205 |       {systemMessages.map((message, id) => (
206 |         <SystemMessage key={id}>{message}</SystemMessage>
207 |       ))}
208 |     </>
209 |   );
210 | }
211 | 
212 | function Slot(props: SlotProps) {
213 |   return (
214 |     <div
215 |       className={cn(
216 |         'relative w-10 h-14 text-[2rem]',
217 |         'flex items-center justify-center',
218 |         'transition-all duration-300',
219 |         'border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md',
220 |         'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',
221 |         'outline outline-0 outline-accent-foreground/20',
222 |         { 'outline-4 outline-accent-foreground': props.isActive },
223 |       )}
224 |     >
225 |       {props.char !== null && <div>{props.char}</div>}
226 |       {props.hasFakeCaret && <FakeCaret />}
227 |     </div>
228 |   );
229 | }
230 | 
231 | function FakeCaret() {
232 |   return (
233 |     <div className="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink">
234 |       <div className="w-px h-8 bg-white" />
235 |     </div>
236 |   );
237 | }
238 | 
239 | function FakeDash() {
240 |   return (
241 |     <div className="flex w-10 justify-center items-center">
242 |       <div className="w-3 h-1 rounded-full bg-border" />
243 |     </div>
244 |   );
245 | }
246 |

--------------------------------------------------------------------------------
/app/action.tsx:
--------------------------------------------------------------------------------
  1 | import 'server-only';
  2 | 
  3 | import { createAI, createStreamableUI, getMutableAIState } from 'ai/rsc';
  4 | import OpenAI from 'openai';
  5 | 
  6 | import { runOpenAICompletion, sleep } from '@/lib/utils';
  7 | import { z } from 'zod';
  8 | import { BotCard, BotMessage } from '@/components/llm-shop/message';
  9 | import { spinner } from '@/components/llm-shop/spinner';
 10 | import { Products } from '@/components/llm-shop/products';
 11 | import { Checkout } from '@/components/llm-shop/checkout';
 12 | import { productSchema } from '@/lib/schemas/product.schema';
 13 | import { Product as ProductComponent } from '@/components/llm-shop/product';
 14 | import { Purchase, purchaseSchema } from '@/lib/schemas/purchase.schema';
 15 | import { UserPurchases } from '@/components/llm-shop/user-purchases';
 16 | import { CheckoutSkeleton } from '@/components/llm-shop/checkout-skeleton';
 17 | import { ProductSkeleton } from '@/components/llm-shop/product-skeleton';
 18 | 
 19 | const products = [
 20 |   {
 21 |     id: '1',
 22 |     name: 'Book',
 23 |     description: 'A book',
 24 |     price: 10,
 25 |     image:
 26 |       'https://plus.unsplash.com/premium_photo-1667251760504-096946b820af?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 27 |   },
 28 |   {
 29 |     id: '2',
 30 |     name: 'Shoes',
 31 |     description: 'A pair of shoes',
 32 |     price: 20,
 33 |     image:
 34 |       'https://images.unsplash.com/photo-1491553895911-0055eca6402d?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 35 |   },
 36 |   {
 37 |     id: '3',
 38 |     name: 'Phone',
 39 |     description: 'A phone',
 40 |     price: 30,
 41 |     image:
 42 |       'https://images.unsplash.com/photo-1525598912003-663126343e1f?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 43 |   },
 44 |   {
 45 |     id: '4',
 46 |     name: 'Laptop',
 47 |     description: 'A laptop',
 48 |     price: 40,
 49 |     image:
 50 |       'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?q=80&w=2371&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 51 |   },
 52 |   {
 53 |     id: '5',
 54 |     name: 'Headphones',
 55 |     description: 'A pair of headphones',
 56 |     price: 50,
 57 |     image:
 58 |       'https://images.unsplash.com/photo-1606400082777-ef05f3c5cde2?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 59 |   },
 60 | ];
 61 | 
 62 | const openai = new OpenAI({
 63 |   apiKey: process.env.OPENAI_API_KEY || '',
 64 | });
 65 | 
 66 | async function submitUserMessage(content: string) {
 67 |   'use server';
 68 | 
 69 |   const aiState = getMutableAIState<typeof AI>();
 70 |   aiState.update([
 71 |     ...aiState.get(),
 72 |     {
 73 |       role: 'user',
 74 |       content,
 75 |     },
 76 |   ]);
 77 | 
 78 |   const reply = createStreamableUI(
 79 |     <BotMessage className="items-center">{spinner}</BotMessage>,
 80 |   );
 81 | 
 82 |   const completion = runOpenAICompletion(openai, {
 83 |     model: process.env.NODE_ENV === 'production' ? 'gpt-3.5-turbo' : 'gpt-4',
 84 |     stream: true,
 85 |     messages: [
 86 |       {
 87 |         role: 'system',
 88 |         content: `
 89 | You are a friendly ecommerce assistant. You can help users with purchasing products, showing products, purchasing products, and other ecommerce-related tasks. You can also chat with users to request additional information or provide help.
 90 | 
 91 | Messages inside [] means that it's a UI element or a user event. For example:
 92 | - "[Showing product card - book with id 123]" means that the UI is showing a product card for a book with id 123.
 93 | - "[Showing images of book with id 123]" means that the UI is showing images of a book with id 123.
 94 | - "[Purchasing book with id 123]" means that the user is purchasing a book with id 123.
 95 | - "[User has successfully purchased book with id 123]" means that the user has successfully purchased a book with id 123.
 96 | - "[User has failed to purchase book with id 123]" means that the user has failed to purchase a book with id 123.
 97 | 
 98 | If you want to show list of products, call \`show_products\`.
 99 | If user requests to buy a certain product, show purchase UI using \`show_purchase_ui\`. Always use the interface to show the purchase UI. Make sure to respond to every request with the \`show_purchase_ui\` function. NEVER say 'Let's proceed with the purchase' or similar. Always use the function.
100 | If user searches for a result that returns only one product, directly show product using \`show_product\`. Before that indicate that search returned only one product.
101 | If user wants to show their purchases, respond with a list of their purchases using \`show_users_purchases\`.
102 | 
103 | Users don't need to know the id of product you can use the name.
104 | 
105 | Products: ${products.map((product) => Object.values(product).join(', ')).join('; ')}
106 | `,
107 |       },
108 |       ...aiState.get().map((info: any) => ({
109 |         role: info.role,
110 |         content: info.content,
111 |         name: info.name,
112 |       })),
113 |     ],
114 |     functions: [
115 |       {
116 |         name: 'show_products',
117 |         description: `
118 | Show a list of products to the user. 
119 | The user can then click on a product to view more details.
120 | `,
121 |         parameters: z.object({
122 |           products: productSchema.array(),
123 |         }),
124 |       },
125 |       {
126 |         name: 'show_product',
127 |         description: `
128 | Show a product to the user.
129 | 
130 | The user can then click on a purchase button to purchase the product.
131 | `,
132 |         parameters: z.object({
133 |           product: productSchema,
134 |         }),
135 |       },
136 |       {
137 |         name: 'show_purchase_ui',
138 |         description: `Show a purchase UI to the user.`,
139 |         parameters: z.object({
140 |           product: productSchema,
141 |         }),
142 |       },
143 |       {
144 |         name: 'show_users_purchases',
145 |         description: `Show a list of the user's purchases.`,
146 |         parameters: z.object({
147 |           purchases: purchaseSchema.array(),
148 |         }),
149 |       },
150 |     ],
151 |     temperature: 0,
152 |   });
153 | 
154 |   completion.onTextContent((content: string, isFinal: boolean) => {
155 |     reply.update(<BotMessage>{content}</BotMessage>);
156 |     if (isFinal) {
157 |       reply.done();
158 |       aiState.done([...aiState.get(), { role: 'assistant', content }]);
159 |     }
160 |   });
161 | 
162 |   completion.onFunctionCall('show_products', async ({ products }) => {
163 |     reply.update(<BotCard>Loading products...</BotCard>);
164 | 
165 |     reply.done(
166 |       <BotCard>
167 |         <Products products={products} />
168 |       </BotCard>,
169 |     );
170 | 
171 |     aiState.done([
172 |       ...aiState.get(),
173 |       {
174 |         role: 'function',
175 |         name: 'show_products',
176 |         content: JSON.stringify(products),
177 |       },
178 |     ]);
179 |   });
180 | 
181 |   completion.onFunctionCall('show_product', async ({ product }) => {
182 |     reply.update(
183 |       <BotCard>
184 |         <ProductSkeleton />
185 |       </BotCard>,
186 |     );
187 | 
188 |     reply.done(
189 |       <BotCard>
190 |         <ProductComponent product={product} />
191 |       </BotCard>,
192 |     );
193 | 
194 |     aiState.done([
195 |       ...aiState.get(),
196 |       {
197 |         role: 'function',
198 |         name: 'show_product',
199 |         content: JSON.stringify(product),
200 |       },
201 |     ]);
202 |   });
203 | 
204 |   completion.onFunctionCall('show_purchase_ui', async ({ product }) => {
205 |     reply.update(
206 |       <BotCard>
207 |         <CheckoutSkeleton />
208 |       </BotCard>,
209 |     );
210 | 
211 |     reply.done(
212 |       <BotCard>
213 |         <Checkout product={product} />
214 |       </BotCard>,
215 |     );
216 | 
217 |     aiState.done([
218 |       ...aiState.get(),
219 |       {
220 |         role: 'function',
221 |         name: 'show_purchase_ui',
222 |         content: `[UI for purchasing ${product.name} with id ${product.id}]`,
223 |       },
224 |     ]);
225 |   });
226 | 
227 |   completion.onFunctionCall(
228 |     'show_users_purchases',
229 |     async ({ purchases }: { purchases: Purchase[] }) => {
230 |       reply.update(<BotCard>Preparing checkout...</BotCard>);
231 | 
232 |       reply.done(
233 |         <BotCard>
234 |           <UserPurchases purchases={purchases} />
235 |         </BotCard>,
236 |       );
237 | 
238 |       aiState.done([
239 |         ...aiState.get(),
240 |         {
241 |           role: 'function',
242 |           name: 'show_users_purchases',
243 |           content: `[UI for showing purchases]`,
244 |         },
245 |       ]);
246 |     },
247 |   );
248 | 
249 |   return {
250 |     id: Date.now(),
251 |     display: reply.value,
252 |   };
253 | }
254 | 
255 | // Define necessary types and create the AI.
256 | 
257 | const initialAIState: {
258 |   role: 'user' | 'assistant' | 'system' | 'function';
259 |   content: string;
260 |   id?: string;
261 |   name?: string;
262 | }[] = [];
263 | 
264 | const initialUIState: {
265 |   id: number;
266 |   display: React.ReactNode;
267 | }[] = [];
268 | 
269 | export const AI = createAI({
270 |   actions: {
271 |     submitUserMessage,
272 |   },
273 |   initialUIState,
274 |   initialAIState,
275 | });
276 |

--------------------------------------------------------------------------------
/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 |

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