# Chat with Model Menu > A chat with model menu block. A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/chat-02). - Page, with a live preview: https://shadcn.exchange/r/blocks-so/chat-02 - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/chat-02-light-e5055477e7c2ea51.png - Registry item: https://blocks.so/r/chat-02.json - Categories: chat - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://blocks.so/r/chat-02.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `@tabler/icons-react` - Registry items: `bubble`, `button`, `dropdown-menu`, `input-group`, `message`, `message-scroller`, `textarea` ## Files ### `content/components/chat/chat-02.tsx` ```tsx 'use client'; import { IconArrowUp, IconChevronDown, IconCopy, IconDots, IconMicrophone, IconPaperclip, IconPencil, IconPhoto, IconPlayerStopFilled, IconPlus, IconRefresh, IconThumbDown, IconThumbUp, IconVolume, IconWorldSearch, } from '@tabler/icons-react'; import type React from 'react'; import { useState } from 'react'; import { Bubble, BubbleContent } from '@/components/ui/bubble'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea, } from '@/components/ui/input-group'; import { Message, MessageContent, MessageFooter, } from '@/components/ui/message'; import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, } from '@/components/ui/message-scroller'; import { Textarea } from '@/components/ui/textarea'; import { cn } from '@/lib/utils'; type Turn = { id: string; role: 'user' | 'assistant'; text: string; streaming?: boolean; }; const thread: Turn[] = [ { id: '1', role: 'user', text: 'Is it true that a day on Venus is longer than its year?', }, { id: '2', role: 'assistant', text: 'Yes. Venus takes 243 Earth days to rotate once, but only 225 days to orbit the Sun, so its day is longer than its year.\n\nIt also spins in the opposite direction to most planets, which means the Sun rises in the west there.', }, { id: '3', role: 'user', text: 'How hot does it get on the surface?' }, { id: '4', role: 'assistant', text: 'The surface sits around 465°C, hot enough to melt lead. The atmosphere traps so much heat that Venus stays hotter than Mercury, even though Mercury is much closer to the Sun.', }, { id: '5', role: 'user', text: 'How long would a person survive there without a suit?', }, { id: '6', role: 'assistant', text: "A few seconds at most. The pressure down there is 92 times Earth's, similar to being 900 meters underwater, and the heat alone would be fatal almost immediately.\n\nFor reference, the Soviet Venera landers were built for those conditions and still failed within about two hours.", }, ]; const replies = [ 'Good question. Venus has no moons and no rings, which makes it unusual among the inner planets. Most explanations point to its slow, retrograde spin: any moon it once had would have drifted inward and been pulled apart by tidal forces.\n\nMercury is the only other moonless planet in the solar system.', 'The clouds are mostly sulfuric acid droplets, sitting about 50 to 70 km above the surface. They reflect roughly 75% of incoming sunlight, which is why Venus is the brightest object in our sky after the Moon.\n\nBelow the clouds the air is almost entirely carbon dioxide, with pressure about 92 times that of Earth at sea level.', 'Several landers have made it down. The Soviet Venera 7 was the first to transmit from the surface in 1970, and Venera 13 survived for 127 minutes in 1982, long enough to send back the first color photos.\n\nNothing has lasted more than a couple of hours; the heat and pressure destroy electronics quickly.', ]; const levels = [ { name: 'Instant', hint: '5.5' }, { name: 'Medium' }, { name: 'High' }, { name: 'Extra High' }, { name: 'Pro' }, ]; const models = [ 'GPT-6', 'GPT-5.6 Sol', 'GPT-6 Astra', 'GPT-5.6 Terra', 'GPT-5.6 Luna', ]; const thinkDelay = 600; const wordDelay = 35; const easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]'; const press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`; const enter = `${easeOut} motion-reduce:slide-in-from-bottom-0 fade-in slide-in-from-bottom-1 animate-in duration-200`; const swap = `${easeOut} fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150`; const item = 'rounded-lg px-2.5 py-1.75 text-[13px]'; export default function Chat02() { const [turns, setTurns] = useState(thread); const [draft, setDraft] = useState(''); const [tall, setTall] = useState(false); const [listening, setListening] = useState(false); const [level, setLevel] = useState('Extra High'); const [model, setModel] = useState('GPT-5.6 Sol'); const [replyIndex, setReplyIndex] = useState(0); const [edit, setEdit] = useState<{ id: string; text: string } | null>(null); const streaming = turns.some((t) => t.streaming); const stream = (replyId: string) => { const words = replies[replyIndex % replies.length].split(' '); setReplyIndex(replyIndex + 1); setTurns((prev) => prev.map((t) => t.id === replyId ? { ...t, text: '', streaming: true } : t ) ); let shown = 0; setTimeout(() => { const timer = setInterval(() => { shown += 1; const done = shown >= words.length; setTurns((prev) => prev.map((t) => t.id === replyId ? { ...t, text: words.slice(0, shown).join(' '), streaming: !done, } : t ) ); if (done) { clearInterval(timer); } }, wordDelay); }, thinkDelay); }; const send = (e: React.FormEvent) => { e.preventDefault(); const text = draft.trim(); if (!text || streaming) { return; } const replyId = crypto.randomUUID(); setTurns([ ...turns, { id: crypto.randomUUID(), role: 'user', text }, { id: replyId, role: 'assistant', text: '' }, ]); setDraft(''); setTall(false); stream(replyId); }; const resend = () => { const text = edit?.text.trim(); if (!(edit && text) || streaming) { return; } const at = turns.findIndex((t) => t.id === edit.id); const reply = turns[at + 1]; setTurns(turns.map((t) => (t.id === edit.id ? { ...t, text } : t))); setEdit(null); if (reply?.role === 'assistant') { stream(reply.id); } }; const body = (turn: Turn, align: 'start' | 'end') => { if (edit?.id === turn.id) { return ( <>