AI Chat 1

1'use client'
2 
3import { useEffect, useRef, useState } from 'react'
4import { useReducedMotion } from 'motion/react'
5import { ArrowUp, RotateCw, Sparkles, Square, ThumbsDown, ThumbsUp } from 'lucide-react'
6import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
7import { Button } from '@/components/ui/button'
8import { ScrollArea } from '@/components/ui/scroll-area'
9import { Spinner } from '@/components/ui/spinner'
10import { Textarea } from '@/components/ui/textarea'
11import { chatMessages, streamedReply, suggestions, type ChatMessage } from "@/components/data/ai-chat-1-data"
12import { AiChat1MessageBody } from './ai-chat-1-message-body'
13 
14const userAvatar =
15  'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/sarah-johnson.400w.01a6ba.avif'
16 
17/**
18 * No AI SDK and no markdown dependency: the thread is plain React over typed blocks, so it
19 * drops onto any backend. Replace `AiChat1MessageBody` with your own renderer and `startStream`
20 * with your streaming call; every state around them stays as it is.
21 */
22 
23export function AiChat1() {
24  const [messages, setMessages] = useState<ChatMessage[]>(chatMessages)
25  const [streaming, setStreaming] = useState(false)
26  const [streamed, setStreamed] = useState('')
27  const [feedback, setFeedback] = useState<Record<string, 'up' | 'down'>>({})
28  const [draft, setDraft] = useState('')
29  const cancelled = useRef(false)
30  const reduceMotion = useReducedMotion()
31 
32  const fullReply = streamedReply[0].kind === 'text' ? streamedReply[0].text : ''
33 
34  const startStream = () => {
35    cancelled.current = false
36    setStreamed('')
37    setStreaming(true)
38  }
39 
40  useEffect(() => {
41    if (!streaming) {
42      return
43    }
44 
45    const words = fullReply.split(' ')
46    let index = 0
47 
48    // Reduced motion gets the whole answer at once rather than a typewriter.
49    if (reduceMotion) {
50      setStreamed(fullReply)
51      setStreaming(false)
52      setMessages(current => [
53        ...current,
54        { id: `m-${Date.now()}`, role: 'assistant', blocks: streamedReply },
55      ])
56      return
57    }
58 
59    const timer = window.setInterval(() => {
60      if (cancelled.current) {
61        window.clearInterval(timer)
62        return
63      }
64 
65      index += 1
66      setStreamed(words.slice(0, index).join(' '))
67 
68      if (index >= words.length) {
69        window.clearInterval(timer)
70        setStreaming(false)
71        setMessages(current => [
72          ...current,
73// … truncated