@cometchat/chat-uikit-react 4.3.21 → 5.0.0-beta1

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/wavesurfer.d.ts

@@ -0,0 +1,223 @@
+import BasePlugin, { type GenericPlugin } from './base-plugin';
+import * as dom from './dom';
+import Player from './player';
+export type WaveSurferOptions = {
+    /** Required: an HTML element or selector where the waveform will be rendered */
+    container: HTMLElement | string;
+    /** The height of the waveform in pixels, or "auto" to fill the container height */
+    height?: number | 'auto';
+    /** The width of the waveform in pixels or any CSS value; defaults to 100% */
+    width?: number | string;
+    /** The color of the waveform */
+    waveColor?: string | string[] | CanvasGradient;
+    /** The color of the progress mask */
+    progressColor?: string | string[] | CanvasGradient;
+    /** The color of the playpack cursor */
+    cursorColor?: string;
+    /** The cursor width */
+    cursorWidth?: number;
+    /** If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */
+    barWidth?: number;
+    /** Spacing between bars in pixels */
+    barGap?: number;
+    /** Rounded borders for bars */
+    barRadius?: number;
+    /** A vertical scaling factor for the waveform */
+    barHeight?: number;
+    /** Vertical bar alignment */
+    barAlign?: 'top' | 'bottom';
+    /** Minimum pixels per second of audio (i.e. the zoom level) */
+    minPxPerSec?: number;
+    /** Stretch the waveform to fill the container, true by default */
+    fillParent?: boolean;
+    /** Audio URL */
+    url?: string;
+    /** Pre-computed audio data, arrays of floats for each channel */
+    peaks?: Array<Float32Array | number[]>;
+    /** Pre-computed audio duration in seconds */
+    duration?: number;
+    /** Use an existing media element instead of creating one */
+    media?: HTMLMediaElement;
+    /** Whether to show default audio element controls */
+    mediaControls?: boolean;
+    /** Play the audio on load */
+    autoplay?: boolean;
+    /** Pass false to disable clicks on the waveform */
+    interact?: boolean;
+    /** Allow to drag the cursor to seek to a new position. If an object with `debounceTime` is provided instead
+     * then `dragToSeek` will also be true. If `true` the default is 200ms
+     */
+    dragToSeek?: boolean | {
+        debounceTime: number;
+    };
+    /** Hide the scrollbar */
+    hideScrollbar?: boolean;
+    /** Audio rate, i.e. the playback speed */
+    audioRate?: number;
+    /** Automatically scroll the container to keep the current position in viewport */
+    autoScroll?: boolean;
+    /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
+    autoCenter?: boolean;
+    /** Decoding sample rate. Doesn't affect the playback. Defaults to 8000 */
+    sampleRate?: number;
+    /** Render each audio channel as a separate waveform */
+    splitChannels?: Array<Partial<WaveSurferOptions> & {
+        overlay?: boolean;
+    }>;
+    /** Stretch the waveform to the full height */
+    normalize?: boolean;
+    /** The list of plugins to initialize on start */
+    plugins?: GenericPlugin[];
+    /** Custom render function */
+    renderFunction?: (peaks: Array<Float32Array | number[]>, ctx: CanvasRenderingContext2D) => void;
+    /** Options to pass to the fetch method */
+    fetchParams?: RequestInit;
+    /** Playback "backend" to use, defaults to MediaElement */
+    backend?: 'WebAudio' | 'MediaElement';
+    /** Nonce for CSP if necessary */
+    cspNonce?: string;
+};
+declare const defaultOptions: {
+    waveColor: string;
+    progressColor: string;
+    cursorWidth: number;
+    minPxPerSec: number;
+    fillParent: boolean;
+    interact: boolean;
+    dragToSeek: boolean;
+    autoScroll: boolean;
+    autoCenter: boolean;
+    sampleRate: number;
+};
+export type WaveSurferEvents = {
+    /** After wavesurfer is created */
+    init: [];
+    /** When audio starts loading */
+    load: [url: string];
+    /** During audio loading */
+    loading: [percent: number];
+    /** When the audio has been decoded */
+    decode: [duration: number];
+    /** When the audio is both decoded and can play */
+    ready: [duration: number];
+    /** When visible waveform is drawn */
+    redraw: [];
+    /** When all audio channel chunks of the waveform have drawn */
+    redrawcomplete: [];
+    /** When the audio starts playing */
+    play: [];
+    /** When the audio pauses */
+    pause: [];
+    /** When the audio finishes playing */
+    finish: [];
+    /** On audio position change, fires continuously during playback */
+    timeupdate: [currentTime: number];
+    /** An alias of timeupdate but only when the audio is playing */
+    audioprocess: [currentTime: number];
+    /** When the user seeks to a new position */
+    seeking: [currentTime: number];
+    /** When the user interacts with the waveform (i.g. clicks or drags on it) */
+    interaction: [newTime: number];
+    /** When the user clicks on the waveform */
+    click: [relativeX: number, relativeY: number];
+    /** When the user double-clicks on the waveform */
+    dblclick: [relativeX: number, relativeY: number];
+    /** When the user drags the cursor */
+    drag: [relativeX: number];
+    /** When the user starts dragging the cursor */
+    dragstart: [relativeX: number];
+    /** When the user ends dragging the cursor */
+    dragend: [relativeX: number];
+    /** When the waveform is scrolled (panned) */
+    scroll: [visibleStartTime: number, visibleEndTime: number, scrollLeft: number, scrollRight: number];
+    /** When the zoom level changes */
+    zoom: [minPxPerSec: number];
+    /** Just before the waveform is destroyed so you can clean up your events */
+    destroy: [];
+    /** When source file is unable to be fetched, decoded, or an error is thrown by media element */
+    error: [error: Error];
+};
+declare class WaveSurfer extends Player<WaveSurferEvents> {
+    options: WaveSurferOptions & typeof defaultOptions;
+    private renderer;
+    private timer;
+    private plugins;
+    private decodedData;
+    protected subscriptions: Array<() => void>;
+    protected mediaSubscriptions: Array<() => void>;
+    protected abortController: AbortController | null;
+    static readonly BasePlugin: typeof BasePlugin;
+    static readonly dom: typeof dom;
+    /** Create a new WaveSurfer instance */
+    static create(options: WaveSurferOptions): WaveSurfer;
+    /** Create a new WaveSurfer instance */
+    constructor(options: WaveSurferOptions);
+    private updateProgress;
+    private initTimerEvents;
+    private initPlayerEvents;
+    private initRendererEvents;
+    private initPlugins;
+    private unsubscribePlayerEvents;
+    /** Set new wavesurfer options and re-render it */
+    setOptions(options: Partial<WaveSurferOptions>): void;
+    /** Register a wavesurfer plugin */
+    registerPlugin<T extends GenericPlugin>(plugin: T): T;
+    /** For plugins only: get the waveform wrapper div */
+    getWrapper(): HTMLElement;
+    /** For plugins only: get the scroll container client width */
+    getWidth(): number;
+    /** Get the current scroll position in pixels */
+    getScroll(): number;
+    /** Set the current scroll position in pixels */
+    setScroll(pixels: number): void;
+    /** Move the start of the viewing window to a specific time in the audio (in seconds) */
+    setScrollTime(time: number): void;
+    /** Get all registered plugins */
+    getActivePlugins(): GenericPlugin[];
+    private loadAudio;
+    /** Load an audio file by URL, with optional pre-decoded audio data */
+    load(url: string, channelData?: WaveSurferOptions['peaks'], duration?: number): Promise<void>;
+    /** Load an audio blob */
+    loadBlob(blob: Blob, channelData?: WaveSurferOptions['peaks'], duration?: number): Promise<void>;
+    /** Zoom the waveform by a given pixels-per-second factor */
+    zoom(minPxPerSec: number): void;
+    /** Get the decoded audio data */
+    getDecodedData(): AudioBuffer | null;
+    /** Get decoded peaks */
+    exportPeaks({ channels, maxLength, precision }?: {
+        channels?: number | undefined;
+        maxLength?: number | undefined;
+        precision?: number | undefined;
+    }): Array<number[]>;
+    /** Get the duration of the audio in seconds */
+    getDuration(): number;
+    /** Toggle if the waveform should react to clicks */
+    toggleInteraction(isInteractive: boolean): void;
+    /** Jump to a specific time in the audio (in seconds) */
+    setTime(time: number): void;
+    /** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
+    seekTo(progress: number): void;
+    /** Play or pause the audio */
+    playPause(): Promise<void>;
+    /** Stop the audio and go to the beginning */
+    stop(): void;
+    /** Skip N or -N seconds from the current position */
+    skip(seconds: number): void;
+    /** Empty the waveform */
+    empty(): void;
+    /** Set HTML media element */
+    setMediaElement(element: HTMLMediaElement): void;
+    /**
+     * Export the waveform image as a data-URI or a blob.
+     *
+     * @param format The format of the exported image, can be `image/png`, `image/jpeg`, `image/webp` or any other format supported by the browser.
+     * @param quality The quality of the exported image, for `image/jpeg` or `image/webp`. Must be between 0 and 1.
+     * @param type The type of the exported image, can be `dataURL` (default) or `blob`.
+     * @returns A promise that resolves with an array of data-URLs or blobs, one for each canvas element.
+     */
+    exportImage(format: string, quality: number, type: 'dataURL'): Promise<string[]>;
+    exportImage(format: string, quality: number, type: 'blob'): Promise<Blob[]>;
+    /** Unmount wavesurfer */
+    destroy(): void;
+}
+export default WaveSurfer;

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/webaudio.d.ts

