@wix/legends-platform-sdk 1.0.0

package/dist/esm/components/ChromaKey/chroma-key.js

@@ -0,0 +1,91 @@
+import invariant from 'invariant';
+import * as shaders from './shaders';
+export function chromaKey($video, $canvas, options) {
+  const gl = $canvas.getContext('webgl', {
+    alpha: true,
+    premultipliedAlpha: false,
+    preserveDrawingBuffer: true
+  });
+  invariant(gl, 'WebGL context is not initialized');
+  const BUFFER = gl.createBuffer();
+  const TEXTURE = gl.createTexture();
+  const program = gl.createProgram();
+  const _VS_ = gl.createShader(gl.VERTEX_SHADER);
+  const _FS_ = gl.createShader(gl.FRAGMENT_SHADER);
+  invariant(program, 'Program is not initialized');
+  invariant(_VS_, 'Vertex shader is not initialized');
+  invariant(_FS_, 'Fragment shader is not initialized');
+  gl.shaderSource(_VS_, shaders.VertexAlign);
+  gl.shaderSource(_FS_, shaders.ChromaKey);
+  gl.compileShader(_VS_);
+  gl.compileShader(_FS_);
+  if (!gl.getShaderParameter(_FS_, gl.COMPILE_STATUS)) {
+    console.error('Fragment shader compilation failed', gl.getShaderInfoLog(_FS_));
+  }
+  gl.attachShader(program, _VS_);
+  gl.attachShader(program, _FS_);
+  gl.linkProgram(program);
+  gl.useProgram(program);
+  gl.bindTexture(gl.TEXTURE_2D, TEXTURE);
+  gl.bindBuffer(gl.ARRAY_BUFFER, BUFFER);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  const $coords$ = gl.getAttribLocation(program, 'coords');
+  const $texture$ = gl.getUniformLocation(program, 'tex');
+  const $width$ = gl.getUniformLocation(program, 'texWidth');
+  const $height$ = gl.getUniformLocation(program, 'texHeight');
+  const $color$ = gl.getUniformLocation(program, 'keyColor');
+  const $similarity$ = gl.getUniformLocation(program, 'similarity');
+  const $smoothness$ = gl.getUniformLocation(program, 'smoothness');
+  const $spill$ = gl.getUniformLocation(program, 'spill');
+  gl.vertexAttribPointer($coords$, 2, gl.FLOAT, false, 0, 0);
+  gl.enableVertexAttribArray($coords$);
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Enable blending for transparency (critical for Safari)
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  return function process() {
+    const color = options.color,
+      spill = options.spill,
+      similarity = options.similarity,
+      smoothness = options.smoothness,
+      background = options.background;
+
+    // Use video dimensions directly instead of metadata (for Safari compatibility)
+    const videoWidth = $video.videoWidth;
+    const videoHeight = $video.videoHeight;
+    if (!videoWidth || !videoHeight) {
+      return; // Video not ready yet
+    }
+    const width = videoWidth * window.devicePixelRatio;
+    const height = videoHeight * window.devicePixelRatio;
+    $canvas.width = width;
+    $canvas.height = height;
+    gl.viewport(0, 0, width, height);
+
+    // Clear with background color or transparent
+    if (background) {
+      const r = parseInt(background.substring(1, 3), 16) / 255;
+      const g = parseInt(background.substring(3, 5), 16) / 255;
+      const b = parseInt(background.substring(5, 7), 16) / 255;
+      gl.clearColor(r, g, b, 1);
+    } else {
+      gl.clearColor(0, 0, 0, 0);
+    }
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.uniform1i($texture$, 0);
+    gl.uniform1f($width$, width);
+    gl.uniform1f($height$, height);
+    gl.uniform1f($spill$, spill);
+    gl.uniform1f($similarity$, similarity);
+    gl.uniform1f($smoothness$, smoothness);
+    gl.uniform3f($color$, parseInt(color.substr(1, 2), 16) / 255, parseInt(color.substr(3, 2), 16) / 255, parseInt(color.substr(5, 2), 16) / 255);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);
+    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
+  };
+}
+//# sourceMappingURL=chroma-key.js.map

