npm - @usereq/widget - Versions diffs - 0.2.24 → 1.0.0-experimental.0 - Mend

@usereq/widget 0.2.24 → 1.0.0-experimental.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/README.md +35 -145
package/dist/embed.js +38 -0
package/dist/embed.js.map +1 -0
package/dist/embed.mjs +2839 -0
package/dist/embed.mjs.map +1 -0
package/package.json +35 -81
package/dist/widget.js +0 -255
package/src/chat-widget/chat-widget-appearance.ts +0 -55
package/src/chat-widget/message-reveal.ts +0 -52
package/src/chat-widget/stop-confirmation.ts +0 -288
package/src/custom-element/agent-widget-element.tsx +0 -676
package/src/embed.ts +0 -8
package/src/index.ts +0 -9
package/src/register.ts +0 -15
package/src/renderer/index.ts +0 -6
package/src/renderer/widget-runtime.tsx +0 -385
package/src/runtime/api-origin.ts +0 -29
package/src/runtime/api.ts +0 -123
package/src/runtime/bootstrap.ts +0 -366
package/src/runtime/debug.ts +0 -104
package/src/runtime/messages.ts +0 -12
package/src/runtime/session-storage.ts +0 -32
package/src/runtime/trigger-rule.ts +0 -182
package/src/shared/shadow-css.ts +0 -15
package/src/shared/shadow-theme.ts +0 -115
package/src/shared/stop-confirmation.ts +0 -20
package/src/shared/widget-config.ts +0 -171
package/src/styles/widget.css.ts +0 -83
package/src/types.ts +0 -98
package/src/vite-env.d.ts +0 -4

package/src/shared/shadow-theme.ts DELETED Viewed

@@ -1,115 +0,0 @@
-export const WIDGET_SHADOW_THEME_CSS = `
-:host {
-  color-scheme: light;
-  /*
-   * Anchor inherited typography to the design system.
-   *
-   * Shadow DOM isolates SELECTORS but NOT inherited properties — the
-   * <usereq-agent-widget> custom element inherits a long list of text
-   * properties from the host page's <body>, and form controls inside
-   * (textarea, input, button) re-inherit via Tailwind's preflight rule
-   * \`color: inherit\`. Host pages set things like:
-   *
-   *   body { color: #fff; }                 → textarea text invisible
-   *   body { text-align: center; }          → every message bubble centered
-   *   body { font-family: cursive; }        → widget renders in cursive
-   *   body { text-transform: uppercase; }   → ALL CAPS UI
-   *
-   * Setting these on :host makes the widget the canonical source so
-   * every descendant inside the shadow tree uses our tokens regardless
-   * of what the host page is doing. Each line below addresses a
-   * commonly-reported customer bleed.
-   */
-  color: var(--foreground);
-  font-family: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5;
-  text-align: left;
-  text-decoration: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-spacing: normal;
-  --tw-border-style: solid;
-  --radius: 0.625rem;
-  --font-geist-sans: Geist, sans-serif;
-  --font-geist-mono: Geist_Mono, monospace;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --brand: oklch(0.55 0.22 263);
-  --brand-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-brand: var(--brand);
-  --color-brand-foreground: var(--brand-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-  --spacing-header: 3rem;
-}
-`;

package/src/shared/stop-confirmation.ts DELETED Viewed

@@ -1,20 +0,0 @@
-export {
-  DEFAULT_STOP_CONVERSATION_PROMPT,
-  STOP_CONFIRMATION_KIND,
-  STOP_CONFIRMATION_RESULT_KIND,
-  createStopConfirmationPromptEnvelope,
-  createStopConfirmationResultEnvelope,
-  encodeStopConfirmationEnvelope,
-  encodeStopConfirmationPrompt,
-  encodeStopConfirmationResult,
-  foldStopConfirmationMessages,
-  getPendingStopConfirmationId,
-  parseStopConfirmationEnvelope,
-  type StopConfirmationDecision,
-  type StopConfirmationEnvelope,
-  type StopConfirmationMessageLike,
-  type StopConfirmationPromptEnvelope,
-  type StopConfirmationRenderItem,
-  type StopConfirmationResultEnvelope,
-  type StopConfirmationState,
-} from "../chat-widget/stop-confirmation";

