Chat With Suggested Prompt Start

1"use client"
2 
3import * as React from "react"
4import { Avatar, AvatarFallback } from "@/components/ui/avatar"
5import { Badge } from "@/components/ui/badge"
6import { Bubble, BubbleContent } from "@/components/ui/bubble"
7import { Button } from "@/components/ui/button"
8import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
9import { Kbd, KbdGroup } from "@/components/ui/kbd"
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 { Textarea } from "@/components/ui/textarea"
20import { IconPlaceholder } from "@/components/icons/icon-placeholder"
21 
22/** Props a call site may pass through to an icon. */
23type IconProps = { className?: string; size?: number | string }
24 
25const suggestions = [
26  {
27    icon: (p: IconProps) => (
28      <IconPlaceholder
29        lucide="ChartBar"
30        tabler="IconChartBar"
31        hugeicons="BarChartIcon"
32        phosphor="ChartBar"
33        remixicon="RiBarChartBoxLine"
34        {...p}
35      />
36    ),
37    label: "Summarise last quarter's revenue",
38  },
39  {
40    icon: (p: IconProps) => (
41      <IconPlaceholder
42        lucide="FileText"
43        tabler="IconFileText"
44        hugeicons="File01Icon"
45        phosphor="FileText"
46        remixicon="RiFileTextLine"
47        {...p}
48      />
49    ),
50    label: "Draft a status update for stakeholders",
51  },
52  {
53    icon: (p: IconProps) => (
54      <IconPlaceholder
55        lucide="Lightbulb"
56        tabler="IconBulb"
57        hugeicons="Idea01Icon"
58        phosphor="Lightbulb"
59        remixicon="RiLightbulbLine"
60        {...p}
61      />
62    ),
63    label: "Suggest three ways to reduce churn",
64  },
65  {
66    icon: (p: IconProps) => (
67      <IconPlaceholder
68        lucide="Sparkles"
69        tabler="IconSparkles"
70        hugeicons="SparklesIcon"
71        phosphor="Sparkle"
72        remixicon="RiSparklingLine"
73        {...p}
74      />
75    ),
76    label: "What are my top action items today?",
77  },
78]
79 
80const CANNED_REPLIES = [
81  "Here's what I found: the latest figures are trending up across your core segments, with no anomalies worth flagging.",
82  "Good ask. I've put together a concise summary you can drop straight into your update: headline metric, main driver, and current risk.",
83// … truncated