package/dist/esm/components/ChromaKey/chroma-key.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["invariant","shaders","chromaKey","$video","$canvas","options","gl","getContext","alpha","premultipliedAlpha","preserveDrawingBuffer","BUFFER","createBuffer","TEXTURE","createTexture","program","createProgram","_VS_","createShader","VERTEX_SHADER","_FS_","FRAGMENT_SHADER","shaderSource","VertexAlign","ChromaKey","compileShader","getShaderParameter","COMPILE_STATUS","console","error","getShaderInfoLog","attachShader","linkProgram","useProgram","bindTexture","TEXTURE_2D","bindBuffer","ARRAY_BUFFER","bufferData","Float32Array","STATIC_DRAW","texParameteri","TEXTURE_MIN_FILTER","LINEAR","TEXTURE_WRAP_S","CLAMP_TO_EDGE","TEXTURE_WRAP_T","$coords$","getAttribLocation","$texture$","getUniformLocation","$width$","$height$","$color$","$similarity$","$smoothness$","$spill$","vertexAttribPointer","FLOAT","enableVertexAttribArray","activeTexture","TEXTURE0","enable","BLEND","blendFunc","SRC_ALPHA","ONE_MINUS_SRC_ALPHA","process","color","spill","similarity","smoothness","background","videoWidth","videoHeight","width","window","devicePixelRatio","height","viewport","r","parseInt","substring","g","b","clearColor","clear","COLOR_BUFFER_BIT","uniform1i","uniform1f","uniform3f","substr","texImage2D","RGB","UNSIGNED_BYTE","drawArrays","TRIANGLE_FAN"],"sources":["../../../../src/components/ChromaKey/chroma-key.ts"],"sourcesContent":["import invariant from 'invariant';\n\nimport * as shaders from './shaders';\n\nexport type ProcessCallback = () => void;\n\nexport function chromaKey(\n  $video: HTMLVideoElement,\n  $canvas: HTMLCanvasElement,\n  options: {\n    color: string;\n    spill: number;\n    similarity: number;\n    smoothness: number;\n    background?: string | null;\n  },\n): ProcessCallback {\n  const gl = $canvas.getContext('webgl', {\n    alpha: true,\n    premultipliedAlpha: false,\n    preserveDrawingBuffer: true,\n  });\n\n  invariant(gl, 'WebGL context is not initialized');\n\n  const BUFFER = gl.createBuffer();\n  const TEXTURE = gl.createTexture();\n  const program = gl.createProgram();\n  const _VS_ = gl.createShader(gl.VERTEX_SHADER);\n  const _FS_ = gl.createShader(gl.FRAGMENT_SHADER);\n\n  invariant(program, 'Program is not initialized');\n  invariant(_VS_, 'Vertex shader is not initialized');\n  invariant(_FS_, 'Fragment shader is not initialized');\n\n  gl.shaderSource(_VS_, shaders.VertexAlign);\n  gl.shaderSource(_FS_, shaders.ChromaKey);\n\n  gl.compileShader(_VS_);\n  gl.compileShader(_FS_);\n\n  if (!gl.getShaderParameter(_FS_, gl.COMPILE_STATUS)) {\n    console.error(\n      'Fragment shader compilation failed',\n      gl.getShaderInfoLog(_FS_),\n    );\n  }\n\n  gl.attachShader(program, _VS_);\n  gl.attachShader(program, _FS_);\n\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  gl.bindTexture(gl.TEXTURE_2D, TEXTURE);\n  gl.bindBuffer(gl.ARRAY_BUFFER, BUFFER);\n\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW,\n  );\n\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n\n  const $coords$ = gl.getAttribLocation(program, 'coords');\n  const $texture$ = gl.getUniformLocation(program, 'tex');\n  const $width$ = gl.getUniformLocation(program, 'texWidth');\n  const $height$ = gl.getUniformLocation(program, 'texHeight');\n  const $color$ = gl.getUniformLocation(program, 'keyColor');\n  const $similarity$ = gl.getUniformLocation(program, 'similarity');\n  const $smoothness$ = gl.getUniformLocation(program, 'smoothness');\n  const $spill$ = gl.getUniformLocation(program, 'spill');\n\n  gl.vertexAttribPointer($coords$, 2, gl.FLOAT, false, 0, 0);\n  gl.enableVertexAttribArray($coords$);\n\n  gl.activeTexture(gl.TEXTURE0);\n\n  // Enable blending for transparency (critical for Safari)\n  gl.enable(gl.BLEND);\n  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n\n  return function process() {\n    const { color, spill, similarity, smoothness, background } = options;\n\n    // Use video dimensions directly instead of metadata (for Safari compatibility)\n    const videoWidth = $video.videoWidth;\n    const videoHeight = $video.videoHeight;\n\n    if (!videoWidth || !videoHeight) {\n      return; // Video not ready yet\n    }\n\n    const width = videoWidth * window.devicePixelRatio;\n    const height = videoHeight * window.devicePixelRatio;\n\n    $canvas.width = width;\n    $canvas.height = height;\n\n    gl.viewport(0, 0, width, height);\n\n    // Clear with background color or transparent\n    if (background) {\n      const r = parseInt(background.substring(1, 3), 16) / 255;\n      const g = parseInt(background.substring(3, 5), 16) / 255;\n      const b = parseInt(background.substring(5, 7), 16) / 255;\n      gl.clearColor(r, g, b, 1);\n    } else {\n      gl.clearColor(0, 0, 0, 0);\n    }\n    gl.clear(gl.COLOR_BUFFER_BIT);\n\n    gl.useProgram(program);\n\n    gl.uniform1i($texture$, 0);\n    gl.uniform1f($width$, width);\n    gl.uniform1f($height$, height);\n    gl.uniform1f($spill$, spill);\n    gl.uniform1f($similarity$, similarity);\n    gl.uniform1f($smoothness$, smoothness);\n    gl.uniform3f(\n      $color$,\n      parseInt(color.substr(1, 2), 16) / 255,\n      parseInt(color.substr(3, 2), 16) / 255,\n      parseInt(color.substr(5, 2), 16) / 255,\n    );\n\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);\n    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/ChromaKey/index.js

@@ -0,0 +1,2 @@
+export * from './ChromaKey';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ChromaKey/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/ChromaKey/index.ts"],"sourcesContent":["export * from './ChromaKey';\n"],"mappings":"AAAA,cAAc,aAAa","ignoreList":[]}

package/dist/esm/components/ChromaKey/shaders/chroma-key.shader.js

@@ -0,0 +1,40 @@
+export default `
+precision mediump float;
+
+uniform sampler2D tex;
+uniform float texWidth;
+uniform float texHeight;
+
+uniform vec3 keyColor;
+uniform float similarity;
+uniform float smoothness;
+uniform float spill;
+
+vec2 RGBtoUV(vec3 rgb) {
+  return vec2(
+    rgb.r * -0.169 + rgb.g * -0.331 + rgb.b *  0.5    + 0.5,
+    rgb.r *  0.5   + rgb.g * -0.419 + rgb.b * -0.081  + 0.5
+  );
+}
+
+vec4 ChromaKey(vec2 texCoord) {
+  vec4 rgba = texture2D(tex, texCoord);
+  float chromaDist = distance(RGBtoUV(texture2D(tex, texCoord).rgb), RGBtoUV(keyColor));
+
+  float baseMask = chromaDist - similarity;
+  float fullMask = pow(clamp(baseMask / smoothness, 0., 1.), 1.5);
+  rgba.a = fullMask;
+
+  float spillVal = pow(clamp(baseMask / spill, 0., 1.), 1.5);
+  float desat = clamp(rgba.r * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722, 0., 1.);
+  rgba.rgb = mix(vec3(desat, desat, desat), rgba.rgb, spillVal);
+
+  return rgba;
+}
+
+void main(void) {
+  vec2 texCoord = vec2(gl_FragCoord.x/texWidth, 1.0 - (gl_FragCoord.y/texHeight));
+  gl_FragColor = ChromaKey(texCoord);
+}
+`;
+//# sourceMappingURL=chroma-key.shader.js.map

package/dist/esm/components/ChromaKey/shaders/chroma-key.shader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/components/ChromaKey/shaders/chroma-key.shader.ts"],"sourcesContent":["export default `\nprecision mediump float;\n\nuniform sampler2D tex;\nuniform float texWidth;\nuniform float texHeight;\n\nuniform vec3 keyColor;\nuniform float similarity;\nuniform float smoothness;\nuniform float spill;\n\nvec2 RGBtoUV(vec3 rgb) {\n  return vec2(\n    rgb.r * -0.169 + rgb.g * -0.331 + rgb.b *  0.5    + 0.5,\n    rgb.r *  0.5   + rgb.g * -0.419 + rgb.b * -0.081  + 0.5\n  );\n}\n\nvec4 ChromaKey(vec2 texCoord) {\n  vec4 rgba = texture2D(tex, texCoord);\n  float chromaDist = distance(RGBtoUV(texture2D(tex, texCoord).rgb), RGBtoUV(keyColor));\n\n  float baseMask = chromaDist - similarity;\n  float fullMask = pow(clamp(baseMask / smoothness, 0., 1.), 1.5);\n  rgba.a = fullMask;\n\n  float spillVal = pow(clamp(baseMask / spill, 0., 1.), 1.5);\n  float desat = clamp(rgba.r * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722, 0., 1.);\n  rgba.rgb = mix(vec3(desat, desat, desat), rgba.rgb, spillVal);\n\n  return rgba;\n}\n\nvoid main(void) {\n  vec2 texCoord = vec2(gl_FragCoord.x/texWidth, 1.0 - (gl_FragCoord.y/texHeight));\n  gl_FragColor = ChromaKey(texCoord);\n}\n`;\n"],"mappings":"AAAA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/dist/esm/components/ChromaKey/shaders/index.js

@@ -0,0 +1,3 @@
+export { default as ChromaKey } from './chroma-key.shader';
+export { default as VertexAlign } from './vertex-align.shader';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ChromaKey/shaders/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","ChromaKey","VertexAlign"],"sources":["../../../../../src/components/ChromaKey/shaders/index.ts"],"sourcesContent":["export { default as ChromaKey } from './chroma-key.shader';\nexport { default as VertexAlign } from './vertex-align.shader';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAAS,QAAQ,qBAAqB;AAC1D,SAASD,OAAO,IAAIE,WAAW,QAAQ,uBAAuB","ignoreList":[]}

package/dist/esm/components/ChromaKey/shaders/vertex-align.shader.js

@@ -0,0 +1,8 @@
+export default `
+attribute vec2 coords;
+
+void main(void) {
+  gl_Position=vec4(coords, 0.0, 1.0);
+}
+`;
+//# sourceMappingURL=vertex-align.shader.js.map

package/dist/esm/components/ChromaKey/shaders/vertex-align.shader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/components/ChromaKey/shaders/vertex-align.shader.ts"],"sourcesContent":["export default `\nattribute vec2 coords;\n\nvoid main(void) {\n  gl_Position=vec4(coords, 0.0, 1.0);\n}\n`;\n"],"mappings":"AAAA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/dist/esm/components/ChromaKey/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/ChromaKey/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/ChromaKey/types.ts"],"sourcesContent":["export type FrameCallback = Parameters<\n  HTMLVideoElement['requestVideoFrameCallback']\n>[0];\n\nexport type FrameCallbackMetadata = Parameters<FrameCallback>[1];\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/LegendsPlatform/LegendsPlatform.js

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { Provider, createStore } from 'jotai';
+import { LiveKitRoom } from '@livekit/components-react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { Provider as BusProvider } from 'react-bus';
+import { FetchPersonaChatService } from '../../services/FetchPersonaChatService';
+import { SdkConsumerContext } from '../../sdk-consumer';
+export function LegendsPlatform(props) {
+  const chatId = props.chatId,
+    namespace = props.namespace,
+    children = props.children,
+    className = props.className,
+    _props$tools = props.tools,
+    tools = _props$tools === void 0 ? {} : _props$tools,
+    apiKey = props.apiKey,
+    personaChatService = props.personaChatService;
+  const store = useMemo(() => props.store || createStore(), [props.store]);
+  const queryClient = useMemo(() => props.queryClient || new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnMount: false,
+        refetchOnWindowFocus: false
+      }
+    }
+  }), [props.queryClient]);
+  const resolvedService = useMemo(() => {
+    if (personaChatService) {
+      return personaChatService;
+    }
+    if (apiKey) {
+      return new FetchPersonaChatService(apiKey);
+    }
+    return undefined;
+  }, [personaChatService, apiKey]);
+  const consumer = useMemo(() => ({
+    chatId,
+    namespace,
+    tools,
+    personaChatService: resolvedService
+  }), [chatId, namespace, tools, resolvedService]);
+  return /*#__PURE__*/React.createElement(SdkConsumerContext.Provider, {
+    value: consumer
+  }, /*#__PURE__*/React.createElement(QueryClientProvider, {
+    client: queryClient
+  }, /*#__PURE__*/React.createElement(Provider, {
+    store: store
+  }, /*#__PURE__*/React.createElement(BusProvider, null, /*#__PURE__*/React.createElement(LiveKitRoom, {
+    className: className,
+    serverUrl: undefined,
+    token: undefined
+  }, children)))));
+}
+//# sourceMappingURL=LegendsPlatform.js.map

