Pydantic AI

6 | } 7 | 8 | export { Skeleton } 9 | -------------------------------------------------------------------------------- /specs/update-color-scheme.md: -------------------------------------------------------------------------------- 1 | # Apply branded colors to the UI 2 | 3 | - Try to use `#04bd88` as a primary color in both dark and light mode. 4 | 5 | ``` 6 | // ignore for now, 7 | // - Try `rgb(119 255 216)` as a primary color in dark mode. 8 | ``` 9 | 10 | ## Implementation Details 11 | 12 | Convert the colors using makeshift node scripts. 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pydantic AI Chat package 2 | 3 | Example React frontend for Pydantic AI Chat using [Vercel AI Elements](https://vercel.com/changelog/introducing-ai-elements). 4 | 5 | ## Dev 6 | 7 | ```sh 8 | npm install 9 | npm run dev 10 | 11 | # stop your logfire platform, to avoid port 8000 conflicts 12 | 13 | cd agent && uv run uvicorn chatbot.server:app 14 | ``` 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | /.claude/settings.local.json 26 | /scratch/ 27 | /agent/.venv/ 28 | /tsconfig.tsbuildinfo 29 | .env 30 | *.tgz 31 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "src/index.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "iconLibrary": "lucide", 14 | "aliases": { 15 | "components": "@/components", 16 | "utils": "@/lib/utils", 17 | "ui": "@/components/ui", 18 | "lib": "@/lib", 19 | "hooks": "@/hooks" 20 | }, 21 | "registries": {} 22 | } 23 | -------------------------------------------------------------------------------- /specs/update-tools-dropdown.md: -------------------------------------------------------------------------------- 1 | # Improve the tools dropdown 2 | 3 | - Replace the trigger with a button that uses the lucide icon for settings, add tooltip for tools. Use shadcn for that. 4 | - Hard-code some icons for known tools. These are the tools we know right now. Pick some icons from lucide. 5 | 6 | ```ts 7 | ;['web_search', 'code_execution', 'image_generation'] 8 | ``` 9 | 10 | For other tools, use the default wrench icon. 11 | 12 | - Change the dropdown from checkboxes to icons on the left, and switch component on the right, use shadcn for that. 13 | -------------------------------------------------------------------------------- /src/components/ai-elements/image.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable camelcase */ 2 | import { cn } from '@/lib/utils' 3 | import type { Experimental_GeneratedImage } from 'ai' 4 | 5 | export type ImageProps = Experimental_GeneratedImage & { 6 | className?: string 7 | alt?: string 8 | } 9 | 10 | export const Image = ({ base64, uint8Array, mediaType, ...props }: ImageProps) => ( 11 | {props.alt}

17 | ) 18 | -------------------------------------------------------------------------------- /src/lib/tool-icons.tsx: -------------------------------------------------------------------------------- 1 | import { CodeIcon, DownloadIcon, GlobeIcon, ImagePlusIcon, WrenchIcon } from 'lucide-react' 2 | import type { ReactNode } from 'react' 3 | 4 | export function getToolIcon(toolId: string, className = 'size-4') { 5 | const iconMap: Record = { 6 | web_search: , 7 | web_fetch: , 8 | code_execution: , 9 | image_generation: , 10 | } 11 | return iconMap[toolId] ?? 12 | } 13 | -------------------------------------------------------------------------------- /src/components/ai-elements/response.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from '@/lib/utils' 2 | import { type ComponentProps, memo } from 'react' 3 | import { Streamdown } from 'streamdown' 4 | 5 | type ResponseProps = ComponentProps 6 | 7 | export const Response = memo( 8 | ({ className, ...props }: ResponseProps) => ( 9 | *:first-child]:mt-0 [&>*:last-child]:mb-0 code-bg ', className)} 11 | {...props} 12 | /> 13 | ), 14 | (prevProps, nextProps) => prevProps.children === nextProps.children, 15 | ) 16 | 17 | Response.displayName = 'Response' 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Pydantic AI 11 | 12 | 13 |

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /agent/README.md: -------------------------------------------------------------------------------- 1 | # Logfire Docs chatbot 2 | 3 | ## Usage 4 | 5 | Make sure you have `OPENAI_API_KEY`, `ANTHROPIC_API_KEY`, `GEMINI_API_KEY` set in your environment variables. 6 | 7 | Run the agent backend + pre-packaged frontend: 8 | 9 | ```bash 10 | cd agent 11 | uv sync 12 | uv run uvicorn chatbot.server:app 13 | ``` 14 | 15 | Then open your browser to `http://localhost:8000`. 16 | 17 | ### Frontend development 18 | 19 | Optionally run the frontend in dev mode, which will connect to the running agent backend: 20 | 21 | ```bash 22 | npm install 23 | npm run dev 24 | ``` 25 | 26 | Then open your browser to `http://localhost:5173`. -------------------------------------------------------------------------------- /src/hooks/use-mobile.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener('change', onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => { 16 | mql.removeEventListener('change', onChange) 17 | } 18 | }, []) 19 | 20 | return !!isMobile 21 | } 22 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /specs/delete-past-chats.md: -------------------------------------------------------------------------------- 1 | # Add the ability to delete past chats 2 | 3 | ## Feature Description 4 | 5 | In the side panel, a list of previous chats is displayed. Each chat entry includes a delete button (represented by a trash can icon) next to it. When the user clicks the delete button, a confirmation dialog appears asking, "Are you sure you want to delete this chat?" with "Cancel" and "Delete" options. If the user confirms the deletion, the selected chat is removed from the list and any associated data is deleted from the local storage. If the user cancels, no action is taken and the dialog closes. 6 | 7 | ## Implementation Details 8 | 9 | - The chats are stored in local storage, just remove them from there. 10 | - Use shadcn/lucide for the UI. The button should be visible only on hover. 11 | -------------------------------------------------------------------------------- /agent/pyproject.toml: -------------------------------------------------------------------------------- 1 | [project] 2 | name = "logfire-docs-chatbot" 3 | version = "0.1.0" 4 | requires-python = ">=3.12" 5 | dependencies = [ 6 | "bs4>=0.0.2", 7 | "fastapi>=0.117.1", 8 | "lancedb>=0.25.0", 9 | "langchain-text-splitters>=0.3.11", 10 | "logfire[fastapi]>=4.9.0", 11 | "markdown2>=2.5.4", 12 | "pip>=25.2", 13 | "pydantic-ai-slim[anthropic,openai,google,cli]>=1.14.0", 14 | "pyright>=1.1.405", 15 | "python-frontmatter>=1.1.0", 16 | "sentence-transformers>=5.1.1", 17 | "sse-starlette>=3.0.2", 18 | "starlette>=0.48.0", 19 | "uvicorn>=0.37.0", 20 | "watchfiles>=1.1.0", 21 | ] 22 | 23 | [tool.ruff.format] 24 | # don't format python in docstrings, pytest-examples takes care of it 25 | docstring-code-format = false 26 | quote-style = "single" 27 | -------------------------------------------------------------------------------- /src/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import * as SeparatorPrimitive from '@radix-ui/react-separator' 3 | 4 | import { cn } from '@/lib/utils' 5 | 6 | function Separator({ 7 | className, 8 | orientation = 'horizontal', 9 | decorative = true, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 23 | ) 24 | } 25 | 26 | export { Separator } 27 | -------------------------------------------------------------------------------- /src/components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import * as CollapsiblePrimitive from '@radix-ui/react-collapsible' 3 | 4 | function Collapsible({ ...props }: React.ComponentProps) { 5 | return 6 | } 7 | 8 | function CollapsibleTrigger({ ...props }: React.ComponentProps) { 9 | return 10 | } 11 | 12 | function CollapsibleContent({ ...props }: React.ComponentProps) { 13 | return 14 | } 15 | 16 | export { Collapsible, CollapsibleTrigger, CollapsibleContent } 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2022", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "verbatimModuleSyntax": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "erasableSyntaxOnly": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true, 24 | "paths": { 25 | "@/*": ["./src/*"] 26 | } 27 | }, 28 | "include": ["src", "eslint.config.ts", "vite.config.ts"] 29 | } 30 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | import { cn } from '@/lib/utils' 4 | 5 | function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) { 6 | return ( 7 |

15 |   )
16 | }
17 | 
18 | export { Textarea }
19 |

--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import tailwindcss from '@tailwindcss/vite'
 2 | import react from '@vitejs/plugin-react'
 3 | import { defineConfig } from 'vite'
 4 | import tsconfigPaths from 'vite-tsconfig-paths'
 5 | // import { analyzer } from 'vite-bundle-analyzer'
 6 | 
 7 | // 8000 is quite common for backend, avoid the clash
 8 | const BACKEND_DEV_SERVER_PORT = process.env.BACKEND_PORT ?? 38001
 9 | 
10 | // https://vite.dev/config/
11 | export default defineConfig(({ command }) => ({
12 |   plugins: [react(), tailwindcss(), tsconfigPaths({ root: __dirname })],
13 |   base: command === 'build' ? 'https://cdn.jsdelivr.net/npm/@pydantic/ai-chat-ui/dist/' : '',
14 |   build: {
15 |     assetsDir: 'assets',
16 |   },
17 |   server: {
18 |     proxy: {
19 |       '/api': {
20 |         target: `http://localhost:${BACKEND_DEV_SERVER_PORT}/`,
21 |         changeOrigin: true,
22 |       },
23 |     },
24 |   },
25 | }))
26 |

--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
12 |         'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
13 |         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
14 |         className,
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 |

--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import * as AvatarPrimitive from '@radix-ui/react-avatar'
 3 | 
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
 7 |   return (
 8 |     <AvatarPrimitive.Root
 9 |       data-slot="avatar"
10 |       className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
11 |       {...props}
12 |     />
13 |   )
14 | }
15 | 
16 | function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
17 |   return (
18 |     <AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square size-full', className)} {...props} />
19 |   )
20 | }
21 | 
22 | function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
23 |   return (
24 |     <AvatarPrimitive.Fallback
25 |       data-slot="avatar-fallback"
26 |       className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
27 |       {...props}
28 |     />
29 |   )
30 | }
31 | 
32 | export { Avatar, AvatarImage, AvatarFallback }
33 |

--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from 'lucide-react'
 2 | import { useTheme } from 'next-themes'
 3 | import { Toaster as Sonner, type ToasterProps } from 'sonner'
 4 | import type React from 'react'
 5 | 
 6 | const Toaster = ({ ...props }: ToasterProps) => {
 7 |   const { theme = 'system' } = useTheme()
 8 | 
 9 |   return (
10 |     <Sonner
11 |       theme={theme as ToasterProps['theme']}
12 |       className="toaster group"
13 |       icons={{
14 |         success: <CircleCheckIcon className="size-4" />,
15 |         info: <InfoIcon className="size-4" />,
16 |         warning: <TriangleAlertIcon className="size-4" />,
17 |         error: <OctagonXIcon className="size-4" />,
18 |         loading: <Loader2Icon className="size-4 animate-spin" />,
19 |       }}
20 |       style={
21 |         {
22 |           '--normal-bg': 'var(--popover)',
23 |           '--normal-text': 'var(--popover-foreground)',
24 |           '--normal-border': 'var(--border)',
25 |           '--border-radius': 'var(--radius)',
26 |         } as React.CSSProperties
27 |       }
28 |       {...props}
29 |     />
30 |   )
31 | }
32 | 
33 | export { Toaster }
34 |

--------------------------------------------------------------------------------
/src/hooks/useConversationIdFromUrl.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | 
 3 | export function useConversationIdFromUrl(): [string, (id: string) => void] {
 4 |   const [conversationId, setConversationId] = useState(() => {
 5 |     return window.location.pathname
 6 |   })
 7 | 
 8 |   useEffect(() => {
 9 |     const handlePopState = () => {
10 |       const newId = window.location.pathname
11 |       console.log('popstate event detected', window.location.pathname)
12 |       setConversationId(newId)
13 |     }
14 | 
15 |     window.addEventListener('popstate', handlePopState)
16 |     // local event to handle same-tab updates
17 |     window.addEventListener('history-state-changed', handlePopState)
18 |     return () => {
19 |       window.removeEventListener('popstate', handlePopState)
20 |       window.removeEventListener('history-state-changed', handlePopState)
21 |     }
22 |   }, [])
23 | 
24 |   const setConversationIdAndUrl = (id: string) => {
25 |     setConversationId(id)
26 |     const url = new URL(window.location.toString())
27 |     url.pathname = id || '/'
28 |     window.history.pushState({}, '', url.toString())
29 |   }
30 | 
31 |   return [conversationId, setConversationIdAndUrl]
32 | }
33 |

--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import * as SwitchPrimitive from '@radix-ui/react-switch'
 3 | 
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
 7 |   return (
 8 |     <SwitchPrimitive.Root
 9 |       data-slot="switch"
10 |       className={cn(
11 |         'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
12 |         className,
13 |       )}
14 |       {...props}
15 |     >
16 |       <SwitchPrimitive.Thumb
17 |         data-slot="switch-thumb"
18 |         className={cn(
19 |           'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
20 |         )}
21 |       />
22 |     </SwitchPrimitive.Root>
23 |   )
24 | }
25 | 
26 | export { Switch }
27 |

--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="139" height="120" viewBox="0 0 139 120" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_30_3)">
 3 | <path d="M137.041 90.563L73.326 2.241C71.321 -0.516002 66.698 -0.516002 64.713 2.241L0.998 90.563C0.349255 91.4669 0.000219682 92.5514 0 93.664C0.00126426 94.7811 0.353421 95.8696 1.00674 96.7757C1.66006 97.6818 2.58152 98.3599 3.641 98.714L67.356 119.565H67.366C68.4356 119.914 69.5884 119.914 70.658 119.565H70.668L134.383 98.715C135.178 98.4573 135.901 98.014 136.49 97.4217C137.08 96.8294 137.521 96.1052 137.775 95.309C138.037 94.5154 138.106 93.6707 137.976 92.8452C137.845 92.0197 137.52 91.2373 137.026 90.563H137.041ZM69.022 14.412L94.56 49.815L70.678 42.002C70.493 41.942 70.298 41.952 70.114 41.908C69.934 41.8635 69.7508 41.8334 69.566 41.818C69.381 41.793 69.206 41.723 69.022 41.723C68.837 41.723 68.668 41.793 68.483 41.818C68.299 41.838 68.114 41.868 67.935 41.908C67.745 41.943 67.551 41.943 67.381 42.002L43.644 49.77L43.494 49.82L69.032 14.41H69.022V14.412ZM32.94 64.438L60.742 55.334L63.71 54.367V107.205L13.86 90.887L32.94 64.438ZM74.339 107.195V54.367L105.109 64.438L124.188 90.872L74.334 107.195H74.339Z" fill="#E520E9"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0_30_3">
 7 | <rect width="139" height="120" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 |

--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 3 | import { CheckIcon } from 'lucide-react'
 4 | 
 5 | import { cn } from '@/lib/utils'
 6 | 
 7 | function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
 8 |   return (
 9 |     <CheckboxPrimitive.Root
10 |       data-slot="checkbox"
11 |       className={cn(
12 |         'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
13 |         className,
14 |       )}
15 |       {...props}
16 |     >
17 |       <CheckboxPrimitive.Indicator
18 |         data-slot="checkbox-indicator"
19 |         className="grid place-content-center text-current transition-none"
20 |       >
21 |         <CheckIcon className="size-3.5" />
22 |       </CheckboxPrimitive.Indicator>
23 |     </CheckboxPrimitive.Root>
24 |   )
25 | }
26 | 
27 | export { Checkbox }
28 |

--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import Chat from './Chat.tsx'
 2 | import { AppSidebar } from './components/app-sidebar.tsx'
 3 | import { ThemeProvider } from './components/theme-provider.tsx'
 4 | import { SidebarProvider } from './components/ui/sidebar.tsx'
 5 | import { Toaster } from './components/ui/sonner.tsx'
 6 | import { cn } from './lib/utils.ts'
 7 | 
 8 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 9 | 
10 | const queryClient = new QueryClient()
11 | 
12 | export default function App() {
13 |   return (
14 |     <QueryClientProvider client={queryClient}>
15 |       <ThemeProvider defaultTheme="system" storageKey="pydantic-chat-ui-theme">
16 |         <SidebarProvider defaultOpen>
17 |           <AppSidebar />
18 | 
19 |           <div className="flex flex-col justify-center flex-1 h-screen overflow-hidden">
20 |             <div
21 |               className={cn(
22 |                 'flex flex-col max-w-4xl mx-auto relative w-full basis-[100vh] overflow-hidden',
23 |                 'has-[.stick-to-bottom:empty]:overflow-visible has-[.stick-to-bottom:empty]:basis-[0px] transition-[flex-basis] duration-200',
24 |               )}
25 |             >
26 |               <Chat />
27 |             </div>
28 |           </div>
29 |         </SidebarProvider>
30 |       </ThemeProvider>
31 |       <Toaster richColors />
32 |     </QueryClientProvider>
33 |   )
34 | }
35 |

--------------------------------------------------------------------------------
/src/components/ai-elements/suggestion.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button'
 2 | import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 3 | import { cn } from '@/lib/utils'
 4 | import type { ComponentProps } from 'react'
 5 | 
 6 | export type SuggestionsProps = ComponentProps<typeof ScrollArea>
 7 | 
 8 | export const Suggestions = ({ className, children, ...props }: SuggestionsProps) => (
 9 |   <ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
10 |     <div className={cn('flex w-max flex-nowrap items-center gap-2', className)}>{children}</div>
11 |     <ScrollBar className="hidden" orientation="horizontal" />
12 |   </ScrollArea>
13 | )
14 | 
15 | export type SuggestionProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
16 |   suggestion: string
17 |   onClick?: (suggestion: string) => void
18 | }
19 | 
20 | export const Suggestion = ({
21 |   suggestion,
22 |   onClick,
23 |   className,
24 |   variant = 'outline',
25 |   size = 'sm',
26 |   children,
27 |   ...props
28 | }: SuggestionProps) => {
29 |   const handleClick = () => {
30 |     onClick?.(suggestion)
31 |   }
32 | 
33 |   return (
34 |     <Button
35 |       className={cn('cursor-pointer rounded-full px-4', className)}
36 |       onClick={handleClick}
37 |       size={size}
38 |       type="button"
39 |       variant={variant}
40 |       {...props}
41 |     >
42 |       {children ?? suggestion}
43 |     </Button>
44 |   )
45 | }
46 |

--------------------------------------------------------------------------------
/src/components/ai-elements/actions.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button'
 2 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 3 | import { cn } from '@/lib/utils'
 4 | import type { ComponentProps } from 'react'
 5 | 
 6 | export type ActionsProps = ComponentProps<'div'>
 7 | 
 8 | export const Actions = ({ className, children, ...props }: ActionsProps) => (
 9 |   <div className={cn('flex items-center gap-1', className)} {...props}>
10 |     {children}
11 |   </div>
12 | )
13 | 
14 | export type ActionProps = ComponentProps<typeof Button> & {
15 |   tooltip?: string
16 |   label?: string
17 | }
18 | 
19 | export const Action = ({
20 |   tooltip,
21 |   children,
22 |   label,
23 |   className,
24 |   variant = 'ghost',
25 |   size = 'sm',
26 |   ...props
27 | }: ActionProps) => {
28 |   const button = (
29 |     <Button
30 |       className={cn('size-9 p-1.5 text-muted-foreground hover:text-foreground relative', className)}
31 |       size={size}
32 |       type="button"
33 |       variant={variant}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <span className="sr-only">{label ?? tooltip}</span>
38 |     </Button>
39 |   )
40 | 
41 |   if (tooltip) {
42 |     return (
43 |       <TooltipProvider>
44 |         <Tooltip>
45 |           <TooltipTrigger asChild>{button}</TooltipTrigger>
46 |           <TooltipContent>
47 |             <p>{tooltip}</p>
48 |           </TooltipContent>
49 |         </Tooltip>
50 |       </TooltipProvider>
51 |     )
52 |   }
53 | 
54 |   return button
55 | }
56 |

--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as React from 'react'
 4 | import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
 5 | 
 6 | import { cn } from '@/lib/utils'
 7 | 
 8 | function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
 9 |   return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
10 | }
11 | 
12 | function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
13 |   return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
14 | }
15 | 
16 | function HoverCardContent({
17 |   className,
18 |   align = 'center',
19 |   sideOffset = 4,
20 |   ...props
21 | }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
22 |   return (
23 |     <HoverCardPrimitive.Portal data-slot="hover-card-portal">
24 |       <HoverCardPrimitive.Content
25 |         data-slot="hover-card-content"
26 |         align={align}
27 |         sideOffset={sideOffset}
28 |         className={cn(
29 |           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
30 |           className,
31 |         )}
32 |         {...props}
33 |       />
34 |     </HoverCardPrimitive.Portal>
35 |   )
36 | }
37 | 
38 | export { HoverCard, HoverCardTrigger, HoverCardContent }
39 |

--------------------------------------------------------------------------------
/src/components/ui/badge.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 badgeVariants = cva(
 8 |   'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
13 |         secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
14 |         destructive:
15 |           'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
16 |         outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
17 |       },
18 |     },
19 |     defaultVariants: {
20 |       variant: 'default',
21 |     },
22 |   },
23 | )
24 | 
25 | function Badge({
26 |   className,
27 |   variant,
28 |   asChild = false,
29 |   ...props
30 | }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
31 |   const Comp = asChild ? Slot : 'span'
32 | 
33 |   return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 |

--------------------------------------------------------------------------------
/src/components/ai-elements/message.tsx:
--------------------------------------------------------------------------------
 1 | import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 2 | import { cn } from '@/lib/utils'
 3 | import type { UIMessage } from 'ai'
 4 | import type { ComponentProps, HTMLAttributes } from 'react'
 5 | 
 6 | export type MessageProps = HTMLAttributes<HTMLDivElement> & {
 7 |   from: UIMessage['role']
 8 | }
 9 | 
10 | export const Message = ({ className, from, ...props }: MessageProps) => (
11 |   <div
12 |     className={cn(
13 |       'group flex w-full items-end justify-end gap-2',
14 |       from === 'user' ? 'is-user' : 'is-assistant flex-row-reverse justify-end',
15 |       '[&>div]:max-w-[80%]',
16 |       className,
17 |     )}
18 |     {...props}
19 |   />
20 | )
21 | 
22 | export type MessageContentProps = HTMLAttributes<HTMLDivElement>
23 | 
24 | export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
25 |   <div
26 |     className={cn(
27 |       'flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm',
28 |       'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
29 |       'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
30 |       'is-user:dark',
31 |       className,
32 |     )}
33 |     {...props}
34 |   >
35 |     {children}
36 |   </div>
37 | )
38 | 
39 | export type MessageAvatarProps = ComponentProps<typeof Avatar> & {
40 |   src: string
41 |   name?: string
42 | }
43 | 
44 | export const MessageAvatar = ({ src, name, className, ...props }: MessageAvatarProps) => (
45 |   <Avatar className={cn('size-8 ring-1 ring-border', className)} {...props}>
46 |     <AvatarImage alt="" className="mt-0 mb-0" src={src} />
47 |     <AvatarFallback>{name?.slice(0, 2) ?? 'ME'}</AvatarFallback>
48 |   </Avatar>
49 | )
50 |

