@equos/react 3.0.2-rc.1 → 3.0.2-rc.10

package/dist/components/equos-character-tile.d.ts

@@ -0,0 +1,12 @@
+import { EquosLocale } from '../utils/copy.utils';
+export declare function EquosCharacterTile({ identity, name, locale, className, startedAt, maxSeconds, recoveryTimeInSeconds, showTimeLeft, onShouldLeave, }: {
+    identity: string;
+    name: string;
+    locale?: EquosLocale;
+    className?: string;
+    startedAt: Date;
+    maxSeconds: number;
+    recoveryTimeInSeconds?: number;
+    showTimeLeft?: boolean;
+    onShouldLeave?: () => void | Promise<void>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/equos-character-tile.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EquosCharacterTile = EquosCharacterTile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_react_1 = require("@livekit/components-react");
+const cn_1 = require("../utils/cn");
+const react_1 = require("react");
+const livekit_client_1 = require("livekit-client");
+const copy_utils_1 = require("../utils/copy.utils");
+function EquosCharacterTile({ identity, name, locale = copy_utils_1.EquosLocale.EN, className, startedAt, maxSeconds, recoveryTimeInSeconds = 3, showTimeLeft = true, onShouldLeave, }) {
+    const waitForCharacterToJoin = 20;
+    const [joined, setJoined] = (0, react_1.useState)(false);
+    const [leftTimeout, setLeftTimeout] = (0, react_1.useState)(null);
+    const [remainingTime, setRemainingTime] = (0, react_1.useState)(null);
+    const [duration, setDuration] = (0, react_1.useState)(0);
+    const participants = (0, components_react_1.useParticipants)();
+    const trackRef = (0, react_1.useMemo)(() => {
+        const participant = participants.find((p) => p.identity === identity);
+        if (!participant || !participant.trackPublications) {
+            return null;
+        }
+        const publication = Array.from(participant.trackPublications.values()).find((pub) => pub.source === livekit_client_1.Track.Source.Camera);
+        if (!publication) {
+            return null;
+        }
+        return {
+            participant,
+            publication,
+            source: livekit_client_1.Track.Source.Camera,
+        };
+    }, [identity, participants]);
+    const hasTroubleJoining = (0, react_1.useMemo)(() => {
+        return !joined && duration > waitForCharacterToJoin - 10;
+    }, [joined, duration]);
+    const joiningCopy = (0, react_1.useMemo)(() => {
+        return copy_utils_1.CopyUtils.joiningCopy(locale, name);
+    }, [name, locale]);
+    const notJoiningCopy = (0, react_1.useMemo)(() => {
+        return copy_utils_1.CopyUtils.notJoiningCopy(locale, name);
+    }, [name, locale]);
+    const endingConversationCopy = (0, react_1.useMemo)(() => {
+        return copy_utils_1.CopyUtils.endingConversationCopy(locale, Math.max(waitForCharacterToJoin - duration, 0));
+    }, [duration, locale, waitForCharacterToJoin]);
+    // Detect if we should leave the conversation because the character is not joining...
+    (0, react_1.useEffect)(() => {
+        if (!onShouldLeave)
+            return;
+        if (!joined && duration > waitForCharacterToJoin) {
+            onShouldLeave();
+        }
+    }, [joined, duration, waitForCharacterToJoin, onShouldLeave]);
+    (0, react_1.useEffect)(() => {
+        const i = setInterval(() => {
+            const elapsedTime = new Date().getTime() - startedAt.getTime();
+            const remainingSeconds = Math.round(Math.max(0, maxSeconds * 1000 - elapsedTime) / 1000);
+            setRemainingTime(copy_utils_1.CopyUtils.timeLeftCopy(locale, remainingSeconds));
+            setDuration((duration) => duration + 1);
+        }, 1000);
+        return () => clearInterval(i);
+    }, [startedAt, maxSeconds]);
+    (0, react_1.useEffect)(() => {
+        if (joined) {
+            if (!trackRef && !leftTimeout && onShouldLeave) {
+                setLeftTimeout(setTimeout(() => {
+                    onShouldLeave?.();
+                }, recoveryTimeInSeconds * 1000));
+            }
+        }
+        else if (trackRef) {
+            setJoined(true);
+            if (leftTimeout) {
+                clearTimeout(leftTimeout);
+            }
+        }
+        return () => {
+            if (leftTimeout) {
+                clearTimeout(leftTimeout);
+            }
+        };
+    }, [joined, trackRef]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)('relative w-full h-full overflow-hidden bg-black', className), children: [remainingTime && showTimeLeft && ((0, jsx_runtime_1.jsx)("span", { className: "absolute right-4 top-4 z-20 text-xs text-white rounded-full bg-black/10 py-1 px-2", children: remainingTime })), !joined && !hasTroubleJoining && ((0, jsx_runtime_1.jsx)("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 text-xs text-white", children: joiningCopy })), !joined && hasTroubleJoining && ((0, jsx_runtime_1.jsxs)("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-white", children: notJoiningCopy }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-white", children: endingConversationCopy })] })), trackRef && (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackRef, className: "w-full h-full" })] }));
+}

package/dist/{src/components → components}/equos-conversation-renderer.d.ts

@@ -1,11 +1,14 @@
 import type { EquosConversationWithCharacter } from '@equos/core';
-export declare function EquosConversationRenderer({ conversation, accessToken, allowMic, allowCamera, allowScreenshare, allowHangUp, className, onHangUp, }: {
+import { EquosLocale } from '../utils/copy.utils';
+export declare function EquosConversationRenderer({ conversation, accessToken, allowMic, allowCamera, allowScreenshare, allowHangUp, className, characterVideoClassName, locale, onHangUp, }: {
     conversation?: EquosConversationWithCharacter | null;
     accessToken?: string | null;
     allowMic?: boolean;
     allowCamera?: boolean;
     allowScreenshare?: boolean;
     className?: string;
+    characterVideoClassName?: string;
     allowHangUp?: boolean;
+    locale?: EquosLocale;
     onHangUp?: () => void | Promise<void>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/{src/components → components}/equos-conversation-renderer.js

@@ -11,8 +11,9 @@ const equos_hangup_button_1 = require("./equos-hangup-button");
 const react_1 = require("react");
 const livekit_client_1 = require("livekit-client");
 const equos_video_tile_1 = require("./equos-video-tile");
-const equos_character_video_1 = require("./equos-character-video");
-function EquosConversationRenderer({ conversation, accessToken, allowMic = true, allowCamera = true, allowScreenshare = false, allowHangUp = true, className, onHangUp, }) {
+const equos_character_tile_1 = require("./equos-character-tile");
+const copy_utils_1 = require("../utils/copy.utils");
+function EquosConversationRenderer({ conversation, accessToken, allowMic = true, allowCamera = true, allowScreenshare = false, allowHangUp = true, className, characterVideoClassName, locale = copy_utils_1.EquosLocale.EN, onHangUp, }) {
     const [hangingUp, setHangingUp] = (0, react_1.useState)(false);
     const [_, setMicEnabled] = (0, react_1.useState)(false);
     const [cameraEnabled, setCameraEnabled] = (0, react_1.useState)(false);
@@ -31,7 +32,7 @@ function EquosConversationRenderer({ conversation, accessToken, allowMic = true,
     const [cameraTileDragging, setCameraTileDragging] = (0, react_1.useState)(false);
     const [screenTilePos, setScreenTilePos] = (0, react_1.useState)({
         x: 8,
-        y: 112,
+        y: 160,
     });
     const [screenTileDragOffset, setScreenTileDragOffset] = (0, react_1.useState)({
         x: 0,
@@ -105,8 +106,8 @@ function EquosConversationRenderer({ conversation, accessToken, allowMic = true,
     return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onMouseLeave: onMouseUp, className: (0, cn_1.cn)('relative w-full h-full', className), children: (0, jsx_runtime_1.jsxs)(components_react_1.LiveKitRoom, { serverUrl: conversation.serverUrl, token: accessToken, audio: allowMic, video: allowCamera, screen: false, className: "w-full h-full", children: [allowCamera && cameraEnabled && ((0, jsx_runtime_1.jsx)("div", { ref: cameraTileRef, onMouseDown: onCameraTileMouseDown, className: (0, cn_1.cn)('absolute z-50 select-none', cameraTileDragging ? 'cursor-grabbing' : 'cursor-grab'), style: {
                         top: cameraTilePos.y,
                         left: cameraTilePos.x,
-                    }, children: (0, jsx_runtime_1.jsx)(equos_video_tile_1.EquosVideoTile, { identity: conversation.consumerIdentity, source: livekit_client_1.Track.Source.Camera }) })), allowScreenshare && screenshareEnabled && ((0, jsx_runtime_1.jsx)("div", { ref: screenTileRef, onMouseDown: onScreenTileMouseDown, className: (0, cn_1.cn)('absolute z-50 select-none', cameraTileDragging ? 'cursor-grabbing' : 'cursor-grab'), style: {
+                    }, children: (0, jsx_runtime_1.jsx)(equos_video_tile_1.EquosVideoTile, { identity: conversation.consumerIdentity, source: livekit_client_1.Track.Source.Camera }) })), allowScreenshare && screenshareEnabled && ((0, jsx_runtime_1.jsx)("div", { ref: screenTileRef, onMouseDown: onScreenTileMouseDown, className: (0, cn_1.cn)('absolute z-50', cameraTileDragging ? 'cursor-grabbing' : 'cursor-grab'), style: {
                         top: screenTilePos.y,
                         left: screenTilePos.x,
-                    }, children: (0, jsx_runtime_1.jsx)(equos_video_tile_1.EquosVideoTile, { identity: conversation.consumerIdentity, source: livekit_client_1.Track.Source.ScreenShare }) })), (0, jsx_runtime_1.jsx)(equos_character_video_1.EquosCharacterVideo, { identity: conversation.character.livekitIdentity }), (0, jsx_runtime_1.jsx)(components_react_1.RoomAudioRenderer, {}), (0, jsx_runtime_1.jsxs)("div", { className: "absolute grid grid-cols-3 gap-2 max-w-full bottom-8 left-1/2 -translate-x-1/2", children: [(0, jsx_runtime_1.jsx)("div", { children: allowMic && (0, jsx_runtime_1.jsx)(equos_mic_toggle_1.EquosMicToggle, { onToggle: setMicEnabled }) }), (0, jsx_runtime_1.jsx)("div", { children: allowHangUp && ((0, jsx_runtime_1.jsx)(equos_hangup_button_1.EquosHangupButton, { onHangup: handleHangUp, loading: hangingUp })) }), (0, jsx_runtime_1.jsxs)("div", { children: [allowCamera && (0, jsx_runtime_1.jsx)(equos_camera_toggle_1.EquosCameraToggle, { onToggle: setCameraEnabled }), allowScreenshare && ((0, jsx_runtime_1.jsx)(equos_screenshare_toggle_1.EquosScreenshareToggle, { onToggle: setScreenshareEnabled }))] })] })] }) }));
+                    }, children: (0, jsx_runtime_1.jsx)(equos_video_tile_1.EquosVideoTile, { identity: conversation.consumerIdentity, source: livekit_client_1.Track.Source.ScreenShare }) })), (0, jsx_runtime_1.jsx)(equos_character_tile_1.EquosCharacterTile, { identity: conversation.character.livekitIdentity, name: conversation.character.name, locale: locale, startedAt: conversation.startedAt, maxSeconds: conversation.maxSeconds, recoveryTimeInSeconds: 3, onShouldLeave: handleHangUp, className: characterVideoClassName }), (0, jsx_runtime_1.jsx)(components_react_1.RoomAudioRenderer, {}), (0, jsx_runtime_1.jsxs)("div", { className: "absolute grid grid-cols-3 gap-2 max-w-full bottom-8 left-1/2 -translate-x-1/2", children: [(0, jsx_runtime_1.jsx)("div", { className: "justify-self-end flex items-center", children: allowMic && (0, jsx_runtime_1.jsx)(equos_mic_toggle_1.EquosMicToggle, { onToggle: setMicEnabled }) }), (0, jsx_runtime_1.jsx)("div", { children: allowHangUp && ((0, jsx_runtime_1.jsx)(equos_hangup_button_1.EquosHangupButton, { onHangup: handleHangUp, loading: hangingUp })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [allowCamera && (0, jsx_runtime_1.jsx)(equos_camera_toggle_1.EquosCameraToggle, { onToggle: setCameraEnabled }), allowScreenshare && ((0, jsx_runtime_1.jsx)(equos_screenshare_toggle_1.EquosScreenshareToggle, { onToggle: setScreenshareEnabled }))] })] })] }) }));
 }

package/dist/components/equos-hangup-button.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EquosHangupButton = EquosHangupButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const cn_1 = require("../utils/cn");
+function EquosHangupButton({ className, loading = false, onHangup, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)('overflow-hidden', 'border shadow-glass backdrop-blur-xs rounded-full cursor-pointer text-white transition-colors p-4 bg-[#FF4133]/80 hover:bg-[#FF4133] border-[#FFCFCC] w-32 flex justify-center items-center', className), type: "button", onClick: onHangup, children: loading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader, { size: 20, className: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PhoneMissed, { size: 20 })) }));
+}