package/dist/esm/components/LegendsPlatform/LegendsPlatform.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Provider","createStore","LiveKitRoom","QueryClientProvider","QueryClient","BusProvider","FetchPersonaChatService","SdkConsumerContext","LegendsPlatform","props","chatId","namespace","children","className","_props$tools","tools","apiKey","personaChatService","store","queryClient","defaultOptions","queries","refetchOnMount","refetchOnWindowFocus","resolvedService","undefined","consumer","createElement","value","client","serverUrl","token"],"sources":["../../../../src/components/LegendsPlatform/LegendsPlatform.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Provider, createStore } from 'jotai';\nimport { type Store } from 'jotai/vanilla/store';\nimport { LiveKitRoom } from '@livekit/components-react';\nimport { QueryClientProvider, QueryClient } from '@tanstack/react-query';\nimport { Provider as BusProvider } from 'react-bus';\n\nimport type { ToolsRegistry } from '../../hooks/useTools/model/types';\nimport type { IPersonaChatService } from '../../types/service';\nimport { FetchPersonaChatService } from '../../services/FetchPersonaChatService';\nimport { SdkConsumerContext } from '../../sdk-consumer';\n\nexport type LegendsPlatformProps = {\n  chatId: string;\n  namespace: string;\n  apiKey?: string;\n  personaChatService?: IPersonaChatService;\n  store?: Store;\n  tools?: ToolsRegistry;\n  children: React.ReactNode;\n  queryClient?: QueryClient;\n  className?: string;\n};\n\nexport function LegendsPlatform(props: LegendsPlatformProps) {\n  const {\n    chatId,\n    namespace,\n    children,\n    className,\n    tools = {},\n    apiKey,\n    personaChatService,\n  } = props;\n\n  const store = useMemo(() => props.store || createStore(), [props.store]);\n\n  const queryClient = useMemo(\n    () =>\n      props.queryClient ||\n      new QueryClient({\n        defaultOptions: {\n          queries: { refetchOnMount: false, refetchOnWindowFocus: false },\n        },\n      }),\n    [props.queryClient],\n  );\n\n  const resolvedService = useMemo<IPersonaChatService | undefined>(() => {\n    if (personaChatService) {\n      return personaChatService;\n    }\n    if (apiKey) {\n      return new FetchPersonaChatService(apiKey);\n    }\n    return undefined;\n  }, [personaChatService, apiKey]);\n\n  const consumer = useMemo(\n    () => ({ chatId, namespace, tools, personaChatService: resolvedService }),\n    [chatId, namespace, tools, resolvedService],\n  );\n\n  return (\n    <SdkConsumerContext.Provider value={consumer}>\n      <QueryClientProvider client={queryClient}>\n        <Provider store={store}>\n          <BusProvider>\n            <LiveKitRoom\n              className={className}\n              serverUrl={undefined}\n              token={undefined}\n            >\n              {children}\n            </LiveKitRoom>\n          </BusProvider>\n        </Provider>\n      </QueryClientProvider>\n    </SdkConsumerContext.Provider>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAE7C,SAASC,WAAW,QAAQ,2BAA2B;AACvD,SAASC,mBAAmB,EAAEC,WAAW,QAAQ,uBAAuB;AACxE,SAASJ,QAAQ,IAAIK,WAAW,QAAQ,WAAW;AAInD,SAASC,uBAAuB,QAAQ,wCAAwC;AAChF,SAASC,kBAAkB,QAAQ,oBAAoB;AAcvD,OAAO,SAASC,eAAeA,CAACC,KAA2B,EAAE;EAC3D,MACEC,MAAM,GAOJD,KAAK,CAPPC,MAAM;IACNC,SAAS,GAMPF,KAAK,CANPE,SAAS;IACTC,QAAQ,GAKNH,KAAK,CALPG,QAAQ;IACRC,SAAS,GAIPJ,KAAK,CAJPI,SAAS;IAAAC,YAAA,GAIPL,KAAK,CAHPM,KAAK;IAALA,KAAK,GAAAD,YAAA,cAAG,CAAC,CAAC,GAAAA,YAAA;IACVE,MAAM,GAEJP,KAAK,CAFPO,MAAM;IACNC,kBAAkB,GAChBR,KAAK,CADPQ,kBAAkB;EAGpB,MAAMC,KAAK,GAAGnB,OAAO,CAAC,MAAMU,KAAK,CAACS,KAAK,IAAIjB,WAAW,CAAC,CAAC,EAAE,CAACQ,KAAK,CAACS,KAAK,CAAC,CAAC;EAExE,MAAMC,WAAW,GAAGpB,OAAO,CACzB,MACEU,KAAK,CAACU,WAAW,IACjB,IAAIf,WAAW,CAAC;IACdgB,cAAc,EAAE;MACdC,OAAO,EAAE;QAAEC,cAAc,EAAE,KAAK;QAAEC,oBAAoB,EAAE;MAAM;IAChE;EACF,CAAC,CAAC,EACJ,CAACd,KAAK,CAACU,WAAW,CACpB,CAAC;EAED,MAAMK,eAAe,GAAGzB,OAAO,CAAkC,MAAM;IACrE,IAAIkB,kBAAkB,EAAE;MACtB,OAAOA,kBAAkB;IAC3B;IACA,IAAID,MAAM,EAAE;MACV,OAAO,IAAIV,uBAAuB,CAACU,MAAM,CAAC;IAC5C;IACA,OAAOS,SAAS;EAClB,CAAC,EAAE,CAACR,kBAAkB,EAAED,MAAM,CAAC,CAAC;EAEhC,MAAMU,QAAQ,GAAG3B,OAAO,CACtB,OAAO;IAAEW,MAAM;IAAEC,SAAS;IAAEI,KAAK;IAAEE,kBAAkB,EAAEO;EAAgB,CAAC,CAAC,EACzE,CAACd,MAAM,EAAEC,SAAS,EAAEI,KAAK,EAAES,eAAe,CAC5C,CAAC;EAED,oBACE1B,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB,CAACP,QAAQ;IAAC4B,KAAK,EAAEF;EAAS,gBAC3C5B,KAAA,CAAA6B,aAAA,CAACxB,mBAAmB;IAAC0B,MAAM,EAAEV;EAAY,gBACvCrB,KAAA,CAAA6B,aAAA,CAAC3B,QAAQ;IAACkB,KAAK,EAAEA;EAAM,gBACrBpB,KAAA,CAAA6B,aAAA,CAACtB,WAAW,qBACVP,KAAA,CAAA6B,aAAA,CAACzB,WAAW;IACVW,SAAS,EAAEA,SAAU;IACrBiB,SAAS,EAAEL,SAAU;IACrBM,KAAK,EAAEN;EAAU,GAEhBb,QACU,CACF,CACL,CACS,CACM,CAAC;AAElC","ignoreList":[]}

package/dist/esm/components/LegendsPlatform/index.js

@@ -0,0 +1,2 @@
+export * from './LegendsPlatform';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/LegendsPlatform/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/LegendsPlatform/index.ts"],"sourcesContent":["export * from './LegendsPlatform';\n"],"mappings":"AAAA,cAAc,mBAAmB","ignoreList":[]}

package/dist/esm/components/LegendsPlatformQLess/LegendsPlatform.js

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import { Provider, createStore } from 'jotai';
+import { LiveKitRoom, RoomAudioRenderer } from '@livekit/components-react';
+import { Provider as BusProvider } from 'react-bus';
+import { SdkConsumerContext } from '../../sdk-consumer';
+/**
+ * @deprecated temporary solution, use LegendsPlatform instead
+ */
+export function LegendsPlatformQLess(props) {
+  const chatId = props.chatId,
+    namespace = props.namespace,
+    children = props.children,
+    _props$tools = props.tools,
+    tools = _props$tools === void 0 ? {} : _props$tools;
+  const store = useMemo(() => props.store || createStore(), [props.store]);
+  const consumer = useMemo(() => ({
+    chatId,
+    namespace,
+    tools
+  }), [chatId, namespace, tools]);
+  return /*#__PURE__*/React.createElement(SdkConsumerContext.Provider, {
+    value: consumer
+  }, /*#__PURE__*/React.createElement(Provider, {
+    store: store
+  }, /*#__PURE__*/React.createElement(BusProvider, null, /*#__PURE__*/React.createElement(LiveKitRoom, {
+    serverUrl: undefined,
+    token: undefined
+  }, /*#__PURE__*/React.createElement(RoomAudioRenderer, null), children))));
+}
+//# sourceMappingURL=LegendsPlatform.js.map

package/dist/esm/components/LegendsPlatformQLess/LegendsPlatform.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Provider","createStore","LiveKitRoom","RoomAudioRenderer","BusProvider","SdkConsumerContext","LegendsPlatformQLess","props","chatId","namespace","children","_props$tools","tools","store","consumer","createElement","value","serverUrl","undefined","token"],"sources":["../../../../src/components/LegendsPlatformQLess/LegendsPlatform.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Provider, createStore } from 'jotai';\nimport { type Store } from 'jotai/vanilla/store';\nimport { LiveKitRoom, RoomAudioRenderer } from '@livekit/components-react';\nimport { Provider as BusProvider } from 'react-bus';\n\nimport type { ToolsRegistry } from '../../hooks/useTools/model/types';\nimport { SdkConsumerContext, ISdkConsumerContext } from '../../sdk-consumer';\n\ntype LegendsPlatformProps = ISdkConsumerContext & {\n  store?: Store;\n  tools?: ToolsRegistry;\n  children: React.ReactNode;\n};\n\n/**\n * @deprecated temporary solution, use LegendsPlatform instead\n */\nexport function LegendsPlatformQLess(props: LegendsPlatformProps) {\n  const { chatId, namespace, children, tools = {} } = props;\n\n  const store = useMemo(() => props.store || createStore(), [props.store]);\n\n  const consumer = useMemo(\n    () => ({ chatId, namespace, tools }),\n    [chatId, namespace, tools],\n  );\n\n  return (\n    <SdkConsumerContext.Provider value={consumer}>\n      <Provider store={store}>\n        <BusProvider>\n          <LiveKitRoom serverUrl={undefined} token={undefined}>\n            <RoomAudioRenderer />\n            {children}\n          </LiveKitRoom>\n        </BusProvider>\n      </Provider>\n    </SdkConsumerContext.Provider>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAE7C,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,2BAA2B;AAC1E,SAASH,QAAQ,IAAII,WAAW,QAAQ,WAAW;AAGnD,SAASC,kBAAkB,QAA6B,oBAAoB;AAQ5E;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAACC,KAA2B,EAAE;EAChE,MAAQC,MAAM,GAAsCD,KAAK,CAAjDC,MAAM;IAAEC,SAAS,GAA2BF,KAAK,CAAzCE,SAAS;IAAEC,QAAQ,GAAiBH,KAAK,CAA9BG,QAAQ;IAAAC,YAAA,GAAiBJ,KAAK,CAApBK,KAAK;IAALA,KAAK,GAAAD,YAAA,cAAG,CAAC,CAAC,GAAAA,YAAA;EAE/C,MAAME,KAAK,GAAGd,OAAO,CAAC,MAAMQ,KAAK,CAACM,KAAK,IAAIZ,WAAW,CAAC,CAAC,EAAE,CAACM,KAAK,CAACM,KAAK,CAAC,CAAC;EAExE,MAAMC,QAAQ,GAAGf,OAAO,CACtB,OAAO;IAAES,MAAM;IAAEC,SAAS;IAAEG;EAAM,CAAC,CAAC,EACpC,CAACJ,MAAM,EAAEC,SAAS,EAAEG,KAAK,CAC3B,CAAC;EAED,oBACEd,KAAA,CAAAiB,aAAA,CAACV,kBAAkB,CAACL,QAAQ;IAACgB,KAAK,EAAEF;EAAS,gBAC3ChB,KAAA,CAAAiB,aAAA,CAACf,QAAQ;IAACa,KAAK,EAAEA;EAAM,gBACrBf,KAAA,CAAAiB,aAAA,CAACX,WAAW,qBACVN,KAAA,CAAAiB,aAAA,CAACb,WAAW;IAACe,SAAS,EAAEC,SAAU;IAACC,KAAK,EAAED;EAAU,gBAClDpB,KAAA,CAAAiB,aAAA,CAACZ,iBAAiB,MAAE,CAAC,EACpBO,QACU,CACF,CACL,CACiB,CAAC;AAElC","ignoreList":[]}

package/dist/esm/components/LegendsPlatformQLess/index.js

@@ -0,0 +1,2 @@
+export * from './LegendsPlatform';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/LegendsPlatformQLess/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/LegendsPlatformQLess/index.ts"],"sourcesContent":["export * from './LegendsPlatform';\n"],"mappings":"AAAA,cAAc,mBAAmB","ignoreList":[]}

package/dist/esm/components/Video/Video.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+const _excluded = ["type", "fallback", "fit", "automirror", "pip", "onPiPEnter", "onPiPExit", "onPiPError", "pipFallback", "style"];
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import invariant from 'invariant';
+import { useAtomValue } from 'jotai';
+import { state } from '../../conversation';
+import { useAttachVideo } from './useAttachVideo';
+import { useEmitConversationEvent } from '../../hooks/useConversationEvents/useEmitConversationEvent';
+import { usePictureInPictureAuto, pipActiveAtom } from '../../hooks/usePictureInPicture';
+export const Video = /*#__PURE__*/forwardRef((props, ref) => {
+  const type = props.type,
+    _props$fallback = props.fallback,
+    Fallback = _props$fallback === void 0 ? () => null : _props$fallback,
+    _props$fit = props.fit,
+    fit = _props$fit === void 0 ? 'cover' : _props$fit,
+    _props$automirror = props.automirror,
+    automirror = _props$automirror === void 0 ? true : _props$automirror,
+    _props$pip = props.pip,
+    pip = _props$pip === void 0 ? false : _props$pip,
+    onPiPEnter = props.onPiPEnter,
+    onPiPExit = props.onPiPExit,
+    onPiPError = props.onPiPError,
+    pipFallback = props.pipFallback,
+    style = props.style,
+    videoProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const _useState = useState(props.mirror),
+    mirror = _useState[0],
+    setMirror = _useState[1];
+  const conversation = useAtomValue(state.conversation);
+  const emitEvent = useEmitConversationEvent();
+  invariant(conversation, 'Conversation is not initialized');
+  invariant(type === 'screen' ? true : conversation.type === 'video', 'Conversation type is not video');
+  const _useAttachVideo = useAttachVideo({
+      type
+    }),
+    videoRef = _useAttachVideo.videoRef,
+    isVideoPlayable = _useAttachVideo.isVideoPlayable;
+  usePictureInPictureAuto({
+    element: pip && isVideoPlayable ? videoRef.current : null,
+    onEnter: onPiPEnter,
+    onExit: onPiPExit,
+    onError: onPiPError
+  });
+  const isPiPActive = useAtomValue(pipActiveAtom);
+  useImperativeHandle(ref, () => videoRef.current);
+  const showPipFallback = pip && isPiPActive;
+  useEffect(() => {
+    setMirror(props.mirror ?? (automirror && type === 'user'));
+  }, [automirror, type, props.mirror]);
+  useEffect(() => {
+    if (isVideoPlayable && type === 'agent') {
+      emitEvent('agentVideoLoaded', {
+        videoRef
+      });
+    }
+  }, [isVideoPlayable, type]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("video", _extends({
+    ref: videoRef,
+    muted: true,
+    playsInline: true,
+    autoPlay: true,
+    style: {
+      objectFit: fit,
+      display: isVideoPlayable && !showPipFallback ? 'block' : 'none',
+      transform: mirror ? 'scaleX(-1)' : 'none',
+      ...style
+    }
+  }, videoProps)), !isVideoPlayable && /*#__PURE__*/React.createElement(Fallback, {
+    style: style
+  }), showPipFallback && pipFallback);
+});
+//# sourceMappingURL=Video.js.map

package/dist/esm/components/Video/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useEffect","useImperativeHandle","useState","invariant","useAtomValue","state","useAttachVideo","useEmitConversationEvent","usePictureInPictureAuto","pipActiveAtom","Video","props","ref","type","_props$fallback","fallback","Fallback","_props$fit","fit","_props$automirror","automirror","_props$pip","pip","onPiPEnter","onPiPExit","onPiPError","pipFallback","style","videoProps","_objectWithoutPropertiesLoose","_excluded","_useState","mirror","setMirror","conversation","emitEvent","_useAttachVideo","videoRef","isVideoPlayable","element","current","onEnter","onExit","onError","isPiPActive","showPipFallback","createElement","Fragment","_extends","muted","playsInline","autoPlay","objectFit","display","transform"],"sources":["../../../../src/components/Video/Video.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useState,\n} from 'react';\nimport invariant from 'invariant';\nimport { useAtomValue } from 'jotai';\nimport { state } from '../../conversation';\nimport { useAttachVideo } from './useAttachVideo';\nimport { useEmitConversationEvent } from '../../hooks/useConversationEvents/useEmitConversationEvent';\nimport {\n  usePictureInPictureAuto,\n  pipActiveAtom,\n} from '../../hooks/usePictureInPicture';\nimport { type VideoProps } from './types';\n\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n  const {\n    type,\n    fallback: Fallback = () => null,\n    fit = 'cover',\n    automirror = true,\n    pip = false,\n    onPiPEnter,\n    onPiPExit,\n    onPiPError,\n    pipFallback,\n    style,\n    ...videoProps\n  } = props;\n\n  const [mirror, setMirror] = useState(props.mirror);\n\n  const conversation = useAtomValue(state.conversation);\n  const emitEvent = useEmitConversationEvent();\n\n  invariant(conversation, 'Conversation is not initialized');\n  invariant(\n    type === 'screen' ? true : conversation.type === 'video',\n    'Conversation type is not video',\n  );\n\n  const { videoRef, isVideoPlayable } = useAttachVideo({ type });\n\n  usePictureInPictureAuto({\n    element: pip && isVideoPlayable ? videoRef.current : null,\n    onEnter: onPiPEnter,\n    onExit: onPiPExit,\n    onError: onPiPError,\n  });\n\n  const isPiPActive = useAtomValue(pipActiveAtom);\n\n  useImperativeHandle(ref, () => videoRef.current!);\n\n  const showPipFallback = pip && isPiPActive;\n\n  useEffect(() => {\n    setMirror(props.mirror ?? (automirror && type === 'user'));\n  }, [automirror, type, props.mirror]);\n\n  useEffect(() => {\n    if (isVideoPlayable && type === 'agent') {\n      emitEvent('agentVideoLoaded', {\n        videoRef,\n      });\n    }\n  }, [isVideoPlayable, type]);\n\n  return (\n    <>\n      <video\n        ref={videoRef}\n        muted\n        playsInline\n        autoPlay\n        style={{\n          objectFit: fit,\n          display: isVideoPlayable && !showPipFallback ? 'block' : 'none',\n          transform: mirror ? 'scaleX(-1)' : 'none',\n          ...style,\n        }}\n        {...videoProps}\n      />\n      {!isVideoPlayable && <Fallback style={style} />}\n      {showPipFallback && pipFallback}\n    </>\n  );\n});\n"],"mappings":";;;AAAA,OAAOA,KAAK,IACVC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,QAAQ,QACH,OAAO;AACd,OAAOC,SAAS,MAAM,WAAW;AACjC,SAASC,YAAY,QAAQ,OAAO;AACpC,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,wBAAwB,QAAQ,4DAA4D;AACrG,SACEC,uBAAuB,EACvBC,aAAa,QACR,iCAAiC;AAGxC,OAAO,MAAMC,KAAK,gBAAGX,UAAU,CAA+B,CAACY,KAAK,EAAEC,GAAG,KAAK;EAC5E,MACEC,IAAI,GAWFF,KAAK,CAXPE,IAAI;IAAAC,eAAA,GAWFH,KAAK,CAVPI,QAAQ;IAAEC,QAAQ,GAAAF,eAAA,cAAG,MAAM,IAAI,GAAAA,eAAA;IAAAG,UAAA,GAU7BN,KAAK,CATPO,GAAG;IAAHA,GAAG,GAAAD,UAAA,cAAG,OAAO,GAAAA,UAAA;IAAAE,iBAAA,GASXR,KAAK,CARPS,UAAU;IAAVA,UAAU,GAAAD,iBAAA,cAAG,IAAI,GAAAA,iBAAA;IAAAE,UAAA,GAQfV,KAAK,CAPPW,GAAG;IAAHA,GAAG,GAAAD,UAAA,cAAG,KAAK,GAAAA,UAAA;IACXE,UAAU,GAMRZ,KAAK,CANPY,UAAU;IACVC,SAAS,GAKPb,KAAK,CALPa,SAAS;IACTC,UAAU,GAIRd,KAAK,CAJPc,UAAU;IACVC,WAAW,GAGTf,KAAK,CAHPe,WAAW;IACXC,KAAK,GAEHhB,KAAK,CAFPgB,KAAK;IACFC,UAAU,GAAAC,6BAAA,CACXlB,KAAK,EAAAmB,SAAA;EAET,MAAAC,SAAA,GAA4B7B,QAAQ,CAACS,KAAK,CAACqB,MAAM,CAAC;IAA3CA,MAAM,GAAAD,SAAA;IAAEE,SAAS,GAAAF,SAAA;EAExB,MAAMG,YAAY,GAAG9B,YAAY,CAACC,KAAK,CAAC6B,YAAY,CAAC;EACrD,MAAMC,SAAS,GAAG5B,wBAAwB,CAAC,CAAC;EAE5CJ,SAAS,CAAC+B,YAAY,EAAE,iCAAiC,CAAC;EAC1D/B,SAAS,CACPU,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAGqB,YAAY,CAACrB,IAAI,KAAK,OAAO,EACxD,gCACF,CAAC;EAED,MAAAuB,eAAA,GAAsC9B,cAAc,CAAC;MAAEO;IAAK,CAAC,CAAC;IAAtDwB,QAAQ,GAAAD,eAAA,CAARC,QAAQ;IAAEC,eAAe,GAAAF,eAAA,CAAfE,eAAe;EAEjC9B,uBAAuB,CAAC;IACtB+B,OAAO,EAAEjB,GAAG,IAAIgB,eAAe,GAAGD,QAAQ,CAACG,OAAO,GAAG,IAAI;IACzDC,OAAO,EAAElB,UAAU;IACnBmB,MAAM,EAAElB,SAAS;IACjBmB,OAAO,EAAElB;EACX,CAAC,CAAC;EAEF,MAAMmB,WAAW,GAAGxC,YAAY,CAACK,aAAa,CAAC;EAE/CR,mBAAmB,CAACW,GAAG,EAAE,MAAMyB,QAAQ,CAACG,OAAQ,CAAC;EAEjD,MAAMK,eAAe,GAAGvB,GAAG,IAAIsB,WAAW;EAE1C5C,SAAS,CAAC,MAAM;IACdiC,SAAS,CAACtB,KAAK,CAACqB,MAAM,KAAKZ,UAAU,IAAIP,IAAI,KAAK,MAAM,CAAC,CAAC;EAC5D,CAAC,EAAE,CAACO,UAAU,EAAEP,IAAI,EAAEF,KAAK,CAACqB,MAAM,CAAC,CAAC;EAEpChC,SAAS,CAAC,MAAM;IACd,IAAIsC,eAAe,IAAIzB,IAAI,KAAK,OAAO,EAAE;MACvCsB,SAAS,CAAC,kBAAkB,EAAE;QAC5BE;MACF,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACC,eAAe,EAAEzB,IAAI,CAAC,CAAC;EAE3B,oBACEf,KAAA,CAAAgD,aAAA,CAAAhD,KAAA,CAAAiD,QAAA,qBACEjD,KAAA,CAAAgD,aAAA,UAAAE,QAAA;IACEpC,GAAG,EAAEyB,QAAS;IACdY,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRxB,KAAK,EAAE;MACLyB,SAAS,EAAElC,GAAG;MACdmC,OAAO,EAAEf,eAAe,IAAI,CAACO,eAAe,GAAG,OAAO,GAAG,MAAM;MAC/DS,SAAS,EAAEtB,MAAM,GAAG,YAAY,GAAG,MAAM;MACzC,GAAGL;IACL;EAAE,GACEC,UAAU,CACf,CAAC,EACD,CAACU,eAAe,iBAAIxC,KAAA,CAAAgD,aAAA,CAAC9B,QAAQ;IAACW,KAAK,EAAEA;EAAM,CAAE,CAAC,EAC9CkB,eAAe,IAAInB,WACpB,CAAC;AAEP,CAAC,CAAC","ignoreList":[]}