--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as React from 'react'
 4 | import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
 5 | 
 6 | import { cn } from '@/lib/utils'
 7 | 
 8 | function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
 9 |   return (
10 |     <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative', className)} {...props}>
11 |       <ScrollAreaPrimitive.Viewport
12 |         data-slot="scroll-area-viewport"
13 |         className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
14 |       >
15 |         {children}
16 |       </ScrollAreaPrimitive.Viewport>
17 |       <ScrollBar />
18 |       <ScrollAreaPrimitive.Corner />
19 |     </ScrollAreaPrimitive.Root>
20 |   )
21 | }
22 | 
23 | function ScrollBar({
24 |   className,
25 |   orientation = 'vertical',
26 |   ...props
27 | }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
28 |   return (
29 |     <ScrollAreaPrimitive.ScrollAreaScrollbar
30 |       data-slot="scroll-area-scrollbar"
31 |       orientation={orientation}
32 |       className={cn(
33 |         'flex touch-none p-px transition-colors select-none',
34 |         orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
35 |         orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
36 |         className,
37 |       )}
38 |       {...props}
39 |     >
40 |       <ScrollAreaPrimitive.ScrollAreaThumb
41 |         data-slot="scroll-area-thumb"
42 |         className="bg-border relative flex-1 rounded-full"
43 |       />
44 |     </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 |   )
46 | }
47 | 
48 | export { ScrollArea, ScrollBar }
49 |

--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { createContext, useContext, useEffect, useState } from 'react'
 3 | 
 4 | type Theme = 'dark' | 'light' | 'system'
 5 | 
 6 | interface ThemeProviderProps {
 7 |   children: React.ReactNode
 8 |   defaultTheme?: Theme
 9 |   storageKey?: string
10 | }
11 | 
12 | interface ThemeProviderState {
13 |   theme: Theme
14 |   setTheme: (theme: Theme) => void
15 | }
16 | 
17 | const initialState: ThemeProviderState = {
18 |   theme: 'system',
19 |   setTheme: () => null,
20 | }
21 | 
22 | const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
23 | 
24 | export function ThemeProvider({
25 |   children,
26 |   defaultTheme = 'system',
27 |   storageKey = 'vite-ui-theme',
28 |   ...props
29 | }: ThemeProviderProps) {
30 |   const [theme, setTheme] = useState<Theme>(
31 |     () => (window.localStorage.getItem(storageKey) as Theme | undefined) ?? defaultTheme,
32 |   )
33 | 
34 |   useEffect(() => {
35 |     const root = window.document.documentElement
36 | 
37 |     root.classList.remove('light', 'dark')
38 | 
39 |     if (theme === 'system') {
40 |       const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
41 | 
42 |       root.classList.add(systemTheme)
43 |       return
44 |     }
45 | 
46 |     root.classList.add(theme)
47 |   }, [theme])
48 | 
49 |   const value = {
50 |     theme,
51 |     setTheme: (theme: Theme) => {
52 |       window.localStorage.setItem(storageKey, theme)
53 |       setTheme(theme)
54 |     },
55 |   }
56 | 
57 |   return (
58 |     <ThemeProviderContext.Provider {...props} value={value}>
59 |       {children}
60 |     </ThemeProviderContext.Provider>
61 |   )
62 | }
63 | 
64 | export const useTheme = () => {
65 |   const context = useContext(ThemeProviderContext)
66 | 
67 |   return context
68 | }
69 |

--------------------------------------------------------------------------------
/src/components/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | import { Monitor, Moon, Sun } from 'lucide-react'
 2 | 
 3 | import { Button } from '@/components/ui/button'
 4 | import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 5 | import { useTheme } from '@/components/theme-provider'
 6 | import type { FC } from 'react'
 7 | 
 8 | export const ModeToggle: FC<{ className?: string }> = ({ className }) => {
 9 |   const { theme, setTheme } = useTheme()
10 | 
11 |   const toggleTheme = () => {
12 |     if (theme === 'system') {
13 |       setTheme('light')
14 |     } else if (theme === 'light') {
15 |       setTheme('dark')
16 |     } else {
17 |       setTheme('system')
18 |     }
19 |   }
20 | 
21 |   const getIcon = () => {
22 |     switch (theme) {
23 |       case 'light':
24 |         return <Sun className="h-[1.2rem] w-[1.2rem]" />
25 |       case 'dark':
26 |         return <Moon className="h-[1.2rem] w-[1.2rem]" />
27 |       case 'system':
28 |         return <Monitor className="h-[1.2rem] w-[1.2rem]" />
29 |       default:
30 |         return <Monitor className="h-[1.2rem] w-[1.2rem]" />
31 |     }
32 |   }
33 | 
34 |   const getTooltipText = () => {
35 |     switch (theme) {
36 |       case 'light':
37 |         return 'Switch to dark theme'
38 |       case 'dark':
39 |         return 'Switch to system theme'
40 |       case 'system':
41 |         return 'Switch to light theme'
42 |       default:
43 |         return 'Toggle theme'
44 |     }
45 |   }
46 | 
47 |   return (
48 |     <Tooltip>
49 |       <TooltipTrigger asChild>
50 |         <Button variant="ghost" size="icon" onClick={toggleTheme} className={className}>
51 |           {getIcon()}
52 |           <span className="sr-only">Toggle theme</span>
53 |         </Button>
54 |       </TooltipTrigger>
55 |       <TooltipContent>{getTooltipText()}</TooltipContent>
56 |     </Tooltip>
57 |   )
58 | }
59 |

--------------------------------------------------------------------------------
/src/components/ai-elements/conversation.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button'
 2 | import { cn } from '@/lib/utils'
 3 | import { ArrowDownIcon } from 'lucide-react'
 4 | import type { ComponentProps } from 'react'
 5 | import { useCallback } from 'react'
 6 | import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'
 7 | 
 8 | export type ConversationProps = ComponentProps<typeof StickToBottom>
 9 | 
10 | export const Conversation = ({ className, ...props }: ConversationProps) => (
11 |   <StickToBottom
12 |     className={cn('relative flex-1 custom-scrollbar overflow-hidden', className)}
13 |     initial="smooth"
14 |     resize="smooth"
15 |     role="log"
16 |     {...props}
17 |   />
18 | )
19 | 
20 | export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>
21 | 
22 | export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
23 |   <StickToBottom.Content className={cn('p-4 stick-to-bottom', className)} {...props} />
24 | )
25 | 
26 | export type ConversationScrollButtonProps = ComponentProps<typeof Button>
27 | 
28 | export const ConversationScrollButton = ({ className, ...props }: ConversationScrollButtonProps) => {
29 |   const { isAtBottom, scrollToBottom } = useStickToBottomContext()
30 | 
31 |   const handleScrollToBottom = useCallback(() => {
32 |     // eslint-disable-next-line @typescript-eslint/no-floating-promises
33 |     scrollToBottom()
34 |   }, [scrollToBottom])
35 | 
36 |   return (
37 |     !isAtBottom && (
38 |       <Button
39 |         className={cn('absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full', className)}
40 |         onClick={handleScrollToBottom}
41 |         size="icon"
42 |         type="button"
43 |         variant="outline"
44 |         {...props}
45 |       >
46 |         <ArrowDownIcon className="size-4" />
47 |       </Button>
48 |     )
49 |   )
50 | }
51 |

--------------------------------------------------------------------------------
/eslint.config.ts:
--------------------------------------------------------------------------------
 1 | import pluginJs from '@eslint/js'
 2 | import eslintConfigPrettier from 'eslint-config-prettier/flat'
 3 | import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 4 | import globals from 'globals'
 5 | import neostandard from 'neostandard'
 6 | import tseslint from 'typescript-eslint'
 7 | import { defineConfig } from 'eslint/config'
 8 | 
 9 | export default defineConfig(
10 |   pluginJs.configs.recommended,
11 |   tseslint.configs.strictTypeChecked,
12 |   tseslint.configs.stylisticTypeChecked,
13 |   neostandard({ noJsx: true, noStyle: true }),
14 |   eslintPluginPrettierRecommended,
15 |   eslintConfigPrettier,
16 |   { files: ['src/*.{js,mjs,cjs,ts}'] },
17 |   {
18 |     languageOptions: {
19 |       globals: globals.node,
20 |     },
21 |   },
22 |   { ignores: ['dist/**', 'server/**', 'node_modules/**', 'scratch/**', 'agent/**'] },
23 |   {
24 |     rules: {
25 |       '@typescript-eslint/no-unused-vars': [
26 |         'error',
27 |         {
28 |           argsIgnorePattern: '^_',
29 |           caughtErrors: 'all',
30 |           caughtErrorsIgnorePattern: '^_',
31 |           destructuredArrayIgnorePattern: '^_',
32 |           varsIgnorePattern: '^_',
33 |           ignoreRestSiblings: true,
34 |         },
35 |       ],
36 |       '@typescript-eslint/restrict-template-expressions': [
37 |         'error',
38 |         {
39 |           allow: [{ name: ['Error', 'URL', 'URLSearchParams'], from: 'lib' }],
40 |           allowAny: true,
41 |           allowBoolean: true,
42 |           allowNullish: true,
43 |           allowNumber: true,
44 |           allowRegExp: true,
45 |         },
46 |       ],
47 |       '@typescript-eslint/no-non-null-assertion': 'off',
48 |     },
49 |   },
50 |   {
51 |     languageOptions: {
52 |       parserOptions: {
53 |         projectService: true,
54 |         tsconfigRootDir: import.meta.dirname,
55 |       },
56 |     },
57 |   },
58 | )
59 |

--------------------------------------------------------------------------------
/src/components/ai-elements/loader.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/lib/utils'
 2 | import type { HTMLAttributes } from 'react'
 3 | 
 4 | interface LoaderIconProps {
 5 |   size?: number
 6 | }
 7 | 
 8 | const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
 9 |   <svg height={size} strokeLinejoin="round" style={{ color: 'currentcolor' }} viewBox="0 0 16 16" width={size}>
10 |     <title>Loader</title>
11 |     <g clipPath="url(#clip0_2393_1490)">
12 |       <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
13 |       <path d="M8 16V12" opacity="0.5" stroke="currentColor" strokeWidth="1.5" />
14 |       <path d="M3.29773 1.52783L5.64887 4.7639" opacity="0.9" stroke="currentColor" strokeWidth="1.5" />
15 |       <path d="M12.7023 1.52783L10.3511 4.7639" opacity="0.1" stroke="currentColor" strokeWidth="1.5" />
16 |       <path d="M12.7023 14.472L10.3511 11.236" opacity="0.4" stroke="currentColor" strokeWidth="1.5" />
17 |       <path d="M3.29773 14.472L5.64887 11.236" opacity="0.6" stroke="currentColor" strokeWidth="1.5" />
18 |       <path d="M15.6085 5.52783L11.8043 6.7639" opacity="0.2" stroke="currentColor" strokeWidth="1.5" />
19 |       <path d="M0.391602 10.472L4.19583 9.23598" opacity="0.7" stroke="currentColor" strokeWidth="1.5" />
20 |       <path d="M15.6085 10.4722L11.8043 9.2361" opacity="0.3" stroke="currentColor" strokeWidth="1.5" />
21 |       <path d="M0.391602 5.52783L4.19583 6.7639" opacity="0.8" stroke="currentColor" strokeWidth="1.5" />
22 |     </g>
23 |     <defs>
24 |       <clipPath id="clip0_2393_1490">
25 |         <rect fill="white" height="16" width="16" />
26 |       </clipPath>
27 |     </defs>
28 |   </svg>
29 | )
30 | 
31 | export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
32 |   size?: number
33 | }
34 | 
35 | export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
36 |   <div className={cn('inline-flex animate-spin items-center justify-center', className)} {...props}>
37 |     <LoaderIcon size={size} />
38 |   </div>
39 | )
40 |

--------------------------------------------------------------------------------
/src/components/ai-elements/sources.tsx:
--------------------------------------------------------------------------------
 1 | import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 2 | import { cn } from '@/lib/utils'
 3 | import { BookIcon, ChevronDownIcon } from 'lucide-react'
 4 | import type { ComponentProps } from 'react'
 5 | 
 6 | export type SourcesProps = ComponentProps<'div'>
 7 | 
 8 | export const Sources = ({ className, ...props }: SourcesProps) => (
 9 |   <Collapsible className={cn('not-prose mb-4 text-primary text-xs', className)} {...props} />
10 | )
11 | 
12 | export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
13 |   count: number
14 | }
15 | 
16 | export const SourcesTrigger = ({ className, count, children, ...props }: SourcesTriggerProps) => (
17 |   <CollapsibleTrigger className={cn('flex items-center gap-2', className)} {...props}>
18 |     {children ?? (
19 |       <>
20 |         <p className="font-medium">Used {count} sources</p>
21 |         <ChevronDownIcon className="h-4 w-4" />
22 |       </>
23 |     )}
24 |   </CollapsibleTrigger>
25 | )
26 | 
27 | export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>
28 | 
29 | export const SourcesContent = ({ className, ...props }: SourcesContentProps) => (
30 |   <CollapsibleContent
31 |     className={cn(
32 |       'mt-3 flex w-fit flex-col gap-2',
33 |       'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
34 |       className,
35 |     )}
36 |     {...props}
37 |   />
38 | )
39 | 
40 | export type SourceProps = ComponentProps<'a'>
41 | 
42 | export const Source = ({ href, title, children, ...props }: SourceProps) => (
43 |   <a className="flex items-center gap-2" href={href} rel="noreferrer" target="_blank" {...props}>
44 |     {children ?? (
45 |       <>
46 |         <BookIcon className="h-4 w-4" />
47 |         <span className="block font-medium">{title}</span>
48 |       </>
49 |     )}
50 |   </a>
51 | )
52 |

--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 3 | 
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
 7 |   return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
 8 | }
 9 | 
10 | function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
11 |   return (
12 |     <TooltipProvider>
13 |       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
14 |     </TooltipProvider>
15 |   )
16 | }
17 | 
18 | function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
19 |   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
20 | }
21 | 
22 | function TooltipContent({
23 |   className,
24 |   sideOffset = 0,
25 |   children,
26 |   ...props
27 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
28 |   return (
29 |     <TooltipPrimitive.Portal>
30 |       <TooltipPrimitive.Content
31 |         data-slot="tooltip-content"
32 |         sideOffset={sideOffset}
33 |         className={cn(
34 |           'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
35 |           className,
36 |         )}
37 |         {...props}
38 |       >
39 |         {children}
40 |         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
41 |       </TooltipPrimitive.Content>
42 |     </TooltipPrimitive.Portal>
43 |   )
44 | }
45 | 
46 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
47 |

--------------------------------------------------------------------------------
/src/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 gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
13 |         destructive:
14 |           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
15 |         outline:
16 |           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
17 |         secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
18 |         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
19 |         link: 'text-primary underline-offset-4 hover:underline',
20 |       },
21 |       size: {
22 |         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
23 |         sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
24 |         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
25 |         icon: 'size-9',
26 |       },
27 |     },
28 |     defaultVariants: {
29 |       variant: 'default',
30 |       size: 'default',
31 |     },
32 |   },
33 | )
34 | 
35 | function Button({
36 |   className,
37 |   variant,
38 |   size,
39 |   asChild = false,
40 |   ...props
41 | }: React.ComponentProps<'button'> &
42 |   VariantProps<typeof buttonVariants> & {
43 |     asChild?: boolean
44 |   }) {
45 |   const Comp = asChild ? Slot : 'button'
46 | 
47 |   return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
48 | }
49 | 
50 | export { Button, buttonVariants }
51 |

--------------------------------------------------------------------------------
/src/components/ai-elements/task.tsx:
--------------------------------------------------------------------------------
 1 | import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 2 | import { cn } from '@/lib/utils'
 3 | import { ChevronDownIcon, SearchIcon } from 'lucide-react'
 4 | import type { ComponentProps } from 'react'
 5 | 
 6 | export type TaskItemFileProps = ComponentProps<'div'>
 7 | 
 8 | export const TaskItemFile = ({ children, className, ...props }: TaskItemFileProps) => (
 9 |   <div
10 |     className={cn(
11 |       'inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs',
12 |       className,
13 |     )}
14 |     {...props}
15 |   >
16 |     {children}
17 |   </div>
18 | )
19 | 
20 | export type TaskItemProps = ComponentProps<'div'>
21 | 
22 | export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
23 |   <div className={cn('text-muted-foreground text-sm', className)} {...props}>
24 |     {children}
25 |   </div>
26 | )
27 | 
28 | export type TaskProps = ComponentProps<typeof Collapsible>
29 | 
30 | export const Task = ({ defaultOpen = true, className, ...props }: TaskProps) => (
31 |   <Collapsible
32 |     className={cn(
33 |       'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in',
34 |       className,
35 |     )}
36 |     defaultOpen={defaultOpen}
37 |     {...props}
38 |   />
39 | )
40 | 
41 | export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
42 |   title: string
43 | }
44 | 
45 | export const TaskTrigger = ({ children, className, title, ...props }: TaskTriggerProps) => (
46 |   <CollapsibleTrigger asChild className={cn('group', className)} {...props}>
47 |     {children ?? (
48 |       <div className="flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground">
49 |         <SearchIcon className="size-4" />
50 |         <p className="text-sm">{title}</p>
51 |         <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
52 |       </div>
53 |     )}
54 |   </CollapsibleTrigger>
55 | )
56 | 
57 | export type TaskContentProps = ComponentProps<typeof CollapsibleContent>
58 | 
59 | export const TaskContent = ({ children, className, ...props }: TaskContentProps) => (
60 |   <CollapsibleContent
61 |     className={cn(
62 |       'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
63 |       className,
64 |     )}
65 |     {...props}
66 |   >
67 |     <div className="mt-4 space-y-2 border-muted border-l-2 pl-4">{children}</div>
68 |   </CollapsibleContent>
69 | )
70 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@pydantic/ai-chat-ui",
 3 |   "private": false,
 4 |   "publishConfig": {
 5 |     "access": "public"
 6 |   },
 7 |   "version": "0.0.4",
 8 |   "type": "module",
 9 |   "scripts": {
10 |     "typecheck": "tsc --noEmit",
11 |     "format": "prettier --write -- .",
12 |     "lint": "eslint",
13 |     "lint-fix": "eslint --fix --quiet",
14 |     "dev": "BACKEND_PORT=7932 vite",
15 |     "dev:server": "cd agent && uv run uvicorn chatbot.server:app --port 38001",
16 |     "build": "tsc -b && vite build",
17 |     "preview": "vite preview"
18 |   },
19 |   "files": [
20 |     "dist"
21 |   ],
22 |   "dependencies": {
23 |     "@ai-sdk/react": "^2.0.34",
24 |     "@radix-ui/react-avatar": "^1.1.10",
25 |     "@radix-ui/react-checkbox": "^1.3.3",
26 |     "@radix-ui/react-collapsible": "^1.1.12",
27 |     "@radix-ui/react-dialog": "^1.1.15",
28 |     "@radix-ui/react-dropdown-menu": "^2.1.16",
29 |     "@radix-ui/react-hover-card": "^1.1.15",
30 |     "@radix-ui/react-scroll-area": "^1.2.10",
31 |     "@radix-ui/react-select": "^2.2.6",
32 |     "@radix-ui/react-separator": "^1.1.7",
33 |     "@radix-ui/react-slot": "^1.2.3",
34 |     "@radix-ui/react-switch": "^1.2.6",
35 |     "@radix-ui/react-tooltip": "^1.2.8",
36 |     "@radix-ui/react-use-controllable-state": "^1.2.2",
37 |     "@tailwindcss/vite": "^4.1.13",
38 |     "@tanstack/react-query": "^5.90.2",
39 |     "@uidotdev/usehooks": "^2.4.1",
40 |     "ai": "^5.0.34",
41 |     "class-variance-authority": "^0.7.1",
42 |     "clsx": "^2.1.1",
43 |     "embla-carousel-react": "^8.6.0",
44 |     "lucide-react": "^0.542.0",
45 |     "nanoid": "^5.1.6",
46 |     "next-themes": "^0.4.6",
47 |     "react": "^19.1.1",
48 |     "react-dom": "^19.1.1",
49 |     "react-syntax-highlighter": "^15.6.6",
50 |     "sonner": "^2.0.7",
51 |     "streamdown": "^1.2.0",
52 |     "tailwind-merge": "^3.3.1",
53 |     "tailwindcss": "^4.1.13",
54 |     "use-stick-to-bottom": "^1.1.1",
55 |     "zod": "^4.1.5"
56 |   },
57 |   "devDependencies": {
58 |     "@eslint/js": "^9.35.0",
59 |     "@types/node": "^24.7.2",
60 |     "@types/react": "^19.1.10",
61 |     "@types/react-dom": "^19.1.7",
62 |     "@types/react-syntax-highlighter": "^15.5.13",
63 |     "@vitejs/plugin-react": "^5.0.0",
64 |     "eslint": "^9.33.0",
65 |     "eslint-config-prettier": "^10.1.8",
66 |     "eslint-plugin-prettier": "^5.5.4",
67 |     "eslint-plugin-react-hooks": "^5.2.0",
68 |     "eslint-plugin-react-refresh": "^0.4.20",
69 |     "globals": "^16.3.0",
70 |     "neostandard": "^0.12.2",
71 |     "prettier": "^3.6.2",
72 |     "tw-animate-css": "^1.3.8",
73 |     "typescript": "~5.8.3",
74 |     "typescript-eslint": "^8.39.1",
75 |     "vite": "^7.1.2",
76 |     "vite-bundle-analyzer": "^1.2.3",
77 |     "vite-tsconfig-paths": "^5.1.4"
78 |   }
79 | }
80 |

