@cloudflare/realtimekit-ui 1.1.0-staging.9 → 1.1.1-staging.1

package/dist/types/components/rtk-chat/rtk-chat.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Meeting, Peer } from '../../types/rtk-client';
-import { Chat, ChatChannel, Size } from '../../types/props';
+import { Meeting, Peer, Participant } from '../../types/rtk-client';
+import { Size } from '../../types/props';
 import { IconPack } from '../../lib/icons';
 import type { Message, TextMessage } from '@cloudflare/realtimekit';
 import { RtkI18n } from '../../lib/lang';
@@ -11,7 +11,6 @@ export type ChatFilter = (message: Message) => boolean;
  * Fully featured chat component with image & file upload, emoji picker and auto-scroll.
  */
 export declare class RtkChat {
-    private chatUpdateListener;
     private chatPermissionUpdateListener;
     host: HTMLRtkChatElement;
     /** Meeting object */
@@ -26,25 +25,8 @@ export declare class RtkChat {
     t: RtkI18n;
     /** UI Overrides */
     overrides: Overrides;
-    /** disables private chat */
-    disablePrivateChat: boolean;
     /** Can current user pin/unpin messages */
     canPinMessages: boolean;
-    /**
-     * @deprecated
-     * Beta API, will change in future
-     * List of target presets allowed as private chat recipient
-     */
-    privatePresetFilter: String[];
-    /**
-     * @deprecated
-     * Beta API, will change in future
-     * A filter function for messages to be displayed
-     */
-    displayFilter: ChatFilter;
-    unreadCountGroups: Record<string, number>;
-    chatGroups: Record<string, Chat[]>;
-    selectedGroup: string;
     now: Date;
     dropzoneActivated: boolean;
     showLatestMessageButton: boolean;
@@ -55,20 +37,16 @@ export declare class RtkChat {
     canSendPrivateTexts: boolean;
     canSendPrivateFiles: boolean;
     emojiPickerEnabled: boolean;
-    chatRecipientId: string;
     participants: Peer[];
     selectedParticipant: Peer;
-    channels: ChatChannel[];
-    selectedChannelId: string;
     editingMessage: TextMessage | null;
     replyMessage: TextMessage | null;
     searchQuery: string;
     selectorState: 'desktop' | 'hide' | 'mobile';
-    creatingChannel: boolean;
+    isSendingMessage: boolean;
     showPinnedMessages: boolean;
     /** Emits updated state data */
     stateUpdate: EventEmitter<States>;
-    private channelMap;
     private resizeObserver;
     private onDragOver;
     private onDragLeave;
@@ -81,28 +59,16 @@ export declare class RtkChat {
             isEdit?: boolean;
         };
     }>): void;
+    onChatSelectorChange(event: CustomEvent<{
+        selectedUser?: Participant;
+    }>): void;
     private disconnectMeeting;
     disconnectedCallback(): void;
     meetingChanged(meeting: Meeting, oldMeeting?: Meeting): void;
-    private getFilteredParticipants;
-    private onParticipantUpdate;
-    chatGroupsChanged(chatGroups: Record<string, Chat[]>): void;
-    private updateUnreadCountGroups;
-    private initializeChatGroups;
-    private onDisplayFilterChanged;
-    private addToChatGroup;
     private getRecipientPeerIds;
-    private isPrivateChatSupported;
-    private updateRecipients;
     private isTextMessagingAllowed;
     private isFileMessagingAllowed;
-    channelSwitchListener(e: CustomEvent): void;
-    private onChannelChanged;
-    private createDMChannel;
-    private cleanup;
     private onQuotedMessageDismiss;
-    private onChannelCreateOrUpdate;
-    private getMemberDisplayName;
     private onNewMessageHandler;
     private onEditMessageHandler;
     private onEditCancel;
@@ -110,8 +76,5 @@ export declare class RtkChat {
     private onDeleteMessage;
     private onMessageEdit;
     private renderComposerUI;
-    private getPrivateChatRecipients;
-    private getPinnedMessageLabel;
-    private renderPinnedMessagesHeader;
     render(): any;
 }

package/dist/types/components/rtk-chat-composer-ui/rtk-chat-composer-ui.d.ts

@@ -18,6 +18,7 @@ interface RtkFile {
     file: File;
 }
 export type RtkNewMessageEvent = RtkText | RtkImage | RtkFile;
+/** @deprecated. This component is deprecated, please use rtk-chat-composer-view instead. */
 export declare class RtkChatComposerUi {
     private $textArea;
     /** Whether user can send text messages */
@@ -40,8 +41,6 @@ export declare class RtkChatComposerUi {
     };
     /** list of members that can be mentioned */
     members?: RTKBasicParticipant[];
-    /** channel id */
-    channelId?: string;
     emojiPickerActive: boolean;
     mentionQuery: string;
     focusedMemberIndex: number;
@@ -52,14 +51,12 @@ export declare class RtkChatComposerUi {
     onEditMessage: EventEmitter<{
         id: string;
         message: string;
-        channelId?: string;
     }>;
     /** Event emitted when message editing is cancelled */
     onEditCancelled: EventEmitter;
     private fileReader;
     private fileToUpload;
     connectedCallback(): void;
-    onChannelChanged(): void;
     componentDidRender(): void;
     get storageKey(): string;
     private handleKeyDown;

package/dist/types/components/rtk-chat-composer-view/rtk-chat-composer-view.d.ts

@@ -16,6 +16,7 @@ export type NewMessageEvent = {
 export declare class RtkChatComposerView {
     /** Whether user can send text messages */
     canSendTextMessage: boolean;
+    isSending: boolean;
     /** Whether user can send file messages */
     canSendFiles: boolean;
     /** Message to be pre-populated */

package/dist/types/components/rtk-chat-header/rtk-chat-header.d.ts

@@ -0,0 +1,7 @@
+export declare class RtkChatHeader {
+    private $pinnedSelector?;
+    private $chatSelector?;
+    private onPinnedToggle;
+    private onChatToggle;
+    render(): any;
+}

package/dist/types/components/rtk-chat-messages-ui-paginated/rtk-chat-messages-ui-paginated.d.ts

@@ -2,27 +2,21 @@ import type { Message, TextMessage } from '@cloudflare/realtimekit';
 import { EventEmitter } from '../../stencil-public-runtime';
 import { IconPack } from '../../lib/icons';
 import { RtkI18n } from '../../lib/lang';
-import { Meeting } from '../../types/rtk-client';
-import { ChatChannel, Size, States } from '../../types/props';
+import { Meeting, Participant } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
 export declare class RtkChatMessagesUiPaginated {
     private $paginatedListRef;
     host: HTMLRtkChatMessagesUiPaginatedElement;
     /** Meeting object */
     meeting: Meeting;
-    /**
-     * Selected channel
-     */
-    selectedChannel?: ChatChannel;
-    /**
-     * Selected channel id
-     */
-    selectedChannelId?: string;
     /** Size */
     size: Size;
     /** Icon pack */
     iconPack: IconPack;
     /** Language */
     t: RtkI18n;
+    /** Selected recipient for private chat; when unset, messages are loaded for public chat (Everyone). */
+    privateChatRecipient: Participant | null;
     /** Event for editing a message */
     editMessageInit: EventEmitter<{
         payload: TextMessage;
@@ -40,18 +34,15 @@ export declare class RtkChatMessagesUiPaginated {
     /** Emits updated state data */
     stateUpdate: EventEmitter<States>;
     children: HTMLElement;
-    /** Whether to align chat bubbles to the left */
-    leftAlign: boolean;
     permissionsChanged: boolean;
     private pageSize;
-    private lastReadMessageIndex;
     componentDidLoad(): void;
     connectedCallback(): void;
+    onPinnedMessageSelect(event: CustomEvent<Message>): Promise<void>;
     disconnectedCallback(): void;
+    privateChatRecipientChanged(): void;
     meetingChanged(meeting: Meeting, oldMeeting?: Meeting): void;
-    channelChanged(): void;
     private permissionsUpdateListener;
-    private maybeMarkChannelAsRead;
     private getChatMessages;
     private createChatNodes;
     private disconnectMeeting;

package/dist/types/components/rtk-chat-selector/rtk-chat-selector.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Meeting, Participant } from '../../types/rtk-client';
+import { Size } from '../../types/props';
+import { Overrides, States, UIConfig } from '../../exports';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+export declare class RtkChatSelector {
+    private $paginatedListRef;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Config */
+    config: UIConfig;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** UI Overrides */
+    overrides: Overrides;
+    /** Size */
+    size: Size;
+    isOpen: boolean;
+    showPrivateChat: boolean;
+    selectedUser: Participant | undefined;
+    pageSize: number;
+    pagesAllowed: number;
+    unreadMap: Map<string, boolean>;
+    /** */
+    dropdownToggle: EventEmitter<{
+        open: boolean;
+    }>;
+    /** */
+    chatSelectorChange: EventEmitter<{
+        selectedUser?: Participant | undefined;
+    }>;
+    /** */
+    close(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    overridesChanged(overrides: any): void;
+    meetingChanged(meeting: Meeting, oldMeeting?: Meeting): void;
+    private disconnectMeeting;
+    private toggle;
+    private selectUser;
+    private chatPermissionUpdateListener;
+    private onParticipantUpdate;
+    private participantJoinedListener;
+    private participantLeftListener;
+    private getParticipants;
+    private createPaticipantNodes;
+    private chatUpdateListener;
+    render(): any;
+}

package/dist/types/components/rtk-idle-screen/rtk-idle-screen.d.ts

@@ -2,6 +2,8 @@ import { IconPack } from '../../lib/icons';
 import { RtkI18n } from '../../lib/lang';
 import { UIConfig } from '../../types/ui-config';
 import { Meeting } from '../../types/rtk-client';
+import { SocketConnectionState } from '@cloudflare/realtimekit';
+import { States } from '../../types/props';
 /**
  * A screen that handles the idle state,
  * i.e; when you are waiting for data about the meeting, specifically the `meeting` object.
@@ -9,11 +11,20 @@ import { Meeting } from '../../types/rtk-client';
 export declare class RtkIdleScreen {
     /** Meeting */
     meeting: Meeting;
+    /** States object */
+    states: States;
     /** Config object */
     config: UIConfig;
     /** Icon pack */
     iconPack: IconPack;
     /** Language */
     t: RtkI18n;
+    joinError: string | undefined;
+    connectionState: SocketConnectionState['state'];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting, oldMeeting?: Meeting): void;
+    private socketStateUpdate;
+    statesChanged(states: States): void;
     render(): any;
 }

package/dist/types/components/rtk-livestream-toggle/rtk-livestream-toggle.d.ts

@@ -5,6 +5,12 @@ import { IconPack } from '../../lib/icons';
 import { RtkI18n } from '../../lib/lang';
 import { Meeting } from '../../types/rtk-client';
 import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+/**
+ * A toggle button for starting/stopping livestream broadcasting.
+ *
+ * Only visible to users with livestream permissions. Allows hosts to
+ * broadcast the meeting to external streaming platforms.
+ */
 export declare class RtkLivestreamToggle {
     /** Variant */
     variant: ControlBarVariant;

package/dist/types/components/rtk-message-view/rtk-message-view.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { IconPack } from '../../exports';
+import { Message } from '@cloudflare/realtimekit';
 export interface MessageAction {
     id: string;
     label: string;
@@ -8,6 +9,10 @@ export interface MessageAction {
 export declare class RtkMessageView {
     /** List of actions to show in menu */
     actions: MessageAction[];
+    /** Type of message */
+    messageType: Message['type'];
+    /** Has the message been edited */
+    isEdited: boolean;
     /** Appearance */
     variant: 'plain' | 'bubble';
     /** Is message pinned */

package/dist/types/components/rtk-paginated-list/rtk-paginated-list.d.ts

@@ -35,9 +35,9 @@ export declare class RtkPaginatedList {
     private $containerRef;
     private $topRef;
     private $bottomRef;
-    private oldTS;
-    private newTS;
-    private maxTS;
+    private oldestPaginatedTimestamp;
+    private latestPaginatedTimestamp;
+    private latestMessageTimestamp;
     private pages;
     private shouldScrollToBottom;
     private showNewMessagesCTR;
@@ -53,8 +53,6 @@ export declare class RtkPaginatedList {
     fetchData: (timestamp: number, size: number, reversed: boolean) => Promise<unknown[]>;
     /** Create nodes */
     createNodes: (data: unknown[]) => VNode[];
-    /** Item id */
-    selectedItemId?: string;
     /** auto scroll list to bottom */
     autoScroll: boolean;
     /** Icon pack */
@@ -66,6 +64,10 @@ export declare class RtkPaginatedList {
     isLoading: boolean;
     isLoadingTop: boolean;
     isLoadingBottom: boolean;
+    /**
+     * Rerender paginated list
+     */
+    rerenderList(): Promise<void>;
     /**
      * Adds a new node to the beginning of the paginated list
      * @param {DataNode} node - The data node to add to the beginning of the list
@@ -82,6 +84,10 @@ export declare class RtkPaginatedList {
      * @param {DataNode} node - The updated data node
      * */
     onNodeUpdate(id: string, node: DataNode): Promise<void>;
+    /**
+     * Resets the paginated list to a given timestamp
+     */
+    reset(timestamp?: number): Promise<void>;
     private pendingScrollAnchor;
     connectedCallback(): void;
     componentDidLoad(): void;

package/dist/types/components/rtk-participants-stage-queue/rtk-participants-stage-queue.d.ts

@@ -1,6 +1,12 @@
 import { UIConfig, Size, IconPack, RtkI18n } from '../../exports';
 import { Meeting, Peer } from '../../types/rtk-client';
 import { ParticipantsViewMode } from '../rtk-participants/rtk-participants';
+/**
+ * A component that displays participants waiting in the stage queue.
+ *
+ * Shows users who are waiting to be promoted to the stage in meetings
+ * with stage functionality enabled.
+ */
 export declare class RtkParticipantsStaged {
     /** Meeting object */
     meeting: Meeting;

package/dist/types/components/rtk-pinned-message-selector/rtk-pinned-message-selector.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Message } from '@cloudflare/realtimekit';
+import type { Meeting, Participant } from '../../types/rtk-client';
+export declare class RtkPinnedMessageSelector {
+    isOpen: boolean;
+    /** */
+    dropdownToggle: EventEmitter<{
+        open: boolean;
+    }>;
+    /** Emits when a pinned message is selected */
+    pinnedMessageSelect: EventEmitter<Message>;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    pageSize: number;
+    pagesAllowed: number;
+    showPinnedMessages: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private disconnectMeeting;
+    meetingChanged(meeting: Meeting, oldMeeting?: Meeting): void;
+    /** */
+    close(): Promise<void>;
+    onChatSelectorChange(event: CustomEvent<{
+        selectedUser?: Participant;
+    }>): Promise<void>;
+    private toggle;
+    private $paginatedListRef;
+    private getPinnedChatMessages;
+    private createPinnedChatNodes;
+    private pinChatListener;
+    private unpinChatListener;
+    private chatUpdateListener;
+    render(): any;
+}

package/dist/types/components/rtk-pip-toggle/rtk-pip-toggle.d.ts

@@ -3,6 +3,12 @@ import { IconPack, Size, States, UIConfig } from '../../exports';
 import { RtkI18n } from '../../lib/lang';
 import { Meeting } from '../../types/rtk-client';
 import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+/**
+ * A toggle button for enabling/disabling Picture-in-Picture mode.
+ *
+ * Allows users to switch the video display to a floating window that stays
+ * on top of other applications.
+ */
 export declare class RtkPipToggle {
     /** Variant */
     variant: ControlBarVariant;

package/dist/types/components/rtk-setup-screen/rtk-setup-screen.d.ts

@@ -27,6 +27,7 @@ export declare class RtkSetupScreen {
     t: RtkI18n;
     displayName: string;
     isJoining: boolean;
+    joinError?: string;
     canEditName: boolean;
     canProduceAudio: boolean;
     connectionState: SocketConnectionState['state'];

package/dist/types/components/rtk-sidebar-ui/rtk-sidebar-ui.d.ts

@@ -5,6 +5,12 @@ export interface RtkSidebarTab {
     name: string | HTMLElement;
 }
 export type RtkSidebarView = 'sidebar' | 'full-screen';
+/**
+ * A sidebar UI component with tabbed navigation.
+ *
+ * Provides a container for sidebar content with tab switching functionality.
+ * Can be displayed as a sidebar or in full-screen mode.
+ */
 export declare class RtkSidebarUi {
     /** View */
     view: RtkSidebarView;
@@ -91,8 +97,6 @@ export declare class RtkSidebarUi {
         horizontal_dots: string;
         ai_sparkle: string;
         meeting_ai: string;
-        create_channel: string;
-        create_channel_illustration: string;
         captionsOn: string;
         captionsOff: string;
         play: string;