package/dist/esm/components/Video/index.js

@@ -0,0 +1,3 @@
+export * from './Video';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/Video/index.ts"],"sourcesContent":["export * from './Video';\nexport * from './types';\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,SAAS","ignoreList":[]}

package/dist/esm/components/Video/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/Video/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/Video/types.ts"],"sourcesContent":["import React from 'react';\n\nexport type FallbackProps = {\n  style?: React.CSSProperties;\n};\n\nexport type VideoProps = {\n  mirror?: boolean;\n  automirror?: boolean;\n  type: 'user' | 'agent' | 'screen';\n  fit?: 'contain' | 'cover';\n  fallback?: React.ComponentType<FallbackProps>;\n  /** Enable Picture-in-Picture mode */\n  pip?: boolean;\n  /** Callback when entering PiP */\n  onPiPEnter?: () => void;\n  /** Callback when exiting PiP */\n  onPiPExit?: () => void;\n  /** Callback when PiP error occurs */\n  onPiPError?: (error: Error) => void;\n  /** Content to render when PiP is active */\n  pipFallback?: React.ReactNode;\n} & Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'onResize'>;\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/Video/useAttachVideo.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { useParticipantTrack, Source } from '../../hooks/useParticipantTrack';
+export function useAttachVideo(_ref) {
+  let type = _ref.type;
+  const ref = useRef(null);
+  const _useParticipantTrack = useParticipantTrack({
+      type,
+      source: type === 'screen' ? Source.ScreenShare : Source.Camera
+    }),
+    track = _useParticipantTrack.track,
+    isMuted = _useParticipantTrack.isMuted;
+  useEffect(() => {
+    const videoElement = ref.current;
+    if (!videoElement || !track) {
+      return;
+    }
+    track.attach(videoElement);
+    return () => {
+      track.detach(videoElement);
+    };
+  }, [track]);
+  return {
+    isVideoPlayable: track && !isMuted,
+    videoRef: ref
+  };
+}
+//# sourceMappingURL=useAttachVideo.js.map

