AI Elements Chat

1'use client';
2 
3// Install AI Elements components:
4// npx ai-elements@latest add conversation message prompt-input
5 
6import {
7  IconAdjustmentsHorizontal,
8  IconBolt,
9  IconMessageCircle,
10  IconPaperclip,
11  IconRefresh,
12  IconSparkles,
13} from '@tabler/icons-react';
14import type { ChatStatus } from 'ai';
15import { useEffect, useRef, useState } from 'react';
16import {
17  Conversation,
18  ConversationContent,
19  ConversationScrollButton,
20} from '@/components/ai-elements/conversation';
21import {
22  Message,
23  MessageContent,
24  MessageResponse,
25} from '@/components/ai-elements/message';
26import {
27  PromptInput,
28  PromptInputButton,
29  PromptInputFooter,
30  PromptInputSubmit,
31  PromptInputTextarea,
32  PromptInputTools,
33} from '@/components/ai-elements/prompt-input';
34import { Badge } from '@/components/ui/badge';
35import { Button } from '@/components/ui/button';
36import { cn } from '@/lib/utils';
37 
38interface DemoMessage {
39  id: string;
40  role: 'user' | 'assistant';
41  content: string;
42}
43 
44const INITIAL_MESSAGES: DemoMessage[] = [
45  {
46    id: 'intro',
47    role: 'assistant',
48    content:
49      '**Welcome back.** I can help you explore this chat block.\n\n- Draft UI copy\n- Summarize docs\n- Turn notes into tasks\n\nAsk me anything and I will respond with a demo reply.',
50  },
51  {
52    id: 'question',
53    role: 'user',
54    content: 'What makes this chat block reusable?',
55  },
56  {
57    id: 'answer',
58    role: 'assistant',
59    content:
60      'It is built with **AI Elements** for conversation layout and input, plus shadcn/ui for the chrome. That means you can drop it into other screens and wire it up to a real AI backend later.',
61  },
62];
63 
64const RESPONSES = [
65  '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 exactly as-is for a consistent UI.',
66  'If you want multi-model support, add a small model selector next to the status badge and pass the selection to your backend.',
67  'You can also inject tools like file upload or voice input by adding buttons to the prompt footer.',
68];
69 
70const pickResponse = (index: number) => RESPONSES[index % RESPONSES.length];
71 
72export default function Ai05() {
73  const [messages, setMessages] = useState<DemoMessage[]>(INITIAL_MESSAGES);
74  const [inputValue, setInputValue] = useState('');
75  const [status, setStatus] = useState<ChatStatus>('ready');
76  const replyTimeoutRef = useRef<number | null>(null);
77 
78  useEffect(() => {
79    return () => {
80// … truncated