SuggestedActions

1"use client"
2 
3import { Badge } from "@/components/ui/badge"
4import { Button } from "@/components/ui/button"
5import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
6 
7export type SuggestedAction = {
8  label: string
9  prompt: string
10  description?: string
11}
12 
13export type SuggestedActionsProps = {
14  title: string
15  description?: string
16  actions: SuggestedAction[]
17  isLoading?: boolean
18  isDisabled?: boolean
19  error?: {
20    title: string
21    description?: string
22  }
23  onAction?: (action: SuggestedAction) => void
24}
25 
26export function SuggestedActions({
27  title,
28  description,
29  actions,
30  isLoading,
31  isDisabled,
32  error,
33  onAction,
34}: SuggestedActionsProps) {
35  const areActionsDisabled = isDisabled || !onAction
36 
37  return (
38    <Card className="w-full max-w-2xl" data-fable-ui="suggested-actions" aria-busy={isLoading || undefined}>
39      <CardHeader>
40        <div className="flex items-start justify-between gap-3">
41          <div className="flex flex-col gap-1">
42            <CardTitle className="text-base">{title || "Suggested actions"}</CardTitle>
43            {description ? <CardDescription>{description}</CardDescription> : null}
44          </div>
45          <Badge variant="secondary">safe prompts</Badge>
46        </div>
47      </CardHeader>
48      <CardContent className="flex flex-col gap-3">
49        {isLoading ? (
50          <p className="text-sm text-muted-foreground">Preparing suggestions...</p>
51        ) : error ? (
52          <div className="rounded-md border border-destructive/20 bg-destructive/5 p-3">
53            <p className="text-sm font-medium text-destructive">{error.title}</p>
54            {error.description ? <p className="text-sm text-muted-foreground">{error.description}</p> : null}
55          </div>
56        ) : actions.length === 0 ? (
57          <p className="text-sm text-muted-foreground">No safe follow-up actions are available.</p>
58        ) : (
59          actions.map((action) => (
60            <Button
61              key={`${action.label}-${action.prompt}`}
62              type="button"
63              variant="outline"
64              className="h-auto justify-start whitespace-normal px-3 py-2 text-left "
65              disabled={areActionsDisabled}
66              onClick={() => onAction?.(action)}
67            >
68              <span className="flex flex-col gap-1">
69                <span>{action.label}</span>
70                {action.description ? (
71// … truncated