Chamaac UI

Components

  • Overview

    • Introduction

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • Interactive GridNew

  • Buttons

    • Buttons Overview
    • Premium Button
    • Glowing BorderNew
    • Shimmer Button
    • Slide Up Button
    • Focus Button
    • Neo Brutalist

  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text

  • Inputs

    • AI InputNew

  • Navigation

    • Dock

  • Sections

    • Stats CardsNew
    • Feature Steps
    • Gauge

  • Carousels

    • Carousel

AI Input

A polished AI input component with model selection, tools dropdown, file uploads, and smooth animations. Inspired from Google Gemini.

Full Page Component

This component is designed to take up the full viewport height. Click below to see the live preview.

Installation

npx shadcn@latest add https://chamaac.com/r/ai-input.json

Props

PropTypeDefaultDescription
modelsModel[]DEFAULT_MODELSArray of AI models to display in the model selector dropdown. Each model has id, name, label, and icon.
toolsToolItem[]DEFAULT_TOOLSArray of tools to display in the tools dropdown. Each tool has an icon and label.
plusMenuItemsMenuItem[]DEFAULT_PLUS_MENUArray of items for the plus button menu. Each item has id, icon, and label.
onSubmit(message: string, attachments: Attachment[]) => void-Callback function called when user submits a message. Receives the message text and array of attachments.
placeholderstring"Ask anything..."Placeholder text for the input textarea.
classNamestring""Custom class names for styling the container.

AIInputDropdown

Generic dropdown component used for plus menu, tools, and model selection.

Props

PropTypeDefaultDescription
isOpen*boolean-Whether the dropdown is open
onClose*() => void-Callback when dropdown should close
items*T[]-Array of items to display in the dropdown
renderItem(item: T, index: number) => ReactNode-Custom render function for dropdown items
classNamestring""Custom class names for styling

AIInputPillButton

Styled pill button with optional chevron and close button, used for tools and model selectors.

Props

PropTypeDefaultDescription
children*React.ReactNode-Content to display inside the pill
isActivebooleanfalseWhether the pill is in active state
showChevronbooleanfalseWhether to show chevron indicator
chevronRotatedbooleanfalseWhether chevron should be rotated (for open state)
showClosebooleanfalseWhether to show close (X) button
onClose() => void-Callback when close button is clicked
onClick() => void-Callback when pill is clicked
layoutIdstring-Framer Motion layoutId for shared animations
iconReact.ComponentType-Icon component to display before children

AIInputMessages

Message display area with auto-scroll and attachment previews.

Props

PropTypeDefaultDescription
messages*Message[]-Array of messages to display
hasSubmitted*boolean-Whether user has submitted at least one message
messagesEndRef*React.RefObject<HTMLDivElement>-Ref for auto-scrolling to bottom

AIInputFilePreview

Preview area for uploaded files with remove functionality.

Props

PropTypeDefaultDescription
files*UploadedFile[]-Array of uploaded files to preview
onRemove*(id: string) => void-Callback when remove button is clicked