├── .vscode ├── extensions.json └── settings.json ├── app ├── favicon.ico ├── (auth) │ ├── api │ │ └── auth │ │ │ ├── [...nextauth] │ │ │ └── route.ts │ │ │ └── guest │ │ │ └── route.ts │ ├── auth.config.ts │ ├── actions.ts │ ├── auth.ts │ ├── login │ │ └── page.tsx │ └── register │ │ └── page.tsx ├── (chat) │ ├── opengraph-image.png │ ├── twitter-image.png │ ├── api │ │ ├── suggestions │ │ │ └── route.ts │ │ ├── chat │ │ │ └── schema.ts │ │ ├── history │ │ │ └── route.ts │ │ ├── vote │ │ │ └── route.ts │ │ ├── files │ │ │ └── upload │ │ │ │ └── route.ts │ │ └── document │ │ │ └── route.ts │ ├── layout.tsx │ ├── page.tsx │ ├── actions.ts │ └── chat │ │ └── [id] │ │ └── page.tsx └── layout.tsx ├── lib ├── db │ ├── migrations │ │ ├── 0004_odd_slayback.sql │ │ ├── 0003_cloudy_glorian.sql │ │ ├── 0006_marvelous_frog_thor.sql │ │ ├── 0000_keen_devos.sql │ │ ├── meta │ │ │ ├── _journal.json │ │ │ └── 0000_snapshot.json │ │ ├── 0005_wooden_whistler.sql │ │ ├── 0002_wandering_riptide.sql │ │ └── 0001_sparkling_blue_marvel.sql │ ├── utils.ts │ └── migrate.ts ├── editor │ ├── react-renderer.tsx │ ├── config.ts │ └── functions.tsx ├── ai │ ├── models.ts │ ├── tools │ │ ├── get-weather.ts │ │ ├── update-document.ts │ │ ├── create-document.ts │ │ └── request-suggestions.ts │ ├── entitlements.ts │ ├── providers.ts │ └── models.test.ts ├── constants.ts ├── utils.ts └── artifacts │ └── server.ts ├── public └── images │ ├── demo-thumbnail.png │ └── mouth of the seine, monet.jpg ├── postcss.config.mjs ├── next-env.d.ts ├── artifacts ├── actions.ts ├── image │ ├── server.ts │ └── client.tsx ├── code │ └── server.ts ├── text │ └── server.ts └── sheet │ ├── server.ts │ └── client.tsx ├── next.config.ts ├── components ├── theme-provider.tsx ├── ui │ ├── skeleton.tsx │ ├── textarea.tsx │ ├── label.tsx │ ├── input.tsx │ ├── separator.tsx │ ├── tooltip.tsx │ ├── button.tsx │ └── card.tsx ├── sign-out-form.tsx ├── greeting.tsx ├── artifact-close-button.tsx ├── sidebar-toggle.tsx ├── submit-button.tsx ├── code-block.tsx ├── image-editor.tsx ├── preview-attachment.tsx ├── auth-form.tsx ├── document-skeleton.tsx ├── toast.tsx ├── app-sidebar.tsx ├── message-reasoning.tsx ├── suggestion.tsx ├── data-stream-handler.tsx ├── suggested-actions.tsx ├── messages.tsx ├── markdown.tsx ├── artifact-messages.tsx ├── create-artifact.tsx ├── diffview.tsx ├── message-editor.tsx ├── artifact-actions.tsx ├── chat-header.tsx ├── version-footer.tsx ├── visibility-selector.tsx ├── model-selector.tsx ├── code-editor.tsx └── sidebar-history-item.tsx ├── drizzle.config.ts ├── components.json ├── LICENSE ├── .eslintrc.json ├── .github └── workflows │ ├── lint.yml │ └── playwright.yml ├── .gitignore ├── hooks ├── use-mobile.tsx ├── use-messages.tsx ├── use-scroll-to-bottom.tsx ├── use-chat-visibility.ts └── use-artifact.ts ├── .env.example ├── tsconfig.json ├── tests ├── prompts │ ├── routes.ts │ └── basic.ts ├── fixtures.ts ├── e2e │ ├── reasoning.test.ts │ └── artifacts.test.ts ├── pages │ ├── auth.ts │ └── artifact.ts └── helpers.ts ├── middleware.ts ├── tailwind.config.ts ├── playwright.config.ts ├── README.md └── package.json /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["biomejs.biome"] 3 | } 4 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sugarforever/vibe-chat/main/app/favicon.ico -------------------------------------------------------------------------------- /app/(auth)/api/auth/[...nextauth]/route.ts: -------------------------------------------------------------------------------- 1 | export { GET, POST } from '@/app/(auth)/auth'; 2 | -------------------------------------------------------------------------------- /lib/db/migrations/0004_odd_slayback.sql: -------------------------------------------------------------------------------- 1 | ALTER TABLE "Document" ADD COLUMN "text" varchar DEFAULT 'text' NOT NULL; -------------------------------------------------------------------------------- /app/(chat)/opengraph-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sugarforever/vibe-chat/main/app/(chat)/opengraph-image.png -------------------------------------------------------------------------------- /app/(chat)/twitter-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sugarforever/vibe-chat/main/app/(chat)/twitter-image.png -------------------------------------------------------------------------------- /lib/db/migrations/0003_cloudy_glorian.sql: -------------------------------------------------------------------------------- 1 | ALTER TABLE "Chat" ADD COLUMN "visibility" varchar DEFAULT 'private' NOT NULL; -------------------------------------------------------------------------------- /public/images/demo-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sugarforever/vibe-chat/main/public/images/demo-thumbnail.png -------------------------------------------------------------------------------- /public/images/mouth of the seine, monet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sugarforever/vibe-chat/main/public/images/mouth of the seine, monet.jpg -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | 'tailwindcss/nesting': {}, 6 | }, 7 | }; 8 | 9 | export default config; 10 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. 6 | -------------------------------------------------------------------------------- /artifacts/actions.ts: -------------------------------------------------------------------------------- 1 | 'use server'; 2 | 3 | import { getSuggestionsByDocumentId } from '@/lib/db/queries'; 4 | 5 | export async function getSuggestions({ documentId }: { documentId: string }) { 6 | const suggestions = await getSuggestionsByDocumentId({ documentId }); 7 | return suggestions ?? []; 8 | } 9 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from 'next'; 2 | 3 | const nextConfig: NextConfig = { 4 | experimental: { 5 | ppr: true, 6 | }, 7 | images: { 8 | remotePatterns: [ 9 | { 10 | hostname: 'avatar.vercel.sh', 11 | }, 12 | ], 13 | }, 14 | }; 15 | 16 | export default nextConfig; 17 | -------------------------------------------------------------------------------- /components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { ThemeProvider as NextThemesProvider } from 'next-themes'; 4 | import type { ThemeProviderProps } from 'next-themes/dist/types'; 5 | 6 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 7 | return {children}; 8 | } 9 | -------------------------------------------------------------------------------- /lib/editor/react-renderer.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | 3 | export class ReactRenderer { 4 | static render(component: React.ReactElement, dom: HTMLElement) { 5 | const root = createRoot(dom); 6 | root.render(component); 7 | 8 | return { 9 | destroy: () => root.unmount(), 10 | }; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from '@/lib/utils'; 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ); 13 | } 14 | 15 | export { Skeleton }; 16 | -------------------------------------------------------------------------------- /app/(auth)/auth.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextAuthConfig } from 'next-auth'; 2 | 3 | export const authConfig = { 4 | pages: { 5 | signIn: '/login', 6 | newUser: '/', 7 | }, 8 | providers: [ 9 | // added later in auth.ts since it requires bcrypt which is only compatible with Node.js 10 | // while this file is also used in non-Node.js environments 11 | ], 12 | callbacks: {}, 13 | } satisfies NextAuthConfig; 14 | -------------------------------------------------------------------------------- /drizzle.config.ts: -------------------------------------------------------------------------------- 1 | import { config } from 'dotenv'; 2 | import { defineConfig } from 'drizzle-kit'; 3 | 4 | config({ 5 | path: '.env.local', 6 | }); 7 | 8 | export default defineConfig({ 9 | schema: './lib/db/schema.ts', 10 | out: './lib/db/migrations', 11 | dialect: 'postgresql', 12 | dbCredentials: { 13 | // biome-ignore lint: Forbidden non-null assertion. 14 | url: process.env.POSTGRES_URL!, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /lib/db/utils.ts: -------------------------------------------------------------------------------- 1 | import { generateId } from 'ai'; 2 | import { genSaltSync, hashSync } from 'bcrypt-ts'; 3 | 4 | export function generateHashedPassword(password: string) { 5 | const salt = genSaltSync(10); 6 | const hash = hashSync(password, salt); 7 | 8 | return hash; 9 | } 10 | 11 | export function generateDummyPassword() { 12 | const password = generateId(12); 13 | const hashedPassword = generateHashedPassword(password); 14 | 15 | return hashedPassword; 16 | } 17 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "[javascript]": { 4 | "editor.defaultFormatter": "biomejs.biome" 5 | }, 6 | "[typescript]": { 7 | "editor.defaultFormatter": "biomejs.biome" 8 | }, 9 | "[typescriptreact]": { 10 | "editor.defaultFormatter": "biomejs.biome" 11 | }, 12 | "typescript.tsdk": "node_modules/typescript/lib", 13 | "eslint.workingDirectories": [ 14 | { "pattern": "app/*" }, 15 | { "pattern": "packages/*" } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lib/ai/models.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_CHAT_MODEL: string = 'chat-model'; 2 | 3 | export interface ChatModel { 4 | id: string; 5 | name: string; 6 | description: string; 7 | } 8 | 9 | export const chatModels: Array = [ 10 | { 11 | id: 'chat-model', 12 | name: 'Chat model', 13 | description: 'Primary model for all-purpose chat', 14 | }, 15 | { 16 | id: 'chat-model-reasoning', 17 | name: 'Reasoning model', 18 | description: 'Uses advanced reasoning', 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /lib/constants.ts: -------------------------------------------------------------------------------- 1 | import { generateDummyPassword } from './db/utils'; 2 | 3 | export const isProductionEnvironment = process.env.NODE_ENV === 'production'; 4 | export const isDevelopmentEnvironment = process.env.NODE_ENV === 'development'; 5 | export const isTestEnvironment = Boolean( 6 | process.env.PLAYWRIGHT_TEST_BASE_URL || 7 | process.env.PLAYWRIGHT || 8 | process.env.CI_PLAYWRIGHT, 9 | ); 10 | 11 | export const guestRegex = /^guest-\d+$/; 12 | 13 | export const DUMMY_PASSWORD = generateDummyPassword(); 14 | -------------------------------------------------------------------------------- /lib/db/migrations/0006_marvelous_frog_thor.sql: -------------------------------------------------------------------------------- 1 | CREATE TABLE IF NOT EXISTS "Stream" ( 2 | "id" uuid DEFAULT gen_random_uuid() NOT NULL, 3 | "chatId" uuid NOT NULL, 4 | "createdAt" timestamp NOT NULL, 5 | CONSTRAINT "Stream_id_pk" PRIMARY KEY("id") 6 | ); 7 | --> statement-breakpoint 8 | DO $$ BEGIN 9 | ALTER TABLE "Stream" ADD CONSTRAINT "Stream_chatId_Chat_id_fk" FOREIGN KEY ("chatId") REFERENCES "public"."Chat"("id") ON DELETE no action ON UPDATE no action; 10 | EXCEPTION 11 | WHEN duplicate_object THEN null; 12 | END $$; 13 | -------------------------------------------------------------------------------- /components/sign-out-form.tsx: -------------------------------------------------------------------------------- 1 | import Form from 'next/form'; 2 | 3 | import { signOut } from '@/app/(auth)/auth'; 4 | 5 | export const SignOutForm = () => { 6 | return ( 7 |
{ 10 | 'use server'; 11 | 12 | await signOut({ 13 | redirectTo: '/', 14 | }); 15 | }} 16 | > 17 | 23 |
24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2024 Vercel, Inc. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "next/core-web-vitals", 4 | "plugin:import/recommended", 5 | "plugin:import/typescript", 6 | "prettier", 7 | "plugin:tailwindcss/recommended" 8 | ], 9 | "plugins": ["tailwindcss"], 10 | "rules": { 11 | "tailwindcss/no-custom-classname": "off", 12 | "tailwindcss/classnames-order": "off" 13 | }, 14 | "settings": { 15 | "import/resolver": { 16 | "typescript": { 17 | "alwaysTryTypes": true, 18 | "project": "./tsconfig.json" 19 | } 20 | } 21 | }, 22 | "ignorePatterns": ["**/components/ui/**"] 23 | } 24 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | on: 3 | push: 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-22.04 8 | strategy: 9 | matrix: 10 | node-version: [20] 11 | steps: 12 | - uses: actions/checkout@v4 13 | - name: Install pnpm 14 | uses: pnpm/action-setup@v4 15 | with: 16 | version: 9.12.3 17 | - name: Use Node.js ${{ matrix.node-version }} 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version: ${{ matrix.node-version }} 21 | cache: 'pnpm' 22 | - name: Install dependencies 23 | run: pnpm install 24 | - name: Run lint 25 | run: pnpm lint -------------------------------------------------------------------------------- /lib/ai/tools/get-weather.ts: -------------------------------------------------------------------------------- 1 | import { tool } from 'ai'; 2 | import { z } from 'zod'; 3 | 4 | export const getWeather = tool({ 5 | description: 'Get the current weather at a location', 6 | parameters: z.object({ 7 | latitude: z.number(), 8 | longitude: z.number(), 9 | }), 10 | execute: async ({ latitude, longitude }) => { 11 | const response = await fetch( 12 | `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t=temperature_2m&hourly=temperature_2m&daily=sunrise,sunset&timezone=auto`, 13 | ); 14 | 15 | const weatherData = await response.json(); 16 | return weatherData; 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | out/ 14 | build 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | 20 | # debug 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .pnpm-debug.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | 32 | # turbo 33 | .turbo 34 | 35 | .env 36 | .vercel 37 | .env*.local 38 | 39 | # Playwright 40 | /test-results/ 41 | /playwright-report/ 42 | /blob-report/ 43 | /playwright/* 44 | -------------------------------------------------------------------------------- /hooks/use-mobile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | const MOBILE_BREAKPOINT = 768; 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState( 7 | undefined, 8 | ); 9 | 10 | React.useEffect(() => { 11 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); 12 | const onChange = () => { 13 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); 14 | }; 15 | mql.addEventListener('change', onChange); 16 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); 17 | return () => mql.removeEventListener('change', onChange); 18 | }, []); 19 | 20 | return !!isMobile; 21 | } 22 | -------------------------------------------------------------------------------- /lib/db/migrations/0000_keen_devos.sql: -------------------------------------------------------------------------------- 1 | CREATE TABLE IF NOT EXISTS "Chat" ( 2 | "id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL, 3 | "createdAt" timestamp NOT NULL, 4 | "messages" json NOT NULL, 5 | "userId" uuid NOT NULL 6 | ); 7 | --> statement-breakpoint 8 | CREATE TABLE IF NOT EXISTS "User" ( 9 | "id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL, 10 | "email" varchar(64) NOT NULL, 11 | "password" varchar(64) 12 | ); 13 | --> statement-breakpoint 14 | DO $$ BEGIN 15 | ALTER TABLE "Chat" ADD CONSTRAINT "Chat_userId_User_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."User"("id") ON DELETE no action ON UPDATE no action; 16 | EXCEPTION 17 | WHEN duplicate_object THEN null; 18 | END $$; 19 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | # Generate a random secret: https://generate-secret.vercel.app/32 or `openssl rand -base64 32` 2 | AUTH_SECRET=**** 3 | 4 | # The following keys below are automatically created and 5 | # added to your environment when you deploy on vercel 6 | 7 | # Get your xAI API Key here for chat and image models: https://console.x.ai/ 8 | XAI_API_KEY=**** 9 | 10 | # Instructions to create a Vercel Blob Store here: https://vercel.com/docs/storage/vercel-blob 11 | BLOB_READ_WRITE_TOKEN=**** 12 | 13 | # Instructions to create a PostgreSQL database here: https://vercel.com/docs/storage/vercel-postgres/quickstart 14 | POSTGRES_URL=**** 15 | 16 | 17 | # Instructions to create a Redis store here: 18 | # https://vercel.com/docs/redis 19 | REDIS_URL=**** 20 | -------------------------------------------------------------------------------- /app/(auth)/api/auth/guest/route.ts: -------------------------------------------------------------------------------- 1 | import { signIn } from '@/app/(auth)/auth'; 2 | import { isDevelopmentEnvironment } from '@/lib/constants'; 3 | import { getToken } from 'next-auth/jwt'; 4 | import { NextResponse } from 'next/server'; 5 | 6 | export async function GET(request: Request) { 7 | const { searchParams } = new URL(request.url); 8 | const redirectUrl = searchParams.get('redirectUrl') || '/'; 9 | 10 | const token = await getToken({ 11 | req: request, 12 | secret: process.env.AUTH_SECRET, 13 | secureCookie: !isDevelopmentEnvironment, 14 | }); 15 | 16 | if (token) { 17 | return NextResponse.redirect(new URL('/', request.url)); 18 | } 19 | 20 | return signIn('guest', { redirect: true, redirectTo: redirectUrl }); 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": [ 26 | "next-env.d.ts", 27 | "**/*.ts", 28 | "**/*.tsx", 29 | ".next/types/**/*.ts", 30 | "next.config.js" 31 | ], 32 | "exclude": ["node_modules"] 33 | } 34 | -------------------------------------------------------------------------------- /lib/ai/entitlements.ts: -------------------------------------------------------------------------------- 1 | import type { UserType } from '@/app/(auth)/auth'; 2 | import type { ChatModel } from './models'; 3 | 4 | interface Entitlements { 5 | maxMessagesPerDay: number; 6 | availableChatModelIds: Array; 7 | } 8 | 9 | export const entitlementsByUserType: Record = { 10 | /* 11 | * For users without an account 12 | */ 13 | guest: { 14 | maxMessagesPerDay: 20, 15 | availableChatModelIds: ['chat-model', 'chat-model-reasoning'], 16 | }, 17 | 18 | /* 19 | * For users with an account 20 | */ 21 | regular: { 22 | maxMessagesPerDay: 100, 23 | availableChatModelIds: ['chat-model', 'chat-model-reasoning'], 24 | }, 25 | 26 | /* 27 | * TODO: For users with an account and a paid membership 28 | */ 29 | }; 30 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { cn } from '@/lib/utils'; 4 | 5 | const Textarea = React.forwardRef< 6 | HTMLTextAreaElement, 7 | React.ComponentProps<'textarea'> 8 | >(({ className, ...props }, ref) => { 9 | return ( 10 |