@equos/react 3.0.2-rc.4 → 3.0.2-rc.6

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/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/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", 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-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

@@ -4,5 +4,5 @@ export * from './equos-camera-toggle';
 export * from './equos-screenshare-toggle';
 export * from './equos-hangup-button';
 export * from './equos-video-tile';
-export * from './equos-character-video';
+export * from './equos-character-tile';
 export * from './equos-conversation-renderer';

package/dist/components/index.js

@@ -20,5 +20,5 @@ __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-video"), exports);
+__exportStar(require("./equos-character-tile"), exports);
 __exportStar(require("./equos-conversation-renderer"), exports);

package/dist/styles.css

@@ -25,6 +25,7 @@
     --radius-3xl: 1.5rem;
     --animate-spin: spin 1s linear infinite;
     --blur-sm: 8px;
+    --blur-2xl: 40px;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -181,27 +182,63 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
   .static {
     position: static;
   }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .bottom-8 {
     bottom: calc(var(--spacing) * 8);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .-z-10 {
+    z-index: calc(10 * -1);
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-20 {
+    z-index: 20;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -255,9 +292,16 @@
     width: calc(var(--spacing) * 32);
     height: calc(var(--spacing) * 32);
   }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
   .h-full {
     height: 100%;
   }
+  .max-h-\[512px\] {
+    max-height: 512px;
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -270,6 +314,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-\[512px\] {
+    max-width: 512px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -277,6 +324,10 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -313,6 +364,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .justify-self-end {
+    justify-self: flex-end;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -359,6 +413,12 @@
   .bg-black {
     background-color: var(--color-black);
   }
+  .bg-black\/10 {
+    background-color: color-mix(in srgb, #000 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
+  }
   .bg-white\/20 {
     background-color: color-mix(in srgb, #fff 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -371,12 +431,21 @@
       background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
     }
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -402,10 +471,23 @@
   .text-white {
     color: var(--color-white);
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .shadow-xl {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .backdrop-blur-2xl {
+    --tw-backdrop-blur: blur(var(--blur-2xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-blur-none {
+    --tw-backdrop-blur:  ;
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -421,6 +503,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -432,6 +518,16 @@
       }
     }
   }
+  .hover\:bg-black\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-white\/40 {
     &:hover {
       @media (hover: hover) {
@@ -612,6 +708,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -648,6 +748,7 @@
       --tw-backdrop-opacity: initial;
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
     }
   }
 }

package/dist/utils/copy.utils.d.ts

@@ -0,0 +1,24 @@
+export declare enum EquosLocale {
+    EN = "en",
+    FR = "fr",
+    ES = "es",
+    DE = "de",
+    IT = "it",
+    PT = "pt",
+    NL = "nl",
+    RU = "ru",
+    ZH = "zh",
+    JA = "ja",
+    KO = "ko",
+    AR = "ar",
+    HI = "hi"
+}
+export declare class CopyUtils {
+    static talkToCopy(locale: EquosLocale, name?: string): string;
+    static availableNowCopy(locale: string): string;
+    static timeLeftCopy(locale: string, remaining: number): string;
+    static failedToHangupCopy(locale: string): string;
+    static notJoiningCopy(locale: string, name: string): string;
+    static joiningCopy(locale: string, name: string): string;
+    static endingConversationCopy(locale: string, countdown: number): string;
+}

package/dist/utils/copy.utils.js

@@ -0,0 +1,273 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyUtils = exports.EquosLocale = void 0;
+var EquosLocale;
+(function (EquosLocale) {
+    EquosLocale["EN"] = "en";
+    EquosLocale["FR"] = "fr";
+    EquosLocale["ES"] = "es";
+    EquosLocale["DE"] = "de";
+    EquosLocale["IT"] = "it";
+    EquosLocale["PT"] = "pt";
+    EquosLocale["NL"] = "nl";
+    EquosLocale["RU"] = "ru";
+    EquosLocale["ZH"] = "zh";
+    EquosLocale["JA"] = "ja";
+    EquosLocale["KO"] = "ko";
+    EquosLocale["AR"] = "ar";
+    EquosLocale["HI"] = "hi";
+})(EquosLocale || (exports.EquosLocale = EquosLocale = {}));
+class CopyUtils {
+    static talkToCopy(locale, name) {
+        const assistant = name ||
+            {
+                [EquosLocale.FR]: 'votre assistant',
+                [EquosLocale.ES]: 'tu asistente',
+                [EquosLocale.DE]: 'Ihrem Assistenten',
+                [EquosLocale.IT]: 'il tuo assistente',
+                [EquosLocale.PT]: 'seu assistente',
+                [EquosLocale.NL]: 'je assistent',
+                [EquosLocale.RU]: 'вашим помощником',
+                [EquosLocale.ZH]: '您的助手',
+                [EquosLocale.JA]: 'あなたのアシスタント',
+                [EquosLocale.KO]: '귀하의 어시스턴트',
+                [EquosLocale.EN]: 'your assistant',
+                [EquosLocale.AR]: 'مساعدك',
+                [EquosLocale.HI]: 'आपका सहायक',
+            }[locale] ||
+            'your assistant';
+        switch (locale) {
+            case EquosLocale.FR:
+                return `Parler à ${assistant}`;
+            case EquosLocale.ES:
+                return `Habla con ${assistant}`;
+            case EquosLocale.DE:
+                return `Chatten mit ${assistant}`;
+            case EquosLocale.IT:
+                return `Parla con ${assistant}`;
+            case EquosLocale.PT:
+                return `Fale com ${assistant}`;
+            case EquosLocale.NL:
+                return `Chat met ${assistant}`;
+            case EquosLocale.RU:
+                return `Пообщайтесь с ${assistant}`;
+            case EquosLocale.ZH:
+                return `与${assistant}聊天`;
+            case EquosLocale.JA:
+                return `${assistant}と話す`;
+            case EquosLocale.KO:
+                return `${assistant}와 대화`;
+            case EquosLocale.AR:
+                return `تكلم مع ${assistant}`;
+            case EquosLocale.HI:
+                return `${assistant} से बात करें`;
+            case EquosLocale.EN:
+            default:
+                return `Chat with ${assistant}`;
+        }
+    }
+    static availableNowCopy(locale) {
+        switch (locale) {
+            case EquosLocale.FR:
+                return `Disponible`;
+            case EquosLocale.ES:
+                return `Disponible`;
+            case EquosLocale.DE:
+                return `Verfügbar`;
+            case EquosLocale.IT:
+                return `Disponibile`;
+            case EquosLocale.PT:
+                return `Disponível`;
+            case EquosLocale.NL:
+                return `Beschikbaar`;
+            case EquosLocale.RU:
+                return `Доступно`;
+            case EquosLocale.ZH:
+                return `可用`;
+            case EquosLocale.JA:
+                return `利用可能`;
+            case EquosLocale.KO:
+                return `사용 가능`;
+            case EquosLocale.AR:
+                return `متاح`;
+            case EquosLocale.HI:
+                return `ऑनलाइन है`;
+            case EquosLocale.EN:
+            default:
+                return `Available`;
+        }
+    }
+    static timeLeftCopy(locale, remaining) {
+        const hours = Math.floor(remaining / 3600)
+            .toString()
+            .padStart(2, '0');
+        const minutes = Math.floor((remaining % 3600) / 60)
+            .toString()
+            .padStart(2, '0');
+        const seconds = (remaining % 60).toString().padStart(2, '0');
+        const parts = [];
+        let timeString = '';
+        if (remaining > 3600) {
+            parts.push(`${hours}h`);
+        }
+        parts.push(`${minutes}m`);
+        if (parts.length < 2) {
+            parts.push(`${seconds}s`);
+        }
+        timeString = parts.join('');
+        switch (locale) {
+            case EquosLocale.FR:
+                return `${timeString} restantes`;
+            case EquosLocale.ES:
+                return `${timeString} restantes`;
+            case EquosLocale.DE:
+                return `${timeString} verbleibend`;
+            case EquosLocale.IT:
+                return `${timeString} rimanenti`;
+            case EquosLocale.PT:
+                return `${timeString} restantes`;
+            case EquosLocale.NL:
+                return `${timeString} resterend`;
+            case EquosLocale.RU:
+                return `Осталось ${timeString}`;
+            case EquosLocale.ZH:
+                return `剩余 ${timeString}`;
+            case EquosLocale.JA:
+                return `残り ${timeString}`;
+            case EquosLocale.KO:
+                return `남은 시간 ${timeString}`;
+            case EquosLocale.AR:
+                return `متبقي ${timeString}`;
+            case EquosLocale.HI:
+                return `${timeString} बाकी`;
+            case EquosLocale.EN:
+            default:
+                return `${timeString} left`;
+        }
+    }
+    static failedToHangupCopy(locale) {
+        switch (locale) {
+            case EquosLocale.FR:
+                return `Nous n'avons pas réussi à raccrocher.`;
+            case EquosLocale.ES:
+                return `No pudimos colgar.`;
+            case EquosLocale.DE:
+                return `Auflegen fehlgeschlagen.`;
+            case EquosLocale.IT:
+                return `Non siamo riusciti a riagganciare.`;
+            case EquosLocale.PT:
+                return `Não conseguimos desligar.`;
+            case EquosLocale.NL:
+                return `We konden niet ophangen.`;
+            case EquosLocale.RU:
+                return `Не удалось завершить звонок.`;
+            case EquosLocale.ZH:
+                return `我们无法挂断。`;
+            case EquosLocale.JA:
+                return `通話を終了できませんでした。`;
+            case EquosLocale.KO:
+                return `전화를 끊지 못했습니다.`;
+            case EquosLocale.AR:
+                return `لم نتمكن من إنهاء المكالمة.`;
+            case EquosLocale.HI:
+                return `हम कॉल समाप्त नहीं कर सके।`;
+            case EquosLocale.EN:
+            default:
+                return `We failed to hang up.`;
+        }
+    }
+    static notJoiningCopy(locale, name) {
+        switch (locale) {
+            case EquosLocale.FR:
+                return `${name} à du mal à se connecter.`;
+            case EquosLocale.ES:
+                return `${name} tiene problemas para unirse.`;
+            case EquosLocale.DE:
+                return `${name} Probleme beim Beitreten hat.`;
+            case EquosLocale.IT:
+                return `${name} abbia difficoltà a connettersi.`;
+            case EquosLocale.PT:
+                return `${name} está com dificuldades para entrar.`;
+            case EquosLocale.NL:
+                return `${name} moeite heeft om deel te nemen.`;
+            case EquosLocale.RU:
+                return `${name} испытывает трудности с подключением.`;
+            case EquosLocale.ZH:
+                return `${name}加入时遇到困难。`;
+            case EquosLocale.JA:
+                return `${name}が参加できないようです。`;
+            case EquosLocale.KO:
+                return `${name}(이)가 참여하는 데 어려움을 겪고 있습니다.`;
+            case EquosLocale.AR:
+                return `${name} يواجه صعوبة في الانضمام.`;
+            case EquosLocale.HI:
+                return `${name} जुड़ने में परेशानी हो रही है।`;
+            case EquosLocale.EN:
+            default:
+                return `${name} is having trouble joining.`;
+        }
+    }
+    static joiningCopy(locale, name) {
+        switch (locale) {
+            case EquosLocale.FR:
+                return `${name} se connecte...`;
+            case EquosLocale.ES:
+                return `${name} se está uniendo...`;
+            case EquosLocale.DE:
+                return `${name} tritt bei...`;
+            case EquosLocale.IT:
+                return `${name} si sta connettendo...`;
+            case EquosLocale.PT:
+                return `${name} está entrando...`;
+            case EquosLocale.NL:
+                return `${name} doet mee...`;
+            case EquosLocale.RU:
+                return `${name} присоединяется...`;
+            case EquosLocale.ZH:
+                return `${name}正在加入...`;
+            case EquosLocale.JA:
+                return `${name}が参加しています...`;
+            case EquosLocale.KO:
+                return `${name}(이)가 참여 중입니다...`;
+            case EquosLocale.AR:
+                return `${name} ينضم...`;
+            case EquosLocale.HI:
+                return `${name} जुड़ रहा है...`;
+            case EquosLocale.EN:
+            default:
+                return `${name} is joining...`;
+        }
+    }
+    static endingConversationCopy(locale, countdown) {
+        switch (locale) {
+            case EquosLocale.FR:
+                return `Fin automatique dans ${countdown}s...`;
+            case EquosLocale.ES:
+                return `Finalización automática en ${countdown}s...`;
+            case EquosLocale.DE:
+                return `Automatisches Beenden in ${countdown}s...`;
+            case EquosLocale.IT:
+                return `Chiusura automatica tra ${countdown}s...`;
+            case EquosLocale.PT:
+                return `Encerramento automático em ${countdown}s...`;
+            case EquosLocale.NL:
+                return `Automatisch afsluiten over ${countdown}s...`;
+            case EquosLocale.RU:
+                return `Автоматическое завершение через ${countdown}с...`;
+            case EquosLocale.ZH:
+                return `${countdown}秒后自动结束...`;
+            case EquosLocale.JA:
+                return `${countdown}秒で自動終了します...`;
+            case EquosLocale.KO:
+                return `${countdown}초 후 자동 종료...`;
+            case EquosLocale.AR:
+                return `إنهاء تلقائي في ${countdown} ثوان...`;
+            case EquosLocale.HI:
+                return `${countdown} सेकंड में स्वचालित समाप्ति...`;
+            case EquosLocale.EN:
+            default:
+                return `Auto ending in ${countdown}s...`;
+        }
+    }
+}
+exports.CopyUtils = CopyUtils;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equos/react",
-  "version": "3.0.2-rc.4",
+  "version": "3.0.2-rc.6",
   "description": "",
   "license": "ISC",
   "author": "",

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

@@ -1,4 +0,0 @@
-export declare function EquosCharacterVideo({ identity, className, }: {
-    identity: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EquosCharacterVideo = EquosCharacterVideo;
-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");
-function EquosCharacterVideo({ identity, className, }) {
-    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]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)('relative w-full h-full', className), children: trackRef && (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackRef, className: "w-full h-full" }) }));
-}