shadcn.io is not affiliated with official shadcn/ui
Telegram Style Chat Block for Solid
A bot thread whose inline keyboard sits under its message: Next edits the bubble in place, a Spicy button flips its own label, and picking a dish swaps the keyboard for one line and a Change button.
Installation
Overview
Show a bot with an inline keyboard, with this keyboard style chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Skyhook, a desktop messenger. Lunchbot, marked as a bot, asks "Where today?" and its Bubble carries a keyboard of Buttons under it: three dishes, a paging row (Previous, "2 of 3", Next) and a Spicy button. Next edits the bubble in place with no new message and adds "edited" to its footer; Spicy flips its own label and narrows the list; picking a dish replaces the keyboard with "You picked Tacos" and one Change button that brings it back. The keyboard never posts a message from you. A reply carries a quote with a start rule. The composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only. For a bot, a command menu in a chat or any thread with buttons.
FAQ
How does the keyboard edit its message?
The keyboard's state (page, Spicy and the dish picked) lives apart from the message list, so pressing a button changes the same bubble and adds nothing to the log. The footer gains "edited" after the first change. The picked state and the dishes share one grid cell, so the bubble never changes height.
How do the pages work?
The dishes are typed. Spicy keeps only the hot ones, the page count is derived from the list, and a page with fewer than three dishes keeps blank seats so the keyboard stays the same height. Previous and Next are disabled at the ends.
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. The bot only answers typed text; the buttons say what they did in the status line. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.