Installation
npx shadcn@latest add @blocks/ai-03
@tabler/icons-react) and shadcn/ui components (button, dropdown-menu, textarea).
Usage
import Ai03 from "@/components/ai-03";
export default function Page() {
return <Ai03 />;
}
Features
A compact, feature-rich AI chat interface with extensive customization options:
Auto Mode
Intelligent Automation - Toggle automatic mode for AI-assisted workflows and smart suggestions.
<Button
variant="ghost"
size="sm"
onClick={() => setAutoMode(!autoMode)}
className={cn(
"h-7 px-2 rounded-full border border-border hover:bg-accent",
{
"bg-primary/10 text-primary border-primary/30": autoMode,
"text-muted-foreground": !autoMode,
}
)}
>
<IconWand className="size-3" />
<span className="text-xs">Auto</span>
</Button>
Configuration Dropdowns
Three dropdown menus for fine-grained control:
Model Selection
- Local - Run models on your device
- Cloud - Use cloud-hosted models
Agent Type
- Agent - Autonomous AI agent
- Assistant - Interactive AI assistant
Performance Level
- High - Maximum performance and accuracy
- Medium - Balanced performance
- Low - Resource-efficient mode
Attachment Options
Quick access to various tools via the plus button:
- Attach Files - Upload documents and images
- Code Interpreter - Execute and analyze code
- Web Search - Search the internet for context
- Chat History - Access previous conversations
Auto-Resizing Textarea
The textarea automatically adjusts its height based on content:
<Textarea
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Ask anything"
rows={1}
onInput={(e) => {
const target = e.target as HTMLTextAreaElement;
target.style.height = "auto";
target.style.height = target.scrollHeight + "px";
}}
/>
Component Props
This component doesn’t accept external props. State is managed internally:
Currently selected model (“Local” or “Cloud”)
Currently selected agent type (“Agent” or “Assistant”)
Performance level (“High”, “Medium”, or “Low”)
Whether auto mode is enabled
Customization
Changing Icon Sizes
All icons use consistent sizing which can be adjusted:
// Small icons (3x3)
<IconPlus className="size-3" />
// Medium icons (16x16 pixels)
<IconPaperclip size={16} className="opacity-60" />
Adding Custom Dropdown Items
Extend any dropdown menu with new options:
<DropdownMenuItem
className="rounded-[calc(1rem-6px)] text-xs"
onClick={() => handleCustomAction()}
>
<IconCustom size={16} className="opacity-60" />
Custom Option
</DropdownMenuItem>
Styling the Container
The component has a fixed width that can be modified:
<div className="w-xl"> {/* Change to w-full, w-2xl, etc. */}
{/* Component content */}
</div>
Customizing Border Radius
The component uses a 2xl border radius:
<div className="bg-background border border-border rounded-2xl overflow-hidden">
{/* Adjust rounded-2xl to rounded-xl, rounded-3xl, etc. */}
</div>
Implementation Details
State Management
The component manages multiple state variables for different settings:
const [input, setInput] = useState("");
const [selectedModel, setSelectedModel] = useState("Local");
const [selectedAgent, setSelectedAgent] = useState("Agent");
const [selectedPerformance, setSelectedPerformance] = useState("High");
const [autoMode, setAutoMode] = useState(false);
Submit Handler
The form submission is handled with validation:
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (input.trim()) {
// Handle submission
}
};
