@usereq/widget 0.1.0

package/src/shared/stop-confirmation.ts

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,104 @@
+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 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 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 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

@@ -0,0 +1,27 @@
+export const widgetCss = `
+.widget-shell {
+  display: block;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+@media (max-width: 520px) {
+  .widget-shell[data-mode="embed"] {
+    top: auto !important;
+    right: 12px !important;
+    bottom: 12px !important;
+    left: 12px !important;
+    transform: none !important;
+  }
+
+  .widget-shell[data-mode="embed"][data-open="true"] {
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100svh !important;
+    max-width: none !important;
+  }
+}
+`;

package/src/types.ts

@@ -0,0 +1,85 @@
+import type {
+  WidgetAppearance,
+  WidgetPlacement,
+  WidgetVariant,
+  WidgetTriggerRule,
+} from "./shared/widget-config";
+
+export {
+  DEFAULT_WIDGET_APPEARANCE,
+  type WidgetAppearance,
+  type WidgetPlacement,
+  type WidgetVariant,
+  normalizeWidgetAppearance,
+  normalizeWidgetPlacement,
+  normalizeWidgetVariant,
+  splitWidgetPlacement,
+  widgetAppearanceToAttributes,
+  type WidgetTriggerRule,
+} from "./shared/widget-config";
+export type {
+  WidgetAnalyticsBatchEvent,
+  WidgetAnalyticsBatchRequest,
+  WidgetAnalyticsBatchResponse,
+  WidgetAnalyticsEventType,
+  WidgetClientAnalyticsEventType,
+  WidgetTriggerRuleType,
+} from "./shared/analytics";
+
+export type WidgetSessionConfig = {
+  sessionToken: string;
+  expiresAt: string;
+  widgetConfig: {
+    agentId: string;
+    name: string;
+    agentAvatarUrl: string | null;
+    welcomeMessage: string | null;
+    spotlightMessages: string[];
+    widgetAppearance: WidgetAppearance;
+    widgetVariant: WidgetVariant;
+    widgetPlacement: WidgetPlacement;
+    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

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