@sippet-ai/operator-widget 0.0.12

package/react/SippetAIVoipWidget.d.ts

@@ -0,0 +1,158 @@
+import React from "react";
+import {
+  SippetAIVoipWidget as SippetAIVoipWidgetElement,
+  CustomEvent,
+} from "../dist/components/voip-widget/index.js";
+
+export type { SippetAIVoipWidgetElement, CustomEvent };
+
+export interface SippetAIVoipWidgetProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  sessionAuth?: boolean;
+
+  /** undefined */
+  incomingCall?: boolean;
+
+  /** undefined */
+  incomingFromQueue?: boolean;
+
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  apiKey?: SippetAIVoipWidgetElement["apiKey"];
+
+  /** undefined */
+  apiOrigin?: SippetAIVoipWidgetElement["apiOrigin"];
+
+  /** undefined */
+  sipUrl?: SippetAIVoipWidgetElement["sipUrl"];
+
+  /** undefined */
+  sipUser?: SippetAIVoipWidgetElement["sipUser"];
+
+  /** undefined */
+  sipUserId?: SippetAIVoipWidgetElement["sipUserId"];
+
+  /** undefined */
+  sipPassword?: SippetAIVoipWidgetElement["sipPassword"];
+
+  /** undefined */
+  sipWebSocketUrl?: SippetAIVoipWidgetElement["sipWebSocketUrl"];
+
+  /** undefined */
+  userName?: SippetAIVoipWidgetElement["userName"];
+
+  /** undefined */
+  userEmail?: SippetAIVoipWidgetElement["userEmail"];
+
+  /** undefined */
+  availability?: SippetAIVoipWidgetElement["availability"];
+
+  /** undefined */
+  queueCount?: SippetAIVoipWidgetElement["queueCount"];
+
+  /** undefined */
+  incomingCallerName?: SippetAIVoipWidgetElement["incomingCallerName"];
+
+  /** undefined */
+  contacts?: SippetAIVoipWidgetElement["contacts"];
+
+  /** undefined */
+  history?: SippetAIVoipWidgetElement["history"];
+
+  /** undefined */
+  queuedCalls?: SippetAIVoipWidgetElement["queuedCalls"];
+
+  /** undefined */
+  activeTab?: SippetAIVoipWidgetElement["activeTab"];
+
+  /** 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<SippetAIVoipWidgetElement>;
+
+  /** 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 */
+  onVoipTransfer?: (event: CustomEvent) => void;
+
+  /** undefined */
+  onVoipCallState?: (event: CustomEvent) => void;
+}
+
+/**
+ * A VoIP widget web component allowing real-time telephony for Sippet AI integrations
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `api-key`/`apiKey`: undefined
+ * - `session-auth`/`sessionAuth`: undefined
+ * - `api-origin`/`apiOrigin`: undefined
+ * - `sipUrl`: undefined
+ * - `sipUser`: undefined
+ * - `sip-user-id`/`sipUserId`: undefined
+ * - `sipPassword`: undefined
+ * - `sipWebSocketUrl`: undefined
+ * - `userName`: undefined
+ * - `userEmail`: undefined
+ * - `availability`: undefined
+ * - `queueCount`: undefined
+ * - `incomingCall`: undefined
+ * - `incomingCallerName`: undefined
+ * - `incomingFromQueue`: undefined
+ * - `contacts`: undefined
+ * - `history`: undefined
+ * - `queuedCalls`: undefined
+ * - `open`: undefined
+ * - `activeTab`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `voip-transfer`: undefined
+ * - `voip-call-state`: undefined
+ *
+ * ## Methods
+ *
+ * Methods that can be called to access component functionality.
+ *
+ * - `openPanel(tab: VoipTab = 'phone') => void`: undefined
+ * - `callNumber(phoneNumber: string) => void`: undefined
+ * - `answerCall() => void`: undefined
+ * - `declineCall() => void`: undefined
+ * - `toggleHold() => void`: undefined
+ * - `transferTo(queue: string) => void`: undefined
+ */
+export const SippetAIVoipWidget: React.ForwardRefExoticComponent<SippetAIVoipWidgetProps>;

package/react/SippetAIVoipWidget.js

