@rohansguliani/mux-chat-ui 0.3.0

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+/** Mux's stylesheets in its cascade order, then the embed's layout on top. */
+export declare const styles: string;

package/dist/testing.d.ts

@@ -0,0 +1,49 @@
+export declare const chatSelectors: {
+    /** The event stream is connected. */
+    readonly connected: "[data-slot=\"mux-chat-status\"][data-tone=\"ok\"]";
+    /** The chat can take a message. */
+    readonly ready: "[data-component=\"prompt-composer-surface\"][aria-busy=\"false\"]";
+    readonly input: "[data-component=\"prompt-input\"]";
+    readonly submit: "[data-action=\"prompt-submit\"]";
+    /** The submit button while a reply streams (clicking stops it). */
+    readonly stop: "[data-action=\"prompt-submit\"][data-working]";
+    readonly model: "[data-action=\"prompt-model\"]";
+    readonly newChat: "[data-action=\"new-chat\"]";
+    readonly retry: "[data-action=\"retry\"]";
+    readonly userMessage: "[data-component=\"user-message\"]";
+    readonly reply: "[data-component=\"assistant-message\"] [data-component=\"text-part\"]";
+    /** Reply text while it is still streaming. */
+    readonly liveReply: "[data-component=\"assistant-message\"][data-live] [data-component=\"text-part\"]";
+    readonly tool: "[data-component=\"assistant-message\"] .tool-collapsible[data-status]";
+    readonly question: "[data-component=\"mux-question\"]";
+    readonly questionOption: "[data-slot=\"mux-question-option\"]";
+    readonly questionAnswer: "[data-component=\"mux-question\"] [data-slot=\"mux-button\"][data-variant=\"primary\"]";
+    readonly permission: "[data-component=\"mux-permission\"]";
+    readonly notice: "[data-slot=\"mux-chat-notice\"]";
+};
+export type ChatSnapshot = {
+    /** The open chat session, once there is one. */
+    sessionID: string | null;
+    ready: boolean;
+    connected: boolean;
+    /** A reply is streaming. */
+    busy: boolean;
+    userMessages: string[];
+    replies: string[];
+    tools: Array<{
+        status: string;
+        label: string;
+        detail: string;
+    }>;
+    question: {
+        text: string;
+        options: string[];
+    } | null;
+    permission: string | null;
+    notice: string;
+    errors: string[];
+};
+/** What the chat mounted in `host` shows right now. */
+export declare function readChat(host: Element): ChatSnapshot;
+/** True once the chat mounted in `host` has a reply and nothing is streaming. */
+export declare function replyFinished(host: Element): boolean;

package/dist/testing.js