--------------------------------------------------------------------------------
/agent/chatbot/agent.py:
--------------------------------------------------------------------------------
 1 | from typing import Any, cast
 2 | 
 3 | import pydantic_ai
 4 | 
 5 | import logfire
 6 | from chatbot.data import get_docs_dir, get_markdown, get_table_of_contents
 7 | from chatbot.db import open_populated_table
 8 | 
 9 | from chatbot.data import Repo
10 | 
11 | logfire.configure(send_to_logfire='if-token-present', console=False)
12 | logfire.instrument_pydantic_ai()
13 | 
14 | 
15 | agent = pydantic_ai.Agent(
16 |     'anthropic:claude-sonnet-4-0',
17 |     instructions="Help the user answer questions about two products ('repos'): Pydantic AI (pydantic-ai), an open source agent framework library, and Pydantic Logfire (logfire), an observability platform. Start by using the `search_docs` tool to search the relevant documentation and answer the question based on the search results. It uses a hybrid of semantic and keyword search, so writing either keywords or sentences may work. It's not searching google. Each search result starts with a path to a .md file. The file `foo/bar.md` corresponds to the URL `https://ai.pydantic.dev/foo/bar/` for Pydantic AI, `https://logfire.pydantic.dev/docs/foo/bar/` for Logfire. Include the URLs in your answer. The search results may not return complete files, or may not return the files you need. If they don't have what you need, you can use the `get_docs_file` tool. You probably only need to search once or twice, definitely not more than 3 times. The user doesn't see the search results, you need to actually return a summary of the info. To see the files that exist for the `get_docs_file` tool, along with a preview of the sections within, use the `get_table_of_contents` tool.",
18 | )
19 | 
20 | agent.tool_plain(get_table_of_contents)
21 | 
22 | 
23 | @agent.tool_plain
24 | def get_docs_file(repo: Repo, filename: str):
25 |     """Get the full text of a documentation file by its filename, e.g. `foo/bar.md`."""
26 |     if not filename.endswith('.md'):
27 |         filename += '.md'
28 |     path = get_docs_dir(repo) / filename
29 |     if not path.exists():
30 |         return f'File {filename} does not exist'
31 |     return get_markdown(path)
32 | 
33 | 
34 | @agent.tool_plain
35 | def search_docs(repo: Repo, query: str):
36 |     results = cast(
37 |         list[dict[str, Any]],
38 |         open_populated_table(repo)
39 |         .search(  # type: ignore
40 |             query,
41 |             query_type='hybrid',
42 |             vector_column_name='vector',
43 |             fts_columns='text',
44 |         )
45 |         .limit(10)
46 |         .to_list(),
47 |     )
48 |     results = [
49 |         r
50 |         for r in results
51 |         if not any(
52 |             r != r2
53 |             and r['path'] == r2['path']
54 |             and r['headers'][: len(r2['headers'])] == r2['headers']
55 |             for r2 in results
56 |         )
57 |     ]
58 | 
59 |     return '\n\n---------\n\n'.join(r['text'] for r in results)
60 | 
61 | 
62 | if __name__ == '__main__':
63 |     # print(agent.run_sync('how do i see errors').output)
64 |     # search_docs("logfire", "errors debugging view errors logs")
65 |     agent.to_cli_sync()
66 |

--------------------------------------------------------------------------------
/src/Part.tsx:
--------------------------------------------------------------------------------
 1 | import { Message, MessageContent } from '@/components/ai-elements/message'
 2 | 
 3 | import { Actions, Action } from '@/components/ai-elements/actions'
 4 | import { Response } from '@/components/ai-elements/response'
 5 | import { CopyIcon, RefreshCcwIcon } from 'lucide-react'
 6 | import type { UIDataTypes, UIMessagePart, UITools, UIMessage } from 'ai'
 7 | import { Reasoning, ReasoningContent, ReasoningTrigger } from '@/components/ai-elements/reasoning'
 8 | import { Tool, ToolHeader, ToolInput, ToolOutput, ToolContent } from '@/components/ai-elements/tool'
 9 | import { CodeBlock } from '@/components/ai-elements/code-block'
10 | 
11 | interface PartProps {
12 |   part: UIMessagePart<UIDataTypes, UITools>
13 |   message: UIMessage
14 |   status: string
15 |   regen: (id: string) => void
16 |   index: number
17 |   lastMessage: boolean
18 | }
19 | 
20 | export function Part({ part, message, status, regen, index, lastMessage }: PartProps) {
21 |   function copy(text: string) {
22 |     navigator.clipboard.writeText(text).catch((error: unknown) => {
23 |       console.error('Error copying text:', error)
24 |     })
25 |   }
26 | 
27 |   if (part.type === 'text') {
28 |     return (
29 |       <div className="py-4">
30 |         <Message from={message.role}>
31 |           <MessageContent>
32 |             <Response>{part.text}</Response>
33 |           </MessageContent>
34 |         </Message>
35 |         {message.role === 'assistant' && index === message.parts.length - 1 && (
36 |           <Actions className="mt-1">
37 |             <Action
38 |               onClick={() => {
39 |                 regen(message.id)
40 |               }}
41 |               label="Retry"
42 |             >
43 |               <RefreshCcwIcon className="size-3" />
44 |             </Action>
45 |             <Action
46 |               onClick={() => {
47 |                 copy(part.text)
48 |               }}
49 |               label="Copy"
50 |             >
51 |               <CopyIcon className="size-3" />
52 |             </Action>
53 |           </Actions>
54 |         )}
55 |       </div>
56 |     )
57 |   } else if (part.type === 'reasoning') {
58 |     return (
59 |       <Reasoning
60 |         className="w-full"
61 |         isStreaming={status === 'streaming' && index === message.parts.length - 1 && lastMessage}
62 |       >
63 |         <ReasoningTrigger />
64 |         <ReasoningContent>{part.text}</ReasoningContent>
65 |       </Reasoning>
66 |     )
67 |   } else if (part.type === 'dynamic-tool') {
68 |     return <>Dynamic Tool, TODO {JSON.stringify(part)}</>
69 |   } else if ('toolCallId' in part) {
70 |     // return <div>{JSON.stringify(part)}</div>
71 |     return (
72 |       <Tool>
73 |         <ToolHeader type={part.type} state={part.state} />
74 |         <ToolContent>
75 |           <ToolInput input={part.input} />
76 |           {part.state === 'output-available' && (
77 |             <ToolOutput
78 |               errorText=""
79 |               output={<CodeBlock code={JSON.stringify(part.output, null, 2)} language="json" />}
80 |             />
81 |           )}
82 |         </ToolContent>
83 |       </Tool>
84 |     )
85 |   }
86 | }
87 |

--------------------------------------------------------------------------------
/CLAUDE.md:
--------------------------------------------------------------------------------
 1 | # CLAUDE.md
 2 | 
 3 | This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 4 | 
 5 | ## Project Overview
 6 | 
 7 | A React-based chat interface for Pydantic AI that uses Vercel AI SDK and Elements. The project consists of a frontend (Vite + React + TypeScript) and a Python backend (FastAPI + Pydantic AI).
 8 | 
 9 | ## Development Commands
