@data-club/ai-hub 0.0.12 → 0.0.14

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;
+}

package/src/types.ts

@@ -696,8 +696,21 @@ export interface AIHubFeatureToggles {
   sessions_panel_resizable?: boolean;
   /** Overrides `sessionsPanelCollapsible` prop. */
   sessions_panel_collapsible?: boolean;
+  /**
+   * Overrides `sessionsPanelDefaultCollapsed` prop. When true the sessions
+   * panel starts collapsed on page load (until the user toggles it).
+   * Default **false** (panel starts extended).
+   */
+  sessions_panel_default_collapsed?: boolean;
   /** Overrides `showCreateSessionButton` prop. */
   create_session_button_enabled?: boolean;
+  /**
+   * Overrides `loadLastSession` prop. When true the most recently updated
+   * session opens automatically on page load (a brand-new session is
+   * created when the caller has none) instead of the "pick a chat" hint.
+   * Default **false**.
+   */
+  load_last_session_enabled?: boolean;
   /** Overrides `userInput` prop. */
   user_input_enabled?: boolean;
   /** Overrides `showStopButton` prop. */