Feedback Bar

1import * as React from "react";
2import { Slot } from "@radix-ui/react-slot";
3 
4import { cn } from "@/lib/utils";
5import { Kbd } from "@/components/ui/kbd";
6import {
7  Tooltip,
8  TooltipContent,
9  TooltipProvider,
10  TooltipTrigger,
11} from "@/components/ui/tooltip";
12 
13type FeedbackBarTooltip =
14  | string
15  | {
16      content?: string;
17      side?: "top" | "right" | "bottom" | "left";
18      shortcut?: string;
19    };
20 
21type FeedbackBarProps = React.HTMLAttributes<HTMLDivElement>;
22 
23function FeedbackBar({ className, ...props }: FeedbackBarProps) {
24  return (
25    <div
26      data-slot="feedback-bar"
27      role="group"
28      aria-label="Feedback bar"
29      className={cn(
30        "inline-flex h-12 w-full max-w-110 rounded-xl border dark:border-accent bg-card text-sm",
31        className,
32      )}
33      {...props}
34    />
35  );
36}
37 
38type FeedbackBarContentProps = React.HTMLAttributes<HTMLDivElement>;
39 
40function FeedbackBarContent({ className, ...props }: FeedbackBarContentProps) {
41  return (
42    <div
43      data-slot="feedback-bar-content"
44      className={cn("flex w-full items-center justify-between", className)}
45      {...props}
46    />
47  );
48}
49 
50type FeedbackBarPromptProps = React.HTMLAttributes<HTMLDivElement>;
51 
52function FeedbackBarPrompt({ className, ...props }: FeedbackBarPromptProps) {
53  return (
54    <div
55      data-slot="feedback-bar-prompt"
56      className={cn(
57        "flex h-full w-full items-center justify-start gap-2.5 pl-4",
58        className,
59      )}
60      {...props}
61    />
62  );
63}
64 
65type FeedbackBarLabelProps = React.HTMLAttributes<HTMLSpanElement>;
66 
67function FeedbackBarLabel({ className, ...props }: FeedbackBarLabelProps) {
68  return (
69    <span
70      data-slot="feedback-bar-label"
71      className={cn("text-sm font-[350] text-foreground", className)}
72      {...props}
73    />
74  );
75}
76 
77type FeedbackBarActionsProps = React.HTMLAttributes<HTMLDivElement>;
78 
79function FeedbackBarActions({ className, ...props }: FeedbackBarActionsProps) {
80  return (
81    <div
82      data-slot="feedback-bar-actions"
83      className={cn(
84        "flex h-full items-center justify-center gap-1.5 px-2",
85        className,
86      )}
87      {...props}
88    />
89  );
90}
91 
92type FeedbackBarActionProps = React.HTMLAttributes<HTMLDivElement> & {
93  asChild?: boolean;
94  tooltip?: FeedbackBarTooltip;
95};
96 
97function FeedbackBarAction({
98  asChild = false,
99  tooltip,
100  className,
101  ...props
102}: FeedbackBarActionProps) {
103  const Comp = asChild ? Slot : "div";
104  const { content, side, shortcut } =
105// … truncated