DEV: Streaming animation API for components

[keegangeorge]

🔍 Overview

This takes the logic used in summarization/discoveries for streaming and consolidates it into a single helper lib for smooth streaming. It introduces a new lib: SmoothStreamer that can be used by components for smooth streaming text from message bus updates. Additionally, the PR makes use of that new lib in the AI post menu helper.

With this PR the SmoothStreamer will now be used in all component based implementations of streaming to the client:

• AI helper
• Summarization
• Discobot discoveries

➕ Usage

To make use of the new SmoothStreamer class, add it to your component like so:

import SmoothStreamer from "../lib/smooth-streamer";

@tracked
smoothStreamer = new SmoothStreamer(
  () => this.result,
  (newValue) => (this.result = newValue)
);

The constructor for the streamer expects a getter/setter for the tracked property you use in your component for showcasing the result. You can then call the smooth streamer in your MessageBus update function like so:

  @bind
  subscribe() {
    const channel = `/foo`;
    this.messageBus.subscribe(channel, this._updateResult);
  }

  @bind
  async _updateResult(result) {
    await this.smoothStreamer.updateResult(result, "result");
    // your additional custom logic
  }

📹 Screen captures

Screen.Recording.2025-03-26.at.16.31.07.mov