package/dist/esm/components/Video/useAttachVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useParticipantTrack","Source","useAttachVideo","_ref","type","ref","_useParticipantTrack","source","ScreenShare","Camera","track","isMuted","videoElement","current","attach","detach","isVideoPlayable","videoRef"],"sources":["../../../../src/components/Video/useAttachVideo.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useParticipantTrack, Source } from '../../hooks/useParticipantTrack';\n\ntype UseAttachVideoProps = {\n  type: 'user' | 'agent' | 'screen';\n};\n\nexport function useAttachVideo({ type }: UseAttachVideoProps) {\n  const ref = useRef<HTMLVideoElement>(null);\n\n  const { track, isMuted } = useParticipantTrack({\n    type,\n    source: type === 'screen' ? Source.ScreenShare : Source.Camera,\n  });\n\n  useEffect(() => {\n    const videoElement = ref.current;\n\n    if (!videoElement || !track) {\n      return;\n    }\n\n    track.attach(videoElement);\n\n    return () => {\n      track.detach(videoElement);\n    };\n  }, [track]);\n\n  return {\n    isVideoPlayable: track && !isMuted,\n    videoRef: ref,\n  };\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,SAASC,mBAAmB,EAAEC,MAAM,QAAQ,iCAAiC;AAM7E,OAAO,SAASC,cAAcA,CAAAC,IAAA,EAAgC;EAAA,IAA7BC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EACnC,MAAMC,GAAG,GAAGN,MAAM,CAAmB,IAAI,CAAC;EAE1C,MAAAO,oBAAA,GAA2BN,mBAAmB,CAAC;MAC7CI,IAAI;MACJG,MAAM,EAAEH,IAAI,KAAK,QAAQ,GAAGH,MAAM,CAACO,WAAW,GAAGP,MAAM,CAACQ;IAC1D,CAAC,CAAC;IAHMC,KAAK,GAAAJ,oBAAA,CAALI,KAAK;IAAEC,OAAO,GAAAL,oBAAA,CAAPK,OAAO;EAKtBb,SAAS,CAAC,MAAM;IACd,MAAMc,YAAY,GAAGP,GAAG,CAACQ,OAAO;IAEhC,IAAI,CAACD,YAAY,IAAI,CAACF,KAAK,EAAE;MAC3B;IACF;IAEAA,KAAK,CAACI,MAAM,CAACF,YAAY,CAAC;IAE1B,OAAO,MAAM;MACXF,KAAK,CAACK,MAAM,CAACH,YAAY,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,OAAO;IACLM,eAAe,EAAEN,KAAK,IAAI,CAACC,OAAO;IAClCM,QAAQ,EAAEZ;EACZ,CAAC;AACH","ignoreList":[]}

package/dist/esm/components/VideoPostProcessor/VideoPostProcessor.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import { transparentBackground, render } from './effects';
+import invariant from 'invariant';
+export function VideoPostProcessor(_ref) {
+  let effects = _ref.effects,
+    children = _ref.children;
+  const $video = useRef(null);
+  const $canvas = useRef(null);
+  useEffect(() => {
+    let id = requestAnimationFrame(init);
+    return () => {
+      cancelAnimationFrame(id);
+    };
+    function init() {
+      if (!$video.current || !$canvas.current || !$video.current.videoWidth || !$video.current.videoHeight) {
+        id = requestAnimationFrame(init);
+        return;
+      }
+      id = requestAnimationFrame(process);
+    }
+    function process() {
+      invariant($video.current, 'Video is not initialized');
+      invariant($canvas.current, 'Canvas is not initialized');
+      render($video.current, $canvas.current);
+      for (const effect of effects) {
+        switch (effect) {
+          case 'transparent-background':
+            transparentBackground($canvas.current);
+            break;
+        }
+      }
+      id = requestAnimationFrame(process);
+    }
+  }, [effects.join(',')]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
+    ref: $canvas,
+    style: children.props.style,
+    className: children.props.className
+  }), /*#__PURE__*/React.cloneElement(children, {
+    ...children.props,
+    ref: $video,
+    style: {
+      display: 'none'
+    }
+  }));
+}
+//# sourceMappingURL=VideoPostProcessor.js.map