10 | 
11 | **Frontend:**
12 | 
13 | ```bash
14 | npm install
15 | npm run dev              # Start dev server (proxies /api to localhost:8000)
16 | npm run build            # Build for production (CDN deployment via jsdelivr)
17 | npm run typecheck        # Type check without emitting
18 | npm run lint             # Run ESLint
19 | npm run lint-fix         # Fix ESLint issues
20 | npm run format           # Format with Prettier
21 | ```
22 | 
23 | **Backend:**
24 | 
25 | ```bash
26 | cd agent
27 | uv run uvicorn chatbot.server:app  # Start backend on port 8000
28 | ```
29 | 
30 | Note: Stop any logfire platform instances to avoid port 8000 conflicts.
31 | 
32 | ## Architecture
33 | 
34 | ### Frontend Structure
35 | 
36 | - **src/Chat.tsx**: Main chat component handling conversation state, message sending, and local storage persistence
37 | - **src/Part.tsx**: Renders individual message parts (text, reasoning, tools, etc.)
38 | - **src/App.tsx**: Root component with theme provider, sidebar, and React Query setup
39 | - **src/components/ai-elements/**: Vercel AI Elements wrappers (conversation, prompt-input, message, tool, reasoning, sources, etc.)
40 | - **src/components/ui/**: Radix UI and shadcn/ui components
41 | 
42 | ### Key Frontend Concepts
43 | 
44 | **Conversation Management:**
45 | 
46 | - Conversations stored in localStorage by ID (nanoid)
47 | - URL-based routing: `/` for new chat, `/{nanoid}` for existing
48 | - Messages persisted via `useChat` hook and localStorage sync (throttled 500ms)
49 | - Conversation list stored in localStorage key `conversationIds`
50 | 
51 | **Model & Tool Selection:**
52 | 
53 | - Dynamic model/tool configuration fetched from `/api/configure`
54 | - Models and available builtin tools configured per-model
55 | - Tools toggled via checkboxes in prompt toolbar
56 | 
57 | **Message Parts:**
58 | 
59 | - Messages contain multiple parts: text, reasoning, tool calls, sources
60 | - Part rendering delegated to `Part.tsx` component
61 | - Tool calls show input/output with collapsible UI
62 | 
63 | ### Backend Structure
64 | 
65 | - **agent/chatbot/server.py**: FastAPI app with Vercel AI adapter, model/tool configuration
66 | - **agent/chatbot/agent.py**: Pydantic AI agent with documentation search tools
67 | - **agent/chatbot/db.py**: LanceDB vector store for documentation
68 | - **agent/chatbot/data.py**: Documentation loading and processing
69 | 
70 | ### Backend Integration
71 | 
72 | **Endpoints:**
73 | 
74 | - `GET /api/configure`: Returns available models and builtin tools (camelCase)
75 | - `POST /api/chat`: Handles chat messages via `VercelAIAdapter`
76 |   - Accepts `model` and `builtinTools` in request body extra data
77 |   - Streams responses using SSE
78 | 
79 | **Builtin Tools:**
80 | 
81 | - `web_search`, `code_execution`, `image_generation`
82 | - Enabled per-model in AI_MODELS configuration
83 | - Selected tools passed to agent via `VercelAIAdapter.dispatch_request`
84 | 
85 | ## Configuration
86 | 
87 | - **TypeScript paths**: `@/*` maps to `./src/*`
88 | - **Vite base URL**: CDN path for production (`jsdelivr.net/npm/@pydantic/pydantic-ai-chat/dist/`)
89 | - **Dev proxy**: `/api` proxied to `localhost:8000`
90 | - **Package**: Published as `@pydantic/pydantic-ai-chat` (public npm package)
91 | 
92 | ## Tech Stack
93 | 
94 | - React 19, TypeScript, Vite, Tailwind CSS 4
95 | - Vercel AI SDK (`@ai-sdk/react`, `ai`)
96 | - Radix UI primitives
97 | - FastAPI, Pydantic AI, LanceDB
98 | - ESLint (neostandard), Prettier
99 |

--------------------------------------------------------------------------------
/agent/chatbot/data.py:
--------------------------------------------------------------------------------
  1 | import re
  2 | from collections import Counter
  3 | from pathlib import Path
  4 | from typing import Any, Literal
  5 | 
  6 | import frontmatter
  7 | import markdown2
  8 | from bs4 import BeautifulSoup
  9 | from langchain_text_splitters import MarkdownHeaderTextSplitter
 10 | 
 11 | Repo = Literal['pydantic-ai', 'logfire']
 12 | repos: tuple[Repo, ...] = 'pydantic-ai', 'logfire'
 13 | 
 14 | 
 15 | def get_docs_dir(repo: Repo) -> Path:
 16 |     result = Path(__file__).parent.parent.parent.parent / repo / 'docs'
 17 |     if not result.exists():
 18 |         raise ValueError(f'This repo should live next to the {repo} repo')
 19 |     return result
 20 | 
 21 | 
 22 | IGNORED_FILES = 'release-notes.md', 'help.md', '/api/', '/legal/'
 23 | 
 24 | 
 25 | def get_docs_files(repo: Repo) -> list[Path]:
 26 |     return [
 27 |         file
 28 |         for file in get_docs_dir(repo).rglob('*.md')
 29 |         if not any(ignored in str(file) for ignored in IGNORED_FILES)
 30 |     ]
 31 | 
 32 | 
 33 | def get_markdown(path: Path) -> str:
 34 |     markdown_string = path.read_text()
 35 |     markdown_string = frontmatter.loads(markdown_string).content
 36 |     return markdown_string
 37 | 
 38 | 
 39 | def get_table_of_contents(repo: Repo):
 40 |     """Get a list of all docs files and a preview of the sections within."""
 41 |     result = ''
 42 |     for file in get_docs_files(repo):
 43 |         markdown_string = get_markdown(file)
 44 |         markdown_string = re.sub(
 45 |             r'^```\w+ [^\n]+$', '```', markdown_string, flags=re.MULTILINE
 46 |         )
 47 |         html_output = markdown2.markdown(markdown_string, extras=['fenced-code-blocks'])  # type: ignore
 48 |         soup = BeautifulSoup(html_output, 'html.parser')
 49 |         headers = soup.find_all(['h1', 'h2', 'h3', 'h4'])
 50 |         result += f'{file.relative_to(get_docs_dir(repo))}\n'
 51 |         result += '\n'.join(
 52 |             '#'
 53 |             * int(
 54 |                 header.name[1]  # type: ignore
 55 |             )
 56 |             + ' '
 57 |             + header.get_text()
 58 |             for header in headers
 59 |         )
 60 |         result += '\n\n'
 61 |     return result
 62 | 
 63 | 
 64 | headers_to_split_on = [('#' * n, f'H{n}') for n in range(1, 7)]
 65 | 
 66 | 
 67 | def get_docs_rows(repo: Repo) -> list[dict[str, Any]]:
 68 |     data: list[dict[str, Any]] = []
 69 |     for file in get_docs_files(repo):
 70 |         markdown_document = get_markdown(file)
 71 |         rel_path = str(file.relative_to(get_docs_dir(repo)))
 72 | 
 73 |         unique: set[tuple[tuple[str, ...], str]] = set()
 74 |         for num_headers in range(len(headers_to_split_on)):
 75 |             splitter = MarkdownHeaderTextSplitter(headers_to_split_on[:num_headers])
 76 |             splits = splitter.split_text(markdown_document)
 77 |             for split in splits:
 78 |                 metadata: dict[str, Any] = split.metadata  # type: ignore
 79 |                 headers = [
 80 |                     f'{prefix} {metadata[header_type]}'
 81 |                     for prefix, header_type in headers_to_split_on
 82 |                     if header_type in metadata
 83 |                 ]
 84 |                 content = '\n\n'.join([rel_path, *headers, split.page_content])
 85 |                 if len(content.encode()) > 16384:
 86 |                     continue
 87 |                 unique.add((tuple(headers), content))
 88 | 
 89 |         counts = Counter[tuple[str, ...]]()
 90 |         for headers, content in sorted(unique):
 91 |             counts[headers] += 1
 92 |             count = str(counts[headers])
 93 |             data.append(
 94 |                 dict(
 95 |                     path=rel_path,
 96 |                     headers=headers,
 97 |                     text=content,
 98 |                     count=count,
 99 |                 )
100 |             )
101 | 
102 |     return data
103 | 
104 | 
105 | if __name__ == '__main__':
106 |     print(get_table_of_contents('logfire'))
107 |     rows = get_docs_rows('logfire')
108 |     print(f'Generated {len(rows)} rows')
109 |

--------------------------------------------------------------------------------
/agent/chatbot/server.py:
--------------------------------------------------------------------------------
  1 | from __future__ import annotations as _annotations
  2 | 
  3 | from typing import Literal
  4 | 
  5 | import fastapi
  6 | import httpx
  7 | import logfire
  8 | from fastapi import Request, Response
  9 | from fastapi.responses import HTMLResponse
 10 | from pydantic import BaseModel
 11 | from pydantic.alias_generators import to_camel
 12 | from pydantic_ai.builtin_tools import (
 13 |     AbstractBuiltinTool,
 14 |     CodeExecutionTool,
 15 |     ImageGenerationTool,
 16 |     WebSearchTool,
 17 | )
 18 | from pydantic_ai.ui.vercel_ai import VercelAIAdapter
 19 | 
 20 | from .agent import agent
 21 | 
 22 | # 'if-token-present' means nothing will be sent (and the example will work) if you don't have logfire configured
 23 | logfire.configure(send_to_logfire='if-token-present')
 24 | logfire.instrument_pydantic_ai()
 25 | 
 26 | app = fastapi.FastAPI()
 27 | logfire.instrument_fastapi(app)
 28 | 
 29 | 
 30 | @app.options('/api/chat')
 31 | def options_chat():
 32 |     pass
 33 | 
 34 | 
 35 | AIModelID = Literal[
 36 |     'anthropic:claude-sonnet-4-5',
 37 |     'openai-responses:gpt-5',
 38 |     'google-gla:gemini-2.5-pro',
 39 | ]
 40 | BuiltinToolID = Literal['web_search', 'image_generation', 'code_execution']
 41 | 
 42 | 
 43 | class AIModel(BaseModel):
 44 |     id: AIModelID
 45 |     name: str
 46 |     builtin_tools: list[BuiltinToolID]
 47 | 
 48 | 
 49 | class BuiltinTool(BaseModel):
 50 |     id: BuiltinToolID
 51 |     name: str
 52 | 
 53 | 
 54 | BUILTIN_TOOL_DEFS: list[BuiltinTool] = [
 55 |     BuiltinTool(id='web_search', name='Web Search'),
 56 |     BuiltinTool(id='code_execution', name='Code Execution'),
 57 |     BuiltinTool(id='image_generation', name='Image Generation'),
 58 | ]
 59 | 
 60 | BUILTIN_TOOLS: dict[BuiltinToolID, AbstractBuiltinTool] = {
 61 |     'web_search': WebSearchTool(),
 62 |     'code_execution': CodeExecutionTool(),
 63 |     'image_generation': ImageGenerationTool(),
 64 | }
 65 | 
 66 | AI_MODELS: list[AIModel] = [
 67 |     AIModel(
 68 |         id='anthropic:claude-sonnet-4-5',
 69 |         name='Claude Sonnet 4.5',
 70 |         builtin_tools=[
 71 |             'web_search',
 72 |             'code_execution',
 73 |         ],
 74 |     ),
 75 |     AIModel(
 76 |         id='openai-responses:gpt-5',
 77 |         name='GPT 5',
 78 |         builtin_tools=[
 79 |             'web_search',
 80 |             'code_execution',
 81 |             'image_generation',
 82 |         ],
 83 |     ),
 84 |     AIModel(
 85 |         id='google-gla:gemini-2.5-pro',
 86 |         name='Gemini 2.5 Pro',
 87 |         builtin_tools=[
 88 |             'web_search',
 89 |             'code_execution',
 90 |         ],
 91 |     ),
 92 | ]
 93 | 
 94 | 
 95 | class ConfigureFrontend(BaseModel, alias_generator=to_camel, populate_by_name=True):
 96 |     models: list[AIModel]
 97 |     builtin_tools: list[BuiltinTool]
 98 | 
 99 | 
100 | @app.get('/api/configure')
101 | async def configure_frontend() -> ConfigureFrontend:
102 |     return ConfigureFrontend(
103 |         models=AI_MODELS,
104 |         builtin_tools=BUILTIN_TOOL_DEFS,
105 |     )
106 | 
107 | 
108 | class ChatRequestExtra(BaseModel, extra='ignore', alias_generator=to_camel):
109 |     model: AIModelID | None = None
110 |     builtin_tools: list[BuiltinToolID] = []
111 | 
112 | 
113 | @app.post('/api/chat')
114 | async def post_chat(request: Request) -> Response:
115 |     run_input = VercelAIAdapter.build_run_input(await request.body())
116 |     extra_data = ChatRequestExtra.model_validate(run_input.__pydantic_extra__)
117 |     return await VercelAIAdapter.dispatch_request(
118 |         request,
119 |         agent=agent,
120 |         model=extra_data.model,
121 |         builtin_tools=[BUILTIN_TOOLS[tool_id] for tool_id in extra_data.builtin_tools],
122 |     )
123 | 
124 | 
125 | @app.get('/')
126 | @app.get('/{id}')
127 | async def index(request: Request):
128 |     async with httpx.AsyncClient() as client:
129 |         response = await client.get(
130 |             'https://cdn.jsdelivr.net/npm/@pydantic/ai-chat-ui@0.0.2/dist/index.html'
131 |         )
132 |         return HTMLResponse(content=response.content, status_code=response.status_code)
133 |

--------------------------------------------------------------------------------
/src/components/ai-elements/tool.tsx:
--------------------------------------------------------------------------------
  1 | import { Badge } from '@/components/ui/badge'
  2 | import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
  3 | import { cn } from '@/lib/utils'
  4 | import type { ToolUIPart } from 'ai'
  5 | import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, XCircleIcon } from 'lucide-react'
  6 | import type { ComponentProps, ReactNode } from 'react'
  7 | import { CodeBlock } from './code-block'
  8 | import { getToolIcon } from '@/lib/tool-icons'
  9 | 
 10 | export type ToolProps = ComponentProps<typeof Collapsible>
 11 | 
 12 | export const Tool = ({ className, ...props }: ToolProps) => (
 13 |   <Collapsible className={cn('not-prose mb-4 w-full rounded-md border', className)} {...props} />
 14 | )
 15 | 
 16 | export interface ToolHeaderProps {
 17 |   type: ToolUIPart['type']
 18 |   state: ToolUIPart['state']
 19 |   className?: string
 20 | }
 21 | 
 22 | const getStatusBadge = (status: ToolUIPart['state']) => {
 23 |   const labels = {
 24 |     'input-streaming': 'Pending',
 25 |     'input-available': 'Running',
 26 |     'output-available': 'Completed',
 27 |     'output-error': 'Error',
 28 |   } as const
 29 | 
 30 |   const icons = {
 31 |     'input-streaming': <CircleIcon className="size-4" />,
 32 |     'input-available': <ClockIcon className="size-4 animate-pulse" />,
 33 |     'output-available': <CheckCircleIcon className="size-4 text-green-600" />,
 34 |     'output-error': <XCircleIcon className="size-4 text-red-600" />,
 35 |   } as const
 36 | 
 37 |   return (
 38 |     <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
 39 |       {icons[status]}
 40 |       {labels[status]}
 41 |     </Badge>
 42 |   )
 43 | }
 44 | 
 45 | export const ToolHeader = ({ className, type, state, ...props }: ToolHeaderProps) => {
 46 |   const toolId = type.slice(5) // Remove 'tool-' prefix
 47 |   const toolIcon = getToolIcon(toolId, 'size-4 text-muted-foreground')
 48 | 
 49 |   return (
 50 |     <CollapsibleTrigger className={cn('flex w-full items-center justify-between gap-4 p-3', className)} {...props}>
 51 |       <div className="flex items-center gap-2">
 52 |         {toolIcon}
 53 |         <span className="font-medium text-sm">{toolId}</span>
 54 |         {getStatusBadge(state)}
 55 |       </div>
 56 |       <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
 57 |     </CollapsibleTrigger>
 58 |   )
 59 | }
 60 | 
 61 | export type ToolContentProps = ComponentProps<typeof CollapsibleContent>
 62 | 
 63 | export const ToolContent = ({ className, ...props }: ToolContentProps) => (
 64 |   <CollapsibleContent
 65 |     className={cn(
 66 |       'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
 67 |       className,
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | 
 73 | export type ToolInputProps = ComponentProps<'div'> & {
 74 |   input: ToolUIPart['input']
 75 | }
 76 | 
 77 | export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
 78 |   <div className={cn('space-y-2 overflow-hidden p-4', className)} {...props}>
 79 |     <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">Parameters</h4>
 80 |     <div className="rounded-md bg-muted/50">
 81 |       <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
 82 |     </div>
 83 |   </div>
 84 | )
 85 | 
 86 | export type ToolOutputProps = ComponentProps<'div'> & {
 87 |   output: ReactNode
 88 |   errorText: ToolUIPart['errorText']
 89 | }
 90 | 
 91 | export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {
 92 |   if (!(output || errorText)) {
 93 |     return null
 94 |   }
 95 | 
 96 |   return (
 97 |     <div className={cn('space-y-2 p-4', className)} {...props}>
 98 |       <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
 99 |         {errorText ? 'Error' : 'Result'}
100 |       </h4>
101 |       <div
102 |         className={cn(
103 |           'overflow-x-auto rounded-md text-xs [&_table]:w-full',
104 |           errorText ? 'bg-destructive/10 text-destructive' : 'bg-muted/50 text-foreground',
105 |         )}
106 |       >
107 |         {errorText && <div>{errorText}</div>}
108 |         {output && <div>{output}</div>}
109 |       </div>
110 |     </div>
111 |   )
112 | }
113 |

--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import * as React from 'react'
  4 | import * as SheetPrimitive from '@radix-ui/react-dialog'
  5 | import { XIcon } from 'lucide-react'
  6 | 
  7 | import { cn } from '@/lib/utils'
  8 | 
  9 | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
 10 |   return <SheetPrimitive.Root data-slot="sheet" {...props} />
 11 | }
 12 | 
 13 | function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
 14 |   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 15 | }
 16 | 
 17 | function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
 18 |   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 19 | }
 20 | 
 21 | function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
 22 |   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 23 | }
 24 | 
 25 | function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
 26 |   return (
 27 |     <SheetPrimitive.Overlay
 28 |       data-slot="sheet-overlay"
 29 |       className={cn(
 30 |         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
 31 |         className,
 32 |       )}
 33 |       {...props}
 34 |     />
 35 |   )
 36 | }
 37 | 
 38 | function SheetContent({
 39 |   className,
 40 |   children,
 41 |   side = 'right',
 42 |   ...props
 43 | }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 44 |   side?: 'top' | 'right' | 'bottom' | 'left'
 45 | }) {
 46 |   return (
 47 |     <SheetPortal>
 48 |       <SheetOverlay />
 49 |       <SheetPrimitive.Content
 50 |         data-slot="sheet-content"
 51 |         className={cn(
 52 |           'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
 53 |           side === 'right' &&
 54 |             'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
 55 |           side === 'left' &&
 56 |             'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
 57 |           side === 'top' &&
 58 |             'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
 59 |           side === 'bottom' &&
 60 |             'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
 61 |           className,
 62 |         )}
 63 |         {...props}
 64 |       >
 65 |         {children}
 66 |         <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
 67 |           <XIcon className="size-4" />
 68 |           <span className="sr-only">Close</span>
 69 |         </SheetPrimitive.Close>
 70 |       </SheetPrimitive.Content>
 71 |     </SheetPortal>
 72 |   )
 73 | }
 74 | 
 75 | function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
 76 |   return <div data-slot="sheet-header" className={cn('flex flex-col gap-1.5 p-4', className)} {...props} />
 77 | }
 78 | 
 79 | function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
 80 |   return <div data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
 81 | }
 82 | 
 83 | function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
 84 |   return (
 85 |     <SheetPrimitive.Title
 86 |       data-slot="sheet-title"
 87 |       className={cn('text-foreground font-semibold', className)}
 88 |       {...props}
 89 |     />
 90 |   )
 91 | }
 92 | 
 93 | function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
 94 |   return (
 95 |     <SheetPrimitive.Description
 96 |       data-slot="sheet-description"
 97 |       className={cn('text-muted-foreground text-sm', className)}
 98 |       {...props}
 99 |     />
100 |   )
101 | }
102 | 
103 | export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }
104 |

--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import * as DialogPrimitive from '@radix-ui/react-dialog'
  3 | import { XIcon } from 'lucide-react'
  4 | 
  5 | import { cn } from '@/lib/utils'
  6 | 
  7 | function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
  8 |   return <DialogPrimitive.Root data-slot="dialog" {...props} />
  9 | }
 10 | 
 11 | function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
 12 |   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 13 | }
 14 | 
 15 | function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
 16 |   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 17 | }
 18 | 
 19 | function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
 20 |   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 21 | }
 22 | 
 23 | function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
 24 |   return (
 25 |     <DialogPrimitive.Overlay
 26 |       data-slot="dialog-overlay"
 27 |       className={cn(
 28 |         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
 29 |         className,
 30 |       )}
 31 |       {...props}
 32 |     />
 33 |   )
 34 | }
 35 | 
 36 | function DialogContent({
 37 |   className,
 38 |   children,
 39 |   showCloseButton = true,
 40 |   ...props
 41 | }: React.ComponentProps<typeof DialogPrimitive.Content> & {
 42 |   showCloseButton?: boolean
 43 | }) {
 44 |   return (
 45 |     <DialogPortal data-slot="dialog-portal">
 46 |       <DialogOverlay />
 47 |       <DialogPrimitive.Content
 48 |         data-slot="dialog-content"
 49 |         className={cn(
 50 |           'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
 51 |           className,
 52 |         )}
 53 |         {...props}
 54 |       >
 55 |         {children}
 56 |         {showCloseButton && (
 57 |           <DialogPrimitive.Close
 58 |             data-slot="dialog-close"
 59 |             className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 60 |           >
 61 |             <XIcon />
 62 |             <span className="sr-only">Close</span>
 63 |           </DialogPrimitive.Close>
 64 |         )}
 65 |       </DialogPrimitive.Content>
 66 |     </DialogPortal>
 67 |   )
 68 | }
 69 | 
 70 | function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
 71 |   return (
 72 |     <div
 73 |       data-slot="dialog-header"
 74 |       className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
 75 |       {...props}
 76 |     />
 77 |   )
 78 | }
 79 | 
 80 | function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
 81 |   return (
 82 |     <div
 83 |       data-slot="dialog-footer"
 84 |       className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
 85 |       {...props}
 86 |     />
 87 |   )
 88 | }
 89 | 
 90 | function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
 91 |   return (
 92 |     <DialogPrimitive.Title
 93 |       data-slot="dialog-title"
 94 |       className={cn('text-lg leading-none font-semibold', className)}
 95 |       {...props}
 96 |     />
 97 |   )
 98 | }
 99 | 
100 | function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
101 |   return (
102 |     <DialogPrimitive.Description
103 |       data-slot="dialog-description"
104 |       className={cn('text-muted-foreground text-sm', className)}
105 |       {...props}
106 |     />
107 |   )
108 | }
109 | 
110 | export {
111 |   Dialog,
112 |   DialogClose,
113 |   DialogContent,
114 |   DialogDescription,
115 |   DialogFooter,
116 |   DialogHeader,
117 |   DialogOverlay,
118 |   DialogPortal,
119 |   DialogTitle,
120 |   DialogTrigger,
121 | }
122 |

--------------------------------------------------------------------------------
/src/components/ai-elements/code-block.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from '@/components/ui/button'
  2 | import { cn } from '@/lib/utils'
  3 | import { CheckIcon, CopyIcon } from 'lucide-react'
  4 | import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'
  5 | import { createContext, useContext, useState } from 'react'
  6 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
  7 | import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
  8 | 
  9 | interface CodeBlockContextType {
 10 |   code: string
 11 | }
 12 | 
 13 | const CodeBlockContext = createContext<CodeBlockContextType>({
 14 |   code: '',
 15 | })
 16 | 
 17 | export type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
 18 |   code: string
 19 |   // TODO add any more languages we want here
 20 |   language: 'json'
 21 |   showLineNumbers?: boolean
 22 |   children?: ReactNode
 23 | }
 24 | 
 25 | export const CodeBlock = ({
 26 |   code,
 27 |   language,
 28 |   showLineNumbers = false,
 29 |   className,
 30 |   children,
 31 |   ...props
 32 | }: CodeBlockProps) => (
 33 |   <CodeBlockContext.Provider value={{ code }}>
 34 |     <div
 35 |       className={cn('relative w-full overflow-hidden rounded-md border bg-background text-foreground', className)}
 36 |       {...props}
 37 |     >
 38 |       <div className="relative">
 39 |         <SyntaxHighlighter
 40 |           className="overflow-hidden dark:hidden"
 41 |           codeTagProps={{
 42 |             className: 'font-mono text-sm',
 43 |           }}
 44 |           customStyle={{
 45 |             margin: 0,
 46 |             padding: '1rem',
 47 |             fontSize: '0.875rem',
 48 |             background: 'hsl(var(--background))',
 49 |             color: 'hsl(var(--foreground))',
 50 |           }}
 51 |           language={language}
 52 |           lineNumberStyle={{
 53 |             color: 'hsl(var(--muted-foreground))',
 54 |             paddingRight: '1rem',
 55 |             minWidth: '2.5rem',
 56 |           }}
 57 |           showLineNumbers={showLineNumbers}
 58 |           style={oneLight}
 59 |         >
 60 |           {code}
 61 |         </SyntaxHighlighter>
 62 |         <SyntaxHighlighter
 63 |           className="hidden overflow-hidden dark:block"
 64 |           codeTagProps={{
 65 |             className: 'font-mono text-sm',
 66 |           }}
 67 |           customStyle={{
 68 |             margin: 0,
 69 |             padding: '1rem',
 70 |             fontSize: '0.875rem',
 71 |             background: 'hsl(var(--background))',
 72 |             color: 'hsl(var(--foreground))',
 73 |           }}
 74 |           language={language}
 75 |           lineNumberStyle={{
 76 |             color: 'hsl(var(--muted-foreground))',
 77 |             paddingRight: '1rem',
 78 |             minWidth: '2.5rem',
 79 |           }}
 80 |           showLineNumbers={showLineNumbers}
 81 |           style={oneDark}
 82 |         >
 83 |           {code}
 84 |         </SyntaxHighlighter>
 85 |         {children && <div className="absolute top-2 right-2 flex items-center gap-2">{children}</div>}
 86 |       </div>
 87 |     </div>
 88 |   </CodeBlockContext.Provider>
 89 | )
 90 | 
 91 | export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
 92 |   onCopy?: () => void
 93 |   onError?: (error: Error) => void
 94 |   timeout?: number
 95 | }
 96 | 
 97 | export const CodeBlockCopyButton = ({
 98 |   onCopy,
 99 |   onError,
100 |   timeout = 2000,
101 |   children,
102 |   className,
103 |   ...props
104 | }: CodeBlockCopyButtonProps) => {
105 |   const [isCopied, setIsCopied] = useState(false)
106 |   const { code } = useContext(CodeBlockContext)
107 | 
108 |   const copyToClipboard = () => {
109 |     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
110 |     if (typeof window === 'undefined' || !navigator.clipboard.writeText) {
111 |       onError?.(new Error('Clipboard API not available'))
112 |       return
113 |     }
114 | 
115 |     navigator.clipboard
116 |       .writeText(code)
117 |       .then(() => {
118 |         setIsCopied(true)
119 |         onCopy?.()
120 |         setTimeout(() => {
121 |           setIsCopied(false)
122 |         }, timeout)
123 |       })
124 |       .catch((error: unknown) => {
125 |         onError?.(error as Error)
126 |       })
127 |   }
128 | 
129 |   const Icon = isCopied ? CheckIcon : CopyIcon
130 | 
131 |   return (
132 |     <Button className={cn('shrink-0', className)} onClick={copyToClipboard} size="icon" variant="ghost" {...props}>
133 |       {children ?? <Icon size={14} />}
134 |     </Button>
135 |   )
136 | }
137 |

--------------------------------------------------------------------------------
/src/components/ai-elements/reasoning.tsx:
--------------------------------------------------------------------------------
  1 | import { useControllableState } from '@radix-ui/react-use-controllable-state'
  2 | import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
  3 | import { cn } from '@/lib/utils'
  4 | import { BrainIcon, ChevronDownIcon } from 'lucide-react'
  5 | import type { ComponentProps } from 'react'
  6 | import { createContext, memo, useContext, useEffect, useState } from 'react'
  7 | import { Response } from './response'
  8 | 
  9 | interface ReasoningContextValue {
 10 |   isStreaming: boolean
 11 |   isOpen: boolean
 12 |   setIsOpen: (open: boolean) => void
 13 |   duration: number
 14 | }
 15 | 
 16 | const ReasoningContext = createContext<ReasoningContextValue | null>(null)
 17 | 
 18 | const useReasoning = () => {
 19 |   const context = useContext(ReasoningContext)
 20 |   if (!context) {
 21 |     throw new Error('Reasoning components must be used within Reasoning')
 22 |   }
 23 |   return context
 24 | }
 25 | 
 26 | export type ReasoningProps = ComponentProps<typeof Collapsible> & {
 27 |   isStreaming?: boolean
 28 |   open?: boolean
 29 |   defaultOpen?: boolean
 30 |   onOpenChange?: (open: boolean) => void
 31 |   duration?: number
 32 | }
 33 | 
 34 | const AUTO_CLOSE_DELAY = 1000
 35 | const MS_IN_S = 1000
 36 | 
 37 | export const Reasoning = memo(
 38 |   ({
 39 |     className,
 40 |     isStreaming = false,
 41 |     open,
 42 |     defaultOpen = true,
 43 |     // eslint-disable-next-line @typescript-eslint/unbound-method
 44 |     onOpenChange,
 45 |     duration: durationProp,
 46 |     children,
 47 |     ...props
 48 |   }: ReasoningProps) => {
 49 |     const [isOpen, setIsOpen] = useControllableState({
 50 |       prop: open,
 51 |       defaultProp: defaultOpen,
 52 |       onChange: onOpenChange,
 53 |     })
 54 |     const [duration, setDuration] = useControllableState({
 55 |       prop: durationProp,
 56 |       defaultProp: 0,
 57 |     })
 58 | 
 59 |     const [hasAutoClosedRef, setHasAutoClosedRef] = useState(false)
 60 |     const [startTime, setStartTime] = useState<number | null>(null)
 61 | 
 62 |     // Track duration when streaming starts and ends
 63 |     useEffect(() => {
 64 |       if (isStreaming) {
 65 |         if (startTime === null) {
 66 |           setStartTime(Date.now())
 67 |         }
 68 |       } else if (startTime !== null) {
 69 |         setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S))
 70 |         setStartTime(null)
 71 |       }
 72 |     }, [isStreaming, startTime, setDuration])
 73 | 
 74 |     // Auto-open when streaming starts, auto-close when streaming ends (once only)
 75 |     useEffect(() => {
 76 |       if (defaultOpen && !isStreaming && isOpen && !hasAutoClosedRef) {
 77 |         // Add a small delay before closing to allow user to see the content
 78 |         const timer = setTimeout(() => {
 79 |           setIsOpen(false)
 80 |           setHasAutoClosedRef(true)
 81 |         }, AUTO_CLOSE_DELAY)
 82 | 
 83 |         return () => {
 84 |           clearTimeout(timer)
 85 |         }
 86 |       }
 87 |     }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosedRef])
 88 | 
 89 |     const handleOpenChange = (newOpen: boolean) => {
 90 |       setIsOpen(newOpen)
 91 |     }
 92 | 
 93 |     return (
 94 |       <ReasoningContext.Provider value={{ isStreaming, isOpen, setIsOpen, duration }}>
 95 |         <Collapsible
 96 |           className={cn('not-prose mb-4', className)}
 97 |           onOpenChange={handleOpenChange}
 98 |           open={isOpen}
 99 |           {...props}
100 |         >
101 |           {children}
102 |         </Collapsible>
103 |       </ReasoningContext.Provider>
104 |     )
105 |   },
106 | )
107 | 
108 | export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>
109 | 
110 | export const ReasoningTrigger = memo(({ className, children, ...props }: ReasoningTriggerProps) => {
111 |   const { isStreaming, isOpen, duration } = useReasoning()
112 | 
113 |   return (
114 |     <CollapsibleTrigger className={cn('flex items-center gap-2 text-muted-foreground text-sm', className)} {...props}>
115 |       {children ?? (
116 |         <>
117 |           <BrainIcon className="size-4" />
118 |           {isStreaming || duration === 0 ? (
119 |             <p>Thinking...</p>
120 |           ) : (
121 |             <p>
122 |               Thought for {duration} {duration === 1 ? 'second' : 'seconds'}
123 |             </p>
124 |           )}
125 |           <ChevronDownIcon
126 |             className={cn('size-4 text-muted-foreground transition-transform', isOpen ? 'rotate-180' : 'rotate-0')}
127 |           />
128 |         </>
129 |       )}
130 |     </CollapsibleTrigger>
131 |   )
132 | })
133 | 
134 | export type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
135 |   children: string
136 | }
137 | 
138 | export const ReasoningContent = memo(({ className, children, ...props }: ReasoningContentProps) => (
139 |   <CollapsibleContent
140 |     className={cn(
141 |       'mt-4 text-sm',
142 |       'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
143 |       className,
144 |     )}
145 |     {...props}
146 |   >
147 |     <Response className="grid gap-2">{children}</Response>
148 |   </CollapsibleContent>
149 | ))
150 | 
151 | Reasoning.displayName = 'Reasoning'
152 | ReasoningTrigger.displayName = 'ReasoningTrigger'
153 | ReasoningContent.displayName = 'ReasoningContent'
154 |

--------------------------------------------------------------------------------
/src/components/ai-elements/branch.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from '@/components/ui/button'
  2 | import { cn } from '@/lib/utils'
  3 | import type { UIMessage } from 'ai'
  4 | import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
  5 | import type { ComponentProps, HTMLAttributes, ReactElement } from 'react'
  6 | import { createContext, useContext, useEffect, useState } from 'react'
  7 | 
  8 | interface BranchContextType {
  9 |   currentBranch: number
 10 |   totalBranches: number
 11 |   goToPrevious: () => void
 12 |   goToNext: () => void
 13 |   branches: ReactElement[]
 14 |   setBranches: (branches: ReactElement[]) => void
 15 | }
 16 | 
 17 | const BranchContext = createContext<BranchContextType | null>(null)
 18 | 
 19 | const useBranch = () => {
 20 |   const context = useContext(BranchContext)
 21 | 
 22 |   if (!context) {
 23 |     throw new Error('Branch components must be used within Branch')
 24 |   }
 25 | 
 26 |   return context
 27 | }
 28 | 
 29 | export type BranchProps = HTMLAttributes<HTMLDivElement> & {
 30 |   defaultBranch?: number
 31 |   onBranchChange?: (branchIndex: number) => void
 32 | }
 33 | 
 34 | export const Branch = ({ defaultBranch = 0, onBranchChange, className, ...props }: BranchProps) => {
 35 |   const [currentBranch, setCurrentBranch] = useState(defaultBranch)
 36 |   const [branches, setBranches] = useState<ReactElement[]>([])
 37 | 
 38 |   const handleBranchChange = (newBranch: number) => {
 39 |     setCurrentBranch(newBranch)
 40 |     onBranchChange?.(newBranch)
 41 |   }
 42 | 
 43 |   const goToPrevious = () => {
 44 |     const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1
 45 |     handleBranchChange(newBranch)
 46 |   }
 47 | 
 48 |   const goToNext = () => {
 49 |     const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0
 50 |     handleBranchChange(newBranch)
 51 |   }
 52 | 
 53 |   const contextValue: BranchContextType = {
 54 |     currentBranch,
 55 |     totalBranches: branches.length,
 56 |     goToPrevious,
 57 |     goToNext,
 58 |     branches,
 59 |     setBranches,
 60 |   }
 61 | 
 62 |   return (
 63 |     <BranchContext.Provider value={contextValue}>
 64 |       <div className={cn('grid w-full gap-2 [&>div]:pb-0', className)} {...props} />
 65 |     </BranchContext.Provider>
 66 |   )
 67 | }
 68 | 
 69 | export type BranchMessagesProps = HTMLAttributes<HTMLDivElement>
 70 | 
 71 | export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
 72 |   const { currentBranch, setBranches, branches } = useBranch()
 73 |   const childrenArray = (Array.isArray(children) ? children : [children]) as ReactElement[]
 74 | 
 75 |   // Use useEffect to update branches when they change
 76 |   useEffect(() => {
 77 |     if (branches.length !== childrenArray.length) {
 78 |       setBranches(childrenArray)
 79 |     }
 80 |   }, [childrenArray, branches, setBranches])
 81 | 
 82 |   return childrenArray.map((branch, index) => (
 83 |     <div
 84 |       className={cn('grid gap-2 overflow-hidden [&>div]:pb-0', index === currentBranch ? 'block' : 'hidden')}
 85 |       key={branch.key}
 86 |       {...props}
 87 |     >
 88 |       {branch}
 89 |     </div>
 90 |   ))
 91 | }
 92 | 
 93 | export type BranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
 94 |   from: UIMessage['role']
 95 | }
 96 | 
 97 | export const BranchSelector = ({ className, from, ...props }: BranchSelectorProps) => {
 98 |   const { totalBranches } = useBranch()
 99 | 
100 |   // Don't render if there's only one branch
101 |   if (totalBranches <= 1) {
102 |     return null
103 |   }
104 | 
105 |   return (
106 |     <div
107 |       className={cn(
108 |         'flex items-center gap-2 self-end px-10',
109 |         from === 'assistant' ? 'justify-start' : 'justify-end',
110 |         className,
111 |       )}
112 |       {...props}
113 |     />
114 |   )
115 | }
116 | 
117 | export type BranchPreviousProps = ComponentProps<typeof Button>
118 | 
119 | export const BranchPrevious = ({ className, children, ...props }: BranchPreviousProps) => {
120 |   const { goToPrevious, totalBranches } = useBranch()
121 | 
122 |   return (
123 |     <Button
124 |       aria-label="Previous branch"
125 |       className={cn(
126 |         'size-7 shrink-0 rounded-full text-muted-foreground transition-colors',
127 |         'hover:bg-accent hover:text-foreground',
128 |         'disabled:pointer-events-none disabled:opacity-50',
129 |         className,
130 |       )}
131 |       disabled={totalBranches <= 1}
132 |       onClick={goToPrevious}
133 |       size="icon"
134 |       type="button"
135 |       variant="ghost"
136 |       {...props}
137 |     >
138 |       {children ?? <ChevronLeftIcon size={14} />}
139 |     </Button>
140 |   )
141 | }
142 | 
143 | export type BranchNextProps = ComponentProps<typeof Button>
144 | 
145 | export const BranchNext = ({ className, children, ...props }: BranchNextProps) => {
146 |   const { goToNext, totalBranches } = useBranch()
147 | 
148 |   return (
149 |     <Button
150 |       aria-label="Next branch"
151 |       className={cn(
152 |         'size-7 shrink-0 rounded-full text-muted-foreground transition-colors',
153 |         'hover:bg-accent hover:text-foreground',
154 |         'disabled:pointer-events-none disabled:opacity-50',
155 |         className,
156 |       )}
157 |       disabled={totalBranches <= 1}
158 |       onClick={goToNext}
159 |       size="icon"
160 |       type="button"
161 |       variant="ghost"
162 |       {...props}
163 |     >
164 |       {children ?? <ChevronRightIcon size={14} />}
165 |     </Button>
166 |   )
167 | }
168 | 
169 | export type BranchPageProps = HTMLAttributes<HTMLSpanElement>
170 | 
171 | export const BranchPage = ({ className, ...props }: BranchPageProps) => {
172 |   const { currentBranch, totalBranches } = useBranch()
173 | 
174 |   return (
175 |     <span className={cn('font-medium text-muted-foreground text-xs tabular-nums', className)} {...props}>
176 |       {currentBranch + 1} of {totalBranches}
177 |     </span>
178 |   )
179 | }
180 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import 'tailwindcss';
  2 | @import 'tw-animate-css';
  3 | 
  4 | @source "../node_modules/streamdown/dist/index.js";
  5 | 
  6 | @custom-variant dark (&:is(.dark *));
  7 | 
  8 | @theme inline {
  9 |   --radius-sm: calc(var(--radius) - 4px);
 10 |   --radius-md: calc(var(--radius) - 2px);
 11 |   --radius-lg: var(--radius);
 12 |   --radius-xl: calc(var(--radius) + 4px);
 13 |   --color-background: var(--background);
 14 |   --color-foreground: var(--foreground);
 15 |   --color-card: var(--card);
 16 |   --color-card-foreground: var(--card-foreground);
 17 |   --color-popover: var(--popover);
 18 |   --color-popover-foreground: var(--popover-foreground);
 19 |   --color-primary: var(--primary);
 20 |   --color-primary-foreground: var(--primary-foreground);
 21 |   --color-secondary: var(--secondary);
 22 |   --color-secondary-foreground: var(--secondary-foreground);
 23 |   --color-muted: var(--muted);
 24 |   --color-muted-foreground: var(--muted-foreground);
 25 |   --color-accent: var(--accent);
 26 |   --color-accent-foreground: var(--accent-foreground);
 27 |   --color-destructive: var(--destructive);
 28 |   --color-border: var(--border);
 29 |   --color-input: var(--input);
 30 |   --color-ring: var(--ring);
 31 |   --color-chart-1: var(--chart-1);
 32 |   --color-chart-2: var(--chart-2);
 33 |   --color-chart-3: var(--chart-3);
 34 |   --color-chart-4: var(--chart-4);
 35 |   --color-chart-5: var(--chart-5);
 36 |   --color-sidebar: var(--sidebar);
 37 |   --color-sidebar-foreground: var(--sidebar-foreground);
 38 |   --color-sidebar-primary: var(--sidebar-primary);
 39 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 40 |   --color-sidebar-accent: var(--sidebar-accent);
 41 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 42 |   --color-sidebar-border: var(--sidebar-border);
 43 |   --color-sidebar-ring: var(--sidebar-ring);
 44 |   --color-sugar: var(--sugar);
 45 |   --color-pydantic-brand: var(--pydantic-brand);
 46 |   --text-tiny: 0.625rem;
 47 | }
 48 | 
 49 | :root {
 50 |   --radius: 0.65rem;
 51 |   --background: oklch(1 0 0);
 52 |   --foreground: oklch(0.141 0.005 285.823);
 53 |   --card: oklch(1 0 0);
 54 |   --card-foreground: oklch(0.141 0.005 285.823);
 55 |   --popover: oklch(1 0 0);
 56 |   --popover-foreground: oklch(0.141 0.005 285.823);
 57 |   --primary: oklch(0.707 0.109 164.4);
 58 |   --primary-foreground: oklch(0.969 0.015 12.422);
 59 |   --secondary: oklch(0.967 0.001 286.375);
 60 |   --secondary-foreground: oklch(0.21 0.006 285.885);
 61 |   --muted: oklch(0.967 0.001 286.375);
 62 |   --muted-foreground: oklch(0.552 0.016 285.938);
 63 |   --accent: oklch(0.956 0.048 115.7);
 64 |   --accent-foreground: oklch(0.21 0.006 285.885);
 65 |   --destructive: oklch(0.577 0.245 27.325);
 66 |   --border: oklch(0.92 0.004 286.32);
 67 |   --input: oklch(0.92 0.004 286.32);
 68 |   --ring: oklch(0.707 0.149 164.4);
 69 |   --chart-1: oklch(0.646 0.222 41.116);
 70 |   --chart-2: oklch(0.6 0.118 184.704);
 71 |   --chart-3: oklch(0.398 0.07 227.392);
 72 |   --chart-4: oklch(0.828 0.189 84.429);
 73 |   --chart-5: oklch(0.769 0.188 70.08);
 74 |   --sugar: oklch(0.991 0.006 115.7);
 75 |   --sidebar: var(--sugar);
 76 |   --sidebar-foreground: oklch(0.141 0.005 285.823);
 77 |   --sidebar-primary: oklch(0.707 0.149 164.4);
 78 |   --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
 79 |   --sidebar-accent: oklch(0.956 0.048 115.7);
 80 |   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 81 |   --sidebar-border: oklch(0.92 0.004 286.32);
 82 |   --sidebar-ring: oklch(0.707 0.149 164.4);
 83 |   --pydantic-brand: oklch(0.69 0.3 328);
 84 | }
 85 | 
 86 | .dark {
 87 |   --background: oklch(0.141 0.005 285.823);
 88 |   --foreground: oklch(0.985 0 0);
 89 |   --card: oklch(0.21 0.006 285.885);
 90 |   --card-foreground: oklch(0.985 0 0);
 91 |   --popover: oklch(0.21 0.006 285.885);
 92 |   --popover-foreground: oklch(0.985 0 0);
 93 |   --primary: oklch(0.707 0.109 164.4);
 94 |   --primary-foreground: oklch(0.969 0.015 12.422);
 95 |   --secondary: oklch(0.274 0.006 286.033);
 96 |   --secondary-foreground: oklch(0.985 0 0);
 97 |   --muted: oklch(0.274 0.006 286.033);
 98 |   --muted-foreground: oklch(0.705 0.015 286.067);
 99 |   --accent: oklch(0.23 0.05 115.7);
100 |   --accent-foreground: oklch(0.985 0 0);
101 |   --destructive: oklch(0.704 0.191 22.216);
102 |   --border: oklch(1 0 0 / 10%);
103 |   --input: oklch(1 0 0 / 15%);
104 |   --ring: oklch(0.707 0.149 164.4);
105 |   --chart-1: oklch(0.488 0.243 264.376);
106 |   --chart-2: oklch(0.696 0.17 162.48);
107 |   --chart-3: oklch(0.769 0.188 70.08);
108 |   --chart-4: oklch(0.627 0.265 303.9);
109 |   --chart-5: oklch(0.707 0.149 164.4);
110 |   --sugar: oklch(0.18 0.033 115.7);
111 |   --sidebar: var(--sugar);
112 |   --sidebar-foreground: oklch(0.985 0 0);
113 |   --sidebar-primary: oklch(0.707 0.149 164.4);
114 |   --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
115 |   --sidebar-accent: oklch(0.23 0.05 115.7);
116 |   --sidebar-accent-foreground: oklch(0.985 0 0);
117 |   --sidebar-border: oklch(1 0 0 / 10%);
118 |   --sidebar-ring: oklch(0.707 0.149 164.4);
119 |   --pydantic-brand: oklch(0.69 0.3 328);
120 | }
121 | 
122 | @layer base {
123 |   * {
124 |     @apply border-border outline-ring/50;
125 |   }
126 | 
127 |   body {
128 |     @apply bg-background text-foreground;
129 |   }
130 | }
131 | 
132 | @utility custom-scrollbar {
133 |   & > div::-webkit-scrollbar {
134 |     width: 0.5rem;
135 |   }
136 | 
137 |   & > div::-webkit-scrollbar-track {
138 |     border-radius: 100vh;
139 |     background: transparent;
140 |   }
141 | 
142 |   & > div::-webkit-scrollbar-thumb {
143 |     background: var(--accent);
144 |     border-radius: 100vh;
145 |   }
146 | 
147 |   & > div::-webkit-scrollbar-thumb:hover {
148 |     background: #c0a0b9;
149 |   }
150 | }
151 | 
152 | /* for streamdown markdown content, background color should work for both light and dark content */
153 | .code-bg .bg-muted {
154 |   background: #b0b8c442;
155 | }
156 | 
157 | .rounded {
158 |   border-radius: 4px;
159 | }
160 | 
161 | html,
162 | body,
163 | #root {
164 |   height: 100%;
165 | }
166 |

