Approval Card

1"use client";
2// beui.dev/components/agents/approval-card
3 
4import {
5  ArrowLeft,
6  ArrowRight,
7  Check,
8  CircleHelp,
9  LoaderCircle,
10  MessageSquareText,
11  X,
12} from "lucide-react";
13import { AnimatePresence, motion, useReducedMotion } from "motion/react";
14import { useCallback, useEffect, useRef, useState } from "react";
15import { AgentDisclosure } from "@/components/agents/agent-disclosure";
16import { ActionSwapRollText } from "@/components/motion/action-swap-roll";
17import { Button } from "@/components/motion/button";
18import { Checkbox } from "@/components/motion/checkbox";
19import { Input } from "@/components/motion/input";
20import { RadioGroup, RadioGroupItem } from "@/components/motion/radio";
21import { EASE_OUT, SPRING_SWAP } from "@/lib/ease";
22import { cn } from "@/lib/utils";
23import type {
24  ApprovalCardAnswer,
25  ApprovalCardAnswers,
26  ApprovalCardProps,
27  ApprovalCardQuestion,
28  ApprovalCardStatus,
29} from "./types";
30 
31export type {
32  ApprovalCardAnswer,
33  ApprovalCardAnswers,
34  ApprovalCardOption,
35  ApprovalCardProps,
36  ApprovalCardQuestion,
37  ApprovalCardStatus,
38} from "./types";
39 
40const EMPTY_ANSWER: ApprovalCardAnswer = { selected: [], custom: "" };
41 
42function getStatusLabel(status: ApprovalCardStatus) {
43  if (status === "submitting") return "Submitting";
44  if (status === "approved") return "Approved";
45  if (status === "rejected") return "Rejected";
46  if (status === "changes-requested") return "Changes requested";
47  if (status === "answered") return "Response submitted";
48  return "Input required";
49}
50 
51function getStatusClass(status: ApprovalCardStatus) {
52  if (status === "approved" || status === "answered") {
53    return "text-emerald-600 dark:text-emerald-400";
54  }
55  if (status === "rejected") return "text-rose-600 dark:text-rose-400";
56  if (status === "changes-requested") {
57    return "text-amber-600 dark:text-amber-400";
58  }
59  return "text-muted-foreground";
60}
61 
62function getStatusBadgeClass(status: ApprovalCardStatus) {
63  if (status === "pending" || status === "changes-requested") {
64    return "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400";
65  }
66  if (status === "submitting") {
67    return "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400";
68  }
69  if (status === "approved" || status === "answered") {
70    return "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
71  }
72  return "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400";
73}
74 
75// … truncated