@hidemikimura/chit-ui 0.2.0 → 0.3.1

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;
     }
   }

package/src/styles/panel.css.js

@@ -8,8 +8,14 @@ export const panelStyles = css`
     flex-direction: column;
     width: var(--chit-panel-width);
     height: var(--chit-panel-height);
-    max-width: calc(100vw - var(--chit-panel-offset-x) * 2);
-    max-height: calc(100vh - var(--chit-panel-offset-y) * 2);
+    /*
+     * The room left between the panel's own corner and the far edge. Doubling
+     * the offset instead would assume the panel is centred between two equal
+     * gaps, which stops being true the moment it is dragged: moving it up
+     * would have made it shorter on the way.
+     */
+    max-width: calc(100vw - var(--chit-panel-offset-x) - 8px);
+    max-height: calc(100vh - var(--chit-panel-offset-y) - 8px);
     overflow: hidden;
     border-radius: var(--chit-panel-radius);
     background-color: var(--chit-color-bg);
@@ -50,12 +56,18 @@ export const panelStyles = css`
    * A phone gets the whole screen. dvh rather than vh so the browser chrome
    * collapsing does not leave a gap, and the safe-area insets keep the header
    * clear of the notch.
+   *
+   * While a keyboard is up, the two --_chit-vv-* properties carry what is
+   * actually on screen (ViewportController fills them in from
+   * visualViewport); dvh knows nothing about a keyboard and would leave the
+   * composer behind it.
    */
   :host([data-device='mobile']) [part~='panel'],
   :host([data-device='mobile'][data-panel-position]) [part~='panel'] {
     inset: 0;
+    top: var(--_chit-vv-top, 0px);
     width: 100vw;
-    height: 100dvh;
+    height: var(--_chit-vv-height, 100dvh);
     max-width: none;
     max-height: none;
     border-radius: 0;
@@ -82,6 +94,21 @@ export const panelStyles = css`
    * and space-between pushes the image to one edge and the title to the
    * middle, away from each other.
    */
+  [part~='header'][data-draggable] {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+
+  [part~='header'][data-draggable]:active {
+    cursor: grabbing;
+  }
+
+  [part~='header'][data-draggable]:focus-visible {
+    outline: 2px solid var(--chit-color-accent);
+    outline-offset: -2px;
+  }
+
   [part~='header-title'] {
     display: inline-flex;
     min-width: 0;

package/src/theme/default-theme.js

@@ -23,6 +23,7 @@ const CLOSED_PC = {
   position: 'bottom-right',
   offset: { x: 24, y: 24 },
   radius: 30,
+  draggable: false,
   image: null,
   label: null,
   component: null,
@@ -72,6 +73,9 @@ export const defaultTheme = {
     offset: { x: 24, y: 24 },
     radius: 16,
     launcher: /** @type {const} */ ('hidden'),
+    // Off by default: a widget that slides around under the thumb on a first
+    // touch would be startling, and most pages want it where they put it.
+    draggable: false,
     header: { visible: true, title: null, logo: null, home: false },
     background: { image: null },
     colors: {
@@ -95,6 +99,18 @@ export const defaultTheme = {
     // enough to show who is talking, and a tail is a strong look to impose on
     // a widget that has to sit in someone else's page.
     bubble: { radius: 14, tail: /** @type {const} */ ('none') },
+    // The wait for an answer. `auto` is opt-in: a widget that starts showing
+    // a wait on its own would be guessing that every submit is followed by a
+    // round trip, which is not true of a form or a scenario branch.
+    loading: {
+      auto: false,
+      // A spinner rather than the typing dots: the same three dots would say
+      // "someone is writing to you", which is not what a wait on a server is.
+      // `'dots'` is there for the cases where it really is a person.
+      style: /** @type {const} */ ('spinner'),
+      text: null,
+      timeout: 0,
+    },
     // Who is talking. Nothing by default: a widget that invents a name and a
     // face for the consumer's support desk would be guessing.
     speaker: {

package/src/types.js

@@ -52,12 +52,25 @@
  * @property {number} [radius]
  * @property {string | null} [image]           Icon image URL; null clears the default.
  * @property {string | null} [label]
+ * @property {boolean} [draggable]            Let the reader move it around the viewport.
  * @property {(new () => HTMLElement) | string | null} [component]  A component that draws the whole launcher.
  * @property {Record<string, unknown>} [props] Properties written to that component.
  * @property {{ background?: string, text?: string, shadow?: string }} [colors]
  * @property {Animation & { idle?: 'none' | 'pulse' | 'bounce' }} [animation]
  */
 
+/**
+ * The wait between sending and the answer arriving.
+ *
+ * @typedef {'dots' | 'spinner' | 'text'} LoadingStyle
+ *
+ * @typedef {Object} LoadingTheme
+ * @property {boolean} [auto]        Show it from `chat-submit` until the next message from the other side.
+ * @property {LoadingStyle} [style]  What it looks like.
+ * @property {string | null} [text]  Wording beside the animation, or on its own for `'text'`.
+ * @property {number} [timeout]      ms after which it gives up on its own; 0 leaves it to the consumer.
+ */
+
 /**
  * Who is talking, as the theme describes them. A message that carries its own
  * `name` or `avatar` wins; `null` on the message hides what the theme set.
@@ -94,11 +107,13 @@
  * @property {Offset} [offset]
  * @property {number} [radius]
  * @property {'hidden' | 'visible'} [launcher] Keep the launcher visible while open.
+ * @property {boolean} [draggable]             Let the reader move the panel by its title bar.
  * @property {{ visible?: boolean, title?: string | null, logo?: string | null, home?: boolean }} [header]   The title bar: whether it is there at all, its text, its image, and whether it offers a way back to the start.
  * @property {{ image?: string | null }} [background]
  * @property {OpenColors} [colors]
  * @property {{ radius?: number, tail?: BubbleTail }} [bubble]  Bubble corner radius, and where the tail points from.
  * @property {{ assistant?: SpeakerTheme, user?: SpeakerTheme }} [speaker]  Default name and icon per side.
+ * @property {LoadingTheme} [loading]      The wait for an answer.
  * @property {Animation & { scroll?: 'smooth' | 'instant' }} [animation]
  * @property {{ maxRows?: number, placeholder?: string | null, attach?: boolean, accept?: string, multiple?: boolean }} [input]   Composer: rows, placeholder, and the attach button.
  */
@@ -122,6 +137,7 @@
  * @property {Position} position
  * @property {{ x: number, y: number }} offset
  * @property {number} radius
+ * @property {boolean} draggable
  * @property {string | null} image
  * @property {string | null} label
  * @property {(new () => HTMLElement) | string | null} component
@@ -136,11 +152,13 @@
  * @property {{ x: number, y: number }} offset
  * @property {number} radius
  * @property {'hidden' | 'visible'} launcher
+ * @property {boolean} draggable
  * @property {{ visible: boolean, title: string | null, logo: string | null, home: boolean }} header
  * @property {{ image: string | null }} background
  * @property {Required<OpenColors>} colors
  * @property {{ radius: number, tail: BubbleTail }} bubble
  * @property {{ assistant: Required<SpeakerTheme>, user: Required<SpeakerTheme> }} speaker
+ * @property {Required<LoadingTheme>} loading
  * @property {{ enter: Effect, exit: Effect, duration: number, scroll: 'smooth' | 'instant' }} animation
  * @property {{ maxRows: number, placeholder: string | null, attach: boolean, accept: string, multiple: boolean }} input
  *