--------------------------------------------------------------------------------
/src/components/ai-elements/prompt-input.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from '@/components/ui/button'
  2 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
  3 | import { Textarea } from '@/components/ui/textarea'
  4 | import { cn } from '@/lib/utils'
  5 | import type { ChatStatus } from 'ai'
  6 | import { Loader2Icon, SendIcon, SquareIcon, XIcon } from 'lucide-react'
  7 | import type { ComponentProps, HTMLAttributes, KeyboardEventHandler } from 'react'
  8 | import { Children } from 'react'
  9 | 
 10 | export type PromptInputProps = HTMLAttributes<HTMLFormElement>
 11 | 
 12 | export const PromptInput = ({ className, ...props }: PromptInputProps) => (
 13 |   <div className="bg-background w-full">
 14 |     <form
 15 |       className={cn(
 16 |         'w-full divide-y overflow-hidden rounded-xl border shadow-sm has-focus-visible:ring-3 ring-accent',
 17 |         className,
 18 |       )}
 19 |       {...props}
 20 |     />
 21 |   </div>
 22 | )
 23 | 
 24 | export type PromptInputTextareaProps = ComponentProps<typeof Textarea> & {
 25 |   minHeight?: number
 26 |   maxHeight?: number
 27 | }
 28 | 
 29 | export const PromptInputTextarea = ({
 30 |   onChange,
 31 |   className,
 32 |   placeholder = 'What would you like to know?',
 33 |   ...props
 34 | }: PromptInputTextareaProps) => {
 35 |   const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
 36 |     if (e.key === 'Enter') {
 37 |       // Don't submit if IME composition is in progress
 38 |       if (e.nativeEvent.isComposing) {
 39 |         return
 40 |       }
 41 | 
 42 |       if (e.shiftKey) {
 43 |         // Allow newline
 44 |         return
 45 |       }
 46 | 
 47 |       // Submit on Enter (without Shift)
 48 |       e.preventDefault()
 49 |       const form = e.currentTarget.form
 50 |       if (form) {
 51 |         form.requestSubmit()
 52 |       }
 53 |     }
 54 |   }
 55 | 
 56 |   return (
 57 |     <Textarea
 58 |       className={cn(
 59 |         'w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0',
 60 |         'field-sizing-content max-h-[6lh] bg-transparent dark:bg-transparent',
 61 |         'focus-visible:ring-0',
 62 |         className,
 63 |       )}
 64 |       name="message"
 65 |       onChange={(e) => {
 66 |         onChange?.(e)
 67 |       }}
 68 |       onKeyDown={handleKeyDown}
 69 |       placeholder={placeholder}
 70 |       {...props}
 71 |     />
 72 |   )
 73 | }
 74 | 
 75 | export type PromptInputToolbarProps = HTMLAttributes<HTMLDivElement>
 76 | 
 77 | export const PromptInputToolbar = ({ className, ...props }: PromptInputToolbarProps) => (
 78 |   <div className={cn('flex items-center justify-between p-1', className)} {...props} />
 79 | )
 80 | 
 81 | export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>
 82 | 
 83 | export const PromptInputTools = ({ className, ...props }: PromptInputToolsProps) => (
 84 |   <div className={cn('flex items-center gap-1', '[&_button:first-child]:rounded-bl-xl', className)} {...props} />
 85 | )
 86 | 
 87 | export type PromptInputButtonProps = ComponentProps<typeof Button>
 88 | 
 89 | export const PromptInputButton = ({ variant = 'ghost', className, size, ...props }: PromptInputButtonProps) => {
 90 |   const newSize = (size ?? Children.count(props.children) > 1) ? 'default' : 'icon'
 91 | 
 92 |   return (
 93 |     <Button
 94 |       className={cn(
 95 |         'shrink-0 gap-1.5 rounded-lg',
 96 |         variant === 'ghost' && 'text-muted-foreground',
 97 |         newSize === 'default' && 'px-3',
 98 |         className,
 99 |       )}
100 |       size={newSize}
101 |       type="button"
102 |       variant={variant}
103 |       {...props}
104 |     />
105 |   )
106 | }
107 | 
108 | export type PromptInputSubmitProps = ComponentProps<typeof Button> & {
109 |   status?: ChatStatus
110 | }
111 | 
112 | export const PromptInputSubmit = ({
113 |   className,
114 |   variant = 'default',
115 |   size = 'icon',
116 |   status,
117 |   children,
118 |   ...props
119 | }: PromptInputSubmitProps) => {
120 |   let Icon = <SendIcon className="size-4" />
121 | 
122 |   if (status === 'submitted') {
123 |     Icon = <Loader2Icon className="size-4 animate-spin" />
124 |   } else if (status === 'streaming') {
125 |     Icon = <SquareIcon className="size-4" />
126 |   } else if (status === 'error') {
127 |     Icon = <XIcon className="size-4" />
128 |   }
129 | 
130 |   return (
131 |     <Button
132 |       className={cn('gap-1.5 rounded-lg bg-pydantic-brand text-white hover:bg-pydantic-brand/90', className)}
133 |       size={size}
134 |       type="submit"
135 |       variant={variant}
136 |       {...props}
137 |     >
138 |       {children ?? Icon}
139 |     </Button>
140 |   )
141 | }
142 | 
143 | export type PromptInputModelSelectProps = ComponentProps<typeof Select>
144 | 
145 | export const PromptInputModelSelect = (props: PromptInputModelSelectProps) => <Select {...props} />
146 | 
147 | export type PromptInputModelSelectTriggerProps = ComponentProps<typeof SelectTrigger>
148 | 
149 | export const PromptInputModelSelectTrigger = ({ className, ...props }: PromptInputModelSelectTriggerProps) => (
150 |   <SelectTrigger
151 |     className={cn(
152 |       'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors',
153 |       'hover:bg-accent hover:text-foreground [&[aria-expanded="true"]]:bg-accent [&[aria-expanded="true"]]:text-foreground',
154 |       className,
155 |     )}
156 |     {...props}
157 |   />
158 | )
159 | 
160 | export type PromptInputModelSelectContentProps = ComponentProps<typeof SelectContent>
161 | 
162 | export const PromptInputModelSelectContent = ({ className, ...props }: PromptInputModelSelectContentProps) => (
163 |   <SelectContent className={cn(className)} {...props} />
164 | )
165 | 
166 | export type PromptInputModelSelectItemProps = ComponentProps<typeof SelectItem>
167 | 
168 | export const PromptInputModelSelectItem = ({ className, ...props }: PromptInputModelSelectItemProps) => (
169 |   <SelectItem className={cn(className)} {...props} />
170 | )
171 | 
172 | export type PromptInputModelSelectValueProps = ComponentProps<typeof SelectValue>
173 | 
174 | export const PromptInputModelSelectValue = ({ className, ...props }: PromptInputModelSelectValueProps) => (
175 |   <SelectValue className={cn(className)} {...props} />
176 | )
177 |

--------------------------------------------------------------------------------
/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
  3 | import { ArrowLeft, ArrowRight } from 'lucide-react'
  4 | 
  5 | import { cn } from '@/lib/utils'
  6 | import { Button } from '@/components/ui/button'
  7 | 
  8 | type CarouselApi = UseEmblaCarouselType[1]
  9 | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 10 | type CarouselOptions = UseCarouselParameters[0]
 11 | type CarouselPlugin = UseCarouselParameters[1]
 12 | 
 13 | interface CarouselProps {
 14 |   opts?: CarouselOptions
 15 |   plugins?: CarouselPlugin
 16 |   orientation?: 'horizontal' | 'vertical'
 17 |   setApi?: (api: CarouselApi) => void
 18 | }
 19 | 
 20 | type CarouselContextProps = {
 21 |   carouselRef: ReturnType<typeof useEmblaCarousel>[0]
 22 |   api: ReturnType<typeof useEmblaCarousel>[1]
 23 |   scrollPrev: () => void
 24 |   scrollNext: () => void
 25 |   canScrollPrev: boolean
 26 |   canScrollNext: boolean
 27 | } & CarouselProps
 28 | 
 29 | const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 30 | 
 31 | function useCarousel() {
 32 |   const context = React.useContext(CarouselContext)
 33 | 
 34 |   if (!context) {
 35 |     throw new Error('useCarousel must be used within a <Carousel />')
 36 |   }
 37 | 
 38 |   return context
 39 | }
 40 | 
 41 | function Carousel({
 42 |   orientation = 'horizontal',
 43 |   opts,
 44 |   setApi,
 45 |   plugins,
 46 |   className,
 47 |   children,
 48 |   ...props
 49 | }: React.ComponentProps<'div'> & CarouselProps) {
 50 |   const [carouselRef, api] = useEmblaCarousel(
 51 |     {
 52 |       ...opts,
 53 |       axis: orientation === 'horizontal' ? 'x' : 'y',
 54 |     },
 55 |     plugins,
 56 |   )
 57 |   const [canScrollPrev, setCanScrollPrev] = React.useState(false)
 58 |   const [canScrollNext, setCanScrollNext] = React.useState(false)
 59 | 
 60 |   const onSelect = React.useCallback((api: CarouselApi) => {
 61 |     if (!api) return
 62 |     setCanScrollPrev(api.canScrollPrev())
 63 |     setCanScrollNext(api.canScrollNext())
 64 |   }, [])
 65 | 
 66 |   const scrollPrev = React.useCallback(() => {
 67 |     api?.scrollPrev()
 68 |   }, [api])
 69 | 
 70 |   const scrollNext = React.useCallback(() => {
 71 |     api?.scrollNext()
 72 |   }, [api])
 73 | 
 74 |   const handleKeyDown = React.useCallback(
 75 |     (event: React.KeyboardEvent<HTMLDivElement>) => {
 76 |       if (event.key === 'ArrowLeft') {
 77 |         event.preventDefault()
 78 |         scrollPrev()
 79 |       } else if (event.key === 'ArrowRight') {
 80 |         event.preventDefault()
 81 |         scrollNext()
 82 |       }
 83 |     },
 84 |     [scrollPrev, scrollNext],
 85 |   )
 86 | 
 87 |   React.useEffect(() => {
 88 |     if (!api || !setApi) return
 89 |     setApi(api)
 90 |   }, [api, setApi])
 91 | 
 92 |   React.useEffect(() => {
 93 |     if (!api) return
 94 |     onSelect(api)
 95 |     api.on('reInit', onSelect)
 96 |     api.on('select', onSelect)
 97 | 
 98 |     return () => {
 99 |       api.off('select', onSelect)
100 |     }
101 |   }, [api, onSelect])
102 | 
103 |   return (
104 |     <CarouselContext.Provider
105 |       value={{
106 |         carouselRef,
107 |         api,
108 |         opts,
109 |         orientation,
110 |         scrollPrev,
111 |         scrollNext,
112 |         canScrollPrev,
113 |         canScrollNext,
114 |       }}
115 |     >
116 |       <div
117 |         onKeyDownCapture={handleKeyDown}
118 |         className={cn('relative', className)}
119 |         role="region"
120 |         aria-roledescription="carousel"
121 |         data-slot="carousel"
122 |         {...props}
123 |       >
124 |         {children}
125 |       </div>
126 |     </CarouselContext.Provider>
127 |   )
128 | }
129 | 
130 | function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
131 |   const { carouselRef, orientation } = useCarousel()
132 | 
133 |   return (
134 |     <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
135 |       <div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />
136 |     </div>
137 |   )
138 | }
139 | 
140 | function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
141 |   const { orientation } = useCarousel()
142 | 
143 |   return (
144 |     <div
145 |       role="group"
146 |       aria-roledescription="slide"
147 |       data-slot="carousel-item"
148 |       className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
149 |       {...props}
150 |     />
151 |   )
152 | }
153 | 
154 | function CarouselPrevious({
155 |   className,
156 |   variant = 'outline',
157 |   size = 'icon',
158 |   ...props
159 | }: React.ComponentProps<typeof Button>) {
160 |   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
161 | 
162 |   return (
163 |     <Button
164 |       data-slot="carousel-previous"
165 |       variant={variant}
166 |       size={size}
167 |       className={cn(
168 |         'absolute size-8 rounded-full',
169 |         orientation === 'horizontal'
170 |           ? 'top-1/2 -left-12 -translate-y-1/2'
171 |           : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
172 |         className,
173 |       )}
174 |       disabled={!canScrollPrev}
175 |       onClick={scrollPrev}
176 |       {...props}
177 |     >
178 |       <ArrowLeft />
179 |       <span className="sr-only">Previous slide</span>
180 |     </Button>
181 |   )
182 | }
183 | 
184 | function CarouselNext({
185 |   className,
186 |   variant = 'outline',
187 |   size = 'icon',
188 |   ...props
189 | }: React.ComponentProps<typeof Button>) {
190 |   const { orientation, scrollNext, canScrollNext } = useCarousel()
191 | 
192 |   return (
193 |     <Button
194 |       data-slot="carousel-next"
195 |       variant={variant}
196 |       size={size}
197 |       className={cn(
198 |         'absolute size-8 rounded-full',
199 |         orientation === 'horizontal'
200 |           ? 'top-1/2 -right-12 -translate-y-1/2'
201 |           : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
202 |         className,
203 |       )}
204 |       disabled={!canScrollNext}
205 |       onClick={scrollNext}
206 |       {...props}
207 |     >
208 |       <ArrowRight />
209 |       <span className="sr-only">Next slide</span>
210 |     </Button>
211 |   )
212 | }
213 | 
214 | export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
215 |

