polymorph-sdk 0.1.0 → 0.2.0

package/package.json

@@ -1,47 +1,47 @@
 {
   "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.0",
+  "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", "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"
+      }
     }
   },
-  "files": [
-    "dist"
-  ],
   "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,26 @@
+import { useEffect, useRef } from "react";
+import type { ChatMessage } from "./types";
+import styles from "./styles.module.css";
+
+export function ChatThread({ messages, primaryColor }: { messages: ChatMessage[]; primaryColor: string }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
+  }, [messages]);
+
+  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>
+      ))}
+    </div>
+  );
+}

package/src/PolymorphWidget.tsx

@@ -0,0 +1,41 @@
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
+import { useState } from "react";
+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);
+
+  return (
+    <MantineProvider theme={theme} defaultColorScheme="light">
+      <div className={`${styles.widgetRoot} ${position === "bottom-left" ? styles.bottomLeft : styles.bottomRight}`}>
+        {open && (
+          <WidgetPanel
+            config={props}
+            session={session}
+            onClose={() => setOpen(false)}
+          />
+        )}
+        <button
+          type="button"
+          className={styles.fab}
+          style={{ backgroundColor: primaryColor }}
+          onClick={() => setOpen(prev => !prev)}
+        >
+          <ChatIcon />
+        </button>
+      </div>
+    </MantineProvider>
+  );
+}

package/src/VoiceOverlay.tsx

@@ -0,0 +1,65 @@
+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,194 @@
+import { LiveKitRoom, RoomAudioRenderer, useRoomContext } from "@livekit/components-react";
+import { useCallback, useEffect, useState } from "react";
+import type { Room } from "livekit-client";
+import { type DataPacket_Kind, type Participant, ParticipantKind, RoomEvent, type TranscriptionSegment } from "livekit-client";
+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>; }
+
+function RoomHandler({
+  setRoom,
+  addMessage,
+}: {
+  setRoom: (room: Room | null) => void;
+  addMessage: (role: "user" | "agent", text: string, source: "chat" | "voice") => void;
+}) {
+  const room = useRoomContext();
+
+  useEffect(() => {
+    setRoom(room);
+    return () => { setRoom(null); };
+  }, [room, setRoom]);
+
+  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 />;
+}
+
+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 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: "#737373", 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} />
+
+      {/* Voice Overlay */}
+      <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 && (
+            <button
+              type="button"
+              className={`${styles.iconButton} ${session.isMicActive ? styles.iconButtonActive : ""}`}
+              onClick={session.toggleMic}
+            >
+              {session.isMicActive ? <MicIcon /> : <MicOffIcon />}
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Hidden LiveKit Room */}
+      {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} />
+        </LiveKitRoom>
+      )}
+    </div>
+  );
+}

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;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { PolymorphWidget } from "./PolymorphWidget";
+export { usePolymorphSession } from "./usePolymorphSession";
+export type { ChatMessage, SessionStatus, WidgetBranding, WidgetConfig } from "./types";

package/src/styles.module.css

@@ -0,0 +1,240 @@
+.widgetRoot {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.bottomRight {
+  bottom: 24px;
+  right: 24px;
+}
+
+.bottomLeft {
+  bottom: 24px;
+  left: 24px;
+  align-items: flex-start;
+}
+
+.fab {
+  width: 56px;
+  height: 56px;
+  border-radius: 28px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: transform 150ms ease, box-shadow 150ms ease;
+  color: white;
+}
+
+.fab:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+.panel {
+  width: 380px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  background: white;
+  border: 1px solid #e5e5e5;
+}
+
+.header {
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.chatThread {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 200px;
+  max-height: 400px;
+}
+
+.messageBubble {
+  max-width: 80%;
+  padding: 8px 12px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+.agentMessage {
+  align-self: flex-start;
+  background: #f5f5f5;
+  color: #171717;
+}
+
+.userMessage {
+  align-self: flex-end;
+  color: white;
+}
+
+.voiceLabel {
+  font-size: 10px;
+  opacity: 0.6;
+  margin-top: 2px;
+}
+
+.voiceOverlay {
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #737373;
+  border-top: 1px solid #f0f0f0;
+}
+
+.voiceBars {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 16px;
+}
+
+.voiceBar {
+  width: 3px;
+  border-radius: 2px;
+  background: #22c55e;
+  animation: voiceBar 1.2s ease-in-out infinite;
+}
+
+.voiceBar:nth-child(1) { height: 6px; animation-delay: 0s; }
+.voiceBar:nth-child(2) { height: 12px; animation-delay: 0.2s; }
+.voiceBar:nth-child(3) { height: 8px; animation-delay: 0.4s; }
+
+@keyframes voiceBar {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(0.4); }
+}
+
+.voiceToggle {
+  margin-left: auto;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border: 1px solid #e5e5e5;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  color: #737373;
+  transition: all 150ms ease;
+}
+
+.voiceToggle:hover {
+  background: #e5e5e5;
+}
+
+.voiceToggleActive {
+  background: #dcfce7;
+  border-color: #bbf7d0;
+  color: #16a34a;
+}
+
+.voiceToggleActive:hover {
+  background: #bbf7d0;
+}
+
+.inputBar {
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.inputField {
+  flex: 1;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+}
+
+.inputField:focus {
+  border-color: #a3a3a3;
+}
+
+.iconButton {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: #737373;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.iconButton:hover {
+  background: #f5f5f5;
+}
+
+.iconButton:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.iconButtonActive {
+  color: #22c55e;
+}
+
+.connectButton {
+  margin: 16px;
+  padding: 10px 20px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  transition: opacity 150ms ease;
+}
+
+.connectButton:hover {
+  opacity: 0.9;
+}
+
+.connectButton:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.statusBadge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.errorText {
+  color: #dc2626;
+  font-size: 13px;
+  padding: 0 16px;
+}