@hidemikimura/chit-ui 0.1.0 → 0.3.0

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 }>;
@@ -15,6 +15,14 @@ export interface ChitUIEventMap {
   'chat-message-click': CustomEvent<{ message: Message; target: Element; originalEvent: MouseEvent }>;
   'chat-scroll-top': CustomEvent<Record<string, never>>;
   '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

@@ -6,9 +6,13 @@
  * @property {string} panel         Accessible name of the dialog.
  * @property {string} conversation  Accessible name of the message log.
  * @property {string} close         Close button.
+ * @property {string} home          Home button: back to the start of the conversation.
  * @property {string} send          Send button.
+ * @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.
@@ -22,9 +26,13 @@ const BUILT_IN = {
     panel: 'チャット',
     conversation: '会話',
     close: 'チャットを閉じる',
+    home: '最初に戻る',
     send: '送信',
+    attach: '画像や動画を添付',
     input: 'メッセージを入力',
     typing: '入力中',
+    loading: '応答を待っています',
+    move: 'チャットの位置を移動（矢印キー）',
     toLatest: '最新へ',
     status: { sending: '送信中', sent: '送信済み', error: '送信できませんでした' },
     charactersLeft: '残り {n} 文字',
@@ -35,9 +43,13 @@ const BUILT_IN = {
     panel: 'Chat',
     conversation: 'Conversation',
     close: 'Close chat',
+    home: 'Back to the start',
     send: 'Send',
+    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/composer.js

@@ -4,6 +4,62 @@ import { live } from 'lit/directives/live.js';
 
 /** @import { ChitUI } from '../chit-ui.js' */
 
+/**
+ * The attach button and the file input it opens.
+ *
+ * The widget owns the picking and nothing else: it hands the chosen files to
+ * the consumer through `chat-attach` and forgets them. Uploading them, showing
+ * a preview and adding a message are all things only the consumer can do, and
+ * a half-done version here would be in the way of the real one.
+ *
+ * The input is reset after every pick so that choosing the same file twice in
+ * a row still reports the second time.
+ *
+ * @param {ChitUI} host
+ * @param {boolean} disabled
+ * @returns {import('lit').TemplateResult}
+ */
+function renderAttach(host, disabled) {
+  const labels = host.currentLabels;
+  const input = host.currentTheme.open.input;
+
+  return html`
+    <button
+      part="attach-button"
+      type="button"
+      aria-label=${labels.attach}
+      title=${labels.attach}
+      ?disabled=${disabled}
+      @click=${() => host.openAttach()}
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M20 11.5 12.2 19.3a4.6 4.6 0 0 1-6.5-6.5l7.8-7.8a3 3 0 0 1 4.3 4.3l-7.8 7.8a1.5 1.5 0 0 1-2.1-2.1l7.1-7.1"
+        />
+      </svg>
+    </button>
+    <input
+      part="attach-input"
+      type="file"
+      tabindex="-1"
+      aria-hidden="true"
+      accept=${input.accept}
+      ?multiple=${input.multiple}
+      @change=${(/** @type {Event} */ event) => {
+        const field = /** @type {HTMLInputElement} */ (event.target);
+        const files = Array.from(field.files ?? []);
+        field.value = '';
+        if (files.length) host.handleAttach(files);
+      }}
+    />
+  `;
+}
+
 /**
  * The composer: a textarea that grows with its content, and a send button.
  *
@@ -32,6 +88,8 @@ export function renderComposer(host) {
       }}
     >
       <slot name="composer">
+        ${theme.input.attach ? renderAttach(host, disabled) : nothing}
+
         <slot name="input-before"></slot>
 
         <textarea

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/message.js

@@ -45,6 +45,13 @@ export function renderMessage(host, message) {
 
   const meta = message.time || message.status;
 
+  // The theme says who is talking; a message overrides either half. `null` on
+  // the message hides what the theme set, which is how a run of replies shows
+  // the icon only on the first of them.
+  const speaker = host.currentTheme.open.speaker[message.role];
+  const avatar = message.avatar === undefined ? speaker.avatar : message.avatar;
+  const name = message.name === undefined ? speaker.name : message.name;
+
   return html`
     <article
       part="message message-${message.role}"
@@ -53,11 +60,13 @@ export function renderMessage(host, message) {
       ?data-streaming=${!!message.streaming}
       aria-busy=${message.streaming ? 'true' : 'false'}
     >
-      ${message.avatar
-        ? html`<img part="avatar" src=${message.avatar} alt="" loading="lazy" />`
-        : nothing}
+      ${avatar
+        ? html`<img part="avatar" src=${avatar} alt="" loading="lazy" />`
+        : speaker.avatar
+          ? html`<span part="avatar" data-placeholder aria-hidden="true"></span>`
+          : nothing}
       <div class="body">
-        ${message.name ? html`<span part="name">${message.name}</span>` : nothing}
+        ${name ? html`<span part="name">${name}</span>` : nothing}
         <div part="bubble">
           <div part="message-content" data-content=${contentField(message)}>${renderContent(host, message)}</div>
           ${message.streaming ? html`<span part="cursor" aria-hidden="true"></span>` : nothing}

package/src/render/panel.js

@@ -15,7 +15,7 @@ import { renderComposer } from './composer.js';
 export function renderPanel(host) {
   const open = host.currentTheme.open;
   const labels = host.currentLabels;
-  const title = open.header?.title ?? labels.panel;
+  const title = open.header.title ?? labels.panel;
 
   return html`
     <section
@@ -26,16 +26,83 @@ export function renderPanel(host) {
       tabindex="-1"
       @keydown=${(/** @type {KeyboardEvent} */ event) => onKeydown(host, event)}
     >
-      <header part="header">
+      ${open.header.visible ? renderHeader(host, title) : nothing}
+
+      ${renderMessageList(host)} ${renderComposer(host)}
+
+      <slot name="footer"></slot>
+    </section>
+  `;
+}
+
+/**
+ * The title bar.
+ *
+ * It can be left out entirely (`open.header.visible = false`), which is what a
+ * widget embedded in a host that already draws its own title bar wants — LINE
+ * LIFF, for one — rather than two stacked titles. The dialog keeps its
+ * accessible name either way: that name is read, not seen.
+ *
+ * Note that hiding it takes the close button with it. Esc and the launcher
+ * still close the panel, and the host's own chrome usually supplies the rest.
+ *
+ * @param {ChitUI} host
+ * @param {string} title
+ * @returns {import('lit').TemplateResult}
+ */
+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"
+        ?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">
-            ${open.header?.logo
-              ? html`<img part="header-logo" src=${open.header.logo} alt="" />`
-              : nothing}
-            <span part="header-heading">${title}</span>
+            <span part="header-title">
+              ${open.header.logo
+                ? html`<img part="header-logo" src=${open.header.logo} alt="" />`
+                : nothing}
+              <span part="header-heading">${title}</span>
+            </span>
           </slot>
           <span part="header-actions">
             <slot name="header-actions"></slot>
+            ${open.header.home
+              ? html`<button
+                  part="home-button"
+                  type="button"
+                  aria-label=${labels.home}
+                  title=${labels.home}
+                  @click=${() => host.home('user')}
+                >
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linejoin="round"
+                      stroke-linecap="round"
+                      d="M4 11.2 12 4l8 7.2M6.5 9.8V19h11V9.8M10 19v-4.6h4V19"
+                    />
+                  </svg>
+                </button>`
+              : nothing}
             <button
               part="close-button"
               type="button"
@@ -55,11 +122,6 @@ export function renderPanel(host) {
           </span>
         </slot>
       </header>
-
-      ${renderMessageList(host)} ${renderComposer(host)}
-
-      <slot name="footer"></slot>
-    </section>
   `;
 }
 

