Chat

9.7 KB gzip for the class module

Variants

Recorded states

• error recorded state; no setter
• closed recorded state; no setter
• streaming recorded state; no setter
• completed recorded state; no setter

Usage

Import

import '/components/chat/define.js';

// or register it yourself
import { DetentChat } from '/components/chat/chat.js';

Attributes

• accent-color
• active-thread-id
• allow-attachments
• is-generating
• model-badge
• placeholder
• subtitle
• title

Properties

• message
• messages
• onClearChat
• onNewChat
• onRetry
• onSelectThread
• onSendMessage
• threads

Slots

• default
• empty-placeholder

Events

• detent-send-message — {}
• detent-select-thread — {}
• detent-new-chat — {}
• detent-clear-chat — {}
• detent-retry — {}

Example

Runnable example: site/examples/chat.ts. The snippet below is generated from the catalogued attributes.

<detent-chat
  accent-color
  active-thread-id
  allow-attachments
  is-generating
  model-badge
  placeholder
  subtitle
  title
></detent-chat>

Property-only values

const element = document.querySelector('detent-chat');
if (element !== null) {
  // messages: ChatMessageItem[]
  element.messages = [];
  // onSendMessage: (content: string, attachments?: ChatAttachment[]) => void
  element.onSendMessage = () => {};
  // threads: ChatConversationThread[]
  element.threads = [];
  // onSelectThread: (threadId: string) => void
  element.onSelectThread = () => {};
  // onNewChat: () => void
  element.onNewChat = () => {};
  // onClearChat: () => void
  element.onClearChat = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/Chat.tsx sha256 de36dd7312c4…

Native files

The native module and its artifacts:

• src/components/chat/chat.ts
• src/components/chat/styles.css
• src/components/chat/define.ts
• docs/components/chat.md
• site/examples/chat.ts
• tests/browser/chat.spec.ts
• evidence/components/chat.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

Slots

CSS customisation

• `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
• React callback props become typed composed CustomEvents; programmatic state assignment emits none.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• The ChatHeader, ChatSidebar, ChatMessage, ChatMessages and ChatComposer exports ship as documented parts of the one detent-chat tag (PC-2.1 keeps one tag per catalog row). useChat() becomes useChat(element), a live reader, because a custom element has no React context; it throws a TypeError for anything that is not an detent-chat element.
• message (one ChatMessageItem) is the native projection of the ChatMessage subcomponent and is appended after messages, so a streaming reply can be updated in place without rebuilding the transcript.
• activeThreadId is an attribute-backed _initial/controlled_ value, but a user click also updates the owned state and emits detent-select-thread (upstream is fully controlled and needs the consumer to re-render). The catalog records the controlled/uncontrolled mapping.
• Delivery status gets a visible text badge; upstream shows only a caret (streaming) and a failure line, so sending/sent/delivered were colour-only. This is a recorded accessibility correction (PC-12.6).
• Upstream's ad hoc fenced-code presentation inside assistant messages ( blocks and inline code splitting) is not ported: R-2.1 forbids a regex markdown renderer and R-2.3 keeps such source as text. Message content renders with white-space: pre-wrap, so fenced code is still readable as text.
• system messages get the author "System" instead of upstream's "Assistant" fallback, so the author line matches the recorded role.
• Framer Motion springs/AnimatePresence become CSS transitions (drawer slide, caret blink, spinner), all removed under prefers-reduced-motion: reduce.
• className is replaced by the documented parts and custom properties; there is no Tailwind in consumers.