@hidemikimura/chit-ui 0.2.0 → 0.3.0

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);
@@ -82,6 +88,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
  *