Koala UI

Chat

The team's messages, ready to drop in. The conversations, the open thread with a composer, and the person or group beside it in three panes, read two ways: as bubbles or as a thread, with photos, files, reactions and replies all wired.

Variant 1

Pro

Variant 2

Pro

Built from#

The shell is the docked Layout with the rail folded to its icons and three LayoutPanes, the same frame as the Mail inbox. The thread is the Chat component: Conversation variant="bubble" for the messenger, the plain variant with an avatar and a header on every run for the thread. Reactions are Toggles, new ones come from the EmojiPicker, photos open in a Lightbox and files are FileCards. The composer is a PromptInput, whose banner holds the message a reply answers, and a thread row raises a floating Toolbar on hover.

Responsive#

Each preview renders inside an iframe, so the screen's breakpoints respond to the frame width. From xl the details pane shows beside the thread, and the panel button in the thread's header folds it away; below xl the thread takes its width. Below lg the list stands alone under the mobile bar, and opening a conversation swaps it in with a back button. On touch screens, where nothing hovers, the reactions stay one tap away and the hover actions step aside.

FAQ#

Only the thread. The messenger sets each message in a bubble, yours on the right in the sent color, the way a phone messenger reads. The thread keeps every message on one edge under its author, the way a team chat reads, and adds replies and save for later to each row's actions. The list, the composer and the details pane are the same.