--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import * as React from 'react'
  4 | import * as SelectPrimitive from '@radix-ui/react-select'
  5 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
  6 | 
  7 | import { cn } from '@/lib/utils'
  8 | 
  9 | function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
 10 |   return <SelectPrimitive.Root data-slot="select" {...props} />
 11 | }
 12 | 
 13 | function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
 14 |   return <SelectPrimitive.Group data-slot="select-group" {...props} />
 15 | }
 16 | 
 17 | function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
 18 |   return <SelectPrimitive.Value data-slot="select-value" {...props} />
 19 | }
 20 | 
 21 | function SelectTrigger({
 22 |   className,
 23 |   size = 'default',
 24 |   children,
 25 |   ...props
 26 | }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
 27 |   size?: 'sm' | 'default'
 28 | }) {
 29 |   return (
 30 |     <SelectPrimitive.Trigger
 31 |       data-slot="select-trigger"
 32 |       data-size={size}
 33 |       className={cn(
 34 |         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 35 |         className,
 36 |       )}
 37 |       {...props}
 38 |     >
 39 |       {children}
 40 |       <SelectPrimitive.Icon asChild>
 41 |         <ChevronDownIcon className="size-4 opacity-50" />
 42 |       </SelectPrimitive.Icon>
 43 |     </SelectPrimitive.Trigger>
 44 |   )
 45 | }
 46 | 
 47 | function SelectContent({
 48 |   className,
 49 |   children,
 50 |   position = 'popper',
 51 |   ...props
 52 | }: React.ComponentProps<typeof SelectPrimitive.Content>) {
 53 |   return (
 54 |     <SelectPrimitive.Portal>
 55 |       <SelectPrimitive.Content
 56 |         data-slot="select-content"
 57 |         className={cn(
 58 |           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
 59 |           position === 'popper' &&
 60 |             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
 61 |           className,
 62 |         )}
 63 |         position={position}
 64 |         {...props}
 65 |       >
 66 |         <SelectScrollUpButton />
 67 |         <SelectPrimitive.Viewport
 68 |           className={cn(
 69 |             'p-1',
 70 |             position === 'popper' &&
 71 |               'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
 72 |           )}
 73 |         >
 74 |           {children}
 75 |         </SelectPrimitive.Viewport>
 76 |         <SelectScrollDownButton />
 77 |       </SelectPrimitive.Content>
 78 |     </SelectPrimitive.Portal>
 79 |   )
 80 | }
 81 | 
 82 | function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
 83 |   return (
 84 |     <SelectPrimitive.Label
 85 |       data-slot="select-label"
 86 |       className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
 87 |       {...props}
 88 |     />
 89 |   )
 90 | }
 91 | 
 92 | function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
 93 |   return (
 94 |     <SelectPrimitive.Item
 95 |       data-slot="select-item"
 96 |       className={cn(
 97 |         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 98 |         className,
 99 |       )}
100 |       {...props}
101 |     >
102 |       <span className="absolute right-2 flex size-3.5 items-center justify-center">
103 |         <SelectPrimitive.ItemIndicator>
104 |           <CheckIcon className="size-4" />
105 |         </SelectPrimitive.ItemIndicator>
106 |       </span>
107 |       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
108 |     </SelectPrimitive.Item>
109 |   )
110 | }
111 | 
112 | function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
113 |   return (
114 |     <SelectPrimitive.Separator
115 |       data-slot="select-separator"
116 |       className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
117 |       {...props}
118 |     />
119 |   )
120 | }
121 | 
122 | function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
123 |   return (
124 |     <SelectPrimitive.ScrollUpButton
125 |       data-slot="select-scroll-up-button"
126 |       className={cn('flex cursor-default items-center justify-center py-1', className)}
127 |       {...props}
128 |     >
129 |       <ChevronUpIcon className="size-4" />
130 |     </SelectPrimitive.ScrollUpButton>
131 |   )
132 | }
133 | 
134 | function SelectScrollDownButton({
135 |   className,
136 |   ...props
137 | }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
138 |   return (
139 |     <SelectPrimitive.ScrollDownButton
140 |       data-slot="select-scroll-down-button"
141 |       className={cn('flex cursor-default items-center justify-center py-1', className)}
142 |       {...props}
143 |     >
144 |       <ChevronDownIcon className="size-4" />
145 |     </SelectPrimitive.ScrollDownButton>
146 |   )
147 | }
148 | 
149 | export {
150 |   Select,
151 |   SelectContent,
152 |   SelectGroup,
153 |   SelectItem,
154 |   SelectLabel,
155 |   SelectScrollDownButton,
156 |   SelectScrollUpButton,
157 |   SelectSeparator,
158 |   SelectTrigger,
159 |   SelectValue,
160 | }
161 |

--------------------------------------------------------------------------------
/src/components/ai-elements/inline-citation.tsx:
--------------------------------------------------------------------------------
  1 | import { Badge } from '@/components/ui/badge'
  2 | import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '@/components/ui/carousel'
  3 | import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
  4 | import { cn } from '@/lib/utils'
  5 | import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
  6 | import { type ComponentProps, createContext, useCallback, useContext, useEffect, useState } from 'react'
  7 | 
  8 | export type InlineCitationProps = ComponentProps<'span'>
  9 | 
 10 | export const InlineCitation = ({ className, ...props }: InlineCitationProps) => (
 11 |   <span className={cn('group inline items-center gap-1', className)} {...props} />
 12 | )
 13 | 
 14 | export type InlineCitationTextProps = ComponentProps<'span'>
 15 | 
 16 | export const InlineCitationText = ({ className, ...props }: InlineCitationTextProps) => (
 17 |   <span className={cn('transition-colors group-hover:bg-accent', className)} {...props} />
 18 | )
 19 | 
 20 | export type InlineCitationCardProps = ComponentProps<typeof HoverCard>
 21 | 
 22 | export const InlineCitationCard = (props: InlineCitationCardProps) => (
 23 |   <HoverCard closeDelay={0} openDelay={0} {...props} />
 24 | )
 25 | 
 26 | export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
 27 |   sources: string[]
 28 | }
 29 | 
 30 | export const InlineCitationCardTrigger = ({ sources, className, ...props }: InlineCitationCardTriggerProps) => (
 31 |   <HoverCardTrigger asChild>
 32 |     <Badge className={cn('ml-1 rounded-full', className)} variant="secondary" {...props}>
 33 |       {sources.length ? (
 34 |         <>
 35 |           {new URL(sources[0]).hostname} {sources.length > 1 && `+${sources.length - 1}`}
 36 |         </>
 37 |       ) : (
 38 |         'unknown'
 39 |       )}
 40 |     </Badge>
 41 |   </HoverCardTrigger>
 42 | )
 43 | 
 44 | export type InlineCitationCardBodyProps = ComponentProps<'div'>
 45 | 
 46 | export const InlineCitationCardBody = ({ className, ...props }: InlineCitationCardBodyProps) => (
 47 |   <HoverCardContent className={cn('relative w-80 p-0', className)} {...props} />
 48 | )
 49 | 
 50 | const CarouselApiContext = createContext<CarouselApi | undefined>(undefined)
 51 | 
 52 | const useCarouselApi = () => {
 53 |   const context = useContext(CarouselApiContext)
 54 |   return context
 55 | }
 56 | 
 57 | export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>
 58 | 
 59 | export const InlineCitationCarousel = ({ className, children, ...props }: InlineCitationCarouselProps) => {
 60 |   const [api, setApi] = useState<CarouselApi>()
 61 | 
 62 |   return (
 63 |     <CarouselApiContext.Provider value={api}>
 64 |       <Carousel className={cn('w-full', className)} setApi={setApi} {...props}>
 65 |         {children}
 66 |       </Carousel>
 67 |     </CarouselApiContext.Provider>
 68 |   )
 69 | }
 70 | 
 71 | export type InlineCitationCarouselContentProps = ComponentProps<'div'>
 72 | 
 73 | export const InlineCitationCarouselContent = (props: InlineCitationCarouselContentProps) => (
 74 |   <CarouselContent {...props} />
 75 | )
 76 | 
 77 | export type InlineCitationCarouselItemProps = ComponentProps<'div'>
 78 | 
 79 | export const InlineCitationCarouselItem = ({ className, ...props }: InlineCitationCarouselItemProps) => (
 80 |   <CarouselItem className={cn('w-full space-y-2 p-4 pl-8', className)} {...props} />
 81 | )
 82 | 
 83 | export type InlineCitationCarouselHeaderProps = ComponentProps<'div'>
 84 | 
 85 | export const InlineCitationCarouselHeader = ({ className, ...props }: InlineCitationCarouselHeaderProps) => (
 86 |   <div className={cn('flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2', className)} {...props} />
 87 | )
 88 | 
 89 | export type InlineCitationCarouselIndexProps = ComponentProps<'div'>
 90 | 
 91 | export const InlineCitationCarouselIndex = ({ children, className, ...props }: InlineCitationCarouselIndexProps) => {
 92 |   const api = useCarouselApi()
 93 |   const [current, setCurrent] = useState(0)
 94 |   const [count, setCount] = useState(0)
 95 | 
 96 |   useEffect(() => {
 97 |     if (!api) {
 98 |       return
 99 |     }
100 | 
101 |     setCount(api.scrollSnapList().length)
102 |     setCurrent(api.selectedScrollSnap() + 1)
103 | 
104 |     api.on('select', () => {
105 |       setCurrent(api.selectedScrollSnap() + 1)
106 |     })
107 |   }, [api])
108 | 
109 |   return (
110 |     <div
111 |       className={cn('flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs', className)}
112 |       {...props}
113 |     >
114 |       {children ?? `${current}/${count}`}
115 |     </div>
116 |   )
117 | }
118 | 
119 | export type InlineCitationCarouselPrevProps = ComponentProps<'button'>
120 | 
121 | export const InlineCitationCarouselPrev = ({ className, ...props }: InlineCitationCarouselPrevProps) => {
122 |   const api = useCarouselApi()
123 | 
124 |   const handleClick = useCallback(() => {
125 |     if (api) {
126 |       api.scrollPrev()
127 |     }
128 |   }, [api])
129 | 
130 |   return (
131 |     <button aria-label="Previous" className={cn('shrink-0', className)} onClick={handleClick} type="button" {...props}>
132 |       <ArrowLeftIcon className="size-4 text-muted-foreground" />
133 |     </button>
134 |   )
135 | }
136 | 
137 | export type InlineCitationCarouselNextProps = ComponentProps<'button'>
138 | 
139 | export const InlineCitationCarouselNext = ({ className, ...props }: InlineCitationCarouselNextProps) => {
140 |   const api = useCarouselApi()
141 | 
142 |   const handleClick = useCallback(() => {
143 |     if (api) {
144 |       api.scrollNext()
145 |     }
146 |   }, [api])
147 | 
148 |   return (
149 |     <button aria-label="Next" className={cn('shrink-0', className)} onClick={handleClick} type="button" {...props}>
150 |       <ArrowRightIcon className="size-4 text-muted-foreground" />
151 |     </button>
152 |   )
153 | }
154 | 
155 | export type InlineCitationSourceProps = ComponentProps<'div'> & {
156 |   title?: string
157 |   url?: string
158 |   description?: string
159 | }
160 | 
161 | export const InlineCitationSource = ({
162 |   title,
163 |   url,
164 |   description,
165 |   className,
166 |   children,
167 |   ...props
168 | }: InlineCitationSourceProps) => (
169 |   <div className={cn('space-y-1', className)} {...props}>
170 |     {title && <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>}
171 |     {url && <p className="truncate break-all text-muted-foreground text-xs">{url}</p>}
172 |     {description && <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">{description}</p>}
173 |     {children}
174 |   </div>
175 | )
176 | 
177 | export type InlineCitationQuoteProps = ComponentProps<'blockquote'>
178 | 
179 | export const InlineCitationQuote = ({ children, className, ...props }: InlineCitationQuoteProps) => (
180 |   <blockquote
181 |     className={cn('border-muted border-l-2 pl-3 text-muted-foreground text-sm italic', className)}
182 |     {...props}
183 |   >
184 |     {children}
185 |   </blockquote>
186 | )
187 |

--------------------------------------------------------------------------------
/src/components/ai-elements/web-preview.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import { Button } from '@/components/ui/button'
  3 | import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
  4 | import { Input } from '@/components/ui/input'
  5 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
  6 | import { cn } from '@/lib/utils'
  7 | import { ChevronDownIcon } from 'lucide-react'
  8 | import type { ComponentProps, ReactNode } from 'react'
  9 | import { createContext, useContext, useState } from 'react'
 10 | 
 11 | export interface WebPreviewContextValue {
 12 |   url: string
 13 |   setUrl: (url: string) => void
 14 |   consoleOpen: boolean
 15 |   setConsoleOpen: (open: boolean) => void
 16 | }
 17 | 
 18 | const WebPreviewContext = createContext<WebPreviewContextValue | null>(null)
 19 | 
 20 | const useWebPreview = () => {
 21 |   const context = useContext(WebPreviewContext)
 22 |   if (!context) {
 23 |     throw new Error('WebPreview components must be used within a WebPreview')
 24 |   }
 25 |   return context
 26 | }
 27 | 
 28 | export type WebPreviewProps = ComponentProps<'div'> & {
 29 |   defaultUrl?: string
 30 |   onUrlChange?: (url: string) => void
 31 | }
 32 | 
 33 | export const WebPreview = ({ className, children, defaultUrl = '', onUrlChange, ...props }: WebPreviewProps) => {
 34 |   const [url, setUrl] = useState(defaultUrl)
 35 |   const [consoleOpen, setConsoleOpen] = useState(false)
 36 | 
 37 |   const handleUrlChange = (newUrl: string) => {
 38 |     setUrl(newUrl)
 39 |     onUrlChange?.(newUrl)
 40 |   }
 41 | 
 42 |   const contextValue: WebPreviewContextValue = {
 43 |     url,
 44 |     setUrl: handleUrlChange,
 45 |     consoleOpen,
 46 |     setConsoleOpen,
 47 |   }
 48 | 
 49 |   return (
 50 |     <WebPreviewContext.Provider value={contextValue}>
 51 |       <div className={cn('flex size-full flex-col rounded-lg border bg-card', className)} {...props}>
 52 |         {children}
 53 |       </div>
 54 |     </WebPreviewContext.Provider>
 55 |   )
 56 | }
 57 | 
 58 | export type WebPreviewNavigationProps = ComponentProps<'div'>
 59 | 
 60 | export const WebPreviewNavigation = ({ className, children, ...props }: WebPreviewNavigationProps) => (
 61 |   <div className={cn('flex items-center gap-1 border-b p-2', className)} {...props}>
 62 |     {children}
 63 |   </div>
 64 | )
 65 | 
 66 | export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
 67 |   tooltip?: string
 68 | }
 69 | 
 70 | export const WebPreviewNavigationButton = ({
 71 |   onClick,
 72 |   disabled,
 73 |   tooltip,
 74 |   children,
 75 |   ...props
 76 | }: WebPreviewNavigationButtonProps) => (
 77 |   <TooltipProvider>
 78 |     <Tooltip>
 79 |       <TooltipTrigger asChild>
 80 |         <Button
 81 |           className="h-8 w-8 p-0 hover:text-foreground"
 82 |           disabled={disabled}
 83 |           onClick={onClick}
 84 |           size="sm"
 85 |           variant="ghost"
 86 |           {...props}
 87 |         >
 88 |           {children}
 89 |         </Button>
 90 |       </TooltipTrigger>
 91 |       <TooltipContent>
 92 |         <p>{tooltip}</p>
 93 |       </TooltipContent>
 94 |     </Tooltip>
 95 |   </TooltipProvider>
 96 | )
 97 | 
 98 | export type WebPreviewUrlProps = ComponentProps<typeof Input>
 99 | 
100 | export const WebPreviewUrl = ({ value, onChange, onKeyDown, ...props }: WebPreviewUrlProps) => {
101 |   const { url, setUrl } = useWebPreview()
102 | 
103 |   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
104 |     if (event.key === 'Enter') {
105 |       const target = event.target as HTMLInputElement
106 |       setUrl(target.value)
107 |     }
108 |     onKeyDown?.(event)
109 |   }
110 | 
111 |   return (
112 |     <Input
113 |       className="h-8 flex-1 text-sm"
114 |       onChange={onChange}
115 |       onKeyDown={handleKeyDown}
116 |       placeholder="Enter URL..."
117 |       value={value ?? url}
118 |       {...props}
119 |     />
120 |   )
121 | }
122 | 
123 | export type WebPreviewBodyProps = ComponentProps<'iframe'> & {
124 |   loading?: ReactNode
125 | }
126 | 
127 | export const WebPreviewBody = ({ className, loading, src, ...props }: WebPreviewBodyProps) => {
128 |   const { url } = useWebPreview()
129 | 
130 |   return (
131 |     <div className="flex-1">
132 |       <iframe
133 |         className={cn('size-full', className)}
134 |         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
135 |         src={(src ?? url) || undefined}
136 |         title="Preview"
137 |         {...props}
138 |       />
139 |       {loading}
140 |     </div>
141 |   )
142 | }
143 | 
144 | export type WebPreviewConsoleProps = ComponentProps<'div'> & {
145 |   logs?: {
146 |     level: 'log' | 'warn' | 'error'
147 |     message: string
148 |     timestamp: Date
149 |   }[]
150 | }
151 | 
152 | export const WebPreviewConsole = ({ className, logs = [], children, ...props }: WebPreviewConsoleProps) => {
153 |   const { consoleOpen, setConsoleOpen } = useWebPreview()
154 | 
155 |   return (
156 |     <Collapsible
157 |       className={cn('border-t bg-muted/50 font-mono text-sm', className)}
158 |       onOpenChange={setConsoleOpen}
159 |       open={consoleOpen}
160 |       {...props}
161 |     >
162 |       <CollapsibleTrigger asChild>
163 |         <Button
164 |           className="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
165 |           variant="ghost"
166 |         >
167 |           Console
168 |           <ChevronDownIcon className={cn('h-4 w-4 transition-transform duration-200', consoleOpen && 'rotate-180')} />
169 |         </Button>
170 |       </CollapsibleTrigger>
171 |       <CollapsibleContent
172 |         className={cn(
173 |           'px-4 pb-4',
174 |           'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
175 |         )}
176 |       >
177 |         <div className="max-h-48 space-y-1 overflow-y-auto">
178 |           {logs.length === 0 ? (
179 |             <p className="text-muted-foreground">No console output</p>
180 |           ) : (
181 |             logs.map((log, index) => (
182 |               <div
183 |                 className={cn(
184 |                   'text-xs',
185 |                   log.level === 'error' && 'text-destructive',
186 |                   log.level === 'warn' && 'text-yellow-600',
187 |                   log.level === 'log' && 'text-foreground',
188 |                 )}
189 |                 key={`${log.timestamp.getTime()}-${index}`}
190 |               >
191 |                 <span className="text-muted-foreground">{log.timestamp.toLocaleTimeString()}</span> {log.message}
192 |               </div>
193 |             ))
194 |           )}
195 |           {children}
196 |         </div>
197 |       </CollapsibleContent>
198 |     </Collapsible>
199 |   )
200 | }
201 |