@@ -0,0 +1,72 @@
+import React, { forwardRef, useRef } from "react";
+import "../dist/components/voip-widget/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const SippetAIVoipWidget = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    sessionAuth,
+    incomingCall,
+    incomingFromQueue,
+    open,
+    apiKey,
+    apiOrigin,
+    sipUrl,
+    sipUser,
+    sipUserId,
+    sipPassword,
+    sipWebSocketUrl,
+    userName,
+    userEmail,
+    availability,
+    queueCount,
+    incomingCallerName,
+    contacts,
+    history,
+    queuedCalls,
+    activeTab,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "voip-transfer", props.onVoipTransfer);
+  useEventListener(ref, "voip-call-state", props.onVoipCallState);
+
+  return React.createElement(
+    "sippetai-voip-widget",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      "api-key": apiKey ?? props["api-key"],
+      "api-origin": apiOrigin ?? props["api-origin"],
+      sipUrl: sipUrl,
+      sipUser: sipUser,
+      "sip-user-id": sipUserId ?? props["sip-user-id"],
+      sipPassword: sipPassword,
+      sipWebSocketUrl: sipWebSocketUrl,
+      userName: userName,
+      userEmail: userEmail,
+      availability: availability,
+      queueCount: queueCount,
+      incomingCallerName: incomingCallerName,
+      contacts: contacts,
+      history: history,
+      queuedCalls: queuedCalls,
+      activeTab: activeTab,
+      exportparts: exportparts,
+      for: htmlFor,
+      part: part,
+      tabindex: tabIndex,
+      "session-auth": sessionAuth ? true : undefined,
+      incomingCall: incomingCall ? true : undefined,
+      incomingFromQueue: incomingFromQueue ? true : undefined,
+      open: open ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/SippetAIVoipWidgetContactsTab.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  SippetAIVoipWidgetContactsTab as SippetAIVoipWidgetContactsTabElement,
+  CustomEvent,
+} from "../dist/components/voip-widget/voip-widget-contacts-tab.js";
+
+export type { SippetAIVoipWidgetContactsTabElement, CustomEvent };
+
+export interface SippetAIVoipWidgetContactsTabProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  contacts?: SippetAIVoipWidgetContactsTabElement["contacts"];
+
+  /** 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<SippetAIVoipWidgetContactsTabElement>;
+
+  /** 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.
+ *
+ * - `contacts`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `name`: undefined
+ */
+export const SippetAIVoipWidgetContactsTab: React.ForwardRefExoticComponent<SippetAIVoipWidgetContactsTabProps>;

package/react/SippetAIVoipWidgetContactsTab.js

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

package/react/SippetAIVoipWidgetHistoryTab.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { SippetAIVoipWidgetHistoryTab as SippetAIVoipWidgetHistoryTabElement } from "../dist/components/voip-widget/voip-widget-history-tab.js";
+
+export type { SippetAIVoipWidgetHistoryTabElement };
+
+export interface SippetAIVoipWidgetHistoryTabProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  history?: SippetAIVoipWidgetHistoryTabElement["history"];
+
+  /** 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<SippetAIVoipWidgetHistoryTabElement>;
+
+  /** 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;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `history`: undefined
+ */
+export const SippetAIVoipWidgetHistoryTab: React.ForwardRefExoticComponent<SippetAIVoipWidgetHistoryTabProps>;

package/react/SippetAIVoipWidgetHistoryTab.js

@@ -0,0 +1,26 @@
+import React, { forwardRef, useRef } from "react";
+import "../dist/components/voip-widget/voip-widget-history-tab.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const SippetAIVoipWidgetHistoryTab = forwardRef(
+  (props, forwardedRef) => {
+    const ref = useRef(null);
+    const { history, exportparts, htmlFor, part, tabIndex, ...restProps } =
+      props;
+
+    return React.createElement(
+      "sippetai-voip-widget-history-tab",
+      {
+        ref: createForwardedRefHandler(ref, forwardedRef),
+        ...restProps,
+        history: history,
+        exportparts: exportparts,
+        for: htmlFor,
+        part: part,
+        tabindex: tabIndex,
+        style: { ...props.style },
+      },
+      props.children,
+    );
+  },
+);

package/react/SippetAIVoipWidgetLauncher.d.ts

