polymorph-sdk 0.1.0 → 0.2.2

package/package.json

@@ -1,47 +1,51 @@
 {
   "name": "polymorph-sdk",
-  "version": "0.1.0",
-  "description": "Tool logging wrapper for Vercel AI SDK",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "version": "0.2.2",
+  "type": "module",
+  "sideEffects": false,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
+    ".": "./src/index.ts"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "README.md"
   ],
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      }
+    }
+  },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
-    "lint": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "prepublishOnly": "bun run build"
   },
-  "keywords": [
-    "ai",
-    "llm",
-    "vercel",
-    "ai-sdk",
-    "polymorph",
-    "tool-logging"
-  ],
-  "author": "",
-  "license": "MIT",
   "dependencies": {
-    "ai": "^6.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "vitest": "^2.0.0"
+    "@livekit/components-react": "^2.9.19",
+    "@mantine/core": "^8.3.7",
+    "@mantine/hooks": "^8.3.7",
+    "livekit-client": "^2.17.0"
   },
   "peerDependencies": {
-    "ai": ">=4.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.2",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/src/ChatThread.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from "react";
+import styles from "./styles.module.css";
+import type { ChatMessage, SessionStatus } from "./types";
+
+export function ChatThread({
+  messages,
+  primaryColor,
+  status,
+}: {
+  messages: ChatMessage[];
+  primaryColor: string;
+  status: SessionStatus;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const agentCountAtConnect = useRef<number | null>(null);
+  const agentMessageCount = messages.filter((m) => m.role === "agent").length;
+
+  // Snapshot agent message count when connecting starts
+  if (status === "connecting" && agentCountAtConnect.current === null) {
+    agentCountAtConnect.current = agentMessageCount;
+  }
+  if (status === "idle" || status === "error") {
+    agentCountAtConnect.current = null;
+  }
+
+  const initialConnectThinking =
+    (status === "connecting" || status === "connected") &&
+    agentCountAtConnect.current !== null &&
+    agentMessageCount <= agentCountAtConnect.current;
+  const waitingForAgentReply =
+    status === "connected" &&
+    messages.length > 0 &&
+    messages[messages.length - 1].role === "user";
+  const showThinking = initialConnectThinking || waitingForAgentReply;
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({
+      top: scrollRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }, []);
+
+  return (
+    <div ref={scrollRef} className={styles.chatThread}>
+      {messages.map((msg) => (
+        <div
+          key={msg.id}
+          className={`${styles.messageBubble} ${msg.role === "user" ? styles.userMessage : styles.agentMessage}`}
+          style={
+            msg.role === "user" ? { backgroundColor: primaryColor } : undefined
+          }
+        >
+          {msg.text}
+          {msg.source === "voice" && (
+            <div className={styles.voiceLabel}>voice</div>
+          )}
+        </div>
+      ))}
+      {showThinking && (
+        <div className={`${styles.messageBubble} ${styles.agentMessage}`}>
+          <div className={styles.thinkingDots}>
+            <span />
+            <span />
+            <span />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/PolymorphWidget.tsx

@@ -0,0 +1,103 @@
+import { LiveKitRoom } from "@livekit/components-react";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
+import { useRef, useState } from "react";
+import { RoomHandler } from "./RoomHandler";
+import styles from "./styles.module.css";
+import { buildWidgetTheme } from "./theme";
+import type { WidgetConfig } from "./types";
+import { usePolymorphSession } from "./usePolymorphSession";
+import { WidgetPanel } from "./WidgetPanel";
+
+// Chat bubble icon for FAB
+function ChatIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+    </svg>
+  );
+}
+
+export function PolymorphWidget(props: WidgetConfig) {
+  const { position = "bottom-right", branding } = props;
+  const [open, setOpen] = useState(false);
+  const session = usePolymorphSession(props);
+  const primaryColor = branding?.primaryColor || "#171717";
+  const theme = buildWidgetTheme(primaryColor);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={rootRef}
+      className={`polymorph-widget ${styles.widgetRoot} ${position === "bottom-left" ? styles.bottomLeft : styles.bottomRight}`}
+      style={{ colorScheme: props.darkMode ? "dark" : "light" }}
+    >
+      <MantineProvider
+        theme={theme}
+        forceColorScheme={props.darkMode ? "dark" : "light"}
+        cssVariablesSelector=".polymorph-widget"
+        getRootElement={() => rootRef.current ?? undefined}
+      >
+        {open && (
+          <WidgetPanel
+            config={props}
+            session={session}
+            onClose={() => {
+              session.disconnect();
+              setOpen(false);
+            }}
+          />
+        )}
+        <button
+          type="button"
+          className={styles.fab}
+          style={{ backgroundColor: primaryColor }}
+          onClick={() => {
+            if (open) {
+              session.disconnect();
+            }
+            setOpen((prev) => !prev);
+          }}
+        >
+          <ChatIcon />
+        </button>
+        {/* LiveKit room lives outside WidgetPanel so it mounts before the panel renders */}
+        {session.roomConnection && (
+          <LiveKitRoom
+            token={session.roomConnection.token}
+            serverUrl={session.roomConnection.livekitUrl}
+            connect={true}
+            audio={
+              session.isVoiceEnabled
+                ? {
+                    echoCancellation: true,
+                    noiseSuppression: true,
+                    autoGainControl: true,
+                  }
+                : false
+            }
+            video={false}
+            style={{ display: "none" }}
+            onDisconnected={session.disconnect}
+          >
+            <RoomHandler
+              setRoom={session.setRoom}
+              addMessage={session.addMessage}
+              isVoiceEnabled={session.isVoiceEnabled}
+            />
+          </LiveKitRoom>
+        )}
+      </MantineProvider>
+    </div>
+  );
+}

package/src/RoomHandler.tsx

@@ -0,0 +1,99 @@
+import { RoomAudioRenderer, useRoomContext } from "@livekit/components-react";
+import type { Room } from "livekit-client";
+import {
+  type DataPacket_Kind,
+  type Participant,
+  ParticipantKind,
+  RoomEvent,
+  type TranscriptionSegment,
+} from "livekit-client";
+import { useEffect } from "react";
+
+export function RoomHandler({
+  setRoom,
+  addMessage,
+  isVoiceEnabled,
+}: {
+  setRoom: (room: Room | null) => void;
+  addMessage: (
+    role: "user" | "agent",
+    text: string,
+    source: "chat" | "voice",
+  ) => void;
+  isVoiceEnabled: boolean;
+}) {
+  const room = useRoomContext();
+
+  useEffect(() => {
+    setRoom(room);
+    return () => {
+      setRoom(null);
+    };
+  }, [room, setRoom]);
+
+  // Send initial voice state to agent once connected
+  useEffect(() => {
+    const sendVoiceState = () => {
+      const payload = new TextEncoder().encode(
+        JSON.stringify({ voice_enabled: isVoiceEnabled }),
+      );
+      room.localParticipant.publishData(payload, {
+        reliable: true,
+        topic: "voice_mode",
+      });
+    };
+
+    if (room.state === "connected") {
+      sendVoiceState();
+    } else {
+      const onConnected = () => sendVoiceState();
+      room.on(RoomEvent.Connected, onConnected);
+      return () => {
+        room.off(RoomEvent.Connected, onConnected);
+      };
+    }
+  }, [room, isVoiceEnabled]);
+
+  useEffect(() => {
+    const handleDataReceived = (
+      payload: Uint8Array,
+      _participant?: Participant,
+      _kind?: DataPacket_Kind,
+      topic?: string,
+    ) => {
+      if (topic === "chat_message") {
+        try {
+          const data = JSON.parse(new TextDecoder().decode(payload));
+          if (data.type === "chat_response") {
+            addMessage("agent", data.text, "chat");
+          }
+        } catch {
+          /* ignore malformed */
+        }
+      }
+    };
+
+    const handleTranscription = (
+      segments: TranscriptionSegment[],
+      participant?: Participant,
+    ) => {
+      const finalSegments = segments.filter((s) => s.final);
+      if (finalSegments.length > 0) {
+        const text = finalSegments.map((s) => s.text).join(" ");
+        const isAgent =
+          participant?.kind === ParticipantKind.AGENT ||
+          participant?.identity?.includes("agent");
+        addMessage(isAgent ? "agent" : "user", text, "voice");
+      }
+    };
+
+    room.on(RoomEvent.DataReceived, handleDataReceived);
+    room.on(RoomEvent.TranscriptionReceived, handleTranscription);
+    return () => {
+      room.off(RoomEvent.DataReceived, handleDataReceived);
+      room.off(RoomEvent.TranscriptionReceived, handleTranscription);
+    };
+  }, [room, addMessage]);
+
+  return <RoomAudioRenderer />;
+}

package/src/VoiceOverlay.tsx

@@ -0,0 +1,85 @@
+import styles from "./styles.module.css";
+import type { SessionStatus } from "./types";
+
+function VolumeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
+      <path d="M16 9a5 5 0 0 1 0 6" />
+      <path d="M19.364 18.364a9 9 0 0 0 0-12.728" />
+    </svg>
+  );
+}
+
+function VolumeOffIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
+      <line x1="22" x2="16" y1="9" y2="15" />
+      <line x1="16" x2="22" y1="9" y2="15" />
+    </svg>
+  );
+}
+
+interface VoiceOverlayProps {
+  isVoiceEnabled: boolean;
+  isMicActive: boolean;
+  status: SessionStatus;
+  onToggleVoice: () => void;
+}
+
+export function VoiceOverlay({
+  isVoiceEnabled,
+  isMicActive,
+  status,
+  onToggleVoice,
+}: VoiceOverlayProps) {
+  if (status !== "connected") return null;
+
+  return (
+    <div className={styles.voiceOverlay}>
+      {isVoiceEnabled ? (
+        <>
+          <span className={styles.voiceBars}>
+            <span className={styles.voiceBar} />
+            <span className={styles.voiceBar} />
+            <span className={styles.voiceBar} />
+          </span>
+          <span className={styles.voiceLabel}>
+            {isMicActive ? "Voice active" : "Mic muted"}
+          </span>
+        </>
+      ) : (
+        <span className={styles.voiceLabel}>Chat only</span>
+      )}
+      <button
+        type="button"
+        className={`${styles.voiceToggle} ${isVoiceEnabled ? styles.voiceToggleActive : ""}`}
+        onClick={onToggleVoice}
+        title={isVoiceEnabled ? "Turn off voice" : "Turn on voice"}
+      >
+        {isVoiceEnabled ? <VolumeIcon /> : <VolumeOffIcon />}
+      </button>
+    </div>
+  );
+}