package/src/shared/widget-config.ts DELETED Viewed

@@ -1,171 +0,0 @@
-import {
-  DEFAULT_CHAT_WIDGET_APPEARANCE,
-  resolveChatWidgetAppearance,
-  type ResolvedChatWidgetAppearance,
-} from "../chat-widget/chat-widget-appearance";
-export type WidgetPlacement =
-  | "top-left"
-  | "top-right"
-  | "top-center"
-  | "bottom-left"
-  | "bottom-right"
-  | "bottom-center";
-export type WidgetVariant = "default" | "chatbar" | "box";
-export type WidgetPreset = "default" | "facebook_messenger";
-export const DEFAULT_WIDGET_PRESET: WidgetPreset = "default";
-/**
- * How much of the screen the open panel covers on mobile. `full` is the
- * edge-to-edge sheet; the others render a bottom drawer over the host page.
- */
-export type WidgetMobileHeight = "half" | "three-quarter" | "full";
-export const DEFAULT_WIDGET_MOBILE_HEIGHT: WidgetMobileHeight = "full";
-export function normalizeWidgetMobileHeight(
-  value: string | null | undefined,
-): WidgetMobileHeight {
-  switch (value) {
-    case "half":
-    case "three-quarter":
-    case "full":
-      return value;
-    default:
-      return DEFAULT_WIDGET_MOBILE_HEIGHT;
-  }
-}
-export type WidgetAppearance = ResolvedChatWidgetAppearance;
-export const DEFAULT_WIDGET_APPEARANCE: WidgetAppearance =
-  DEFAULT_CHAT_WIDGET_APPEARANCE;
-export type WidgetTriggerRule =
-  | { triggerRuleType: "time_delay"; timeDelay: number }
-  | { triggerRuleType: "scroll_to_bottom"; scrollToBottom: boolean }
-  | { triggerRuleType: "element_clicked"; elementClicked: string }
-  | { triggerRuleType: "element_displayed"; elementDisplayed: string };
-export type WidgetBehavior = {
-  /** Eagerly spin up the server-side conversation when the widget mounts. */
-  autoStart: boolean;
-  /** Open the panel as soon as the widget mounts. The launcher stays visible
-   *  and the visitor can still close the panel from there. */
-  defaultOpen: boolean;
-  /** Pin the panel open: launcher is hidden, the close affordance is hidden,
-   *  and the panel is rendered inline as the only thing this widget shows.
-   *  Useful for full-page or dedicated-chat embeds. Implies `defaultOpen`. */
-  alwaysOpen: boolean;
-};
-export const DEFAULT_WIDGET_BEHAVIOR: WidgetBehavior = {
-  autoStart: false,
-  defaultOpen: false,
-  alwaysOpen: false,
-};
-export function normalizeWidgetBehavior(
-  behavior: Partial<WidgetBehavior> | null | undefined,
-): WidgetBehavior {
-  return {
-    autoStart: Boolean(behavior?.autoStart),
-    defaultOpen: Boolean(behavior?.defaultOpen),
-    alwaysOpen: Boolean(behavior?.alwaysOpen),
-  };
-}
-export function widgetTriggerRuleKey(
-  rule: WidgetTriggerRule | null | undefined,
-): string {
-  if (!rule) {
-    return "none";
-  }
-  switch (rule.triggerRuleType) {
-    case "time_delay":
-      return `time_delay:${rule.timeDelay}`;
-    case "scroll_to_bottom":
-      return `scroll_to_bottom:${String(rule.scrollToBottom)}`;
-    case "element_clicked":
-      return `element_clicked:${rule.elementClicked}`;
-    case "element_displayed":
-      return `element_displayed:${rule.elementDisplayed}`;
-    default:
-      return "unknown";
-  }
-}
-export function normalizeWidgetAppearance(
-  appearance: Partial<WidgetAppearance> | null | undefined,
-): WidgetAppearance {
-  return resolveChatWidgetAppearance(appearance);
-}
-export const resolveWidgetAppearance = normalizeWidgetAppearance;
-export function widgetAppearanceToAttributes(
-  appearance: WidgetAppearance,
-): Array<[string, string]> {
-  return [
-    ["avatar-orb-color-1", appearance.avatarOrbColor1 ?? ""],
-    ["avatar-orb-color-2", appearance.avatarOrbColor2 ?? ""],
-    ["action-text", appearance.actionText ?? ""],
-  ];
-}
-export function normalizeWidgetPreset(
-  value: string | null | undefined,
-): WidgetPreset {
-  switch (value) {
-    case "facebook_messenger":
-    case "facebook-messenger":
-      return "facebook_messenger";
-    case "default":
-      return "default";
-    default:
-      return DEFAULT_WIDGET_PRESET;
-  }
-}
-export function normalizeWidgetVariant(
-  value: string | null | undefined,
-): WidgetVariant {
-  switch (value) {
-    case "chatbar":
-    case "box":
-    case "default":
-      return value;
-    default:
-      return "chatbar";
-  }
-}
-export function normalizeWidgetPlacement(
-  value: string | null | undefined,
-): WidgetPlacement {
-  switch (value) {
-    case "top-left":
-    case "top-center":
-    case "top-right":
-    case "bottom-left":
-    case "bottom-center":
-    case "bottom-right":
-      return value;
-    default:
-      return "bottom-right";
-  }
-}
-export function splitWidgetPlacement(
-  placement: WidgetPlacement,
-): { horizontal: "left" | "center" | "right"; vertical: "top" | "bottom" } {
-  const [vertical, horizontal] = placement.split("-") as [
-    "top" | "bottom",
-    "left" | "center" | "right",
-  ];
-  return { horizontal, vertical };
-}