package/dist/esm/components/VideoPostProcessor/VideoPostProcessor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","transparentBackground","render","invariant","VideoPostProcessor","_ref","effects","children","$video","$canvas","id","requestAnimationFrame","init","cancelAnimationFrame","current","videoWidth","videoHeight","process","effect","join","createElement","Fragment","ref","style","props","className","cloneElement","display"],"sources":["../../../../src/components/VideoPostProcessor/VideoPostProcessor.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { transparentBackground, render } from './effects';\nimport invariant from 'invariant';\n\ntype VideoPostProcessorEffect = 'transparent-background';\n\ninterface VideoPostProcessorProps {\n  effects: VideoPostProcessorEffect[];\n\n  children: React.ReactElement<\n    React.VideoHTMLAttributes<HTMLVideoElement> & {\n      ref: React.RefObject<HTMLVideoElement>;\n    }\n  >;\n}\n\nexport function VideoPostProcessor({\n  effects,\n  children,\n}: VideoPostProcessorProps) {\n  const $video = useRef<HTMLVideoElement>(null);\n  const $canvas = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    let id = requestAnimationFrame(init);\n\n    return () => {\n      cancelAnimationFrame(id);\n    };\n\n    function init() {\n      if (\n        !$video.current ||\n        !$canvas.current ||\n        !$video.current.videoWidth ||\n        !$video.current.videoHeight\n      ) {\n        id = requestAnimationFrame(init);\n        return;\n      }\n\n      id = requestAnimationFrame(process);\n    }\n\n    function process() {\n      invariant($video.current, 'Video is not initialized');\n      invariant($canvas.current, 'Canvas is not initialized');\n\n      render($video.current, $canvas.current);\n\n      for (const effect of effects) {\n        switch (effect) {\n          case 'transparent-background':\n            transparentBackground($canvas.current);\n            break;\n        }\n      }\n\n      id = requestAnimationFrame(process);\n    }\n  }, [effects.join(',')]);\n\n  return (\n    <>\n      <canvas\n        ref={$canvas}\n        style={children.props.style}\n        className={children.props.className}\n      />\n\n      {React.cloneElement(children, {\n        ...children.props,\n        ref: $video,\n        style: { display: 'none' },\n      })}\n    </>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,qBAAqB,EAAEC,MAAM,QAAQ,WAAW;AACzD,OAAOC,SAAS,MAAM,WAAW;AAcjC,OAAO,SAASC,kBAAkBA,CAAAC,IAAA,EAGN;EAAA,IAF1BC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAER,MAAMC,MAAM,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAC7C,MAAMS,OAAO,GAAGT,MAAM,CAAoB,IAAI,CAAC;EAE/CD,SAAS,CAAC,MAAM;IACd,IAAIW,EAAE,GAAGC,qBAAqB,CAACC,IAAI,CAAC;IAEpC,OAAO,MAAM;MACXC,oBAAoB,CAACH,EAAE,CAAC;IAC1B,CAAC;IAED,SAASE,IAAIA,CAAA,EAAG;MACd,IACE,CAACJ,MAAM,CAACM,OAAO,IACf,CAACL,OAAO,CAACK,OAAO,IAChB,CAACN,MAAM,CAACM,OAAO,CAACC,UAAU,IAC1B,CAACP,MAAM,CAACM,OAAO,CAACE,WAAW,EAC3B;QACAN,EAAE,GAAGC,qBAAqB,CAACC,IAAI,CAAC;QAChC;MACF;MAEAF,EAAE,GAAGC,qBAAqB,CAACM,OAAO,CAAC;IACrC;IAEA,SAASA,OAAOA,CAAA,EAAG;MACjBd,SAAS,CAACK,MAAM,CAACM,OAAO,EAAE,0BAA0B,CAAC;MACrDX,SAAS,CAACM,OAAO,CAACK,OAAO,EAAE,2BAA2B,CAAC;MAEvDZ,MAAM,CAACM,MAAM,CAACM,OAAO,EAAEL,OAAO,CAACK,OAAO,CAAC;MAEvC,KAAK,MAAMI,MAAM,IAAIZ,OAAO,EAAE;QAC5B,QAAQY,MAAM;UACZ,KAAK,wBAAwB;YAC3BjB,qBAAqB,CAACQ,OAAO,CAACK,OAAO,CAAC;YACtC;QACJ;MACF;MAEAJ,EAAE,GAAGC,qBAAqB,CAACM,OAAO,CAAC;IACrC;EACF,CAAC,EAAE,CAACX,OAAO,CAACa,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;EAEvB,oBACErB,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,qBACEvB,KAAA,CAAAsB,aAAA;IACEE,GAAG,EAAEb,OAAQ;IACbc,KAAK,EAAEhB,QAAQ,CAACiB,KAAK,CAACD,KAAM;IAC5BE,SAAS,EAAElB,QAAQ,CAACiB,KAAK,CAACC;EAAU,CACrC,CAAC,eAED3B,KAAK,CAAC4B,YAAY,CAACnB,QAAQ,EAAE;IAC5B,GAAGA,QAAQ,CAACiB,KAAK;IACjBF,GAAG,EAAEd,MAAM;IACXe,KAAK,EAAE;MAAEI,OAAO,EAAE;IAAO;EAC3B,CAAC,CACD,CAAC;AAEP","ignoreList":[]}

package/dist/esm/components/VideoPostProcessor/effects.js

@@ -0,0 +1,25 @@
+export function transparentBackground(canvas) {
+  const context = canvas.getContext('2d');
+  const frame = context.getImageData(0, 0, canvas.width, canvas.height);
+  for (let i = 0; i < frame.data.length; i += 4) {
+    const R = frame.data[i];
+    const G = frame.data[i + 1];
+    const B = frame.data[i + 2];
+    if (isGreen(R, G, B)) {
+      frame.data[i + 3] = 0;
+    }
+  }
+  context.putImageData(frame, 0, 0);
+}
+export function render(source, canvas) {
+  const context = canvas.getContext('2d');
+  canvas.width = source.videoWidth;
+  canvas.height = source.videoHeight;
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = 'high';
+  context.drawImage(source, 0, 0, canvas.width, canvas.height);
+}
+function isGreen(R, G, B) {
+  return B < 0.8 * G && R < 0.64 * G;
+}
+//# sourceMappingURL=effects.js.map

package/dist/esm/components/VideoPostProcessor/effects.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["transparentBackground","canvas","context","getContext","frame","getImageData","width","height","i","data","length","R","G","B","isGreen","putImageData","render","source","videoWidth","videoHeight","imageSmoothingEnabled","imageSmoothingQuality","drawImage"],"sources":["../../../../src/components/VideoPostProcessor/effects.ts"],"sourcesContent":["export function transparentBackground(canvas: HTMLCanvasElement) {\n  const context = canvas.getContext('2d')!;\n\n  const frame = context.getImageData(0, 0, canvas.width, canvas.height);\n\n  for (let i = 0; i < frame.data.length; i += 4) {\n    const R = frame.data[i];\n    const G = frame.data[i + 1];\n    const B = frame.data[i + 2];\n\n    if (isGreen(R, G, B)) {\n      frame.data[i + 3] = 0;\n    }\n  }\n\n  context.putImageData(frame, 0, 0);\n}\n\nexport function render(source: HTMLVideoElement, canvas: HTMLCanvasElement) {\n  const context = canvas.getContext('2d')!;\n\n  canvas.width = source.videoWidth;\n  canvas.height = source.videoHeight;\n\n  context.imageSmoothingEnabled = true;\n  context.imageSmoothingQuality = 'high';\n\n  context.drawImage(source, 0, 0, canvas.width, canvas.height);\n}\n\nfunction isGreen(R: number, G: number, B: number) {\n  return B < 0.8 * G && R < 0.64 * G;\n}\n"],"mappings":"AAAA,OAAO,SAASA,qBAAqBA,CAACC,MAAyB,EAAE;EAC/D,MAAMC,OAAO,GAAGD,MAAM,CAACE,UAAU,CAAC,IAAI,CAAE;EAExC,MAAMC,KAAK,GAAGF,OAAO,CAACG,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEJ,MAAM,CAACK,KAAK,EAAEL,MAAM,CAACM,MAAM,CAAC;EAErE,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGJ,KAAK,CAACK,IAAI,CAACC,MAAM,EAAEF,CAAC,IAAI,CAAC,EAAE;IAC7C,MAAMG,CAAC,GAAGP,KAAK,CAACK,IAAI,CAACD,CAAC,CAAC;IACvB,MAAMI,CAAC,GAAGR,KAAK,CAACK,IAAI,CAACD,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAMK,CAAC,GAAGT,KAAK,CAACK,IAAI,CAACD,CAAC,GAAG,CAAC,CAAC;IAE3B,IAAIM,OAAO,CAACH,CAAC,EAAEC,CAAC,EAAEC,CAAC,CAAC,EAAE;MACpBT,KAAK,CAACK,IAAI,CAACD,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;IACvB;EACF;EAEAN,OAAO,CAACa,YAAY,CAACX,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;AACnC;AAEA,OAAO,SAASY,MAAMA,CAACC,MAAwB,EAAEhB,MAAyB,EAAE;EAC1E,MAAMC,OAAO,GAAGD,MAAM,CAACE,UAAU,CAAC,IAAI,CAAE;EAExCF,MAAM,CAACK,KAAK,GAAGW,MAAM,CAACC,UAAU;EAChCjB,MAAM,CAACM,MAAM,GAAGU,MAAM,CAACE,WAAW;EAElCjB,OAAO,CAACkB,qBAAqB,GAAG,IAAI;EACpClB,OAAO,CAACmB,qBAAqB,GAAG,MAAM;EAEtCnB,OAAO,CAACoB,SAAS,CAACL,MAAM,EAAE,CAAC,EAAE,CAAC,EAAEhB,MAAM,CAACK,KAAK,EAAEL,MAAM,CAACM,MAAM,CAAC;AAC9D;AAEA,SAASO,OAAOA,CAACH,CAAS,EAAEC,CAAS,EAAEC,CAAS,EAAE;EAChD,OAAOA,CAAC,GAAG,GAAG,GAAGD,CAAC,IAAID,CAAC,GAAG,IAAI,GAAGC,CAAC;AACpC","ignoreList":[]}

package/dist/esm/components/VideoPostProcessor/index.js

@@ -0,0 +1,2 @@
+export * from './VideoPostProcessor';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/VideoPostProcessor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/VideoPostProcessor/index.ts"],"sourcesContent":["export * from './VideoPostProcessor';\n"],"mappings":"AAAA,cAAc,sBAAsB","ignoreList":[]}

package/dist/esm/components/VideoPreview/VideoPreview.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+const _excluded = ["fallback", "style", "constraints", "automirror"];
+import React, { useEffect, useRef } from 'react';
+import { useVideoPreviewStream } from './useVideoPreviewStream';
+import { useCamera } from '../../hooks/useCamera';
+export function VideoPreview(props) {
+  const _props$fallback = props.fallback,
+    Fallback = _props$fallback === void 0 ? () => null : _props$fallback,
+    style = props.style,
+    constraints = props.constraints,
+    _props$automirror = props.automirror,
+    automirror = _props$automirror === void 0 ? true : _props$automirror,
+    videoProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const videoRef = useRef(null);
+  const _useCamera = useCamera(),
+    deviceId = _useCamera.deviceId,
+    enabled = _useCamera.enabled;
+  const _useVideoPreviewStrea = useVideoPreviewStream({
+      deviceId,
+      constraints,
+      enabled
+    }),
+    stream = _useVideoPreviewStrea.stream,
+    status = _useVideoPreviewStrea.status;
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement) {
+      return;
+    }
+    videoElement.srcObject = stream;
+  }, [stream]);
+  const isVideoPlayable = status === 'ready' && stream !== null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("video", _extends({
+    ref: videoRef,
+    muted: true,
+    playsInline: true,
+    autoPlay: true,
+    style: {
+      ...style,
+      display: isVideoPlayable ? 'block' : 'none',
+      transform: automirror ? 'scaleX(-1)' : 'none'
+    }
+  }, videoProps)), !isVideoPlayable && /*#__PURE__*/React.createElement(Fallback, {
+    style: style
+  }));
+}
+//# sourceMappingURL=VideoPreview.js.map