Live Chat With Typing Indicator

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
5import { Bubble, BubbleContent } from "@/components/ui/bubble"
6import { Button } from "@/components/ui/button"
7import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
8import { Kbd, KbdGroup } from "@/components/ui/kbd"
9import { Marker, MarkerContent } from "@/components/ui/marker"
10import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"
11import {
12  MessageScroller,
13  MessageScrollerButton,
14  MessageScrollerContent,
15  MessageScrollerItem,
16  MessageScrollerProvider,
17  MessageScrollerViewport,
18} from "@/components/ui/message-scroller"
19import { Separator } from "@/components/ui/separator"
20import { Textarea } from "@/components/ui/textarea"
21import { cn } from "@/lib/utils"
22import { IconPlaceholder } from "@/components/icons/icon-placeholder"
23 
24type MessageRole = "user" | "assistant"
25 
26interface ChatMessage {
27  id: number
28  role: MessageRole
29  content: string
30}
31 
32const initialMessages: ChatMessage[] = [
33  {
34    id: 1,
35    role: "assistant",
36    content:
37      "Hi, I'm Acme Copilot. Ask me to draft, summarise, or plan something and I'll get to work.",
38  },
39  {
40    id: 2,
41    role: "user",
42    content: "What can you help me with on the Acme dashboard?",
43  },
44  {
45    id: 3,
46    role: "assistant",
47    content:
48      "Plenty. I can surface revenue trends, draft customer replies, generate release notes, and explain any metric you click on. Want me to start with a quick weekly summary?",
49  },
50]
51 
52const cannedReplies: string[] = [
53  "Got it. Here's a quick take: your weekly active users are up 12% and trial conversion held steady at 4.8%. Want me to break this down by plan tier?",
54  "Done. I drafted three subject-line variants and a 90-word body for the launch email, each tuned for a slightly different audience. I can refine the tone if you'd like.",
55  "Sure thing. The top driver this week was the Acme Pro upgrade flow (+$18.4k). I can pull the full attribution report whenever you're ready.",
56  "Here's a starting outline with five sections and suggested owners. Let me know which part you'd like me to expand first.",
57]
58 
59const suggestions: string[] = [
60  "Summarise This Week",
61  "Draft A Launch Email",
62  "Explain Churn Rate",
63]
64 
65export default function AiChatBlock() {
66  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages)
67  const [draft, setDraft] = useState("")
68// … truncated