@sippet-ai/operator-widget 0.0.12

package/react/SippetAIVoipWidgetPhoneTab.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  SippetAIVoipWidgetPhoneTab as SippetAIVoipWidgetPhoneTabElement,
+  CustomEvent,
+} from "../dist/components/voip-widget/voip-widget-phone-tab.js";
+
+export type { SippetAIVoipWidgetPhoneTabElement, CustomEvent };
+
+export interface SippetAIVoipWidgetPhoneTabProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  isMuted?: boolean;
+
+  /** undefined */
+  isHeld?: boolean;
+
+  /** undefined */
+  dialNumber?: SippetAIVoipWidgetPhoneTabElement["dialNumber"];
+
+  /** undefined */
+  sipStatus?: SippetAIVoipWidgetPhoneTabElement["sipStatus"];
+
+  /** undefined */
+  callState?: SippetAIVoipWidgetPhoneTabElement["callState"];
+
+  /** undefined */
+  callSeconds?: SippetAIVoipWidgetPhoneTabElement["callSeconds"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<SippetAIVoipWidgetPhoneTabElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** undefined */
+  onName?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `dialNumber`: undefined
+ * - `sipStatus`: undefined
+ * - `callState`: undefined
+ * - `callSeconds`: undefined
+ * - `isMuted`: undefined
+ * - `isHeld`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `name`: undefined
+ */
+export const SippetAIVoipWidgetPhoneTab: React.ForwardRefExoticComponent<SippetAIVoipWidgetPhoneTabProps>;

package/react/SippetAIVoipWidgetPhoneTab.js

@@ -0,0 +1,43 @@
+import React, { forwardRef, useRef } from "react";
+import "../dist/components/voip-widget/voip-widget-phone-tab.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const SippetAIVoipWidgetPhoneTab = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    isMuted,
+    isHeld,
+    dialNumber,
+    sipStatus,
+    callState,
+    callSeconds,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "name", props.onName);
+
+  return React.createElement(
+    "sippetai-voip-widget-phone-tab",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      dialNumber: dialNumber,
+      sipStatus: sipStatus,
+      callState: callState,
+      callSeconds: callSeconds,
+      exportparts: exportparts,
+      for: htmlFor,
+      part: part,
+      tabindex: tabIndex,
+      isMuted: isMuted ? true : undefined,
+      isHeld: isHeld ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/SippetAIVoipWidgetQueueTab.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  SippetAIVoipWidgetQueueTab as SippetAIVoipWidgetQueueTabElement,
+  CustomEvent,
+} from "../dist/components/voip-widget/voip-widget-queue-tab.js";
+
+export type { SippetAIVoipWidgetQueueTabElement, CustomEvent };
+
+export interface SippetAIVoipWidgetQueueTabProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  queuedCalls?: SippetAIVoipWidgetQueueTabElement["queuedCalls"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<SippetAIVoipWidgetQueueTabElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** undefined */
+  onName?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `queuedCalls`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `name`: undefined
+ */
+export const SippetAIVoipWidgetQueueTab: React.ForwardRefExoticComponent<SippetAIVoipWidgetQueueTabProps>;

package/react/SippetAIVoipWidgetQueueTab.js

@@ -0,0 +1,27 @@
+import React, { forwardRef, useRef } from "react";
+import "../dist/components/voip-widget/voip-widget-queue-tab.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const SippetAIVoipWidgetQueueTab = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { queuedCalls, exportparts, htmlFor, part, tabIndex, ...restProps } =
+    props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "name", props.onName);
+
+  return React.createElement(
+    "sippetai-voip-widget-queue-tab",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      queuedCalls: queuedCalls,
+      exportparts: exportparts,
+      for: htmlFor,
+      part: part,
+      tabindex: tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/SippetAIVoipWidgetSettingsTab.d.ts

@@ -0,0 +1,91 @@
+import React from "react";
+import {
+  SippetAIVoipWidgetSettingsTab as SippetAIVoipWidgetSettingsTabElement,
+  CustomEvent,
+} from "../dist/components/voip-widget/voip-widget-settings-tab.js";
+
+export type { SippetAIVoipWidgetSettingsTabElement, CustomEvent };
+
+export interface SippetAIVoipWidgetSettingsTabProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  hasMediaPermission?: boolean;
+
+  /** undefined */
+  userEmail?: SippetAIVoipWidgetSettingsTabElement["userEmail"];
+
+  /** undefined */
+  audioInputs?: SippetAIVoipWidgetSettingsTabElement["audioInputs"];
+
+  /** undefined */
+  audioOutputs?: SippetAIVoipWidgetSettingsTabElement["audioOutputs"];
+
+  /** undefined */
+  selectedMicId?: SippetAIVoipWidgetSettingsTabElement["selectedMicId"];
+
+  /** undefined */
+  selectedSpeakerId?: SippetAIVoipWidgetSettingsTabElement["selectedSpeakerId"];
+
+  /** undefined */
+  sipStatus?: SippetAIVoipWidgetSettingsTabElement["sipStatus"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<SippetAIVoipWidgetSettingsTabElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** undefined */
+  onName?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `userEmail`: undefined
+ * - `audioInputs`: undefined
+ * - `audioOutputs`: undefined
+ * - `selectedMicId`: undefined
+ * - `selectedSpeakerId`: undefined
+ * - `hasMediaPermission`: undefined
+ * - `sipStatus`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `name`: undefined
+ */
+export const SippetAIVoipWidgetSettingsTab: React.ForwardRefExoticComponent<SippetAIVoipWidgetSettingsTabProps>;

package/react/SippetAIVoipWidgetSettingsTab.js

@@ -0,0 +1,47 @@
+import React, { forwardRef, useRef } from "react";
+import "../dist/components/voip-widget/voip-widget-settings-tab.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const SippetAIVoipWidgetSettingsTab = forwardRef(
+  (props, forwardedRef) => {
+    const ref = useRef(null);
+    const {
+      hasMediaPermission,
+      userEmail,
+      audioInputs,
+      audioOutputs,
+      selectedMicId,
+      selectedSpeakerId,
+      sipStatus,
+      exportparts,
+      htmlFor,
+      part,
+      tabIndex,
+      ...restProps
+    } = props;
+
+    /** Event listeners - run once */
+    useEventListener(ref, "name", props.onName);
+
+    return React.createElement(
+      "sippetai-voip-widget-settings-tab",
+      {
+        ref: createForwardedRefHandler(ref, forwardedRef),
+        ...restProps,
+        userEmail: userEmail,
+        audioInputs: audioInputs,
+        audioOutputs: audioOutputs,
+        selectedMicId: selectedMicId,
+        selectedSpeakerId: selectedSpeakerId,
+        sipStatus: sipStatus,
+        exportparts: exportparts,
+        for: htmlFor,
+        part: part,
+        tabindex: tabIndex,
+        hasMediaPermission: hasMediaPermission ? true : undefined,
+        style: { ...props.style },
+      },
+      props.children,
+    );
+  },
+);

package/react/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./SippetAIVoipWidgetLauncher.js";
+export * from "./SippetAIVoipWidgetPanel.js";
+export * from "./SippetAIVoipWidgetPhoneTab.js";
+export * from "./SippetAIVoipWidgetQueueTab.js";
+export * from "./SippetAIVoipWidgetContactsTab.js";
+export * from "./SippetAIVoipWidgetHistoryTab.js";
+export * from "./SippetAIVoipWidgetSettingsTab.js";
+export * from "./SippetAIVoipWidget.js";

package/react/index.js

@@ -0,0 +1,8 @@
+export * from "./SippetAIVoipWidgetLauncher.js";
+export * from "./SippetAIVoipWidgetPanel.js";
+export * from "./SippetAIVoipWidgetPhoneTab.js";
+export * from "./SippetAIVoipWidgetQueueTab.js";
+export * from "./SippetAIVoipWidgetContactsTab.js";
+export * from "./SippetAIVoipWidgetHistoryTab.js";
+export * from "./SippetAIVoipWidgetSettingsTab.js";
+export * from "./SippetAIVoipWidget.js";

package/react/react-utils.js

@@ -0,0 +1,67 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+export function mergeRefs(target, forwardedRef) {
+  if (!forwardedRef) {
+    return;
+  }
+
+  if (typeof forwardedRef === "function") {
+    forwardedRef(target);
+  } else {
+    forwardedRef.current = target;
+  }
+}
+
+export function createForwardedRefHandler(localRef, forwardedRef) {
+  return (node) => {
+    localRef.current = node;
+    mergeRefs(node, forwardedRef);
+  };
+}
+
+export function useProperties(targetElement, propName, value) {
+  useEffect(() => {
+    const el = targetElement?.current;
+    if (!el || value === undefined || el[propName] === value) {
+      return;
+    }
+
+    try {
+      el[propName] = value;
+    } catch (e) {
+      console.warn(e);
+    }
+  }, [targetElement, propName, value]);
+}
+
+export function useEventListener(targetElement, eventName, eventHandler) {
+  // keep a ref to the latest handler so we don't need to re-register the event listener
+  // whenever the handler changes (avoids duplicate listeners on re-renders)
+  const handlerRef = useRef(eventHandler);
+  handlerRef.current = eventHandler;
+
+  useLayoutEffect(() => {
+    const el = targetElement?.current;
+    if (!el || eventName === undefined) {
+      return;
+    }
+
+    // capture the handler at the time the listener is attached so we can call cancel on it
+    const eventListener = (event) => {
+      const handler = handlerRef.current;
+      if (handler) {
+        handler(event);
+      }
+    };
+
+    el.addEventListener(eventName, eventListener);
+
+    return () => {
+      const handler = handlerRef.current;
+      if (handler?.cancel) {
+        handler.cancel();
+      }
+      el.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, targetElement?.current]);
+}