[ { "path": ".changeset/config.json", "content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@3.1.1/schema.json\",\n \"changelog\": [\n \"@changesets/changelog-github\",\n { \"repo\": \"vercel-labs/chatbot\" }\n ],\n \"commit\": false,\n \"fixed\": [],\n \"linked\": [],\n \"access\": \"public\",\n \"baseBranch\": \"main\",\n \"updateInternalDependencies\": \"patch\",\n \"ignore\": []\n}\n" }, { "path": ".cursor/rules/ultracite.mdc", "content": "---\ndescription: Ultracite Rules - AI-Ready Formatter and Linter\nglobs: \"**/*.{ts,tsx,js,jsx}\"\nalwaysApply: true\n---\n\n# Project Context\nUltracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.\n\n## Key Principles\n- Zero configuration required\n- Subsecond performance\n- Maximum type safety\n- AI-friendly code generation\n\n## Before Writing Code\n1. Analyze existing patterns in the codebase\n2. Consider edge cases and error scenarios\n3. Follow the rules below strictly\n4. Validate accessibility requirements\n\n## Rules\n\n### Accessibility (a11y)\n- Don't use `accessKey` attribute on any HTML element.\n- Don't set `aria-hidden=\"true\"` on focusable elements.\n- Don't add ARIA roles, states, and properties to elements that don't support them.\n- Don't use distracting elements like `` or ``.\n- Only use the `scope` prop on `` elements.\n- Don't assign non-interactive ARIA roles to interactive HTML elements.\n- Make sure label elements have text content and are associated with an input.\n- Don't assign interactive ARIA roles to non-interactive HTML elements.\n- Don't assign `tabIndex` to non-interactive HTML elements.\n- Don't use positive integers for `tabIndex` property.\n- Don't include \"image\", \"picture\", or \"photo\" in img alt prop.\n- Don't use explicit role property that's the same as the implicit/default role.\n- Make static elements with click handlers use a valid role attribute.\n- Always include a `title` element for SVG elements.\n- Give all elements requiring alt text meaningful information for screen readers.\n- Make sure anchors have content that's accessible to screen readers.\n- Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.\n- Include all required ARIA attributes for elements with ARIA roles.\n- Make sure ARIA properties are valid for the element's supported roles.\n- Always include a `type` attribute for button elements.\n- Make elements with interactive roles and handlers focusable.\n- Give heading elements content that's accessible to screen readers (not hidden with `aria-hidden`).\n- Always include a `lang` attribute on the html element.\n- Always include a `title` attribute for iframe elements.\n- Accompany `onClick` with at least one of: `onKeyUp`, `onKeyDown`, or `onKeyPress`.\n- Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.\n- Include caption tracks for audio and video elements.\n- Use semantic elements instead of role attributes in JSX.\n- Make sure all anchors are valid and navigable.\n- Ensure all ARIA properties (`aria-*`) are valid.\n- Use valid, non-abstract ARIA roles for elements with ARIA roles.\n- Use valid ARIA state and property values.\n- Use valid values for the `autocomplete` attribute on input elements.\n- Use correct ISO language/country codes for the `lang` attribute.\n\n### Code Complexity and Quality\n- Don't use consecutive spaces in regular expression literals.\n- Don't use the `arguments` object.\n- Don't use primitive type aliases or misleading types.\n- Don't use the comma operator.\n- Don't use empty type parameters in type aliases and interfaces.\n- Don't write functions that exceed a given Cognitive Complexity score.\n- Don't nest describe() blocks too deeply in test files.\n- Don't use unnecessary boolean casts.\n- Don't use unnecessary callbacks with flatMap.\n- Use for...of statements instead of Array.forEach.\n- Don't create classes that only have static members (like a static namespace).\n- Don't use this and super in static contexts.\n- Don't use unnecessary catch clauses.\n- Don't use unnecessary constructors.\n- Don't use unnecessary continue statements.\n- Don't export empty modules that don't change anything.\n- Don't use unnecessary escape sequences in regular expression literals.\n- Don't use unnecessary fragments.\n- Don't use unnecessary labels.\n- Don't use unnecessary nested block statements.\n- Don't rename imports, exports, and destructured assignments to the same name.\n- Don't use unnecessary string or template literal concatenation.\n- Don't use String.raw in template literals when there are no escape sequences.\n- Don't use useless case statements in switch statements.\n- Don't use ternary operators when simpler alternatives exist.\n- Don't use useless `this` aliasing.\n- Don't use any or unknown as type constraints.\n- Don't initialize variables to undefined.\n- Don't use the void operators (they're not familiar).\n- Use arrow functions instead of function expressions.\n- Use Date.now() to get milliseconds since the Unix Epoch.\n- Use .flatMap() instead of map().flat() when possible.\n- Use literal property access instead of computed property access.\n- Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.\n- Use concise optional chaining instead of chained logical expressions.\n- Use regular expression literals instead of the RegExp constructor when possible.\n- Don't use number literal object member names that aren't base 10 or use underscore separators.\n- Remove redundant terms from logical expressions.\n- Use while loops instead of for loops when you don't need initializer and update expressions.\n- Don't pass children as props.\n- Don't reassign const variables.\n- Don't use constant expressions in conditions.\n- Don't use `Math.min` and `Math.max` to clamp values when the result is constant.\n- Don't return a value from a constructor.\n- Don't use empty character classes in regular expression literals.\n- Don't use empty destructuring patterns.\n- Don't call global object properties as functions.\n- Don't declare functions and vars that are accessible outside their block.\n- Make sure builtins are correctly instantiated.\n- Don't use super() incorrectly inside classes. Also check that super() is called in classes that extend other constructors.\n- Don't use variables and function parameters before they're declared.\n- Don't use 8 and 9 escape sequences in string literals.\n- Don't use literal numbers that lose precision.\n\n### React and JSX Best Practices\n- Don't use the return value of React.render.\n- Make sure all dependencies are correctly specified in React hooks.\n- Make sure all React hooks are called from the top level of component functions.\n- Don't forget key props in iterators and collection literals.\n- Don't destructure props inside JSX components in Solid projects.\n- Don't define React components inside other components.\n- Don't use event handlers on non-interactive elements.\n- Don't assign to React component props.\n- Don't use both `children` and `dangerouslySetInnerHTML` props on the same element.\n- Don't use dangerous JSX props.\n- Don't use Array index in keys.\n- Don't insert comments as text nodes.\n- Don't assign JSX properties multiple times.\n- Don't add extra closing tags for components without children.\n- Use `<>...` instead of `...`.\n- Watch out for possible \"wrong\" semicolons inside JSX elements.\n\n### Correctness and Safety\n- Don't assign a value to itself.\n- Don't return a value from a setter.\n- Don't compare expressions that modify string case with non-compliant values.\n- Don't use lexical declarations in switch clauses.\n- Don't use variables that haven't been declared in the document.\n- Don't write unreachable code.\n- Make sure super() is called exactly once on every code path in a class constructor before this is accessed if the class has a superclass.\n- Don't use control flow statements in finally blocks.\n- Don't use optional chaining where undefined values aren't allowed.\n- Don't have unused function parameters.\n- Don't have unused imports.\n- Don't have unused labels.\n- Don't have unused private class members.\n- Don't have unused variables.\n- Make sure void (self-closing) elements don't have children.\n- Don't return a value from a function with the return type 'void'\n- Use isNaN() when checking for NaN.\n- Make sure \"for\" loop update clauses move the counter in the right direction.\n- Make sure typeof expressions are compared to valid values.\n- Make sure generator functions contain yield.\n- Don't use await inside loops.\n- Don't use bitwise operators.\n- Don't use expressions where the operation doesn't change the value.\n- Make sure Promise-like statements are handled appropriately.\n- Don't use __dirname and __filename in the global scope.\n- Prevent import cycles.\n- Don't use configured elements.\n- Don't hardcode sensitive data like API keys and tokens.\n- Don't let variable declarations shadow variables from outer scopes.\n- Don't use the TypeScript directive @ts-ignore.\n- Prevent duplicate polyfills from Polyfill.io.\n- Don't use useless backreferences in regular expressions that always match empty strings.\n- Don't use unnecessary escapes in string literals.\n- Don't use useless undefined.\n- Make sure getters and setters for the same property are next to each other in class and object definitions.\n- Make sure object literals are declared consistently (defaults to explicit definitions).\n- Use static Response methods instead of new Response() constructor when possible.\n- Make sure switch-case statements are exhaustive.\n- Make sure the `preconnect` attribute is used when using Google Fonts.\n- Use `Array#{indexOf,lastIndexOf}()` instead of `Array#{findIndex,findLastIndex}()` when looking for the index of an item.\n- Make sure iterable callbacks return consistent values.\n- Use `with { type: \"json\" }` for JSON module imports.\n- Use numeric separators in numeric literals.\n- Use object spread instead of `Object.assign()` when constructing new objects.\n- Always use the radix argument when using `parseInt()`.\n- Make sure JSDoc comment lines start with a single asterisk, except for the first one.\n- Include a description parameter for `Symbol()`.\n- Don't use spread (`...`) syntax on accumulators.\n- Don't use the `delete` operator.\n- Don't access namespace imports dynamically.\n- Don't use namespace imports.\n- Declare regex literals at the top level.\n- Don't use `target=\"_blank\"` without `rel=\"noopener\"`.\n\n### TypeScript Best Practices\n- Don't use TypeScript enums.\n- Don't export imported variables.\n- Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.\n- Don't use TypeScript namespaces.\n- Don't use non-null assertions with the `!` postfix operator.\n- Don't use parameter properties in class constructors.\n- Don't use user-defined types.\n- Use `as const` instead of literal types and type annotations.\n- Use either `T[]` or `Array` consistently.\n- Initialize each enum member value explicitly.\n- Use `export type` for types.\n- Use `import type` for types.\n- Make sure all enum members are literal values.\n- Don't use TypeScript const enum.\n- Don't declare empty interfaces.\n- Don't let variables evolve into any type through reassignments.\n- Don't use the any type.\n- Don't misuse the non-null assertion operator (!) in TypeScript files.\n- Don't use implicit any type on variable declarations.\n- Don't merge interfaces and classes unsafely.\n- Don't use overload signatures that aren't next to each other.\n- Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.\n\n### Style and Consistency\n- Don't use global `eval()`.\n- Don't use callbacks in asynchronous tests and hooks.\n- Don't use negation in `if` statements that have `else` clauses.\n- Don't use nested ternary expressions.\n- Don't reassign function parameters.\n- This rule lets you specify global variable names you don't want to use in your application.\n- Don't use specified modules when loaded by import or require.\n- Don't use constants whose value is the upper-case version of their name.\n- Use `String.slice()` instead of `String.substr()` and `String.substring()`.\n- Don't use template literals if you don't need interpolation or special-character handling.\n- Don't use `else` blocks when the `if` block breaks early.\n- Don't use yoda expressions.\n- Don't use Array constructors.\n- Use `at()` instead of integer index access.\n- Follow curly brace conventions.\n- Use `else if` instead of nested `if` statements in `else` clauses.\n- Use single `if` statements instead of nested `if` clauses.\n- Use `new` for all builtins except `String`, `Number`, and `Boolean`.\n- Use consistent accessibility modifiers on class properties and methods.\n- Use `const` declarations for variables that are only assigned once.\n- Put default function parameters and optional function parameters last.\n- Include a `default` clause in switch statements.\n- Use the `**` operator instead of `Math.pow`.\n- Use `for-of` loops when you need the index to extract an item from the iterated array.\n- Use `node:assert/strict` over `node:assert`.\n- Use the `node:` protocol for Node.js builtin modules.\n- Use Number properties instead of global ones.\n- Use assignment operator shorthand where possible.\n- Use function types instead of object types with call signatures.\n- Use template literals over string concatenation.\n- Use `new` when throwing an error.\n- Don't throw non-Error values.\n- Use `String.trimStart()` and `String.trimEnd()` over `String.trimLeft()` and `String.trimRight()`.\n- Use standard constants instead of approximated literals.\n- Don't assign values in expressions.\n- Don't use async functions as Promise executors.\n- Don't reassign exceptions in catch clauses.\n- Don't reassign class members.\n- Don't compare against -0.\n- Don't use labeled statements that aren't loops.\n- Don't use void type outside of generic or return types.\n- Don't use console.\n- Don't use control characters and escape sequences that match control characters in regular expression literals.\n- Don't use debugger.\n- Don't assign directly to document.cookie.\n- Use `===` and `!==`.\n- Don't use duplicate case labels.\n- Don't use duplicate class members.\n- Don't use duplicate conditions in if-else-if chains.\n- Don't use two keys with the same name inside objects.\n- Don't use duplicate function parameter names.\n- Don't have duplicate hooks in describe blocks.\n- Don't use empty block statements and static blocks.\n- Don't let switch clauses fall through.\n- Don't reassign function declarations.\n- Don't allow assignments to native objects and read-only global variables.\n- Use Number.isFinite instead of global isFinite.\n- Use Number.isNaN instead of global isNaN.\n- Don't assign to imported bindings.\n- Don't use irregular whitespace characters.\n- Don't use labels that share a name with a variable.\n- Don't use characters made with multiple code points in character class syntax.\n- Make sure to use new and constructor properly.\n- Don't use shorthand assign when the variable appears on both sides.\n- Don't use octal escape sequences in string literals.\n- Don't use Object.prototype builtins directly.\n- Don't redeclare variables, functions, classes, and types in the same scope.\n- Don't have redundant \"use strict\".\n- Don't compare things where both sides are exactly the same.\n- Don't let identifiers shadow restricted names.\n- Don't use sparse arrays (arrays with holes).\n- Don't use template literal placeholder syntax in regular strings.\n- Don't use the then property.\n- Don't use unsafe negation.\n- Don't use var.\n- Don't use with statements in non-strict contexts.\n- Make sure async functions actually use await.\n- Make sure default clauses in switch statements come last.\n- Make sure to pass a message value when creating a built-in error.\n- Make sure get methods always return a value.\n- Use a recommended display strategy with Google Fonts.\n- Make sure for-in loops include an if statement.\n- Use Array.isArray() instead of instanceof Array.\n- Make sure to use the digits argument with Number#toFixed().\n- Make sure to use the \"use strict\" directive in script files.\n\n### Next.js Specific Rules\n- Don't use `` elements in Next.js projects.\n- Don't use `` elements in Next.js projects.\n- Don't import next/document outside of pages/_document.jsx in Next.js projects.\n- Don't use the next/head module in pages/_document.js on Next.js projects.\n\n### Testing Best Practices\n- Don't use export or module.exports in test files.\n- Don't use focused tests.\n- Make sure the assertion function, like expect, is placed inside an it() function call.\n- Don't use disabled tests.\n\n## Common Tasks\n- `npx ultracite init` - Initialize Ultracite in your project\n- `npx ultracite fix` - Format and fix code automatically\n- `npx ultracite check` - Check for issues without fixing\n\n## Example: Error Handling\n```typescript\n// ✅ Good: Comprehensive error handling\ntry {\n const result = await fetchData();\n return { success: true, data: result };\n} catch (error) {\n console.error('API call failed:', error);\n return { success: false, error: error.message };\n}\n\n// ❌ Bad: Swallowing errors\ntry {\n return await fetchData();\n} catch (e) {\n console.log(e);\n}\n```" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\nThanks for your interest in contributing to the chatbot template! Here's how to get started.\n\n## Development\n\n1. Fork and clone the repository\n2. Install dependencies with `pnpm install`\n3. Create a new branch from `demo` for your work\n\n## Changesets\n\nThis project uses [Changesets](https://github.com/changesets/changesets) to manage versioning and releases. When you make a change that should be included in the next release, you need to add a changeset.\n\n### Adding a changeset\n\nRun the following command from the root of the repository:\n\n```bash\npnpm changeset\n```\n\nYou'll be prompted to:\n\n1. **Select the bump type** — `patch` for bug fixes, `minor` for new features, `major` for breaking changes\n2. **Write a summary** — a short description of your change that will appear in the changelog\n\nThis creates a Markdown file in the `.changeset` directory. Commit this file along with your code changes.\n\n### When to add a changeset\n\n- Bug fixes, new features, breaking changes, dependency updates, and other user-facing changes should include a changeset\n- Internal refactors, test-only changes, and documentation updates typically don't need one\n\n### What happens next\n\nWhen your changes land on `main`, the release workflow picks up any changeset files and opens a \"Version Package\" PR. Merging that PR bumps the version, updates the changelog, and creates a GitHub Release.\n\n## Pull requests\n\n- Open PRs against the `demo` branch\n- Include a changeset if your change affects the release\n- Keep PRs focused — one feature or fix per PR\n" }, { "path": ".github/workflows/lint.yml", "content": "name: Lint\non:\n push:\n\njobs:\n build:\n runs-on: ubuntu-22.04\n strategy:\n matrix:\n node-version: [20]\n steps:\n - uses: actions/checkout@v4\n - name: Install pnpm\n uses: pnpm/action-setup@v4\n with:\n version: 9.12.3\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n cache: \"pnpm\"\n - name: Install dependencies\n run: pnpm install\n - name: Run check\n run: pnpm check\n" }, { "path": ".github/workflows/playwright.yml", "content": "name: Playwright Tests\non:\n push:\n branches: [main, master]\n pull_request:\n branches: [main, master]\n\njobs:\n test:\n timeout-minutes: 30\n runs-on: ubuntu-latest\n env:\n AUTH_SECRET: ${{ secrets.AUTH_SECRET }}\n POSTGRES_URL: ${{ secrets.POSTGRES_URL }}\n BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}\n REDIS_URL: ${{ secrets.REDIS_URL }}\n\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 1\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n\n - name: Install pnpm\n uses: pnpm/action-setup@v2\n with:\n version: latest\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n shell: bash\n run: |\n echo \"STORE_PATH=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n - uses: actions/cache@v3\n with:\n path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n cache: \"pnpm\"\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Cache Playwright browsers\n uses: actions/cache@v3\n id: playwright-cache\n with:\n path: ~/.cache/ms-playwright\n key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}\n\n - name: Install Playwright Browsers\n if: steps.playwright-cache.outputs.cache-hit != 'true'\n run: pnpm exec playwright install --with-deps chromium\n\n - name: Run Playwright tests\n run: pnpm test\n\n - uses: actions/upload-artifact@v4\n if: always() && !cancelled()\n with:\n name: playwright-report\n path: playwright-report/\n retention-days: 7\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n branches:\n - main\n\nconcurrency: ${{ github.workflow }}-${{ github.ref }}\n\npermissions:\n contents: write\n pull-requests: write\n\njobs:\n release:\n name: Release\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Setup pnpm\n uses: pnpm/action-setup@v4\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Create Release Pull Request or Tag\n id: changesets\n uses: changesets/action@v1\n with:\n title: 'chore: version package'\n commit: 'chore: version package'\n version: pnpm version\n publish: pnpm release\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n\n - name: Create GitHub Release\n if: steps.changesets.outputs.published == 'true'\n uses: actions/github-script@v7\n env:\n PUBLISHED_PACKAGES: ${{ steps.changesets.outputs.publishedPackages }}\n with:\n script: |\n const packages = JSON.parse(process.env.PUBLISHED_PACKAGES);\n for (const pkg of packages) {\n const tag = `v${pkg.version}`;\n await github.rest.repos.createRelease({\n owner: context.repo.owner,\n repo: context.repo.repo,\n tag_name: tag,\n name: tag,\n generate_release_notes: true,\n });\n }\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnp\n.pnp.js\n\n# testing\ncoverage\n\n# next.js\n.next/\nout/\nbuild\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# turbo\n.turbo\n\n.env\n.vercel\n.env*.local\n\n# Playwright\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/*\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\"biomejs.biome\"]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[javascriptreact]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[typescriptreact]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[json]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[jsonc]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[css]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[graphql]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"typescript.tsdk\": \"node_modules/typescript/lib\",\n \"editor.formatOnSave\": true,\n \"editor.formatOnPaste\": true,\n \"emmet.showExpandedAbbreviation\": \"never\",\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.biome\": \"explicit\",\n \"source.organizeImports.biome\": \"explicit\"\n },\n \"[html]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[vue]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[svelte]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[yaml]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[markdown]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[mdx]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n }\n}\n" }, { "path": "LICENSE", "content": "Copyright 2024 Vercel, Inc.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License." }, { "path": "README.md", "content": "\n \"Chatbot\"\n

Chatbot

\n\n\n

\n Chatbot (formerly AI Chatbot) is a free, open-source template built with Next.js and the AI SDK that helps you quickly build powerful chatbot applications.\n

\n\n

\n Read Docs ·\n Features ·\n Model Providers ·\n Deploy Your Own ·\n Running locally\n

\n
\n\n## Features\n\n- [Next.js](https://nextjs.org) App Router\n - Advanced routing for seamless navigation and performance\n - React Server Components (RSCs) and Server Actions for server-side rendering and increased performance\n- [AI SDK](https://ai-sdk.dev/docs/introduction)\n - Unified API for generating text, structured objects, and tool calls with LLMs\n - Hooks for building dynamic chat and generative user interfaces\n - Supports OpenAI, Anthropic, Google, xAI, and other model providers via AI Gateway\n- [shadcn/ui](https://ui.shadcn.com)\n - Styling with [Tailwind CSS](https://tailwindcss.com)\n - Component primitives from [Radix UI](https://radix-ui.com) for accessibility and flexibility\n- Data Persistence\n - [Neon Serverless Postgres](https://vercel.com/marketplace/neon) for saving chat history and user data\n - [Vercel Blob](https://vercel.com/storage/blob) for efficient file storage\n- [Auth.js](https://authjs.dev)\n - Simple and secure authentication\n\n## Model Providers\n\nThis template uses the [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) to access multiple AI models through a unified interface. The default model is [OpenAI](https://openai.com) GPT-4.1 Mini, with support for Anthropic, Google, and xAI models.\n\n### AI Gateway Authentication\n\n**For Vercel deployments**: Authentication is handled automatically via OIDC tokens.\n\n**For non-Vercel deployments**: You need to provide an AI Gateway API key by setting the `AI_GATEWAY_API_KEY` environment variable in your `.env.local` file.\n\nWith the [AI SDK](https://ai-sdk.dev/docs/introduction), you can also switch to direct LLM providers like [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://ai-sdk.dev/providers/ai-sdk-providers) with just a few lines of code.\n\n## Deploy Your Own\n\nYou can deploy your own version of Chatbot to Vercel with one click:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/templates/next.js/chatbot)\n\n## Running locally\n\nYou will need to use the environment variables [defined in `.env.example`](.env.example) to run Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary.\n\n> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.\n\n1. Install Vercel CLI: `npm i -g vercel`\n2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`\n3. Download your environment variables: `vercel env pull`\n\n```bash\npnpm install\npnpm db:migrate # Setup database or apply latest database changes\npnpm dev\n```\n\nYour app template should now be running on [localhost:3000](http://localhost:3000).\n" }, { "path": "app/(auth)/actions.ts", "content": "\"use server\";\n\nimport { z } from \"zod\";\n\nimport { createUser, getUser } from \"@/lib/db/queries\";\n\nimport { signIn } from \"./auth\";\n\nconst authFormSchema = z.object({\n email: z.string().email(),\n password: z.string().min(6),\n});\n\nexport type LoginActionState = {\n status: \"idle\" | \"in_progress\" | \"success\" | \"failed\" | \"invalid_data\";\n};\n\nexport const login = async (\n _: LoginActionState,\n formData: FormData\n): Promise => {\n try {\n const validatedData = authFormSchema.parse({\n email: formData.get(\"email\"),\n password: formData.get(\"password\"),\n });\n\n await signIn(\"credentials\", {\n email: validatedData.email,\n password: validatedData.password,\n redirect: false,\n });\n\n return { status: \"success\" };\n } catch (error) {\n if (error instanceof z.ZodError) {\n return { status: \"invalid_data\" };\n }\n\n return { status: \"failed\" };\n }\n};\n\nexport type RegisterActionState = {\n status:\n | \"idle\"\n | \"in_progress\"\n | \"success\"\n | \"failed\"\n | \"user_exists\"\n | \"invalid_data\";\n};\n\nexport const register = async (\n _: RegisterActionState,\n formData: FormData\n): Promise => {\n try {\n const validatedData = authFormSchema.parse({\n email: formData.get(\"email\"),\n password: formData.get(\"password\"),\n });\n\n const [user] = await getUser(validatedData.email);\n\n if (user) {\n return { status: \"user_exists\" } as RegisterActionState;\n }\n await createUser(validatedData.email, validatedData.password);\n await signIn(\"credentials\", {\n email: validatedData.email,\n password: validatedData.password,\n redirect: false,\n });\n\n return { status: \"success\" };\n } catch (error) {\n if (error instanceof z.ZodError) {\n return { status: \"invalid_data\" };\n }\n\n return { status: \"failed\" };\n }\n};\n" }, { "path": "app/(auth)/api/auth/[...nextauth]/route.ts", "content": "export { GET, POST } from \"@/app/(auth)/auth\";\n" }, { "path": "app/(auth)/api/auth/guest/route.ts", "content": "import { NextResponse } from \"next/server\";\nimport { getToken } from \"next-auth/jwt\";\nimport { signIn } from \"@/app/(auth)/auth\";\nimport { isDevelopmentEnvironment } from \"@/lib/constants\";\n\nexport async function GET(request: Request) {\n const { searchParams } = new URL(request.url);\n const redirectUrl = searchParams.get(\"redirectUrl\") || \"/\";\n\n const token = await getToken({\n req: request,\n secret: process.env.AUTH_SECRET,\n secureCookie: !isDevelopmentEnvironment,\n });\n\n if (token) {\n return NextResponse.redirect(new URL(\"/\", request.url));\n }\n\n return signIn(\"guest\", { redirect: true, redirectTo: redirectUrl });\n}\n" }, { "path": "app/(auth)/auth.config.ts", "content": "import type { NextAuthConfig } from \"next-auth\";\n\nexport const authConfig = {\n pages: {\n signIn: \"/login\",\n newUser: \"/\",\n },\n providers: [\n // added later in auth.ts since it requires bcrypt which is only compatible with Node.js\n // while this file is also used in non-Node.js environments\n ],\n callbacks: {},\n} satisfies NextAuthConfig;\n" }, { "path": "app/(auth)/auth.ts", "content": "import { compare } from \"bcrypt-ts\";\nimport NextAuth, { type DefaultSession } from \"next-auth\";\nimport type { DefaultJWT } from \"next-auth/jwt\";\nimport Credentials from \"next-auth/providers/credentials\";\nimport { DUMMY_PASSWORD } from \"@/lib/constants\";\nimport { createGuestUser, getUser } from \"@/lib/db/queries\";\nimport { authConfig } from \"./auth.config\";\n\nexport type UserType = \"guest\" | \"regular\";\n\ndeclare module \"next-auth\" {\n interface Session extends DefaultSession {\n user: {\n id: string;\n type: UserType;\n } & DefaultSession[\"user\"];\n }\n\n interface User {\n id?: string;\n email?: string | null;\n type: UserType;\n }\n}\n\ndeclare module \"next-auth/jwt\" {\n interface JWT extends DefaultJWT {\n id: string;\n type: UserType;\n }\n}\n\nexport const {\n handlers: { GET, POST },\n auth,\n signIn,\n signOut,\n} = NextAuth({\n ...authConfig,\n providers: [\n Credentials({\n credentials: {},\n async authorize({ email, password }: any) {\n const users = await getUser(email);\n\n if (users.length === 0) {\n await compare(password, DUMMY_PASSWORD);\n return null;\n }\n\n const [user] = users;\n\n if (!user.password) {\n await compare(password, DUMMY_PASSWORD);\n return null;\n }\n\n const passwordsMatch = await compare(password, user.password);\n\n if (!passwordsMatch) {\n return null;\n }\n\n return { ...user, type: \"regular\" };\n },\n }),\n Credentials({\n id: \"guest\",\n credentials: {},\n async authorize() {\n const [guestUser] = await createGuestUser();\n return { ...guestUser, type: \"guest\" };\n },\n }),\n ],\n callbacks: {\n jwt({ token, user }) {\n if (user) {\n token.id = user.id as string;\n token.type = user.type;\n }\n\n return token;\n },\n session({ session, token }) {\n if (session.user) {\n session.user.id = token.id;\n session.user.type = token.type;\n }\n\n return session;\n },\n },\n});\n" }, { "path": "app/(auth)/login/page.tsx", "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useRouter } from \"next/navigation\";\nimport { useSession } from \"next-auth/react\";\nimport { useActionState, useEffect, useState } from \"react\";\n\nimport { AuthForm } from \"@/components/auth-form\";\nimport { SubmitButton } from \"@/components/submit-button\";\nimport { toast } from \"@/components/toast\";\nimport { type LoginActionState, login } from \"../actions\";\n\nexport default function Page() {\n const router = useRouter();\n\n const [email, setEmail] = useState(\"\");\n const [isSuccessful, setIsSuccessful] = useState(false);\n\n const [state, formAction] = useActionState(\n login,\n {\n status: \"idle\",\n }\n );\n\n const { update: updateSession } = useSession();\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: router and updateSession are stable refs\n useEffect(() => {\n if (state.status === \"failed\") {\n toast({\n type: \"error\",\n description: \"Invalid credentials!\",\n });\n } else if (state.status === \"invalid_data\") {\n toast({\n type: \"error\",\n description: \"Failed validating your submission!\",\n });\n } else if (state.status === \"success\") {\n setIsSuccessful(true);\n updateSession();\n router.refresh();\n }\n }, [state.status]);\n\n const handleSubmit = (formData: FormData) => {\n setEmail(formData.get(\"email\") as string);\n formAction(formData);\n };\n\n return (\n
\n
\n
\n

Sign In

\n

\n Use your email and password to sign in\n

\n
\n \n Sign in\n

\n {\"Don't have an account? \"}\n \n Sign up\n \n {\" for free.\"}\n

\n \n
\n
\n );\n}\n" }, { "path": "app/(auth)/register/page.tsx", "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useRouter } from \"next/navigation\";\nimport { useSession } from \"next-auth/react\";\nimport { useActionState, useEffect, useState } from \"react\";\nimport { AuthForm } from \"@/components/auth-form\";\nimport { SubmitButton } from \"@/components/submit-button\";\nimport { toast } from \"@/components/toast\";\nimport { type RegisterActionState, register } from \"../actions\";\n\nexport default function Page() {\n const router = useRouter();\n\n const [email, setEmail] = useState(\"\");\n const [isSuccessful, setIsSuccessful] = useState(false);\n\n const [state, formAction] = useActionState(\n register,\n {\n status: \"idle\",\n }\n );\n\n const { update: updateSession } = useSession();\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: router and updateSession are stable refs\n useEffect(() => {\n if (state.status === \"user_exists\") {\n toast({ type: \"error\", description: \"Account already exists!\" });\n } else if (state.status === \"failed\") {\n toast({ type: \"error\", description: \"Failed to create account!\" });\n } else if (state.status === \"invalid_data\") {\n toast({\n type: \"error\",\n description: \"Failed validating your submission!\",\n });\n } else if (state.status === \"success\") {\n toast({ type: \"success\", description: \"Account created successfully!\" });\n\n setIsSuccessful(true);\n updateSession();\n router.refresh();\n }\n }, [state.status]);\n\n const handleSubmit = (formData: FormData) => {\n setEmail(formData.get(\"email\") as string);\n formAction(formData);\n };\n\n return (\n
\n
\n
\n