--------------------------------------------------------------------------------
/src/components/app-sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import { CirclePlus, MessageCircle, Trash } from 'lucide-react'
  2 | import type React from 'react'
  3 | import { useEffect, useState } from 'react'
  4 | import { toast } from 'sonner'
  5 | 
  6 | import { Button } from '@/components/ui/button'
  7 | import {
  8 |   Dialog,
  9 |   DialogContent,
 10 |   DialogDescription,
 11 |   DialogFooter,
 12 |   DialogHeader,
 13 |   DialogTitle,
 14 | } from '@/components/ui/dialog'
 15 | import {
 16 |   Sidebar,
 17 |   SidebarContent,
 18 |   SidebarFooter,
 19 |   SidebarGroup,
 20 |   SidebarGroupContent,
 21 |   SidebarHeader,
 22 |   SidebarMenu,
 23 |   SidebarMenuButton,
 24 |   SidebarMenuItem,
 25 |   SidebarTrigger,
 26 | } from '@/components/ui/sidebar'
 27 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 28 | import { useConversationIdFromUrl } from '@/hooks/useConversationIdFromUrl'
 29 | import { cn } from '@/lib/utils'
 30 | import type { ConversationEntry } from '@/types'
 31 | import { ModeToggle } from './mode-toggle'
 32 | import logoSvg from '../assets/logo.svg'
 33 | 
 34 | function useConversations(): ConversationEntry[] {
 35 |   const [conversations, setConversations] = useState<ConversationEntry[]>(() => {
 36 |     const stored = window.localStorage.getItem('conversationIds')
 37 |     return stored ? (JSON.parse(stored) as ConversationEntry[]) : []
 38 |   })
 39 | 
 40 |   useEffect(() => {
 41 |     const handleStorageChange = (e: StorageEvent) => {
 42 |       if (e.key === 'conversationIds' && e.newValue) {
 43 |         setConversations(JSON.parse(e.newValue) as ConversationEntry[])
 44 |       }
 45 |     }
 46 | 
 47 |     const handleCustomStorageChange = () => {
 48 |       const stored = window.localStorage.getItem('conversationIds')
 49 |       setConversations(stored ? (JSON.parse(stored) as ConversationEntry[]) : [])
 50 |     }
 51 | 
 52 |     window.addEventListener('storage', handleStorageChange)
 53 |     // a custom event to handle same-tab updates
 54 |     window.addEventListener('local-storage-change', handleCustomStorageChange)
 55 | 
 56 |     return () => {
 57 |       window.removeEventListener('storage', handleStorageChange)
 58 |       window.removeEventListener('local-storage-change', handleCustomStorageChange)
 59 |     }
 60 |   }, [])
 61 | 
 62 |   return conversations
 63 | }
 64 | 
 65 | function doLocalNavigation(e: React.MouseEvent) {
 66 |   if (e.button !== 0 || e.metaKey || e.ctrlKey) {
 67 |     return
 68 |   }
 69 |   const path = new URL((e.currentTarget as HTMLAnchorElement).href).pathname
 70 |   window.history.pushState({}, '', path)
 71 |   // custom event to notify other components of the URL change
 72 |   window.dispatchEvent(new Event('history-state-changed'))
 73 |   e.preventDefault()
 74 | }
 75 | 
 76 | function deleteConversation(conversationId: string) {
 77 |   // Remove from conversationIds list
 78 |   const stored = window.localStorage.getItem('conversationIds')
 79 |   if (stored) {
 80 |     const conversations = JSON.parse(stored) as ConversationEntry[]
 81 |     const updated = conversations.filter((conv) => conv.id !== conversationId)
 82 |     window.localStorage.setItem('conversationIds', JSON.stringify(updated))
 83 |     // Dispatch event to notify other components
 84 |     window.dispatchEvent(new Event('local-storage-change'))
 85 |   }
 86 | 
 87 |   // Remove the conversation's messages
 88 |   window.localStorage.removeItem(conversationId)
 89 | 
 90 |   // If the deleted conversation was active, navigate to home
 91 |   const currentPath = window.location.pathname
 92 |   if (currentPath === conversationId) {
 93 |     window.history.pushState({}, '', '/')
 94 |     window.dispatchEvent(new Event('history-state-changed'))
 95 |   }
 96 | }
 97 | 
 98 | export function AppSidebar() {
 99 |   const conversations = useConversations()
100 |   const [conversationId] = useConversationIdFromUrl()
101 |   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
102 |   const [conversationToDelete, setConversationToDelete] = useState<ConversationEntry | null>(null)
103 | 
104 |   const handleDeleteClick = (e: React.MouseEvent, conversation: ConversationEntry) => {
105 |     e.preventDefault()
106 |     e.stopPropagation()
107 |     setConversationToDelete(conversation)
108 |     setDeleteDialogOpen(true)
109 |   }
110 | 
111 |   const handleConfirmDelete = () => {
112 |     if (conversationToDelete) {
113 |       deleteConversation(conversationToDelete.id)
114 |       setDeleteDialogOpen(false)
115 |       setConversationToDelete(null)
116 |       toast.success('Chat deleted successfully')
117 |     }
118 |   }
119 | 
120 |   return (
121 |     <TooltipProvider>
122 |       <Sidebar collapsible="icon">
123 |         <SidebarHeader>
124 |           <SidebarTrigger className="ml-auto" />
125 |           <div className="ml-2 flex items-center">
126 |             <h1 className="text-l font-medium text-balance truncate whitespace-nowrap">
127 |               <img src={logoSvg} className="inline h-4 mr-2 mb-1" />
128 |               <span className="group-data-[state=collapsed]:invisible">Pydantic AI</span>
129 |             </h1>
130 |           </div>
131 |         </SidebarHeader>
132 | 
133 |         <SidebarContent>
134 |           <SidebarGroup>
135 |             <SidebarMenu className="mb-2">
136 |               <SidebarMenuItem>
137 |                 <SidebarMenuButton asChild tooltip="Start a new conversation">
138 |                   <a href="/" onClick={doLocalNavigation}>
139 |                     <CirclePlus />
140 |                     <span>New conversation</span>
141 |                   </a>
142 |                 </SidebarMenuButton>
143 |               </SidebarMenuItem>
144 |             </SidebarMenu>
145 | 
146 |             <SidebarGroupContent>
147 |               <SidebarMenu>
148 |                 {conversations.map((conversation, index) => (
149 |                   <SidebarMenuItem key={index} className="group/sidebar-menu-item">
150 |                     <div className="flex items-center gap-1 h-auto">
151 |                       <SidebarMenuButton asChild tooltip={conversation.firstMessage} className="flex-1">
152 |                         <a
153 |                           href={conversation.id}
154 |                           onClick={doLocalNavigation}
155 |                           className={cn('h-auto flex items-start gap-2', {
156 |                             'bg-accent pointer-events-none': conversation.id === conversationId,
157 |                           })}
158 |                         >
159 |                           <MessageCircle className="size-3 mt-1" />
160 |                           <span className="flex flex-col items-start">
161 |                             <span className="truncate max-w-44">{conversation.firstMessage}</span>
162 |                             <span className="text-xs opacity-30">
163 |                               {new Date(conversation.timestamp).toLocaleString()}
164 |                             </span>
165 |                           </span>
166 |                         </a>
167 |                       </SidebarMenuButton>
168 |                       <Tooltip>
169 |                         <TooltipTrigger asChild>
170 |                           <Button
171 |                             variant="ghost"
172 |                             size="sm"
173 |                             className="h-auto p-1.5 opacity-0 group-hover/sidebar-menu-item:opacity-100 transition-opacity group-data-[state=collapsed]:hidden absolute right-0 self-start"
174 |                             onClick={(e) => {
175 |                               handleDeleteClick(e, conversation)
176 |                             }}
177 |                           >
178 |                             <Trash className="size-3" />
179 |                           </Button>
180 |                         </TooltipTrigger>
181 |                         <TooltipContent>Delete conversation</TooltipContent>
182 |                       </Tooltip>
183 |                     </div>
184 |                   </SidebarMenuItem>
185 |                 ))}
186 |               </SidebarMenu>
187 |             </SidebarGroupContent>
188 |           </SidebarGroup>
189 |         </SidebarContent>
190 | 
191 |         <SidebarFooter>
192 |           <ModeToggle />
193 |         </SidebarFooter>
194 | 
195 |         <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
196 |           <DialogContent
197 |             onKeyDown={(e) => {
198 |               if (e.key === 'Enter') {
199 |                 e.preventDefault()
200 |                 handleConfirmDelete()
201 |               }
202 |             }}
203 |           >
204 |             <DialogHeader>
205 |               <DialogTitle>Delete conversation?</DialogTitle>
206 |               <DialogDescription>
207 |                 Are you sure you want to delete this chat? This action cannot be undone.
208 |               </DialogDescription>
209 |             </DialogHeader>
210 |             <DialogFooter>
211 |               <Button
212 |                 variant="outline"
213 |                 onClick={() => {
214 |                   setDeleteDialogOpen(false)
215 |                 }}
216 |               >
217 |                 Cancel
218 |               </Button>
219 |               <Button variant="destructive" onClick={handleConfirmDelete} autoFocus>
220 |                 Delete
221 |               </Button>
222 |             </DialogFooter>
223 |           </DialogContent>
224 |         </Dialog>
225 |       </Sidebar>
226 |     </TooltipProvider>
227 |   )
228 | }
229 |

--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
  3 | import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
  4 | 
  5 | import { cn } from '@/lib/utils'
  6 | 
  7 | function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  8 |   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
  9 | }
 10 | 
 11 | function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
 12 |   return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
 13 | }
 14 | 
 15 | function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
 16 |   return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
 17 | }
 18 | 
 19 | function DropdownMenuContent({
 20 |   className,
 21 |   sideOffset = 4,
 22 |   ...props
 23 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
 24 |   return (
 25 |     <DropdownMenuPrimitive.Portal>
 26 |       <DropdownMenuPrimitive.Content
 27 |         data-slot="dropdown-menu-content"
 28 |         sideOffset={sideOffset}
 29 |         className={cn(
 30 |           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
 31 |           className,
 32 |         )}
 33 |         {...props}
 34 |       />
 35 |     </DropdownMenuPrimitive.Portal>
 36 |   )
 37 | }
 38 | 
 39 | function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
 40 |   return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 41 | }
 42 | 
 43 | function DropdownMenuItem({
 44 |   className,
 45 |   inset,
 46 |   variant = 'default',
 47 |   ...props
 48 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
 49 |   inset?: boolean
 50 |   variant?: 'default' | 'destructive'
 51 | }) {
 52 |   return (
 53 |     <DropdownMenuPrimitive.Item
 54 |       data-slot="dropdown-menu-item"
 55 |       data-inset={inset}
 56 |       data-variant={variant}
 57 |       className={cn(
 58 |         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 59 |         className,
 60 |       )}
 61 |       {...props}
 62 |     />
 63 |   )
 64 | }
 65 | 
 66 | function DropdownMenuCheckboxItem({
 67 |   className,
 68 |   children,
 69 |   checked,
 70 |   ...props
 71 | }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
 72 |   return (
 73 |     <DropdownMenuPrimitive.CheckboxItem
 74 |       data-slot="dropdown-menu-checkbox-item"
 75 |       className={cn(
 76 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 77 |         className,
 78 |       )}
 79 |       checked={checked}
 80 |       {...props}
 81 |     >
 82 |       <span
 83 |         className={cn(
 84 |           'pointer-events-none absolute left-2 grid size-4 shrink-0 place-content-center rounded-[4px] border border-input shadow-xs transition-colors',
 85 |           checked && 'bg-primary border-primary text-primary-foreground',
 86 |         )}
 87 |       >
 88 |         <DropdownMenuPrimitive.ItemIndicator>
 89 |           <CheckIcon className="size-3.5" />
 90 |         </DropdownMenuPrimitive.ItemIndicator>
 91 |       </span>
 92 |       {children}
 93 |     </DropdownMenuPrimitive.CheckboxItem>
 94 |   )
 95 | }
 96 | 
 97 | function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
 98 |   return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
 99 | }
100 | 
101 | function DropdownMenuRadioItem({
102 |   className,
103 |   children,
104 |   ...props
105 | }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
106 |   return (
107 |     <DropdownMenuPrimitive.RadioItem
108 |       data-slot="dropdown-menu-radio-item"
109 |       className={cn(
110 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
111 |         className,
112 |       )}
113 |       {...props}
114 |     >
115 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
116 |         <DropdownMenuPrimitive.ItemIndicator>
117 |           <CircleIcon className="size-2 fill-current" />
118 |         </DropdownMenuPrimitive.ItemIndicator>
119 |       </span>
120 |       {children}
121 |     </DropdownMenuPrimitive.RadioItem>
122 |   )
123 | }
124 | 
125 | function DropdownMenuLabel({
126 |   className,
127 |   inset,
128 |   ...props
129 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
130 |   inset?: boolean
131 | }) {
132 |   return (
133 |     <DropdownMenuPrimitive.Label
134 |       data-slot="dropdown-menu-label"
135 |       data-inset={inset}
136 |       className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
137 |       {...props}
138 |     />
139 |   )
140 | }
141 | 
142 | function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
143 |   return (
144 |     <DropdownMenuPrimitive.Separator
145 |       data-slot="dropdown-menu-separator"
146 |       className={cn('bg-border -mx-1 my-1 h-px', className)}
147 |       {...props}
148 |     />
149 |   )
150 | }
151 | 
152 | function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
153 |   return (
154 |     <span
155 |       data-slot="dropdown-menu-shortcut"
156 |       className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
157 |       {...props}
158 |     />
159 |   )
160 | }
161 | 
162 | function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
163 |   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
164 | }
165 | 
166 | function DropdownMenuSubTrigger({
167 |   className,
168 |   inset,
169 |   children,
170 |   ...props
171 | }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
172 |   inset?: boolean
173 | }) {
174 |   return (
175 |     <DropdownMenuPrimitive.SubTrigger
176 |       data-slot="dropdown-menu-sub-trigger"
177 |       data-inset={inset}
178 |       className={cn(
179 |         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
180 |         className,
181 |       )}
182 |       {...props}
183 |     >
184 |       {children}
185 |       <ChevronRightIcon className="ml-auto size-4" />
186 |     </DropdownMenuPrimitive.SubTrigger>
187 |   )
188 | }
189 | 
190 | function DropdownMenuSubContent({
191 |   className,
192 |   ...props
193 | }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
194 |   return (
195 |     <DropdownMenuPrimitive.SubContent
196 |       data-slot="dropdown-menu-sub-content"
197 |       className={cn(
198 |         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
199 |         className,
200 |       )}
201 |       {...props}
202 |     />
203 |   )
204 | }
205 | 
206 | export {
207 |   DropdownMenu,
208 |   DropdownMenuPortal,
209 |   DropdownMenuTrigger,
210 |   DropdownMenuContent,
211 |   DropdownMenuGroup,
212 |   DropdownMenuLabel,
213 |   DropdownMenuItem,
214 |   DropdownMenuCheckboxItem,
215 |   DropdownMenuRadioGroup,
216 |   DropdownMenuRadioItem,
217 |   DropdownMenuSeparator,
218 |   DropdownMenuShortcut,
219 |   DropdownMenuSub,
220 |   DropdownMenuSubTrigger,
221 |   DropdownMenuSubContent,
222 | }
223 |

--------------------------------------------------------------------------------
/src/Chat.tsx:
--------------------------------------------------------------------------------
  1 | import { Conversation, ConversationContent, ConversationScrollButton } from '@/components/ai-elements/conversation'
  2 | import { Loader } from '@/components/ai-elements/loader'
  3 | import {
  4 |   PromptInput,
  5 |   PromptInputButton,
  6 |   PromptInputModelSelect,
  7 |   PromptInputModelSelectContent,
  8 |   PromptInputModelSelectItem,
  9 |   PromptInputModelSelectTrigger,
 10 |   PromptInputModelSelectValue,
 11 |   PromptInputSubmit,
 12 |   PromptInputTextarea,
 13 |   PromptInputToolbar,
 14 |   PromptInputTools,
 15 | } from '@/components/ai-elements/prompt-input'
 16 | import { Source, Sources, SourcesContent, SourcesTrigger } from '@/components/ai-elements/sources'
 17 | import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 18 | import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 19 | import { Switch } from '@/components/ui/switch'
 20 | import { useChat } from '@ai-sdk/react'
 21 | import { Settings2Icon } from 'lucide-react'
 22 | import { useEffect, useLayoutEffect, useMemo, useRef, useState, type FormEvent } from 'react'
 23 | 
 24 | import { useQuery } from '@tanstack/react-query'
 25 | import { useThrottle } from '@uidotdev/usehooks'
 26 | import { nanoid } from 'nanoid'
 27 | import { useConversationIdFromUrl } from './hooks/useConversationIdFromUrl'
 28 | import { Part } from './Part'
 29 | import type { ConversationEntry } from './types'
 30 | import { getToolIcon } from '@/lib/tool-icons'
 31 | 
 32 | interface ModelConfig {
 33 |   id: string
 34 |   name: string
 35 |   builtinTools: string[]
 36 | }
 37 | 
 38 | interface BuiltinTool {
 39 |   name: string
 40 |   id: string
 41 | }
 42 | 
 43 | // TODO: if just a single model, don't show model selector, just a label.
 44 | interface RemoteConfig {
 45 |   models: ModelConfig[]
 46 |   builtinTools: BuiltinTool[]
 47 | }
 48 | 
 49 | async function getModels() {
 50 |   const res = await fetch('/api/configure')
 51 |   return (await res.json()) as RemoteConfig
 52 | }
 53 | 
 54 | const Chat = () => {
 55 |   const [input, setInput] = useState('')
 56 |   const [model, setModel] = useState<string>('')
 57 |   const [enabledTools, setEnabledTools] = useState<string[]>([])
 58 |   const { messages, sendMessage, status, setMessages, regenerate, error } = useChat()
 59 |   const throttledMessages = useThrottle(messages, 500)
 60 |   const [conversationId, setConversationId] = useConversationIdFromUrl()
 61 |   const textareaRef = useRef<HTMLTextAreaElement>(null)
 62 | 
 63 |   const configQuery = useQuery({
 64 |     queryFn: getModels,
 65 |     queryKey: ['models'],
 66 |   })
 67 | 
 68 |   useEffect(() => {
 69 |     if (configQuery.data) {
 70 |       setModel(configQuery.data.models[0].id)
 71 |     }
 72 |   }, [configQuery.data])
 73 | 
 74 |   useLayoutEffect(() => {
 75 |     if (conversationId === '/') {
 76 |       setMessages([])
 77 |     } else {
 78 |       const localStorageMessages = window.localStorage.getItem(conversationId)
 79 |       if (localStorageMessages) {
 80 |         setMessages(JSON.parse(localStorageMessages) as typeof messages)
 81 |       }
 82 |     }
 83 |     textareaRef.current?.focus()
 84 |   }, [conversationId])
 85 | 
 86 |   const handleSubmit = (e: FormEvent) => {
 87 |     e.preventDefault()
 88 |     if (input.trim()) {
 89 |       const theCurrentUrl = new URL(window.location.toString())
 90 | 
 91 |       // we're starting a new conversation
 92 |       if (theCurrentUrl.pathname === '/') {
 93 |         const newConversationId = `/${nanoid()}`
 94 |         setConversationId(newConversationId)
 95 | 
 96 |         saveConversationEntryInLocalStorage(newConversationId, input)
 97 | 
 98 |         theCurrentUrl.pathname = newConversationId
 99 |         window.history.pushState({}, '', theCurrentUrl.toString())
100 |       }
101 | 
102 |       sendMessage(
103 |         { text: input },
104 |         {
105 |           body: { model, builtinTools: enabledTools },
106 |         },
107 |       ).catch((error: unknown) => {
108 |         console.error('Error sending message:', error)
109 |       })
110 |       setInput('')
111 |     }
112 |   }
113 | 
114 |   useEffect(() => {
115 |     if (conversationId && throttledMessages.length > 0) {
116 |       window.localStorage.setItem(conversationId, JSON.stringify(throttledMessages))
117 |     }
118 |   }, [throttledMessages, conversationId])
119 | 
120 |   function regen(messageId: string) {
121 |     regenerate({ messageId }).catch((error: unknown) => {
122 |       console.error('Error regenerating message:', error)
123 |     })
124 |   }
125 | 
126 |   const availableTools = useMemo(() => {
127 |     const enabledToolIds = configQuery.data?.models.find((entry) => entry.id === model)?.builtinTools ?? []
128 |     return configQuery.data?.builtinTools.filter((tool) => enabledToolIds.includes(tool.id)) ?? []
129 |   }, [configQuery.data, model])
130 | 
131 |   if (conversationId !== '/' && messages.length === 0) {
132 |     return null
133 |   }
134 | 
135 |   return (
136 |     <>
137 |       <Conversation className="h-full">
138 |         <ConversationContent>
139 |           {messages.map((message) => (
140 |             <div key={message.id}>
141 |               {message.role === 'assistant' &&
142 |                 message.parts.filter((part) => part.type === 'source-url').length > 0 && (
143 |                   <Sources>
144 |                     <SourcesTrigger count={message.parts.filter((part) => part.type === 'source-url').length} />
145 |                     {message.parts
146 |                       .filter((part) => part.type === 'source-url')
147 |                       .map((part, i) => (
148 |                         <SourcesContent key={`${message.id}-${i}`}>
149 |                           <Source key={`${message.id}-${i}`} href={part.url} title={part.url} />
150 |                         </SourcesContent>
151 |                       ))}
152 |                   </Sources>
153 |                 )}
154 |               {message.parts.map((part, i) => (
155 |                 <Part
156 |                   key={`${message.id}-${i}`}
157 |                   part={part}
158 |                   message={message}
159 |                   status={status}
160 |                   index={i}
161 |                   regen={regen}
162 |                   lastMessage={message.id === messages.at(-1)?.id}
163 |                 />
164 |               ))}
165 |             </div>
166 |           ))}
167 |           {status === 'submitted' && <Loader />}
168 |           {status === 'error' && error && (
169 |             <div className="px-4 py-3 mx-4 my-2 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm">
170 |               <strong>Error:</strong> {error.message}
171 |             </div>
172 |           )}
173 |         </ConversationContent>
174 |         <ConversationScrollButton />
175 |       </Conversation>
176 | 
177 |       <div className="sticky bottom-0 p-3">
178 |         <PromptInput onSubmit={handleSubmit}>
179 |           <PromptInputTextarea
180 |             ref={textareaRef}
181 |             onChange={(e) => {
182 |               setInput(e.target.value)
183 |             }}
184 |             value={input}
185 |             autoFocus={true}
186 |           />
187 |           <PromptInputToolbar>
188 |             <PromptInputTools>
189 |               {availableTools.length > 0 && (
190 |                 <DropdownMenu>
191 |                   <Tooltip>
192 |                     <TooltipTrigger asChild>
193 |                       <DropdownMenuTrigger asChild>
194 |                         <PromptInputButton variant="outline">
195 |                           <Settings2Icon className="size-4" />
196 |                         </PromptInputButton>
197 |                       </DropdownMenuTrigger>
198 |                     </TooltipTrigger>
199 |                     <TooltipContent>Tools</TooltipContent>
200 |                   </Tooltip>
201 |                   <DropdownMenuContent align="start">
202 |                     {availableTools.map((tool) => (
203 |                       <div
204 |                         key={tool.id}
205 |                         className="flex items-center justify-between gap-3 px-2 py-1.5 cursor-pointer hover:bg-accent rounded-sm"
206 |                         onClick={() => {
207 |                           setEnabledTools((prev) =>
208 |                             prev.includes(tool.id) ? prev.filter((id) => id !== tool.id) : [...prev, tool.id],
209 |                           )
210 |                         }}
211 |                       >
212 |                         <div className="flex items-center gap-2">
213 |                           {getToolIcon(tool.id)}
214 |                           <span className="text-sm">{tool.name}</span>
215 |                         </div>
216 |                         <Switch
217 |                           checked={enabledTools.includes(tool.id)}
218 |                           onCheckedChange={(checked) => {
219 |                             setEnabledTools((prev) =>
220 |                               checked ? [...prev, tool.id] : prev.filter((id) => id !== tool.id),
221 |                             )
222 |                           }}
223 |                           onClick={(e) => {
224 |                             e.stopPropagation()
225 |                           }}
226 |                         />
227 |                       </div>
228 |                     ))}
229 |                   </DropdownMenuContent>
230 |                 </DropdownMenu>
231 |               )}
232 |               {configQuery.data && model && (
233 |                 <PromptInputModelSelect
234 |                   onValueChange={(value) => {
235 |                     setModel(value)
236 |                   }}
237 |                   value={model}
238 |                 >
239 |                   <PromptInputModelSelectTrigger>
240 |                     <PromptInputModelSelectValue />
241 |                   </PromptInputModelSelectTrigger>
242 |                   <PromptInputModelSelectContent>
243 |                     {(configQuery.data as { models: { id: string; name: string }[] }).models.map((model) => (
244 |                       <PromptInputModelSelectItem key={model.id} value={model.id}>
245 |                         {model.name}
246 |                       </PromptInputModelSelectItem>
247 |                     ))}
248 |                   </PromptInputModelSelectContent>
249 |                 </PromptInputModelSelect>
250 |               )}
251 |             </PromptInputTools>
252 |             <PromptInputSubmit disabled={!input} status={status} />
253 |           </PromptInputToolbar>
254 |         </PromptInput>
255 |       </div>
256 |     </>
257 |   )
258 | }
259 | 
260 | export default Chat
261 | 
262 | const MAX_FIRST_MESSAGE_LENGTH = 30
263 | 
264 | function saveConversationEntryInLocalStorage(newConversationId: string, firstMessage: string) {
265 |   const currentConversations = window.localStorage.getItem('conversationIds') ?? '[]'
266 |   const conversationIds = JSON.parse(currentConversations) as ConversationEntry[]
267 |   const trimmedFirstMessage =
268 |     firstMessage.length > MAX_FIRST_MESSAGE_LENGTH
269 |       ? firstMessage.slice(0, MAX_FIRST_MESSAGE_LENGTH) + '...'
270 |       : firstMessage
271 |   conversationIds.unshift({
272 |     id: newConversationId,
273 |     firstMessage: trimmedFirstMessage,
274 |     timestamp: Date.now(),
275 |   })
276 |   window.localStorage.setItem('conversationIds', JSON.stringify(conversationIds))
277 |   // dispatch a custom event so that the sidebar can update
278 |   window.dispatchEvent(new Event('local-storage-change'))
279 | }
280 |

