Chat reply

The dots hold the reply's place in the thread until its text arrives.

Which frame suits Coral sky?

A thin oak frame keeps the sand tones warm. Black would pull the blue forward and make the print feel cooler.

import { createThinkingDots } from "@reuse-sh/loaders";

const canvas = document.createElement("canvas");
bubble.replaceChildren(canvas);
const dots = createThinkingDots(canvas, { size: 22 });

const text = await fetchReply(question);
dots.destroy();
bubble.textContent = text;

import { ThinkingDots } from "@reuse-sh/loaders/react";

export function Reply({ text }) {
  return (
    <div className="bubble">
      {text ?? <ThinkingDots size={22} label="Writing a reply" />}
    </div>
  );
}