Response

Preview Code

375 768 Full

Open

html

<aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant"></aparte-chat-bubble>

<script>
  document.querySelector('aparte-chat-bubble').setSegments([{
    id: 's1',
    type: 'text',
    content: [
      '### Two transports',
      '',
      'Pick by **where the key lives**:',
      '',
      '| Transport | The key | Use it for |',
      '| --- | --- | --- |',
      '| `AparteDirectTransport` | in the browser | prototypes, local models |',
      '| `AparteBackendTransport` | on your server | production |',
      '',
      '1. Start with the direct one.',
      '2. Move to the backend before you ship.',
      '',
      '> The chat does not change between the two. See [the transports guide](https://apartejs.dev/guides/backend-transport/).',
    ].join('\n'),
  }]);
</script>

The words of a reply are a text segment, or the message’s content when it is plain text. Core has no Markdown dependency: until you install a renderer, it shows the text as it is, escaped, with its line breaks. Two plugins add the formatting: @aparte/plugin-marked renders a finished reply, @aparte/plugin-streaming-markdown renders one while it arrives. Whatever renders it, the HTML goes through core’s sanitizer before it reaches the page.

Variants

While it streams

Preview Code

375 768 Full

Open

html

<aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant" streaming></aparte-chat-bubble>

<script>
  // The streaming parser appends what each chunk adds instead of re-parsing the whole
  // reply, so a list grows item by item.
  const bubble = document.querySelector('aparte-chat-bubble');
  bubble.setSegments([{ id: 's1', type: 'text', content: '' }]);
  const text = 'Three steps:\n\n1. Register a provider.\n2. Set a transport.\n3. Start the client.\n\nThat is **the whole wiring**.';
  let i = 0;
  const tick = setInterval(() => {
    bubble.appendToSegment('s1', text.slice(i, i + 6));
    i += 6;
    if (i >= text.length) { clearInterval(tick); bubble.removeAttribute('streaming'); }
  }, 60);
</script>

With the streaming plugin, each chunk is appended to what is already on screen instead of re-parsing the whole reply, so a list grows item by item and **bold is bold before its closing marks arrive. When the turn ends, the reply is rendered once more in full.

With no renderer installed

Preview Code

375 768 Full

Open

html

<!-- Core has no Markdown dependency: with no renderer installed, a reply shows its
     text as it is, safely escaped. Install @aparte/plugin-marked for the formatting. -->
<aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant"
  content="Pick by **where the key lives**: the browser or your server."></aparte-chat-bubble>

The text stays readable and safe; the Markdown marks show as typed.

Usage

ts

import { setupMarkedProvider } from '@aparte/plugin-marked';
import { setupStreamingMarkdownProvider } from '@aparte/plugin-streaming-markdown';

setupMarkedProvider(); // a finished reply, in full
setupStreamingMarkdownProvider(); // a reply while it streams

marked and streaming-markdown are peer dependencies: install them beside the plugins. The Markdown and code guide covers the options.

Customize

Variable	What it sets
--aparte-content-font-size	The size of the reply’s text.
--aparte-content-color	Its colour.
--aparte-content-line-height	Its line height.

Another parser plugs in with aparteGlobalConfig.setMarkdownProvider(fn), a function from Markdown to HTML. The sanitizer can be replaced with setHtmlSanitizer().

Fields

AparteTextSegment, discriminated by type: 'text'.

Field	Type	Required	Description
content	string	yes

Accessibility

• Headings, lists, tables and links come out as the HTML elements they are, so a screen reader can move through a long reply by heading or by list.
• Tables, quotes and inline code are styled by the same prose sheet as the rest of the reply.

Related

• Code block — a fenced block in a reply.
• Reasoning — rendered by the same Markdown path.
• Message — the bubble the text sits in.