'use client'; // Install AI Elements components: // npx ai-elements@latest add conversation message prompt-input import { IconAdjustmentsHorizontal, IconBolt, IconPaperclip, IconPlus, } from '@tabler/icons-react'; import type { ChatStatus } from 'ai'; import { useState } from 'react'; import { Conversation, ConversationContent, ConversationScrollButton, } from '@/components/ai-elements/conversation'; import { Message, MessageContent, MessageResponse, } from '@/components/ai-elements/message'; import { PromptInput, PromptInputButton, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, PromptInputTools, } from '@/components/ai-elements/prompt-input'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; interface DemoMessage { id: string; role: 'user' | 'assistant'; content: string; } const INITIAL_MESSAGES: DemoMessage[] = [ { id: 'intro', role: 'assistant', content: 'Hi, I am your workspace assistant. I can draft copy, summarize documents, and turn notes into tasks. What are you working on?', }, { id: 'question', role: 'user', content: 'Summarize the Q3 launch plan in three bullets.', }, { id: 'answer', role: 'assistant', content: '- **Ship the new onboarding** by Sept 18 with an A/B test on pricing.\n- **Open EU and APAC** with localized checkout.\n- **Launch the partner API** in private beta with 12 partners.', }, ]; const SUGGESTIONS = [ 'Draft a launch announcement', 'List open risks', 'Turn this into tasks', ]; const RESPONSES = [ 'Here is a quick outline you can reuse:\n\n1. Swap the mock response with a real API call.\n2. Stream tokens into `MessageResponse`.\n3. Keep the layout as-is for a consistent UI.', 'If you want multi-model support, add a small model selector to the prompt footer and pass the selection to your backend.', 'You can also inject tools like file upload or voice input by adding buttons to the prompt footer.', ]; export default function Ai05() { const [messages, setMessages] = useState(INITIAL_MESSAGES); const [inputValue, setInputValue] = useState(''); const [status, setStatus] = useState('ready'); const handleSend = (text: string) => { const trimmed = text.trim(); if (!trimmed || status !== 'ready') { return; } setMessages((prev) => [ ...prev, { id: `user-${Date.now()}`, role: 'user', content: trimmed }, ]); setInputValue(''); setStatus('submitted'); window.setTimeout(() => { setMessages((prev) => [ ...prev, { id: `assistant-${Date.now()}`, role: 'assistant', content: RESPONSES[messages.length % RESPONSES.length], }, ]); setStatus('ready'); }, 1200); }; const handleReset = () => { setMessages(INITIAL_MESSAGES.slice(0, 1)); setInputValue(''); setStatus('ready'); }; return (

Assistant Online

{messages.map((message) => ( {message.role === 'assistant' ? ( {message.content} ) : (

{message.content}

)} ))} {status === 'submitted' && ( {[0, 1, 2].map((dot) => ( ))} )}

{SUGGESTIONS.map((suggestion) => ( ))}

handleSend(message.text)} > setInputValue(event.currentTarget.value)} placeholder="Message Assistant..." value={inputValue} />

); }