AI Chat Interface

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Textarea } from "@/components/ui/textarea";
5import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
6import {
7  ArrowUpRight,
8  ChevronDown,
9  Clock,
10  Link2,
11  Mail,
12  MessageSquare,
13  Share2,
14  Sparkles,
15  Star,
16  Zap,
17} from "lucide-react";
18import { useEffect, useRef, useState } from "react";
19 
20type DropdownType = "share" | "quick" | "history" | "magic" | "model" | null;
21 
22type ActionOption = {
23  icon: typeof Link2;
24  label: string;
25  action: string;
26};
27 
28const shareOptions: ActionOption[] = [
29  { icon: Link2, label: "Copy link", action: "copy-link" },
30  { icon: Mail, label: "Email", action: "email" },
31  { icon: MessageSquare, label: "Slack", action: "slack" },
32];
33 
34const quickOptions: ActionOption[] = [
35  { icon: Sparkles, label: "Summarize", action: "summarize" },
36  { icon: Sparkles, label: "Improve", action: "improve" },
37  { icon: Sparkles, label: "Translate", action: "translate" },
38];
39 
40const historyOptions: ActionOption[] = [
41  { icon: Clock, label: "Last hour", action: "history-1h" },
42  { icon: Clock, label: "Today", action: "history-today" },
43  { icon: Clock, label: "This week", action: "history-week" },
44];
45 
46const magicOptions: ActionOption[] = [
47  { icon: Sparkles, label: "Auto-complete", action: "magic-complete" },
48  { icon: Sparkles, label: "Storyboard", action: "magic-storyboard" },
49  { icon: Sparkles, label: "Rephrase", action: "magic-rephrase" },
50];
51 
52const models = ["GPT 5.0", "GPT 4.5 Turbo", "GPT 4.0", "Claude 3.5 Sonnet"];
53 
54export function AIChatInterface() {
55  const [inputValue, setInputValue] = useState("");
56  const [isFocused, setIsFocused] = useState(false);
57  const [activeDropdown, setActiveDropdown] = useState<DropdownType>(null);
58  const [selectedModel, setSelectedModel] = useState(models[0]);
59  const prefersReducedMotion = useReducedMotion();
60  const textareaRef = useRef<HTMLTextAreaElement>(null);
61  const dropdownRef = useRef<HTMLDivElement>(null);
62 
63  const shouldAnimate = !prefersReducedMotion;
64 
65  useEffect(() => {
66    function handleClickOutside(event: MouseEvent) {
67      if (
68        dropdownRef.current &&
69        !dropdownRef.current.contains(event.target as Node)
70      ) {
71        setActiveDropdown(null);
72      }
73    }
74 
75    document.addEventListener("mousedown", handleClickOutside);
76    return () => document.removeEventListener("mousedown", handleClickOutside);
77  }, []);
78 
79  const handleTextareaChange = (
80// … truncated