@veluai/velu 0.1.0

package/runtime/velu-ui/components/chatbot.css

@@ -0,0 +1,617 @@
+/* Chatbot — the Velu "Ask AI" slide-out panel. Ported from the
+   Claude-Design handoff and retokenized: every design literal is mapped
+   onto velu-ui's scale, so the panel themes for free via [data-theme].
+     crimson         → --accent-color
+     gray-100/hover  → --surface-color
+     gray-200/300    → --border-color
+     gray-500/600    → --muted-color
+     fg-1 (black)    → --text-color
+     white           → --page-bg
+     4px spacing     → --s-6 … and up the modular scale
+*/
+
+/* ── Panel + slide ──────────────────────────────────────────────────── */
+/* Fixed panel width via `--vchat-width` (overridable, like --card-min);
+   capped at 100vw so it can never exceed the viewport. */
+.velu-chatbot {
+  /* Comfortable fixed panel width. The panel slides OVER the right
+     edge (it's a floating overlay, z-50) so the article doesn't
+     reflow when it opens. (Mobile/tablet use a full-width bottom
+     sheet — see the @container override below.) */
+  --vchat-width: 24rem;
+  position: fixed;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 50;
+  inline-size: var(--vchat-width);
+  max-inline-size: 100vw;
+  display: flex;
+  flex-direction: column;
+  background: var(--page-bg);
+  color: var(--text-color);
+  /* Panel edge — match the page header / TocBar / footer hairline
+     recipe (--surface-color), not the stronger card/button border
+     color. Keeps the chatbot consistent with other surface
+     containers in the product. */
+  border-inline-start: var(--border-width) solid var(--surface-color);
+  font-weight: var(--weight-light);
+  /* Closed: fully off the inline-end edge. Open: slid to 0. */
+  transform: translateX(100%);
+  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.velu-chatbot--open {
+  transform: translateX(0);
+  box-shadow:
+    0 0 var(--s2) color-mix(in srgb, #000 18%, transparent),
+    0 0 var(--s0) color-mix(in srgb, #000 8%, transparent);
+}
+/* base.css applies a global `* { max-width: 66ch }`; reset it so the
+   panel's structural elements size to flex/the panel, not 66ch. */
+.velu-chatbot * {
+  max-inline-size: none;
+}
+
+/* Drag handle is mobile-only — the @container block below flips it
+   on; this default hide keeps the desktop slide-out clean. */
+.velu-chatbot__drag-handle {
+  display: none;
+}
+
+/* ── Bottom-sheet variant (tablet + mobile, < 1024px) ─────────────── */
+/* At narrow / mobile widths the side-panel layout doesn't fit — the
+   chatbot instead opens as a bottom sheet covering most of the
+   viewport. Override the inline anchoring with block-end anchoring,
+   full-width sizing, and a translateY transform that slides up from
+   the bottom edge. The leading-edge border becomes a top-edge border
+   and the sheet picks up top corner rounding so it reads as a
+   separate surface lifting out of the viewport bottom. Threshold
+   matches the rest of the responsive layout (sidebar collapse,
+   right-rail TOC drop, etc.). */
+@container docs (max-width: 1024px) {
+  .velu-chatbot {
+    inset-inline: 0;
+    inset-block-end: 0;
+    inset-block-start: auto;
+    inline-size: 100vw;
+    max-inline-size: 100vw;
+    block-size: min(85vh, 40rem);
+    transform: translateY(100%);
+    border-inline-start: 0;
+    border-block-start: var(--border-width) solid var(--surface-color);
+    border-start-start-radius: var(--radius-md);
+    border-start-end-radius: var(--radius-md);
+    /* Make room at the top for the drag-handle pill (the ::before
+       below) so it doesn't overlap the existing header content. */
+    padding-block-start: var(--s1);
+  }
+  /* Drag handle — full-width touch-capture strip across the top of
+     the sheet. The pill VISUAL is a centered ::before pseudo; the
+     strip itself stays invisible but is tall enough to grab. Pointer
+     events here drive the drag-to-dismiss gesture (see Chatbot.jsx).
+     `touch-action: none` prevents the browser from interpreting the
+     vertical drag as a scroll / pull-to-refresh. */
+  .velu-chatbot__drag-handle {
+    display: block;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    block-size: var(--s1);
+    touch-action: none;
+    cursor: grab;
+    z-index: 10;
+  }
+  .velu-chatbot__drag-handle::before {
+    content: '';
+    position: absolute;
+    inset-block-start: var(--s-3);
+    inset-inline-start: 50%;
+    inline-size: var(--s2);
+    block-size: var(--s-5);
+    background: var(--border-color);
+    border-radius: 999px;
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+  .velu-chatbot__drag-handle:active {
+    cursor: grabbing;
+  }
+  .velu-chatbot--open {
+    transform: translateY(0);
+  }
+}
+
+/* ── Header ─────────────────────────────────────────────────────────── */
+/* Layout (flex/gap/justify) comes from <Cluster>; this owns chrome. */
+.velu-chatbot__header {
+  flex: none;
+  padding: var(--s-2) var(--s-1);
+  /* Section divider — --surface-color hairline like the page
+     header's own bottom border, not the stronger --border-color. */
+  border-block-end: var(--border-width) solid var(--surface-color);
+  background: var(--page-bg);
+}
+.velu-chatbot__mark {
+  flex: none;
+  color: var(--accent-color);
+}
+.velu-chatbot__brand {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--s-5);
+}
+.velu-chatbot__brand-name {
+  font-size: var(--f-h5);
+  font-weight: var(--weight-light);
+  color: var(--text-color);
+}
+.velu-chatbot__brand-sep {
+  color: var(--muted-color);
+}
+.velu-chatbot__brand-title {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  color: var(--muted-color);
+}
+.velu-chatbot__iconbtn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-chatbot__iconbtn:hover {
+  background: var(--surface-color);
+  color: var(--text-color);
+}
+.velu-chatbot__iconbtn.is-active {
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  color: var(--accent-color);
+}
+
+/* Shared eyebrow label (Suggested / Sources / Follow up / Recent chats) */
+.velu-chatbot__eyebrow {
+  font-size: var(--f-h7);
+  font-weight: var(--weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted-color);
+}
+
+/* ── History overlay ────────────────────────────────────────────────── */
+.velu-chatbot__history {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  background: var(--page-bg);
+  /* Inherit the chatbot's corner radii — at desktop this is 0 (no
+     change); at mobile the parent has top-start / top-end rounded,
+     so the history overlay picks them up too rather than painting
+     square corners over the parent's curves. */
+  border-radius: inherit;
+}
+.velu-chatbot__history-head {
+  flex: none;
+  padding: var(--s-2) var(--s-1);
+  /* Same hairline recipe as the main chatbot header. */
+  border-block-end: var(--border-width) solid var(--surface-color);
+}
+.velu-chatbot__history-list {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--s-3);
+}
+.velu-chatbot__history-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s-6);
+  padding: var(--s-3) var(--s-2);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  text-align: start;
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+.velu-chatbot__history-item:hover {
+  background: var(--surface-color);
+}
+.velu-chatbot__history-item-title {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-normal);
+  color: var(--text-color);
+}
+.velu-chatbot__history-item-when {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  color: var(--muted-color);
+}
+
+/* ── Body ───────────────────────────────────────────────────────────── */
+.velu-chatbot__body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--s0) var(--s-1) var(--s-3);
+  scroll-behavior: smooth;
+}
+
+/* ── Welcome / suggestions ──────────────────────────────────────────── */
+.velu-chatbot__welcome-hi {
+  margin: 0;
+  font-size: var(--f-h4);
+  font-weight: var(--weight-medium);
+  line-height: var(--lh-h4);
+  color: var(--text-color);
+}
+.velu-chatbot__suggest {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-1);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  line-height: var(--lh-h6);
+  color: var(--text-color);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.velu-chatbot__suggest:hover {
+  border-color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+}
+.velu-chatbot__suggest svg {
+  flex: none;
+  color: var(--muted-color);
+}
+.velu-chatbot__suggest:hover svg {
+  color: var(--accent-color);
+}
+
+/* ── Messages ───────────────────────────────────────────────────────── */
+.velu-chatbot__msg {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+.velu-chatbot__msg--user {
+  align-items: flex-end;
+}
+.velu-chatbot__bubble {
+  max-inline-size: 84%;
+  padding: var(--s-3) var(--s-1);
+  background: var(--surface-color);
+  color: var(--text-color);
+  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm)
+    var(--radius-md);
+  font-size: var(--f-h6);
+  line-height: var(--lh-body);
+}
+.velu-chatbot__role {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted-color);
+}
+.velu-chatbot__role svg {
+  flex: none;
+  color: var(--accent-color);
+}
+.velu-chatbot__role.is-thinking {
+  color: var(--accent-color);
+}
+/* Shimmer sweep on the "Velu is thinking" label. */
+.velu-chatbot__role.is-thinking span {
+  background: linear-gradient(
+    90deg,
+    var(--muted-color) 0%,
+    var(--muted-color) 35%,
+    var(--accent-color) 50%,
+    var(--muted-color) 65%,
+    var(--muted-color) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: velu-chatbot-shimmer 1.8s linear infinite;
+}
+@keyframes velu-chatbot-shimmer {
+  0%   { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
+/* "Thinking" loader — 3x3 squares, opacity wave along the anti-diagonal. */
+.velu-chatbot__wave {
+  display: block;
+  flex: none;
+  inline-size: 1em;
+  block-size: 1em;
+}
+.velu-chatbot__wave rect {
+  fill: var(--accent-color);
+  animation: velu-chatbot-wave 1.3s ease-in-out infinite;
+}
+.velu-chatbot__wave rect[data-cell="0"] { animation-delay: 0s;    }
+.velu-chatbot__wave rect[data-cell="1"] { animation-delay: 0.1s;  }
+.velu-chatbot__wave rect[data-cell="2"] { animation-delay: 0.2s;  }
+.velu-chatbot__wave rect[data-cell="3"] { animation-delay: 0.3s;  }
+.velu-chatbot__wave rect[data-cell="4"] { animation-delay: 0.4s;  }
+@keyframes velu-chatbot-wave {
+  0%, 60%, 100% { opacity: 0.2; }
+  30%           { opacity: 1; }
+}
+
+/* ── AI answer body ─────────────────────────────────────────────────── */
+.velu-chatbot__answer {
+  font-size: var(--f-h6);
+  line-height: var(--lh-body);
+  color: var(--text-color);
+}
+.velu-chatbot__answer p {
+  margin: 0 0 var(--s-3);
+}
+.velu-chatbot__answer p:last-child {
+  margin-block-end: 0;
+}
+.velu-chatbot__answer code {
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  padding: 0 var(--s-5);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+}
+
+/* Inline citation chip */
+.velu-chatbot__cite {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 1.5em;
+  block-size: 1.5em;
+  padding: 0 var(--s-5);
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  font-weight: var(--weight-medium);
+  color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease;
+}
+.velu-chatbot__cite:hover {
+  background: var(--page-bg);
+  border-color: var(--accent-color);
+}
+
+/* Streaming caret */
+.velu-chatbot__caret {
+  display: inline-block;
+  inline-size: var(--s-4);
+  block-size: 1em;
+  vertical-align: text-bottom;
+  background: var(--accent-color);
+  animation: velu-chatbot-caret 0.9s steps(2) infinite;
+}
+@keyframes velu-chatbot-caret {
+  50% { opacity: 0; }
+}
+
+/* Sources card list */
+.velu-chatbot__sources {
+  margin-block-start: var(--s-2);
+}
+.velu-chatbot__source {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-2);
+  padding: var(--s-3) var(--s-2);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.12s ease;
+}
+.velu-chatbot__source:hover {
+  border-color: var(--accent-color);
+}
+.velu-chatbot__source-num {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5em;
+  block-size: 1.5em;
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  font-weight: var(--weight-medium);
+  color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  border-radius: var(--radius-sm);
+}
+.velu-chatbot__source-meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-6);
+  min-inline-size: 0;
+}
+.velu-chatbot__source-title {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+.velu-chatbot__source-path {
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  color: var(--muted-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Follow-ups */
+.velu-chatbot__followups {
+  margin-block-start: var(--s-1);
+}
+.velu-chatbot__followup {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-2);
+  padding: var(--s-3) var(--s-2);
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  color: var(--text-color);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 0.12s ease, color 0.12s ease;
+}
+.velu-chatbot__followup:hover {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+.velu-chatbot__followup svg {
+  flex: none;
+}
+
+/* Message hover actions */
+.velu-chatbot__msg-actions {
+  margin-inline-start: calc(var(--s-3) * -1);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.velu-chatbot__msg--ai:hover .velu-chatbot__msg-actions {
+  opacity: 1;
+}
+.velu-chatbot__msg-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.625em;
+  block-size: 1.625em;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+}
+.velu-chatbot__msg-action:hover {
+  background: var(--surface-color);
+  color: var(--text-color);
+}
+
+/* ── Composer ───────────────────────────────────────────────────────── */
+.velu-chatbot__composer {
+  flex: none;
+  padding: var(--s-1);
+  background: var(--page-bg);
+  /* Section divider — --surface-color hairline matching the
+     chatbot's other structural section borders. The input field
+     INSIDE the composer keeps its --border-color (it's an
+     interactive element, not a section divider). */
+  border-block-start: var(--border-width) solid var(--surface-color);
+}
+.velu-chatbot__input-wrap {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--s-3);
+  padding: var(--s-3);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+.velu-chatbot__input-wrap:focus-within {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 var(--border-width) var(--accent-color);
+}
+.velu-chatbot__input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  /* ~4 lines of body leading before the textarea starts scrolling. */
+  max-block-size: calc(1em * var(--lh-body) * 4);
+  padding: 0;
+  border: 0;
+  outline: none;
+  resize: none;
+  background: transparent;
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  line-height: var(--lh-body);
+  color: var(--text-color);
+}
+.velu-chatbot__input::placeholder {
+  color: var(--muted-color);
+}
+.velu-chatbot__send {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--surface-color);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-chatbot__send.is-active {
+  background: var(--accent-color);
+  color: #fff;
+}
+.velu-chatbot__send:disabled {
+  cursor: not-allowed;
+}
+.velu-chatbot__foot {
+  margin-block-start: var(--s-3);
+  padding-inline: var(--s-5);
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  color: var(--muted-color);
+}
+.velu-chatbot__foot kbd {
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  padding: 0 var(--s-5);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .velu-chatbot { transition: none; }
+  .velu-chatbot__wave rect,
+  .velu-chatbot__role.is-thinking span,
+  .velu-chatbot__caret { animation: none; }
+}