@@ -0,0 +1,61 @@
+//#region src/testing.ts
+var chatSelectors = {
+	/** The event stream is connected. */
+	connected: "[data-slot=\"mux-chat-status\"][data-tone=\"ok\"]",
+	/** The chat can take a message. */
+	ready: "[data-component=\"prompt-composer-surface\"][aria-busy=\"false\"]",
+	input: "[data-component=\"prompt-input\"]",
+	submit: "[data-action=\"prompt-submit\"]",
+	/** The submit button while a reply streams (clicking stops it). */
+	stop: "[data-action=\"prompt-submit\"][data-working]",
+	model: "[data-action=\"prompt-model\"]",
+	newChat: "[data-action=\"new-chat\"]",
+	retry: "[data-action=\"retry\"]",
+	userMessage: "[data-component=\"user-message\"]",
+	reply: "[data-component=\"assistant-message\"] [data-component=\"text-part\"]",
+	/** Reply text while it is still streaming. */
+	liveReply: "[data-component=\"assistant-message\"][data-live] [data-component=\"text-part\"]",
+	tool: "[data-component=\"assistant-message\"] .tool-collapsible[data-status]",
+	question: "[data-component=\"mux-question\"]",
+	questionOption: "[data-slot=\"mux-question-option\"]",
+	questionAnswer: "[data-component=\"mux-question\"] [data-slot=\"mux-button\"][data-variant=\"primary\"]",
+	permission: "[data-component=\"mux-permission\"]",
+	notice: "[data-slot=\"mux-chat-notice\"]"
+};
+/** What the chat mounted in `host` shows right now. */
+function readChat(host) {
+	const root = host.shadowRoot ?? host;
+	const one = (selector) => root.querySelector(selector);
+	const all = (selector) => [...root.querySelectorAll(selector)];
+	const text = (element) => element?.textContent ?? "";
+	const question = one("[data-component=\"mux-question\"]");
+	return {
+		sessionID: one("[data-component=\"mux-chat\"]")?.getAttribute("data-session-id") || null,
+		ready: !!one("[data-component=\"prompt-composer-surface\"][aria-busy=\"false\"]"),
+		connected: !!one("[data-slot=\"mux-chat-status\"][data-tone=\"ok\"]"),
+		busy: !!one("[data-component=\"assistant-message\"][data-live]") || !!one("[data-action=\"prompt-submit\"][data-working]"),
+		userMessages: all("[data-component=\"user-message\"] [data-slot=\"user-message-text\"]").map(text),
+		replies: all("[data-component=\"assistant-message\"] [data-component=\"text-part\"]").map(text),
+		tools: all("[data-component=\"assistant-message\"] .tool-collapsible[data-status]").map((row) => ({
+			status: row.getAttribute("data-status") ?? "",
+			label: row.querySelector("[data-slot=\"basic-tool-tool-title\"] [data-component=\"text-shimmer\"]")?.getAttribute("aria-label") ?? "",
+			detail: text(row.querySelector("[data-slot=\"basic-tool-tool-subtitle\"]"))
+		})),
+		question: question ? {
+			text: text(question.querySelector("[data-slot=\"mux-question-text\"]")),
+			options: [...question.querySelectorAll("[data-slot=\"mux-question-option-label\"]")].map(text)
+		} : null,
+		permission: text(one("[data-component=\"mux-permission\"] [data-slot=\"mux-question-text\"]")) || null,
+		notice: text(one("[data-slot=\"mux-chat-notice\"]")),
+		errors: all("[data-slot=\"mux-chat-error\"]").map(text)
+	};
+}
+/** True once the chat mounted in `host` has a reply and nothing is streaming. */
+function replyFinished(host) {
+	const root = host.shadowRoot ?? host;
+	return !root.querySelector("[data-component=\"assistant-message\"][data-live]") && !root.querySelector("[data-action=\"prompt-submit\"][data-working]") && !!root.querySelector("[data-component=\"assistant-message\"] [data-component=\"text-part\"]");
+}
+//#endregion
+export { chatSelectors, readChat, replyFinished };
+
+//# sourceMappingURL=testing.js.map