package/src/styles/widget.css.ts DELETED Viewed

@@ -1,83 +0,0 @@
-export const widgetCss = `
-.widget-shell {
-  display: block;
-  box-sizing: border-box;
-  pointer-events: none;
-}
-/*
- * Touch-scroll the conversation list reliably inside the shadow-root portal.
- *
- * The .chat-conv-scroll hook is attached by @usereq/ui to the actual
- * scrollable div inside Conversation (use-stick-to-bottom's inner scroller
- * has no data-slot of its own, so we use a class).
- *
- * - overflow-y: auto is a belt-and-suspenders against environments where
- *   use-stick-to-bottom's runtime overflow-promote effect hasn't fired yet
- *   (it only runs once on mount; if the initial computed overflow isn't
- *   "visible" the lib leaves the element alone). Setting it here ensures
- *   the element is always scrollable.
- * - -webkit-overflow-scrolling: touch enables iOS momentum scroll on older
- *   Safari and is a no-op on modern engines.
- * - touch-action: pan-y tells iOS to only handle vertical pans here, so
- *   pinch-zoom / horizontal swipes don't fight with scroll.
- * - overscroll-behavior: contain keeps the host page from scrolling when
- *   the user hits the top or bottom of the conversation — important for the
- *   mobile fullscreen panel where the page sits behind the overlay.
- */
-.chat-conv-scroll {
-  overflow-y: auto !important;
-  -webkit-overflow-scrolling: touch;
-  touch-action: pan-y;
-  overscroll-behavior: contain;
-}
-/* Hide the scrollbar in the chat-input textarea (it still scrolls past max height). */
-[data-slot="chat-composer"] [data-slot="textarea"] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-[data-slot="chat-composer"] [data-slot="textarea"]::-webkit-scrollbar {
-  display: none;
-}
-@media (max-width: 520px) {
-  /*
-   * Tighten the launcher margin on small screens. Anchor to the side the
-   * placement asks for (via data-horizontal) — setting BOTH left and right
-   * would stretch the fixed shell full-width and the inline-flex launcher
-   * would collapse to the left edge.
-   */
-  .widget-shell[data-mode="embed"] {
-    top: auto !important;
-    bottom: 12px !important;
-    transform: none !important;
-  }
-  .widget-shell[data-mode="embed"][data-horizontal="right"] {
-    right: 12px !important;
-    left: auto !important;
-  }
-  .widget-shell[data-mode="embed"][data-horizontal="left"] {
-    left: 12px !important;
-    right: auto !important;
-  }
-  .widget-shell[data-mode="embed"][data-horizontal="center"] {
-    left: 50% !important;
-    right: auto !important;
-    transform: translateX(-50%) !important;
-  }
-  /*
-   * The panel is full-screen on mobile, so drop the rounded corners / border /
-   * shadow that only make sense for the floating desktop panel.
-   */
-  [data-slot="chat-panel"] {
-    border-radius: 0 !important;
-    border: 0 !important;
-    box-shadow: none !important;
-  }
-}
-`;

