@hidemikimura/chit-ui 0.1.0

package/src/styles/content.css.js

@@ -0,0 +1,119 @@
+// @ts-check
+import { css } from 'lit';
+
+/**
+ * Everything that keeps arbitrary consumer HTML inside its bubble.
+ *
+ * The widget has no say over what goes in a message, so the containment is
+ * structural rather than a list of rules per element: the content box declares
+ * its own size, refuses to grow past the bubble, and contains its layout and
+ * paint so a stray position or margin cannot escape.
+ */
+export const contentStyles = css`
+  [part~='message-content'] {
+    min-width: 0;
+    max-width: 100%;
+    /* Long URLs and unbroken words wrap instead of widening the bubble. */
+    overflow-wrap: anywhere;
+    word-break: normal;
+    overflow-x: hidden;
+    /* Keeps a fixed or hugely-margined child from painting outside. */
+    contain: layout paint;
+    line-height: 1.5;
+  }
+
+  /*
+   * Plain text keeps its line breaks. Only this form: applying pre-wrap to
+   * html content would turn the newlines and indentation of the markup itself
+   * into visible blank lines.
+   */
+  [part~='message-content'][data-content='text'] {
+    white-space: pre-wrap;
+  }
+
+  [part~='message-content'] > :first-child {
+    margin-top: 0;
+  }
+  [part~='message-content'] > :last-child {
+    margin-bottom: 0;
+  }
+
+  /* Only direct children: a tooltip nested deeper still positions normally. */
+  [part~='message-content'] > * {
+    position: static !important;
+  }
+
+  [part~='message-content'] img,
+  [part~='message-content'] video,
+  [part~='message-content'] iframe,
+  [part~='message-content'] svg,
+  [part~='message-content'] canvas,
+  [part~='message-content'] picture,
+  [part~='message-content'] embed,
+  [part~='message-content'] object {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  /* Wide content scrolls inside itself rather than stretching the bubble. */
+  [part~='message-content'] table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+  }
+
+  [part~='message-content'] pre {
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: pre;
+  }
+
+  [part~='message-content'] code {
+    overflow-wrap: anywhere;
+  }
+
+  [part~='message-content'] a {
+    color: var(--chit-color-accent);
+  }
+
+  [part~='message-content'] button,
+  [part~='message-content'] input,
+  [part~='message-content'] select,
+  [part~='message-content'] textarea {
+    font: inherit;
+    max-width: 100%;
+  }
+
+  [part~='message-content'] h1,
+  [part~='message-content'] h2,
+  [part~='message-content'] h3,
+  [part~='message-content'] h4,
+  [part~='message-content'] h5,
+  [part~='message-content'] h6 {
+    font-size: 1.1em;
+    margin: 0.5em 0;
+  }
+
+  [part~='message-content'] p {
+    margin: 0.5em 0;
+  }
+
+  [part~='message-content'] ul,
+  [part~='message-content'] ol {
+    margin: 0.5em 0;
+    padding-inline-start: 1.5em;
+  }
+
+  [part~='message-content'] blockquote {
+    margin: 0.5em 0;
+    padding-inline-start: 0.75em;
+    border-inline-start: 3px solid var(--chit-color-border);
+  }
+
+  [part~='message-content'] hr {
+    border: 0;
+    border-top: 1px solid var(--chit-color-border);
+  }
+`;

package/src/styles/host.css.js