package/dist/testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.js","names":[],"sources":["../src/testing.ts"],"sourcesContent":["// Stable hooks into a mounted chat for app tests (Playwright, Puppeteer, DOM\n// tests), so apps never depend on the chat's internal markup. Selectors pierce\n// the shadow root in Playwright. `readChat` and `replyFinished` run in the\n// page (pass them to `locator.evaluate` / `page.waitForFunction` with the\n// element the chat was mounted in); they are self-contained for that reason.\n\nexport const chatSelectors = {\n  /** The event stream is connected. */\n  connected: '[data-slot=\"mux-chat-status\"][data-tone=\"ok\"]',\n  /** The chat can take a message. */\n  ready: '[data-component=\"prompt-composer-surface\"][aria-busy=\"false\"]',\n  input: '[data-component=\"prompt-input\"]',\n  submit: '[data-action=\"prompt-submit\"]',\n  /** The submit button while a reply streams (clicking stops it). */\n  stop: '[data-action=\"prompt-submit\"][data-working]',\n  model: '[data-action=\"prompt-model\"]',\n  newChat: '[data-action=\"new-chat\"]',\n  retry: '[data-action=\"retry\"]',\n  userMessage: '[data-component=\"user-message\"]',\n  reply: '[data-component=\"assistant-message\"] [data-component=\"text-part\"]',\n  /** Reply text while it is still streaming. */\n  liveReply: '[data-component=\"assistant-message\"][data-live] [data-component=\"text-part\"]',\n  tool: '[data-component=\"assistant-message\"] .tool-collapsible[data-status]',\n  question: '[data-component=\"mux-question\"]',\n  questionOption: '[data-slot=\"mux-question-option\"]',\n  questionAnswer: '[data-component=\"mux-question\"] [data-slot=\"mux-button\"][data-variant=\"primary\"]',\n  permission: '[data-component=\"mux-permission\"]',\n  notice: '[data-slot=\"mux-chat-notice\"]',\n} as const\n\nexport type ChatSnapshot = {\n  /** The open chat session, once there is one. */\n  sessionID: string | null\n  ready: boolean\n  connected: boolean\n  /** A reply is streaming. */\n  busy: boolean\n  userMessages: string[]\n  replies: string[]\n  tools: Array<{ status: string; label: string; detail: string }>\n  question: { text: string; options: string[] } | null\n  permission: string | null\n  notice: string\n  errors: string[]\n}\n\n/** What the chat mounted in `host` shows right now. */\nexport function readChat(host: Element): ChatSnapshot {\n  const root: ParentNode = (host as HTMLElement).shadowRoot ?? host\n  const one = (selector: string) => root.querySelector(selector)\n  const all = (selector: string) => [...root.querySelectorAll(selector)]\n  const text = (element: Element | null) => element?.textContent ?? \"\"\n  const question = one('[data-component=\"mux-question\"]')\n  return {\n    sessionID: one('[data-component=\"mux-chat\"]')?.getAttribute(\"data-session-id\") || null,\n    ready: !!one('[data-component=\"prompt-composer-surface\"][aria-busy=\"false\"]'),\n    connected: !!one('[data-slot=\"mux-chat-status\"][data-tone=\"ok\"]'),\n    busy: !!one('[data-component=\"assistant-message\"][data-live]') || !!one('[data-action=\"prompt-submit\"][data-working]'),\n    userMessages: all('[data-component=\"user-message\"] [data-slot=\"user-message-text\"]').map(text),\n    replies: all('[data-component=\"assistant-message\"] [data-component=\"text-part\"]').map(text),\n    tools: all('[data-component=\"assistant-message\"] .tool-collapsible[data-status]').map((row) => ({\n      status: row.getAttribute(\"data-status\") ?? \"\",\n      label: row.querySelector('[data-slot=\"basic-tool-tool-title\"] [data-component=\"text-shimmer\"]')?.getAttribute(\"aria-label\") ?? \"\",\n      detail: text(row.querySelector('[data-slot=\"basic-tool-tool-subtitle\"]')),\n    })),\n    question: question\n      ? { text: text(question.querySelector('[data-slot=\"mux-question-text\"]')), options: [...question.querySelectorAll('[data-slot=\"mux-question-option-label\"]')].map(text) }\n      : null,\n    permission: text(one('[data-component=\"mux-permission\"] [data-slot=\"mux-question-text\"]')) || null,\n    notice: text(one('[data-slot=\"mux-chat-notice\"]')),\n    errors: all('[data-slot=\"mux-chat-error\"]').map(text),\n  }\n}\n\n/** True once the chat mounted in `host` has a reply and nothing is streaming. */\nexport function replyFinished(host: Element): boolean {\n  const root: ParentNode = (host as HTMLElement).shadowRoot ?? host\n  return !root.querySelector('[data-component=\"assistant-message\"][data-live]') &&\n    !root.querySelector('[data-action=\"prompt-submit\"][data-working]') &&\n    !!root.querySelector('[data-component=\"assistant-message\"] [data-component=\"text-part\"]')\n}\n"],"mappings":";AAMA,IAAa,gBAAgB;;CAE3B,WAAW;;CAEX,OAAO;CACP,OAAO;CACP,QAAQ;;CAER,MAAM;CACN,OAAO;CACP,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;;CAEP,WAAW;CACX,MAAM;CACN,UAAU;CACV,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,QAAQ;AACV;;AAmBA,SAAgB,SAAS,MAA6B;CACpD,MAAM,OAAoB,KAAqB,cAAc;CAC7D,MAAM,OAAO,aAAqB,KAAK,cAAc,QAAQ;CAC7D,MAAM,OAAO,aAAqB,CAAC,GAAG,KAAK,iBAAiB,QAAQ,CAAC;CACrE,MAAM,QAAQ,YAA4B,SAAS,eAAe;CAClE,MAAM,WAAW,IAAI,mCAAiC;CACtD,OAAO;EACL,WAAW,IAAI,+BAA6B,CAAC,EAAE,aAAa,iBAAiB,KAAK;EAClF,OAAO,CAAC,CAAC,IAAI,mEAA+D;EAC5E,WAAW,CAAC,CAAC,IAAI,mDAA+C;EAChE,MAAM,CAAC,CAAC,IAAI,mDAAiD,KAAK,CAAC,CAAC,IAAI,+CAA6C;EACrH,cAAc,IAAI,qEAAiE,CAAC,CAAC,IAAI,IAAI;EAC7F,SAAS,IAAI,uEAAmE,CAAC,CAAC,IAAI,IAAI;EAC1F,OAAO,IAAI,uEAAqE,CAAC,CAAC,KAAK,SAAS;GAC9F,QAAQ,IAAI,aAAa,aAAa,KAAK;GAC3C,OAAO,IAAI,cAAc,yEAAqE,CAAC,EAAE,aAAa,YAAY,KAAK;GAC/H,QAAQ,KAAK,IAAI,cAAc,0CAAwC,CAAC;EAC1E,EAAE;EACF,UAAU,WACN;GAAE,MAAM,KAAK,SAAS,cAAc,mCAAiC,CAAC;GAAG,SAAS,CAAC,GAAG,SAAS,iBAAiB,2CAAyC,CAAC,CAAC,CAAC,IAAI,IAAI;EAAE,IACtK;EACJ,YAAY,KAAK,IAAI,uEAAmE,CAAC,KAAK;EAC9F,QAAQ,KAAK,IAAI,iCAA+B,CAAC;EACjD,QAAQ,IAAI,gCAA8B,CAAC,CAAC,IAAI,IAAI;CACtD;AACF;;AAGA,SAAgB,cAAc,MAAwB;CACpD,MAAM,OAAoB,KAAqB,cAAc;CAC7D,OAAO,CAAC,KAAK,cAAc,mDAAiD,KAC1E,CAAC,KAAK,cAAc,+CAA6C,KACjE,CAAC,CAAC,KAAK,cAAc,uEAAmE;AAC5F"}

