@hidemikimura/chit-ui 0.2.0 → 0.3.0

package/src/controllers/composer-controller.js

@@ -152,6 +152,7 @@ export class ComposerController {
     if (!allowed) return false;
 
     this.clear();
+    this.#host.handleSubmitted();
     return true;
   }
 
@@ -212,4 +213,5 @@ export class ComposerController {
  * @property {boolean} sendOnEnter
  * @property {number | undefined} maxLength
  * @property {import('../i18n/labels.js').Labels} currentLabels
+ * @property {() => void} handleSubmitted  Called after a submit that no listener cancelled.
  */

package/src/controllers/drag-controller.js

@@ -0,0 +1,319 @@
+// @ts-check
+
+/** @import { ReactiveController, LitElement } from 'lit' */
+/** @import { Position } from '../types.js' */
+
+/** How far a pointer may travel before the gesture counts as a drag, not a click. */
+const SLOP = 4;
+
+/** How close to the viewport edge the dragged thing may come. */
+const MARGIN = 8;
+
+/** Arrow-key step, and the bigger step Shift asks for. */
+const STEP = 8;
+const BIG_STEP = 32;
+
+/**
+ * Moves one thing — the launcher or the panel — around the viewport.
+ *
+ * What a gesture produces is not a position but a displacement: how far the
+ * reader has dragged the widget from wherever the theme put it, in screen
+ * pixels. The host keeps one such displacement for the whole widget and hands
+ * it to both controllers, which is what makes the two states travel together:
+ * drag the launcher into a corner and the panel opens in that same corner,
+ * because both are the theme's position plus the same shift.
+ *
+ * Each controller then turns the displacement into the terms its own corner
+ * uses — at a right-hand corner, moving right means a smaller offset — and
+ * writes it into the two custom properties the stylesheet already reads. The
+ * offset lives on the host as an inline property, which outranks the theme's
+ * sheet and the page's CSS: a reader who dragged the widget somewhere means
+ * it, and until the drag is cleared theirs is the most specific word on where
+ * it goes.
+ *
+ * @implements {ReactiveController}
+ */
+export class DragController {
+  /** @type {LitElement} */
+  #host;
+
+  /** @type {DragOptions} */
+  #options;
+
+  /**
+   * Pointer state, only while a gesture is in flight.
+   *
+   * @type {{
+   *   pointer: { x: number, y: number },
+   *   displacement: { x: number, y: number },
+   *   size: { width: number, height: number },
+   *   corner: Position,
+   *   base: { x: number, y: number },
+   *   moved: boolean,
+   *   pointerId: number,
+   *   target: HTMLElement,
+   * } | undefined}
+   */
+  #from;
+
+  /** True once a gesture has passed the slop, until the click that follows it. */
+  #dragged = false;
+
+  /**
+   * @param {LitElement} host
+   * @param {DragOptions} options
+   */
+  constructor(host, options) {
+    this.#host = host;
+    this.#options = options;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    // A smaller window can leave the widget hanging off the edge; placing it
+    // again runs it back through the clamp.
+    this.#onResize = () => {
+      const now = this.#options.current();
+      if (now) this.#options.onMove(now);
+    };
+    window.addEventListener('resize', this.#onResize);
+  }
+
+  hostDisconnected() {
+    if (this.#onResize) window.removeEventListener('resize', this.#onResize);
+    this.#onResize = undefined;
+  }
+
+  /** @type {(() => void) | undefined} */
+  #onResize;
+
+  /**
+   * True when the gesture that just ended was a drag. Reading it clears it, so
+   * the click a pointer-up fires can be skipped exactly once.
+   *
+   * @returns {boolean}
+   */
+  consumeDrag() {
+    const dragged = this.#dragged;
+    this.#dragged = false;
+    return dragged;
+  }
+
+  /**
+   * Put this thing where the displacement says, within the viewport.
+   *
+   * @param {{ x: number, y: number } | null} displacement
+   * @returns {{ x: number, y: number } | undefined} Where it ended up, when it is on screen.
+   */
+  place(displacement) {
+    if (!displacement) {
+      for (const name of [this.#options.vars.x, this.#options.vars.y]) {
+        this.#host.style.removeProperty(name);
+      }
+      return undefined;
+    }
+
+    const element = this.#options.element();
+    const offset = this.#toOffset(displacement);
+    // Nothing on screen yet: write it anyway, so the thing is already in
+    // place the moment it is rendered, and let the next pass clamp it.
+    const placed = element ? this.#clamp(offset, this.#options.size()) : offset;
+
+    this.#host.style.setProperty(this.#options.vars.x, `${placed.x}px`);
+    this.#host.style.setProperty(this.#options.vars.y, `${placed.y}px`);
+    return element ? placed : undefined;
+  }
+
+  /**
+   * Begin a drag.
+   *
+   * @param {PointerEvent} event
+   * @returns {void}
+   */
+  start(event) {
+    if (!this.#options.enabled() || event.button !== 0) return;
+    const element = this.#options.element();
+    if (!element) return;
+
+    this.#from = {
+      pointer: { x: event.clientX, y: event.clientY },
+      displacement: this.#options.current() ?? { x: 0, y: 0 },
+      size: this.#options.size(),
+      corner: this.#options.corner(),
+      base: this.#options.base(),
+      moved: false,
+      pointerId: event.pointerId,
+      target: /** @type {HTMLElement} */ (event.currentTarget),
+    };
+
+    // Capture keeps the moves coming even when the pointer leaves the handle.
+    // It throws if the pointer has already gone; the drag still works without
+    // it, so there is nothing to do about that but carry on.
+    try {
+      this.#from.target.setPointerCapture(event.pointerId);
+    } catch {
+      /* no capture available */
+    }
+
+    this.#from.target.addEventListener('pointermove', this.#onPointerMove);
+    this.#from.target.addEventListener('pointerup', this.#onPointerEnd);
+    this.#from.target.addEventListener('pointercancel', this.#onPointerEnd);
+  }
+
+  /** @param {PointerEvent} event */
+  #onPointerMove = (event) => {
+    const from = this.#from;
+    if (!from || event.pointerId !== from.pointerId) return;
+
+    const dx = event.clientX - from.pointer.x;
+    const dy = event.clientY - from.pointer.y;
+    if (!from.moved && Math.hypot(dx, dy) < SLOP) return;
+
+    from.moved = true;
+    // A drag must not also select text or scroll the page under the finger.
+    event.preventDefault();
+    this.#options.onMove(
+      this.#limit(
+        { x: from.displacement.x + dx, y: from.displacement.y + dy },
+        from.base,
+        from.corner,
+        from.size,
+      ),
+    );
+  };
+
+  /** @param {PointerEvent} event */
+  #onPointerEnd = (event) => {
+    const from = this.#from;
+    if (!from || event.pointerId !== from.pointerId) return;
+
+    from.target.removeEventListener('pointermove', this.#onPointerMove);
+    from.target.removeEventListener('pointerup', this.#onPointerEnd);
+    from.target.removeEventListener('pointercancel', this.#onPointerEnd);
+    try {
+      if (from.target.hasPointerCapture(event.pointerId)) {
+        from.target.releasePointerCapture(event.pointerId);
+      }
+    } catch {
+      /* never had it */
+    }
+
+    this.#from = undefined;
+    if (!from.moved) return;
+    this.#dragged = true;
+    this.#options.onSettle(this.#options.name);
+  };
+
+  /**
+   * Move with the arrow keys, so the same thing can be done without a pointer.
+   *
+   * @param {KeyboardEvent} event
+   * @returns {boolean} True when the key was used.
+   */
+  nudge(event) {
+    if (!this.#options.enabled()) return false;
+    if (event.altKey || event.ctrlKey || event.metaKey) return false;
+
+    /** @type {Record<string, [number, number]>} */
+    const directions = {
+      ArrowLeft: [-1, 0],
+      ArrowRight: [1, 0],
+      ArrowUp: [0, -1],
+      ArrowDown: [0, 1],
+    };
+    const direction = directions[event.key];
+    if (!direction) return false;
+
+    const element = this.#options.element();
+    if (!element) return false;
+
+    const step = event.shiftKey ? BIG_STEP : STEP;
+    const now = this.#options.current() ?? { x: 0, y: 0 };
+    event.preventDefault();
+    this.#options.onMove(
+      this.#limit(
+        { x: now.x + direction[0] * step, y: now.y + direction[1] * step },
+        this.#options.base(),
+        this.#options.corner(),
+        this.#options.size(),
+      ),
+    );
+    this.#options.onSettle(this.#options.name);
+    return true;
+  }
+
+  /**
+   * The displacement in the terms this corner counts in.
+   *
+   * @param {{ x: number, y: number }} displacement
+   * @param {{ x: number, y: number }} [base]
+   * @param {Position} [corner]
+   * @returns {{ x: number, y: number }}
+   */
+  #toOffset(displacement, base = this.#options.base(), corner = this.#options.corner()) {
+    return {
+      x: base.x + (corner.endsWith('right') ? -displacement.x : displacement.x),
+      y: base.y + (corner.startsWith('bottom') ? -displacement.y : displacement.y),
+    };
+  }
+
+  /**
+   * As much of a displacement as this thing can take without leaving the
+   * viewport. The dragged thing sets the shared displacement, so the limit
+   * has to be expressed there rather than only in the offset it writes.
+   *
+   * The size is the size the thing means to be, not the one it happens to
+   * have: the panel's own stylesheet caps it against the space between its
+   * corner and the far edge, so measuring it while it is being pushed into
+   * that corner would read back a smaller box and let it be pushed further,
+   * squeezing it flat instead of stopping it.
+   *
+   * @param {{ x: number, y: number }} displacement
+   * @param {{ x: number, y: number }} base
+   * @param {Position} corner
+   * @param {{ width: number, height: number }} size
+   * @returns {{ x: number, y: number }}
+   */
+  #limit(displacement, base, corner, size) {
+    const offset = this.#clamp(this.#toOffset(displacement, base, corner), size);
+    return {
+      x: corner.endsWith('right') ? base.x - offset.x : offset.x - base.x,
+      y: corner.startsWith('bottom') ? base.y - offset.y : offset.y - base.y,
+    };
+  }
+
+  /**
+   * @param {{ x: number, y: number }} offset
+   * @param {{ width: number, height: number }} size
+   * @returns {{ x: number, y: number }}
+   */
+  #clamp(offset, size) {
+    return {
+      x: clamp(offset.x, window.innerWidth - size.width),
+      y: clamp(offset.y, window.innerHeight - size.height),
+    };
+  }
+}
+
+/**
+ * @param {number} value
+ * @param {number} max  The offset at which the far edge touches the viewport.
+ * @returns {number}
+ */
+function clamp(value, max) {
+  return Math.round(Math.min(Math.max(value, MARGIN), Math.max(MARGIN, max - MARGIN)));
+}
+
+/**
+ * @typedef {Object} DragOptions
+ * @property {'launcher' | 'panel'} name
+ * @property {() => boolean} enabled
+ * @property {() => HTMLElement | null} element     What moves.
+ * @property {() => { width: number, height: number }} size  How big it means to be.
+ * @property {() => Position} corner                Which corner the offset counts from.
+ * @property {() => { x: number, y: number }} base  The theme's offset, before any drag.
+ * @property {() => { x: number, y: number } | null} current  The widget's displacement now.
+ * @property {(displacement: { x: number, y: number }) => void} onMove   A new displacement.
+ * @property {(name: 'launcher' | 'panel') => void} onSettle  The gesture ended here.
+ * @property {{ x: string, y: string }} vars        The custom properties to write.
+ */

