gooey-ai

1"use client";
2
3import { cn } from "@/lib/utils";
4import { ArrowUp, PlusIcon, Square } from "lucide-react";
5import { easeOut, motion } from "motion/react";
6import {
7  createContext,
8  ReactNode,
9  useContext,
10  useEffect,
11  useRef,
12  useState,
13} from "react";
14
15type GooeyAIContextType = {
16  value: string;
17  setValue: React.Dispatch<React.SetStateAction<string>>;
18  isLoading: boolean;
19  onSubmit: () => void;
20
21  isExpanded: boolean;
22  setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
23
24  rootRef: React.RefObject<HTMLDivElement | null>;
25};
26
27const GooeyAIContext = createContext<GooeyAIContextType | null>(null);
28function useGooeyAI() {
29  const context = useContext(GooeyAIContext);
30
31  if (!context) {
32    throw new Error("GooeyAI components must be inside <GooeyAI>");
33  }
34
35  return context;
36}
37
38type GooeyAIProps = {
39  children: ReactNode;
40  value: string;
41  setValue: React.Dispatch<React.SetStateAction<string>>;
42  isLoading: boolean;
43  onSubmit: () => void;
44};
45
46export function GooeyAI({
47  children,
48  value,
49  setValue,
50  isLoading,
51  onSubmit,
52}: GooeyAIProps) {
53  const [isExpanded, setIsExpanded] = useState(false);
54
55  const rootRef = useRef<HTMLDivElement>(null);
56
57  useEffect(() => {
58    if (!isExpanded) return;
59
60    function handleOutsideClick(e: MouseEvent) {
61      if (rootRef.current?.contains(e.target as Node)) return;
62      setIsExpanded(false);
63    }
64
65    document.addEventListener("pointerdown", handleOutsideClick);
66
67    return () =>
68      document.removeEventListener("pointerdown", handleOutsideClick);
69  }, [isExpanded]);
70
71  return (
72    <GooeyAIContext.Provider
73      value={{
74        value,
75        setValue,
76        isLoading,
77        onSubmit,
78        isExpanded,
79        setIsExpanded,
80        rootRef,
81      }}
82    >
83      <div
84        style={{
85          filter: "url(#gooey-AI)",
86        }}
87        className="flex flex-col justify-center space-y-2"
88      >
89        <GooeyFilter />
90
91        <div
92          ref={rootRef}
93          className="relative w-14 h-14 flex items-center justify-center"
94        >
95          {children}
96        </div>
97      </div>
98    </GooeyAIContext.Provider>
99  );
100}
101
102export function GooeyAIButton({ className }: { className?: string }) {
103  const { isExpanded, setIsExpanded } = useGooeyAI();
104
105  return (
106    <button
107      onClick={() => setIsExpanded(!isExpanded)}
108      className={cn(
109// … truncated