Sign Up

\n

\n Create an account with your email and password\n

\n
\n \n Sign Up\n

\n {\"Already have an account? \"}\n \n Sign in\n \n {\" instead.\"}\n

\n \n
\n
\n );\n}\n" }, { "path": "app/(chat)/actions.ts", "content": "\"use server\";\n\nimport { generateText, type UIMessage } from \"ai\";\nimport { cookies } from \"next/headers\";\nimport type { VisibilityType } from \"@/components/visibility-selector\";\nimport { titlePrompt } from \"@/lib/ai/prompts\";\nimport { getTitleModel } from \"@/lib/ai/providers\";\nimport {\n deleteMessagesByChatIdAfterTimestamp,\n getMessageById,\n updateChatVisibilityById,\n} from \"@/lib/db/queries\";\nimport { getTextFromMessage } from \"@/lib/utils\";\n\nexport async function saveChatModelAsCookie(model: string) {\n const cookieStore = await cookies();\n cookieStore.set(\"chat-model\", model);\n}\n\nexport async function generateTitleFromUserMessage({\n message,\n}: {\n message: UIMessage;\n}) {\n const { text } = await generateText({\n model: getTitleModel(),\n system: titlePrompt,\n prompt: getTextFromMessage(message),\n });\n return text\n .replace(/^[#*\"\\s]+/, \"\")\n .replace(/[\"]+$/, \"\")\n .trim();\n}\n\nexport async function deleteTrailingMessages({ id }: { id: string }) {\n const [message] = await getMessageById({ id });\n\n await deleteMessagesByChatIdAfterTimestamp({\n chatId: message.chatId,\n timestamp: message.createdAt,\n });\n}\n\nexport async function updateChatVisibility({\n chatId,\n visibility,\n}: {\n chatId: string;\n visibility: VisibilityType;\n}) {\n await updateChatVisibilityById({ chatId, visibility });\n}\n" }, { "path": "app/(chat)/api/chat/[id]/stream/route.ts", "content": "export function GET() {\n return new Response(null, { status: 204 });\n}\n" }, { "path": "app/(chat)/api/chat/route.ts", "content": "import { geolocation, ipAddress } from \"@vercel/functions\";\nimport {\n convertToModelMessages,\n createUIMessageStream,\n createUIMessageStreamResponse,\n generateId,\n stepCountIs,\n streamText,\n} from \"ai\";\nimport { checkBotId } from \"botid/server\";\nimport { after } from \"next/server\";\nimport { createResumableStreamContext } from \"resumable-stream\";\nimport { auth, type UserType } from \"@/app/(auth)/auth\";\nimport { entitlementsByUserType } from \"@/lib/ai/entitlements\";\nimport { allowedModelIds } from \"@/lib/ai/models\";\nimport { type RequestHints, systemPrompt } from \"@/lib/ai/prompts\";\nimport { getLanguageModel } from \"@/lib/ai/providers\";\nimport { createDocument } from \"@/lib/ai/tools/create-document\";\nimport { getWeather } from \"@/lib/ai/tools/get-weather\";\nimport { requestSuggestions } from \"@/lib/ai/tools/request-suggestions\";\nimport { updateDocument } from \"@/lib/ai/tools/update-document\";\nimport { isProductionEnvironment } from \"@/lib/constants\";\nimport {\n createStreamId,\n deleteChatById,\n getChatById,\n getMessageCountByUserId,\n getMessagesByChatId,\n saveChat,\n saveMessages,\n updateChatTitleById,\n updateMessage,\n} from \"@/lib/db/queries\";\nimport type { DBMessage } from \"@/lib/db/schema\";\nimport { ChatbotError } from \"@/lib/errors\";\nimport { checkIpRateLimit } from \"@/lib/ratelimit\";\nimport type { ChatMessage } from \"@/lib/types\";\nimport { convertToUIMessages, generateUUID } from \"@/lib/utils\";\nimport { generateTitleFromUserMessage } from \"../../actions\";\nimport { type PostRequestBody, postRequestBodySchema } from \"./schema\";\n\nexport const maxDuration = 60;\n\nfunction getStreamContext() {\n try {\n return createResumableStreamContext({ waitUntil: after });\n } catch (_) {\n return null;\n }\n}\n\nexport { getStreamContext };\n\nexport async function POST(request: Request) {\n let requestBody: PostRequestBody;\n\n try {\n const json = await request.json();\n requestBody = postRequestBodySchema.parse(json);\n } catch (_) {\n return new ChatbotError(\"bad_request:api\").toResponse();\n }\n\n try {\n const { id, message, messages, selectedChatModel, selectedVisibilityType } =\n requestBody;\n\n const [botResult, session] = await Promise.all([checkBotId(), auth()]);\n\n if (botResult.isBot) {\n return new ChatbotError(\"unauthorized:chat\").toResponse();\n }\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:chat\").toResponse();\n }\n\n if (!allowedModelIds.has(selectedChatModel)) {\n return new ChatbotError(\"bad_request:api\").toResponse();\n }\n\n await checkIpRateLimit(ipAddress(request));\n\n const userType: UserType = session.user.type;\n\n const messageCount = await getMessageCountByUserId({\n id: session.user.id,\n differenceInHours: 1,\n });\n\n if (messageCount > entitlementsByUserType[userType].maxMessagesPerHour) {\n return new ChatbotError(\"rate_limit:chat\").toResponse();\n }\n\n const isToolApprovalFlow = Boolean(messages);\n\n const chat = await getChatById({ id });\n let messagesFromDb: DBMessage[] = [];\n let titlePromise: Promise | null = null;\n\n if (chat) {\n if (chat.userId !== session.user.id) {\n return new ChatbotError(\"forbidden:chat\").toResponse();\n }\n if (!isToolApprovalFlow) {\n messagesFromDb = await getMessagesByChatId({ id });\n }\n } else if (message?.role === \"user\") {\n await saveChat({\n id,\n userId: session.user.id,\n title: \"New chat\",\n visibility: selectedVisibilityType,\n });\n titlePromise = generateTitleFromUserMessage({ message });\n }\n\n const uiMessages = isToolApprovalFlow\n ? (messages as ChatMessage[])\n : [...convertToUIMessages(messagesFromDb), message as ChatMessage];\n\n const { longitude, latitude, city, country } = geolocation(request);\n\n const requestHints: RequestHints = {\n longitude,\n latitude,\n city,\n country,\n };\n\n if (message?.role === \"user\") {\n await saveMessages({\n messages: [\n {\n chatId: id,\n id: message.id,\n role: \"user\",\n parts: message.parts,\n attachments: [],\n createdAt: new Date(),\n },\n ],\n });\n }\n\n const isReasoningModel =\n selectedChatModel.endsWith(\"-thinking\") ||\n (selectedChatModel.includes(\"reasoning\") &&\n !selectedChatModel.includes(\"non-reasoning\"));\n\n const modelMessages = await convertToModelMessages(uiMessages);\n\n const stream = createUIMessageStream({\n originalMessages: isToolApprovalFlow ? uiMessages : undefined,\n execute: async ({ writer: dataStream }) => {\n const result = streamText({\n model: getLanguageModel(selectedChatModel),\n system: systemPrompt({ selectedChatModel, requestHints }),\n messages: modelMessages,\n stopWhen: stepCountIs(5),\n experimental_activeTools: isReasoningModel\n ? []\n : [\n \"getWeather\",\n \"createDocument\",\n \"updateDocument\",\n \"requestSuggestions\",\n ],\n providerOptions: isReasoningModel\n ? {\n anthropic: {\n thinking: { type: \"enabled\", budgetTokens: 10_000 },\n },\n }\n : undefined,\n tools: {\n getWeather,\n createDocument: createDocument({ session, dataStream }),\n updateDocument: updateDocument({ session, dataStream }),\n requestSuggestions: requestSuggestions({ session, dataStream }),\n },\n experimental_telemetry: {\n isEnabled: isProductionEnvironment,\n functionId: \"stream-text\",\n },\n });\n\n dataStream.merge(\n result.toUIMessageStream({ sendReasoning: isReasoningModel })\n );\n\n if (titlePromise) {\n const title = await titlePromise;\n dataStream.write({ type: \"data-chat-title\", data: title });\n updateChatTitleById({ chatId: id, title });\n }\n },\n generateId: generateUUID,\n onFinish: async ({ messages: finishedMessages }) => {\n if (isToolApprovalFlow) {\n for (const finishedMsg of finishedMessages) {\n const existingMsg = uiMessages.find((m) => m.id === finishedMsg.id);\n if (existingMsg) {\n await updateMessage({\n id: finishedMsg.id,\n parts: finishedMsg.parts,\n });\n } else {\n await saveMessages({\n messages: [\n {\n id: finishedMsg.id,\n role: finishedMsg.role,\n parts: finishedMsg.parts,\n createdAt: new Date(),\n attachments: [],\n chatId: id,\n },\n ],\n });\n }\n }\n } else if (finishedMessages.length > 0) {\n await saveMessages({\n messages: finishedMessages.map((currentMessage) => ({\n id: currentMessage.id,\n role: currentMessage.role,\n parts: currentMessage.parts,\n createdAt: new Date(),\n attachments: [],\n chatId: id,\n })),\n });\n }\n },\n onError: (error) => {\n if (\n error instanceof Error &&\n error.message?.includes(\n \"AI Gateway requires a valid credit card on file to service requests\"\n )\n ) {\n return \"AI Gateway requires a valid credit card on file to service requests. Please visit https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%3Fmodal%3Dadd-credit-card to add a card and unlock your free credits.\";\n }\n return \"Oops, an error occurred!\";\n },\n });\n\n return createUIMessageStreamResponse({\n stream,\n async consumeSseStream({ stream: sseStream }) {\n if (!process.env.REDIS_URL) {\n return;\n }\n try {\n const streamContext = getStreamContext();\n if (streamContext) {\n const streamId = generateId();\n await createStreamId({ streamId, chatId: id });\n await streamContext.createNewResumableStream(\n streamId,\n () => sseStream\n );\n }\n } catch (_) {\n // ignore redis errors\n }\n },\n });\n } catch (error) {\n const vercelId = request.headers.get(\"x-vercel-id\");\n\n if (error instanceof ChatbotError) {\n return error.toResponse();\n }\n\n if (\n error instanceof Error &&\n error.message?.includes(\n \"AI Gateway requires a valid credit card on file to service requests\"\n )\n ) {\n return new ChatbotError(\"bad_request:activate_gateway\").toResponse();\n }\n\n console.error(\"Unhandled error in chat API:\", error, { vercelId });\n return new ChatbotError(\"offline:chat\").toResponse();\n }\n}\n\nexport async function DELETE(request: Request) {\n const { searchParams } = new URL(request.url);\n const id = searchParams.get(\"id\");\n\n if (!id) {\n return new ChatbotError(\"bad_request:api\").toResponse();\n }\n\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:chat\").toResponse();\n }\n\n const chat = await getChatById({ id });\n\n if (chat?.userId !== session.user.id) {\n return new ChatbotError(\"forbidden:chat\").toResponse();\n }\n\n const deletedChat = await deleteChatById({ id });\n\n return Response.json(deletedChat, { status: 200 });\n}\n" }, { "path": "app/(chat)/api/chat/schema.ts", "content": "import { z } from \"zod\";\n\nconst textPartSchema = z.object({\n type: z.enum([\"text\"]),\n text: z.string().min(1).max(2000),\n});\n\nconst filePartSchema = z.object({\n type: z.enum([\"file\"]),\n mediaType: z.enum([\"image/jpeg\", \"image/png\"]),\n name: z.string().min(1).max(100),\n url: z.string().url(),\n});\n\nconst partSchema = z.union([textPartSchema, filePartSchema]);\n\nconst userMessageSchema = z.object({\n id: z.string().uuid(),\n role: z.enum([\"user\"]),\n parts: z.array(partSchema),\n});\n\n// For tool approval flows, we accept all messages (more permissive schema)\nconst messageSchema = z.object({\n id: z.string(),\n role: z.string(),\n parts: z.array(z.any()),\n});\n\nexport const postRequestBodySchema = z.object({\n id: z.string().uuid(),\n // Either a single new message or all messages (for tool approvals)\n message: userMessageSchema.optional(),\n messages: z.array(messageSchema).optional(),\n selectedChatModel: z.string(),\n selectedVisibilityType: z.enum([\"public\", \"private\"]),\n});\n\nexport type PostRequestBody = z.infer;\n" }, { "path": "app/(chat)/api/document/route.ts", "content": "import { auth } from \"@/app/(auth)/auth\";\nimport type { ArtifactKind } from \"@/components/artifact\";\nimport {\n deleteDocumentsByIdAfterTimestamp,\n getDocumentsById,\n saveDocument,\n} from \"@/lib/db/queries\";\nimport { ChatbotError } from \"@/lib/errors\";\n\nexport async function GET(request: Request) {\n const { searchParams } = new URL(request.url);\n const id = searchParams.get(\"id\");\n\n if (!id) {\n return new ChatbotError(\n \"bad_request:api\",\n \"Parameter id is missing\"\n ).toResponse();\n }\n\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:document\").toResponse();\n }\n\n const documents = await getDocumentsById({ id });\n\n const [document] = documents;\n\n if (!document) {\n return new ChatbotError(\"not_found:document\").toResponse();\n }\n\n if (document.userId !== session.user.id) {\n return new ChatbotError(\"forbidden:document\").toResponse();\n }\n\n return Response.json(documents, { status: 200 });\n}\n\nexport async function POST(request: Request) {\n const { searchParams } = new URL(request.url);\n const id = searchParams.get(\"id\");\n\n if (!id) {\n return new ChatbotError(\n \"bad_request:api\",\n \"Parameter id is required.\"\n ).toResponse();\n }\n\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"not_found:document\").toResponse();\n }\n\n const {\n content,\n title,\n kind,\n }: { content: string; title: string; kind: ArtifactKind } =\n await request.json();\n\n const documents = await getDocumentsById({ id });\n\n if (documents.length > 0) {\n const [doc] = documents;\n\n if (doc.userId !== session.user.id) {\n return new ChatbotError(\"forbidden:document\").toResponse();\n }\n }\n\n const document = await saveDocument({\n id,\n content,\n title,\n kind,\n userId: session.user.id,\n });\n\n return Response.json(document, { status: 200 });\n}\n\nexport async function DELETE(request: Request) {\n const { searchParams } = new URL(request.url);\n const id = searchParams.get(\"id\");\n const timestamp = searchParams.get(\"timestamp\");\n\n if (!id) {\n return new ChatbotError(\n \"bad_request:api\",\n \"Parameter id is required.\"\n ).toResponse();\n }\n\n if (!timestamp) {\n return new ChatbotError(\n \"bad_request:api\",\n \"Parameter timestamp is required.\"\n ).toResponse();\n }\n\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:document\").toResponse();\n }\n\n const documents = await getDocumentsById({ id });\n\n const [document] = documents;\n\n if (document.userId !== session.user.id) {\n return new ChatbotError(\"forbidden:document\").toResponse();\n }\n\n const documentsDeleted = await deleteDocumentsByIdAfterTimestamp({\n id,\n timestamp: new Date(timestamp),\n });\n\n return Response.json(documentsDeleted, { status: 200 });\n}\n" }, { "path": "app/(chat)/api/files/upload/route.ts", "content": "import { put } from \"@vercel/blob\";\nimport { NextResponse } from \"next/server\";\nimport { z } from \"zod\";\n\nimport { auth } from \"@/app/(auth)/auth\";\n\n// Use Blob instead of File since File is not available in Node.js environment\nconst FileSchema = z.object({\n file: z\n .instanceof(Blob)\n .refine((file) => file.size <= 5 * 1024 * 1024, {\n message: \"File size should be less than 5MB\",\n })\n // Update the file type based on the kind of files you want to accept\n .refine((file) => [\"image/jpeg\", \"image/png\"].includes(file.type), {\n message: \"File type should be JPEG or PNG\",\n }),\n});\n\nexport async function POST(request: Request) {\n const session = await auth();\n\n if (!session) {\n return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 });\n }\n\n if (request.body === null) {\n return new Response(\"Request body is empty\", { status: 400 });\n }\n\n try {\n const formData = await request.formData();\n const file = formData.get(\"file\") as Blob;\n\n if (!file) {\n return NextResponse.json({ error: \"No file uploaded\" }, { status: 400 });\n }\n\n const validatedFile = FileSchema.safeParse({ file });\n\n if (!validatedFile.success) {\n const errorMessage = validatedFile.error.errors\n .map((error) => error.message)\n .join(\", \");\n\n return NextResponse.json({ error: errorMessage }, { status: 400 });\n }\n\n // Get filename from formData since Blob doesn't have name property\n const filename = (formData.get(\"file\") as File).name;\n const fileBuffer = await file.arrayBuffer();\n\n try {\n const data = await put(`${filename}`, fileBuffer, {\n access: \"public\",\n });\n\n return NextResponse.json(data);\n } catch (_error) {\n return NextResponse.json({ error: \"Upload failed\" }, { status: 500 });\n }\n } catch (_error) {\n return NextResponse.json(\n { error: \"Failed to process request\" },\n { status: 500 }\n );\n }\n}\n" }, { "path": "app/(chat)/api/history/route.ts", "content": "import type { NextRequest } from \"next/server\";\nimport { auth } from \"@/app/(auth)/auth\";\nimport { deleteAllChatsByUserId, getChatsByUserId } from \"@/lib/db/queries\";\nimport { ChatbotError } from \"@/lib/errors\";\n\nexport async function GET(request: NextRequest) {\n const { searchParams } = request.nextUrl;\n\n const limit = Number.parseInt(searchParams.get(\"limit\") || \"10\", 10);\n const startingAfter = searchParams.get(\"starting_after\");\n const endingBefore = searchParams.get(\"ending_before\");\n\n if (startingAfter && endingBefore) {\n return new ChatbotError(\n \"bad_request:api\",\n \"Only one of starting_after or ending_before can be provided.\"\n ).toResponse();\n }\n\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:chat\").toResponse();\n }\n\n const chats = await getChatsByUserId({\n id: session.user.id,\n limit,\n startingAfter,\n endingBefore,\n });\n\n return Response.json(chats);\n}\n\nexport async function DELETE() {\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:chat\").toResponse();\n }\n\n const result = await deleteAllChatsByUserId({ userId: session.user.id });\n\n return Response.json(result, { status: 200 });\n}\n" }, { "path": "app/(chat)/api/suggestions/route.ts", "content": "import { auth } from \"@/app/(auth)/auth\";\nimport { getSuggestionsByDocumentId } from \"@/lib/db/queries\";\nimport { ChatbotError } from \"@/lib/errors\";\n\nexport async function GET(request: Request) {\n const { searchParams } = new URL(request.url);\n const documentId = searchParams.get(\"documentId\");\n\n if (!documentId) {\n return new ChatbotError(\n \"bad_request:api\",\n \"Parameter documentId is required.\"\n ).toResponse();\n }\n\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:suggestions\").toResponse();\n }\n\n const suggestions = await getSuggestionsByDocumentId({\n documentId,\n });\n\n const [suggestion] = suggestions;\n\n if (!suggestion) {\n return Response.json([], { status: 200 });\n }\n\n if (suggestion.userId !== session.user.id) {\n return new ChatbotError(\"forbidden:api\").toResponse();\n }\n\n return Response.json(suggestions, { status: 200 });\n}\n" }, { "path": "app/(chat)/api/vote/route.ts", "content": "import { auth } from \"@/app/(auth)/auth\";\nimport { getChatById, getVotesByChatId, voteMessage } from \"@/lib/db/queries\";\nimport { ChatbotError } from \"@/lib/errors\";\n\nexport async function GET(request: Request) {\n const { searchParams } = new URL(request.url);\n const chatId = searchParams.get(\"chatId\");\n\n if (!chatId) {\n return new ChatbotError(\n \"bad_request:api\",\n \"Parameter chatId is required.\"\n ).toResponse();\n }\n\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:vote\").toResponse();\n }\n\n const chat = await getChatById({ id: chatId });\n\n if (!chat) {\n return new ChatbotError(\"not_found:chat\").toResponse();\n }\n\n if (chat.userId !== session.user.id) {\n return new ChatbotError(\"forbidden:vote\").toResponse();\n }\n\n const votes = await getVotesByChatId({ id: chatId });\n\n return Response.json(votes, { status: 200 });\n}\n\nexport async function PATCH(request: Request) {\n const {\n chatId,\n messageId,\n type,\n }: { chatId: string; messageId: string; type: \"up\" | \"down\" } =\n await request.json();\n\n if (!chatId || !messageId || !type) {\n return new ChatbotError(\n \"bad_request:api\",\n \"Parameters chatId, messageId, and type are required.\"\n ).toResponse();\n }\n\n const session = await auth();\n\n if (!session?.user) {\n return new ChatbotError(\"unauthorized:vote\").toResponse();\n }\n\n const chat = await getChatById({ id: chatId });\n\n if (!chat) {\n return new ChatbotError(\"not_found:vote\").toResponse();\n }\n\n if (chat.userId !== session.user.id) {\n return new ChatbotError(\"forbidden:vote\").toResponse();\n }\n\n await voteMessage({\n chatId,\n messageId,\n type,\n });\n\n return new Response(\"Message voted\", { status: 200 });\n}\n" }, { "path": "app/(chat)/chat/[id]/page.tsx", "content": "import { cookies } from \"next/headers\";\nimport { notFound, redirect } from \"next/navigation\";\nimport { Suspense } from \"react\";\n\nimport { auth } from \"@/app/(auth)/auth\";\nimport { Chat } from \"@/components/chat\";\nimport { DataStreamHandler } from \"@/components/data-stream-handler\";\nimport { DEFAULT_CHAT_MODEL } from \"@/lib/ai/models\";\nimport { getChatById, getMessagesByChatId } from \"@/lib/db/queries\";\nimport { convertToUIMessages } from \"@/lib/utils\";\n\nexport default function Page(props: { params: Promise<{ id: string }> }) {\n return (\n }>\n \n \n );\n}\n\nasync function ChatPage({ params }: { params: Promise<{ id: string }> }) {\n const { id } = await params;\n const chat = await getChatById({ id });\n\n if (!chat) {\n redirect(\"/\");\n }\n\n const session = await auth();\n\n if (!session) {\n redirect(\"/api/auth/guest\");\n }\n\n if (chat.visibility === \"private\") {\n if (!session.user) {\n return notFound();\n }\n\n if (session.user.id !== chat.userId) {\n return notFound();\n }\n }\n\n const messagesFromDb = await getMessagesByChatId({\n id,\n });\n\n const uiMessages = convertToUIMessages(messagesFromDb);\n\n const cookieStore = await cookies();\n const chatModelFromCookie = cookieStore.get(\"chat-model\");\n\n if (!chatModelFromCookie) {\n return (\n <>\n \n \n \n );\n }\n\n return (\n <>\n \n \n \n );\n}\n" }, { "path": "app/(chat)/layout.tsx", "content": "import { cookies } from \"next/headers\";\nimport Script from \"next/script\";\nimport { Suspense } from \"react\";\nimport { AppSidebar } from \"@/components/app-sidebar\";\nimport { DataStreamProvider } from \"@/components/data-stream-provider\";\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\";\nimport { auth } from \"../(auth)/auth\";\n\nexport default function Layout({ children }: { children: React.ReactNode }) {\n return (\n <>\n \n \n }>\n {children}\n \n \n \n );\n}\n\nasync function SidebarWrapper({ children }: { children: React.ReactNode }) {\n const [session, cookieStore] = await Promise.all([auth(), cookies()]);\n const isCollapsed = cookieStore.get(\"sidebar_state\")?.value !== \"true\";\n\n return (\n \n \n {children}\n \n );\n}\n" }, { "path": "app/(chat)/page.tsx", "content": "import { cookies } from \"next/headers\";\nimport { Suspense } from \"react\";\nimport { Chat } from \"@/components/chat\";\nimport { DataStreamHandler } from \"@/components/data-stream-handler\";\nimport { DEFAULT_CHAT_MODEL } from \"@/lib/ai/models\";\nimport { generateUUID } from \"@/lib/utils\";\n\nexport default function Page() {\n return (\n }>\n \n \n );\n}\n\nasync function NewChatPage() {\n const cookieStore = await cookies();\n const modelIdFromCookie = cookieStore.get(\"chat-model\");\n const id = generateUUID();\n\n if (!modelIdFromCookie) {\n return (\n <>\n \n \n \n );\n }\n\n return (\n <>\n \n \n \n );\n}\n" }, { "path": "app/globals.css", "content": "@import \"tailwindcss\";\n@import \"katex/dist/katex.min.css\";\n\n/* include utility classes in streamdown */\n@source \"../node_modules/streamdown/dist/index.js\";\n\n/* custom variant for setting dark mode programmatically */\n@custom-variant dark (&:is(.dark, .dark *));\n\n/* include plugins */\n@plugin \"tailwindcss-animate\";\n@plugin \"@tailwindcss/typography\";\n\n/* define design tokens (light mode) */\n:root {\n --background: hsl(0 0% 100%);\n --foreground: hsl(240 10% 3.9%);\n --card: hsl(0 0% 100%);\n --card-foreground: hsl(240 10% 3.9%);\n --popover: hsl(0 0% 100%);\n --popover-foreground: hsl(240 10% 3.9%);\n --primary: hsl(240 5.9% 10%);\n --primary-foreground: hsl(0 0% 98%);\n --secondary: hsl(240 4.8% 95.9%);\n --secondary-foreground: hsl(240 5.9% 10%);\n --muted: hsl(240 4.8% 95.9%);\n --muted-foreground: hsl(240 3.8% 46.1%);\n --accent: hsl(240 4.8% 95.9%);\n --accent-foreground: hsl(240 5.9% 10%);\n --destructive: hsl(0 84.2% 60.2%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 5.9% 90%);\n --input: hsl(240 5.9% 90%);\n --ring: hsl(240 10% 3.9%);\n --chart-1: hsl(12 76% 61%);\n --chart-2: hsl(173 58% 39%);\n --chart-3: hsl(197 37% 24%);\n --chart-4: hsl(43 74% 66%);\n --chart-5: hsl(27 87% 67%);\n --sidebar-background: hsl(0 0% 98%);\n --sidebar-foreground: hsl(240 5.3% 26.1%);\n --sidebar-primary: hsl(240 5.9% 10%);\n --sidebar-primary-foreground: hsl(0 0% 98%);\n --sidebar-accent: hsl(240 4.8% 95.9%);\n --sidebar-accent-foreground: hsl(240 5.9% 10%);\n --sidebar-border: hsl(220 13% 91%);\n --sidebar-ring: hsl(217.2 91.2% 59.8%);\n /* border radius unit */\n --radius: 0.5rem;\n --sidebar: hsl(0 0% 98%);\n}\n\n/* define design tokens (dark mode) */\n.dark {\n --background: hsl(240 10% 3.9%);\n --foreground: hsl(0 0% 98%);\n --card: hsl(240 10% 3.9%);\n --card-foreground: hsl(0 0% 98%);\n --popover: hsl(240 10% 3.9%);\n --popover-foreground: hsl(0 0% 98%);\n --primary: hsl(0 0% 98%);\n --primary-foreground: hsl(240 5.9% 10%);\n --secondary: hsl(240 3.7% 15.9%);\n --secondary-foreground: hsl(0 0% 98%);\n --muted: hsl(240 3.7% 15.9%);\n --muted-foreground: hsl(240 5% 64.9%);\n --accent: hsl(240 3.7% 15.9%);\n --accent-foreground: hsl(0 0% 98%);\n --destructive: hsl(0 62.8% 30.6%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 3.7% 15.9%);\n --input: hsl(240 3.7% 15.9%);\n --ring: hsl(240 4.9% 83.9%);\n --chart-1: hsl(220 70% 50%);\n --chart-2: hsl(160 60% 45%);\n --chart-3: hsl(30 80% 55%);\n --chart-4: hsl(280 65% 60%);\n --chart-5: hsl(340 75% 55%);\n --sidebar-background: hsl(240 5.9% 10%);\n --sidebar-foreground: hsl(240 4.8% 95.9%);\n --sidebar-primary: hsl(224.3 76.3% 48%);\n --sidebar-primary-foreground: hsl(0 0% 100%);\n --sidebar-accent: hsl(240 3.7% 15.9%);\n --sidebar-accent-foreground: hsl(240 4.8% 95.9%);\n --sidebar-border: hsl(240 3.7% 15.9%);\n --sidebar-ring: hsl(217.2 91.2% 59.8%);\n --sidebar: hsl(240 5.9% 10%);\n}\n\n/* define theme */\n@theme {\n --font-sans: var(--font-geist);\n --font-mono: var(--font-geist-mono);\n\n --breakpoint-toast-mobile: 600px;\n\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n\n --color-chart-1: var(--chart-1);\n --color-chart-2: var(--chart-2);\n --color-chart-3: var(--chart-3);\n --color-chart-4: var(--chart-4);\n --color-chart-5: var(--chart-5);\n\n --color-sidebar: var(--sidebar-background);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n}\n\n/*\n The default border color has changed to `currentcolor` in Tailwind CSS v4,\n so we've added these compatibility styles to make sure everything still\n looks the same as it did with Tailwind CSS v3.\n\n If we ever want to remove these styles, we need to add an explicit border\n color utility to any element that depends on these defaults.\n*/\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\n@utility text-balance {\n text-wrap: balance;\n}\n\n@utility -webkit-overflow-scrolling-touch {\n -webkit-overflow-scrolling: touch;\n}\n\n@utility touch-pan-y {\n touch-action: pan-y;\n}\n\n@utility overscroll-behavior-contain {\n overscroll-behavior: contain;\n}\n\n@layer utilities {\n :root {\n --foreground-rgb: 0, 0, 0;\n --background-start-rgb: 214, 219, 220;\n --background-end-rgb: 255, 255, 255;\n }\n\n @media (prefers-color-scheme: dark) {\n :root {\n --foreground-rgb: 255, 255, 255;\n --background-start-rgb: 0, 0, 0;\n --background-end-rgb: 0, 0, 0;\n }\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n overflow-x: hidden;\n position: relative;\n }\n\n html {\n overflow-x: hidden;\n }\n}\n\n.skeleton {\n * {\n pointer-events: none !important;\n }\n\n *[class^=\"text-\"] {\n color: transparent;\n @apply rounded-md bg-foreground/20 select-none animate-pulse;\n }\n\n .skeleton-bg {\n @apply bg-foreground/10;\n }\n\n .skeleton-div {\n @apply bg-foreground/20 animate-pulse;\n }\n}\n\n.ProseMirror {\n outline: none;\n}\n\n.cm-editor,\n.cm-gutters {\n @apply bg-background! dark:bg-zinc-800! outline-hidden! selection:bg-zinc-900!;\n}\n\n.ͼo.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,\n.ͼo.cm-selectionBackground,\n.ͼo.cm-content::selection {\n @apply bg-zinc-200! dark:bg-zinc-900!;\n}\n\n.cm-activeLine,\n.cm-activeLineGutter {\n @apply bg-transparent!;\n}\n\n.cm-activeLine {\n @apply rounded-r-sm!;\n}\n\n.cm-lineNumbers {\n @apply min-w-7;\n}\n\n.cm-foldGutter {\n @apply min-w-3;\n}\n\n.cm-lineNumbers .cm-activeLineGutter {\n @apply rounded-l-sm!;\n}\n\n.suggestion-highlight {\n @apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;\n}\n\n/* minimal scrollbar styling */\n::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n::-webkit-scrollbar-track {\n background: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--border);\n border-radius: 3px;\n transition: background 0.2s ease;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: --alpha(var(--muted-foreground) / 0.5);\n}\n\n::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* firefox scrollbar styling */\n* {\n scrollbar-width: thin;\n scrollbar-color: var(--border) transparent;\n}\n\n@theme inline {\n --color-sidebar: var(--sidebar);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n" }, { "path": "app/layout.tsx", "content": "import type { Metadata } from \"next\";\nimport { Geist, Geist_Mono } from \"next/font/google\";\nimport { Toaster } from \"sonner\";\nimport { ThemeProvider } from \"@/components/theme-provider\";\n\nimport \"./globals.css\";\nimport { SessionProvider } from \"next-auth/react\";\n\nexport const metadata: Metadata = {\n metadataBase: new URL(\"https://chat.vercel.ai\"),\n title: \"Next.js Chatbot Template\",\n description: \"Next.js chatbot template using the AI SDK.\",\n};\n\nexport const viewport = {\n maximumScale: 1, // Disable auto-zoom on mobile Safari\n};\n\nconst geist = Geist({\n subsets: [\"latin\"],\n display: \"swap\",\n variable: \"--font-geist\",\n});\n\nconst geistMono = Geist_Mono({\n subsets: [\"latin\"],\n display: \"swap\",\n variable: \"--font-geist-mono\",\n});\n\nconst LIGHT_THEME_COLOR = \"hsl(0 0% 100%)\";\nconst DARK_THEME_COLOR = \"hsl(240deg 10% 3.92%)\";\nconst THEME_COLOR_SCRIPT = `\\\n(function() {\n var html = document.documentElement;\n var meta = document.querySelector('meta[name=\"theme-color\"]');\n if (!meta) {\n meta = document.createElement('meta');\n meta.setAttribute('name', 'theme-color');\n document.head.appendChild(meta);\n }\n function updateThemeColor() {\n var isDark = html.classList.contains('dark');\n meta.setAttribute('content', isDark ? '${DARK_THEME_COLOR}' : '${LIGHT_THEME_COLOR}');\n }\n var observer = new MutationObserver(updateThemeColor);\n observer.observe(html, { attributes: true, attributeFilter: ['class'] });\n updateThemeColor();\n})();`;\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n \n \n \n \n \n \n \n {children}\n \n \n \n );\n}\n" }, { "path": "artifacts/actions.ts", "content": "\"use server\";\n\nimport { getSuggestionsByDocumentId } from \"@/lib/db/queries\";\n\nexport async function getSuggestions({ documentId }: { documentId: string }) {\n const suggestions = await getSuggestionsByDocumentId({ documentId });\n return suggestions ?? [];\n}\n" }, { "path": "artifacts/code/client.tsx", "content": "import { toast } from \"sonner\";\nimport { CodeEditor } from \"@/components/code-editor\";\nimport {\n Console,\n type ConsoleOutput,\n type ConsoleOutputContent,\n} from \"@/components/console\";\nimport { Artifact } from \"@/components/create-artifact\";\nimport {\n CopyIcon,\n LogsIcon,\n MessageIcon,\n PlayIcon,\n RedoIcon,\n UndoIcon,\n} from \"@/components/icons\";\nimport { generateUUID } from \"@/lib/utils\";\n\nconst OUTPUT_HANDLERS = {\n matplotlib: `\n import io\n import base64\n from matplotlib import pyplot as plt\n\n # Clear any existing plots\n plt.clf()\n plt.close('all')\n\n # Switch to agg backend\n plt.switch_backend('agg')\n\n def setup_matplotlib_output():\n def custom_show():\n if plt.gcf().get_size_inches().prod() * plt.gcf().dpi ** 2 > 25_000_000:\n print(\"Warning: Plot size too large, reducing quality\")\n plt.gcf().set_dpi(100)\n\n png_buf = io.BytesIO()\n plt.savefig(png_buf, format='png')\n png_buf.seek(0)\n png_base64 = base64.b64encode(png_buf.read()).decode('utf-8')\n print(f'data:image/png;base64,{png_base64}')\n png_buf.close()\n\n plt.clf()\n plt.close('all')\n\n plt.show = custom_show\n `,\n basic: `\n # Basic output capture setup\n `,\n};\n\nfunction detectRequiredHandlers(code: string): string[] {\n const handlers: string[] = [\"basic\"];\n\n if (code.includes(\"matplotlib\") || code.includes(\"plt.\")) {\n handlers.push(\"matplotlib\");\n }\n\n return handlers;\n}\n\ntype Metadata = {\n outputs: ConsoleOutput[];\n};\n\nexport const codeArtifact = new Artifact<\"code\", Metadata>({\n kind: \"code\",\n description:\n \"Useful for code generation; Code execution is only available for python code.\",\n initialize: ({ setMetadata }) => {\n setMetadata({\n outputs: [],\n });\n },\n onStreamPart: ({ streamPart, setArtifact }) => {\n if (streamPart.type === \"data-codeDelta\") {\n setArtifact((draftArtifact) => ({\n ...draftArtifact,\n content: streamPart.data,\n isVisible:\n draftArtifact.status === \"streaming\" &&\n draftArtifact.content.length > 300 &&\n draftArtifact.content.length < 310\n ? true\n : draftArtifact.isVisible,\n status: \"streaming\",\n }));\n }\n },\n content: ({ metadata, setMetadata, ...props }) => {\n return (\n <>\n
\n \n
\n\n {metadata?.outputs && (\n {\n setMetadata({\n ...metadata,\n outputs: [],\n });\n }}\n />\n )}\n \n );\n },\n actions: [\n {\n icon: ,\n label: \"Run\",\n description: \"Execute code\",\n onClick: async ({ content, setMetadata }) => {\n const runId = generateUUID();\n const outputContent: ConsoleOutputContent[] = [];\n\n setMetadata((metadata) => ({\n ...metadata,\n outputs: [\n ...metadata.outputs,\n {\n id: runId,\n contents: [],\n status: \"in_progress\",\n },\n ],\n }));\n\n try {\n // @ts-expect-error - loadPyodide is not defined\n const currentPyodideInstance = await globalThis.loadPyodide({\n indexURL: \"https://cdn.jsdelivr.net/pyodide/v0.23.4/full/\",\n });\n\n currentPyodideInstance.setStdout({\n batched: (output: string) => {\n outputContent.push({\n type: output.startsWith(\"data:image/png;base64\")\n ? \"image\"\n : \"text\",\n value: output,\n });\n },\n });\n\n await currentPyodideInstance.loadPackagesFromImports(content, {\n messageCallback: (message: string) => {\n setMetadata((metadata) => ({\n ...metadata,\n outputs: [\n ...metadata.outputs.filter((output) => output.id !== runId),\n {\n id: runId,\n contents: [{ type: \"text\", value: message }],\n status: \"loading_packages\",\n },\n ],\n }));\n },\n });\n\n const requiredHandlers = detectRequiredHandlers(content);\n for (const handler of requiredHandlers) {\n if (OUTPUT_HANDLERS[handler as keyof typeof OUTPUT_HANDLERS]) {\n await currentPyodideInstance.runPythonAsync(\n OUTPUT_HANDLERS[handler as keyof typeof OUTPUT_HANDLERS]\n );\n\n if (handler === \"matplotlib\") {\n await currentPyodideInstance.runPythonAsync(\n \"setup_matplotlib_output()\"\n );\n }\n }\n }\n\n await currentPyodideInstance.runPythonAsync(content);\n\n setMetadata((metadata) => ({\n ...metadata,\n outputs: [\n ...metadata.outputs.filter((output) => output.id !== runId),\n {\n id: runId,\n contents: outputContent,\n status: \"completed\",\n },\n ],\n }));\n } catch (error: any) {\n setMetadata((metadata) => ({\n ...metadata,\n outputs: [\n ...metadata.outputs.filter((output) => output.id !== runId),\n {\n id: runId,\n contents: [{ type: \"text\", value: error.message }],\n status: \"failed\",\n },\n ],\n }));\n }\n },\n },\n {\n icon: ,\n description: \"View Previous version\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"prev\");\n },\n isDisabled: ({ currentVersionIndex }) => {\n if (currentVersionIndex === 0) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"View Next version\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"next\");\n },\n isDisabled: ({ isCurrentVersion }) => {\n if (isCurrentVersion) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"Copy code to clipboard\",\n onClick: ({ content }) => {\n navigator.clipboard.writeText(content);\n toast.success(\"Copied to clipboard!\");\n },\n },\n ],\n toolbar: [\n {\n icon: ,\n description: \"Add comments\",\n onClick: ({ sendMessage }) => {\n sendMessage({\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: \"Add comments to the code snippet for understanding\",\n },\n ],\n });\n },\n },\n {\n icon: ,\n description: \"Add logs\",\n onClick: ({ sendMessage }) => {\n sendMessage({\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: \"Add logs to the code snippet for debugging\",\n },\n ],\n });\n },\n },\n ],\n});\n" }, { "path": "artifacts/code/server.ts", "content": "import { streamObject } from \"ai\";\nimport { z } from \"zod\";\nimport { codePrompt, updateDocumentPrompt } from \"@/lib/ai/prompts\";\nimport { getArtifactModel } from \"@/lib/ai/providers\";\nimport { createDocumentHandler } from \"@/lib/artifacts/server\";\n\nexport const codeDocumentHandler = createDocumentHandler<\"code\">({\n kind: \"code\",\n onCreateDocument: async ({ title, dataStream }) => {\n let draftContent = \"\";\n\n const { fullStream } = streamObject({\n model: getArtifactModel(),\n system: codePrompt,\n prompt: title,\n schema: z.object({\n code: z.string(),\n }),\n });\n\n for await (const delta of fullStream) {\n const { type } = delta;\n\n if (type === \"object\") {\n const { object } = delta;\n const { code } = object;\n\n if (code) {\n dataStream.write({\n type: \"data-codeDelta\",\n data: code ?? \"\",\n transient: true,\n });\n\n draftContent = code;\n }\n }\n }\n\n return draftContent;\n },\n onUpdateDocument: async ({ document, description, dataStream }) => {\n let draftContent = \"\";\n\n const { fullStream } = streamObject({\n model: getArtifactModel(),\n system: updateDocumentPrompt(document.content, \"code\"),\n prompt: description,\n schema: z.object({\n code: z.string(),\n }),\n });\n\n for await (const delta of fullStream) {\n const { type } = delta;\n\n if (type === \"object\") {\n const { object } = delta;\n const { code } = object;\n\n if (code) {\n dataStream.write({\n type: \"data-codeDelta\",\n data: code ?? \"\",\n transient: true,\n });\n\n draftContent = code;\n }\n }\n }\n\n return draftContent;\n },\n});\n" }, { "path": "artifacts/image/client.tsx", "content": "import { toast } from \"sonner\";\nimport { Artifact } from \"@/components/create-artifact\";\nimport { CopyIcon, RedoIcon, UndoIcon } from \"@/components/icons\";\nimport { ImageEditor } from \"@/components/image-editor\";\n\nexport const imageArtifact = new Artifact({\n kind: \"image\",\n description: \"Useful for image generation\",\n onStreamPart: ({ streamPart, setArtifact }) => {\n if (streamPart.type === \"data-imageDelta\") {\n setArtifact((draftArtifact) => ({\n ...draftArtifact,\n content: streamPart.data,\n isVisible: true,\n status: \"streaming\",\n }));\n }\n },\n content: ImageEditor,\n actions: [\n {\n icon: ,\n description: \"View Previous version\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"prev\");\n },\n isDisabled: ({ currentVersionIndex }) => {\n if (currentVersionIndex === 0) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"View Next version\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"next\");\n },\n isDisabled: ({ isCurrentVersion }) => {\n if (isCurrentVersion) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"Copy image to clipboard\",\n onClick: ({ content }) => {\n const img = new Image();\n img.src = `data:image/png;base64,${content}`;\n\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = img.width;\n canvas.height = img.height;\n const ctx = canvas.getContext(\"2d\");\n ctx?.drawImage(img, 0, 0);\n canvas.toBlob((blob) => {\n if (blob) {\n navigator.clipboard.write([\n new ClipboardItem({ \"image/png\": blob }),\n ]);\n }\n }, \"image/png\");\n };\n\n toast.success(\"Copied image to clipboard!\");\n },\n },\n ],\n toolbar: [],\n});\n" }, { "path": "artifacts/sheet/client.tsx", "content": "import { parse, unparse } from \"papaparse\";\nimport { toast } from \"sonner\";\nimport { Artifact } from \"@/components/create-artifact\";\nimport {\n CopyIcon,\n LineChartIcon,\n RedoIcon,\n SparklesIcon,\n UndoIcon,\n} from \"@/components/icons\";\nimport { SpreadsheetEditor } from \"@/components/sheet-editor\";\n\ntype Metadata = any;\n\nexport const sheetArtifact = new Artifact<\"sheet\", Metadata>({\n kind: \"sheet\",\n description: \"Useful for working with spreadsheets\",\n initialize: () => null,\n onStreamPart: ({ setArtifact, streamPart }) => {\n if (streamPart.type === \"data-sheetDelta\") {\n setArtifact((draftArtifact) => ({\n ...draftArtifact,\n content: streamPart.data,\n isVisible: true,\n status: \"streaming\",\n }));\n }\n },\n content: ({ content, currentVersionIndex, onSaveContent, status }) => {\n return (\n \n );\n },\n actions: [\n {\n icon: ,\n description: \"View Previous version\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"prev\");\n },\n isDisabled: ({ currentVersionIndex }) => {\n if (currentVersionIndex === 0) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"View Next version\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"next\");\n },\n isDisabled: ({ isCurrentVersion }) => {\n if (isCurrentVersion) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"Copy as .csv\",\n onClick: ({ content }) => {\n const parsed = parse(content, { skipEmptyLines: true });\n\n const nonEmptyRows = parsed.data.filter((row) =>\n row.some((cell) => cell.trim() !== \"\")\n );\n\n const cleanedCsv = unparse(nonEmptyRows);\n\n navigator.clipboard.writeText(cleanedCsv);\n toast.success(\"Copied csv to clipboard!\");\n },\n },\n ],\n toolbar: [\n {\n description: \"Format and clean data\",\n icon: ,\n onClick: ({ sendMessage }) => {\n sendMessage({\n role: \"user\",\n parts: [\n { type: \"text\", text: \"Can you please format and clean the data?\" },\n ],\n });\n },\n },\n {\n description: \"Analyze and visualize data\",\n icon: ,\n onClick: ({ sendMessage }) => {\n sendMessage({\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: \"Can you please analyze and visualize the data by creating a new code artifact in python?\",\n },\n ],\n });\n },\n },\n ],\n});\n" }, { "path": "artifacts/sheet/server.ts", "content": "import { streamObject } from \"ai\";\nimport { z } from \"zod\";\nimport { sheetPrompt, updateDocumentPrompt } from \"@/lib/ai/prompts\";\nimport { getArtifactModel } from \"@/lib/ai/providers\";\nimport { createDocumentHandler } from \"@/lib/artifacts/server\";\n\nexport const sheetDocumentHandler = createDocumentHandler<\"sheet\">({\n kind: \"sheet\",\n onCreateDocument: async ({ title, dataStream }) => {\n let draftContent = \"\";\n\n const { fullStream } = streamObject({\n model: getArtifactModel(),\n system: sheetPrompt,\n prompt: title,\n schema: z.object({\n csv: z.string().describe(\"CSV data\"),\n }),\n });\n\n for await (const delta of fullStream) {\n const { type } = delta;\n\n if (type === \"object\") {\n const { object } = delta;\n const { csv } = object;\n\n if (csv) {\n dataStream.write({\n type: \"data-sheetDelta\",\n data: csv,\n transient: true,\n });\n\n draftContent = csv;\n }\n }\n }\n\n dataStream.write({\n type: \"data-sheetDelta\",\n data: draftContent,\n transient: true,\n });\n\n return draftContent;\n },\n onUpdateDocument: async ({ document, description, dataStream }) => {\n let draftContent = \"\";\n\n const { fullStream } = streamObject({\n model: getArtifactModel(),\n system: updateDocumentPrompt(document.content, \"sheet\"),\n prompt: description,\n schema: z.object({\n csv: z.string(),\n }),\n });\n\n for await (const delta of fullStream) {\n const { type } = delta;\n\n if (type === \"object\") {\n const { object } = delta;\n const { csv } = object;\n\n if (csv) {\n dataStream.write({\n type: \"data-sheetDelta\",\n data: csv,\n transient: true,\n });\n\n draftContent = csv;\n }\n }\n }\n\n return draftContent;\n },\n});\n" }, { "path": "artifacts/text/client.tsx", "content": "import { toast } from \"sonner\";\nimport { Artifact } from \"@/components/create-artifact\";\nimport { DiffView } from \"@/components/diffview\";\nimport { DocumentSkeleton } from \"@/components/document-skeleton\";\nimport {\n ClockRewind,\n CopyIcon,\n MessageIcon,\n PenIcon,\n RedoIcon,\n UndoIcon,\n} from \"@/components/icons\";\nimport { Editor } from \"@/components/text-editor\";\nimport type { Suggestion } from \"@/lib/db/schema\";\nimport { getSuggestions } from \"../actions\";\n\ntype TextArtifactMetadata = {\n suggestions: Suggestion[];\n};\n\nexport const textArtifact = new Artifact<\"text\", TextArtifactMetadata>({\n kind: \"text\",\n description: \"Useful for text content, like drafting essays and emails.\",\n initialize: async ({ documentId, setMetadata }) => {\n const suggestions = await getSuggestions({ documentId });\n\n setMetadata({\n suggestions,\n });\n },\n onStreamPart: ({ streamPart, setMetadata, setArtifact }) => {\n if (streamPart.type === \"data-suggestion\") {\n setMetadata((metadata) => {\n return {\n suggestions: [...metadata.suggestions, streamPart.data],\n };\n });\n }\n\n if (streamPart.type === \"data-textDelta\") {\n setArtifact((draftArtifact) => {\n return {\n ...draftArtifact,\n content: draftArtifact.content + streamPart.data,\n isVisible:\n draftArtifact.status === \"streaming\" &&\n draftArtifact.content.length > 400 &&\n draftArtifact.content.length < 450\n ? true\n : draftArtifact.isVisible,\n status: \"streaming\",\n };\n });\n }\n },\n content: ({\n mode,\n status,\n content,\n isCurrentVersion,\n currentVersionIndex,\n onSaveContent,\n getDocumentContentById,\n isLoading,\n metadata,\n }) => {\n if (isLoading) {\n return ;\n }\n\n if (mode === \"diff\") {\n const oldContent = getDocumentContentById(currentVersionIndex - 1);\n const newContent = getDocumentContentById(currentVersionIndex);\n\n return ;\n }\n\n return (\n
\n \n\n {metadata?.suggestions && metadata.suggestions.length > 0 ? (\n
\n ) : null}\n
\n );\n },\n actions: [\n {\n icon: ,\n description: \"View changes\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"toggle\");\n },\n isDisabled: ({ currentVersionIndex }) => {\n if (currentVersionIndex === 0) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"View Previous version\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"prev\");\n },\n isDisabled: ({ currentVersionIndex }) => {\n if (currentVersionIndex === 0) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"View Next version\",\n onClick: ({ handleVersionChange }) => {\n handleVersionChange(\"next\");\n },\n isDisabled: ({ isCurrentVersion }) => {\n if (isCurrentVersion) {\n return true;\n }\n\n return false;\n },\n },\n {\n icon: ,\n description: \"Copy to clipboard\",\n onClick: ({ content }) => {\n navigator.clipboard.writeText(content);\n toast.success(\"Copied to clipboard!\");\n },\n },\n ],\n toolbar: [\n {\n icon: ,\n description: \"Add final polish\",\n onClick: ({ sendMessage }) => {\n sendMessage({\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: \"Please add final polish and check for grammar, add section titles for better structure, and ensure everything reads smoothly.\",\n },\n ],\n });\n },\n },\n {\n icon: ,\n description: \"Request suggestions\",\n onClick: ({ sendMessage }) => {\n sendMessage({\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: \"Please add suggestions you have that could improve the writing.\",\n },\n ],\n });\n },\n },\n ],\n});\n" }, { "path": "artifacts/text/server.ts", "content": "import { smoothStream, streamText } from \"ai\";\nimport { updateDocumentPrompt } from \"@/lib/ai/prompts\";\nimport { getArtifactModel } from \"@/lib/ai/providers\";\nimport { createDocumentHandler } from \"@/lib/artifacts/server\";\n\nexport const textDocumentHandler = createDocumentHandler<\"text\">({\n kind: \"text\",\n onCreateDocument: async ({ title, dataStream }) => {\n let draftContent = \"\";\n\n const { fullStream } = streamText({\n model: getArtifactModel(),\n system:\n \"Write about the given topic. Markdown is supported. Use headings wherever appropriate.\",\n experimental_transform: smoothStream({ chunking: \"word\" }),\n prompt: title,\n });\n\n for await (const delta of fullStream) {\n const { type } = delta;\n\n if (type === \"text-delta\") {\n const { text } = delta;\n\n draftContent += text;\n\n dataStream.write({\n type: \"data-textDelta\",\n data: text,\n transient: true,\n });\n }\n }\n\n return draftContent;\n },\n onUpdateDocument: async ({ document, description, dataStream }) => {\n let draftContent = \"\";\n\n const { fullStream } = streamText({\n model: getArtifactModel(),\n system: updateDocumentPrompt(document.content, \"text\"),\n experimental_transform: smoothStream({ chunking: \"word\" }),\n prompt: description,\n providerOptions: {\n openai: {\n prediction: {\n type: \"content\",\n content: document.content,\n },\n },\n },\n });\n\n for await (const delta of fullStream) {\n const { type } = delta;\n\n if (type === \"text-delta\") {\n const { text } = delta;\n\n draftContent += text;\n\n dataStream.write({\n type: \"data-textDelta\",\n data: text,\n transient: true,\n });\n }\n }\n\n return draftContent;\n },\n});\n" }, { "path": "biome.jsonc", "content": "{\n \"$schema\": \"./node_modules/@biomejs/biome/configuration_schema.json\",\n \"extends\": [\n \"ultracite/biome/core\",\n \"ultracite/biome/next\",\n \"ultracite/biome/react\"\n ],\n \"formatter\": {\n \"indentStyle\": \"space\",\n \"indentWidth\": 2\n },\n \"files\": {\n \"includes\": [\n \"**/*.ts\",\n \"**/*.tsx\",\n \"**/*.js\",\n \"**/*.jsx\",\n \"!node_modules\",\n \"!.next\",\n \"!ai-sdk\",\n \"!components/ui\",\n \"!lib/utils.ts\",\n \"!hooks/use-mobile.ts\"\n ]\n },\n \"linter\": {\n \"rules\": {\n \"suspicious\": {\n \"noExplicitAny\": \"off\",\n \"noUnknownAtRules\": \"off\",\n \"noConsole\": \"off\",\n \"noBitwiseOperators\": \"off\"\n },\n \"style\": {\n \"noMagicNumbers\": \"off\",\n \"noNestedTernary\": \"off\",\n \"useConsistentTypeDefinitions\": \"off\"\n },\n \"nursery\": {\n \"noUnnecessaryConditions\": \"off\",\n \"useSortedClasses\": \"off\"\n },\n \"complexity\": {\n \"noExcessiveCognitiveComplexity\": \"off\",\n \"useSimplifiedLogicExpression\": \"off\"\n },\n \"a11y\": {\n \"noSvgWithoutTitle\": \"off\"\n },\n \"correctness\": {\n \"useUniqueElementIds\": \"off\",\n \"useImageSize\": \"off\"\n },\n \"performance\": {\n \"noBarrelFile\": \"off\",\n \"useTopLevelRegex\": \"off\"\n }\n }\n }\n}\n" }, { "path": "components/ai-elements/artifact.tsx", "content": "\"use client\";\n\nimport { type LucideIcon, XIcon } from \"lucide-react\";\nimport type { ComponentProps, HTMLAttributes } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ArtifactProps = HTMLAttributes;\n\nexport const Artifact = ({ className, ...props }: ArtifactProps) => (\n \n);\n\nexport type ArtifactHeaderProps = HTMLAttributes;\n\nexport const ArtifactHeader = ({\n className,\n ...props\n}: ArtifactHeaderProps) => (\n \n);\n\nexport type ArtifactCloseProps = ComponentProps;\n\nexport const ArtifactClose = ({\n className,\n children,\n size = \"sm\",\n variant = \"ghost\",\n ...props\n}: ArtifactCloseProps) => (\n \n {children ?? }\n Close\n \n);\n\nexport type ArtifactTitleProps = HTMLAttributes;\n\nexport const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (\n \n);\n\nexport type ArtifactDescriptionProps = HTMLAttributes;\n\nexport const ArtifactDescription = ({\n className,\n ...props\n}: ArtifactDescriptionProps) => (\n

\n);\n\nexport type ArtifactActionsProps = HTMLAttributes;\n\nexport const ArtifactActions = ({\n className,\n ...props\n}: ArtifactActionsProps) => (\n

\n);\n\nexport type ArtifactActionProps = ComponentProps & {\n tooltip?: string;\n label?: string;\n icon?: LucideIcon;\n};\n\nexport const ArtifactAction = ({\n tooltip,\n label,\n icon: Icon,\n children,\n className,\n size = \"sm\",\n variant = \"ghost\",\n ...props\n}: ArtifactActionProps) => {\n const button = (\n \n {Icon ? : children}\n {label || tooltip}\n \n );\n\n if (tooltip) {\n return (\n \n \n {button}\n \n

{tooltip}

\n \n \n \n );\n }\n\n return button;\n};\n\nexport type ArtifactContentProps = HTMLAttributes;\n\nexport const ArtifactContent = ({\n className,\n ...props\n}: ArtifactContentProps) => (\n
\n);\n" }, { "path": "components/ai-elements/canvas.tsx", "content": "import { Background, ReactFlow, type ReactFlowProps } from \"@xyflow/react\";\nimport type { ReactNode } from \"react\";\nimport \"@xyflow/react/dist/style.css\";\n\ntype CanvasProps = ReactFlowProps & {\n children?: ReactNode;\n};\n\nexport const Canvas = ({ children, ...props }: CanvasProps) => (\n \n \n {children}\n \n);\n" }, { "path": "components/ai-elements/chain-of-thought.tsx", "content": "\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport {\n BrainIcon,\n ChevronDownIcon,\n DotIcon,\n type LucideIcon,\n} from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { createContext, memo, useContext, useMemo } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\ntype ChainOfThoughtContextValue = {\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n};\n\nconst ChainOfThoughtContext = createContext(\n null\n);\n\nconst useChainOfThought = () => {\n const context = useContext(ChainOfThoughtContext);\n if (!context) {\n throw new Error(\n \"ChainOfThought components must be used within ChainOfThought\"\n );\n }\n return context;\n};\n\nexport type ChainOfThoughtProps = ComponentProps<\"div\"> & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n};\n\nexport const ChainOfThought = memo(\n ({\n className,\n open,\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n }: ChainOfThoughtProps) => {\n const [isOpen, setIsOpen] = useControllableState({\n prop: open,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n const chainOfThoughtContext = useMemo(\n () => ({ isOpen, setIsOpen }),\n [isOpen, setIsOpen]\n );\n\n return (\n \n \n {children}\n
\n \n );\n }\n);\n\nexport type ChainOfThoughtHeaderProps = ComponentProps<\n typeof CollapsibleTrigger\n>;\n\nexport const ChainOfThoughtHeader = memo(\n ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {\n const { isOpen, setIsOpen } = useChainOfThought();\n\n return (\n \n \n \n \n {children ?? \"Chain of Thought\"}\n \n \n \n \n );\n }\n);\n\nexport type ChainOfThoughtStepProps = ComponentProps<\"div\"> & {\n icon?: LucideIcon;\n label: ReactNode;\n description?: ReactNode;\n status?: \"complete\" | \"active\" | \"pending\";\n};\n\nexport const ChainOfThoughtStep = memo(\n ({\n className,\n icon: Icon = DotIcon,\n label,\n description,\n status = \"complete\",\n children,\n ...props\n }: ChainOfThoughtStepProps) => {\n const statusStyles = {\n complete: \"text-muted-foreground\",\n active: \"text-foreground\",\n pending: \"text-muted-foreground/50\",\n };\n\n return (\n \n
\n \n
\n
\n
\n
{label}
\n {description && (\n
{description}
\n )}\n {children}\n
\n
\n );\n }\n);\n\nexport type ChainOfThoughtSearchResultsProps = ComponentProps<\"div\">;\n\nexport const ChainOfThoughtSearchResults = memo(\n ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (\n \n )\n);\n\nexport type ChainOfThoughtSearchResultProps = ComponentProps;\n\nexport const ChainOfThoughtSearchResult = memo(\n ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (\n \n {children}\n \n )\n);\n\nexport type ChainOfThoughtContentProps = ComponentProps<\n typeof CollapsibleContent\n>;\n\nexport const ChainOfThoughtContent = memo(\n ({ className, children, ...props }: ChainOfThoughtContentProps) => {\n const { isOpen } = useChainOfThought();\n\n return (\n \n \n {children}\n \n \n );\n }\n);\n\nexport type ChainOfThoughtImageProps = ComponentProps<\"div\"> & {\n caption?: string;\n};\n\nexport const ChainOfThoughtImage = memo(\n ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (\n
\n
\n {children}\n
\n {caption &&

{caption}

}\n
\n )\n);\n\nChainOfThought.displayName = \"ChainOfThought\";\nChainOfThoughtHeader.displayName = \"ChainOfThoughtHeader\";\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\";\nChainOfThoughtSearchResults.displayName = \"ChainOfThoughtSearchResults\";\nChainOfThoughtSearchResult.displayName = \"ChainOfThoughtSearchResult\";\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\";\nChainOfThoughtImage.displayName = \"ChainOfThoughtImage\";\n" }, { "path": "components/ai-elements/checkpoint.tsx", "content": "\"use client\";\n\nimport { BookmarkIcon, type LucideProps } from \"lucide-react\";\nimport type { ComponentProps, HTMLAttributes } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CheckpointProps = HTMLAttributes;\n\nexport const Checkpoint = ({\n className,\n children,\n ...props\n}: CheckpointProps) => (\n \n {children}\n \n
\n);\n\nexport type CheckpointIconProps = LucideProps;\n\nexport const CheckpointIcon = ({\n className,\n children,\n ...props\n}: CheckpointIconProps) =>\n children ?? (\n \n );\n\nexport type CheckpointTriggerProps = ComponentProps & {\n tooltip?: string;\n};\n\nexport const CheckpointTrigger = ({\n children,\n className,\n variant = \"ghost\",\n size = \"sm\",\n tooltip,\n ...props\n}: CheckpointTriggerProps) =>\n tooltip ? (\n \n \n \n \n \n {tooltip}\n \n \n ) : (\n \n );\n" }, { "path": "components/ai-elements/confirmation.tsx", "content": "\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\nimport {\n type ComponentProps,\n createContext,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype ToolUIPartApproval =\n | {\n id: string;\n approved?: never;\n reason?: never;\n }\n | {\n id: string;\n approved: boolean;\n reason?: string;\n }\n | {\n id: string;\n approved: true;\n reason?: string;\n }\n | {\n id: string;\n approved: true;\n reason?: string;\n }\n | {\n id: string;\n approved: false;\n reason?: string;\n }\n | undefined;\n\ntype ConfirmationContextValue = {\n approval: ToolUIPartApproval;\n state: ToolUIPart[\"state\"];\n};\n\nconst ConfirmationContext = createContext(\n null\n);\n\nconst useConfirmation = () => {\n const context = useContext(ConfirmationContext);\n\n if (!context) {\n throw new Error(\"Confirmation components must be used within Confirmation\");\n }\n\n return context;\n};\n\nexport type ConfirmationProps = ComponentProps & {\n approval?: ToolUIPartApproval;\n state: ToolUIPart[\"state\"];\n};\n\nexport const Confirmation = ({\n className,\n approval,\n state,\n ...props\n}: ConfirmationProps) => {\n if (!approval || state === \"input-streaming\" || state === \"input-available\") {\n return null;\n }\n\n return (\n \n \n \n );\n};\n\nexport type ConfirmationTitleProps = ComponentProps;\n\nexport const ConfirmationTitle = ({\n className,\n ...props\n}: ConfirmationTitleProps) => (\n \n);\n\nexport type ConfirmationRequestProps = {\n children?: ReactNode;\n};\n\nexport const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => {\n const { state } = useConfirmation();\n\n // Only show when approval is requested\n if (state !== \"approval-requested\") {\n return null;\n }\n\n return children;\n};\n\nexport type ConfirmationAcceptedProps = {\n children?: ReactNode;\n};\n\nexport const ConfirmationAccepted = ({\n children,\n}: ConfirmationAcceptedProps) => {\n const { approval, state } = useConfirmation();\n\n // Only show when approved and in response states\n if (\n !approval?.approved ||\n (state !== \"approval-responded\" &&\n state !== \"output-denied\" &&\n state !== \"output-available\")\n ) {\n return null;\n }\n\n return children;\n};\n\nexport type ConfirmationRejectedProps = {\n children?: ReactNode;\n};\n\nexport const ConfirmationRejected = ({\n children,\n}: ConfirmationRejectedProps) => {\n const { approval, state } = useConfirmation();\n\n // Only show when rejected and in response states\n if (\n approval?.approved !== false ||\n (state !== \"approval-responded\" &&\n state !== \"output-denied\" &&\n state !== \"output-available\")\n ) {\n return null;\n }\n\n return children;\n};\n\nexport type ConfirmationActionsProps = ComponentProps<\"div\">;\n\nexport const ConfirmationActions = ({\n className,\n ...props\n}: ConfirmationActionsProps) => {\n const { state } = useConfirmation();\n\n // Only show when approval is requested\n if (state !== \"approval-requested\") {\n return null;\n }\n\n return (\n \n );\n};\n\nexport type ConfirmationActionProps = ComponentProps;\n\nexport const ConfirmationAction = (props: ConfirmationActionProps) => (\n
\n);\n\nexport type ConversationScrollButtonProps = ComponentProps;\n\nexport const ConversationScrollButton = ({\n className,\n ...props\n}: ConversationScrollButtonProps) => {\n const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n\n const handleScrollToBottom = useCallback(() => {\n scrollToBottom();\n }, [scrollToBottom]);\n\n return (\n !isAtBottom && (\n \n \n \n )\n );\n};\n" }, { "path": "components/ai-elements/edge.tsx", "content": "import {\n BaseEdge,\n type EdgeProps,\n getBezierPath,\n getSimpleBezierPath,\n type InternalNode,\n type Node,\n Position,\n useInternalNode,\n} from \"@xyflow/react\";\n\nconst Temporary = ({\n id,\n sourceX,\n sourceY,\n targetX,\n targetY,\n sourcePosition,\n targetPosition,\n}: EdgeProps) => {\n const [edgePath] = getSimpleBezierPath({\n sourceX,\n sourceY,\n sourcePosition,\n targetX,\n targetY,\n targetPosition,\n });\n\n return (\n \n );\n};\n\nconst getHandleCoordsByPosition = (\n node: InternalNode,\n handlePosition: Position\n) => {\n // Choose the handle type based on position - Left is for target, Right is for source\n const handleType = handlePosition === Position.Left ? \"target\" : \"source\";\n\n const handle = node.internals.handleBounds?.[handleType]?.find(\n (h) => h.position === handlePosition\n );\n\n if (!handle) {\n return [0, 0] as const;\n }\n\n let offsetX = handle.width / 2;\n let offsetY = handle.height / 2;\n\n // this is a tiny detail to make the markerEnd of an edge visible.\n // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset\n // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position\n switch (handlePosition) {\n case Position.Left:\n offsetX = 0;\n break;\n case Position.Right:\n offsetX = handle.width;\n break;\n case Position.Top:\n offsetY = 0;\n break;\n case Position.Bottom:\n offsetY = handle.height;\n break;\n default:\n throw new Error(`Invalid handle position: ${handlePosition}`);\n }\n\n const x = node.internals.positionAbsolute.x + handle.x + offsetX;\n const y = node.internals.positionAbsolute.y + handle.y + offsetY;\n\n return [x, y] as const;\n};\n\nconst getEdgeParams = (\n source: InternalNode,\n target: InternalNode\n) => {\n const sourcePos = Position.Right;\n const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);\n const targetPos = Position.Left;\n const [tx, ty] = getHandleCoordsByPosition(target, targetPos);\n\n return {\n sx,\n sy,\n tx,\n ty,\n sourcePos,\n targetPos,\n };\n};\n\nconst Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {\n const sourceNode = useInternalNode(source);\n const targetNode = useInternalNode(target);\n\n if (!(sourceNode && targetNode)) {\n return null;\n }\n\n const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(\n sourceNode,\n targetNode\n );\n\n const [edgePath] = getBezierPath({\n sourceX: sx,\n sourceY: sy,\n sourcePosition: sourcePos,\n targetX: tx,\n targetY: ty,\n targetPosition: targetPos,\n });\n\n return (\n <>\n \n \n \n \n \n );\n};\n\nexport const Edge = {\n Temporary,\n Animated,\n};\n" }, { "path": "components/ai-elements/image.tsx", "content": "import type { Experimental_GeneratedImage } from \"ai\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ImageProps = Experimental_GeneratedImage & {\n className?: string;\n alt?: string;\n};\n\nexport const Image = ({\n base64,\n uint8Array,\n mediaType,\n ...props\n}: ImageProps) => (\n // biome-ignore lint/performance/noImgElement: base64 data URLs require native img\n \n);\n" }, { "path": "components/ai-elements/inline-citation.tsx", "content": "\"use client\";\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\";\nimport {\n type ComponentProps,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useState,\n} from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n Carousel,\n type CarouselApi,\n CarouselContent,\n CarouselItem,\n} from \"@/components/ui/carousel\";\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\nimport { cn } from \"@/lib/utils\";\n\nexport type InlineCitationProps = ComponentProps<\"span\">;\n\nexport const InlineCitation = ({\n className,\n ...props\n}: InlineCitationProps) => (\n \n);\n\nexport type InlineCitationTextProps = ComponentProps<\"span\">;\n\nexport const InlineCitationText = ({\n className,\n ...props\n}: InlineCitationTextProps) => (\n \n);\n\nexport type InlineCitationCardProps = ComponentProps;\n\nexport const InlineCitationCard = (props: InlineCitationCardProps) => (\n \n);\n\nexport type InlineCitationCardTriggerProps = ComponentProps & {\n sources: string[];\n};\n\nexport const InlineCitationCardTrigger = ({\n sources,\n className,\n ...props\n}: InlineCitationCardTriggerProps) => (\n \n \n {sources[0] ? (\n <>\n {new URL(sources[0]).hostname}{\" \"}\n {sources.length > 1 && `+${sources.length - 1}`}\n \n ) : (\n \"unknown\"\n )}\n \n \n);\n\nexport type InlineCitationCardBodyProps = ComponentProps<\"div\">;\n\nexport const InlineCitationCardBody = ({\n className,\n ...props\n}: InlineCitationCardBodyProps) => (\n \n);\n\nconst CarouselApiContext = createContext(undefined);\n\nconst useCarouselApi = () => {\n const context = useContext(CarouselApiContext);\n return context;\n};\n\nexport type InlineCitationCarouselProps = ComponentProps;\n\nexport const InlineCitationCarousel = ({\n className,\n children,\n ...props\n}: InlineCitationCarouselProps) => {\n const [api, setApi] = useState();\n\n return (\n \n \n {children}\n \n \n );\n};\n\nexport type InlineCitationCarouselContentProps = ComponentProps<\"div\">;\n\nexport const InlineCitationCarouselContent = (\n props: InlineCitationCarouselContentProps\n) => ;\n\nexport type InlineCitationCarouselItemProps = ComponentProps<\"div\">;\n\nexport const InlineCitationCarouselItem = ({\n className,\n ...props\n}: InlineCitationCarouselItemProps) => (\n \n);\n\nexport type InlineCitationCarouselHeaderProps = ComponentProps<\"div\">;\n\nexport const InlineCitationCarouselHeader = ({\n className,\n ...props\n}: InlineCitationCarouselHeaderProps) => (\n \n);\n\nexport type InlineCitationCarouselIndexProps = ComponentProps<\"div\">;\n\nexport const InlineCitationCarouselIndex = ({\n children,\n className,\n ...props\n}: InlineCitationCarouselIndexProps) => {\n const api = useCarouselApi();\n const [current, setCurrent] = useState(0);\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n if (!api) {\n return;\n }\n\n setCount(api.scrollSnapList().length);\n setCurrent(api.selectedScrollSnap() + 1);\n\n api.on(\"select\", () => {\n setCurrent(api.selectedScrollSnap() + 1);\n });\n }, [api]);\n\n return (\n \n {children ?? `${current}/${count}`}\n \n );\n};\n\nexport type InlineCitationCarouselPrevProps = ComponentProps<\"button\">;\n\nexport const InlineCitationCarouselPrev = ({\n className,\n ...props\n}: InlineCitationCarouselPrevProps) => {\n const api = useCarouselApi();\n\n const handleClick = useCallback(() => {\n if (api) {\n api.scrollPrev();\n }\n }, [api]);\n\n return (\n \n \n \n );\n};\n\nexport type InlineCitationCarouselNextProps = ComponentProps<\"button\">;\n\nexport const InlineCitationCarouselNext = ({\n className,\n ...props\n}: InlineCitationCarouselNextProps) => {\n const api = useCarouselApi();\n\n const handleClick = useCallback(() => {\n if (api) {\n api.scrollNext();\n }\n }, [api]);\n\n return (\n \n \n \n );\n};\n\nexport type InlineCitationSourceProps = ComponentProps<\"div\"> & {\n title?: string;\n url?: string;\n description?: string;\n};\n\nexport const InlineCitationSource = ({\n title,\n url,\n description,\n className,\n children,\n ...props\n}: InlineCitationSourceProps) => (\n
\n {title && (\n

{title}

\n )}\n {url && (\n

{url}

\n )}\n {description && (\n

\n {description}\n

\n )}\n {children}\n
\n);\n\nexport type InlineCitationQuoteProps = ComponentProps<\"blockquote\">;\n\nexport const InlineCitationQuote = ({\n children,\n className,\n ...props\n}: InlineCitationQuoteProps) => (\n \n {children}\n \n);\n" }, { "path": "components/ai-elements/loader.tsx", "content": "import type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype LoaderIconProps = {\n size?: number;\n};\n\nconst LoaderIcon = ({ size = 16 }: LoaderIconProps) => (\n \n Loader\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport type LoaderProps = HTMLAttributes & {\n size?: number;\n};\n\nexport const Loader = ({ className, size = 16, ...props }: LoaderProps) => (\n \n \n \n);\n" }, { "path": "components/ai-elements/message.tsx", "content": "\"use client\";\n\nimport type { FileUIPart, UIMessage } from \"ai\";\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n PaperclipIcon,\n XIcon,\n} from \"lucide-react\";\nimport type { ComponentProps, HTMLAttributes, ReactElement } from \"react\";\nimport { createContext, memo, useContext, useEffect, useState } from \"react\";\nimport { Streamdown } from \"streamdown\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup, ButtonGroupText } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport type MessageProps = HTMLAttributes & {\n from: UIMessage[\"role\"];\n};\n\nexport const Message = ({ className, from, ...props }: MessageProps) => (\n \n);\n\nexport type MessageContentProps = HTMLAttributes;\n\nexport const MessageContent = ({\n children,\n className,\n ...props\n}: MessageContentProps) => (\n \n {children}\n \n);\n\nexport type MessageActionsProps = ComponentProps<\"div\">;\n\nexport const MessageActions = ({\n className,\n children,\n ...props\n}: MessageActionsProps) => (\n
\n {children}\n
\n);\n\nexport type MessageActionProps = ComponentProps & {\n tooltip?: string;\n label?: string;\n};\n\nexport const MessageAction = ({\n tooltip,\n children,\n label,\n variant = \"ghost\",\n size = \"icon-sm\",\n ...props\n}: MessageActionProps) => {\n const button = (\n \n );\n\n if (tooltip) {\n return (\n \n \n {button}\n \n

{tooltip}

\n \n \n \n );\n }\n\n return button;\n};\n\ntype MessageBranchContextType = {\n currentBranch: number;\n totalBranches: number;\n goToPrevious: () => void;\n goToNext: () => void;\n branches: ReactElement[];\n setBranches: (branches: ReactElement[]) => void;\n};\n\nconst MessageBranchContext = createContext(\n null\n);\n\nconst useMessageBranch = () => {\n const context = useContext(MessageBranchContext);\n\n if (!context) {\n throw new Error(\n \"MessageBranch components must be used within MessageBranch\"\n );\n }\n\n return context;\n};\n\nexport type MessageBranchProps = HTMLAttributes & {\n defaultBranch?: number;\n onBranchChange?: (branchIndex: number) => void;\n};\n\nexport const MessageBranch = ({\n defaultBranch = 0,\n onBranchChange,\n className,\n ...props\n}: MessageBranchProps) => {\n const [currentBranch, setCurrentBranch] = useState(defaultBranch);\n const [branches, setBranches] = useState([]);\n\n const handleBranchChange = (newBranch: number) => {\n setCurrentBranch(newBranch);\n onBranchChange?.(newBranch);\n };\n\n const goToPrevious = () => {\n const newBranch =\n currentBranch > 0 ? currentBranch - 1 : branches.length - 1;\n handleBranchChange(newBranch);\n };\n\n const goToNext = () => {\n const newBranch =\n currentBranch < branches.length - 1 ? currentBranch + 1 : 0;\n handleBranchChange(newBranch);\n };\n\n const contextValue: MessageBranchContextType = {\n currentBranch,\n totalBranches: branches.length,\n goToPrevious,\n goToNext,\n branches,\n setBranches,\n };\n\n return (\n \n div]:pb-0\", className)}\n {...props}\n />\n \n );\n};\n\nexport type MessageBranchContentProps = HTMLAttributes;\n\nexport const MessageBranchContent = ({\n children,\n ...props\n}: MessageBranchContentProps) => {\n const { currentBranch, setBranches, branches } = useMessageBranch();\n const childrenArray = Array.isArray(children) ? children : [children];\n\n // Use useEffect to update branches when they change\n useEffect(() => {\n if (branches.length !== childrenArray.length) {\n setBranches(childrenArray);\n }\n }, [childrenArray, branches, setBranches]);\n\n return childrenArray.map((branch, index) => (\n div]:pb-0\",\n index === currentBranch ? \"block\" : \"hidden\"\n )}\n key={branch.key}\n {...props}\n >\n {branch}\n \n ));\n};\n\nexport type MessageBranchSelectorProps = HTMLAttributes & {\n from: UIMessage[\"role\"];\n};\n\nexport const MessageBranchSelector = ({\n className,\n from,\n ...props\n}: MessageBranchSelectorProps) => {\n const { totalBranches } = useMessageBranch();\n\n // Don't render if there's only one branch\n if (totalBranches <= 1) {\n return null;\n }\n\n return (\n *:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md\"\n orientation=\"horizontal\"\n {...props}\n />\n );\n};\n\nexport type MessageBranchPreviousProps = ComponentProps;\n\nexport const MessageBranchPrevious = ({\n children,\n ...props\n}: MessageBranchPreviousProps) => {\n const { goToPrevious, totalBranches } = useMessageBranch();\n\n return (\n \n {children ?? }\n \n );\n};\n\nexport type MessageBranchNextProps = ComponentProps;\n\nexport const MessageBranchNext = ({\n children,\n className,\n ...props\n}: MessageBranchNextProps) => {\n const { goToNext, totalBranches } = useMessageBranch();\n\n return (\n \n {children ?? }\n \n );\n};\n\nexport type MessageBranchPageProps = HTMLAttributes;\n\nexport const MessageBranchPage = ({\n className,\n ...props\n}: MessageBranchPageProps) => {\n const { currentBranch, totalBranches } = useMessageBranch();\n\n return (\n \n {currentBranch + 1} of {totalBranches}\n \n );\n};\n\nexport type MessageResponseProps = ComponentProps;\n\nexport const MessageResponse = memo(\n ({ className, ...props }: MessageResponseProps) => (\n *:first-child]:mt-0 [&>*:last-child]:mb-0\",\n className\n )}\n {...props}\n />\n ),\n (prevProps, nextProps) => prevProps.children === nextProps.children\n);\n\nMessageResponse.displayName = \"MessageResponse\";\n\nexport type MessageAttachmentProps = HTMLAttributes & {\n data: FileUIPart;\n className?: string;\n onRemove?: () => void;\n};\n\nexport function MessageAttachment({\n data,\n className,\n onRemove,\n ...props\n}: MessageAttachmentProps) {\n const filename = data.filename || \"\";\n const mediaType =\n data.mediaType?.startsWith(\"image/\") && data.url ? \"image\" : \"file\";\n const isImage = mediaType === \"image\";\n const attachmentLabel = filename || (isImage ? \"Image\" : \"Attachment\");\n\n return (\n \n {isImage ? (\n <>\n {/* biome-ignore lint/performance/noImgElement: dynamic user-uploaded images */}\n \n {onRemove && (\n svg]:size-3\"\n onClick={(e) => {\n e.stopPropagation();\n onRemove();\n }}\n type=\"button\"\n variant=\"ghost\"\n >\n \n Remove\n \n )}\n \n ) : (\n <>\n \n \n
\n \n
\n \n \n

{attachmentLabel}

\n \n \n {onRemove && (\n svg]:size-3\"\n onClick={(e) => {\n e.stopPropagation();\n onRemove();\n }}\n type=\"button\"\n variant=\"ghost\"\n >\n \n Remove\n \n )}\n \n )}\n \n );\n}\n\nexport type MessageAttachmentsProps = ComponentProps<\"div\">;\n\nexport function MessageAttachments({\n children,\n className,\n ...props\n}: MessageAttachmentsProps) {\n if (!children) {\n return null;\n }\n\n return (\n \n {children}\n \n );\n}\n\nexport type MessageToolbarProps = ComponentProps<\"div\">;\n\nexport const MessageToolbar = ({\n className,\n children,\n ...props\n}: MessageToolbarProps) => (\n \n {children}\n \n);\n" }, { "path": "components/ai-elements/model-selector.tsx", "content": "import Image from \"next/image\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/components/ui/command\";\nimport {\n Dialog,\n DialogContent,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ModelSelectorProps = ComponentProps;\n\nexport const ModelSelector = (props: ModelSelectorProps) => (\n \n);\n\nexport type ModelSelectorTriggerProps = ComponentProps;\n\nexport const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (\n \n);\n\nexport type ModelSelectorContentProps = ComponentProps & {\n title?: ReactNode;\n};\n\nexport const ModelSelectorContent = ({\n className,\n children,\n title = \"Model Selector\",\n ...props\n}: ModelSelectorContentProps) => (\n \n {title}\n \n {children}\n \n \n);\n\nexport type ModelSelectorDialogProps = ComponentProps;\n\nexport const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (\n \n);\n\nexport type ModelSelectorInputProps = ComponentProps;\n\nexport const ModelSelectorInput = ({\n className,\n ...props\n}: ModelSelectorInputProps) => (\n \n);\n\nexport type ModelSelectorListProps = ComponentProps;\n\nexport const ModelSelectorList = (props: ModelSelectorListProps) => (\n \n);\n\nexport type ModelSelectorEmptyProps = ComponentProps;\n\nexport const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (\n \n);\n\nexport type ModelSelectorGroupProps = ComponentProps;\n\nexport const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (\n \n);\n\nexport type ModelSelectorItemProps = ComponentProps;\n\nexport const ModelSelectorItem = (props: ModelSelectorItemProps) => (\n \n);\n\nexport type ModelSelectorShortcutProps = ComponentProps;\n\nexport const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (\n \n);\n\nexport type ModelSelectorSeparatorProps = ComponentProps<\n typeof CommandSeparator\n>;\n\nexport const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (\n \n);\n\nexport type ModelSelectorLogoProps = {\n className?: string;\n provider:\n | \"moonshotai-cn\"\n | \"lucidquery\"\n | \"moonshotai\"\n | \"zai-coding-plan\"\n | \"alibaba\"\n | \"xai\"\n | \"vultr\"\n | \"nvidia\"\n | \"upstage\"\n | \"groq\"\n | \"github-copilot\"\n | \"mistral\"\n | \"vercel\"\n | \"nebius\"\n | \"deepseek\"\n | \"alibaba-cn\"\n | \"google-vertex-anthropic\"\n | \"venice\"\n | \"chutes\"\n | \"cortecs\"\n | \"github-models\"\n | \"togetherai\"\n | \"azure\"\n | \"baseten\"\n | \"huggingface\"\n | \"opencode\"\n | \"fastrouter\"\n | \"google\"\n | \"google-vertex\"\n | \"cloudflare-workers-ai\"\n | \"inception\"\n | \"wandb\"\n | \"openai\"\n | \"zhipuai-coding-plan\"\n | \"perplexity\"\n | \"openrouter\"\n | \"zenmux\"\n | \"v0\"\n | \"iflowcn\"\n | \"synthetic\"\n | \"deepinfra\"\n | \"zhipuai\"\n | \"submodel\"\n | \"zai\"\n | \"inference\"\n | \"requesty\"\n | \"morph\"\n | \"lmstudio\"\n | \"anthropic\"\n | \"aihubmix\"\n | \"fireworks-ai\"\n | \"modelscope\"\n | \"llama\"\n | \"scaleway\"\n | \"amazon-bedrock\"\n | \"cerebras\"\n | (string & {});\n};\n\nexport const ModelSelectorLogo = ({\n provider,\n className,\n}: ModelSelectorLogoProps) => (\n \n);\n\nexport type ModelSelectorLogoGroupProps = ComponentProps<\"div\">;\n\nexport const ModelSelectorLogoGroup = ({\n className,\n ...props\n}: ModelSelectorLogoGroupProps) => (\n img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground\",\n className\n )}\n {...props}\n />\n);\n\nexport type ModelSelectorNameProps = ComponentProps<\"span\">;\n\nexport const ModelSelectorName = ({\n className,\n ...props\n}: ModelSelectorNameProps) => (\n \n);\n" }, { "path": "components/ai-elements/node.tsx", "content": "import { Handle, Position } from \"@xyflow/react\";\nimport type { ComponentProps } from \"react\";\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\nexport type NodeProps = ComponentProps & {\n handles: {\n target: boolean;\n source: boolean;\n };\n};\n\nexport const Node = ({ handles, className, ...props }: NodeProps) => (\n \n {handles.target && }\n {handles.source && }\n {props.children}\n \n);\n\nexport type NodeHeaderProps = ComponentProps;\n\nexport const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (\n \n);\n\nexport type NodeTitleProps = ComponentProps;\n\nexport const NodeTitle = (props: NodeTitleProps) => ;\n\nexport type NodeDescriptionProps = ComponentProps;\n\nexport const NodeDescription = (props: NodeDescriptionProps) => (\n \n);\n\nexport type NodeActionProps = ComponentProps;\n\nexport const NodeAction = (props: NodeActionProps) => ;\n\nexport type NodeContentProps = ComponentProps;\n\nexport const NodeContent = ({ className, ...props }: NodeContentProps) => (\n \n);\n\nexport type NodeFooterProps = ComponentProps;\n\nexport const NodeFooter = ({ className, ...props }: NodeFooterProps) => (\n \n);\n" }, { "path": "components/ai-elements/open-in-chat.tsx", "content": "\"use client\";\n\nimport {\n ChevronDownIcon,\n ExternalLinkIcon,\n MessageCircleIcon,\n} from \"lucide-react\";\nimport { type ComponentProps, createContext, useContext } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst providers = {\n github: {\n title: \"Open in GitHub\",\n createUrl: (url: string) => url,\n icon: (\n \n GitHub\n \n \n ),\n },\n scira: {\n title: \"Open in Scira\",\n createUrl: (q: string) =>\n `https://scira.ai/?${new URLSearchParams({\n q,\n })}`,\n icon: (\n \n Scira AI\n \n \n \n \n \n \n \n \n ),\n },\n chatgpt: {\n title: \"Open in ChatGPT\",\n createUrl: (prompt: string) =>\n `https://chatgpt.com/?${new URLSearchParams({\n hints: \"search\",\n prompt,\n })}`,\n icon: (\n \n OpenAI\n \n \n ),\n },\n claude: {\n title: \"Open in Claude\",\n createUrl: (q: string) =>\n `https://claude.ai/new?${new URLSearchParams({\n q,\n })}`,\n icon: (\n \n Claude\n \n \n ),\n },\n t3: {\n title: \"Open in T3 Chat\",\n createUrl: (q: string) =>\n `https://t3.chat/new?${new URLSearchParams({\n q,\n })}`,\n icon: ,\n },\n v0: {\n title: \"Open in v0\",\n createUrl: (q: string) =>\n `https://v0.app?${new URLSearchParams({\n q,\n })}`,\n icon: (\n \n v0\n \n \n \n ),\n },\n cursor: {\n title: \"Open in Cursor\",\n createUrl: (text: string) => {\n const url = new URL(\"https://cursor.com/link/prompt\");\n url.searchParams.set(\"text\", text);\n return url.toString();\n },\n icon: (\n \n Cursor\n \n \n ),\n },\n};\n\nconst OpenInContext = createContext<{ query: string } | undefined>(undefined);\n\nconst useOpenInContext = () => {\n const context = useContext(OpenInContext);\n if (!context) {\n throw new Error(\"OpenIn components must be used within an OpenIn provider\");\n }\n return context;\n};\n\nexport type OpenInProps = ComponentProps & {\n query: string;\n};\n\nexport const OpenIn = ({ query, ...props }: OpenInProps) => (\n \n \n \n);\n\nexport type OpenInContentProps = ComponentProps;\n\nexport const OpenInContent = ({ className, ...props }: OpenInContentProps) => (\n \n);\n\nexport type OpenInItemProps = ComponentProps;\n\nexport const OpenInItem = (props: OpenInItemProps) => (\n \n);\n\nexport type OpenInLabelProps = ComponentProps;\n\nexport const OpenInLabel = (props: OpenInLabelProps) => (\n \n);\n\nexport type OpenInSeparatorProps = ComponentProps;\n\nexport const OpenInSeparator = (props: OpenInSeparatorProps) => (\n \n);\n\nexport type OpenInTriggerProps = ComponentProps;\n\nexport const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (\n \n {children ?? (\n \n )}\n \n);\n\nexport type OpenInChatGPTProps = ComponentProps;\n\nexport const OpenInChatGPT = (props: OpenInChatGPTProps) => {\n const { query } = useOpenInContext();\n return (\n \n \n {providers.chatgpt.icon}\n {providers.chatgpt.title}\n \n \n \n );\n};\n\nexport type OpenInClaudeProps = ComponentProps;\n\nexport const OpenInClaude = (props: OpenInClaudeProps) => {\n const { query } = useOpenInContext();\n return (\n \n \n {providers.claude.icon}\n {providers.claude.title}\n \n \n \n );\n};\n\nexport type OpenInT3Props = ComponentProps;\n\nexport const OpenInT3 = (props: OpenInT3Props) => {\n const { query } = useOpenInContext();\n return (\n \n \n {providers.t3.icon}\n {providers.t3.title}\n \n \n \n );\n};\n\nexport type OpenInSciraProps = ComponentProps;\n\nexport const OpenInScira = (props: OpenInSciraProps) => {\n const { query } = useOpenInContext();\n return (\n \n \n {providers.scira.icon}\n {providers.scira.title}\n \n \n \n );\n};\n\nexport type OpenInv0Props = ComponentProps;\n\nexport const OpenInv0 = (props: OpenInv0Props) => {\n const { query } = useOpenInContext();\n return (\n \n \n {providers.v0.icon}\n {providers.v0.title}\n \n \n \n );\n};\n\nexport type OpenInCursorProps = ComponentProps;\n\nexport const OpenInCursor = (props: OpenInCursorProps) => {\n const { query } = useOpenInContext();\n return (\n \n \n {providers.cursor.icon}\n {providers.cursor.title}\n \n \n \n );\n};\n" }, { "path": "components/ai-elements/panel.tsx", "content": "import { Panel as PanelPrimitive } from \"@xyflow/react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype PanelProps = ComponentProps;\n\nexport const Panel = ({ className, ...props }: PanelProps) => (\n \n);\n" }, { "path": "components/ai-elements/plan.tsx", "content": "\"use client\";\n\nimport { ChevronsUpDownIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\nimport { Shimmer } from \"./shimmer\";\n\ntype PlanContextValue = {\n isStreaming: boolean;\n};\n\nconst PlanContext = createContext(null);\n\nconst usePlan = () => {\n const context = useContext(PlanContext);\n if (!context) {\n throw new Error(\"Plan components must be used within Plan\");\n }\n return context;\n};\n\nexport type PlanProps = ComponentProps & {\n isStreaming?: boolean;\n};\n\nexport const Plan = ({\n className,\n isStreaming = false,\n children,\n ...props\n}: PlanProps) => (\n \n \n {children}\n \n \n);\n\nexport type PlanHeaderProps = ComponentProps;\n\nexport const PlanHeader = ({ className, ...props }: PlanHeaderProps) => (\n \n);\n\nexport type PlanTitleProps = Omit<\n ComponentProps,\n \"children\"\n> & {\n children: string;\n};\n\nexport const PlanTitle = ({ children, ...props }: PlanTitleProps) => {\n const { isStreaming } = usePlan();\n\n return (\n \n {isStreaming ? {children} : children}\n \n );\n};\n\nexport type PlanDescriptionProps = Omit<\n ComponentProps,\n \"children\"\n> & {\n children: string;\n};\n\nexport const PlanDescription = ({\n className,\n children,\n ...props\n}: PlanDescriptionProps) => {\n const { isStreaming } = usePlan();\n\n return (\n \n {isStreaming ? {children} : children}\n \n );\n};\n\nexport type PlanActionProps = ComponentProps;\n\nexport const PlanAction = (props: PlanActionProps) => (\n \n);\n\nexport type PlanContentProps = ComponentProps;\n\nexport const PlanContent = (props: PlanContentProps) => (\n \n \n \n);\n\nexport type PlanFooterProps = ComponentProps<\"div\">;\n\nexport const PlanFooter = (props: PlanFooterProps) => (\n \n);\n\nexport type PlanTriggerProps = ComponentProps;\n\nexport const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => (\n \n \n \n Toggle plan\n \n \n);\n" }, { "path": "components/ai-elements/prompt-input.tsx", "content": "\"use client\";\n\nimport type { ChatStatus, FileUIPart } from \"ai\";\nimport {\n CornerDownLeftIcon,\n ImageIcon,\n Loader2Icon,\n MicIcon,\n PaperclipIcon,\n PlusIcon,\n SquareIcon,\n XIcon,\n} from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\nimport {\n type ChangeEvent,\n type ChangeEventHandler,\n Children,\n type ClipboardEventHandler,\n type ComponentProps,\n createContext,\n type FormEvent,\n type FormEventHandler,\n Fragment,\n type HTMLAttributes,\n type KeyboardEventHandler,\n type PropsWithChildren,\n type ReactNode,\n type RefObject,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupTextarea,\n} from \"@/components/ui/input-group\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\n\n// ============================================================================\n// Provider Context & Types\n// ============================================================================\n\nexport type AttachmentsContext = {\n files: (FileUIPart & { id: string })[];\n add: (files: File[] | FileList) => void;\n remove: (id: string) => void;\n clear: () => void;\n openFileDialog: () => void;\n fileInputRef: RefObject;\n};\n\nexport type TextInputContext = {\n value: string;\n setInput: (v: string) => void;\n clear: () => void;\n};\n\nexport type PromptInputControllerProps = {\n textInput: TextInputContext;\n attachments: AttachmentsContext;\n /** INTERNAL: Allows PromptInput to register its file textInput + \"open\" callback */\n __registerFileInput: (\n ref: RefObject,\n open: () => void\n ) => void;\n};\n\nconst PromptInputController = createContext(\n null\n);\nconst ProviderAttachmentsContext = createContext(\n null\n);\n\nexport const usePromptInputController = () => {\n const ctx = useContext(PromptInputController);\n if (!ctx) {\n throw new Error(\n \"Wrap your component inside to use usePromptInputController().\"\n );\n }\n return ctx;\n};\n\n// Optional variants (do NOT throw). Useful for dual-mode components.\nconst useOptionalPromptInputController = () =>\n useContext(PromptInputController);\n\nexport const useProviderAttachments = () => {\n const ctx = useContext(ProviderAttachmentsContext);\n if (!ctx) {\n throw new Error(\n \"Wrap your component inside to use useProviderAttachments().\"\n );\n }\n return ctx;\n};\n\nconst useOptionalProviderAttachments = () =>\n useContext(ProviderAttachmentsContext);\n\nexport type PromptInputProviderProps = PropsWithChildren<{\n initialInput?: string;\n}>;\n\n/**\n * Optional global provider that lifts PromptInput state outside of PromptInput.\n * If you don't use it, PromptInput stays fully self-managed.\n */\nexport function PromptInputProvider({\n initialInput: initialTextInput = \"\",\n children,\n}: PromptInputProviderProps) {\n // ----- textInput state\n const [textInput, setTextInput] = useState(initialTextInput);\n const clearInput = useCallback(() => setTextInput(\"\"), []);\n\n // ----- attachments state (global when wrapped)\n const [attachmentFiles, setAttachmentFiles] = useState<\n (FileUIPart & { id: string })[]\n >([]);\n const fileInputRef = useRef(null);\n const openRef = useRef<() => void>(() => undefined);\n\n const add = useCallback((files: File[] | FileList) => {\n const incoming = Array.from(files);\n if (incoming.length === 0) {\n return;\n }\n\n setAttachmentFiles((prev) =>\n prev.concat(\n incoming.map((file) => ({\n id: nanoid(),\n type: \"file\" as const,\n url: URL.createObjectURL(file),\n mediaType: file.type,\n filename: file.name,\n }))\n )\n );\n }, []);\n\n const remove = useCallback((id: string) => {\n setAttachmentFiles((prev) => {\n const found = prev.find((f) => f.id === id);\n if (found?.url) {\n URL.revokeObjectURL(found.url);\n }\n return prev.filter((f) => f.id !== id);\n });\n }, []);\n\n const clear = useCallback(() => {\n setAttachmentFiles((prev) => {\n for (const f of prev) {\n if (f.url) {\n URL.revokeObjectURL(f.url);\n }\n }\n return [];\n });\n }, []);\n\n // Keep a ref to attachments for cleanup on unmount (avoids stale closure)\n const attachmentsRef = useRef(attachmentFiles);\n attachmentsRef.current = attachmentFiles;\n\n // Cleanup blob URLs on unmount to prevent memory leaks\n useEffect(() => {\n return () => {\n for (const f of attachmentsRef.current) {\n if (f.url) {\n URL.revokeObjectURL(f.url);\n }\n }\n };\n }, []);\n\n const openFileDialog = useCallback(() => {\n openRef.current?.();\n }, []);\n\n const attachments = useMemo(\n () => ({\n files: attachmentFiles,\n add,\n remove,\n clear,\n openFileDialog,\n fileInputRef,\n }),\n [attachmentFiles, add, remove, clear, openFileDialog]\n );\n\n const __registerFileInput = useCallback(\n (ref: RefObject, open: () => void) => {\n fileInputRef.current = ref.current;\n openRef.current = open;\n },\n []\n );\n\n const controller = useMemo(\n () => ({\n textInput: {\n value: textInput,\n setInput: setTextInput,\n clear: clearInput,\n },\n attachments,\n __registerFileInput,\n }),\n [textInput, clearInput, attachments, __registerFileInput]\n );\n\n return (\n \n \n {children}\n \n \n );\n}\n\n// ============================================================================\n// Component Context & Hooks\n// ============================================================================\n\nconst LocalAttachmentsContext = createContext(null);\n\nexport const usePromptInputAttachments = () => {\n // Dual-mode: prefer provider if present, otherwise use local\n const provider = useOptionalProviderAttachments();\n const local = useContext(LocalAttachmentsContext);\n const context = provider ?? local;\n if (!context) {\n throw new Error(\n \"usePromptInputAttachments must be used within a PromptInput or PromptInputProvider\"\n );\n }\n return context;\n};\n\nexport type PromptInputAttachmentProps = HTMLAttributes & {\n data: FileUIPart & { id: string };\n className?: string;\n};\n\nexport function PromptInputAttachment({\n data,\n className,\n ...props\n}: PromptInputAttachmentProps) {\n const attachments = usePromptInputAttachments();\n\n const filename = data.filename || \"\";\n\n const mediaType =\n data.mediaType?.startsWith(\"image/\") && data.url ? \"image\" : \"file\";\n const isImage = mediaType === \"image\";\n\n const attachmentLabel = filename || (isImage ? \"Image\" : \"Attachment\");\n\n return (\n \n \n \n
\n
\n {isImage ? (\n /* biome-ignore lint/performance/noImgElement: dynamic user uploads */\n \n ) : (\n
\n \n
\n )}\n
\n svg]:size-2.5\"\n onClick={(e) => {\n e.stopPropagation();\n attachments.remove(data.id);\n }}\n type=\"button\"\n variant=\"ghost\"\n >\n \n Remove\n \n
\n\n {attachmentLabel}\n \n \n \n
\n {isImage && (\n
\n {/* biome-ignore lint/performance/noImgElement: dynamic user uploads */}\n \n
\n )}\n
\n
\n

\n {filename || (isImage ? \"Image\" : \"Attachment\")}\n

\n {data.mediaType && (\n

\n {data.mediaType}\n

\n )}\n
\n
\n
\n \n \n );\n}\n\nexport type PromptInputAttachmentsProps = Omit<\n HTMLAttributes,\n \"children\"\n> & {\n children: (attachment: FileUIPart & { id: string }) => ReactNode;\n};\n\nexport function PromptInputAttachments({\n children,\n className,\n ...props\n}: PromptInputAttachmentsProps) {\n const attachments = usePromptInputAttachments();\n\n if (!attachments.files.length) {\n return null;\n }\n\n return (\n \n {attachments.files.map((file) => (\n {children(file)}\n ))}\n \n );\n}\n\nexport type PromptInputActionAddAttachmentsProps = ComponentProps<\n typeof DropdownMenuItem\n> & {\n label?: string;\n};\n\nexport const PromptInputActionAddAttachments = ({\n label = \"Add photos or files\",\n ...props\n}: PromptInputActionAddAttachmentsProps) => {\n const attachments = usePromptInputAttachments();\n\n return (\n {\n e.preventDefault();\n attachments.openFileDialog();\n }}\n >\n {label}\n \n );\n};\n\nexport type PromptInputMessage = {\n text: string;\n files: FileUIPart[];\n};\n\nexport type PromptInputProps = Omit<\n HTMLAttributes,\n \"onSubmit\" | \"onError\"\n> & {\n accept?: string; // e.g., \"image/*\" or leave undefined for any\n multiple?: boolean;\n // When true, accepts drops anywhere on document. Default false (opt-in).\n globalDrop?: boolean;\n // Render a hidden input with given name and keep it in sync for native form posts. Default false.\n syncHiddenInput?: boolean;\n // Minimal constraints\n maxFiles?: number;\n maxFileSize?: number; // bytes\n onError?: (err: {\n code: \"max_files\" | \"max_file_size\" | \"accept\";\n message: string;\n }) => void;\n onSubmit: (\n message: PromptInputMessage,\n event: FormEvent\n ) => void | Promise;\n};\n\nexport const PromptInput = ({\n className,\n accept,\n multiple,\n globalDrop,\n syncHiddenInput,\n maxFiles,\n maxFileSize,\n onError,\n onSubmit,\n children,\n ...props\n}: PromptInputProps) => {\n // Try to use a provider controller if present\n const controller = useOptionalPromptInputController();\n const usingProvider = !!controller;\n\n // Refs\n const inputRef = useRef(null);\n const formRef = useRef(null);\n\n // ----- Local attachments (only used when no provider)\n const [items, setItems] = useState<(FileUIPart & { id: string })[]>([]);\n const files = usingProvider ? controller.attachments.files : items;\n\n // Keep a ref to files for cleanup on unmount (avoids stale closure)\n const filesRef = useRef(files);\n filesRef.current = files;\n\n const openFileDialogLocal = useCallback(() => {\n inputRef.current?.click();\n }, []);\n\n const matchesAccept = useCallback(\n (f: File) => {\n if (!accept || accept.trim() === \"\") {\n return true;\n }\n\n const patterns = accept\n .split(\",\")\n .map((s) => s.trim())\n .filter(Boolean);\n\n return patterns.some((pattern) => {\n if (pattern.endsWith(\"/*\")) {\n const prefix = pattern.slice(0, -1); // e.g: image/* -> image/\n return f.type.startsWith(prefix);\n }\n return f.type === pattern;\n });\n },\n [accept]\n );\n\n const addLocal = useCallback(\n (fileList: File[] | FileList) => {\n const incoming = Array.from(fileList);\n const accepted = incoming.filter((f) => matchesAccept(f));\n if (incoming.length && accepted.length === 0) {\n onError?.({\n code: \"accept\",\n message: \"No files match the accepted types.\",\n });\n return;\n }\n const withinSize = (f: File) =>\n maxFileSize ? f.size <= maxFileSize : true;\n const sized = accepted.filter(withinSize);\n if (accepted.length > 0 && sized.length === 0) {\n onError?.({\n code: \"max_file_size\",\n message: \"All files exceed the maximum size.\",\n });\n return;\n }\n\n setItems((prev) => {\n const capacity =\n typeof maxFiles === \"number\"\n ? Math.max(0, maxFiles - prev.length)\n : undefined;\n const capped =\n typeof capacity === \"number\" ? sized.slice(0, capacity) : sized;\n if (typeof capacity === \"number\" && sized.length > capacity) {\n onError?.({\n code: \"max_files\",\n message: \"Too many files. Some were not added.\",\n });\n }\n const next: (FileUIPart & { id: string })[] = [];\n for (const file of capped) {\n next.push({\n id: nanoid(),\n type: \"file\",\n url: URL.createObjectURL(file),\n mediaType: file.type,\n filename: file.name,\n });\n }\n return prev.concat(next);\n });\n },\n [matchesAccept, maxFiles, maxFileSize, onError]\n );\n\n const removeLocal = useCallback(\n (id: string) =>\n setItems((prev) => {\n const found = prev.find((file) => file.id === id);\n if (found?.url) {\n URL.revokeObjectURL(found.url);\n }\n return prev.filter((file) => file.id !== id);\n }),\n []\n );\n\n const clearLocal = useCallback(\n () =>\n setItems((prev) => {\n for (const file of prev) {\n if (file.url) {\n URL.revokeObjectURL(file.url);\n }\n }\n return [];\n }),\n []\n );\n\n const add = usingProvider ? controller.attachments.add : addLocal;\n const remove = usingProvider ? controller.attachments.remove : removeLocal;\n const clear = usingProvider ? controller.attachments.clear : clearLocal;\n const openFileDialog = usingProvider\n ? controller.attachments.openFileDialog\n : openFileDialogLocal;\n\n // Let provider know about our hidden file input so external menus can call openFileDialog()\n useEffect(() => {\n if (!usingProvider) {\n return;\n }\n controller.__registerFileInput(inputRef, () => inputRef.current?.click());\n }, [usingProvider, controller]);\n\n // Note: File input cannot be programmatically set for security reasons\n // The syncHiddenInput prop is no longer functional\n useEffect(() => {\n if (syncHiddenInput && inputRef.current && files.length === 0) {\n inputRef.current.value = \"\";\n }\n }, [files, syncHiddenInput]);\n\n // Attach drop handlers on nearest form and document (opt-in)\n useEffect(() => {\n const form = formRef.current;\n if (!form) {\n return;\n }\n if (globalDrop) {\n return;\n }\n\n const onDragOver = (e: DragEvent) => {\n if (e.dataTransfer?.types?.includes(\"Files\")) {\n e.preventDefault();\n }\n };\n const onDrop = (e: DragEvent) => {\n if (e.dataTransfer?.types?.includes(\"Files\")) {\n e.preventDefault();\n }\n if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {\n add(e.dataTransfer.files);\n }\n };\n form.addEventListener(\"dragover\", onDragOver);\n form.addEventListener(\"drop\", onDrop);\n return () => {\n form.removeEventListener(\"dragover\", onDragOver);\n form.removeEventListener(\"drop\", onDrop);\n };\n }, [add, globalDrop]);\n\n useEffect(() => {\n if (!globalDrop) {\n return;\n }\n\n const onDragOver = (e: DragEvent) => {\n if (e.dataTransfer?.types?.includes(\"Files\")) {\n e.preventDefault();\n }\n };\n const onDrop = (e: DragEvent) => {\n if (e.dataTransfer?.types?.includes(\"Files\")) {\n e.preventDefault();\n }\n if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {\n add(e.dataTransfer.files);\n }\n };\n document.addEventListener(\"dragover\", onDragOver);\n document.addEventListener(\"drop\", onDrop);\n return () => {\n document.removeEventListener(\"dragover\", onDragOver);\n document.removeEventListener(\"drop\", onDrop);\n };\n }, [add, globalDrop]);\n\n useEffect(\n () => () => {\n if (!usingProvider) {\n for (const f of filesRef.current) {\n if (f.url) {\n URL.revokeObjectURL(f.url);\n }\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps -- cleanup only on unmount; filesRef always current\n [usingProvider]\n );\n\n const handleChange: ChangeEventHandler = (event) => {\n if (event.currentTarget.files) {\n add(event.currentTarget.files);\n }\n // Reset input value to allow selecting files that were previously removed\n event.currentTarget.value = \"\";\n };\n\n const convertBlobUrlToDataUrl = async (\n url: string\n ): Promise => {\n try {\n const response = await fetch(url);\n const blob = await response.blob();\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.onloadend = () => resolve(reader.result as string);\n reader.onerror = () => resolve(null);\n reader.readAsDataURL(blob);\n });\n } catch {\n return null;\n }\n };\n\n const ctx = useMemo(\n () => ({\n files: files.map((item) => ({ ...item, id: item.id })),\n add,\n remove,\n clear,\n openFileDialog,\n fileInputRef: inputRef,\n }),\n [files, add, remove, clear, openFileDialog]\n );\n\n const handleSubmit: FormEventHandler = (event) => {\n event.preventDefault();\n\n const form = event.currentTarget;\n const text = usingProvider\n ? controller.textInput.value\n : (() => {\n const formData = new FormData(form);\n return (formData.get(\"message\") as string) || \"\";\n })();\n\n // Reset form immediately after capturing text to avoid race condition\n // where user input during async blob conversion would be lost\n if (!usingProvider) {\n form.reset();\n }\n\n // Convert blob URLs to data URLs asynchronously\n Promise.all(\n files.map(async ({ id, ...item }) => {\n if (item.url?.startsWith(\"blob:\")) {\n const dataUrl = await convertBlobUrlToDataUrl(item.url);\n // If conversion failed, keep the original blob URL\n return {\n ...item,\n url: dataUrl ?? item.url,\n };\n }\n return item;\n })\n )\n .then((convertedFiles: FileUIPart[]) => {\n try {\n const result = onSubmit({ text, files: convertedFiles }, event);\n\n // Handle both sync and async onSubmit\n if (result instanceof Promise) {\n result\n .then(() => {\n clear();\n if (usingProvider) {\n controller.textInput.clear();\n }\n })\n .catch(() => {\n // Don't clear on error - user may want to retry\n });\n } else {\n // Sync function completed without throwing, clear attachments\n clear();\n if (usingProvider) {\n controller.textInput.clear();\n }\n }\n } catch {\n // Don't clear on error - user may want to retry\n }\n })\n .catch(() => {\n // Don't clear on error - user may want to retry\n });\n };\n\n // Render with or without local provider\n const inner = (\n <>\n \n \n {children}\n \n \n );\n\n return usingProvider ? (\n inner\n ) : (\n \n {inner}\n \n );\n};\n\nexport type PromptInputBodyProps = HTMLAttributes;\n\nexport const PromptInputBody = ({\n className,\n ...props\n}: PromptInputBodyProps) => (\n
\n);\n\nexport type PromptInputTextareaProps = ComponentProps<\n typeof InputGroupTextarea\n>;\n\nexport const PromptInputTextarea = ({\n onChange,\n className,\n placeholder = \"What would you like to know?\",\n ...props\n}: PromptInputTextareaProps) => {\n const controller = useOptionalPromptInputController();\n const attachments = usePromptInputAttachments();\n const [isComposing, setIsComposing] = useState(false);\n\n const handleKeyDown: KeyboardEventHandler = (e) => {\n if (e.key === \"Enter\") {\n if (isComposing || e.nativeEvent.isComposing) {\n return;\n }\n if (e.shiftKey) {\n return;\n }\n e.preventDefault();\n\n // Check if the submit button is disabled before submitting\n const form = e.currentTarget.form;\n const submitButton = form?.querySelector(\n 'button[type=\"submit\"]'\n ) as HTMLButtonElement | null;\n if (submitButton?.disabled) {\n return;\n }\n\n form?.requestSubmit();\n }\n\n // Remove last attachment when Backspace is pressed and textarea is empty\n if (\n e.key === \"Backspace\" &&\n e.currentTarget.value === \"\" &&\n attachments.files.length > 0\n ) {\n e.preventDefault();\n const lastAttachment = attachments.files.at(-1);\n if (lastAttachment) {\n attachments.remove(lastAttachment.id);\n }\n }\n };\n\n const handlePaste: ClipboardEventHandler = (event) => {\n const items = event.clipboardData?.items;\n\n if (!items) {\n return;\n }\n\n const files: File[] = [];\n\n for (const item of items) {\n if (item.kind === \"file\") {\n const file = item.getAsFile();\n if (file) {\n files.push(file);\n }\n }\n }\n\n if (files.length > 0) {\n event.preventDefault();\n attachments.add(files);\n }\n };\n\n const controlledProps = controller\n ? {\n value: controller.textInput.value,\n onChange: (e: ChangeEvent) => {\n controller.textInput.setInput(e.currentTarget.value);\n onChange?.(e);\n },\n }\n : {\n onChange,\n };\n\n return (\n setIsComposing(false)}\n onCompositionStart={() => setIsComposing(true)}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder={placeholder}\n {...props}\n {...controlledProps}\n />\n );\n};\n\nexport type PromptInputHeaderProps = Omit<\n ComponentProps,\n \"align\"\n>;\n\nexport const PromptInputHeader = ({\n className,\n ...props\n}: PromptInputHeaderProps) => (\n \n);\n\nexport type PromptInputFooterProps = Omit<\n ComponentProps,\n \"align\"\n>;\n\nexport const PromptInputFooter = ({\n className,\n ...props\n}: PromptInputFooterProps) => (\n \n);\n\nexport type PromptInputToolsProps = HTMLAttributes;\n\nexport const PromptInputTools = ({\n className,\n ...props\n}: PromptInputToolsProps) => (\n
\n);\n\nexport type PromptInputButtonProps = ComponentProps;\n\nexport const PromptInputButton = ({\n variant = \"ghost\",\n className,\n size,\n ...props\n}: PromptInputButtonProps) => {\n const newSize =\n size ?? (Children.count(props.children) > 1 ? \"sm\" : \"icon-sm\");\n\n return (\n \n );\n};\n\nexport type PromptInputActionMenuProps = ComponentProps;\nexport const PromptInputActionMenu = (props: PromptInputActionMenuProps) => (\n \n);\n\nexport type PromptInputActionMenuTriggerProps = PromptInputButtonProps;\n\nexport const PromptInputActionMenuTrigger = ({\n className,\n children,\n ...props\n}: PromptInputActionMenuTriggerProps) => (\n \n \n {children ?? }\n \n \n);\n\nexport type PromptInputActionMenuContentProps = ComponentProps<\n typeof DropdownMenuContent\n>;\nexport const PromptInputActionMenuContent = ({\n className,\n ...props\n}: PromptInputActionMenuContentProps) => (\n \n);\n\nexport type PromptInputActionMenuItemProps = ComponentProps<\n typeof DropdownMenuItem\n>;\nexport const PromptInputActionMenuItem = ({\n className,\n ...props\n}: PromptInputActionMenuItemProps) => (\n \n);\n\n// Note: Actions that perform side-effects (like opening a file dialog)\n// are provided in opt-in modules (e.g., prompt-input-attachments).\n\nexport type PromptInputSubmitProps = ComponentProps & {\n status?: ChatStatus;\n};\n\nexport const PromptInputSubmit = ({\n className,\n variant = \"default\",\n size = \"icon-sm\",\n status,\n children,\n ...props\n}: PromptInputSubmitProps) => {\n let Icon = ;\n\n if (status === \"submitted\") {\n Icon = ;\n } else if (status === \"streaming\") {\n Icon = ;\n } else if (status === \"error\") {\n Icon = ;\n }\n\n return (\n \n {children ?? Icon}\n \n );\n};\n\ninterface SpeechRecognition extends EventTarget {\n continuous: boolean;\n interimResults: boolean;\n lang: string;\n start(): void;\n stop(): void;\n onstart: ((this: SpeechRecognition, ev: Event) => any) | null;\n onend: ((this: SpeechRecognition, ev: Event) => any) | null;\n onresult:\n | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any)\n | null;\n onerror:\n | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any)\n | null;\n}\n\ninterface SpeechRecognitionEvent extends Event {\n results: SpeechRecognitionResultList;\n resultIndex: number;\n}\n\ntype SpeechRecognitionResultList = {\n readonly length: number;\n item(index: number): SpeechRecognitionResult;\n [index: number]: SpeechRecognitionResult;\n};\n\ntype SpeechRecognitionResult = {\n readonly length: number;\n item(index: number): SpeechRecognitionAlternative;\n [index: number]: SpeechRecognitionAlternative;\n isFinal: boolean;\n};\n\ntype SpeechRecognitionAlternative = {\n transcript: string;\n confidence: number;\n};\n\ninterface SpeechRecognitionErrorEvent extends Event {\n error: string;\n}\n\ndeclare global {\n interface Window {\n SpeechRecognition: {\n new (): SpeechRecognition;\n };\n webkitSpeechRecognition: {\n new (): SpeechRecognition;\n };\n }\n}\n\nexport type PromptInputSpeechButtonProps = ComponentProps<\n typeof PromptInputButton\n> & {\n textareaRef?: RefObject;\n onTranscriptionChange?: (text: string) => void;\n};\n\nexport const PromptInputSpeechButton = ({\n className,\n textareaRef,\n onTranscriptionChange,\n ...props\n}: PromptInputSpeechButtonProps) => {\n const [isListening, setIsListening] = useState(false);\n const [recognition, setRecognition] = useState(\n null\n );\n const recognitionRef = useRef(null);\n\n useEffect(() => {\n if (\n typeof window !== \"undefined\" &&\n (\"SpeechRecognition\" in window || \"webkitSpeechRecognition\" in window)\n ) {\n const SpeechRecognitionCtor =\n window.SpeechRecognition || window.webkitSpeechRecognition;\n const speechRecognition = new SpeechRecognitionCtor();\n\n speechRecognition.continuous = true;\n speechRecognition.interimResults = true;\n speechRecognition.lang = \"en-US\";\n\n speechRecognition.onstart = () => {\n setIsListening(true);\n };\n\n speechRecognition.onend = () => {\n setIsListening(false);\n };\n\n speechRecognition.onresult = (event) => {\n let finalTranscript = \"\";\n\n for (let i = event.resultIndex; i < event.results.length; i++) {\n const result = event.results[i];\n if (result.isFinal) {\n finalTranscript += result[0]?.transcript ?? \"\";\n }\n }\n\n if (finalTranscript && textareaRef?.current) {\n const textarea = textareaRef.current;\n const currentValue = textarea.value;\n const newValue =\n currentValue + (currentValue ? \" \" : \"\") + finalTranscript;\n\n textarea.value = newValue;\n textarea.dispatchEvent(new Event(\"input\", { bubbles: true }));\n onTranscriptionChange?.(newValue);\n }\n };\n\n speechRecognition.onerror = (event) => {\n console.error(\"Speech recognition error:\", event.error);\n setIsListening(false);\n };\n\n recognitionRef.current = speechRecognition;\n setRecognition(speechRecognition);\n }\n\n return () => {\n if (recognitionRef.current) {\n recognitionRef.current.stop();\n }\n };\n }, [textareaRef, onTranscriptionChange]);\n\n const toggleListening = useCallback(() => {\n if (!recognition) {\n return;\n }\n\n if (isListening) {\n recognition.stop();\n } else {\n recognition.start();\n }\n }, [recognition, isListening]);\n\n return (\n \n \n \n );\n};\n\nexport type PromptInputSelectProps = ComponentProps;\n\nexport const PromptInputSelect = (props: PromptInputSelectProps) => (\n \n);\n\nexport type PromptInputModelSelectTriggerProps = ComponentProps<\n typeof SelectTrigger\n>;\n\nexport const PromptInputModelSelectTrigger = ({\n className,\n ...props\n}: PromptInputModelSelectTriggerProps) => (\n \n);\n\nexport type PromptInputModelSelectContentProps = ComponentProps<\n typeof SelectContent\n>;\n\nexport const PromptInputModelSelectContent = ({\n className,\n ...props\n}: PromptInputModelSelectContentProps) => (\n \n);\n\nexport type PromptInputModelSelectItemProps = ComponentProps;\n\nexport const PromptInputModelSelectItem = ({\n className,\n ...props\n}: PromptInputModelSelectItemProps) => (\n \n);\n\nexport type PromptInputModelSelectValueProps = ComponentProps<\n typeof SelectValue\n>;\n\nexport const PromptInputModelSelectValue = ({\n className,\n ...props\n}: PromptInputModelSelectValueProps) => (\n \n);\n" }, { "path": "components/elements/reasoning.tsx", "content": "\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { BrainIcon, ChevronDownIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, memo, useContext, useEffect, useState } from \"react\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\nimport { Response } from \"./response\";\n\ntype ReasoningContextValue = {\n isStreaming: boolean;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n duration: number;\n};\n\nconst ReasoningContext = createContext(null);\n\nconst useReasoning = () => {\n const context = useContext(ReasoningContext);\n if (!context) {\n throw new Error(\"Reasoning components must be used within Reasoning\");\n }\n return context;\n};\n\nexport type ReasoningProps = ComponentProps & {\n isStreaming?: boolean;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n duration?: number;\n};\n\nconst AUTO_CLOSE_DELAY = 500;\nconst MS_IN_S = 1000;\n\nexport const Reasoning = memo(\n ({\n className,\n isStreaming = false,\n open,\n defaultOpen = true,\n onOpenChange,\n duration: durationProp,\n children,\n ...props\n }: ReasoningProps) => {\n const [isOpen, setIsOpen] = useControllableState({\n prop: open,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n const [duration, setDuration] = useControllableState({\n prop: durationProp,\n defaultProp: 0,\n });\n\n const [hasAutoClosedRef, setHasAutoClosedRef] = useState(false);\n const [startTime, setStartTime] = useState(null);\n\n // Track duration when streaming starts and ends\n useEffect(() => {\n if (isStreaming) {\n if (startTime === null) {\n setStartTime(Date.now());\n }\n } else if (startTime !== null) {\n setDuration(Math.round((Date.now() - startTime) / MS_IN_S));\n setStartTime(null);\n }\n }, [isStreaming, startTime, setDuration]);\n\n // Auto-open when streaming starts, auto-close when streaming ends (once only)\n useEffect(() => {\n if (defaultOpen && !isStreaming && isOpen && !hasAutoClosedRef) {\n // Add a small delay before closing to allow user to see the content\n const timer = setTimeout(() => {\n setIsOpen(false);\n setHasAutoClosedRef(true);\n }, AUTO_CLOSE_DELAY);\n\n return () => clearTimeout(timer);\n }\n }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosedRef]);\n\n const handleOpenChange = (newOpen: boolean) => {\n setIsOpen(newOpen);\n };\n\n return (\n \n \n {children}\n \n \n );\n }\n);\n\nexport type ReasoningTriggerProps = ComponentProps;\n\nexport const ReasoningTrigger = memo(\n ({ className, children, ...props }: ReasoningTriggerProps) => {\n const { isStreaming, isOpen, duration } = useReasoning();\n\n return (\n \n {children ?? (\n <>\n \n {isStreaming || duration === 0 ? (\n Thinking\n ) : (\n {duration}s\n )}\n \n \n )}\n \n );\n }\n);\n\nexport type ReasoningContentProps = ComponentProps<\n typeof CollapsibleContent\n> & {\n children: string;\n};\n\nexport const ReasoningContent = memo(\n ({ className, children, ...props }: ReasoningContentProps) => (\n \n
\n \n {children}\n \n
\n \n )\n);\n\nReasoning.displayName = \"Reasoning\";\nReasoningTrigger.displayName = \"ReasoningTrigger\";\nReasoningContent.displayName = \"ReasoningContent\";\n" }, { "path": "components/elements/response.tsx", "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { Streamdown } from \"streamdown\";\nimport { cn } from \"@/lib/utils\";\n\ntype ResponseProps = ComponentProps;\n\nexport function Response({ className, children, ...props }: ResponseProps) {\n return (\n *:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:max-w-full [&_pre]:overflow-x-auto\",\n className\n )}\n {...props}\n >\n {children}\n \n );\n}\n" }, { "path": "components/elements/source.tsx", "content": "\"use client\";\n\nimport { BookIcon, ChevronDownIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SourcesProps = ComponentProps<\"div\">;\n\nexport const Sources = ({ className, ...props }: SourcesProps) => (\n \n);\n\nexport type SourcesTriggerProps = ComponentProps & {\n count: number;\n};\n\nexport const SourcesTrigger = ({\n className,\n count,\n children,\n ...props\n}: SourcesTriggerProps) => (\n \n {children ?? (\n <>\n

Used {count} sources

\n \n \n )}\n \n);\n\nexport type SourcesContentProps = ComponentProps;\n\nexport const SourcesContent = ({\n className,\n ...props\n}: SourcesContentProps) => (\n \n);\n\nexport type SourceProps = ComponentProps<\"a\">;\n\nexport const Source = ({ href, title, children, ...props }: SourceProps) => (\n \n {children ?? (\n <>\n \n {title}\n \n )}\n \n);\n" }, { "path": "components/elements/suggestion.tsx", "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SuggestionsProps = ComponentProps;\n\nexport const Suggestions = ({\n className,\n children,\n ...props\n}: SuggestionsProps) => (\n \n
\n {children}\n
\n \n \n);\n\nexport type SuggestionProps = Omit, \"onClick\"> & {\n suggestion: string;\n onClick?: (suggestion: string) => void;\n};\n\nexport const Suggestion = ({\n suggestion,\n onClick,\n className,\n variant = \"outline\",\n size = \"sm\",\n children,\n ...props\n}: SuggestionProps) => {\n const handleClick = () => {\n onClick?.(suggestion);\n };\n\n return (\n \n {children || suggestion}\n \n );\n};\n" }, { "path": "components/elements/task.tsx", "content": "\"use client\";\n\nimport { ChevronDownIcon, SearchIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TaskItemFileProps = ComponentProps<\"div\">;\n\nexport const TaskItemFile = ({\n children,\n className,\n ...props\n}: TaskItemFileProps) => (\n \n {children}\n
\n);\n\nexport type TaskItemProps = ComponentProps<\"div\">;\n\nexport const TaskItem = ({ children, className, ...props }: TaskItemProps) => (\n
\n {children}\n
\n);\n\nexport type TaskProps = ComponentProps;\n\nexport const Task = ({\n defaultOpen = true,\n className,\n ...props\n}: TaskProps) => (\n \n);\n\nexport type TaskTriggerProps = ComponentProps & {\n title: string;\n};\n\nexport const TaskTrigger = ({\n children,\n className,\n title,\n ...props\n}: TaskTriggerProps) => (\n \n {children ?? (\n
\n \n

{title}

\n \n
\n )}\n \n);\n\nexport type TaskContentProps = ComponentProps;\n\nexport const TaskContent = ({\n children,\n className,\n ...props\n}: TaskContentProps) => (\n \n
\n {children}\n
\n \n);\n" }, { "path": "components/elements/tool.tsx", "content": "\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\nimport {\n CheckCircleIcon,\n ChevronDownIcon,\n CircleIcon,\n ClockIcon,\n WrenchIcon,\n XCircleIcon,\n} from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ToolProps = ComponentProps;\n\nexport const Tool = ({ className, ...props }: ToolProps) => (\n \n);\n\nexport type ToolHeaderProps = {\n type: ToolUIPart[\"type\"];\n state: ToolUIPart[\"state\"];\n className?: string;\n};\n\nconst getStatusBadge = (status: ToolUIPart[\"state\"]) => {\n const labels: Record = {\n \"input-streaming\": \"Pending\",\n \"input-available\": \"Running\",\n \"approval-requested\": \"Pending\",\n \"approval-responded\": \"Approved\",\n \"output-available\": \"Completed\",\n \"output-error\": \"Error\",\n \"output-denied\": \"Denied\",\n };\n\n const icons: Record = {\n \"input-streaming\": ,\n \"input-available\": ,\n \"approval-requested\": ,\n \"approval-responded\": ,\n \"output-available\": ,\n \"output-error\": ,\n \"output-denied\": ,\n };\n\n return (\n \n {icons[status]}\n {labels[status]}\n \n );\n};\n\nexport const ToolHeader = ({\n className,\n type,\n state,\n ...props\n}: ToolHeaderProps) => (\n \n
\n \n {type}\n
\n
\n {getStatusBadge(state)}\n \n
\n \n);\n\nexport type ToolContentProps = ComponentProps;\n\nexport const ToolContent = ({ className, ...props }: ToolContentProps) => (\n \n);\n\nexport type ToolInputProps = ComponentProps<\"div\"> & {\n input: ToolUIPart[\"input\"];\n};\n\nexport const ToolInput = ({ className, input, ...props }: ToolInputProps) => (\n
\n

\n Parameters\n

\n 
\n      {JSON.stringify(input, null, 2)}\n
\n
\n);\n\nexport type ToolOutputProps = ComponentProps<\"div\"> & {\n output: ReactNode;\n errorText: ToolUIPart[\"errorText\"];\n};\n\nexport const ToolOutput = ({\n className,\n output,\n errorText,\n ...props\n}: ToolOutputProps) => {\n if (!(output || errorText)) {\n return null;\n }\n\n return (\n
\n