package/src/WidgetPanel.tsx

@@ -0,0 +1,228 @@
+import type { Room } from "livekit-client";
+import { useCallback, useState } from "react";
+import { ChatThread } from "./ChatThread";
+import styles from "./styles.module.css";
+import type { ChatMessage, SessionStatus, WidgetConfig } from "./types";
+import { VoiceOverlay } from "./VoiceOverlay";
+
+// Internal SVG icons (no @tabler dependency)
+function MicIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" x2="12" y1="19" y2="22" />
+    </svg>
+  );
+}
+function MicOffIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="2" x2="22" y1="2" y2="22" />
+      <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
+      <path d="M5 10v2a7 7 0 0 0 12 5" />
+      <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
+      <path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
+      <line x1="12" x2="12" y1="19" y2="22" />
+    </svg>
+  );
+}
+function SendIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m22 2-7 20-4-9-9-4Z" />
+      <path d="M22 2 11 13" />
+    </svg>
+  );
+}
+function CloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
+interface WidgetPanelProps {
+  config: WidgetConfig;
+  session: {
+    status: SessionStatus;
+    roomConnection: { token: string; livekitUrl: string } | null;
+    messages: ChatMessage[];
+    isVoiceEnabled: boolean;
+    isMicActive: boolean;
+    error: string | null;
+    connect: () => Promise<void>;
+    disconnect: () => void;
+    addMessage: (
+      role: "user" | "agent",
+      text: string,
+      source: "chat" | "voice",
+    ) => void;
+    sendMessage: (text: string) => void;
+    toggleMic: () => void;
+    toggleVoice: () => void;
+    setRoom: (room: Room | null) => void;
+  };
+  onClose: () => void;
+}
+
+export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
+  const [inputValue, setInputValue] = useState("");
+  const primaryColor = config.branding?.primaryColor || "#171717";
+  const isChatOnlyAgent = (config.agentName || "")
+    .toLowerCase()
+    .includes("chat-agent");
+
+  const handleSend = useCallback(() => {
+    if (!inputValue.trim()) return;
+    session.sendMessage(inputValue);
+    setInputValue("");
+  }, [inputValue, session]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  return (
+    <div className={styles.panel}>
+      {/* Header */}
+      <div className={styles.header}>
+        <div>
+          <div style={{ fontWeight: 500, fontSize: 16 }}>
+            {config.branding?.title || "Hi there"}
+          </div>
+          {config.branding?.subtitle && (
+            <div
+              style={{
+                fontSize: 13,
+                color: "var(--mantine-color-dimmed)",
+                marginTop: 2,
+              }}
+            >
+              {config.branding.subtitle}
+            </div>
+          )}
+        </div>
+        <button type="button" className={styles.iconButton} onClick={onClose}>
+          <CloseIcon />
+        </button>
+      </div>
+
+      {/* Chat Thread */}
+      <ChatThread
+        messages={session.messages}
+        primaryColor={primaryColor}
+        status={session.status}
+      />
+
+      {/* Voice Overlay */}
+      {!isChatOnlyAgent && (
+        <VoiceOverlay
+          isVoiceEnabled={session.isVoiceEnabled}
+          isMicActive={session.isMicActive}
+          status={session.status}
+          onToggleVoice={session.toggleVoice}
+        />
+      )}
+
+      {/* Error */}
+      {session.error && <div className={styles.errorText}>{session.error}</div>}
+
+      {/* Connect button or Input bar */}
+      {session.status === "idle" || session.status === "error" ? (
+        <button
+          type="button"
+          className={styles.connectButton}
+          style={{ backgroundColor: primaryColor }}
+          onClick={session.connect}
+        >
+          Start conversation
+        </button>
+      ) : session.status === "connecting" ? (
+        <button
+          type="button"
+          className={styles.connectButton}
+          style={{ backgroundColor: primaryColor }}
+          disabled
+        >
+          Connecting...
+        </button>
+      ) : (
+        <div className={styles.inputBar}>
+          <input
+            className={styles.inputField}
+            placeholder="Type a message..."
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+          <button
+            type="button"
+            className={styles.iconButton}
+            onClick={handleSend}
+            disabled={!inputValue.trim()}
+          >
+            <SendIcon />
+          </button>
+          {session.isVoiceEnabled && !isChatOnlyAgent && (
+            <button
+              type="button"
+              className={`${styles.iconButton} ${session.isMicActive ? styles.iconButtonActive : ""}`}
+              onClick={session.toggleMic}
+            >
+              {session.isMicActive ? <MicIcon /> : <MicOffIcon />}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/__tests__/exports.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+
+describe("polymorph-sdk exports", () => {
+  it("exports PolymorphWidget component", async () => {
+    const mod = await import("../index");
+    expect(mod.PolymorphWidget).toBeDefined();
+  });
+
+  it("exports usePolymorphSession hook", async () => {
+    const mod = await import("../index");
+    expect(mod.usePolymorphSession).toBeDefined();
+  });
+});

package/src/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.module.css" {
+  const classes: Record<string, string>;
+  export default classes;
+}