@hidemikimura/chit-ui 0.1.0 → 0.2.0

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/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,90 @@ 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 {
+    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='bottom']) [part~='bubble']::after,
+    :host([data-bubble-tail='top']) [part~='typing']::after,
+    :host([data-bubble-tail='bottom']) [part~='typing']::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='bottom']) [part~='bubble'],
+    :host([data-bubble-tail='top']) [part~='typing'],
+    :host([data-bubble-tail='bottom']) [part~='typing'] {
+      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 {
+      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 {
+      top: var(--_chit-tail-offset);
+    }
+
+    :host([data-bubble-tail='bottom']) [part~='bubble']::after,
+    :host([data-bubble-tail='bottom']) [part~='typing']::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 {
+      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 +177,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);
@@ -118,9 +229,12 @@ export const messageStyles = css`
   }
 
   [part~='typing'] {
+    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;
+    border-radius: var(--chit-bubble-radius);
     border-bottom-left-radius: 4px;
     background: var(--chit-color-assistant-bg);
     color: var(--chit-color-assistant-text);

package/src/styles/panel.css.js

@@ -76,18 +76,33 @@ 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-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 +111,7 @@ export const panelStyles = css`
     gap: 0.25em;
   }
 
+  [part~='home-button'],
   [part~='close-button'] {
     display: grid;
     place-items: center;
@@ -109,15 +125,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

@@ -72,7 +72,7 @@ export const defaultTheme = {
     offset: { x: 24, y: 24 },
     radius: 16,
     launcher: /** @type {const} */ ('hidden'),
-    header: { title: null, logo: null, avatar: null },
+    header: { visible: true, title: null, logo: null, home: false },
     background: { image: null },
     colors: {
       background: PALETTE.surface,
@@ -91,6 +91,16 @@ 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') },
+    // 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 +110,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.
@@ -57,6 +58,15 @@
  * @property {Animation & { idle?: 'none' | 'pulse' | 'bounce' }} [animation]
  */
 
+/**
+ * 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 +94,13 @@
  * @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 {{ 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 {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.
  */
 
 /**
@@ -124,11 +136,13 @@
  * @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 {{ 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 {{ 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