@usereq/widget 0.1.0

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@usereq/widget",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./types": {
+      "types": "./src/types.ts",
+      "import": "./src/types.ts",
+      "default": "./src/types.ts"
+    },
+    "./renderer": {
+      "types": "./src/renderer/index.ts",
+      "import": "./src/renderer/index.ts",
+      "default": "./src/renderer/index.ts"
+    },
+    "./shared/widget-config": {
+      "types": "./src/shared/widget-config.ts",
+      "import": "./src/shared/widget-config.ts",
+      "default": "./src/shared/widget-config.ts"
+    },
+    "./shared/analytics": {
+      "types": "./src/shared/analytics.ts",
+      "import": "./src/shared/analytics.ts",
+      "default": "./src/shared/analytics.ts"
+    },
+    "./shared/shadow-css": {
+      "types": "./src/shared/shadow-css.ts",
+      "import": "./src/shared/shadow-css.ts",
+      "default": "./src/shared/shadow-css.ts"
+    },
+    "./shared/stop-confirmation": {
+      "types": "./src/shared/stop-confirmation.ts",
+      "import": "./src/shared/stop-confirmation.ts",
+      "default": "./src/shared/stop-confirmation.ts"
+    },
+    "./register": {
+      "types": "./src/register.ts",
+      "import": "./src/register.ts",
+      "default": "./src/register.ts"
+    },
+    "./runtime/*": {
+      "types": "./src/runtime/*.ts",
+      "import": "./src/runtime/*.ts",
+      "default": "./src/runtime/*.ts"
+    },
+    "./custom-element/*": {
+      "types": "./src/custom-element/*.tsx",
+      "import": "./src/custom-element/*.tsx",
+      "default": "./src/custom-element/*.tsx"
+    },
+    "./embed": "./dist/widget.js"
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "unpkg": "./dist/widget.js",
+  "jsdelivr": "./dist/widget.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "bun@1.2.22",
+  "scripts": {
+    "build:core": "bunx tsc -p tsconfig.json --noEmit",
+    "build:embed": "vite build",
+    "build": "bun run build:core && bun run build:embed",
+    "typecheck": "bunx tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@streamdown/mermaid": "^1.0.2",
+    "@usereq/ui": "latest",
+    "lucide-react": "^0.553.0",
+    "motion": "^12.23.24",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "streamdown": "^2.5.0",
+    "use-stick-to-bottom": "^1.1.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.3",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "esbuild": "^0.28.0",
+    "tailwindcss": "^4.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.3"
+  }
+}

package/src/chat-widget/chat-widget-appearance.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties } from "react";
+
+export type ChatWidgetAppearance = {
+  avatarOrbColor1?: string | null;
+  avatarOrbColor2?: string | null;
+  actionText?: string | null;
+};
+
+export type ResolvedChatWidgetAppearance = Required<ChatWidgetAppearance>;
+
+export const DEFAULT_CHAT_WIDGET_APPEARANCE: ResolvedChatWidgetAppearance = {
+  avatarOrbColor1: "#2563eb",
+  avatarOrbColor2: "#60a5fa",
+  actionText: "Need help?",
+};
+
+export function resolveChatWidgetAppearance(
+  appearance?: Partial<ChatWidgetAppearance> | null,
+): ResolvedChatWidgetAppearance {
+  return {
+    avatarOrbColor1:
+      normalizeString(appearance?.avatarOrbColor1) ??
+      DEFAULT_CHAT_WIDGET_APPEARANCE.avatarOrbColor1,
+    avatarOrbColor2:
+      normalizeString(appearance?.avatarOrbColor2) ??
+      DEFAULT_CHAT_WIDGET_APPEARANCE.avatarOrbColor2,
+    actionText:
+      normalizeString(appearance?.actionText) ??
+      DEFAULT_CHAT_WIDGET_APPEARANCE.actionText,
+  };
+}
+
+export function getChatWidgetGradientStyle(
+  appearance?: Partial<ChatWidgetAppearance> | null,
+): CSSProperties {
+  const resolved = resolveChatWidgetAppearance(appearance);
+  return {
+    background: `linear-gradient(135deg, ${resolved.avatarOrbColor1}, ${resolved.avatarOrbColor2})`,
+  };
+}
+
+export function getChatWidgetAvatarStyle(
+  appearance?: Partial<ChatWidgetAppearance> | null,
+): CSSProperties {
+  const resolved = resolveChatWidgetAppearance(appearance);
+  return {
+    background: `linear-gradient(135deg, ${resolved.avatarOrbColor1}, ${resolved.avatarOrbColor2})`,
+    boxShadow: `0 10px 24px color-mix(in srgb, ${resolved.avatarOrbColor1} 22%, transparent)`,
+  };
+}
+
+function normalizeString(value: string | null | undefined): string | null {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : null;
+}