package/src/events.js

@@ -17,6 +17,7 @@ export const Events = Object.freeze({
   BREAKPOINT_CHANGE: 'chat-breakpoint-change',
   HOME: 'chat-home',
   ATTACH: 'chat-attach',
+  MOVE: 'chat-move',
 });
 
 /**

package/src/global.d.ts

@@ -1,5 +1,5 @@
 import type { ChitUI } from './chit-ui.js';
-import type { Message, ChatState, Trigger, Device } from './types.js';
+import type { Message, ChatState, Trigger, Device, Position } from './types.js';
 
 export interface ChitUIEventMap {
   'chat-submit': CustomEvent<{ text: string }>;
@@ -17,6 +17,12 @@ export interface ChitUIEventMap {
   'chat-breakpoint-change': CustomEvent<{ device: Device }>;
   'chat-home': CustomEvent<{ trigger: Trigger }>;
   'chat-attach': CustomEvent<{ files: File[] }>;
+  'chat-move': CustomEvent<{
+    target: 'launcher' | 'panel';
+    position: Position;
+    offset: { x: number; y: number };
+    displacement: { x: number; y: number };
+  }>;
 }
 
 declare global {

package/src/i18n/labels.js

@@ -11,6 +11,8 @@
  * @property {string} attach        Attach button beside the composer.
  * @property {string} input         Composer textarea.
  * @property {string} typing        Announced while the other side is typing.
+ * @property {string} loading       Announced while waiting for an answer.
+ * @property {string} move          The panel's drag handle.
  * @property {string} toLatest      "Jump to newest" button.
  * @property {{ sending: string, sent: string, error: string }} status  Delivery state of one's own message.
  * @property {string} charactersLeft  Counter, with {n} for the number remaining.
@@ -29,6 +31,8 @@ const BUILT_IN = {
     attach: '画像や動画を添付',
     input: 'メッセージを入力',
     typing: '入力中',
+    loading: '応答を待っています',
+    move: 'チャットの位置を移動（矢印キー）',
     toLatest: '最新へ',
     status: { sending: '送信中', sent: '送信済み', error: '送信できませんでした' },
     charactersLeft: '残り {n} 文字',
@@ -44,6 +48,8 @@ const BUILT_IN = {
     attach: 'Attach an image or video',
     input: 'Type a message',
     typing: 'Typing',
+    loading: 'Waiting for a reply',
+    move: 'Move the chat (arrow keys)',
     toLatest: 'Jump to latest',
     status: { sending: 'Sending', sent: 'Sent', error: 'Not delivered' },
     charactersLeft: '{n} characters left',

package/src/render/launcher.js

@@ -34,7 +34,15 @@ export function renderLauncher(host) {
       aria-expanded=${host.state === 'open'}
       ?data-has-image=${!custom && !!closed.image}
       ?data-custom=${!!custom}
-      @click=${() => host.toggleFromUser()}
+      ?data-draggable=${closed.draggable}
+      @pointerdown=${(/** @type {PointerEvent} */ event) => host.launcherDrag.start(event)}
+      @keydown=${(/** @type {KeyboardEvent} */ event) => host.launcherDrag.nudge(event)}
+      @click=${() => {
+        // The pointer-up that ends a drag is followed by a click; opening the
+        // panel then would punish the reader for having moved the button.
+        if (host.launcherDrag.consumeDrag()) return;
+        host.toggleFromUser();
+      }}
     >
       ${custom ?? html`<slot name="launcher">${defaultContent(closed)}</slot>`}
     </button>

