Chat Thread

blockcommunication

Single-pane conversation surface. Peer header (avatar + online dot + call/video/more), grouped messages with day separators (Today/Yesterday/date), own vs. peer bubbles, read/delivered/sent ticks, typing indicator, composer with attach/emoji and Enter-to-send. Stateful demo; swap the `messages` ref for your transport.

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/lit/chat-thread.json

$npx shadcn@latest add https://uipkge.dev/r/lit/chat-thread.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/lit/chat-thread.json

$bunx shadcn@latest add https://uipkge.dev/r/lit/chat-thread.json

Manifest:https://uipkge.dev/r/lit/chat-thread.jsonInstalls to:src/uip/blocks/chat-thread/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

ChatMessage

interface ChatMessage {
  id: string
  author: 'me' | 'them'
  body: string
  sentAt: Date
  status?: ChatStatus
}

HTMLElementTagNameMap

interface HTMLElementTagNameMap {
    'uip-chat-thread': UipChatThread
  }
}

npm dependencies

lit lucide

Includes

avatar button lit-core textarea

Files installed (1)

src/uip/blocks/chat-thread/chat-thread.ts13.2 kB

import { LitElement, css, html } from 'lit'
import {
  ArrowRight,
  AtSign,
  Check,
  CheckCheck,
  MoreVertical,
  Paperclip,
  Phone,
  Smile,
  Video,
} from 'lucide'
import { cn } from '../../lib/utils'
import { tailwind } from '../../lib/styles'
import { ThemeController } from '../../lib/theme'
import { icon } from '../../lib/icon'
// Side-effect imports: register the composed elements for standalone use
// (consumers who install only this block still get working primitives).
import '../../components/avatar/avatar'
import '../../components/button/button'
import '../../components/textarea/textarea'

type ChatStatus = 'sent' | 'delivered' | 'read'

interface ChatMessage {
  id: string
  author: 'me' | 'them'
  body: string
  sentAt: Date
  status?: ChatStatus
}

function seedMessages(): ChatMessage[] {
  const now = new Date()
  const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
  const yMorning = yesterday.getTime() + 9 * 60 * 60 * 1000
  return [
    { id: 'm1', author: 'them', body: 'Hey — did you get a chance to look at the onboarding doc?', sentAt: new Date(yMorning + 14 * 60 * 1000) },
    {
      id: 'm2',
      author: 'me',
      body: 'Yeah, just finished. Two small notes on the time-off flow but otherwise looks solid.',
      sentAt: new Date(yMorning + 21 * 60 * 1000),
      status: 'read',
    },
    {
      id: 'm3',
      author: 'them',
      body: 'Perfect. Drop them in the doc and I will action this afternoon.',
      sentAt: new Date(yMorning + 23 * 60 * 1000),
    },
    {
      id: 'm4',
      author: 'me',
      body: 'Done. Also — are we still on for the dashboard review tomorrow at 10?',
      sentAt: new Date(now.getTime() - 42 * 60 * 1000),
      status: 'read',
    },
    {
      id: 'm5',
      author: 'them',
      body: 'Yes! I will bring the kanban deck. Want to push it to 10:30 so we can join from the standup?',
      sentAt: new Date(now.getTime() - 8 * 60 * 1000),
    },
  ]
}

function formatTime(d: Date): string {
  return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
}

/**
 * <uip-chat-thread> — the registry ChatThread block as a web component.
 *
 * Class strings are React's ChatThread verbatim. React state becomes @state
 * fields. Enter-to-send listens to `@keydown` on the composer (keydown is
 * composed, so it reaches the host; React attached a native listener because
 * its `onKeyDown` prop fires with no event — Lit has no such limitation).
 * React's injected `<style>` keyframes (typing-bounce) are copied into
 * `static styles` (the allowed keyframes exception); the `.chat-scroll`
 * scrollbar rules are dropped (extra CSS beyond :host/keyframes is banned).
 */
export class UipChatThread extends LitElement {
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
  // :host display can't be a utility class (the host has no template of its own).
  // typing-bounce is copied from React's injected <style> (keyframes exception).
  static styles = [
    tailwind,
    css`:host { display: block; }`,
    css`
      .typing-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background: currentColor;
        opacity: 0.5;
        animation: typing-bounce 1s infinite ease-in-out;
      }
      @keyframes typing-bounce {
        0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
        40% { transform: translateY(-3px); opacity: 0.9; }
      }
    `,
  ]

