Components
Input Box
A versatile chat input component designed for AI interfaces. It allows users to type prompts, attach files with visual previews, and select specific tools from a customizable dropdown menu.
Installation
bunx --bun shadcn@latest add https://komaui.iamkunal.in/r/input-box.jsonUsages
"use client"
import InputBox, { InputBoxToolType } from "@/components/input-box"
import { Globe, Image as ImageIcon, Paintbrush, TerminalSquare } from "lucide-react"
const AI_TOOLS: InputBoxToolType[] = [
{
icon: Globe,
value: "Web Search",
},
{
icon: ImageIcon,
value: "Create Images",
},
{
icon: Paintbrush,
value: "Canvas",
},
{
icon: TerminalSquare,
value: "Run Code",
},
]
export default function InputBoxDemo() {
const handleSubmit = async (text: string, images: File[], tool: string | null) => {
console.log("Text:", text);
console.log("Images attached:", images.length);
console.log("Tool selected:", tool);
// Simulating an async API call
await new Promise((resolve) => setTimeout(resolve, 1000));
alert("Check the console for submitted data!");
};
return (
<div className="flex w-full max-w-3xl items-center justify-center p-4">
<InputBox tools={AI_TOOLS} handleSubmit={handleSubmit} />
</div>
)
}Props
| Property | Type | Required | Description |
|---|---|---|---|
| className | string | No | Additional Tailwind CSS classes to apply to the outer wrapper container. |
| tools | InputBoxToolType[] | Yes | Array of tools to populate the dropdown menu. Each object requires a 'value' string and accepts an optional 'icon' React component. |
| handleSubmit | (text: string, images: File[], tool: string | null) => void | Promise<void> | No | Callback function triggered on submission. Receives the typed text, an array of selected files, and the currently selected tool value. |