package/src/render/message-list.js

@@ -5,6 +5,34 @@ import { renderMessage } from './message.js';
 
 /** @import { ChitUI } from '../chit-ui.js' */
 
+/**
+ * The wait for an answer, at the end of the conversation.
+ *
+ * It stands where the typing bubble stands and replaces it while it is up:
+ * "typing" and "waiting for the server" are the same moment of the
+ * conversation, and two indicators for one wait would only ask the reader to
+ * work out the difference.
+ *
+ * @param {ChitUI} host
+ * @returns {import('lit').TemplateResult}
+ */
+function renderLoading(host) {
+  const { style, text } = host.currentTheme.open.loading;
+  const label = text ?? host.currentLabels.loading;
+
+  return html`
+    <div part="loading" data-style=${style} role="status" aria-label=${label}>
+      ${style === 'dots'
+        ? html`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`
+        : nothing}
+      ${style === 'spinner' ? html`<span part="spinner" aria-hidden="true"></span>` : nothing}
+      ${style === 'text' || text
+        ? html`<span part="loading-text">${label}</span>`
+        : nothing}
+    </div>
+  `;
+}
+
 /**
  * The scrolling conversation.
  *
@@ -22,7 +50,7 @@ import { renderMessage } from './message.js';
 export function renderMessageList(host) {
   const labels = host.currentLabels;
   const typing = host.typing;
-  const empty = host.messages.length === 0 && !typing;
+  const empty = host.messages.length === 0 && !typing && !host.loading;
 
   return html`
     <div
@@ -40,15 +68,17 @@ export function renderMessageList(host) {
           (message) => message.id,
           (message) => renderMessage(host, message),
         )}
-        ${typing
-          ? html`
-              <div part="typing" role="status" aria-label=${labels.typing}>
-                ${typeof typing === 'object' && typing.html
-                  ? host.renderTypingHtml(typing.html)
-                  : html`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`}
-              </div>
-            `
-          : nothing}
+        ${host.loading
+          ? renderLoading(host)
+          : typing
+            ? html`
+                <div part="typing" role="status" aria-label=${labels.typing}>
+                  ${typeof typing === 'object' && typing.html
+                    ? host.renderTypingHtml(typing.html)
+                    : html`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`}
+                </div>
+              `
+            : nothing}
       </div>
     </div>
 

package/src/render/panel.js

@@ -53,9 +53,25 @@ export function renderPanel(host) {
 function renderHeader(host, title) {
   const open = host.currentTheme.open;
   const labels = host.currentLabels;
+  const draggable = open.draggable && host.device === 'pc';
 
   return html`
-      <header part="header">
+      <header
+        part="header"
+        ?data-draggable=${draggable}
+        tabindex=${draggable ? '0' : nothing}
+        aria-label=${draggable ? labels.move : nothing}
+        @pointerdown=${(/** @type {PointerEvent} */ event) => {
+          // Only the bar itself is a handle: a drag that starts on the close
+          // button would swallow the click that closes the panel.
+          if (/** @type {HTMLElement} */ (event.target).closest('button')) return;
+          host.panelDrag.start(event);
+        }}
+        @keydown=${(/** @type {KeyboardEvent} */ event) => {
+          if (event.target !== event.currentTarget) return;
+          host.panelDrag.nudge(event);
+        }}
+      >
         <slot name="header">
           <slot name="header-title">
             <span part="header-title">