--------------------------------------------------------------------------------
/src/components/ui/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import * as React from 'react'
  4 | import { Slot } from '@radix-ui/react-slot'
  5 | import { cva, type VariantProps } from 'class-variance-authority'
  6 | import { PanelLeftIcon } from 'lucide-react'
  7 | 
  8 | import { useIsMobile } from '@/hooks/use-mobile'
  9 | import { cn } from '@/lib/utils'
 10 | import { Button } from '@/components/ui/button'
 11 | import { Input } from '@/components/ui/input'
 12 | import { Separator } from '@/components/ui/separator'
 13 | import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 14 | import { Skeleton } from '@/components/ui/skeleton'
 15 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 16 | 
 17 | const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 18 | const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 19 | const SIDEBAR_WIDTH = '16rem'
 20 | const SIDEBAR_WIDTH_MOBILE = '18rem'
 21 | const SIDEBAR_WIDTH_ICON = '3rem'
 22 | const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 23 | 
 24 | interface SidebarContextProps {
 25 |   state: 'expanded' | 'collapsed'
 26 |   open: boolean
 27 |   setOpen: (open: boolean) => void
 28 |   openMobile: boolean
 29 |   setOpenMobile: (open: boolean) => void
 30 |   isMobile: boolean
 31 |   toggleSidebar: () => void
 32 | }
 33 | 
 34 | const SidebarContext = React.createContext<SidebarContextProps | null>(null)
 35 | 
 36 | function useSidebar() {
 37 |   const context = React.useContext(SidebarContext)
 38 |   if (!context) {
 39 |     throw new Error('useSidebar must be used within a SidebarProvider.')
 40 |   }
 41 | 
 42 |   return context
 43 | }
 44 | 
 45 | function SidebarProvider({
 46 |   defaultOpen = true,
 47 |   open: openProp,
 48 |   onOpenChange: setOpenProp,
 49 |   className,
 50 |   style,
 51 |   children,
 52 |   ...props
 53 | }: React.ComponentProps<'div'> & {
 54 |   defaultOpen?: boolean
 55 |   open?: boolean
 56 |   onOpenChange?: (open: boolean) => void
 57 | }) {
 58 |   const isMobile = useIsMobile()
 59 |   const [openMobile, setOpenMobile] = React.useState(false)
 60 | 
 61 |   // This is the internal state of the sidebar.
 62 |   // We use openProp and setOpenProp for control from outside the component.
 63 |   const [_open, _setOpen] = React.useState(defaultOpen)
 64 |   const open = openProp ?? _open
 65 |   const setOpen = React.useCallback(
 66 |     (value: boolean | ((value: boolean) => boolean)) => {
 67 |       const openState = typeof value === 'function' ? value(open) : value
 68 |       if (setOpenProp) {
 69 |         setOpenProp(openState)
 70 |       } else {
 71 |         _setOpen(openState)
 72 |       }
 73 | 
 74 |       // This sets the cookie to keep the sidebar state.
 75 |       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
 76 |     },
 77 |     [setOpenProp, open],
 78 |   )
 79 | 
 80 |   // Helper to toggle the sidebar.
 81 |   const toggleSidebar = React.useCallback(() => {
 82 |     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
 83 |     isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
 84 |   }, [isMobile, setOpen, setOpenMobile])
 85 | 
 86 |   // Adds a keyboard shortcut to toggle the sidebar.
 87 |   React.useEffect(() => {
 88 |     const handleKeyDown = (event: KeyboardEvent) => {
 89 |       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
 90 |         event.preventDefault()
 91 |         toggleSidebar()
 92 |       }
 93 |     }
 94 | 
 95 |     window.addEventListener('keydown', handleKeyDown)
 96 |     return () => {
 97 |       window.removeEventListener('keydown', handleKeyDown)
 98 |     }
 99 |   }, [toggleSidebar])
100 | 
101 |   // We add a state so that we can do data-state="expanded" or "collapsed".
102 |   // This makes it easier to style the sidebar with Tailwind classes.
103 |   const state = open ? 'expanded' : 'collapsed'
104 | 
105 |   const contextValue = React.useMemo<SidebarContextProps>(
106 |     () => ({
107 |       state,
108 |       open,
109 |       setOpen,
110 |       isMobile,
111 |       openMobile,
112 |       setOpenMobile,
113 |       toggleSidebar,
114 |     }),
115 |     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
116 |   )
117 | 
118 |   return (
119 |     <SidebarContext.Provider value={contextValue}>
120 |       <TooltipProvider delayDuration={0}>
121 |         <div
122 |           data-slot="sidebar-wrapper"
123 |           style={
124 |             {
125 |               '--sidebar-width': SIDEBAR_WIDTH,
126 |               '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
127 |               ...style,
128 |             } as React.CSSProperties
129 |           }
130 |           className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}
131 |           {...props}
132 |         >
133 |           {children}
134 |         </div>
135 |       </TooltipProvider>
136 |     </SidebarContext.Provider>
137 |   )
138 | }
139 | 
140 | function Sidebar({
141 |   side = 'left',
142 |   variant = 'sidebar',
143 |   collapsible = 'offcanvas',
144 |   className,
145 |   children,
146 |   ...props
147 | }: React.ComponentProps<'div'> & {
148 |   side?: 'left' | 'right'
149 |   variant?: 'sidebar' | 'floating' | 'inset'
150 |   collapsible?: 'offcanvas' | 'icon' | 'none'
151 | }) {
152 |   const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
153 | 
154 |   if (collapsible === 'none') {
155 |     return (
156 |       <div
157 |         data-slot="sidebar"
158 |         className={cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className)}
159 |         {...props}
160 |       >
161 |         {children}
162 |       </div>
163 |     )
164 |   }
165 | 
166 |   if (isMobile) {
167 |     return (
168 |       <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
169 |         <SheetContent
170 |           data-sidebar="sidebar"
171 |           data-slot="sidebar"
172 |           data-mobile="true"
173 |           className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
174 |           style={
175 |             {
176 |               '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
177 |             } as React.CSSProperties
178 |           }
179 |           side={side}
180 |         >
181 |           <SheetHeader className="sr-only">
182 |             <SheetTitle>Sidebar</SheetTitle>
183 |             <SheetDescription>Displays the mobile sidebar.</SheetDescription>
184 |           </SheetHeader>
185 |           <div className="flex h-full w-full flex-col">{children}</div>
186 |         </SheetContent>
187 |       </Sheet>
188 |     )
189 |   }
190 | 
191 |   return (
192 |     <div
193 |       className="group peer text-sidebar-foreground hidden md:block"
194 |       data-state={state}
195 |       data-collapsible={state === 'collapsed' ? collapsible : ''}
196 |       data-variant={variant}
197 |       data-side={side}
198 |       data-slot="sidebar"
199 |     >
200 |       {/* This is what handles the sidebar gap on desktop */}
201 |       <div
202 |         data-slot="sidebar-gap"
203 |         className={cn(
204 |           'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
205 |           'group-data-[collapsible=offcanvas]:w-0',
206 |           'group-data-[side=right]:rotate-180',
207 |           variant === 'floating' || variant === 'inset'
208 |             ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
209 |             : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
210 |         )}
211 |       />
212 |       <div
213 |         data-slot="sidebar-container"
214 |         className={cn(
215 |           'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
216 |           side === 'left'
217 |             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
218 |             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
219 |           // Adjust the padding for floating and inset variants.
220 |           variant === 'floating' || variant === 'inset'
221 |             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
222 |             : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
223 |           className,
224 |         )}
225 |         {...props}
226 |       >
227 |         <div
228 |           data-sidebar="sidebar"
229 |           data-slot="sidebar-inner"
230 |           className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
231 |         >
232 |           {children}
233 |         </div>
234 |       </div>
235 |     </div>
236 |   )
237 | }
238 | 
239 | function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
240 |   const { toggleSidebar } = useSidebar()
241 | 
242 |   return (
243 |     <Button
244 |       data-sidebar="trigger"
245 |       data-slot="sidebar-trigger"
246 |       variant="ghost"
247 |       size="icon"
248 |       className={cn('size-7', className)}
249 |       onClick={(event) => {
250 |         onClick?.(event)
251 |         toggleSidebar()
252 |       }}
253 |       {...props}
254 |     >
255 |       <PanelLeftIcon />
256 |       <span className="sr-only">Toggle Sidebar</span>
257 |     </Button>
258 |   )
259 | }
260 | 
261 | function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
262 |   const { toggleSidebar } = useSidebar()
263 | 
264 |   return (
265 |     <button
266 |       data-sidebar="rail"
267 |       data-slot="sidebar-rail"
268 |       aria-label="Toggle Sidebar"
269 |       tabIndex={-1}
270 |       onClick={toggleSidebar}
271 |       title="Toggle Sidebar"
272 |       className={cn(
273 |         'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
274 |         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
275 |         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
276 |         'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
277 |         '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
278 |         '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
279 |         className,
280 |       )}
281 |       {...props}
282 |     />
283 |   )
284 | }
285 | 
286 | function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
287 |   return (
288 |     <main
289 |       data-slot="sidebar-inset"
290 |       className={cn(
291 |         'bg-background relative flex w-full flex-1 flex-col',
292 |         'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
293 |         className,
294 |       )}
295 |       {...props}
296 |     />
297 |   )
298 | }
299 | 
300 | function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
301 |   return (
302 |     <Input
303 |       data-slot="sidebar-input"
304 |       data-sidebar="input"
305 |       className={cn('bg-background h-8 w-full shadow-none', className)}
306 |       {...props}
307 |     />
308 |   )
309 | }
310 | 
311 | function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
312 |   return (
313 |     <div
314 |       data-slot="sidebar-header"
315 |       data-sidebar="header"
316 |       className={cn('flex flex-col gap-2 p-2', className)}
317 |       {...props}
318 |     />
319 |   )
320 | }
321 | 
322 | function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
323 |   return (
324 |     <div
325 |       data-slot="sidebar-footer"
326 |       data-sidebar="footer"
327 |       className={cn('flex flex-col gap-2 p-2', className)}
328 |       {...props}
329 |     />
330 |   )
331 | }
332 | 
333 | function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
334 |   return (
335 |     <Separator
336 |       data-slot="sidebar-separator"
337 |       data-sidebar="separator"
338 |       className={cn('bg-sidebar-border mx-2 w-auto', className)}
339 |       {...props}
340 |     />
341 |   )
342 | }
343 | 
344 | function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
345 |   return (
346 |     <div
347 |       data-slot="sidebar-content"
348 |       data-sidebar="content"
349 |       className={cn(
350 |         'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
351 |         className,
352 |       )}
353 |       {...props}
354 |     />
355 |   )
356 | }
357 | 
358 | function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
359 |   return (
360 |     <div
361 |       data-slot="sidebar-group"
362 |       data-sidebar="group"
363 |       className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
364 |       {...props}
365 |     />
366 |   )
367 | }
368 | 
369 | function SidebarGroupLabel({
370 |   className,
371 |   asChild = false,
372 |   ...props
373 | }: React.ComponentProps<'div'> & { asChild?: boolean }) {
374 |   const Comp = asChild ? Slot : 'div'
375 | 
376 |   return (
377 |     <Comp
378 |       data-slot="sidebar-group-label"
379 |       data-sidebar="group-label"
380 |       className={cn(
381 |         'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
382 |         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
383 |         className,
384 |       )}
385 |       {...props}
386 |     />
387 |   )
388 | }
389 | 
390 | function SidebarGroupAction({
391 |   className,
392 |   asChild = false,
393 |   ...props
394 | }: React.ComponentProps<'button'> & { asChild?: boolean }) {
395 |   const Comp = asChild ? Slot : 'button'
396 | 
397 |   return (
398 |     <Comp
399 |       data-slot="sidebar-group-action"
400 |       data-sidebar="group-action"
401 |       className={cn(
402 |         'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
403 |         // Increases the hit area of the button on mobile.
404 |         'after:absolute after:-inset-2 md:after:hidden',
405 |         'group-data-[collapsible=icon]:hidden',
406 |         className,
407 |       )}
408 |       {...props}
409 |     />
410 |   )
411 | }
412 | 
413 | function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
414 |   return (
415 |     <div
416 |       data-slot="sidebar-group-content"
417 |       data-sidebar="group-content"
418 |       className={cn('w-full text-sm', className)}
419 |       {...props}
420 |     />
421 |   )
422 | }
423 | 
424 | function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
425 |   return (
426 |     <ul
427 |       data-slot="sidebar-menu"
428 |       data-sidebar="menu"
429 |       className={cn('flex w-full min-w-0 flex-col gap-1', className)}
430 |       {...props}
431 |     />
432 |   )
433 | }
434 | 
435 | function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
436 |   return (
437 |     <li
438 |       data-slot="sidebar-menu-item"
439 |       data-sidebar="menu-item"
440 |       className={cn('group/menu-item relative', className)}
441 |       {...props}
442 |     />
443 |   )
444 | }
445 | 
446 | const sidebarMenuButtonVariants = cva(
447 |   'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
448 |   {
449 |     variants: {
450 |       variant: {
451 |         default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
452 |         outline:
453 |           'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
454 |       },
455 |       size: {
456 |         default: 'h-8 text-sm',
457 |         sm: 'h-7 text-xs',
458 |         lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
459 |       },
460 |     },
461 |     defaultVariants: {
462 |       variant: 'default',
463 |       size: 'default',
464 |     },
465 |   },
466 | )
467 | 
468 | function SidebarMenuButton({
469 |   asChild = false,
470 |   isActive = false,
471 |   variant = 'default',
472 |   size = 'default',
473 |   tooltip,
474 |   className,
475 |   ...props
476 | }: React.ComponentProps<'button'> & {
477 |   asChild?: boolean
478 |   isActive?: boolean
479 |   tooltip?: string | React.ComponentProps<typeof TooltipContent>
480 | } & VariantProps<typeof sidebarMenuButtonVariants>) {
481 |   const Comp = asChild ? Slot : 'button'
482 |   const { isMobile, state } = useSidebar()
483 | 
484 |   const button = (
485 |     <Comp
486 |       data-slot="sidebar-menu-button"
487 |       data-sidebar="menu-button"
488 |       data-size={size}
489 |       data-active={isActive}
490 |       className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
491 |       {...props}
492 |     />
493 |   )
494 | 
495 |   if (!tooltip) {
496 |     return button
497 |   }
498 | 
499 |   if (typeof tooltip === 'string') {
500 |     tooltip = {
501 |       children: tooltip,
502 |     }
503 |   }
504 | 
505 |   return (
506 |     <Tooltip>
507 |       <TooltipTrigger asChild>{button}</TooltipTrigger>
508 |       <TooltipContent side="right" align="center" hidden={state !== 'collapsed' || isMobile} {...tooltip} />
509 |     </Tooltip>
510 |   )
511 | }
512 | 
513 | function SidebarMenuAction({
514 |   className,
515 |   asChild = false,
516 |   showOnHover = false,
517 |   ...props
518 | }: React.ComponentProps<'button'> & {
519 |   asChild?: boolean
520 |   showOnHover?: boolean
521 | }) {
522 |   const Comp = asChild ? Slot : 'button'
523 | 
524 |   return (
525 |     <Comp
526 |       data-slot="sidebar-menu-action"
527 |       data-sidebar="menu-action"
528 |       className={cn(
529 |         'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
530 |         // Increases the hit area of the button on mobile.
531 |         'after:absolute after:-inset-2 md:after:hidden',
532 |         'peer-data-[size=sm]/menu-button:top-1',
533 |         'peer-data-[size=default]/menu-button:top-1.5',
534 |         'peer-data-[size=lg]/menu-button:top-2.5',
535 |         'group-data-[collapsible=icon]:hidden',
536 |         showOnHover &&
537 |           'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
538 |         className,
539 |       )}
540 |       {...props}
541 |     />
542 |   )
543 | }
544 | 
545 | function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
546 |   return (
547 |     <div
548 |       data-slot="sidebar-menu-badge"
549 |       data-sidebar="menu-badge"
550 |       className={cn(
551 |         'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
552 |         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
553 |         'peer-data-[size=sm]/menu-button:top-1',
554 |         'peer-data-[size=default]/menu-button:top-1.5',
555 |         'peer-data-[size=lg]/menu-button:top-2.5',
556 |         'group-data-[collapsible=icon]:hidden',
557 |         className,
558 |       )}
559 |       {...props}
560 |     />
561 |   )
562 | }
563 | 
564 | function SidebarMenuSkeleton({
565 |   className,
566 |   showIcon = false,
567 |   ...props
568 | }: React.ComponentProps<'div'> & {
569 |   showIcon?: boolean
570 | }) {
571 |   // Random width between 50 to 90%.
572 |   const width = React.useMemo(() => {
573 |     return `${Math.floor(Math.random() * 40) + 50}%`
574 |   }, [])
575 | 
576 |   return (
577 |     <div
578 |       data-slot="sidebar-menu-skeleton"
579 |       data-sidebar="menu-skeleton"
580 |       className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
581 |       {...props}
582 |     >
583 |       {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
584 |       <Skeleton
585 |         className="h-4 max-w-(--skeleton-width) flex-1"
586 |         data-sidebar="menu-skeleton-text"
587 |         style={
588 |           {
589 |             '--skeleton-width': width,
590 |           } as React.CSSProperties
591 |         }
592 |       />
593 |     </div>
594 |   )
595 | }
596 | 
597 | function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
598 |   return (
599 |     <ul
600 |       data-slot="sidebar-menu-sub"
601 |       data-sidebar="menu-sub"
602 |       className={cn(
603 |         'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
604 |         'group-data-[collapsible=icon]:hidden',
605 |         className,
606 |       )}
607 |       {...props}
608 |     />
609 |   )
610 | }
611 | 
612 | function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
613 |   return (
614 |     <li
615 |       data-slot="sidebar-menu-sub-item"
616 |       data-sidebar="menu-sub-item"
617 |       className={cn('group/menu-sub-item relative', className)}
618 |       {...props}
619 |     />
620 |   )
621 | }
622 | 
623 | function SidebarMenuSubButton({
624 |   asChild = false,
625 |   size = 'md',
626 |   isActive = false,
627 |   className,
628 |   ...props
629 | }: React.ComponentProps<'a'> & {
630 |   asChild?: boolean
631 |   size?: 'sm' | 'md'
632 |   isActive?: boolean
633 | }) {
634 |   const Comp = asChild ? Slot : 'a'
635 | 
636 |   return (
637 |     <Comp
638 |       data-slot="sidebar-menu-sub-button"
639 |       data-sidebar="menu-sub-button"
640 |       data-size={size}
641 |       data-active={isActive}
642 |       className={cn(
643 |         'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
644 |         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
645 |         size === 'sm' && 'text-xs',
646 |         size === 'md' && 'text-sm',
647 |         'group-data-[collapsible=icon]:hidden',
648 |         className,
649 |       )}
650 |       {...props}
651 |     />
652 |   )
653 | }
654 | 
655 | export {
656 |   Sidebar,
657 |   SidebarContent,
658 |   SidebarFooter,
659 |   SidebarGroup,
660 |   SidebarGroupAction,
661 |   SidebarGroupContent,
662 |   SidebarGroupLabel,
663 |   SidebarHeader,
664 |   SidebarInput,
665 |   SidebarInset,
666 |   SidebarMenu,
667 |   SidebarMenuAction,
668 |   SidebarMenuBadge,
669 |   SidebarMenuButton,
670 |   SidebarMenuItem,
671 |   SidebarMenuSkeleton,
672 |   SidebarMenuSub,
673 |   SidebarMenuSubButton,
674 |   SidebarMenuSubItem,
675 |   SidebarProvider,
676 |   SidebarRail,
677 |   SidebarSeparator,
678 |   SidebarTrigger,
679 |   useSidebar,
680 | }
681 |

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