@@ -0,0 +1,160 @@
+// @ts-check
+import { css } from 'lit';
+
+/**
+ * Host-level concerns: the coordinate space the widget lives in, the theme
+ * fallbacks, and the transition animations.
+ *
+ * Every custom property here is a fallback only. ThemeController writes the
+ * real values into an adopted stylesheet that sits ahead of this one, and page
+ * CSS (`chit-ui { --chit-color-accent: ... }`) beats both.
+ */
+export const hostStyles = css`
+  :host {
+    --chit-z-index: 2147483000;
+    --chit-font-family: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
+    --chit-font-size: 14px;
+
+    --chit-launcher-size: 60px;
+    --chit-launcher-offset-x: 24px;
+    --chit-launcher-offset-y: 24px;
+    --chit-launcher-radius: 30px;
+    --chit-launcher-bg: #1a73e8;
+    --chit-launcher-text: #ffffff;
+    --chit-launcher-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+
+    --chit-panel-width: 380px;
+    --chit-panel-height: 600px;
+    --chit-panel-offset-x: 24px;
+    --chit-panel-offset-y: 24px;
+    --chit-panel-radius: 16px;
+    --chit-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
+
+    --chit-color-bg: #ffffff;
+    --chit-color-text: #1f1f1f;
+    --chit-color-accent: #1a73e8;
+    --chit-color-border: #e4e4e7;
+    --chit-color-header-bg: #ffffff;
+    --chit-color-header-text: #1f1f1f;
+
+    position: fixed;
+    inset: 0;
+    z-index: var(--chit-z-index);
+    /* The host is only a coordinate space; clicks land on the page behind it. */
+    pointer-events: none;
+    font-family: var(--chit-font-family);
+    font-size: var(--chit-font-size);
+    color: var(--chit-color-text);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /*
+   * Keyed off what the DOM is showing, not off the state property: that flips
+   * to 'hidden' the moment it is assigned, while the exit animation still has
+   * to play.
+   */
+  :host([data-rendered-state='hidden']) {
+    display: none;
+  }
+
+  :host > *,
+  [part] {
+    pointer-events: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* --- transitions ------------------------------------------------------ */
+
+  [data-anim] {
+    animation-duration: var(--_chit-anim-duration, 200ms);
+    animation-fill-mode: both;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  [data-anim='enter'][data-effect='fade'] {
+    animation-name: chit-fade-in;
+  }
+  [data-anim='exit'][data-effect='fade'] {
+    animation-name: chit-fade-out;
+  }
+  [data-anim='enter'][data-effect='scale'] {
+    animation-name: chit-scale-in;
+  }
+  [data-anim='exit'][data-effect='scale'] {
+    animation-name: chit-scale-out;
+  }
+  [data-anim='enter'][data-effect='slide'] {
+    animation-name: chit-slide-in;
+  }
+  [data-anim='exit'][data-effect='slide'] {
+    animation-name: chit-slide-out;
+  }
+
+  @keyframes chit-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes chit-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  @keyframes chit-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.85);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  @keyframes chit-scale-out {
+    from {
+      opacity: 1;
+      transform: none;
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.85);
+    }
+  }
+  @keyframes chit-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  @keyframes chit-slide-out {
+    from {
+      opacity: 1;
+      transform: none;
+    }
+    to {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-anim] {
+      animation: none !important;
+    }
+  }
+`;

package/src/styles/launcher.css.js

@@ -0,0 +1,139 @@
+// @ts-check
+import { css } from 'lit';
+
+export const launcherStyles = css`
+  [part~='launcher'] {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    width: var(--chit-launcher-size);
+    height: var(--chit-launcher-size);
+    padding: 0;
+    border: 0;
+    border-radius: var(--chit-launcher-radius);
+    background-color: var(--chit-launcher-bg);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    color: var(--chit-launcher-text);
+    box-shadow: var(--chit-launcher-shadow);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    transition: filter 120ms ease;
+  }
+
+  /* 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);
+  }
+
+  /*
+   * A consumer component draws the whole launcher, so the button stops being a
+   * visual of its own: no box to squeeze the component into, and none of the
+   * widget's own paint behind it. It keeps being a button, which is the part
+   * that matters for keyboards and screen readers.
+   */
+  [part~='launcher'][data-custom] {
+    width: auto;
+    height: auto;
+    padding: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+    color: inherit;
+  }
+
+  [part~='launcher'][data-custom]:hover {
+    filter: none;
+  }
+
+  [part~='launcher']:hover {
+    filter: brightness(1.06);
+  }
+
+  [part~='launcher']:focus-visible {
+    outline: 2px solid var(--chit-launcher-bg);
+    outline-offset: 3px;
+  }
+
+  [part~='launcher-icon'] {
+    width: 55%;
+    height: 55%;
+  }
+
+  [part~='launcher-label'] {
+    padding: 0 0.75em;
+    font-size: 0.95em;
+    white-space: nowrap;
+  }
+
+  /* --- placement -------------------------------------------------------- */
+
+  :host([data-launcher-position='bottom-right']) [part~='launcher'] {
+    right: var(--chit-launcher-offset-x);
+    bottom: var(--chit-launcher-offset-y);
+    transform-origin: bottom right;
+  }
+  :host([data-launcher-position='bottom-left']) [part~='launcher'] {
+    left: var(--chit-launcher-offset-x);
+    bottom: var(--chit-launcher-offset-y);
+    transform-origin: bottom left;
+  }
+  :host([data-launcher-position='top-right']) [part~='launcher'] {
+    right: var(--chit-launcher-offset-x);
+    top: var(--chit-launcher-offset-y);
+    transform-origin: top right;
+  }
+  :host([data-launcher-position='top-left']) [part~='launcher'] {
+    left: var(--chit-launcher-offset-x);
+    top: var(--chit-launcher-offset-y);
+    transform-origin: top left;
+  }
+
+  /* --- idle motion ------------------------------------------------------ */
+
+  /*
+   * Only while nothing else is animating: a transition sets data-anim and owns
+   * the animation property for as long as it runs.
+   */
+  :host([data-idle='pulse']) [part~='launcher']:not([data-anim]) {
+    animation: chit-idle-pulse 2.4s ease-in-out infinite;
+  }
+  :host([data-idle='bounce']) [part~='launcher']:not([data-anim]) {
+    animation: chit-idle-bounce 2.4s ease-in-out infinite;
+  }
+
+  @keyframes chit-idle-pulse {
+    0%,
+    70%,
+    100% {
+      box-shadow: var(--chit-launcher-shadow);
+    }
+    35% {
+      box-shadow:
+        var(--chit-launcher-shadow),
+        0 0 0 10px color-mix(in srgb, var(--chit-launcher-bg) 22%, transparent);
+    }
+  }
+
+  @keyframes chit-idle-bounce {
+    0%,
+    62%,
+    100% {
+      transform: translateY(0);
+    }
+    72% {
+      transform: translateY(-6px);
+    }
+    86% {
+      transform: translateY(-2px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([data-idle]) [part~='launcher']:not([data-anim]) {
+      animation: none;
+    }
+  }
+`;

