@data-club/ai-hub 0.0.13 → 0.0.14

package/src/stories/_mockProvider.tsx

@@ -114,6 +114,9 @@ export function MockProvider(props: {
     lastTurnError: opts.lastTurnError ?? null,
     featureToggles: opts.featureToggles ?? null,
     refreshFeatureToggles: noopAsync,
+    isNarrowLayout: false,
+    sessionsDrawerOpen: false,
+    setSessionsDrawerOpen: () => undefined,
   };
   return (
     <aiHubContext.Provider value={value}>{props.children}</aiHubContext.Provider>

package/src/styles/CLASSES.md

@@ -26,6 +26,20 @@ properties only, never the attribute directly.
 .data-club-ai-hub[data-theme="dark"] { --dc-aih-bg: #0f1117; }
 ```
 
+### Layout attribute (responsive)
+
+The provider observes the component root's **own width** (ResizeObserver,
+not viewport media queries) and stamps `data-layout="narrow"` or
+`data-layout="wide"` on the same root `<div>`. The breakpoint defaults to
+720px and is overridable via the provider's `narrowLayoutBreakpoint` prop.
+In the narrow layout the sessions panel renders as an overlay drawer, the
+chat header gains a hamburger button, paddings tighten and touch targets
+grow. Wrappers can scope their own mobile brand tweaks the same way:
+
+```css
+.data-club-ai-hub[data-layout="narrow"] .my-brand-footer { flex-direction: column; }
+```
+
 ## CSS custom properties (theming tokens)
 
 Per-customer wrappers override these to brand the UI; they don't fork the
@@ -204,6 +218,10 @@ block and modifier.
 | `data-club-ai-hub__layout--panel-right` | Modifier when the panel is on the right. |
 | `data-club-ai-hub__sessions-panel` | The sessions sidebar. |
 | `data-club-ai-hub__sessions-panel--collapsed` | Collapsed state (thin reveal strip). |
+| `data-club-ai-hub__sessions-panel--drawer` | Narrow-layout overlay-drawer mode (replaces the inline column). |
+| `data-club-ai-hub__sessions-panel--drawer-open` | Drawer slid in / visible. |
+| `data-club-ai-hub__sessions-panel__scrim` | Backdrop scrim behind the open drawer (`data-open` attribute mirrors the state). |
+| `data-club-ai-hub__sessions-panel__drawer-close` | Close (✕) button at the top of the drawer. |
 | `data-club-ai-hub__sessions-panel__custom-header` | Slot wrapper at the top of the panel. |
 | `data-club-ai-hub__sessions-panel__new-button` | "+ New chat" button. |
 | `data-club-ai-hub__sessions-panel__reveal` | Reveal-strip button shown in collapsed state. |
@@ -229,6 +247,7 @@ block and modifier.
 | `data-club-ai-hub__main-column` | Right side of the layout (header + body). |
 | `data-club-ai-hub__main-column__body` | Body region under the chat header. |
 | `data-club-ai-hub__chat-header` | The strip above the messages with back-link + agent name. |
+| `data-club-ai-hub__chat-header__menu` | Hamburger button opening the sessions drawer (narrow layout only). |
 | `data-club-ai-hub__chat-header__back` | `[← Agents]` back-to-picker link. |
 | `data-club-ai-hub__chat-header__title` | Agent display-name text. |
 | `data-club-ai-hub__chat-header__extras` | Slot for `customHeaderContent`. |

package/src/styles/default.css

@@ -33,6 +33,10 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  /* Positioning context for the narrow-layout overlays (sessions drawer
+     + scrim) — they anchor to the component root, not the viewport, so
+     partial-width embeds keep the drawer inside their own bounds. */
+  position: relative;
 
   /* Surface colors */
   --dc-aih-bg: #ffffff;
@@ -2969,3 +2973,283 @@
 .data-club-ai-hub-admin__fork-rotating-item--selected {
   background-color: color-mix(in srgb, var(--dc-aih-accent) 16%, transparent);
 }
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Responsive — narrow (mobile) layout                                  */
+/*                                                                       */
+/*  `<AIHubProvider>` observes the component root's own width with a     */
+/*  ResizeObserver and stamps `data-layout="narrow" | "wide"` on         */
+/*  `.data-club-ai-hub` (breakpoint 720px by default, overridable via    */
+/*  the provider's `narrowLayoutBreakpoint` prop). Every rule below      */
+/*  keys off that attribute rather than a viewport media query so the    */
+/*  library adapts identically in full-page mounts, iframes, Shadow-DOM  */
+/*  widgets and partial-width embeds.                                    */
+/*                                                                       */
+/*  In the narrow layout the sessions panel renders as an overlay        */
+/*  drawer (`--drawer` modifier + `__scrim`) opened from the hamburger   */
+/*  button `<MainColumn>` adds to the chat header.                       */
+/* ────────────────────────────────────────────────────────────────────── */
+
+/* ── Sessions drawer ────────────────────────────────────────────────── */
+
+/* Backdrop scrim behind the open drawer. Sits above the sticky shell
+   header (z 20) and the header dropdowns (z 30), below modals (z 40). */
+.data-club-ai-hub__sessions-panel__scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 35;
+  background-color: rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--dc-aih-transition),
+    visibility var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__sessions-panel__scrim[data-open="true"] {
+  opacity: 1;
+  visibility: visible;
+}
+
+.data-club-ai-hub__sessions-panel--drawer {
+  /* Overlay panel anchored to the component root (nearest positioned
+     ancestor — `.data-club-ai-hub` sets `position: relative`). */
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 36;
+  width: min(320px, 85%);
+  min-width: 0;
+  max-width: none;
+  border-right: 1px solid var(--dc-aih-border);
+  box-shadow: 0 0 32px rgba(0, 0, 0, 0.25);
+  /* Closed: slid off-screen. `visibility` rides the same transition so
+     the panel stays focusable/clickable only while open, without a
+     display toggle that would kill the slide animation. */
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition: transform var(--dc-aih-transition),
+    visibility var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__sessions-panel--drawer-open {
+  /* `none` (not `translateX(0)`) — a transformed ancestor becomes the
+     containing block for `position: fixed` descendants, which would
+     trap the session-title modal inside the drawer's box. */
+  transform: none;
+  visibility: visible;
+}
+
+/* Right-side drawer when the layout flips the panel side. */
+.data-club-ai-hub__layout--panel-right .data-club-ai-hub__sessions-panel--drawer {
+  left: auto;
+  right: 0;
+  border-right: none;
+  border-left: 1px solid var(--dc-aih-border);
+  transform: translateX(100%);
+}
+
+.data-club-ai-hub__layout--panel-right .data-club-ai-hub__sessions-panel--drawer-open {
+  transform: none;
+}
+
+/* Close (✕) button pinned to the drawer's top edge. */
+.data-club-ai-hub__sessions-panel__drawer-close {
+  align-self: flex-end;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: var(--dc-aih-space-xs) var(--dc-aih-space-xs) 0 0;
+  padding: 0;
+  font: inherit;
+  font-size: var(--dc-aih-font-size-md);
+  color: var(--dc-aih-fg-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__sessions-panel__drawer-close:hover {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__sessions-panel__drawer-close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+/* ── Chat-header hamburger (narrow layout only — MainColumn renders it
+      only while `isNarrowLayout`) ─────────────────────────────────────── */
+
+.data-club-ai-hub__chat-header__menu {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  margin-left: calc(-1 * var(--dc-aih-space-sm));
+  padding: 0;
+  font: inherit;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: none;
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__chat-header__menu:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__chat-header__menu:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+/* ── Narrow-layout chrome: tighter paddings, full-width bubbles,
+      touch-friendly targets ──────────────────────────────────────────── */
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__shell-header {
+  height: 52px;
+  padding: 0 var(--dc-aih-space-md);
+  gap: var(--dc-aih-space-sm);
+}
+
+/* Container-width twin of the legacy 480px viewport rule — hide the
+   username next to the avatar whenever the component itself is narrow. */
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__user-menu__username {
+  display: none;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__user-menu__dropdown,
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__language-switcher__dropdown {
+  max-width: min(280px, calc(100vw - 2 * var(--dc-aih-space-md)));
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__chat-header {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  gap: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__messages {
+  padding: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__message-bubble {
+  max-width: 94%;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__input-area {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  /* Keep the composer clear of the iOS home-indicator strip. */
+  padding-bottom: calc(var(--dc-aih-space-sm) + env(safe-area-inset-bottom, 0px));
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__input-area__send,
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__input-area__stop {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__agents-picker {
+  padding: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__login,
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__change-password {
+  padding: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__login-card,
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__change-password-card {
+  padding: var(--dc-aih-space-lg);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__shell-footer {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__modal-overlay {
+  padding: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__modal {
+  padding: var(--dc-aih-space-lg);
+}
+
+/* Touch screens have no hover — the hover-revealed per-row actions must
+   be always visible, and comfortably tappable, in the narrow layout. */
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__sessions-panel__item-actions {
+  opacity: 1;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__sessions-panel__action-button {
+  width: 36px;
+  height: 36px;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub__sessions-panel__item-title {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-xs);
+}
+
+/* ── Narrow-layout admin: stacked nav bar + scrollable tables ───────── */
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__body {
+  flex-direction: column;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__nav {
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  border-right: none;
+  border-bottom: 1px solid var(--dc-aih-border);
+  overflow-x: auto;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__nav-heading {
+  display: none;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__nav-list {
+  flex-direction: row;
+  gap: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__nav-item {
+  width: auto;
+  white-space: nowrap;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__nav-exit {
+  width: auto;
+  margin-top: 0;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__content {
+  padding: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__page-header {
+  flex-wrap: wrap;
+}
+
+/* Wide data tables scroll inside their own box instead of stretching
+   the page. `display: block` keeps the inner table layout intact while
+   letting the element itself clip + scroll horizontally. */
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__users-table,
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__agents-table,
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__sessions-table,
+.data-club-ai-hub[data-layout="narrow"] .data-club-ai-hub-admin__rotating-table {
+  display: block;
+  overflow-x: auto;
+}