package/src/chat-widget/chat-widget-defaults.tsx

@@ -0,0 +1,45 @@
+/**
+ * Default values for the chat widget when database / agent config is not set.
+ * Central place to manage all static default states.
+ */
+
+/** Default rotating spotlight messages used by closed-state widget surfaces. */
+export const DEFAULT_SPOTLIGHT_MESSAGES = [
+  "Ask me anything…",
+  "How can I help you today?",
+  "Try: What can you do?",
+] as const;
+
+/** Default first message from the agent when welcome copy is shown in the open widget. */
+export const DEFAULT_WELCOME_MESSAGE = "Hello! How can I help you today?";
+
+/** Default agent name when not set (e.g. ChatWidgetBox closed state). */
+export const DEFAULT_AGENT_NAME_BOX = "Need help?";
+
+/** Default agent name for Bubble launcher. */
+export const DEFAULT_AGENT_NAME_BUBBLE = "Assistant";
+
+/** Default agent name for ChatBar. */
+export const DEFAULT_AGENT_NAME_CHATBAR = "Mana";
+
+/** Default label for "Start chat" button (Box closed card). */
+export const DEFAULT_START_CHAT_LABEL = "Start chat";
+
+/** Default label for the open empty-state CTA. */
+export const DEFAULT_START_CONVERSATION_LABEL = "Start a new conversation";
+
+/** Default label on the ChatBar pill when closed. */
+export const DEFAULT_LAUNCHER_LABEL = "Ask";
+
+/** Default composer input placeholder. */
+export const DEFAULT_COMPOSER_PLACEHOLDER = "Ask anything…";
+
+/** Default "Powered by" text in the widget footer. */
+export const DEFAULT_POWERED_BY = "Powered by UserEQ";
+
+/** Default empty state title when there are no messages. */
+export const DEFAULT_EMPTY_TITLE = "No conversation started";
+
+/** Default empty state description. */
+export const DEFAULT_EMPTY_DESCRIPTION =
+  "Start a new conversation to get started.";

package/src/chat-widget/components/chat-widget-frame.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@usereq/ui/lib/utils";
+
+/** Widget position anchor (mirrors server enum values). */
+export type WidgetAnchor =
+  | "TOP_LEFT"
+  | "TOP_CENTER"
+  | "TOP_RIGHT"
+  | "BOTTOM_LEFT"
+  | "BOTTOM_CENTER"
+  | "BOTTOM_RIGHT";
+
+/**
+ * Builds Tailwind classes for the widget anchor from DB WidgetAnchor.
+ * Used so the widget renders in the correct position (user-configurable in playground).
+ * Side anchors use min-w-[320px] so chatbar doesn't shrink when on left/right.
+ */
+const WIDGET_ANCHOR_CLASSES: Record<WidgetAnchor, string> = {
+  TOP_LEFT: "absolute top-8 left-8 min-w-[320px]",
+  TOP_CENTER:
+    "absolute top-8 left-1/2 w-full -translate-x-1/2 px-6 flex justify-center",
+  TOP_RIGHT: "absolute top-8 right-8 min-w-[320px]",
+  BOTTOM_LEFT: "absolute bottom-8 left-8 min-w-[320px]",
+  BOTTOM_CENTER:
+    "absolute bottom-10 left-1/2 w-full -translate-x-1/2 px-6 flex justify-center",
+  BOTTOM_RIGHT: "absolute bottom-8 right-8 min-w-[320px]",
+};
+
+export function ChatWidgetPreviewStage({
+  children,
+  className,
+  anchor = "BOTTOM_RIGHT",
+}: {
+  children: React.ReactNode;
+  className?: string;
+  /** Widget position from DB (agent.anchor). User can update in playground. */
+  anchor?: WidgetAnchor;
+}) {
+  const anchorClasses =
+    WIDGET_ANCHOR_CLASSES[anchor] ?? WIDGET_ANCHOR_CLASSES.BOTTOM_RIGHT;
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-[620px] w-full items-center justify-center overflow-hidden rounded-2xl border bg-linear-to-b from-muted/20 to-muted/5 p-6",
+        className
+      )}
+    >
+      <div data-chat-widget-anchor={anchor} className={anchorClasses}>
+        {children}
+      </div>
+    </div>
+  );
+}
+

package/src/chat-widget/components/chat-widget-layout.ts

@@ -0,0 +1,6 @@
+export function getChatWidgetMessagesLayoutClasses() {
+  return {
+    scrollClassName: "h-full overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+    contentClassName: "flex flex-col gap-2 p-0",
+  };
+}