@@ -0,0 +1,63 @@
+import EventEmitter from './event-emitter';
+type WebAudioPlayerEvents = {
+    loadedmetadata: [];
+    canplay: [];
+    play: [];
+    pause: [];
+    seeking: [];
+    timeupdate: [];
+    volumechange: [];
+    emptied: [];
+    ended: [];
+};
+/**
+ * A Web Audio buffer player emulating the behavior of an HTML5 Audio element.
+ */
+declare class WebAudioPlayer extends EventEmitter<WebAudioPlayerEvents> {
+    private audioContext;
+    private gainNode;
+    private bufferNode;
+    private playStartTime;
+    private playedDuration;
+    private _muted;
+    private _playbackRate;
+    private _duration;
+    private buffer;
+    currentSrc: string;
+    paused: boolean;
+    crossOrigin: string | null;
+    seeking: boolean;
+    autoplay: boolean;
+    constructor(audioContext?: AudioContext);
+    /** Subscribe to an event. Returns an unsubscribe function. */
+    addEventListener: <EventName extends keyof WebAudioPlayerEvents>(event: EventName, listener: (...args: WebAudioPlayerEvents[EventName]) => void, options?: {
+        once?: boolean | undefined;
+    } | undefined) => () => void;
+    /** Unsubscribe from an event */
+    removeEventListener: <EventName extends keyof WebAudioPlayerEvents>(event: EventName, listener: (...args: WebAudioPlayerEvents[EventName]) => void) => void;
+    load(): Promise<void>;
+    get src(): string;
+    set src(value: string);
+    private _play;
+    private _pause;
+    play(): Promise<void>;
+    pause(): void;
+    stopAt(timeSeconds: number): void;
+    setSinkId(deviceId: string): Promise<void>;
+    get playbackRate(): number;
+    set playbackRate(value: number);
+    get currentTime(): number;
+    set currentTime(value: number);
+    get duration(): number;
+    set duration(value: number);
+    get volume(): number;
+    set volume(value: number);
+    get muted(): boolean;
+    set muted(value: boolean);
+    canPlayType(mimeType: string): boolean;
+    /** Get the GainNode used to play the audio. Can be used to attach filters. */
+    getGainNode(): GainNode;
+    /** Get decoded audio */
+    getChannelData(): Float32Array[];
+}
+export default WebAudioPlayer;

