@tavus/cvi-ui 0.0.1-beta.2 → 0.0.1-beta.4

package/dist/templates/components/controls.tsx

@@ -1,279 +0,0 @@
-import React, { memo, useMemo } from "react";
-import {
-  useAudioTrack,
-  useDaily,
-  useDevices,
-  useLocalSessionId,
-  useVideoTrack,
-} from "@daily-co/daily-react";
-
-export const SelectDevice = ({
-  value,
-  devices,
-  disabled,
-  onChange,
-}: {
-  value: string | undefined;
-  devices: { device: MediaDeviceInfo }[];
-  disabled: boolean;
-  onChange: (value: string) => void;
-}) => {
-  return (
-    <select
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-      style={{
-        height: "3rem",
-        width: "5.5rem",
-        borderRadius: "9999px",
-        backgroundColor: "rgba(255, 255, 255, 0.2)",
-        padding: "0 0.75rem",
-        border: "1px solid rgba(255, 255, 255, 0.2)",
-        backdropFilter: "blur(10px)",
-      }}
-    >
-      {devices.map(({ device }) => (
-        <option key={device.deviceId} value={device.deviceId}>
-          {device.label}
-        </option>
-      ))}
-    </select>
-  );
-};
-
-export const MicrophoneButton = memo(() => {
-  const daily = useDaily();
-  const localSessionId = useLocalSessionId();
-  const localAudio = useAudioTrack(localSessionId);
-  const { micState, microphones, currentMic, setMicrophone } = useDevices();
-  const isMicReady = useMemo(() => micState === "granted", [micState]);
-  const mutedAudio = localAudio.isOff;
-
-  const handleClick = () => {
-    daily?.setLocalAudio(mutedAudio);
-  };
-
-  return (
-    <div style={{
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: "9999px",
-      backdropFilter: "blur(4px)"
-    }}>
-      <button
-        type="button"
-        onClick={handleClick}
-        disabled={!isMicReady}
-        style={{
-          position: "absolute",
-          left: 0,
-          top: 0,
-          zIndex: 10,
-          height: "3rem",
-          width: "3rem",
-          borderRadius: "9999px",
-          backgroundColor: "white",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: !isMicReady ? "0.5" : "1"
-        }}
-      >
-        <span>
-          {mutedAudio || !isMicReady ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              role="img"
-              aria-label="Microphone Muted"
-            >
-              <path
-                d="M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21"
-                stroke="#020617"
-                strokeWidth="1.66667"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <rect
-                x="1.30225"
-                y="3"
-                width="26"
-                height="2.24738"
-                rx="1.12369"
-                transform="rotate(30 1.30225 3)"
-                fill="#020617"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z"
-                fill="#020617"
-              />
-              <path
-                d="M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z"
-                fill="#020617"
-              />
-            </svg>
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              role="img"
-              aria-label="Microphone"
-            >
-              <path
-                d="M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z"
-                fill="#020617"
-                stroke="#020617"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21"
-                stroke="#020617"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )}
-        </span>
-        <span style={{ position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" }}>Microphone</span>
-      </button>
-      <SelectDevice
-        value={currentMic?.device?.deviceId}
-        devices={microphones || []}
-        disabled={!isMicReady}
-        onChange={(val) => setMicrophone(val)}
-      />
-    </div>
-  );
-});
-
-MicrophoneButton.displayName = "MicrophoneButton";
-
-export const CameraButton = memo(() => {
-  const daily = useDaily();
-  const localSessionId = useLocalSessionId();
-  const localVideo = useVideoTrack(localSessionId);
-  const { currentCam, camState, cameras, setCamera } = useDevices();
-  const isCamReady = camState === "granted";
-  const mutedVideo = localVideo.isOff;
-
-  const handleClick = () => {
-    daily?.setLocalVideo(mutedVideo);
-  };
-
-  return (
-    <div style={{
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: "9999px",
-      backdropFilter: "blur(4px)"
-    }}>
-      <button
-        type="button"
-        onClick={handleClick}
-        disabled={!isCamReady || !currentCam}
-        style={{
-          position: "absolute",
-          left: 0,
-          top: 0,
-          zIndex: 10,
-          height: "3rem",
-          width: "3rem",
-          borderRadius: "9999px",
-          backgroundColor: "white",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: (!isCamReady || !currentCam) ? "0.5" : "1"
-        }}
-      >
-        <span>
-          {mutedVideo ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              role="img"
-              aria-label="Camera Muted"
-            >
-              <g clipPath="url(#clip0_7082_14220)">
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z"
-                  fill="#020617"
-                />
-                <rect
-                  x="0.777222"
-                  y="2.64844"
-                  width="26.7988"
-                  height="2.24738"
-                  rx="1.12369"
-                  transform="rotate(30 0.777222 2.64844)"
-                  fill="#020617"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_7082_14220">
-                  <rect width="24" height="24" fill="white" />
-                </clipPath>
-              </defs>
-            </svg>
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              role="img"
-              aria-label="Camera"
-            >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z"
-                fill="#020617"
-              />
-            </svg>
-          )}
-        </span>
-        <span style={{ position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" }}>Camera</span>
-      </button>
-      <SelectDevice
-        value={currentCam?.device?.deviceId}
-        devices={cameras || []}
-        disabled={!isCamReady}
-        onChange={(val) => setCamera(val)}
-      />
-    </div>
-  );
-});
-
-CameraButton.displayName = "CameraButton";
-
-export const Controls = memo(() => {
-  return (
-    <div style={{ display: 'flex', gap: '10px' }}>
-      <MicrophoneButton />
-      <CameraButton />
-    </div>
-  );
-});

package/dist/templates/components/cvi-provider.tsx

@@ -1,9 +0,0 @@
-import { DailyProvider } from "@daily-co/daily-react";
-
-export const CVIProvider = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <DailyProvider>
-      {children}
-    </DailyProvider>
-  )
-}

package/dist/templates/controls.tsx

@@ -1,279 +0,0 @@
-import React, { memo, useMemo } from "react";
-import {
-  useAudioTrack,
-  useDaily,
-  useDevices,
-  useLocalSessionId,
-  useVideoTrack,
-} from "@daily-co/daily-react";
-
-export const SelectDevice = ({
-  value,
-  devices,
-  disabled,
-  onChange,
-}: {
-  value: string | undefined;
-  devices: { device: MediaDeviceInfo }[];
-  disabled: boolean;
-  onChange: (value: string) => void;
-}) => {
-  return (
-    <select
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-      style={{
-        height: "3rem",
-        width: "5.5rem",
-        borderRadius: "9999px",
-        backgroundColor: "rgba(255, 255, 255, 0.2)",
-        padding: "0 0.75rem",
-        border: "1px solid rgba(255, 255, 255, 0.2)",
-        backdropFilter: "blur(10px)",
-      }}
-    >
-      {devices.map(({ device }) => (
-        <option key={device.deviceId} value={device.deviceId}>
-          {device.label}
-        </option>
-      ))}
-    </select>
-  );
-};
-
-export const MicrophoneButton = memo(() => {
-  const daily = useDaily();
-  const localSessionId = useLocalSessionId();
-  const localAudio = useAudioTrack(localSessionId);
-  const { micState, microphones, currentMic, setMicrophone } = useDevices();
-  const isMicReady = useMemo(() => micState === "granted", [micState]);
-  const mutedAudio = localAudio.isOff;
-
-  const handleClick = () => {
-    daily?.setLocalAudio(mutedAudio);
-  };
-
-  return (
-    <div style={{
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: "9999px",
-      backdropFilter: "blur(4px)"
-    }}>
-      <button
-        type="button"
-        onClick={handleClick}
-        disabled={!isMicReady}
-        style={{
-          position: "absolute",
-          left: 0,
-          top: 0,
-          zIndex: 10,
-          height: "3rem",
-          width: "3rem",
-          borderRadius: "9999px",
-          backgroundColor: "white",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: !isMicReady ? "0.5" : "1"
-        }}
-      >
-        <span>
-          {mutedAudio || !isMicReady ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              role="img"
-              aria-label="Microphone Muted"
-            >
-              <path
-                d="M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21"
-                stroke="#020617"
-                strokeWidth="1.66667"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <rect
-                x="1.30225"
-                y="3"
-                width="26"
-                height="2.24738"
-                rx="1.12369"
-                transform="rotate(30 1.30225 3)"
-                fill="#020617"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z"
-                fill="#020617"
-              />
-              <path
-                d="M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z"
-                fill="#020617"
-              />
-            </svg>
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              role="img"
-              aria-label="Microphone"
-            >
-              <path
-                d="M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z"
-                fill="#020617"
-                stroke="#020617"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21"
-                stroke="#020617"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )}
-        </span>
-        <span style={{ position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" }}>Microphone</span>
-      </button>
-      <SelectDevice
-        value={currentMic?.device?.deviceId}
-        devices={microphones || []}
-        disabled={!isMicReady}
-        onChange={(val) => setMicrophone(val)}
-      />
-    </div>
-  );
-});
-
-MicrophoneButton.displayName = "MicrophoneButton";
-
-export const CameraButton = memo(() => {
-  const daily = useDaily();
-  const localSessionId = useLocalSessionId();
-  const localVideo = useVideoTrack(localSessionId);
-  const { currentCam, camState, cameras, setCamera } = useDevices();
-  const isCamReady = camState === "granted";
-  const mutedVideo = localVideo.isOff;
-
-  const handleClick = () => {
-    daily?.setLocalVideo(mutedVideo);
-  };
-
-  return (
-    <div style={{
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: "9999px",
-      backdropFilter: "blur(4px)"
-    }}>
-      <button
-        type="button"
-        onClick={handleClick}
-        disabled={!isCamReady || !currentCam}
-        style={{
-          position: "absolute",
-          left: 0,
-          top: 0,
-          zIndex: 10,
-          height: "3rem",
-          width: "3rem",
-          borderRadius: "9999px",
-          backgroundColor: "white",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: (!isCamReady || !currentCam) ? "0.5" : "1"
-        }}
-      >
-        <span>
-          {mutedVideo ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              role="img"
-              aria-label="Camera Muted"
-            >
-              <g clipPath="url(#clip0_7082_14220)">
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z"
-                  fill="#020617"
-                />
-                <rect
-                  x="0.777222"
-                  y="2.64844"
-                  width="26.7988"
-                  height="2.24738"
-                  rx="1.12369"
-                  transform="rotate(30 0.777222 2.64844)"
-                  fill="#020617"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_7082_14220">
-                  <rect width="24" height="24" fill="white" />
-                </clipPath>
-              </defs>
-            </svg>
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              role="img"
-              aria-label="Camera"
-            >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z"
-                fill="#020617"
-              />
-            </svg>
-          )}
-        </span>
-        <span style={{ position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" }}>Camera</span>
-      </button>
-      <SelectDevice
-        value={currentCam?.device?.deviceId}
-        devices={cameras || []}
-        disabled={!isCamReady}
-        onChange={(val) => setCamera(val)}
-      />
-    </div>
-  );
-});
-
-CameraButton.displayName = "CameraButton";
-
-export const Controls = memo(() => {
-  return (
-    <div style={{ display: 'flex', gap: '10px' }}>
-      <MicrophoneButton />
-      <CameraButton />
-    </div>
-  );
-});

package/dist/templates/cvi-hooks.tsx

@@ -1,38 +0,0 @@
-import { useCallback } from 'react';
-import { useDaily, useParticipantIds } from "@daily-co/daily-react";
-
-export const useReplicasIDs = () => {
-  const replicasIDs = useParticipantIds({
-    filter: (participant) => participant.user_id.includes("tavus-replica"),
-  });
-
-  return replicasIDs;
-}
-
-export const useRemoteParticipantsIDs = () => {
-  const remoteParticipantIds = useParticipantIds({
-    filter: (participant) => !participant.local,
-  });
-
-  return remoteParticipantIds;
-}
-
-export const useCVICall = () => {
-  const daily = useDaily();
-
-  const joinCall = useCallback(({ url }: { url: string }) => {
-    daily?.join({
-      url: url,
-    });
-  }, [daily]);
-
-  const leaveCall = useCallback(() => {
-    daily?.leave();
-  }, [daily]);
-
-  return { daily: daily, joinCall, leaveCall };
-};
-
-const useCVIEvents = () => {
-  // TODO: add app-messages listener
-}

package/dist/templates/cvi-provider.tsx

@@ -1,9 +0,0 @@
-import { DailyProvider } from "@daily-co/daily-react";
-
-export const CVIProvider = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <DailyProvider>
-      {children}
-    </DailyProvider>
-  )
-}

package/dist/templates/hooks/cvi-hooks.tsx

@@ -1,38 +0,0 @@
-import { useCallback } from 'react';
-import { useDaily, useParticipantIds } from "@daily-co/daily-react";
-
-export const useReplicasIDs = () => {
-  const replicasIDs = useParticipantIds({
-    filter: (participant) => participant.user_id.includes("tavus-replica"),
-  });
-
-  return replicasIDs;
-}
-
-export const useRemoteParticipantsIDs = () => {
-  const remoteParticipantIds = useParticipantIds({
-    filter: (participant) => !participant.local,
-  });
-
-  return remoteParticipantIds;
-}
-
-export const useCVICall = () => {
-  const daily = useDaily();
-
-  const joinCall = useCallback(({ url }: { url: string }) => {
-    daily?.join({
-      url: url,
-    });
-  }, [daily]);
-
-  const leaveCall = useCallback(() => {
-    daily?.leave();
-  }, [daily]);
-
-  return { daily: daily, joinCall, leaveCall };
-};
-
-const useCVIEvents = () => {
-  // TODO: add app-messages listener
-}