  static properties = {
    messages: { state: true },
    draft: { state: true },
    peerTyping: { state: true },
  }

  private messages: ChatMessage[] = []
  private draft = ''
  private peerTyping = false
  private typingTimer?: number

  constructor() {
    super()
    new ThemeController(this)
  }

  connectedCallback() {
    super.connectedCallback()
    this.setAttribute('data-uipkge', '')
    this.setAttribute('data-slot', 'chat-thread')
    if (this.messages.length === 0) this.messages = seedMessages()
  }

  disconnectedCallback() {
    super.disconnectedCallback()
    if (this.typingTimer) window.clearTimeout(this.typingTimer)
  }

  updated() {
    const root = this.renderRoot.querySelector('[data-scroll-root]')
    if (root) root.scrollTop = root.scrollHeight
  }

  private dayLabel(d: Date): string {
    const now = new Date()
    if (d.toDateString() === now.toDateString()) return 'Today'
    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
    if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
    return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
  }

  private get grouped(): Array<{ label: string; items: ChatMessage[] }> {
    const groups: Array<{ label: string; items: ChatMessage[] }> = []
    for (const m of this.messages) {
      const label = this.dayLabel(m.sentAt)
      const last = groups[groups.length - 1]
      if (last && last.label === label) last.items.push(m)
      else groups.push({ label, items: [m] })
    }
    return groups
  }

  private send() {
    const body = this.draft.trim()
    if (!body) return
    this.messages = [...this.messages, { id: `m${Date.now()}`, author: 'me', body, sentAt: new Date(), status: 'sent' }]
    this.draft = ''
    this.peerTyping = true
    if (this.typingTimer) window.clearTimeout(this.typingTimer)
    this.typingTimer = window.setTimeout(() => {
      this.peerTyping = false
    }, 1800)
  }