package/dist/{src/components → components}/equos-video-tile.js

@@ -8,7 +8,7 @@ const lucide_react_1 = require("lucide-react");
 const components_react_1 = require("@livekit/components-react");
 const livekit_client_1 = require("livekit-client");
 function EquosVideoTile({ identity, defaultToLocal = true, className, source = livekit_client_1.Track.Source.Camera, }) {
-    const [expanded, setExpanded] = (0, react_1.useState)(true);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
     const participants = (0, components_react_1.useParticipants)();
     const trackRef = (0, react_1.useMemo)(() => {
         const participant = participants.find((p) => p.identity === identity || (defaultToLocal && p.isLocal));
@@ -25,5 +25,8 @@ function EquosVideoTile({ identity, defaultToLocal = true, className, source = l
             source,
         };
     }, [identity, source, participants]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)('relative border border-white/60 shadow-xl rounded-2xl bg-black aspect-video transition-all max-w-full overflow-hidden', expanded ? 'w-96' : 'w-64', className), children: [(0, jsx_runtime_1.jsx)("button", { className: "absolute top-4 right-4 text-white cursor-pointer", onClick: () => setExpanded(!expanded), children: expanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 12 }) }), trackRef && (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackRef, className: "w-full h-full" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)('relative border border-white/60 shadow-xl rounded-2xl bg-black aspect-video transition-all max-w-full overflow-hidden', expanded ? 'w-96' : 'w-64', className), children: [(0, jsx_runtime_1.jsx)("button", { className: "absolute top-2 right-2 text-white cursor-pointer p-2 z-10 hover:bg-black/10 rounded-full transition-colors", onClick: (e) => {
+                    e.stopPropagation();
+                    setExpanded(!expanded);
+                }, children: expanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 12 }) }), trackRef && (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackRef, className: "w-full h-full" })] }));
 }

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './equos-logo';
+export * from './equos-mic-toggle';
+export * from './equos-camera-toggle';
+export * from './equos-screenshare-toggle';
+export * from './equos-hangup-button';
+export * from './equos-video-tile';
+export * from './equos-character-tile';
+export * from './equos-conversation-renderer';

package/dist/components/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./equos-logo"), exports);
+__exportStar(require("./equos-mic-toggle"), exports);
+__exportStar(require("./equos-camera-toggle"), exports);
+__exportStar(require("./equos-screenshare-toggle"), exports);
+__exportStar(require("./equos-hangup-button"), exports);
+__exportStar(require("./equos-video-tile"), exports);
+__exportStar(require("./equos-character-tile"), exports);
+__exportStar(require("./equos-conversation-renderer"), exports);

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './utils';
+export * from './client';

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./client"), exports);