ai-prompt-box

1import * as DialogPrimitive from "@radix-ui/react-dialog";
2import * as TooltipPrimitive from "@radix-ui/react-tooltip";
3import { AnimatePresence, motion } from "framer-motion";
4import {
5  ArrowUp,
6  BrainCog,
7  FolderCode,
8  Globe,
9  Mic,
10  Paperclip,
11  Square,
12  StopCircle,
13  X,
14} from "lucide-react";
15import Image from "next/image";
16import React from "react";
17 
18// Utility function for className merging
19const cn = (...classes: (string | undefined | null | false)[]) =>
20  classes.filter(Boolean).join(" ");
21 
22// Embedded CSS for minimal custom styles
23const styles = `
24  *:focus-visible {
25    outline-offset: 0 !important;
26    --ring-offset: 0 !important;
27  }
28  textarea::-webkit-scrollbar {
29    width: 6px;
30  }
31  textarea::-webkit-scrollbar-track {
32    background: transparent;
33  }
34  textarea::-webkit-scrollbar-thumb {
35    background-color: #444444;
36    border-radius: 3px;
37  }
38  textarea::-webkit-scrollbar-thumb:hover {
39    background-color: #555555;
40  }
41`;
42 
43// Hook to inject styles on client only
44const useStyleInjection = () => {
45  React.useEffect(() => {
46    const styleId = "ai-prompt-box-styles";
47    if (typeof document !== "undefined" && !document.getElementById(styleId)) {
48      const styleSheet = document.createElement("style");
49      styleSheet.id = styleId;
50      styleSheet.innerText = styles;
51      document.head.appendChild(styleSheet);
52    }
53  }, []);
54};
55 
56// Textarea Component
57interface TextareaProps
58  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
59  className?: string;
60}
61const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
62  ({ className, ...props }, ref) => (
63    <textarea
64      className={cn(
65        "scrollbar-thin scrollbar-thumb-[#444444] scrollbar-track-transparent hover:scrollbar-thumb-[#555555] flex min-h-[44px] w-full resize-none rounded-md border-none bg-transparent px-3 py-2.5 text-base text-gray-100 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
66        className,
67      )}
68      ref={ref}
69      rows={1}
70      {...props}
71    />
72  ),
73);
74Textarea.displayName = "Textarea";
75 
76// Tooltip Components
77const TooltipProvider = TooltipPrimitive.Provider;
78const Tooltip = TooltipPrimitive.Root;
79const TooltipTrigger = TooltipPrimitive.Trigger;
80const TooltipContent = React.forwardRef<
81  React.ElementRef<typeof TooltipPrimitive.Content>,
82  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
83// … truncated