Action Search Bar

1"use client";
2 
3/**
4 * @author: @kokonutui
5 * @description: A modern search bar component with action buttons and suggestions
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 {
14  AudioLines,
15  BarChart2,
16  LayoutGrid,
17  PlaneTakeoff,
18  Search,
19  Send,
20  Video,
21} from "lucide-react";
22import { AnimatePresence, motion } from "motion/react";
23import { useCallback, useEffect, useMemo, useState } from "react";
24import { Input } from "@/components/ui/input";
25import useDebounce from "@/hooks/use-debounce";
26 
27interface Action {
28  id: string;
29  label: string;
30  icon: React.ReactNode;
31  description?: string;
32  short?: string;
33  end?: string;
34}
35 
36interface SearchResult {
37  actions: Action[];
38}
39 
40const ANIMATION_VARIANTS = {
41  container: {
42    hidden: { opacity: 0, height: 0 },
43    show: {
44      opacity: 1,
45      height: "auto",
46      transition: {
47        height: { duration: 0.4 },
48        staggerChildren: 0.1,
49      },
50    },
51    exit: {
52      opacity: 0,
53      height: 0,
54      transition: {
55        height: { duration: 0.3 },
56        opacity: { duration: 0.2 },
57      },
58    },
59  },
60  item: {
61    hidden: { opacity: 0, y: 20 },
62    show: {
63      opacity: 1,
64      y: 0,
65      transition: { duration: 0.3 },
66    },
67    exit: {
68      opacity: 0,
69      y: -10,
70      transition: { duration: 0.2 },
71    },
72  },
73} as const;
74 
75const allActionsSample = [
76  {
77    id: "1",
78    label: "Book tickets",
79    icon: <PlaneTakeoff className="h-4 w-4 text-blue-500" />,
80    description: "Operator",
81    short: "⌘K",
82    end: "Agent",
83  },
84  {
85    id: "2",
86    label: "Summarize",
87    icon: <BarChart2 className="h-4 w-4 text-orange-500" />,
88    description: "gpt-5",
89    short: "⌘cmd+p",
90    end: "Command",
91  },
92  {
93    id: "3",
94    label: "Screen Studio",
95    icon: <Video className="h-4 w-4 text-purple-500" />,
96    description: "Claude 4.1",
97    short: "",
98    end: "Application",
99  },
100  {
101    id: "4",
102    label: "Talk to Jarvis",
103    icon: <AudioLines className="h-4 w-4 text-green-500" />,
104    description: "gpt-5 voice",
105    short: "",
106    end: "Active",
107  },
108  {
109    id: "5",
110    label: "Kokonut UI - Pro",
111    icon: <LayoutGrid className="h-4 w-4 text-blue-500" />,
112    description: "Components",
113    short: "",
114    end: "Link",
115  },
116];
117 
118function ActionSearchBar({
119  actions = allActionsSample,
120  defaultOpen = false,
121}: {
122  actions?: Action[];
123  defaultOpen?: boolean;
124}) {
125// … truncated