package/src/types.ts DELETED Viewed

@@ -1,98 +0,0 @@
-import type {
-  WidgetAppearance,
-  WidgetBehavior,
-  WidgetMobileHeight,
-  WidgetPlacement,
-  WidgetPreset,
-  WidgetVariant,
-  WidgetTriggerRule,
-} from "./shared/widget-config";
-export {
-  DEFAULT_WIDGET_APPEARANCE,
-  DEFAULT_WIDGET_BEHAVIOR,
-  DEFAULT_WIDGET_MOBILE_HEIGHT,
-  DEFAULT_WIDGET_PRESET,
-  type WidgetAppearance,
-  type WidgetBehavior,
-  type WidgetMobileHeight,
-  type WidgetPlacement,
-  type WidgetPreset,
-  type WidgetVariant,
-  normalizeWidgetAppearance,
-  normalizeWidgetBehavior,
-  normalizeWidgetMobileHeight,
-  normalizeWidgetPlacement,
-  normalizeWidgetPreset,
-  normalizeWidgetVariant,
-  splitWidgetPlacement,
-  widgetAppearanceToAttributes,
-  type WidgetTriggerRule,
-} from "./shared/widget-config";
-export type WidgetSessionConfig = {
-  sessionToken: string;
-  expiresAt: string;
-  widgetConfig: {
-    agentId: string;
-    name: string;
-    agentAvatarUrl: string | null;
-    welcomeMessage: string | null;
-    spotlightMessages: string[];
-    ctaLink: string | null;
-    widgetAppearance: WidgetAppearance;
-    widgetBehavior: WidgetBehavior;
-    widgetVariant: WidgetVariant;
-    widgetPreset: WidgetPreset;
-    widgetPlacement: WidgetPlacement;
-    /**
-     * Mobile presentation of the open panel. Optional on the wire so an
-     * embed running against an older API (which doesn't send the field)
-     * still boots — it falls back to the edge-to-edge default.
-     */
-    mobileHeight?: WidgetMobileHeight | null;
-    allowedDomains: string[];
-    triggerRule: WidgetTriggerRule | null;
-  };
-};
-export type WidgetConversation = {
-  id: string;
-  agentId: string;
-  sessionSid: string;
-  sessionExpiresAt: string;
-  isTest: boolean;
-  createdAt: string;
-  updatedAt: string;
-  metadata?: Record<string, unknown> | null;
-};
-export type WidgetMessage = {
-  id: string;
-  conversationId: string;
-  role: "user" | "assistant";
-  content: string;
-  createdAt: string;
-};
-export type WidgetPublicChatSendChatResponse = {
-  kind: "chat";
-  userMessage: WidgetMessage;
-  assistantMessages: WidgetMessage[];
-};
-export type WidgetPublicChatSendStopConfirmationResponse = {
-  kind: "stop_confirmation";
-  confirmationMessage: WidgetMessage;
-};
-export type WidgetPublicChatSendResponse =
-  | WidgetPublicChatSendChatResponse
-  | WidgetPublicChatSendStopConfirmationResponse;
-export type WidgetSessionState = {
-  sessionToken: string;
-  expiresAt: string;
-  widgetConfig: WidgetSessionConfig["widgetConfig"];
-  conversationId?: string;
-};

package/src/vite-env.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-declare module "*?inline" {
-  const content: string;
-  export default content;
-}