package/src/styles/launcher.css.js

@@ -23,6 +23,19 @@ export const launcherStyles = css`
     transition: filter 120ms ease;
   }
 
+  /*
+   * A draggable launcher takes the touch gestures for itself, so a finger on
+   * it moves the button instead of scrolling the page behind it.
+   */
+  [part~='launcher'][data-draggable] {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  [part~='launcher'][data-draggable]:active {
+    cursor: grabbing;
+  }
+
   /* The image comes from the theme, so it is a background rather than an <img>. */
   [part~='launcher'][data-has-image] {
     background-image: var(--chit-launcher-image);

package/src/styles/message.css.js

@@ -102,7 +102,8 @@ export const messageStyles = css`
    */
 
   [part~='bubble']::after,
-  [part~='typing']::after {
+  [part~='typing']::after,
+  [part~='loading']::after {
     content: '';
     display: none;
     position: absolute;
@@ -118,9 +119,11 @@ export const messageStyles = css`
    */
   @supports (clip-path: path('M 0 0 Z')) {
     :host([data-bubble-tail='top']) [part~='bubble']::after,
-    :host([data-bubble-tail='bottom']) [part~='bubble']::after,
     :host([data-bubble-tail='top']) [part~='typing']::after,
-    :host([data-bubble-tail='bottom']) [part~='typing']::after {
+    :host([data-bubble-tail='top']) [part~='loading']::after,
+    :host([data-bubble-tail='bottom']) [part~='bubble']::after,
+    :host([data-bubble-tail='bottom']) [part~='typing']::after,
+    :host([data-bubble-tail='bottom']) [part~='loading']::after {
       display: block;
     }
 
@@ -129,15 +132,18 @@ export const messageStyles = css`
      * bubble carries one cue about who is talking, not two.
      */
     :host([data-bubble-tail='top']) [part~='bubble'],
-    :host([data-bubble-tail='bottom']) [part~='bubble'],
     :host([data-bubble-tail='top']) [part~='typing'],
-    :host([data-bubble-tail='bottom']) [part~='typing'] {
+    :host([data-bubble-tail='top']) [part~='loading'],
+    :host([data-bubble-tail='bottom']) [part~='bubble'],
+    :host([data-bubble-tail='bottom']) [part~='typing'],
+    :host([data-bubble-tail='bottom']) [part~='loading'] {
       border-radius: var(--chit-bubble-radius);
     }
 
     /* Their side: the leaf points left, its root inside the bubble. */
     :host([data-bubble-tail]) [part~='message-assistant'] [part~='bubble']::after,
-    :host([data-bubble-tail]) [part~='typing']::after {
+    :host([data-bubble-tail]) [part~='typing']::after,
+    :host([data-bubble-tail]) [part~='loading']::after {
       right: calc(100% - var(--_chit-tail-root));
       background: var(--chit-color-assistant-bg);
     }
@@ -150,17 +156,20 @@ export const messageStyles = css`
     }
 
     :host([data-bubble-tail='top']) [part~='bubble']::after,
-    :host([data-bubble-tail='top']) [part~='typing']::after {
+    :host([data-bubble-tail='top']) [part~='typing']::after,
+    :host([data-bubble-tail='top']) [part~='loading']::after {
       top: var(--_chit-tail-offset);
     }
 
     :host([data-bubble-tail='bottom']) [part~='bubble']::after,
-    :host([data-bubble-tail='bottom']) [part~='typing']::after {
+    :host([data-bubble-tail='bottom']) [part~='typing']::after,
+    :host([data-bubble-tail='bottom']) [part~='loading']::after {
       bottom: var(--_chit-tail-offset);
     }
 
     :host([data-bubble-tail='bottom']) [part~='message-assistant'] [part~='bubble']::after,
-    :host([data-bubble-tail='bottom']) [part~='typing']::after {
+    :host([data-bubble-tail='bottom']) [part~='typing']::after,
+    :host([data-bubble-tail='bottom']) [part~='loading']::after {
       transform: scaleY(-1);
     }
 
@@ -228,24 +237,57 @@ export const messageStyles = css`
     }
   }
 
-  [part~='typing'] {
+  [part~='typing'],
+  [part~='loading'] {
     position: relative;
     align-self: flex-start;
     /* Indented past the speaker's icon, when the theme gives them one. */
     margin-inline-start: var(--_chit-speaker-gutter, 0px);
     padding: 0.7em 0.9em;
+    /*
+     * Stated rather than left to the font's idea of "normal", so that both
+     * indicators are the same height whatever the page's typeface does, and
+     * so the spinner has a line box it is known to fit inside.
+     */
+    line-height: 1.5;
     border-radius: var(--chit-bubble-radius);
     border-bottom-left-radius: 4px;
     background: var(--chit-color-assistant-bg);
     color: var(--chit-color-assistant-text);
   }
 
-  [part~='typing'] .dots {
+  /*
+   * The wait is laid out inline, like the typing bubble it stands in for. A
+   * flex box has no line box of its own, so dots or a spinner alone would sit
+   * in a noticeably shorter bubble than one holding a line of text.
+   */
+  [part~='loading'] > * + * {
+    margin-inline-start: 0.5em;
+  }
+
+  [part~='loading'] [part~='spinner'] {
+    display: inline-block;
+    /*
+     * Centred on the line rather than sitting on the baseline: at 1.1em it
+     * then fits inside the line box the text would have made on its own, so
+     * a spinner bubble is exactly as tall as a typing bubble.
+     */
+    vertical-align: middle;
+    color: var(--chit-color-system-text);
+  }
+
+  [part~='loading-text'] {
+    font-size: 0.9em;
+  }
+
+  [part~='typing'] .dots,
+  [part~='loading'] .dots {
     display: inline-flex;
     gap: 0.25em;
   }
 
-  [part~='typing'] .dots i {
+  [part~='typing'] .dots i,
+  [part~='loading'] .dots i {
     width: 0.4em;
     height: 0.4em;
     border-radius: 50%;
@@ -254,10 +296,12 @@ export const messageStyles = css`
     animation: chit-typing 1.2s ease-in-out infinite;
   }
 
-  [part~='typing'] .dots i:nth-child(2) {
+  [part~='typing'] .dots i:nth-child(2),
+  [part~='loading'] .dots i:nth-child(2) {
     animation-delay: 0.15s;
   }
-  [part~='typing'] .dots i:nth-child(3) {
+  [part~='typing'] .dots i:nth-child(3),
+  [part~='loading'] .dots i:nth-child(3) {
     animation-delay: 0.3s;
   }
 
@@ -299,7 +343,8 @@ export const messageStyles = css`
 
   @media (prefers-reduced-motion: reduce) {
     [part~='cursor'],
-    [part~='typing'] .dots i {
+    [part~='typing'] .dots i,
+  [part~='loading'] .dots i {
       animation: none;
     }
   }