@@ -0,0 +1,83 @@
+import React from "react";
+import {
+  SippetAIVoipWidgetLauncher as SippetAIVoipWidgetLauncherElement,
+  CustomEvent,
+} from "../dist/components/voip-widget/voip-widget-launcher.js";
+
+export type { SippetAIVoipWidgetLauncherElement, CustomEvent };
+
+export interface SippetAIVoipWidgetLauncherProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  incomingCall?: boolean;
+
+  /** undefined */
+  incomingFromQueue?: boolean;
+
+  /** undefined */
+  queueCount?: SippetAIVoipWidgetLauncherElement["queueCount"];
+
+  /** undefined */
+  incomingCallerName?: SippetAIVoipWidgetLauncherElement["incomingCallerName"];
+
+  /** 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<SippetAIVoipWidgetLauncherElement>;
+
+  /** 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.
+ *
+ * - `open`: undefined
+ * - `queueCount`: undefined
+ * - `incomingCall`: undefined
+ * - `incomingFromQueue`: undefined
+ * - `incomingCallerName`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `name`: undefined
+ */
+export const SippetAIVoipWidgetLauncher: React.ForwardRefExoticComponent<SippetAIVoipWidgetLauncherProps>;

package/react/SippetAIVoipWidgetLauncher.js

@@ -0,0 +1,41 @@
+import React, { forwardRef, useRef } from "react";
+import "../dist/components/voip-widget/voip-widget-launcher.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const SippetAIVoipWidgetLauncher = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    open,
+    incomingCall,
+    incomingFromQueue,
+    queueCount,
+    incomingCallerName,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "name", props.onName);
+
+  return React.createElement(
+    "sippetai-voip-widget-launcher",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      queueCount: queueCount,
+      incomingCallerName: incomingCallerName,
+      exportparts: exportparts,
+      for: htmlFor,
+      part: part,
+      tabindex: tabIndex,
+      open: open ? true : undefined,
+      incomingCall: incomingCall ? true : undefined,
+      incomingFromQueue: incomingFromQueue ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/SippetAIVoipWidgetPanel.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  SippetAIVoipWidgetPanel as SippetAIVoipWidgetPanelElement,
+  CustomEvent,
+} from "../dist/components/voip-widget/voip-widget-panel.js";
+
+export type { SippetAIVoipWidgetPanelElement, CustomEvent };
+
+export interface SippetAIVoipWidgetPanelProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  incomingCall?: boolean;
+
+  /** undefined */
+  incomingFromQueue?: boolean;
+
+  /** undefined */
+  userName?: SippetAIVoipWidgetPanelElement["userName"];
+
+  /** undefined */
+  availability?: SippetAIVoipWidgetPanelElement["availability"];
+
+  /** undefined */
+  activeTab?: SippetAIVoipWidgetPanelElement["activeTab"];
+
+  /** undefined */
+  incomingCallerName?: SippetAIVoipWidgetPanelElement["incomingCallerName"];
+
+  /** 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<SippetAIVoipWidgetPanelElement>;
+
+  /** 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.
+ *
+ * - `userName`: undefined
+ * - `availability`: undefined
+ * - `activeTab`: undefined
+ * - `incomingCall`: undefined
+ * - `incomingFromQueue`: undefined
+ * - `incomingCallerName`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `name`: undefined
+ */
+export const SippetAIVoipWidgetPanel: React.ForwardRefExoticComponent<SippetAIVoipWidgetPanelProps>;

package/react/SippetAIVoipWidgetPanel.js

@@ -0,0 +1,43 @@
+import React, { forwardRef, useRef } from "react";
+import "../dist/components/voip-widget/voip-widget-panel.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const SippetAIVoipWidgetPanel = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    incomingCall,
+    incomingFromQueue,
+    userName,
+    availability,
+    activeTab,
+    incomingCallerName,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "name", props.onName);
+
+  return React.createElement(
+    "sippetai-voip-widget-panel",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      userName: userName,
+      availability: availability,
+      activeTab: activeTab,
+      incomingCallerName: incomingCallerName,
+      exportparts: exportparts,
+      for: htmlFor,
+      part: part,
+      tabindex: tabIndex,
+      incomingCall: incomingCall ? true : undefined,
+      incomingFromQueue: incomingFromQueue ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});