[V0_FILE]typescriptreact:file="components/autoresize-textarea.tsx" isMerged="true" 'use client' import { cn } from '@/lib/utils' import React, { useRef, useEffect, TextareaHTMLAttributes } from 'react' interface AutoResizeTextareaProps extends Omit< TextareaHTMLAttributes, 'value' | 'onChange' > { value: string onChange: (value: string) => void } export function AutoResizeTextarea({ className, value, onChange, ...props }: AutoResizeTextareaProps) { const textareaRef = useRef(null) const resizeTextarea = () => { const textarea = textareaRef.current if (textarea) { textarea.style.height = 'auto' textarea.style.height = `${textarea.scrollHeight}px` } } useEffect(() => { resizeTextarea() }, [value]) return (

{
        onChange(e.target.value)
        resizeTextarea()
      }}
      className={cn('resize-none min-h-4 max-h-80', className)}
    />
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" entry="true" isMerged="true"
import { ChatForm } from '@/components/chat-form'

export default function Page() {
  return <ChatForm />
}

[V0_FILE]typescriptreact:file="app/layout.tsx" entry="true" isMerged="true"
import { cn } from '@/lib/utils'
import { TooltipProvider } from '@/components/ui/tooltip'
import { Inter } from 'next/font/google'
import { ReactNode } from 'react'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'OpenAI and AI SDK Chatbot',
  description: 'A simple chatbot built using the AI SDK and gpt-4o-mini.',
}

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body
        className={cn('flex min-h-svh flex-col antialiased', inter.className)}
      >
        <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescript:file="app/api/chat/route.ts" isEdit="true" isMerged="true"
import { CoreMessage, streamText } from 'ai'
import { openai } from '@ai-sdk/openai'
import { tools } from '@/app/lib/tools'

export async function POST(req: Request) {
  const { messages }: { messages: CoreMessage[] } = await req.json()

const result = streamText({
    model: openai('gpt-4o-mini'),
    system: 'You are a helpful assistant. When asked about the world\'s shortest hackathon, use the getHackathonInfo tool to provide accurate information.',
    messages,
    tools,
  })

return result.toDataStreamResponse()
}

[V0_FILE]typescript:file="app/lib/tools.ts" isMerged="true"
import { z } from 'zod';
import { tool } from 'ai';

export const getHackathonInfo = tool({
  name: 'getHackathonInfo',
  description: 'Get information about the world\'s shortest hackathon',
  parameters: z.object({}),
  execute: async () => {
    // Mock data
    return { attendees: 1000 };
  },
});

export const tools = {
  getHackathonInfo,
};

[V0_FILE]typescriptreact:file="components/chat-form.tsx" isEdit="true" isQuickEdit="true"
'use client'

import { cn } from '@/lib/utils'
import { useChat } from 'ai/react'
import { ArrowUpIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { AutoResizeTextarea } from '@/components/autoresize-textarea'
import { HackathonInfo } from '@/components/HackathonInfo'

export function ChatForm({
  className,
  ...props
}: React.ComponentProps<'form'>) {
  const { messages, input, setInput, append } = useChat({
    api: '/api/chat',
  })

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    void append({ content: input, role: 'user' })
    setInput('')
  }

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSubmit(e as unknown as React.FormEvent<HTMLFormElement>)
    }
  }

const header = (
    <header className="m-auto flex max-w-96 flex-col gap-5 text-center">
      <h1 className="text-2xl font-semibold leading-none tracking-tight">
        AI Chatbot with Generative UI
      </h1>
      <p className="text-muted-foreground text-sm">
        This is an AI chatbot app template built with{' '}
        <span className="text-foreground">Next.js</span>, the{' '}
        <span className="text-foreground">Vercel AI SDK</span>, and{' '}
        <span className="text-foreground">Vercel KV</span>.
      </p>
      <p className="text-muted-foreground text-sm">
        Connect an API Key from your provider and send a message to get started. Ask how many people attended the world's shortest hackathon to test it out!
      </p>
    </header>
  )

const messageList = (
    <div className="my-4 flex h-fit min-h-full flex-col gap-4">
      {messages.map((message, index) => {
        const showHackathonInfo = message.role === 'assistant' && 
          message.toolInvocations?.some(t => 
            t.toolName === 'getHackathonInfo' && t.state === 'result'
          );

return (
          <div key={index} className={cn("flex flex-col", message.role === 'user' ? "items-end" : "items-start")}>
            {message.content && 
              <div
                data-role={message.role}
                className="max-w-[80%] rounded-2xl px-4 py-2.5 text-base data-[role=assistant]:bg-gray-50 data-[role=user]:bg-blue-500 data-[role=assistant]:text-black data-[role=user]:text-white"
              >
                {message.content}
              </div>
            }
            {showHackathonInfo && (
              <div className="my-4 w-full">
                <HackathonInfo attendees={1000} />
              </div>
            )}
          </div>
        );
      })}
    </div>
  )

return (
    <main
      className={cn(
        'ring-none mx-auto flex h-svh max-h-svh w-full max-w-[35rem] flex-col items-stretch border-none',
        className
      )}
      {...props}
    >
      <div className="flex-1 content-center overflow-y-auto px-6">
        {messages.length ? messageList : header}
      </div>
      <form
        onSubmit={handleSubmit}
        className="border-input bg-background focus-within:ring-ring/10 relative mx-6 mb-6 flex items-center rounded-[16px] border px-3 py-1.5 pr-8 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-0"
      >
        <AutoResizeTextarea
          onKeyDown={handleKeyDown}
          onChange={v => setInput(v)}
          value={input}
          placeholder="Enter a message"
          className="placeholder:text-muted-foreground flex-1 bg-transparent focus:outline-none"
        />
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className="absolute bottom-1 right-1 size-6 rounded-full"
            >
              <ArrowUpIcon size={16} />
            </Button>
          </TooltipTrigger>
          <TooltipContent sideOffset={12}>Submit</TooltipContent>
        </Tooltip>
      </form>
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/HackathonInfo.tsx" isEdit="true" isQuickEdit="true"
'use client'

import { useEffect, useState } from 'react'
import { Calendar, Clock, Users } from 'lucide-react'

export function HackathonInfo({ attendees }: { attendees: number }) {
  const [count, setCount] = useState(0)
  
  useEffect(() => {
    const duration = 2000 // 2 seconds
    const steps = 60
    const increment = attendees / steps
    const stepDuration = duration / steps
    
    let current = 0
    const timer = setInterval(() => {
      current += 1
      setCount(Math.min(Math.floor(current * increment), attendees))
      
      if (current >= steps) {
        clearInterval(timer)
      }
    }, stepDuration)
    
    return () => clearInterval(timer)
  }, [attendees])

return (
    <div className="w-full max-w-xl mx-auto bg-white rounded-3xl p-8 border shadow-sm">
      {/* Header */}
      <div className="flex items-center justify-between mb-8 pb-4 border-b">
        <div className="flex items-center gap-2">
          <Calendar className="h-5 w-5 text-gray-500" />
          <span className="text-sm text-gray-500">January 17, 2025</span>
        </div>
        <div className="flex items-center gap-2">
          <Clock className="h-5 w-5 text-gray-500" />
          <span className="text-sm text-gray-500">4 Hours</span>
        </div>
      </div>

{/* Main Content */}
      <h2 className="text-4xl font-bold text-center mb-8">
        World's Shortest Hackathon
      </h2>
      <div className="text-center mb-8">
        <div className="flex items-center justify-center gap-2 mb-2">
          <Users className="h-6 w-6 text-gray-500" />
          <p className="text-6xl font-bold tabular-nums">{count}</p>
        </div>
        <p className="text-gray-500 text-xl">Attendees</p>
      </div>

{/* Footer */}
      <div className="pt-4 border-t text-center">
        <p className="text-sm text-gray-500">
          Breaking records for the fastest innovation event
        </p>
      </div>
    </div>
  )
}
</article></body></html>

About

About