Activity Feed

sl-activity-feed always needs data from the consuming application — either steps or wordBank — to know what to display; it has no default text of its own. See the two variants below.

Examples

Single Step

Use this variant for plain text responses, where the specific processing steps aren’t known ahead of time. Leave steps empty and set wordBank to an array of { text, duration } entries; the activity label automatically cycles through them while the AI works, e.g. “Thinking” for the first 8 seconds, then “Analysing” for the next 7, then “Generating response” until the real response arrives and the component is removed.

<sl-activity-feed id="activity-feed-single-demo"></sl-activity-feed>

<script>
  const feed = document.getElementById('activity-feed-single-demo');
  feed.wordBank = [
    { text: 'Thinking...', duration: 8000 },
    { text: 'Analysing...', duration: 7000 },
    { text: 'Generating response...', duration: 5000 }
  ];
</script>

Multiple Steps

Set steps to an array of known, upcoming activity steps — used for system-generated (canned) responses. The first step is shown as the current activity label; the remaining steps queue up below it. Call advance() to promote the next queued step, or playAll() to step through the whole queue automatically (useful for demos — a production app should call advance() as its backend reports progress).

<sl-activity-feed id="activity-feed-demo"></sl-activity-feed>

<script type="module">
  const feed = document.getElementById('activity-feed-demo');
  feed.steps = [
    { id: '1', text: 'Connecting dots across HUB24...' },
    { id: '2', text: 'Gathering accounts and account group' },
    { id: '3', text: 'Running through account checks' },
    { id: '4', text: 'Building account snapshot' }
  ];

  await customElements.whenDefined('sl-activity-feed');
  await feed.updateComplete;
  void feed.playAll();
</script>

[component-metadata:sl-activity-feed]