Chat Ui

Chat Ui is a community skill for building conversational chat interfaces, covering message rendering, input handling, streaming response display, conversation history management, and theming for chatbot and AI assistant front-end applications.

What Is This?

Overview

Chat Ui provides patterns for building interactive chat interfaces for conversational AI applications. It covers message rendering that displays user and assistant messages with proper formatting, markdown support, and code highlighting, input handling that manages text composition, multi-line input, and file attachments, streaming response display that renders tokens progressively as they arrive from the AI backend, conversation history management that persists, loads, and navigates past conversations, and theming that customizes colors, fonts, and layout to match brand requirements. The skill enables developers to build polished chat experiences for AI products.

Who Should Use This

This skill serves developers building chat interfaces for AI assistants, product teams creating customer-facing chatbot experiences, and teams integrating conversational AI into existing applications.

Why Use It?

Problems It Solves

Building a responsive chat UI with streaming support requires handling partial message updates and scroll management. Rendering markdown and code blocks within chat messages needs specialized formatting logic. Managing conversation state across sessions requires persistent storage integration. Creating accessible keyboard-navigable chat interfaces requires careful focus management.

Core Highlights

Message renderer handles markdown, code blocks, and mixed content display. Stream handler appends tokens progressively with auto-scroll behavior. History manager persists and loads conversation threads. Theme engine applies consistent styling across all chat components.

How to Use It?

Basic Usage

// Chat message component
interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: number;
}

interface ChatState {
  messages: Message[];
  isStreaming: boolean;
  input: string;
}

class ChatManager {
  private state: ChatState = {
    messages: [],
    isStreaming: false,
    input: '',
  };

  addMessage(
    role: Message['role'],
    content: string
  ) {
    this.state.messages
      .push({
        id: crypto
          .randomUUID(),
        role,
        content,
        timestamp:
          Date.now(),
      });
  }

  async streamResponse(
    apiUrl: string
  ) {
    this.state.isStreaming
      = true;
    this.addMessage(
      'assistant', '');
    const last =
      this.state.messages[
        this.state.messages
          .length - 1];

    const resp = await fetch(
      apiUrl, {
        method: 'POST',
        body: JSON.stringify({
          messages:
            this.state
              .messages}),
      });
    const reader = resp.body!
      .getReader();
    const decoder =
      new TextDecoder();

    while (true) {
      const { done, value }
        = await reader
          .read();
      if (done) break;
      last.content +=
        decoder.decode(
          value);
    }
    this.state.isStreaming
      = false;
  }
}

Real-World Examples

// Conversation persistence
interface Conversation {
  id: string;
  title: string;
  messages: Message[];
  updatedAt: number;
}

class HistoryManager {
  private key =
    'chat_history';

  save(
    conv: Conversation
  ) {
    const all =
      this.loadAll();
    const idx = all
      .findIndex(
        c => c.id
          === conv.id);
    if (idx >= 0) {
      all[idx] = conv;
    } else {
      all.push(conv);
    }
    localStorage.setItem(
      this.key,
      JSON.stringify(all));
  }

  loadAll():
    Conversation[] {
    const raw =
      localStorage.getItem(
        this.key);
    return raw
      ? JSON.parse(raw)
      : [];
  }
}

Advanced Tips

Implement virtual scrolling for conversation history with hundreds of messages to maintain rendering performance. Debounce auto-scroll during streaming to avoid layout thrashing when tokens arrive rapidly. Add keyboard shortcuts for common actions like new conversation and message editing.

When to Use It?

Use Cases

Build a customer support chatbot interface with streaming AI responses. Create an internal AI assistant with conversation history and search. Add a chat widget to an existing web application for AI-powered help.

Related Topics

Chat interfaces, conversational AI, streaming UI, message rendering, and frontend development.

Important Notes

Requirements

Frontend framework such as React, Vue, or vanilla JavaScript. Server-sent events or streaming fetch API for progressive response display. Local storage or database for conversation persistence.

Usage Recommendations

Do: sanitize AI-generated HTML content before rendering to prevent XSS vulnerabilities. Implement proper error states for network failures and API timeouts. Provide visual indicators for streaming state and message delivery.

Don't: store sensitive conversation data in local storage without encryption. Block the UI thread during message processing which causes input lag. Render raw HTML from AI responses without sanitization.

Limitations

Streaming display adds complexity compared to blocking request-response patterns. Large conversation histories can degrade rendering performance without virtualization. Cross-browser streaming support varies for older browsers. File and image attachments in messages require separate upload handling and storage infrastructure beyond the chat UI itself.