@hidemikimura/chit-ui 0.1.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);
@@ -76,18 +82,48 @@ export const panelStyles = css`
     color: var(--chit-color-header-text);
   }
 
+  /*
+   * The image and the title are one flex item. A slot is display: contents,
+   * so without this wrapper its children become items of the header itself
+   * 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;
+    align-items: center;
+    gap: 0.5em;
+  }
+
   [part~='header-heading'] {
+    overflow: hidden;
     font-size: 1.05em;
     font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   [part~='header-logo'] {
+    flex: none;
     width: 1.75em;
     height: 1.75em;
-    margin-inline-end: 0.5em;
     border-radius: 50%;
     object-fit: cover;
-    vertical-align: middle;
   }
 
   [part~='header-actions'] {
@@ -96,6 +132,7 @@ export const panelStyles = css`
     gap: 0.25em;
   }
 
+  [part~='home-button'],
   [part~='close-button'] {
     display: grid;
     place-items: center;
@@ -109,15 +146,18 @@ export const panelStyles = css`
     cursor: pointer;
   }
 
+  [part~='home-button']:hover,
   [part~='close-button']:hover {
     background: color-mix(in srgb, currentColor 10%, transparent);
   }
 
+  [part~='home-button']:focus-visible,
   [part~='close-button']:focus-visible {
     outline: 2px solid var(--chit-color-accent);
     outline-offset: 1px;
   }
 
+  [part~='home-button'] svg,
   [part~='close-button'] svg {
     width: 1.1em;
     height: 1.1em;

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,7 +73,10 @@ export const defaultTheme = {
     offset: { x: 24, y: 24 },
     radius: 16,
     launcher: /** @type {const} */ ('hidden'),
-    header: { title: null, logo: null, avatar: null },
+    // 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: {
       background: PALETTE.surface,
@@ -91,6 +95,28 @@ export const defaultTheme = {
       inputText: PALETTE.ink,
       inputPlaceholder: PALETTE.muted,
     },
+    // No tail by default: the squared-off corner on the speaker's side is
+    // 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: {
+      assistant: { name: null, avatar: null },
+      user: { name: null, avatar: null },
+    },
     animation: {
       enter: /** @type {const} */ ('scale'),
       exit: /** @type {const} */ ('fade'),
@@ -100,7 +126,16 @@ export const defaultTheme = {
       // ScrollController for why.
       scroll: /** @type {const} */ ('smooth'),
     },
-    input: { maxRows: 5, placeholder: null },
+    // `attach` is off by default: a widget that offers to take files when
+    // nothing is listening for them would be promising something it cannot
+    // keep. `accept` and `multiple` go straight to the file input.
+    input: {
+      maxRows: 5,
+      placeholder: null,
+      attach: false,
+      accept: 'image/*,video/*',
+      multiple: false,
+    },
   },
   hidden: {
     animation: { exit: /** @type {const} */ ('fade'), duration: 150 },

package/src/theme/theme-to-css.js

@@ -76,7 +76,12 @@ export function themeToVariables(theme) {
     '--chit-color-input-text': c.inputText,
     '--chit-color-input-placeholder': c.inputPlaceholder,
 
+    '--chit-bubble-radius': px(open.bubble.radius),
+
     '--_chit-input-max-rows': String(open.input.maxRows),
+    // Internal: the width the speaker's icon takes up, so the typing
+    // indicator lines up with the bubbles it belongs to.
+    '--_chit-speaker-gutter': open.speaker.assistant.avatar ? '2.5em' : '0px',
   };
 }
 

package/src/themes/green.js

@@ -0,0 +1,47 @@
+// @ts-check
+
+/** @import { Theme } from '../types.js' */
+
+/**
+ * A green messenger look: a pale blue-grey conversation background, white
+ * bubbles for them, bright green for you, tails on the top corner.
+ *
+ * This is Chit UI's own palette in that familiar shape. It carries no other
+ * product's logo, wordmark or artwork, and the greens are Chit UI's own: the
+ * deep green is dark enough that white text and the send icon clear WCAG AA
+ * on it, which the bright green of the bubbles could not do.
+ * `test/theme.test.js` re-checks every pair here, so a later tweak cannot
+ * quietly drop below AA.
+ *
+ * @type {Theme}
+ */
+export const greenTheme = {
+  closed: {
+    colors: {
+      background: '#0a6b36',
+      text: '#ffffff',
+      shadow: '0 4px 12px rgba(16, 42, 26, 0.32)',
+    },
+  },
+  open: {
+    radius: 12,
+    colors: {
+      background: '#d3ddea',
+      text: '#16212c',
+      accent: '#0a6b36',
+      border: '#b6c5d6',
+      shadow: '0 8px 32px rgba(16, 32, 48, 0.28)',
+      headerBackground: '#ffffff',
+      headerText: '#16212c',
+      userBubble: '#9ce26c',
+      userText: '#14240c',
+      assistantBubble: '#ffffff',
+      assistantText: '#16212c',
+      systemText: '#37475a',
+      inputBackground: '#ffffff',
+      inputText: '#16212c',
+      inputPlaceholder: '#5c6370',
+    },
+    bubble: { radius: 18, tail: 'top' },
+  },
+};

package/src/themes/index.js

@@ -0,0 +1,15 @@
+// @ts-check
+
+/**
+ * Themes the library ships with.
+ *
+ * A preset is an ordinary `Theme` object, so it is assigned like any other
+ * theme and customised by spreading over it:
+ *
+ *     import { greenTheme } from '@hidemikimura/chit-ui/themes.js';
+ *     el.theme = { ...greenTheme, open: { ...greenTheme.open, width: 420 } };
+ *
+ * Importing this module does not register the element or pull the widget in;
+ * it is data only.
+ */
+export { greenTheme } from './green.js';

package/src/types.js

@@ -11,6 +11,7 @@
  * @typedef {'pc' | 'mobile'} Device
  * @typedef {'fade' | 'scale' | 'slide' | 'none'} Effect
  * @typedef {'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'} Position
+ * @typedef {'none' | 'top' | 'bottom'} BubbleTail
  */
 
 /**
@@ -18,8 +19,8 @@
  * @property {string} id                       Unique within the array; used as the diffing key.
  * @property {Role} role
  * @property {string | Date} [time]
- * @property {string} [name]
- * @property {string} [avatar]
+ * @property {string | null} [name]           Overrides the theme's speaker name; null hides it.
+ * @property {string | null} [avatar]         Overrides the theme's speaker image; null hides it.
  * @property {MessageStatus} [status]
  * @property {boolean} [streaming]
  * @property {unknown} [meta]                  Never touched by the library.
@@ -51,12 +52,34 @@
  * @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.
+ *
+ * @typedef {Object} SpeakerTheme
+ * @property {string | null} [name]            Shown above the bubble.
+ * @property {string | null} [avatar]          Image URL for the speaker's icon.
+ */
+
 /**
  * @typedef {Object} OpenColors
  * @property {string} [background]
@@ -84,11 +107,15 @@
  * @property {Offset} [offset]
  * @property {number} [radius]
  * @property {'hidden' | 'visible'} [launcher] Keep the launcher visible while open.
- * @property {{ title?: string | null, logo?: string | null, avatar?: string | null }} [header]
+ * @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 }} [input]
+ * @property {{ maxRows?: number, placeholder?: string | null, attach?: boolean, accept?: string, multiple?: boolean }} [input]   Composer: rows, placeholder, and the attach button.
  */
 
 /**
@@ -110,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
@@ -124,11 +152,15 @@
  * @property {{ x: number, y: number }} offset
  * @property {number} radius
  * @property {'hidden' | 'visible'} launcher
- * @property {{ title: string | null, logo: string | null, avatar: string | null }} header
+ * @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 }} input
+ * @property {{ maxRows: number, placeholder: string | null, attach: boolean, accept: string, multiple: boolean }} input
  *
  * @typedef {Object} ResolvedTheme
  * @property {number} breakpoint