suiss/ui
  • Docs
  • Components
  • Patterns
  • Interactions
  • Charts
  • Blocks
  • AI
GitHubCreate
DocsComponentsPatternsInteractionsChartsBlocksAICreate
AI21
  • Overview
Conversation
  • Chat
  • Message
  • Prompt Input
  • Suggestion
  • Model Selector
  • Context
  • Checkpoint
  • Inline Citation
Agent steps
  • Chain of Thought
  • Reasoning
  • Tool
  • Confirmation
  • Task
  • Plan
  • Queue
  • Subagent
  • Sources
Output
  • Terminal
  • Stack Trace
  • Test Results
  • File Tree

suiss/ui · AI

Chat

A conversation thread where each turn holds a message, the agent's steps and its reply, inside a Message Scroller.

"use client"

import {
  ArrowClockwiseIcon,
  ArrowUpIcon,
  BinocularsIcon,
  CheckCircleIcon,
  GlobeIcon,
  PaperclipIcon,
  PlusIcon,
  TerminalIcon,
} from "@phosphor-icons/react"
import * as React from "react"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import { CodeBlock, CodeBlockContent } from "@/components/ui/code-block"

Chat is the thread of a conversation with an agent. Each turn is a Message inside a Message Scroller. The steps the agent took sit above its reply as Trace rows, and the field at the bottom is a Prompt Input.

The person's message is the scroll anchor, so a new question settles near the top and the reply streams in under it.

Installation

Chat is built with Message Scroller, Message, Bubble, Trace, Code Block, Input Group, Dropdown Menu and Tooltip.

$ pnpm dlx shadcn@latest add @esuiss/message-scroller @esuiss/message @esuiss/bubble @esuiss/trace @esuiss/code-block @esuiss/input-group @esuiss/dropdown-menu @esuiss/tooltip

Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add message-scroller message bubble trace code-block input-group dropdown-menu tooltip

Usage

<MessageScrollerProvider autoScroll>
  <MessageScroller>
    <MessageScrollerViewport>
      <MessageScrollerContent>
        <MessageScrollerItem messageId={id} scrollAnchor>
          <Message align="end">
            <MessageContent>
              <Bubble align="end" variant="muted">
                <BubbleContent>{text}</BubbleContent>
              </Bubble>
            </MessageContent>
          </Message>
        </MessageScrollerItem>
      </MessageScrollerContent>
    </MessageScrollerViewport>
    <MessageScrollerButton />
  </MessageScroller>
</MessageScrollerProvider>

Set scrollAnchor on the person's turn. autoScroll follows the reply while the person stays at the live edge, and MessageScrollerButton jumps back down when they scroll away.

AI SDK

Render each message from useChat. The person's turn is a bubble. The agent's turn maps its reasoning and tool parts to Trace rows, then shows the text.

const { messages, sendMessage, status } = useChat()

{messages.map((message) =>
  message.role === "user" ? (
    <MessageScrollerItem key={message.id} messageId={message.id} scrollAnchor>
      …
    </MessageScrollerItem>
  ) : (
    <MessageScrollerItem key={message.id} messageId={message.id}>
      …
    </MessageScrollerItem>
  )
)}

Set aria-busy on MessageScrollerContent while status is submitted or streaming.

API Reference

See Message Scroller, Message, Trace and Input Group.

Accessibility

  • Give the textarea an accessible name such as "Message", since the placeholder is not a label.
  • Give icon-only buttons, such as reset, add context and send, an aria-label.
  • Enter sends the message and Shift+Enter adds a new line.
import { ArrowUpIcon, CheckCircleIcon, PlusIcon, TerminalIcon } from "phosphor-react-native"
import { View } from "react-native"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { CodeBlock, CodeBlockContent } from "@/components/ui/code-block"
import { Icon } from "@/components/ui/icon"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@/components/ui/input-group"
import { Message, MessageContent } from "@/components/ui/message"
import { Text } from "@/components/ui/text"
import { Trace, TraceIcon, TraceLine, TraceTitle } from "@/components/ui/trace"

export function AiChatExample() {
  return (
    <View className="w-full gap-5">
      <Message align="end">
        <MessageContent>
          <Bubble variant="muted">
import EsuissUI
import PhosphorSwift
import SwiftUI

struct ChatExample: View {
  @State private var message = ""

  var body: some View {
    VStack(alignment: .leading, spacing: 20) {
      Message(align: .end) {
        MessageContent {
          Bubble(variant: .muted, align: .end) { BubbleContent("Default the theme to the system setting.") }
        }
      }
      VStack(alignment: .leading, spacing: 12) {
        Trace {
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.regular.ArrowUp
import com.adamglin.phosphoricons.regular.CheckCircle
import com.adamglin.phosphoricons.regular.Plus

Chat on mobile is built from the same parts as on the web: Message, Bubble, Trace, Code Block, Input Group. The example above is a static demo; connect it to your agent by rendering the same parts from your messages.

Installation

$ pnpm dlx @esuiss/ui@latest add message bubble trace code-block input-group
$ pnpm dlx @esuiss/ui@latest add message bubble trace code-block input-group --platform swift
$ pnpm dlx @esuiss/ui@latest add message bubble trace code-block input-group --platform kotlin

API Reference

See Message, Bubble, Trace, Code Block, Input Group.

NextMessagePreviousAI

On this page

  1. 01Installation
  2. 02Usage
  3. 03AI SDK
  4. 04API Reference
  5. 05Accessibility
  6. 06Installation
  7. 07API Reference