package/src/styles/composer.css.js

@@ -55,6 +55,45 @@ export const composerStyles = css`
     font-weight: 600;
   }
 
+  /* Out of sight, but still clickable from the button beside it. */
+  [part~='attach-input'] {
+    display: none;
+  }
+
+  [part~='attach-button'] {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 2.4em;
+    height: 2.4em;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--chit-color-system-text);
+    cursor: pointer;
+    transition: opacity 120ms ease;
+  }
+
+  [part~='attach-button'] svg {
+    width: 1.3em;
+    height: 1.3em;
+  }
+
+  [part~='attach-button']:hover:not(:disabled) {
+    background: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  [part~='attach-button']:focus-visible {
+    outline: 2px solid var(--chit-color-accent);
+    outline-offset: 2px;
+  }
+
+  [part~='attach-button']:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
   [part~='send-button'] {
     display: grid;
     flex: none;

package/src/styles/host.css.js

@@ -37,6 +37,8 @@ export const hostStyles = css`
     --chit-color-header-bg: #ffffff;
     --chit-color-header-text: #1f1f1f;
 
+    --chit-bubble-radius: 14px;
+
     position: fixed;
     inset: 0;
     z-index: var(--chit-z-index);

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

@@ -2,6 +2,18 @@
 import { css } from 'lit';
 
 export const messageStyles = css`
+  :host {
+    /* Internal: the box the tail's path is drawn in. The path is written in
+       these units, so the two move together. */
+    --_chit-tail-w: 18px;
+    --_chit-tail-h: 20px;
+    /* How deep the tail's root sits inside the bubble. Less than the
+       bubble's own padding, so it never reaches the text. */
+    --_chit-tail-root: 9px;
+    /* Far enough down that the bubble's edge has straightened out under it. */
+    --_chit-tail-offset: calc(var(--chit-bubble-radius) / 4 + 1px);
+  }
+
   [part~='messages'] {
     flex: 1 1 auto;
     min-height: 0;
@@ -26,7 +38,13 @@ export const messageStyles = css`
    */
   [part~='message'] {
     display: flex;
-    align-items: flex-end;
+    /*
+     * The icon sits level with the top of the speaker's block — beside the
+     * name when there is one, beside the bubble's first line otherwise. At
+     * the bottom it would end up next to the timestamp, away from everything
+     * it identifies.
+     */
+    align-items: flex-start;
     gap: 0.5em;
     width: 100%;
     max-width: 100%;
@@ -52,7 +70,7 @@ export const messageStyles = css`
   [part~='bubble'] {
     position: relative;
     padding: 0.6em 0.85em;
-    border-radius: 14px;
+    border-radius: var(--chit-bubble-radius);
     background: var(--chit-color-assistant-bg);
     color: var(--chit-color-assistant-text);
   }
@@ -67,6 +85,99 @@ export const messageStyles = css`
     border-bottom-left-radius: 4px;
   }
 