\n {errorText ? \"Error\" : \"Result\"}\n

\n \n {errorText &&
{errorText}
}\n {output &&
{output}
}\n
\n
\n );\n};\n" }, { "path": "components/elements/web-preview.tsx", "content": "\"use client\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { createContext, useContext, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport type WebPreviewContextValue = {\n url: string;\n setUrl: (url: string) => void;\n consoleOpen: boolean;\n setConsoleOpen: (open: boolean) => void;\n};\n\nconst WebPreviewContext = createContext(null);\n\nconst useWebPreview = () => {\n const context = useContext(WebPreviewContext);\n if (!context) {\n throw new Error(\"WebPreview components must be used within a WebPreview\");\n }\n return context;\n};\n\nexport type WebPreviewProps = ComponentProps<\"div\"> & {\n defaultUrl?: string;\n onUrlChange?: (url: string) => void;\n};\n\nexport const WebPreview = ({\n className,\n children,\n defaultUrl = \"\",\n onUrlChange,\n ...props\n}: WebPreviewProps) => {\n const [url, setUrl] = useState(defaultUrl);\n const [consoleOpen, setConsoleOpen] = useState(false);\n\n const handleUrlChange = (newUrl: string) => {\n setUrl(newUrl);\n onUrlChange?.(newUrl);\n };\n\n const contextValue: WebPreviewContextValue = {\n url,\n setUrl: handleUrlChange,\n consoleOpen,\n setConsoleOpen,\n };\n\n return (\n \n \n {children}\n \n \n );\n};\n\nexport type WebPreviewNavigationProps = ComponentProps<\"div\">;\n\nexport const WebPreviewNavigation = ({\n className,\n children,\n ...props\n}: WebPreviewNavigationProps) => (\n \n {children}\n \n);\n\nexport type WebPreviewNavigationButtonProps = ComponentProps & {\n tooltip?: string;\n};\n\nexport const WebPreviewNavigationButton = ({\n onClick,\n disabled,\n tooltip,\n children,\n ...props\n}: WebPreviewNavigationButtonProps) => (\n \n \n \n \n {children}\n \n \n \n