  render() {
    return html`
      <div
        data-slot="chat-thread"
        class=${cn('bg-card text-card-foreground flex h-[680px] w-full flex-col overflow-hidden rounded-xl border shadow-sm')}
      >
        <header class="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
          <div class="flex min-w-0 items-center gap-3">
            <div class="relative">
              <uip-avatar class="size-9">
                <uip-avatar-fallback class="text-xs font-medium">MR</uip-avatar-fallback>
              </uip-avatar>
              <span class="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2"></span>
            </div>
            <div class="min-w-0">
              <p class="truncate text-sm font-semibold tracking-tight">Marcus Rivera</p>
              <p class="text-muted-foreground truncate text-xs">Active now</p>
            </div>
          </div>
          <div class="flex items-center gap-1">
            <uip-button variant="ghost" size="icon" class="size-8" aria-label="Voice call">
              ${icon(Phone, 'phone', 'size-4')}
            </uip-button>
            <uip-button variant="ghost" size="icon" class="size-8" aria-label="Video call">
              ${icon(Video, 'video', 'size-4')}
            </uip-button>
            <uip-button variant="ghost" size="icon" class="size-8" aria-label="More options">
              ${icon(MoreVertical, 'ellipsis-vertical', 'size-4')}
            </uip-button>
          </div>
        </header>

        <div data-scroll-root class="chat-scroll flex-1 space-y-5 overflow-y-auto px-4 py-4">
          ${this.grouped.map(
            (group) => html`
              <div class="space-y-3">
                <div class="flex items-center justify-center">
                  <span
                    class="text-muted-foreground bg-muted/60 rounded-full px-2.5 py-0.5 text-xs font-medium tracking-wide uppercase"
                    >${group.label}</span
                  >
                </div>
                ${group.items.map(
                  (m) => html`
                    <div class=${cn('flex items-end gap-2', m.author === 'me' ? 'justify-end' : 'justify-start')}>
                      ${m.author === 'them'
                        ? html`<uip-avatar class="size-7">
                            <uip-avatar-fallback class="text-xs">MR</uip-avatar-fallback>
                          </uip-avatar>`
                        : ''}
                      <div
                        class=${cn('flex max-w-[78%] flex-col gap-1', m.author === 'me' ? 'items-end' : 'items-start')}
                      >
                        <div
                          class=${cn(
                            'rounded-2xl px-3.5 py-2 text-sm leading-relaxed shadow-sm',
                            m.author === 'me'
                              ? 'bg-primary text-primary-foreground rounded-br-md'
                              : 'bg-muted text-foreground rounded-bl-md',
                          )}
                        >
                          ${m.body}
                        </div>
                        <div class="text-muted-foreground flex items-center gap-1 px-1 text-xs tabular-nums">
                          <span>${formatTime(m.sentAt)}</span>
                          ${m.author === 'me' && m.status === 'read'
                            ? icon(CheckCheck, 'check-check', 'text-info size-3')
                            : ''}
                          ${m.author === 'me' && m.status === 'delivered' ? icon(CheckCheck, 'check-check', 'size-3') : ''}
                          ${m.author === 'me' && m.status === 'sent' ? icon(Check, 'check', 'size-3') : ''}
                        </div>
                      </div>
                    </div>
                  `,
                )}
              </div>
            `,
          )}
          ${this.peerTyping
            ? html`
                <div class="flex items-end gap-2">
                  <uip-avatar class="size-7">
                    <uip-avatar-fallback class="text-xs">MR</uip-avatar-fallback>
                  </uip-avatar>
                  <div class="bg-muted text-muted-foreground flex items-center gap-1 rounded-2xl rounded-bl-md px-3 py-2.5">
                    <span class="typing-dot"></span>
                    <span class="typing-dot" style="animation-delay: 0.15s"></span>
                    <span class="typing-dot" style="animation-delay: 0.3s"></span>
                  </div>
                </div>
              `
            : ''}
        </div>

        <div class="bg-muted/20 border-t px-4 py-3">
          <div
            class="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-colors duration-150 focus-within:shadow-md focus-within:ring-4"
          >
            <uip-textarea
              .value=${this.draft}
              placeholder="Message Marcus"
              rows="1"
              variant="plain"
              class="placeholder:text-muted-foreground/70 max-h-40 min-h-[44px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none focus-visible:ring-0"
              @value-change=${(e: CustomEvent<{ value: string }>) => {
                this.draft = e.detail.value
              }}
              @keydown=${(e: KeyboardEvent) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault()
                  this.send()
                }
              }}
            ></uip-textarea>
            <div class="flex items-center justify-between gap-2 px-2 pb-2">
              <div class="flex items-center gap-0.5">
                <uip-button
                  variant="ghost"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Attach file"
                >
                  ${icon(Paperclip, 'paperclip', 'size-4')}
                </uip-button>
                <uip-button
                  variant="ghost"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Emoji"
                >
                  ${icon(Smile, 'smile', 'size-4')}
                </uip-button>
                <uip-button
                  variant="ghost"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Mention"
                >
                  ${icon(AtSign, 'at-sign', 'size-4')}
                </uip-button>
              </div>
              <div class="flex items-center gap-2">
                <kbd
                  class="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-xs sm:inline-flex"
                >
                  <span>↵</span>
                </kbd>
                <uip-button
                  class="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                  ?disabled=${!this.draft.trim()}
                  aria-label="Send"
                  @click=${this.send}
                >
                  Send ${icon(ArrowRight, 'arrow-right', 'size-3.5')}
                </uip-button>
              </div>
            </div>
          </div>
          <p class="text-muted-foreground/70 mt-2 text-center text-xs">
            <kbd class="bg-muted/60 rounded px-1 py-0.5 font-mono text-xs">Enter</kbd> to send
            <span class="mx-1.5 opacity-50">·</span>
            <kbd class="bg-muted/60 rounded px-1 py-0.5 font-mono text-xs">Shift</kbd> +
            <kbd class="bg-muted/60 rounded px-1 py-0.5 font-mono text-xs">↵</kbd> for newline
          </p>
        </div>
      </div>
    `
  }
}

customElements.get('uip-chat-thread') || customElements.define('uip-chat-thread', UipChatThread)

declare global {
  interface HTMLElementTagNameMap {
    'uip-chat-thread': UipChatThread
  }
}

Raw manifest:https://uipkge.dev/r/lit/chat-thread.json

Change language