+  /* --- tails -------------------------------------------------------------
+   *
+   * A tail is one pseudo-element: a box in the bubble's colour, clipped to a
+   * leaf whose point sits outside the bubble and whose root is buried inside
+   * it. Burying the root is what makes the join disappear — the bubble's own
+   * background covers the seam, so every corner keeps its radius and the two
+   * read as one shape at any radius.
+   *
+   * It hangs a little below the corner, where the bubble's edge has
+   * straightened out, so the root has something flat to sit against. The
+   * offset follows the radius for that reason.
+   *
+   * The other side and the downward version are the same path mirrored, so
+   * the curve is written once.
+   */
+
+  [part~='bubble']::after,
+  [part~='typing']::after,
+  [part~='loading']::after {
+    content: '';
+    display: none;
+    position: absolute;
+    width: var(--_chit-tail-w);
+    height: var(--_chit-tail-h);
+    clip-path: path('M 18 0.5 Q 8 0.8 0.5 3.5 Q 0 5.2 2 7 Q 10 9.5 18 19 Z');
+  }
+
+  /*
+   * Everything below needs clip-path: path() to draw the leaf. Where that is
+   * missing the tail stays hidden and the bubble keeps its default shape,
+   * rather than a bare rectangle poking out of its side.
+   */
+  @supports (clip-path: path('M 0 0 Z')) {
+    :host([data-bubble-tail='top']) [part~='bubble']::after,
+    :host([data-bubble-tail='top']) [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;
+    }
+
+    /*
+     * With a tail there is no need to clip the speaker's corner as well: one
+     * bubble carries one cue about who is talking, not two.
+     */
+    :host([data-bubble-tail='top']) [part~='bubble'],
+    :host([data-bubble-tail='top']) [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~='loading']::after {
+      right: calc(100% - var(--_chit-tail-root));
+      background: var(--chit-color-assistant-bg);
+    }
+
+    /* Your side: the same leaf, mirrored. */
+    :host([data-bubble-tail]) [part~='message-user'] [part~='bubble']::after {
+      left: calc(100% - var(--_chit-tail-root));
+      background: var(--chit-color-user-bg);
+      transform: scaleX(-1);
+    }
+
+    :host([data-bubble-tail='top']) [part~='bubble']::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~='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~='loading']::after {
+      transform: scaleY(-1);
+    }
+
+    :host([data-bubble-tail='bottom']) [part~='message-user'] [part~='bubble']::after {
+      transform: scale(-1, -1);
+    }
+  }
+
   [part~='avatar'] {
     flex: none;
     width: 2em;
@@ -75,6 +186,15 @@ export const messageStyles = css`
     object-fit: cover;
   }
 
+  /*
+   * A message that hides the theme's icon (avatar: null, for the second and
+   * later messages in a run) keeps its place in the row, so the bubbles below
+   * stay in line with the one that shows the face.
+   */
+  [part~='avatar'][data-placeholder] {
+    visibility: hidden;
+  }
+
   [part~='name'] {
     font-size: 0.8em;
     color: var(--chit-color-system-text);
@@ -117,21 +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;
-    border-radius: 14px;
+    /*
+     * 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%;
@@ -140,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;
   }
 
@@ -185,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;
     }
   }