AI Input Search

1"use client";
2 
3/**
4 * @author: @kokonutui
5 * @description: AI Input Search
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { Globe, Paperclip, Send } from "lucide-react";
14import { AnimatePresence, motion } from "motion/react";
15import { useState } from "react";
16import { Textarea } from "@/components/ui/textarea";
17import { useAutoResizeTextarea } from "@/hooks/use-auto-resize-textarea";
18import { cn } from "@/lib/utils";
19 
20interface AIInputSearchProps {
21  placeholder?: string;
22  searchLabel?: string;
23  onSubmit?: (value: string) => void;
24  className?: string;
25}
26 
27export default function AI_Input_Search({
28  placeholder = "Search the web...",
29  searchLabel = "Search",
30  onSubmit,
31  className,
32}: AIInputSearchProps) {
33  const [value, setValue] = useState("");
34  const { textareaRef, adjustHeight } = useAutoResizeTextarea({
35    minHeight: 52,
36    maxHeight: 200,
37  });
38  const [showSearch, setShowSearch] = useState(true);
39  const [isFocused, setIsFocused] = useState(false);
40 
41  const handleSubmit = () => {
42    onSubmit?.(value);
43    setValue("");
44    adjustHeight(true);
45  };
46 
47  const handleFocus = () => {
48    setIsFocused(true);
49  };
50 
51  const handleBlur = () => {
52    setIsFocused(false);
53  };
54 
55  const handleContainerClick = () => {
56    if (textareaRef.current) {
57      textareaRef.current.focus();
58    }
59  };
60 
61  return (
62    <div className={cn("w-full py-4", className)}>
63      <div className="relative mx-auto w-full max-w-xl">
64        <div
65          aria-label="Search input container"
66          className={cn(
67            "relative flex w-full cursor-text flex-col rounded-xl text-left transition-all duration-200",
68            "ring-1 ring-black/10 dark:ring-white/10",
69            isFocused && "ring-black/20 dark:ring-white/20"
70          )}
71          onClick={handleContainerClick}
72          onKeyDown={(e) => {
73            if (e.key === "Enter" || e.key === " ") {
74              handleContainerClick();
75            }
76          }}
77          role="textbox"
78          tabIndex={0}
79        >
80          <div className="max-h-[200px] overflow-y-auto">
81            <Textarea
82              className="w-full resize-none rounded-xl rounded-b-none border-none bg-black/5 px-4 py-3 leading-[1.2] placeholder:text-black/70 focus-visible:ring-0 dark:bg-white/5 dark:text-white dark:placeholder:text-white/70"
83              id="ai-input-04"
84              onBlur={handleBlur}
85// … truncated