package/dist/view/Chat.d.ts

@@ -0,0 +1,26 @@
+import { type ToolResult } from "../controller.js";
+export type ResolvedOptions = {
+    url: string;
+    title: string;
+    subtitle?: string;
+    placeholder: string;
+    suggestions: Array<{
+        label: string;
+        prompt: string;
+    }>;
+    toolLabels: Record<string, string>;
+    agent: string;
+    sessionTitle: string;
+    storageKey: string;
+    preferredModel?: string;
+    onToolResult?: (result: ToolResult) => void;
+};
+export type ChatAPI = {
+    send(text: string): Promise<boolean>;
+    focus(): void;
+    newChat(): Promise<void>;
+};
+export declare function Chat(props: {
+    options: ResolvedOptions;
+    api: (api: ChatAPI) => void;
+}): import("solid-js").JSX.Element;

package/dist/view/parts.d.ts

@@ -0,0 +1,19 @@
+import type { Part, TextPart } from "@rohansguliani/mux-chat-core";
+import { type JSX } from "solid-js";
+/** One collapsible activity row (Mux BasicTool). */
+export declare function ActivityRow(props: {
+    title: string;
+    subtitle?: string;
+    active: boolean;
+    name?: string;
+    status?: string;
+    children?: JSX.Element;
+}): JSX.Element;
+export declare function TextPartView(props: {
+    part: TextPart;
+}): JSX.Element;
+export declare function PartView(props: {
+    part: Part;
+    live: boolean;
+    labels: Record<string, string>;
+}): JSX.Element;

package/dist/view/primitives.d.ts

@@ -0,0 +1,10 @@
+/** Mux's text shimmer (ui/components/text-shimmer): an animated sweep while `active`. */
+export declare function TextShimmer(props: {
+    text: string;
+    active: boolean;
+    offset?: number;
+}): import("solid-js").JSX.Element;
+export declare const ChevronDown: () => import("solid-js").JSX.Element;
+export declare const ArrowUp: () => import("solid-js").JSX.Element;
+export declare const Stop: () => import("solid-js").JSX.Element;
+export declare const Plus: () => import("solid-js").JSX.Element;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@rohansguliani/mux-chat-ui",
+  "version": "0.3.0",
+  "type": "module",
+  "description": "Mux's chat as a drop-in sidebar: streaming transcript, tool rows, question cards, model picker, and composer, rendered in a shadow root with Mux's own styles.",
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "build": "rm -rf dist && vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run --root .",
+    "sync-styles": "node scripts/sync-mux-styles.mjs"
+  },
+  "dependencies": {
+    "@rohansguliani/mux-chat-core": "^0.3.0",
+    "dompurify": "^3.4.1",
+    "marked": "17.0.1"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  }
+}