Assistant Thread With Timestamps

1"use client"
2 
3import * as React 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 { Input } from "@/components/ui/input"
9import {
10  Message,
11  MessageAvatar,
12  MessageContent,
13  MessageFooter,
14} from "@/components/ui/message"
15import {
16  MessageScroller,
17  MessageScrollerButton,
18  MessageScrollerContent,
19  MessageScrollerItem,
20  MessageScrollerProvider,
21  MessageScrollerViewport,
22} from "@/components/ui/message-scroller"
23import { Separator } from "@/components/ui/separator"
24import { IconPlaceholder } from "@/components/icons/icon-placeholder"
25 
26type MessageRole = "user" | "assistant"
27 
28interface ChatMessage {
29  id: number
30  role: MessageRole
31  content: string
32  time: string
33}
34 
35const userAvatar = "https://i.pravatar.cc/150?img=24"
36const userName = "Jordan Davis"
37 
38const INITIAL_MESSAGES: ChatMessage[] = [
39  {
40    id: 1,
41    role: "assistant",
42    content:
43      "Hello! I'm Acme AI. How can I help you today? You can ask me anything about your account, products, or support topics.",
44    time: "9:41 AM",
45  },
46  {
47    id: 2,
48    role: "user",
49    content: "Can you summarise last quarter's revenue for the EMEA region?",
50    time: "9:42 AM",
51  },
52  {
53    id: 3,
54    role: "assistant",
55    content:
56      "Sure! EMEA revenue for Q3 2024 was $2.84M, up 18.3% quarter-over-quarter. The strongest contributors were the UK (+$420k), Germany (+$310k), and France (+$275k). Churn remained low at 2.1%, and new logo ARR accounted for 34% of the total.",
57    time: "9:42 AM",
58  },
59  {
60    id: 4,
61    role: "user",
62    content: "Great. Which product line drove the most growth?",
63    time: "9:43 AM",
64  },
65  {
66    id: 5,
67    role: "assistant",
68    content:
69      "The Acme Pro tier led growth, contributing $1.12M (+26% QoQ). Enterprise seats added 41 upsells this quarter. The legacy Starter plan declined by $88k as customers migrated to Pro, which is expected per our migration roadmap.",
70    time: "9:43 AM",
71  },
72]
73 
74const CANNED_REPLIES = [
75  "Got it. Let me pull that together. Based on the latest data, the trend is holding steady with healthy growth across your top segments.",
76  "Good question. The numbers point to a positive trajectory; I'd recommend reviewing the dashboard for the segment-level breakdown.",
77// … truncated