{tooltip}

\n \n \n \n);\n\nexport type WebPreviewUrlProps = ComponentProps;\n\nexport const WebPreviewUrl = ({\n value,\n onChange,\n onKeyDown,\n ...props\n}: WebPreviewUrlProps) => {\n const { url, setUrl } = useWebPreview();\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\") {\n const target = event.target as HTMLInputElement;\n setUrl(target.value);\n }\n onKeyDown?.(event);\n };\n\n return (\n \n );\n};\n\nexport type WebPreviewBodyProps = ComponentProps<\"iframe\"> & {\n loading?: ReactNode;\n};\n\nexport const WebPreviewBody = ({\n className,\n loading,\n src,\n ...props\n}: WebPreviewBodyProps) => {\n const { url } = useWebPreview();\n\n return (\n
\n \n {loading}\n
\n );\n};\n\nexport type WebPreviewConsoleProps = ComponentProps<\"div\"> & {\n logs?: Array<{\n level: \"log\" | \"warn\" | \"error\";\n message: string;\n timestamp: Date;\n }>;\n};\n\nexport const WebPreviewConsole = ({\n className,\n logs = [],\n children,\n ...props\n}: WebPreviewConsoleProps) => {\n const { consoleOpen, setConsoleOpen } = useWebPreview();\n\n return (\n \n \n \n Console\n \n \n \n \n
\n {logs.length === 0 ? (\n

No console output

\n ) : (\n logs.map((log) => (\n \n \n {log.timestamp.toLocaleTimeString()}\n {\" \"}\n {log.message}\n
\n ))\n )}\n {children}\n \n \n \n );\n};\n" }, { "path": "components/greeting.tsx", "content": "import { motion } from \"framer-motion\";\n\nexport const Greeting = () => {\n return (\n \n \n Hello there!\n \n \n How can I help you today?\n \n \n );\n};\n" }, { "path": "components/icons.tsx", "content": "export const BotIcon = () => {\n return (\n \n \n \n );\n};\n\nexport const UserIcon = () => {\n return (\n \n \n \n );\n};\n\nexport const AttachmentIcon = () => {\n return (\n \n \n \n );\n};\n\nexport const VercelIcon = ({ size = 17 }) => {\n return (\n \n \n \n );\n};\n\nexport const GitIcon = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport const BoxIcon = ({ size = 16 }: { size: number }) => {\n return (\n \n \n \n );\n};\n\nexport const HomeIcon = ({ size = 16 }: { size: number }) => {\n return (\n \n \n \n );\n};\n\nexport const GPSIcon = ({ size = 16 }: { size: number }) => {\n return (\n \n \n \n );\n};\n\nexport const InvoiceIcon = ({ size = 16 }: { size: number }) => {\n return (\n \n \n \n );\n};\n\nexport const LogoOpenAI = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const LogoGoogle = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n \n \n \n );\n};\n\nexport const LogoAnthropic = () => {\n return (\n \n \n \n );\n};\n\nexport const RouteIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const FileIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const LoaderIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport const UploadIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const MenuIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const PencilEditIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const CheckedSquare = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const UncheckedSquare = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const MoreIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const TrashIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const InfoIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const ArrowUpIcon = ({\n size = 16,\n ...props\n}: { size?: number } & React.SVGProps) => {\n return (\n \n \n \n );\n};\n\nexport const StopIcon = ({\n size = 16,\n ...props\n}: { size?: number } & React.SVGProps) => {\n return (\n \n \n \n );\n};\n\nexport const PaperclipIcon = ({\n size = 16,\n ...props\n}: { size?: number } & React.SVGProps) => {\n return (\n \n \n \n );\n};\n\nexport const MoreHorizontalIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const MessageIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const CrossIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const CrossSmallIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const UndoIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const RedoIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const DeltaIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const CpuIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport const PenIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const SummarizeIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const SidebarLeftIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const PlusIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const CopyIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const ThumbUpIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const ThumbDownIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const ChevronDownIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const SparklesIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n \n \n);\n\nexport const CheckCircleFillIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const GlobeIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const LockIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const EyeIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const ShareIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const CodeIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const PlayIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const PythonIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n \n );\n};\n\nexport const TerminalWindowIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const TerminalIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const ClockRewind = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const LogsIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const ImageIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n\nexport const FullscreenIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const DownloadIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const LineChartIcon = ({ size = 16 }: { size?: number }) => (\n \n \n \n);\n\nexport const WarningIcon = ({ size = 16 }: { size?: number }) => {\n return (\n \n \n \n );\n};\n" }, { "path": "components/image-editor.tsx", "content": "import cn from \"classnames\";\nimport { LoaderIcon } from \"./icons\";\n\ntype ImageEditorProps = {\n title: string;\n content: string;\n isCurrentVersion: boolean;\n currentVersionIndex: number;\n status: string;\n isInline: boolean;\n};\n\nexport function ImageEditor({\n title,\n content,\n status,\n isInline,\n}: ImageEditorProps) {\n return (\n \n {status === \"streaming\" ? (\n
\n {!isInline && (\n
\n \n
\n )}\n
Generating Image...
\n
\n ) : (\n \n \n \n )}\n \n );\n}\n" }, { "path": "components/message-actions.tsx", "content": "import equal from \"fast-deep-equal\";\nimport { memo } from \"react\";\nimport { toast } from \"sonner\";\nimport { useSWRConfig } from \"swr\";\nimport { useCopyToClipboard } from \"usehooks-ts\";\nimport type { Vote } from \"@/lib/db/schema\";\nimport type { ChatMessage } from \"@/lib/types\";\nimport { Action, Actions } from \"./elements/actions\";\nimport { CopyIcon, PencilEditIcon, ThumbDownIcon, ThumbUpIcon } from \"./icons\";\n\nexport function PureMessageActions({\n chatId,\n message,\n vote,\n isLoading,\n setMode,\n}: {\n chatId: string;\n message: ChatMessage;\n vote: Vote | undefined;\n isLoading: boolean;\n setMode?: (mode: \"view\" | \"edit\") => void;\n}) {\n const { mutate } = useSWRConfig();\n const [_, copyToClipboard] = useCopyToClipboard();\n\n if (isLoading) {\n return null;\n }\n\n const textFromParts = message.parts\n ?.filter((part) => part.type === \"text\")\n .map((part) => part.text)\n .join(\"\\n\")\n .trim();\n\n const handleCopy = async () => {\n if (!textFromParts) {\n toast.error(\"There's no text to copy!\");\n return;\n }\n\n await copyToClipboard(textFromParts);\n toast.success(\"Copied to clipboard!\");\n };\n\n // User messages get edit (on hover) and copy actions\n if (message.role === \"user\") {\n return (\n \n
\n {setMode && (\n setMode(\"edit\")}\n tooltip=\"Edit\"\n >\n \n \n )}\n \n \n \n
\n \n );\n }\n\n return (\n \n \n \n \n\n {\n const upvote = fetch(\"/api/vote\", {\n method: \"PATCH\",\n body: JSON.stringify({\n chatId,\n messageId: message.id,\n type: \"up\",\n }),\n });\n\n toast.promise(upvote, {\n loading: \"Upvoting Response...\",\n success: () => {\n mutate(\n `/api/vote?chatId=${chatId}`,\n (currentVotes) => {\n if (!currentVotes) {\n return [];\n }\n\n const votesWithoutCurrent = currentVotes.filter(\n (currentVote) => currentVote.messageId !== message.id\n );\n\n return [\n ...votesWithoutCurrent,\n {\n chatId,\n messageId: message.id,\n isUpvoted: true,\n },\n ];\n },\n { revalidate: false }\n );\n\n return \"Upvoted Response!\";\n },\n error: \"Failed to upvote response.\",\n });\n }}\n tooltip=\"Upvote Response\"\n >\n \n \n\n {\n const downvote = fetch(\"/api/vote\", {\n method: \"PATCH\",\n body: JSON.stringify({\n chatId,\n messageId: message.id,\n type: \"down\",\n }),\n });\n\n toast.promise(downvote, {\n loading: \"Downvoting Response...\",\n success: () => {\n mutate(\n `/api/vote?chatId=${chatId}`,\n (currentVotes) => {\n if (!currentVotes) {\n return [];\n }\n\n const votesWithoutCurrent = currentVotes.filter(\n (currentVote) => currentVote.messageId !== message.id\n );\n\n return [\n ...votesWithoutCurrent,\n {\n chatId,\n messageId: message.id,\n isUpvoted: false,\n },\n ];\n },\n { revalidate: false }\n );\n\n return \"Downvoted Response!\";\n },\n error: \"Failed to downvote response.\",\n });\n }}\n tooltip=\"Downvote Response\"\n >\n \n \n \n );\n}\n\nexport const MessageActions = memo(\n PureMessageActions,\n (prevProps, nextProps) => {\n if (!equal(prevProps.vote, nextProps.vote)) {\n return false;\n }\n if (prevProps.isLoading !== nextProps.isLoading) {\n return false;\n }\n\n return true;\n }\n);\n" }, { "path": "components/message-editor.tsx", "content": "\"use client\";\n\nimport type { UseChatHelpers } from \"@ai-sdk/react\";\nimport {\n type Dispatch,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { deleteTrailingMessages } from \"@/app/(chat)/actions\";\nimport type { ChatMessage } from \"@/lib/types\";\nimport { getTextFromMessage } from \"@/lib/utils\";\nimport { Button } from \"./ui/button\";\nimport { Textarea } from \"./ui/textarea\";\n\nexport type MessageEditorProps = {\n message: ChatMessage;\n setMode: Dispatch>;\n setMessages: UseChatHelpers[\"setMessages\"];\n regenerate: UseChatHelpers[\"regenerate\"];\n};\n\nexport function MessageEditor({\n message,\n setMode,\n setMessages,\n regenerate,\n}: MessageEditorProps) {\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const [draftContent, setDraftContent] = useState(\n getTextFromMessage(message)\n );\n const textareaRef = useRef(null);\n\n const adjustHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight + 2}px`;\n }\n }, []);\n\n useEffect(() => {\n if (textareaRef.current) {\n adjustHeight();\n }\n }, [adjustHeight]);\n\n const handleInput = (event: React.ChangeEvent) => {\n setDraftContent(event.target.value);\n adjustHeight();\n };\n\n return (\n
\n \n\n
\n {\n setMode(\"view\");\n }}\n variant=\"outline\"\n >\n Cancel\n \n {\n setIsSubmitting(true);\n\n await deleteTrailingMessages({\n id: message.id,\n });\n\n setMessages((messages) => {\n const index = messages.findIndex((m) => m.id === message.id);\n\n if (index !== -1) {\n const updatedMessage: ChatMessage = {\n ...message,\n parts: [{ type: \"text\", text: draftContent }],\n };\n\n return [...messages.slice(0, index), updatedMessage];\n }\n\n return messages;\n });\n\n setMode(\"view\");\n regenerate();\n }}\n variant=\"default\"\n >\n {isSubmitting ? \"Sending...\" : \"Send\"}\n \n
\n
\n );\n}\n" }, { "path": "components/message-reasoning.tsx", "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport {\n Reasoning,\n ReasoningContent,\n ReasoningTrigger,\n} from \"./elements/reasoning\";\n\ntype MessageReasoningProps = {\n isLoading: boolean;\n reasoning: string;\n};\n\nexport function MessageReasoning({\n isLoading,\n reasoning,\n}: MessageReasoningProps) {\n const [hasBeenStreaming, setHasBeenStreaming] = useState(isLoading);\n\n useEffect(() => {\n if (isLoading) {\n setHasBeenStreaming(true);\n }\n }, [isLoading]);\n\n return (\n \n \n {reasoning}\n \n );\n}\n" }, { "path": "components/message.tsx", "content": "\"use client\";\nimport type { UseChatHelpers } from \"@ai-sdk/react\";\nimport { useState } from \"react\";\nimport type { Vote } from \"@/lib/db/schema\";\nimport type { ChatMessage } from \"@/lib/types\";\nimport { cn, sanitizeText } from \"@/lib/utils\";\nimport { useDataStream } from \"./data-stream-provider\";\nimport { DocumentToolResult } from \"./document\";\nimport { DocumentPreview } from \"./document-preview\";\nimport { MessageContent } from \"./elements/message\";\nimport { Response } from \"./elements/response\";\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from \"./elements/tool\";\nimport { SparklesIcon } from \"./icons\";\nimport { MessageActions } from \"./message-actions\";\nimport { MessageEditor } from \"./message-editor\";\nimport { MessageReasoning } from \"./message-reasoning\";\nimport { PreviewAttachment } from \"./preview-attachment\";\nimport { Weather } from \"./weather\";\n\nconst PurePreviewMessage = ({\n addToolApprovalResponse,\n chatId,\n message,\n vote,\n isLoading,\n setMessages,\n regenerate,\n isReadonly,\n requiresScrollPadding: _requiresScrollPadding,\n}: {\n addToolApprovalResponse: UseChatHelpers[\"addToolApprovalResponse\"];\n chatId: string;\n message: ChatMessage;\n vote: Vote | undefined;\n isLoading: boolean;\n setMessages: UseChatHelpers[\"setMessages\"];\n regenerate: UseChatHelpers[\"regenerate\"];\n isReadonly: boolean;\n requiresScrollPadding: boolean;\n}) => {\n const [mode, setMode] = useState<\"view\" | \"edit\">(\"view\");\n\n const attachmentsFromMessage = message.parts.filter(\n (part) => part.type === \"file\"\n );\n\n useDataStream();\n\n return (\n \n \n {message.role === \"assistant\" && (\n
\n \n
\n )}\n\n p.type === \"text\" && p.text?.trim()\n ),\n \"w-full\":\n (message.role === \"assistant\" &&\n (message.parts?.some(\n (p) => p.type === \"text\" && p.text?.trim()\n ) ||\n message.parts?.some((p) => p.type.startsWith(\"tool-\")))) ||\n mode === \"edit\",\n \"max-w-[calc(100%-2.5rem)] sm:max-w-[min(fit-content,80%)]\":\n message.role === \"user\" && mode !== \"edit\",\n })}\n >\n {attachmentsFromMessage.length > 0 && (\n \n {attachmentsFromMessage.map((attachment) => (\n \n ))}\n \n )}\n\n {message.parts?.map((part, index) => {\n const { type } = part;\n const key = `message-${message.id}-part-${index}`;\n\n if (type === \"reasoning\") {\n const hasContent = part.text?.trim().length > 0;\n if (hasContent) {\n const isStreaming =\n \"state\" in part && part.state === \"streaming\";\n return (\n \n );\n }\n }\n\n if (type === \"text\") {\n if (mode === \"view\") {\n return (\n
\n \n {sanitizeText(part.text)}\n \n
\n );\n }\n\n if (mode === \"edit\") {\n return (\n \n
\n
\n \n
\n
\n );\n }\n }\n\n if (type === \"tool-getWeather\") {\n const { toolCallId, state } = part;\n const approvalId = (part as { approval?: { id: string } })\n .approval?.id;\n const isDenied =\n state === \"output-denied\" ||\n (state === \"approval-responded\" &&\n (part as { approval?: { approved?: boolean } }).approval\n ?.approved === false);\n const widthClass = \"w-[min(100%,450px)]\";\n\n if (state === \"output-available\") {\n return (\n
\n \n
\n );\n }\n\n if (isDenied) {\n return (\n
\n \n \n \n
\n Weather lookup was denied.\n
\n \n \n
\n );\n }\n\n if (state === \"approval-responded\") {\n return (\n
\n \n \n \n \n \n \n
\n );\n }\n\n return (\n
\n \n \n \n {(state === \"input-available\" ||\n state === \"approval-requested\") && (\n \n )}\n {state === \"approval-requested\" && approvalId && (\n
\n {\n addToolApprovalResponse({\n id: approvalId,\n approved: false,\n reason: \"User denied weather lookup\",\n });\n }}\n type=\"button\"\n >\n Deny\n \n {\n addToolApprovalResponse({\n id: approvalId,\n approved: true,\n });\n }}\n type=\"button\"\n >\n Allow\n \n
\n )}\n \n \n
\n );\n }\n\n if (type === \"tool-createDocument\") {\n const { toolCallId } = part;\n\n if (part.output && \"error\" in part.output) {\n return (\n \n Error creating document: {String(part.output.error)}\n \n );\n }\n\n return (\n \n );\n }\n\n if (type === \"tool-updateDocument\") {\n const { toolCallId } = part;\n\n if (part.output && \"error\" in part.output) {\n return (\n \n Error updating document: {String(part.output.error)}\n \n );\n }\n\n return (\n
\n \n
\n );\n }\n\n if (type === \"tool-requestSuggestions\") {\n const { toolCallId, state } = part;\n\n return (\n \n \n \n {state === \"input-available\" && (\n \n )}\n {state === \"output-available\" && (\n \n Error: {String(part.output.error)}\n \n ) : (\n \n )\n }\n />\n )}\n \n \n );\n }\n\n return null;\n })}\n\n {!isReadonly && (\n \n )}\n \n \n \n );\n};\n\nexport const PreviewMessage = PurePreviewMessage;\n\nexport const ThinkingMessage = () => {\n return (\n \n
\n
\n
\n \n
\n
\n\n
\n
\n Thinking\n \n .\n .\n .\n \n
\n
\n
\n \n );\n};\n" }, { "path": "components/messages.tsx", "content": "import type { UseChatHelpers } from \"@ai-sdk/react\";\nimport { ArrowDownIcon } from \"lucide-react\";\nimport { useMessages } from \"@/hooks/use-messages\";\nimport type { Vote } from \"@/lib/db/schema\";\nimport type { ChatMessage } from \"@/lib/types\";\nimport { useDataStream } from \"./data-stream-provider\";\nimport { Greeting } from \"./greeting\";\nimport { PreviewMessage, ThinkingMessage } from \"./message\";\n\ntype MessagesProps = {\n addToolApprovalResponse: UseChatHelpers[\"addToolApprovalResponse\"];\n chatId: string;\n status: UseChatHelpers[\"status\"];\n votes: Vote[] | undefined;\n messages: ChatMessage[];\n setMessages: UseChatHelpers[\"setMessages\"];\n regenerate: UseChatHelpers[\"regenerate\"];\n isReadonly: boolean;\n isArtifactVisible: boolean;\n selectedModelId: string;\n};\n\nfunction PureMessages({\n addToolApprovalResponse,\n chatId,\n status,\n votes,\n messages,\n setMessages,\n regenerate,\n isReadonly,\n selectedModelId: _selectedModelId,\n}: MessagesProps) {\n const {\n containerRef: messagesContainerRef,\n endRef: messagesEndRef,\n isAtBottom,\n scrollToBottom,\n hasSentMessage,\n } = useMessages({\n status,\n });\n\n useDataStream();\n\n return (\n
\n \n
\n {messages.length === 0 && }\n\n {messages.map((message, index) => (\n vote.messageId === message.id)\n : undefined\n }\n />\n ))}\n\n {status === \"submitted\" &&\n !messages.some((msg) =>\n msg.parts?.some(\n (part) => \"state\" in part && part.state === \"approval-responded\"\n )\n ) && }\n\n \n
\n
\n\n scrollToBottom(\"smooth\")}\n type=\"button\"\n >\n \n \n \n );\n}\n\nexport const Messages = PureMessages;\n" }, { "path": "components/multimodal-input.tsx", "content": "\"use client\";\n\nimport type { UseChatHelpers } from \"@ai-sdk/react\";\nimport type { UIMessage } from \"ai\";\nimport equal from \"fast-deep-equal\";\nimport { CheckIcon } from \"lucide-react\";\nimport {\n type ChangeEvent,\n type Dispatch,\n memo,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { toast } from \"sonner\";\nimport { useLocalStorage, useWindowSize } from \"usehooks-ts\";\nimport {\n ModelSelector,\n ModelSelectorContent,\n ModelSelectorGroup,\n ModelSelectorInput,\n ModelSelectorItem,\n ModelSelectorList,\n ModelSelectorLogo,\n ModelSelectorName,\n ModelSelectorTrigger,\n} from \"@/components/ai-elements/model-selector\";\nimport {\n chatModels,\n DEFAULT_CHAT_MODEL,\n modelsByProvider,\n} from \"@/lib/ai/models\";\nimport type { Attachment, ChatMessage } from \"@/lib/types\";\nimport { cn } from \"@/lib/utils\";\nimport {\n PromptInput,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputToolbar,\n PromptInputTools,\n} from \"./elements/prompt-input\";\nimport { ArrowUpIcon, PaperclipIcon, StopIcon } from \"./icons\";\nimport { PreviewAttachment } from \"./preview-attachment\";\nimport { SuggestedActions } from \"./suggested-actions\";\nimport { Button } from \"./ui/button\";\nimport type { VisibilityType } from \"./visibility-selector\";\n\nfunction setCookie(name: string, value: string) {\n const maxAge = 60 * 60 * 24 * 365; // 1 year\n // biome-ignore lint/suspicious/noDocumentCookie: needed for client-side cookie setting\n document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAge}`;\n}\n\nfunction PureMultimodalInput({\n chatId,\n input,\n setInput,\n status,\n stop,\n attachments,\n setAttachments,\n messages,\n setMessages,\n sendMessage,\n className,\n selectedVisibilityType,\n selectedModelId,\n onModelChange,\n}: {\n chatId: string;\n input: string;\n setInput: Dispatch>;\n status: UseChatHelpers[\"status\"];\n stop: () => void;\n attachments: Attachment[];\n setAttachments: Dispatch>;\n messages: UIMessage[];\n setMessages: UseChatHelpers[\"setMessages\"];\n sendMessage: UseChatHelpers[\"sendMessage\"];\n className?: string;\n selectedVisibilityType: VisibilityType;\n selectedModelId: string;\n onModelChange?: (modelId: string) => void;\n}) {\n const textareaRef = useRef(null);\n const { width } = useWindowSize();\n\n const adjustHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = \"44px\";\n }\n }, []);\n\n useEffect(() => {\n if (textareaRef.current) {\n adjustHeight();\n }\n }, [adjustHeight]);\n\n const hasAutoFocused = useRef(false);\n useEffect(() => {\n if (!hasAutoFocused.current && width) {\n const timer = setTimeout(() => {\n textareaRef.current?.focus();\n hasAutoFocused.current = true;\n }, 100);\n return () => clearTimeout(timer);\n }\n }, [width]);\n\n const resetHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = \"44px\";\n }\n }, []);\n\n const [localStorageInput, setLocalStorageInput] = useLocalStorage(\n \"input\",\n \"\"\n );\n\n useEffect(() => {\n if (textareaRef.current) {\n const domValue = textareaRef.current.value;\n // Prefer DOM value over localStorage to handle hydration\n const finalValue = domValue || localStorageInput || \"\";\n setInput(finalValue);\n adjustHeight();\n }\n // Only run once after hydration\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [adjustHeight, localStorageInput, setInput]);\n\n useEffect(() => {\n setLocalStorageInput(input);\n }, [input, setLocalStorageInput]);\n\n const handleInput = (event: React.ChangeEvent) => {\n setInput(event.target.value);\n };\n\n const fileInputRef = useRef(null);\n const [uploadQueue, setUploadQueue] = useState([]);\n\n const submitForm = useCallback(() => {\n window.history.pushState({}, \"\", `/chat/${chatId}`);\n\n sendMessage({\n role: \"user\",\n parts: [\n ...attachments.map((attachment) => ({\n type: \"file\" as const,\n url: attachment.url,\n name: attachment.name,\n mediaType: attachment.contentType,\n })),\n {\n type: \"text\",\n text: input,\n },\n ],\n });\n\n setAttachments([]);\n setLocalStorageInput(\"\");\n resetHeight();\n setInput(\"\");\n\n if (width && width > 768) {\n textareaRef.current?.focus();\n }\n }, [\n input,\n setInput,\n attachments,\n sendMessage,\n setAttachments,\n setLocalStorageInput,\n width,\n chatId,\n resetHeight,\n ]);\n\n const uploadFile = useCallback(async (file: File) => {\n const formData = new FormData();\n formData.append(\"file\", file);\n\n try {\n const response = await fetch(\"/api/files/upload\", {\n method: \"POST\",\n body: formData,\n });\n\n if (response.ok) {\n const data = await response.json();\n const { url, pathname, contentType } = data;\n\n return {\n url,\n name: pathname,\n contentType,\n };\n }\n const { error } = await response.json();\n toast.error(error);\n } catch (_error) {\n toast.error(\"Failed to upload file, please try again!\");\n }\n }, []);\n\n const handleFileChange = useCallback(\n async (event: ChangeEvent) => {\n const files = Array.from(event.target.files || []);\n\n setUploadQueue(files.map((file) => file.name));\n\n try {\n const uploadPromises = files.map((file) => uploadFile(file));\n const uploadedAttachments = await Promise.all(uploadPromises);\n const successfullyUploadedAttachments = uploadedAttachments.filter(\n (attachment) => attachment !== undefined\n );\n\n setAttachments((currentAttachments) => [\n ...currentAttachments,\n ...successfullyUploadedAttachments,\n ]);\n } catch (error) {\n console.error(\"Error uploading files!\", error);\n } finally {\n setUploadQueue([]);\n }\n },\n [setAttachments, uploadFile]\n );\n\n const handlePaste = useCallback(\n async (event: ClipboardEvent) => {\n const items = event.clipboardData?.items;\n if (!items) {\n return;\n }\n\n const imageItems = Array.from(items).filter((item) =>\n item.type.startsWith(\"image/\")\n );\n\n if (imageItems.length === 0) {\n return;\n }\n\n // Prevent default paste behavior for images\n event.preventDefault();\n\n setUploadQueue((prev) => [...prev, \"Pasted image\"]);\n\n try {\n const uploadPromises = imageItems\n .map((item) => item.getAsFile())\n .filter((file): file is File => file !== null)\n .map((file) => uploadFile(file));\n\n const uploadedAttachments = await Promise.all(uploadPromises);\n const successfullyUploadedAttachments = uploadedAttachments.filter(\n (attachment) =>\n attachment !== undefined &&\n attachment.url !== undefined &&\n attachment.contentType !== undefined\n );\n\n setAttachments((curr) => [\n ...curr,\n ...(successfullyUploadedAttachments as Attachment[]),\n ]);\n } catch (error) {\n console.error(\"Error uploading pasted images:\", error);\n toast.error(\"Failed to upload pasted image(s)\");\n } finally {\n setUploadQueue([]);\n }\n },\n [setAttachments, uploadFile]\n );\n\n // Add paste event listener to textarea\n useEffect(() => {\n const textarea = textareaRef.current;\n if (!textarea) {\n return;\n }\n\n textarea.addEventListener(\"paste\", handlePaste);\n return () => textarea.removeEventListener(\"paste\", handlePaste);\n }, [handlePaste]);\n\n return (\n
\n {messages.length === 0 &&\n attachments.length === 0 &&\n uploadQueue.length === 0 && (\n \n )}\n\n \n\n {\n event.preventDefault();\n if (!input.trim() && attachments.length === 0) {\n return;\n }\n if (status === \"ready\") {\n submitForm();\n } else {\n toast.error(\"Please wait for the model to finish its response!\");\n }\n }}\n >\n {(attachments.length > 0 || uploadQueue.length > 0) && (\n \n {attachments.map((attachment) => (\n {\n setAttachments((currentAttachments) =>\n currentAttachments.filter((a) => a.url !== attachment.url)\n );\n if (fileInputRef.current) {\n fileInputRef.current.value = \"\";\n }\n }}\n />\n ))}\n\n {uploadQueue.map((filename) => (\n \n ))}\n
\n )}\n
\n \n
\n \n \n \n \n \n\n {status === \"submitted\" ? (\n \n ) : (\n 0}\n status={status}\n >\n \n \n )}\n \n \n \n );\n}\n\nexport const MultimodalInput = memo(\n PureMultimodalInput,\n (prevProps, nextProps) => {\n if (prevProps.input !== nextProps.input) {\n return false;\n }\n if (prevProps.status !== nextProps.status) {\n return false;\n }\n if (!equal(prevProps.attachments, nextProps.attachments)) {\n return false;\n }\n if (prevProps.selectedVisibilityType !== nextProps.selectedVisibilityType) {\n return false;\n }\n if (prevProps.selectedModelId !== nextProps.selectedModelId) {\n return false;\n }\n\n return true;\n }\n);\n\nfunction PureAttachmentsButton({\n fileInputRef,\n status,\n selectedModelId,\n}: {\n fileInputRef: React.MutableRefObject;\n status: UseChatHelpers[\"status\"];\n selectedModelId: string;\n}) {\n const isReasoningModel =\n selectedModelId.includes(\"reasoning\") || selectedModelId.includes(\"think\");\n\n return (\n {\n event.preventDefault();\n fileInputRef.current?.click();\n }}\n variant=\"ghost\"\n >\n \n \n );\n}\n\nconst AttachmentsButton = memo(PureAttachmentsButton);\n\nfunction PureModelSelectorCompact({\n selectedModelId,\n onModelChange,\n}: {\n selectedModelId: string;\n onModelChange?: (modelId: string) => void;\n}) {\n const [open, setOpen] = useState(false);\n\n const selectedModel =\n chatModels.find((m) => m.id === selectedModelId) ??\n chatModels.find((m) => m.id === DEFAULT_CHAT_MODEL) ??\n chatModels[0];\n const [provider] = selectedModel.id.split(\"/\");\n\n // Provider display names\n const providerNames: Record = {\n anthropic: \"Anthropic\",\n openai: \"OpenAI\",\n google: \"Google\",\n xai: \"xAI\",\n reasoning: \"Reasoning\",\n };\n\n return (\n \n \n \n \n \n \n \n {Object.entries(modelsByProvider).map(\n ([providerKey, providerModels]) => (\n \n {providerModels.map((model) => {\n const logoProvider = model.id.split(\"/\")[0];\n return (\n {\n onModelChange?.(model.id);\n setCookie(\"chat-model\", model.id);\n setOpen(false);\n }}\n value={model.id}\n >\n \n {model.name}\n {model.id === selectedModel.id && (\n \n )}\n \n );\n })}\n \n )\n )}\n \n \n \n );\n}\n\nconst ModelSelectorCompact = memo(PureModelSelectorCompact);\n\nfunction PureStopButton({\n stop,\n setMessages,\n}: {\n stop: () => void;\n setMessages: UseChatHelpers[\"setMessages\"];\n}) {\n return (\n {\n event.preventDefault();\n stop();\n setMessages((messages) => messages);\n }}\n >\n \n \n );\n}\n\nconst StopButton = memo(PureStopButton);\n" }, { "path": "components/preview-attachment.tsx", "content": "import Image from \"next/image\";\nimport type { Attachment } from \"@/lib/types\";\nimport { Loader } from \"./elements/loader\";\nimport { CrossSmallIcon } from \"./icons\";\nimport { Button } from \"./ui/button\";\n\nexport const PreviewAttachment = ({\n attachment,\n isUploading = false,\n onRemove,\n}: {\n attachment: Attachment;\n isUploading?: boolean;\n onRemove?: () => void;\n}) => {\n const { name, url, contentType } = attachment;\n\n return (\n \n {contentType?.startsWith(\"image\") ? (\n \n ) : (\n
\n File\n
\n )}\n\n {isUploading && (\n \n \n \n )}\n\n {onRemove && !isUploading && (\n \n \n \n )}\n\n
\n {name}\n
\n \n );\n};\n" }, { "path": "components/sheet-editor.tsx", "content": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { parse, unparse } from \"papaparse\";\nimport { memo, useEffect, useMemo, useState } from \"react\";\nimport DataGrid, { textEditor } from \"react-data-grid\";\nimport { cn } from \"@/lib/utils\";\n\nimport \"react-data-grid/lib/styles.css\";\n\ntype SheetEditorProps = {\n content: string;\n saveContent: (content: string, isCurrentVersion: boolean) => void;\n currentVersionIndex: number;\n isCurrentVersion: boolean;\n status: string;\n};\n\nconst MIN_ROWS = 50;\nconst MIN_COLS = 26;\n\nconst PureSpreadsheetEditor = ({ content, saveContent }: SheetEditorProps) => {\n const { resolvedTheme } = useTheme();\n\n const parseData = useMemo(() => {\n if (!content) {\n return new Array(MIN_ROWS).fill(new Array(MIN_COLS).fill(\"\"));\n }\n const result = parse(content, { skipEmptyLines: true });\n\n const paddedData = result.data.map((row) => {\n const paddedRow = [...row];\n while (paddedRow.length < MIN_COLS) {\n paddedRow.push(\"\");\n }\n return paddedRow;\n });\n\n while (paddedData.length < MIN_ROWS) {\n paddedData.push(new Array(MIN_COLS).fill(\"\"));\n }\n\n return paddedData;\n }, [content]);\n\n const columns = useMemo(() => {\n const rowNumberColumn = {\n key: \"rowNumber\",\n name: \"\",\n frozen: true,\n width: 50,\n renderCell: ({ rowIdx }: { rowIdx: number }) => rowIdx + 1,\n cellClass: \"border-t border-r dark:bg-zinc-950 dark:text-zinc-50\",\n headerCellClass: \"border-t border-r dark:bg-zinc-900 dark:text-zinc-50\",\n };\n\n const dataColumns = Array.from({ length: MIN_COLS }, (_, i) => ({\n key: i.toString(),\n name: String.fromCharCode(65 + i),\n renderEditCell: textEditor,\n width: 120,\n cellClass: cn(\"border-t dark:bg-zinc-950 dark:text-zinc-50\", {\n \"border-l\": i !== 0,\n }),\n headerCellClass: cn(\"border-t dark:bg-zinc-900 dark:text-zinc-50\", {\n \"border-l\": i !== 0,\n }),\n }));\n\n return [rowNumberColumn, ...dataColumns];\n }, []);\n\n const initialRows = useMemo(() => {\n return parseData.map((row, rowIndex) => {\n const rowData: any = {\n id: rowIndex,\n rowNumber: rowIndex + 1,\n };\n\n columns.slice(1).forEach((col, colIndex) => {\n rowData[col.key] = row[colIndex] || \"\";\n });\n\n return rowData;\n });\n }, [parseData, columns]);\n\n const [localRows, setLocalRows] = useState(initialRows);\n\n useEffect(() => {\n setLocalRows(initialRows);\n }, [initialRows]);\n\n const generateCsv = (data: any[][]) => {\n return unparse(data);\n };\n\n const handleRowsChange = (newRows: any[]) => {\n setLocalRows(newRows);\n\n const updatedData = newRows.map((row) => {\n return columns.slice(1).map((col) => row[col.key] || \"\");\n });\n\n const newCsvContent = generateCsv(updatedData);\n saveContent(newCsvContent, true);\n };\n\n return (\n {\n if (args.column.key !== \"rowNumber\") {\n args.selectCell(true);\n }\n }}\n onRowsChange={handleRowsChange}\n rows={localRows}\n style={{ height: \"100%\" }}\n />\n );\n};\n\nfunction areEqual(prevProps: SheetEditorProps, nextProps: SheetEditorProps) {\n return (\n prevProps.currentVersionIndex === nextProps.currentVersionIndex &&\n prevProps.isCurrentVersion === nextProps.isCurrentVersion &&\n !(prevProps.status === \"streaming\" && nextProps.status === \"streaming\") &&\n prevProps.content === nextProps.content &&\n prevProps.saveContent === nextProps.saveContent\n );\n}\n\nexport const SpreadsheetEditor = memo(PureSpreadsheetEditor, areEqual);\n" }, { "path": "components/sidebar-history-item.tsx", "content": "import Link from \"next/link\";\nimport { memo } from \"react\";\nimport { useChatVisibility } from \"@/hooks/use-chat-visibility\";\nimport type { Chat } from \"@/lib/db/schema\";\nimport {\n CheckCircleFillIcon,\n GlobeIcon,\n LockIcon,\n MoreHorizontalIcon,\n ShareIcon,\n TrashIcon,\n} from \"./icons\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"./ui/dropdown-menu\";\nimport {\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"./ui/sidebar\";\n\nconst PureChatItem = ({\n chat,\n isActive,\n onDelete,\n setOpenMobile,\n}: {\n chat: Chat;\n isActive: boolean;\n onDelete: (chatId: string) => void;\n setOpenMobile: (open: boolean) => void;\n}) => {\n const { visibilityType, setVisibilityType } = useChatVisibility({\n chatId: chat.id,\n initialVisibilityType: chat.visibility,\n });\n\n return (\n \n \n setOpenMobile(false)}>\n {chat.title}\n \n \n\n \n \n \n \n More\n \n \n\n \n \n \n \n Share\n \n \n \n {\n setVisibilityType(\"private\");\n }}\n >\n
\n \n Private\n
\n {visibilityType === \"private\" ? (\n \n ) : null}\n \n {\n setVisibilityType(\"public\");\n }}\n >\n
\n \n Public\n
\n {visibilityType === \"public\" ? : null}\n \n \n \n \n\n onDelete(chat.id)}\n >\n \n Delete\n \n \n \n \n );\n};\n\nexport const ChatItem = memo(PureChatItem, (prevProps, nextProps) => {\n if (prevProps.isActive !== nextProps.isActive) {\n return false;\n }\n return true;\n});\n" }, { "path": "components/sidebar-history.tsx", "content": "\"use client\";\n\nimport { isToday, isYesterday, subMonths, subWeeks } from \"date-fns\";\nimport { motion } from \"framer-motion\";\nimport { usePathname, useRouter } from \"next/navigation\";\nimport type { User } from \"next-auth\";\nimport { useState } from \"react\";\nimport { toast } from \"sonner\";\nimport useSWRInfinite from \"swr/infinite\";\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n} from \"@/components/ui/alert-dialog\";\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n useSidebar,\n} from \"@/components/ui/sidebar\";\nimport type { Chat } from \"@/lib/db/schema\";\nimport { fetcher } from \"@/lib/utils\";\nimport { LoaderIcon } from \"./icons\";\nimport { ChatItem } from \"./sidebar-history-item\";\n\ntype GroupedChats = {\n today: Chat[];\n yesterday: Chat[];\n lastWeek: Chat[];\n lastMonth: Chat[];\n older: Chat[];\n};\n\nexport type ChatHistory = {\n chats: Chat[];\n hasMore: boolean;\n};\n\nconst PAGE_SIZE = 20;\n\nconst groupChatsByDate = (chats: Chat[]): GroupedChats => {\n const now = new Date();\n const oneWeekAgo = subWeeks(now, 1);\n const oneMonthAgo = subMonths(now, 1);\n\n return chats.reduce(\n (groups, chat) => {\n const chatDate = new Date(chat.createdAt);\n\n if (isToday(chatDate)) {\n groups.today.push(chat);\n } else if (isYesterday(chatDate)) {\n groups.yesterday.push(chat);\n } else if (chatDate > oneWeekAgo) {\n groups.lastWeek.push(chat);\n } else if (chatDate > oneMonthAgo) {\n groups.lastMonth.push(chat);\n } else {\n groups.older.push(chat);\n }\n\n return groups;\n },\n {\n today: [],\n yesterday: [],\n lastWeek: [],\n lastMonth: [],\n older: [],\n } as GroupedChats\n );\n};\n\nexport function getChatHistoryPaginationKey(\n pageIndex: number,\n previousPageData: ChatHistory\n) {\n if (previousPageData && previousPageData.hasMore === false) {\n return null;\n }\n\n if (pageIndex === 0) {\n return `/api/history?limit=${PAGE_SIZE}`;\n }\n\n const firstChatFromPage = previousPageData.chats.at(-1);\n\n if (!firstChatFromPage) {\n return null;\n }\n\n return `/api/history?ending_before=${firstChatFromPage.id}&limit=${PAGE_SIZE}`;\n}\n\nexport function SidebarHistory({ user }: { user: User | undefined }) {\n const { setOpenMobile } = useSidebar();\n const pathname = usePathname();\n const id = pathname?.startsWith(\"/chat/\") ? pathname.split(\"/\")[2] : null;\n\n const {\n data: paginatedChatHistories,\n setSize,\n isValidating,\n isLoading,\n mutate,\n } = useSWRInfinite(getChatHistoryPaginationKey, fetcher, {\n fallbackData: [],\n });\n\n const router = useRouter();\n const [deleteId, setDeleteId] = useState(null);\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n\n const hasReachedEnd = paginatedChatHistories\n ? paginatedChatHistories.some((page) => page.hasMore === false)\n : false;\n\n const hasEmptyChatHistory = paginatedChatHistories\n ? paginatedChatHistories.every((page) => page.chats.length === 0)\n : false;\n\n const handleDelete = () => {\n const chatToDelete = deleteId;\n const isCurrentChat = pathname === `/chat/${chatToDelete}`;\n\n setShowDeleteDialog(false);\n\n const deletePromise = fetch(`/api/chat?id=${chatToDelete}`, {\n method: \"DELETE\",\n });\n\n toast.promise(deletePromise, {\n loading: \"Deleting chat...\",\n success: () => {\n mutate((chatHistories) => {\n if (chatHistories) {\n return chatHistories.map((chatHistory) => ({\n ...chatHistory,\n chats: chatHistory.chats.filter(\n (chat) => chat.id !== chatToDelete\n ),\n }));\n }\n });\n\n if (isCurrentChat) {\n router.replace(\"/\");\n router.refresh();\n }\n\n return \"Chat deleted successfully\";\n },\n error: \"Failed to delete chat\",\n });\n };\n\n if (!user) {\n return (\n \n \n
\n Login to save and revisit previous chats!\n
\n \n \n );\n }\n\n if (isLoading) {\n return (\n \n
\n Today\n
\n \n
\n {[44, 32, 28, 64, 52].map((item) => (\n \n \n
\n ))}\n \n \n \n );\n }\n\n if (hasEmptyChatHistory) {\n return (\n \n \n
\n Your conversations will appear here once you start chatting!\n
\n \n \n );\n }\n\n return (\n <>\n \n \n \n {paginatedChatHistories &&\n (() => {\n const chatsFromHistory = paginatedChatHistories.flatMap(\n (paginatedChatHistory) => paginatedChatHistory.chats\n );\n\n const groupedChats = groupChatsByDate(chatsFromHistory);\n\n return (\n
\n {groupedChats.today.length > 0 && (\n
\n
\n Today\n
\n {groupedChats.today.map((chat) => (\n {\n setDeleteId(chatId);\n setShowDeleteDialog(true);\n }}\n setOpenMobile={setOpenMobile}\n />\n ))}\n
\n )}\n\n {groupedChats.yesterday.length > 0 && (\n
\n
\n Yesterday\n
\n {groupedChats.yesterday.map((chat) => (\n {\n setDeleteId(chatId);\n setShowDeleteDialog(true);\n }}\n setOpenMobile={setOpenMobile}\n />\n ))}\n
\n )}\n\n {groupedChats.lastWeek.length > 0 && (\n
\n
\n Last 7 days\n
\n {groupedChats.lastWeek.map((chat) => (\n {\n setDeleteId(chatId);\n setShowDeleteDialog(true);\n }}\n setOpenMobile={setOpenMobile}\n />\n ))}\n
\n )}\n\n {groupedChats.lastMonth.length > 0 && (\n
\n
\n Last 30 days\n
\n {groupedChats.lastMonth.map((chat) => (\n {\n setDeleteId(chatId);\n setShowDeleteDialog(true);\n }}\n setOpenMobile={setOpenMobile}\n />\n ))}\n
\n )}\n\n {groupedChats.older.length > 0 && (\n
\n
\n Older than last month\n
\n {groupedChats.older.map((chat) => (\n {\n setDeleteId(chatId);\n setShowDeleteDialog(true);\n }}\n setOpenMobile={setOpenMobile}\n />\n ))}\n
\n )}\n
\n );\n })()}\n \n\n {\n if (!isValidating && !hasReachedEnd) {\n setSize((size) => size + 1);\n }\n }}\n />\n\n {hasReachedEnd ? (\n
\n You have reached the end of your chat history.\n
\n ) : (\n
\n
\n \n
\n
Loading Chats...
\n
\n )}\n \n \n\n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n chat and remove it from our servers.\n \n \n \n Cancel\n \n Continue\n \n \n \n \n \n );\n}\n" }, { "path": "components/sidebar-toggle.tsx", "content": "import type { ComponentProps } from \"react\";\n\nimport { type SidebarTrigger, useSidebar } from \"@/components/ui/sidebar\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { SidebarLeftIcon } from \"./icons\";\nimport { Button } from \"./ui/button\";\n\nexport function SidebarToggle({\n className,\n}: ComponentProps) {\n const { toggleSidebar } = useSidebar();\n\n return (\n \n \n \n \n \n \n \n Toggle Sidebar\n \n \n );\n}\n" }, { "path": "components/sidebar-user-nav.tsx", "content": "\"use client\";\n\nimport { ChevronUp } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { useRouter } from \"next/navigation\";\nimport type { User } from \"next-auth\";\nimport { signOut, useSession } from \"next-auth/react\";\nimport { useTheme } from \"next-themes\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/components/ui/sidebar\";\nimport { guestRegex } from \"@/lib/constants\";\nimport { LoaderIcon } from \"./icons\";\nimport { toast } from \"./toast\";\n\nexport function SidebarUserNav({ user }: { user: User }) {\n const router = useRouter();\n const { data, status } = useSession();\n const { setTheme, resolvedTheme } = useTheme();\n\n const isGuest = guestRegex.test(data?.user?.email ?? \"\");\n\n return (\n \n \n \n \n {status === \"loading\" ? (\n \n
\n
\n \n Loading auth status\n \n
\n
\n \n
\n \n ) : (\n \n \n \n {isGuest ? \"Guest\" : user?.email}\n \n \n \n )}\n \n \n \n setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\")\n }\n >\n {`Toggle ${resolvedTheme === \"light\" ? \"dark\" : \"light\"} mode`}\n \n \n \n {\n if (status === \"loading\") {\n toast({\n type: \"error\",\n description:\n \"Checking authentication status, please try again!\",\n });\n\n return;\n }\n\n if (isGuest) {\n router.push(\"/login\");\n } else {\n signOut({\n redirectTo: \"/\",\n });\n }\n }}\n type=\"button\"\n >\n {isGuest ? \"Login to your account\" : \"Sign out\"}\n \n \n \n \n \n \n );\n}\n" }, { "path": "components/sign-out-form.tsx", "content": "import Form from \"next/form\";\n\nimport { signOut } from \"@/app/(auth)/auth\";\n\nexport const SignOutForm = () => {\n return (\n {\n \"use server\";\n\n await signOut({\n redirectTo: \"/\",\n });\n }}\n className=\"w-full\"\n >\n \n Sign out\n \n \n );\n};\n" }, { "path": "components/submit-button.tsx", "content": "\"use client\";\n\nimport { useFormStatus } from \"react-dom\";\n\nimport { LoaderIcon } from \"@/components/icons\";\n\nimport { Button } from \"./ui/button\";\n\nexport function SubmitButton({\n children,\n isSuccessful,\n}: {\n children: React.ReactNode;\n isSuccessful: boolean;\n}) {\n const { pending } = useFormStatus();\n\n return (\n \n {children}\n\n {(pending || isSuccessful) && (\n \n \n \n )}\n\n \n {pending || isSuccessful ? \"Loading\" : \"Submit form\"}\n \n \n );\n}\n" }, { "path": "components/suggested-actions.tsx", "content": "\"use client\";\n\nimport type { UseChatHelpers } from \"@ai-sdk/react\";\nimport { motion } from \"framer-motion\";\nimport { memo } from \"react\";\nimport type { ChatMessage } from \"@/lib/types\";\nimport { Suggestion } from \"./elements/suggestion\";\nimport type { VisibilityType } from \"./visibility-selector\";\n\ntype SuggestedActionsProps = {\n chatId: string;\n sendMessage: UseChatHelpers[\"sendMessage\"];\n selectedVisibilityType: VisibilityType;\n};\n\nfunction PureSuggestedActions({ chatId, sendMessage }: SuggestedActionsProps) {\n const suggestedActions = [\n \"What are the advantages of using Next.js?\",\n \"Write code to demonstrate Dijkstra's algorithm\",\n \"Help me write an essay about Silicon Valley\",\n \"What is the weather in San Francisco?\",\n ];\n\n return (\n \n {suggestedActions.map((suggestedAction, index) => (\n \n {\n window.history.pushState({}, \"\", `/chat/${chatId}`);\n sendMessage({\n role: \"user\",\n parts: [{ type: \"text\", text: suggestion }],\n });\n }}\n suggestion={suggestedAction}\n >\n {suggestedAction}\n \n \n ))}\n
\n );\n}\n\nexport const SuggestedActions = memo(\n PureSuggestedActions,\n (prevProps, nextProps) => {\n if (prevProps.chatId !== nextProps.chatId) {\n return false;\n }\n if (prevProps.selectedVisibilityType !== nextProps.selectedVisibilityType) {\n return false;\n }\n\n return true;\n }\n);\n" }, { "path": "components/suggestion.tsx", "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { useState } from \"react\";\nimport { useWindowSize } from \"usehooks-ts\";\n\nimport type { UISuggestion } from \"@/lib/editor/suggestions\";\nimport { cn } from \"@/lib/utils\";\nimport type { ArtifactKind } from \"./artifact\";\nimport { CrossIcon, MessageIcon } from \"./icons\";\nimport { Button } from \"./ui/button\";\n\nexport const Suggestion = ({\n suggestion,\n onApply,\n artifactKind,\n}: {\n suggestion: UISuggestion;\n onApply: () => void;\n artifactKind: ArtifactKind;\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const { width: windowWidth } = useWindowSize();\n\n return (\n \n {isExpanded ? (\n \n
\n
\n
\n
Assistant
\n
\n {\n setIsExpanded(false);\n }}\n type=\"button\"\n >\n \n \n
\n
{suggestion.description}
\n \n Apply\n \n \n ) : (\n {\n setIsExpanded(true);\n }}\n whileHover={{ scale: 1.1 }}\n >\n \n \n )}\n \n );\n};\n" }, { "path": "components/text-editor.tsx", "content": "\"use client\";\n\nimport { exampleSetup } from \"prosemirror-example-setup\";\nimport { inputRules } from \"prosemirror-inputrules\";\nimport { EditorState } from \"prosemirror-state\";\nimport { EditorView } from \"prosemirror-view\";\nimport { memo, useEffect, useRef } from \"react\";\n\nimport type { Suggestion } from \"@/lib/db/schema\";\nimport {\n documentSchema,\n handleTransaction,\n headingRule,\n} from \"@/lib/editor/config\";\nimport {\n buildContentFromDocument,\n buildDocumentFromContent,\n createDecorations,\n} from \"@/lib/editor/functions\";\nimport {\n projectWithPositions,\n suggestionsPlugin,\n suggestionsPluginKey,\n} from \"@/lib/editor/suggestions\";\n\ntype EditorProps = {\n content: string;\n onSaveContent: (updatedContent: string, debounce: boolean) => void;\n status: \"streaming\" | \"idle\";\n isCurrentVersion: boolean;\n currentVersionIndex: number;\n suggestions: Suggestion[];\n};\n\nfunction PureEditor({\n content,\n onSaveContent,\n suggestions,\n status,\n}: EditorProps) {\n const containerRef = useRef(null);\n const editorRef = useRef(null);\n\n useEffect(() => {\n if (containerRef.current && !editorRef.current) {\n const state = EditorState.create({\n doc: buildDocumentFromContent(content),\n plugins: [\n ...exampleSetup({ schema: documentSchema, menuBar: false }),\n inputRules({\n rules: [\n headingRule(1),\n headingRule(2),\n headingRule(3),\n headingRule(4),\n headingRule(5),\n headingRule(6),\n ],\n }),\n suggestionsPlugin,\n ],\n });\n\n editorRef.current = new EditorView(containerRef.current, {\n state,\n });\n }\n\n return () => {\n if (editorRef.current) {\n editorRef.current.destroy();\n editorRef.current = null;\n }\n };\n // NOTE: we only want to run this effect once\n // eslint-disable-next-line\n }, [content]);\n\n useEffect(() => {\n if (editorRef.current) {\n editorRef.current.setProps({\n dispatchTransaction: (transaction) => {\n handleTransaction({\n transaction,\n editorRef,\n onSaveContent,\n });\n },\n });\n }\n }, [onSaveContent]);\n\n useEffect(() => {\n if (editorRef.current && content) {\n const currentContent = buildContentFromDocument(\n editorRef.current.state.doc\n );\n\n if (status === \"streaming\") {\n const newDocument = buildDocumentFromContent(content);\n\n const transaction = editorRef.current.state.tr.replaceWith(\n 0,\n editorRef.current.state.doc.content.size,\n newDocument.content\n );\n\n transaction.setMeta(\"no-save\", true);\n editorRef.current.dispatch(transaction);\n return;\n }\n\n if (currentContent !== content) {\n const newDocument = buildDocumentFromContent(content);\n\n const transaction = editorRef.current.state.tr.replaceWith(\n 0,\n editorRef.current.state.doc.content.size,\n newDocument.content\n );\n\n transaction.setMeta(\"no-save\", true);\n editorRef.current.dispatch(transaction);\n }\n }\n }, [content, status]);\n\n useEffect(() => {\n if (editorRef.current?.state.doc && content) {\n const projectedSuggestions = projectWithPositions(\n editorRef.current.state.doc,\n suggestions\n ).filter(\n (suggestion) => suggestion.selectionStart && suggestion.selectionEnd\n );\n\n const decorations = createDecorations(\n projectedSuggestions,\n editorRef.current\n );\n\n const transaction = editorRef.current.state.tr;\n transaction.setMeta(suggestionsPluginKey, { decorations });\n editorRef.current.dispatch(transaction);\n }\n }, [suggestions, content]);\n\n return (\n
\n );\n}\n\nfunction areEqual(prevProps: EditorProps, nextProps: EditorProps) {\n return (\n prevProps.suggestions === nextProps.suggestions &&\n prevProps.currentVersionIndex === nextProps.currentVersionIndex &&\n prevProps.isCurrentVersion === nextProps.isCurrentVersion &&\n !(prevProps.status === \"streaming\" && nextProps.status === \"streaming\") &&\n prevProps.content === nextProps.content &&\n prevProps.onSaveContent === nextProps.onSaveContent\n );\n}\n\nexport const Editor = memo(PureEditor, areEqual);\n" }, { "path": "components/theme-provider.tsx", "content": "\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\nimport type { ThemeProviderProps } from \"next-themes/dist/types\";\n\nexport function ThemeProvider({ children, ...props }: ThemeProviderProps) {\n return {children};\n}\n" }, { "path": "components/toast.tsx", "content": "\"use client\";\n\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport { toast as sonnerToast } from \"sonner\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckCircleFillIcon, WarningIcon } from \"./icons\";\n\nconst iconsByType: Record<\"success\" | \"error\", ReactNode> = {\n success: ,\n error: ,\n};\n\nexport function toast(props: Omit) {\n return sonnerToast.custom((id) => (\n \n ));\n}\n\nfunction Toast(props: ToastProps) {\n const { id, type, description } = props;\n\n const descriptionRef = useRef(null);\n const [multiLine, setMultiLine] = useState(false);\n\n useEffect(() => {\n const el = descriptionRef.current;\n if (!el) {\n return;\n }\n\n const update = () => {\n const lineHeight = Number.parseFloat(getComputedStyle(el).lineHeight);\n const lines = Math.round(el.scrollHeight / lineHeight);\n setMultiLine(lines > 1);\n };\n\n update(); // initial check\n const ro = new ResizeObserver(update); // re-check on width changes\n ro.observe(el);\n\n return () => ro.disconnect();\n }, []);\n\n return (\n
\n \n \n {iconsByType[type]}\n
\n
\n {description}\n
\n
\n
\n );\n}\n\ntype ToastProps = {\n id: string | number;\n type: \"success\" | \"error\";\n description: string;\n};\n" }, { "path": "components/toolbar.tsx", "content": "\"use client\";\nimport type { UseChatHelpers } from \"@ai-sdk/react\";\nimport cx from \"classnames\";\nimport {\n AnimatePresence,\n motion,\n useMotionValue,\n useTransform,\n} from \"framer-motion\";\nimport { nanoid } from \"nanoid\";\nimport {\n type Dispatch,\n memo,\n type ReactNode,\n type SetStateAction,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useOnClickOutside } from \"usehooks-ts\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport type { ChatMessage } from \"@/lib/types\";\nimport { type ArtifactKind, artifactDefinitions } from \"./artifact\";\nimport type { ArtifactToolbarItem } from \"./create-artifact\";\nimport { ArrowUpIcon, StopIcon, SummarizeIcon } from \"./icons\";\n\ntype ToolProps = {\n description: string;\n icon: ReactNode;\n selectedTool: string | null;\n setSelectedTool: Dispatch>;\n isToolbarVisible?: boolean;\n setIsToolbarVisible?: Dispatch>;\n isAnimating: boolean;\n sendMessage: UseChatHelpers[\"sendMessage\"];\n onClick: ({\n sendMessage,\n }: {\n sendMessage: UseChatHelpers[\"sendMessage\"];\n }) => void;\n};\n\nconst Tool = ({\n description,\n icon,\n selectedTool,\n setSelectedTool,\n isToolbarVisible,\n setIsToolbarVisible,\n isAnimating,\n sendMessage,\n onClick,\n}: ToolProps) => {\n const [isHovered, setIsHovered] = useState(false);\n\n useEffect(() => {\n if (selectedTool !== description) {\n setIsHovered(false);\n }\n }, [selectedTool, description]);\n\n const handleSelect = () => {\n if (!isToolbarVisible && setIsToolbarVisible) {\n setIsToolbarVisible(true);\n return;\n }\n\n if (!selectedTool) {\n setIsHovered(true);\n setSelectedTool(description);\n return;\n }\n\n if (selectedTool === description) {\n setSelectedTool(null);\n onClick({ sendMessage });\n } else {\n setSelectedTool(description);\n }\n };\n\n return (\n \n \n {\n handleSelect();\n }}\n onHoverEnd={() => {\n if (selectedTool !== description) {\n setIsHovered(false);\n }\n }}\n onHoverStart={() => {\n setIsHovered(true);\n }}\n onKeyDown={(event) => {\n if (event.key === \"Enter\") {\n handleSelect();\n }\n }}\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.95 }}\n >\n {selectedTool === description ? : icon}\n \n \n \n {description}\n \n \n );\n};\n\nconst randomArr = [...new Array(6)].map((_x) => nanoid(5));\n\nconst ReadingLevelSelector = ({\n setSelectedTool,\n sendMessage,\n isAnimating,\n}: {\n setSelectedTool: Dispatch>;\n isAnimating: boolean;\n sendMessage: UseChatHelpers[\"sendMessage\"];\n}) => {\n const LEVELS = [\n \"Elementary\",\n \"Middle School\",\n \"Keep current level\",\n \"High School\",\n \"College\",\n \"Graduate\",\n ];\n\n const y = useMotionValue(-40 * 2);\n const dragConstraints = 5 * 40 + 2;\n const yToLevel = useTransform(y, [0, -dragConstraints], [0, 5]);\n\n const [currentLevel, setCurrentLevel] = useState(2);\n const [hasUserSelectedLevel, setHasUserSelectedLevel] =\n useState(false);\n\n useEffect(() => {\n const unsubscribe = yToLevel.on(\"change\", (latest) => {\n const level = Math.min(5, Math.max(0, Math.round(Math.abs(latest))));\n setCurrentLevel(level);\n });\n\n return () => unsubscribe();\n }, [yToLevel]);\n\n return (\n
\n {randomArr.map((id) => (\n \n
\n \n ))}\n\n \n \n \n {\n if (currentLevel !== 2 && hasUserSelectedLevel) {\n sendMessage({\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: `Please adjust the reading level to ${LEVELS[currentLevel]} level.`,\n },\n ],\n });\n\n setSelectedTool(null);\n }\n }}\n onDragEnd={() => {\n if (currentLevel === 2) {\n setSelectedTool(null);\n } else {\n setHasUserSelectedLevel(true);\n }\n }}\n onDragStart={() => {\n setHasUserSelectedLevel(false);\n }}\n style={{ y }}\n transition={{ duration: 0.1 }}\n whileHover={{ scale: 1.05 }}\n whileTap={{ scale: 0.95 }}\n >\n {currentLevel === 2 ? : }\n \n \n \n {LEVELS[currentLevel]}\n \n \n \n
\n );\n};\n\nexport const Tools = ({\n isToolbarVisible,\n selectedTool,\n setSelectedTool,\n sendMessage,\n isAnimating,\n setIsToolbarVisible,\n tools,\n}: {\n isToolbarVisible: boolean;\n selectedTool: string | null;\n setSelectedTool: Dispatch>;\n sendMessage: UseChatHelpers[\"sendMessage\"];\n isAnimating: boolean;\n setIsToolbarVisible: Dispatch>;\n tools: ArtifactToolbarItem[];\n}) => {\n const [primaryTool, ...secondaryTools] = tools;\n\n return (\n \n \n {isToolbarVisible &&\n secondaryTools.map((secondaryTool) => (\n \n ))}\n \n\n \n \n );\n};\n\nconst PureToolbar = ({\n isToolbarVisible,\n setIsToolbarVisible,\n sendMessage,\n status,\n stop,\n setMessages,\n artifactKind,\n}: {\n isToolbarVisible: boolean;\n setIsToolbarVisible: Dispatch>;\n status: UseChatHelpers[\"status\"];\n sendMessage: UseChatHelpers[\"sendMessage\"];\n stop: UseChatHelpers[\"stop\"];\n setMessages: UseChatHelpers[\"setMessages\"];\n artifactKind: ArtifactKind;\n}) => {\n const toolbarRef = useRef(null);\n const timeoutRef = useRef>();\n\n const [selectedTool, setSelectedTool] = useState(null);\n const [isAnimating, setIsAnimating] = useState(false);\n\n useOnClickOutside(toolbarRef, () => {\n setIsToolbarVisible(false);\n setSelectedTool(null);\n });\n\n const startCloseTimer = () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n timeoutRef.current = setTimeout(() => {\n setSelectedTool(null);\n setIsToolbarVisible(false);\n }, 2000);\n };\n\n const cancelCloseTimer = () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n if (status === \"streaming\") {\n setIsToolbarVisible(false);\n }\n }, [status, setIsToolbarVisible]);\n\n const artifactDefinition = artifactDefinitions.find(\n (definition) => definition.kind === artifactKind\n );\n\n if (!artifactDefinition) {\n throw new Error(\"Artifact definition not found!\");\n }\n\n const toolsByArtifactKind = artifactDefinition.toolbar;\n\n if (toolsByArtifactKind.length === 0) {\n return null;\n }\n\n return (\n \n {\n setIsAnimating(false);\n }}\n onAnimationStart={() => {\n setIsAnimating(true);\n }}\n onHoverEnd={() => {\n if (status === \"streaming\") {\n return;\n }\n\n startCloseTimer();\n }}\n onHoverStart={() => {\n if (status === \"streaming\") {\n return;\n }\n\n cancelCloseTimer();\n setIsToolbarVisible(true);\n }}\n ref={toolbarRef}\n transition={{ type: \"spring\", stiffness: 300, damping: 25 }}\n >\n {status === \"streaming\" ? (\n {\n stop();\n setMessages((messages) => messages);\n }}\n >\n \n \n ) : selectedTool === \"adjust-reading-level\" ? (\n \n ) : (\n \n )}\n \n \n );\n};\n\nexport const Toolbar = memo(PureToolbar, (prevProps, nextProps) => {\n if (prevProps.status !== nextProps.status) {\n return false;\n }\n if (prevProps.isToolbarVisible !== nextProps.isToolbarVisible) {\n return false;\n }\n if (prevProps.artifactKind !== nextProps.artifactKind) {\n return false;\n }\n\n return true;\n});\n" }, { "path": "components/ui/alert-dialog.tsx", "content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst AlertDialog = AlertDialogPrimitive.Root;\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName;\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n};\n" }, { "path": "components/ui/alert.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" }, { "path": "components/ui/avatar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n" }, { "path": "components/ui/badge.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes,\n VariantProps {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n
\n )\n}\n\nexport { Badge, badgeVariants }\n" }, { "path": "components/ui/button-group.tsx", "content": "import { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst buttonGroupVariants = cva(\n \"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n vertical:\n \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n }\n)\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction ButtonGroupText({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<\"div\"> & {\n asChild?: boolean\n}) {\n const Comp = asChild ? Slot : \"div\"\n\n return (\n \n )\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupVariants,\n}\n" }, { "path": "components/ui/button.tsx", "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n \"icon-sm\": \"h-8 w-8\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? SlotPrimitive.Slot : \"button\";\n return (\n \n );\n }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n" }, { "path": "components/ui/card.tsx", "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nCardFooter.displayName = \"CardFooter\";\n\nconst CardAction = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nCardAction.displayName = \"CardAction\";\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardDescription,\n CardContent,\n CardAction,\n};\n" }, { "path": "components/ui/carousel.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType[0]\n api: ReturnType[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nconst Carousel = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & CarouselProps\n>(\n (\n {\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) {\n return\n }\n\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) {\n return\n }\n\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n \n \n {children}\n
\n \n )\n }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n
\n \n
\n )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const { orientation } = useCarousel()\n\n return (\n \n )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n \n \n Previous slide\n \n )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n \n \n Next slide\n \n )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n}\n" }, { "path": "components/ui/collapsible.tsx", "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n" }, { "path": "components/ui/command.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/components/ui/dialog\"\n\nconst Command = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n
\n \n \n
\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => (\n \n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n}\n" }, { "path": "components/ui/dialog.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" }, { "path": "components/ui/dropdown-menu.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n}\n" }, { "path": "components/ui/hover-card.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n \n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n" }, { "path": "components/ui/input-group.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n textarea]:h-auto\",\n\n // Variants based on alignment.\n \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n // Focus state.\n \"has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1\",\n\n // Error state.\n \"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\n className\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n align: {\n \"inline-start\":\n \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n \"inline-end\":\n \"order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]\",\n \"block-start\":\n \"[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5\",\n \"block-end\":\n \"[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n }\n)\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\nconst inputGroupButtonVariants = cva(\n \"flex items-center gap-2 text-sm shadow-none\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n \"icon-xs\":\n \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n }\n)\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit, \"size\"> &\n VariantProps) {\n return (\n \n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<\"input\">) {\n return (\n \n )\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<\"textarea\">) {\n return (\n \n )\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n}\n" }, { "path": "components/ui/input.tsx", "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Input = React.forwardRef>(\n ({ className, type, ...props }, ref) => {\n return (\n \n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n" }, { "path": "components/ui/label.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, ...props }, ref) => (\n \n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n" }, { "path": "components/ui/progress.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, value, ...props }, ref) => (\n \n \n \n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n" }, { "path": "components/ui/scroll-area.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" }, { "path": "components/ui/select.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n span]:line-clamp-1\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n\n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n}\n" }, { "path": "components/ui/separator.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, orientation = \"horizontal\", decorative = true, ...props },\n ref\n ) => (\n \n )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n" }, { "path": "components/ui/sheet.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" }, { "path": "components/ui/sidebar.tsx", "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeft } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"@/components/ui/sheet\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { cn } from \"@/lib/utils\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n }\n\n return context;\n}\n\nconst SidebarProvider = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n }\n>(\n (\n {\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n },\n ref\n ) => {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile\n ? setOpenMobile((open) => !open)\n : setOpen((open) => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\";\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n );\n\n return (\n \n \n \n {children}\n
\n \n \n );\n }\n);\nSidebarProvider.displayName = \"SidebarProvider\";\n\nconst Sidebar = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\";\n variant?: \"sidebar\" | \"floating\" | \"inset\";\n collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n }\n>(\n (\n {\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n },\n ref\n ) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === \"none\") {\n return (\n \n {children}\n
\n );\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n data-mobile=\"true\"\n data-sidebar=\"sidebar\"\n side={side}\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n >\n \n Sidebar\n Displays the mobile sidebar.\n \n
{children}
\n \n \n );\n }\n\n return (\n