package/src/styles/message.css.js

@@ -0,0 +1,192 @@
+// @ts-check
+import { css } from 'lit';
+
+export const messageStyles = css`
+  [part~='messages'] {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+
+  [part~='messages-inner'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    padding: 1em;
+  }
+
+  /*
+   * The row spans the full width and the bubble is capped inside it. Letting
+   * the row shrink to fit instead would make the bubble's percentage cap
+   * resolve against a shrink-to-fit parent, and because the content sets
+   * overflow-wrap: anywhere its min-content width is one character — so the
+   * bubble collapsed to a single column of letters.
+   */
+  [part~='message'] {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5em;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  [part~='message'] .body {
+    display: flex;
+    min-width: 0;
+    max-width: 78%;
+    flex-direction: column;
+    gap: 0.25em;
+  }
+
+  /* Reversed row: the bubble sits at the right edge without shrinking the row. */
+  [part~='message-user'] {
+    flex-direction: row-reverse;
+  }
+
+  [part~='message-user'] .body {
+    align-items: flex-end;
+  }
+
+  [part~='bubble'] {
+    position: relative;
+    padding: 0.6em 0.85em;
+    border-radius: 14px;
+    background: var(--chit-color-assistant-bg);
+    color: var(--chit-color-assistant-text);
+  }
+
+  [part~='message-user'] [part~='bubble'] {
+    background: var(--chit-color-user-bg);
+    color: var(--chit-color-user-text);
+    border-bottom-right-radius: 4px;
+  }
+
+  [part~='message-assistant'] [part~='bubble'] {
+    border-bottom-left-radius: 4px;
+  }
+
+  [part~='avatar'] {
+    flex: none;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  [part~='name'] {
+    font-size: 0.8em;
+    color: var(--chit-color-system-text);
+  }
+
+  [part~='meta'] {
+    display: flex;
+    gap: 0.5em;
+    font-size: 0.75em;
+    color: var(--chit-color-system-text);
+  }
+
+  [part~='status'][data-status='error'] {
+    color: #d93025;
+  }
+
+  [part~='message-system'] {
+    justify-content: center;
+    font-size: 0.8em;
+    color: var(--chit-color-system-text);
+    text-align: center;
+  }
+
+  /* --- streaming and typing --------------------------------------------- */
+
+  [part~='cursor'] {
+    display: inline-block;
+    width: 0.5em;
+    height: 1em;
+    margin-inline-start: 0.15em;
+    background: currentColor;
+    opacity: 0.6;
+    vertical-align: text-bottom;
+    animation: chit-caret 1s step-end infinite;
+  }
+
+  @keyframes chit-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  [part~='typing'] {
+    align-self: flex-start;
+    padding: 0.7em 0.9em;
+    border-radius: 14px;
+    border-bottom-left-radius: 4px;
+    background: var(--chit-color-assistant-bg);
+    color: var(--chit-color-assistant-text);
+  }
+
+  [part~='typing'] .dots {
+    display: inline-flex;
+    gap: 0.25em;
+  }
+
+  [part~='typing'] .dots i {
+    width: 0.4em;
+    height: 0.4em;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.4;
+    animation: chit-typing 1.2s ease-in-out infinite;
+  }
+
+  [part~='typing'] .dots i:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  [part~='typing'] .dots i:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+
+  @keyframes chit-typing {
+    0%,
+    60%,
+    100% {
+      opacity: 0.35;
+      transform: translateY(0);
+    }
+    30% {
+      opacity: 1;
+      transform: translateY(-3px);
+    }
+  }
+
+  /* --- jump to latest ---------------------------------------------------- */
+
+  [part~='to-latest'] {
+    position: absolute;
+    left: 50%;
+    bottom: 5.5em;
+    transform: translateX(-50%);
+    padding: 0.35em 0.9em;
+    border: 1px solid var(--chit-color-border);
+    border-radius: 999px;
+    background: var(--chit-color-bg);
+    color: var(--chit-color-text);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+    font: inherit;
+    font-size: 0.8em;
+    cursor: pointer;
+  }
+
+  [part~='to-latest']:focus-visible {
+    outline: 2px solid var(--chit-color-accent);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part~='cursor'],
+    [part~='typing'] .dots i {
+      animation: none;
+    }
+  }
+`;