package/dist/types/components/BaseComponents/CometChatAvatar/CometChatAvatar.d.ts

@@ -0,0 +1,13 @@
+interface BaseProps {
+    /** Name used for displaying initials in the avatar. */
+    name?: string;
+    /** URL of the avatar image to be displayed. */
+    image?: string;
+}
+type CometChatAvatarProps = BaseProps & {
+    name: string;
+} | BaseProps & {
+    image: string;
+};
+declare const CometChatAvatar: (props: CometChatAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatAvatar };

package/dist/types/components/BaseComponents/CometChatBadge/CometChatBadge.d.ts

@@ -0,0 +1,10 @@
+interface BadgeProps {
+    count: number | string;
+}
+/**
+    The CometChatBadge component is a generic component used to display numbers as a label.
+    It is generally used to display unread message count.
+    It accepts a count as an input, and developers can override the "cometchat-badge" class for customization purposes.
+*/
+declare const CometChatBadge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+export { CometChatBadge };

package/dist/types/components/BaseComponents/CometChatButton/CometChatButton.d.ts

@@ -0,0 +1,12 @@
+interface ButtonProps {
+    text?: string;
+    hoverText?: string;
+    iconURL?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    onClick?: (customEvent: CustomEvent<{
+        event: PointerEvent;
+    }>) => void;
+}
+declare const CometChatButton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatButton };

package/dist/types/components/BaseComponents/CometChatCallBubble/CometChatCallBubble.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface CallBubbleProps {
+    title?: string;
+    sessionId?: string;
+    subtitle?: React.ReactNode;
+    buttonText?: string;
+    iconURL?: string;
+    onClicked?: ((url: string) => void) | undefined;
+    isSentByMe?: boolean;
+}
+declare const CometChatCallBubble: (props: CallBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatCallBubble };

package/dist/types/components/BaseComponents/CometChatCard/CometChatCard.d.ts

@@ -0,0 +1,15 @@
+interface BaseProps {
+    /** URL of the avatar to be displayed. */
+    avatarURL?: string;
+    /** Name used for displaying initials in the avatar. */
+    avatarName?: string;
+    /** Title to be displayed for the card. */
+    title: string;
+}
+type CometChatAvatarProps = BaseProps & {
+    avatarURL: string;
+} | BaseProps & {
+    avatarName: string;
+};
+declare const CometChatCard: (props: CometChatAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatCard };

package/dist/types/components/BaseComponents/CometChatChangeScope/CometChatChangeScope.d.ts

@@ -0,0 +1,10 @@
+interface ChangeScopeProps {
+    title?: string;
+    buttonText?: string;
+    options: string[];
+    defaultSelection?: string;
+    onScopeChanged?: (scope: string) => Promise<void>;
+    onCloseClick?: () => void;
+}
+declare const CometChatChangeScope: (props: ChangeScopeProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatChangeScope };

package/dist/types/components/BaseComponents/CometChatChangeScope/useCometChatChangeScope.d.ts

@@ -0,0 +1,10 @@
+export declare const useCometChatChangeScope: ({ defaultSelection, }: {
+    defaultSelection?: string | undefined;
+}) => {
+    selectedValue: string;
+    selectionChanged: (input: {
+        checked: boolean;
+        labelText: string | undefined;
+        id: string;
+    }) => void;
+};

package/dist/types/components/BaseComponents/CometChatCheckbox/CometChatCheckbox.d.ts

@@ -0,0 +1,11 @@
+interface CheckboxProps {
+    checked?: boolean;
+    labelText?: string;
+    disabled?: boolean;
+    onCheckBoxValueChanged: (input: {
+        checked: boolean;
+        labelText: string | undefined;
+    }) => void;
+}
+declare const CometChatCheckbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatCheckbox };

package/dist/types/components/BaseComponents/CometChatCheckbox/useCometChatCheckbox.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from "react";
+export declare const useCometChatCheckbox: ({ checked, onCheckBoxValueChanged }: {
+    checked?: boolean | undefined;
+    onCheckBoxValueChanged?: ((input: {
+        checked: boolean;
+        labelText: string | undefined;
+    }) => void) | undefined;
+}) => {
+    isChecked: boolean;
+    updateCheckbox: (event: ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/types/components/BaseComponents/CometChatConfirmDialog/CometChatConfirmDialog.d.ts

@@ -0,0 +1,16 @@
+interface ConfirmDialogProps {
+    /** The title displayed at the top of the confirm dialog. */
+    title?: string;
+    /** The descriptive text inside the confirm dialog. */
+    messageText?: string;
+    /** The text displayed on the "cancel" button. */
+    cancelButtonText?: string;
+    /** The text displayed on the "confirm" button. */
+    confirmButtonText?: string;
+    /** Callback function for when the confirm button is clicked. */
+    onSubmitClick?: () => Promise<void>;
+    /** Callback function for when the cancel button is clicked. */
+    onCancelClick?: () => void;
+}
+declare const CometChatConfirmDialog: (props: ConfirmDialogProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatConfirmDialog };

package/dist/types/components/BaseComponents/CometChatContextMenu/CometChatContextMenu.d.ts

@@ -0,0 +1,17 @@
+import { CometChatActionsIcon, CometChatActionsView, CometChatOption } from '../../../modals';
+import { Placement } from '../../../Enums/Enums';
+interface ContextMenuProps {
+    data: Array<CometChatActionsIcon | CometChatActionsView | CometChatOption>;
+    topMenuSize?: number;
+    moreIconHoverText?: string;
+    onOptionClicked?: (option: CometChatActionsIcon | CometChatActionsView | CometChatOption) => void;
+    placement?: Placement;
+    closeOnOutsideClick?: boolean;
+}
+/**
+ * CometChatContextMenu is a composite component used to display menu data in required format.
+ * It accepts a data array for displaying the menu items and topMenuSize to specify how many menu items should be visible by default.
+ * It also accepts a URL for the 'more' icon, placement and a menu click callback function for customization purposes.
+ */
+declare const CometChatContextMenu: (props: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatContextMenu };

package/dist/types/components/BaseComponents/CometChatDate/CometChatDate.d.ts

@@ -0,0 +1,13 @@
+import { DatePatterns } from "../../../Enums/Enums";
+interface DateProps {
+    timestamp: number;
+    pattern?: DatePatterns;
+    customDateString?: string | null;
+}
+/**
+ * CometChatDate is a generic component used to display dates in the required format.
+ * It accepts a timestamp of the time to be displayed and the pattern in which the time should be displayed.
+ * It also accepts the customDateString prop, whose value is used as is for displaying the time.
+ */
+declare const CometChatDate: (props: DateProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatDate };

package/dist/types/components/BaseComponents/CometChatDate/useCometChatDate.d.ts

@@ -0,0 +1,8 @@
+import { DatePatterns } from "../../../Enums/Enums";
+export declare const useCometChatDate: ({ timestamp, pattern, customDateString, }: {
+    timestamp: number;
+    pattern: DatePatterns;
+    customDateString: string | null;
+}) => {
+    getFormattedDate: () => string | null;
+};

package/dist/types/components/BaseComponents/CometChatDeleteBubble/CometChatDeleteBubble.d.ts

@@ -0,0 +1,14 @@
+interface DeleteBubbleProps {
+    isSentByMe: boolean;
+    /**
+     * Optional. The text to display. If not provided, a default
+     * localized "DELETE_MSG_TEXT" will be used.
+     */
+    text?: string;
+}
+/**
+ * CometChatDeleteBubble is a generic component used to indicate that a message has been deleted.
+ * It accepts the isSentByMe prop and applies sender or receiver styling based on its value.
+ */
+declare const CometChatDeleteBubble: (props: DeleteBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatDeleteBubble };

package/dist/types/components/BaseComponents/CometChatDocumentBubble/CometChatDocumentBubble.d.ts

@@ -0,0 +1,11 @@
+interface DocumentBubbleProps {
+    bannerImage: string;
+    title: string;
+    URL: string;
+    subtitle: string;
+    buttonText: string;
+    isSentByMe?: boolean;
+    onClicked: ((url: string) => void) | undefined;
+}
+declare const CometChatDocumentBubble: (props: DocumentBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatDocumentBubble };

package/dist/types/components/BaseComponents/CometChatDropDown/CometChatDropDown.d.ts

@@ -0,0 +1,14 @@
+interface onOptionsChangedEvent {
+    /** The value of the selected option from the dropdown. */
+    value?: string;
+}
+interface DropDownProps {
+    /** List of options to be displayed in the dropdown. */
+    options: string[];
+    /** Value from the list to be selected by default. */
+    selectedOption?: string;
+    /** Callback invoked when the dropdown selection changes. */
+    onOptionsChanged?: (input: onOptionsChangedEvent) => void;
+}
+declare const CometChatDropDown: (props: DropDownProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatDropDown };

package/dist/types/components/BaseComponents/CometChatDropDown/useCometChatDropDown.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from "react";
+export declare const useCometChatDropDown: ({ selectedOption, onOptionsChanged, }: {
+    selectedOption?: string | undefined;
+    onOptionsChanged?: (({ value: string }: {
+        value?: string | undefined;
+    }) => void) | undefined;
+}) => {
+    selectedOptionState: string;
+    dropdownVisible: boolean;
+    onButtonClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onOptionClick: (selectedOption: string) => void;
+};

package/dist/types/components/BaseComponents/CometChatEditPreview/CometChatEditPreview.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+/**
+ * Interface for the props used in the CometChatEditPreview component.
+ */
+interface EditPreviewProps {
+    /** The title to display in the preview, defaults to "Edit Message"*/
+    previewTitle?: string;
+    /** The subtitle to display in the preview, can be left empty. */
+    previewSubtitle?: string;
+    /** Callback function that triggers when the close button is clicked. */
+    onClose?: () => void;
+}
+/**
+ * CometChatEditPreview Component
+ *
+ * A React component that displays a preview of an edited message with a title and subtitle.
+ * @param {EditPreviewProps} props - The props for the component.
+ * @returns {JSX.Element} A JSX element displaying the edit preview UI.
+ */
+declare const CometChatEditPreview: FC<EditPreviewProps>;
+export { CometChatEditPreview };

package/dist/types/components/BaseComponents/CometChatEmojiKeyboard/CometChatEmoji.d.ts

@@ -0,0 +1,22 @@
+export declare class CometChatEmoji {
+    char: string;
+    keywords: any;
+    constructor({ char, keywords }: {
+        char?: string | undefined;
+        keywords?: never[] | undefined;
+    });
+}
+export declare class CometChatEmojiCategory {
+    id: string;
+    symbolURL: string;
+    name: string;
+    emojies: {
+        [key: string]: CometChatEmoji;
+    };
+    constructor({ id, symbolURL, name, emojies, }: {
+        id?: string | undefined;
+        symbolURL?: string | undefined;
+        name?: string | undefined;
+        emojies?: {} | undefined;
+    });
+}

package/dist/types/components/BaseComponents/CometChatEmojiKeyboard/CometChatEmojiKeyboard.d.ts

@@ -0,0 +1,7 @@
+import { CometChatEmojiCategory } from "./CometChatEmoji";
+interface EmojiKeyboardProps {
+    emojiData?: CometChatEmojiCategory[];
+    onEmojiClick?: (emoji: string) => void;
+}
+declare const CometChatEmojiKeyboard: (props: EmojiKeyboardProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatEmojiKeyboard };