polymorph-sdk 0.2.0 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymorph-sdk",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "type": "module",
   "sideEffects": false,
   "main": "src/index.ts",
@@ -8,7 +8,11 @@
   "exports": {
     ".": "./src/index.ts"
   },
-  "files": ["dist", "src", "README.md"],
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
   "publishConfig": {
     "access": "public",
     "main": "dist/index.js",

package/src/ChatThread.tsx

@@ -1,26 +1,90 @@
-import { useEffect, useRef } from "react";
-import type { ChatMessage } from "./types";
+import { useCallback, useRef } from "react";
 import styles from "./styles.module.css";
+import type { ChatMessage, SessionStatus } from "./types";
 
-export function ChatThread({ messages, primaryColor }: { messages: ChatMessage[]; primaryColor: string }) {
+export function ChatThread({
+  messages,
+  primaryColor,
+  status,
+}: {
+  messages: ChatMessage[];
+  primaryColor: string;
+  status: SessionStatus;
+}) {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const isNearBottom = useRef(true);
+  const prevItemCount = useRef(0);
+  const agentCountAtConnect = useRef<number | null>(null);
+  const agentMessageCount = messages.filter((m) => m.role === "agent").length;
+  const lastMessageIsUser =
+    messages.length > 0 && messages[messages.length - 1].role === "user";
 
-  useEffect(() => {
-    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
-  }, [messages]);
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    isNearBottom.current =
+      el.scrollHeight - el.scrollTop - el.clientHeight < 100;
+  }, []);
+
+  // 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;
+
+  // Auto-scroll when new messages arrive or thinking indicator appears.
+  // Uses render-time comparison instead of useEffect to avoid lint issues
+  // with intentional "trigger" dependencies.
+  const itemCount = messages.length + (showThinking ? 1 : 0);
+  if (itemCount !== prevItemCount.current) {
+    prevItemCount.current = itemCount;
+    if (isNearBottom.current || lastMessageIsUser) {
+      queueMicrotask(() => {
+        scrollRef.current?.scrollTo({
+          top: scrollRef.current.scrollHeight,
+          behavior: "smooth",
+        });
+      });
+    }
+  }
 
   return (
-    <div ref={scrollRef} className={styles.chatThread}>
+    <div ref={scrollRef} className={styles.chatThread} onScroll={handleScroll}>
       {messages.map((msg) => (
         <div
           key={msg.id}
           className={`${styles.messageBubble} ${msg.role === "user" ? styles.userMessage : styles.agentMessage}`}
-          style={msg.role === "user" ? { backgroundColor: primaryColor } : undefined}
+          style={
+            msg.role === "user" ? { backgroundColor: primaryColor } : undefined
+          }
         >
           {msg.text}
-          {msg.source === "voice" && <div className={styles.voiceLabel}>voice</div>}
+          {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

@@ -1,14 +1,52 @@
+import { LiveKitRoom } from "@livekit/components-react";
 import { MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
-import { useState } from "react";
+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>; }
+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"
+    >
+      <title>Chat</title>
+      <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+    </svg>
+  );
+}
+
+function FabCloseIcon() {
+  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"
+    >
+      <title>Close</title>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
 
 export function PolymorphWidget(props: WidgetConfig) {
   const { position = "bottom-right", branding } = props;
@@ -16,26 +54,60 @@ export function PolymorphWidget(props: WidgetConfig) {
   const session = usePolymorphSession(props);
   const primaryColor = branding?.primaryColor || "#171717";
   const theme = buildWidgetTheme(primaryColor);
+  const rootRef = useRef<HTMLDivElement>(null);
 
   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)}
-          />
-        )}
+    <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}
+      >
+        <WidgetPanel
+          config={props}
+          session={session}
+          onClose={() => setOpen(false)}
+          hidden={!open}
+        />
         <button
           type="button"
-          className={styles.fab}
+          className={`${styles.fab} ${open ? styles.fabOpen : ""}`}
           style={{ backgroundColor: primaryColor }}
-          onClick={() => setOpen(prev => !prev)}
+          onClick={() => setOpen((prev) => !prev)}
         >
-          <ChatIcon />
+          {open ? <FabCloseIcon /> : <ChatIcon />}
         </button>
-      </div>
-    </MantineProvider>
+        {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

@@ -3,7 +3,17 @@ 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">
+    <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" />
@@ -13,7 +23,17 @@ function VolumeIcon() {
 
 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">
+    <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" />