@cloudflare/realtimekit-ui 1.1.0-staging.1 → 1.1.0-staging.10

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

@@ -31,20 +31,18 @@ export declare class RtkChatToggle {
     t: RtkI18n;
     chatActive: boolean;
     canViewChat: boolean;
-    /**
-     * Only used when paginated chat is enabled
-     */
-    hasNewMessages: boolean;
+    private pageSize;
     connectedCallback(): void;
     disconnectedCallback(): void;
     meetingChanged(meeting: Meeting): void;
     statesChanged(states: States): void;
+    private setUnreadMessageCount;
     private onChatUpdate;
-    /** Emits updated state data */
-    stateUpdate: EventEmitter<States>;
     private toggleChat;
     private updateCanView;
     handleChatActiveChange(): void;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
     private buttonEl;
     render(): any;
 }

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

@@ -5,6 +5,7 @@ import { RtkI18n } from '../../lib/lang';
 import { IconPack } from '../../lib/icons';
 import { UIConfig } from '../../types/ui-config';
 import { GridLayout } from '../rtk-grid/rtk-grid';
+import { Overrides } from '../../lib/overrides';
 export type MeetingMode = 'fixed' | 'fill';
 /**
  * A single component which renders an entire meeting UI.
@@ -49,6 +50,8 @@ export declare class RtkMeeting {
     gridLayout: GridLayout;
     /** Icon pack */
     iconPack: IconPack;
+    /** UI Kit Overrides */
+    overrides: Overrides;
     /**
      * Emits `rtkStatesUpdate` so that developers can listen to onRtkStatesUpdate and update their own stores
      * Do not confuse this with `rtkStateUpdate` that other components emit
@@ -65,6 +68,7 @@ export declare class RtkMeeting {
     iconPackChanged(newIconPack: IconPack): void;
     tChanged(newT: RtkI18n): void;
     configChanged(config: UIConfig): void;
+    overridesChanged(overrides: Overrides): void;
     private handleResize;
     private updateStates;
     render(): any;

package/dist/types/components/rtk-menu-item/rtk-menu-item.d.ts

@@ -11,6 +11,8 @@ import { RtkI18n } from '../../lib/lang';
 export declare class RtkMenuItem {
     /** Size */
     size: Size;
+    /** Variant */
+    menuVariant: 'primary' | 'secondary';
     /** Icon pack */
     iconPack: IconPack;
     /** Language */

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

@@ -8,6 +8,8 @@ import { RtkI18n } from '../../lib/lang';
 export declare class RtkMenuList {
     /** Icon pack */
     iconPack: IconPack;
+    /** Variant */
+    menuVariant: 'primary' | 'secondary';
     /** Language */
     t: RtkI18n;
     render(): any;

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,8 +9,14 @@ 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 */
+    pinned: boolean;
     /** Render */
     viewType: 'incoming' | 'outgoing';
     /** Avatar image url */

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

@@ -1,3 +1,29 @@
+/**
+ * NOTE(ikabra): INFINITE SCROLL IMPLEMENTATION:
+ *
+ * Uses scrollend listener for 2way scrolling.
+ * Empty divs ($topRef, $bottomRef) act as scroll triggers to fetch new messages.
+ *
+ * UPWARD SCROLLING:
+ * - Fetch top anchor (element currently visible to the user near top)
+ * - Fetch older messages, push to end of 2D array
+ * - When exceeding pagesAllowed, delete pages and scroll back to anchor
+ *
+ * DOWNWARD SCROLLING:
+ * - Fetch bottom anchor (element currently visible to the user near bottom)
+ * - Fetch new page, insert at the start
+ * - Update timestamps & firstEmptyIndex, then rerender
+ * - When exceeding pagesAllowed, delete pages and scroll back to anchor
+ *
+ * ADDING NEW NODES:
+ * - If no pages exist, load old page
+ * - If on 1st page, append messages till page size is full and then load new page
+ *
+ * DELETE NODE:
+ * - If deleting the only available node, reset to initial state
+ * - If page is empty, delete it
+ * - Update timestamp curors
+ */
 import { VNode } from '../../stencil-public-runtime';
 import { IconPack } from '../../lib/icons';
 import { RtkI18n } from '../../lib/lang';
@@ -6,16 +32,23 @@ export interface DataNode {
     [key: string]: any;
 }
 export declare class RtkPaginatedList {
-    private intersectionObserver;
-    private $paginatedList;
+    private $containerRef;
     private $topRef;
     private $bottomRef;
+    private oldestPaginatedTimestamp;
+    private latestPaginatedTimestamp;
+    private latestMessageTimestamp;
+    private pages;
+    private shouldScrollToBottom;
+    private showNewMessagesCTR;
     /** Page Size */
     pageSize: number;
     /**
      * Number of pages allowed to be shown
      */
     pagesAllowed: number;
+    /** label to show when empty */
+    emptyListLabel: string;
     /** Fetch the data */
     fetchData: (timestamp: number, size: number, reversed: boolean) => Promise<unknown[]>;
     /** Create nodes */
@@ -28,69 +61,37 @@ export declare class RtkPaginatedList {
     iconPack: IconPack;
     /** Language */
     t: RtkI18n;
-    /** label to show when empty */
-    emptyListLabel: string;
+    rerenderBoolean: boolean;
+    showEmptyListLabel: boolean;
     isLoading: boolean;
     isLoadingTop: boolean;
     isLoadingBottom: boolean;
-    hasMoreDataAtTop: boolean;
-    rerenderBoolean: boolean;
-    /**
-     * This gets disabled when the user scrolls up and the bottom node
-     * is not visible anymore.
-     */
-    shouldRenderNewNodes: boolean;
     /**
-     * This gets disabled when the user scrolls up and the bottom node
-     * is not visible anymore.
-     */
-    hasNewNodesToRender: boolean;
-    showEmptyListLabel: boolean;
-    /**
-     * This is a private variable not a state
-     * since we want to debounce rerenders
-     *
-     * A list of pages where each page contains a number of Nodes
-     * [
-     *  [Node 1, Node 2, Node 3.... Node N],
-     *  [Node 1, Node 2, Node 3.... Node N],
-     * ]
-     */
-    private pagesToRender;
-    /**
-     * On a new node created
+     * 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
      */
     onNewNode(node: DataNode): Promise<void>;
     /**
-     * On node deleted
-     */
-    onNodeDelete(key: string): Promise<void>;
+     * Deletes a node anywhere from the list
+     * @param {string} id - The id of the node to delete
+     * */
+    onNodeDelete(id: string): Promise<void>;
     /**
-     * On node updated
-     */
-    onNodeUpdate(key: string, newItem: DataNode): Promise<void>;
-    onItemChanged(newItemId: string, oldItemId: string): void;
+     * Updates a new node anywhere in the list
+     * @param {string} id - The id of the node to update
+     * @param {DataNode} node - The updated data node
+     * */
+    onNodeUpdate(id: string, node: DataNode): Promise<void>;
+    private pendingScrollAnchor;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
-    private currentTime;
-    private observe;
-    private loadFirstPage;
-    private loadTop;
-    private loadBottom;
-    private addNodeToRender;
-    /**
-     * @param start
-     * @param end
-     * @param reversed Defines whether to add the page at the beginning or the end
-     * @param onPageLoaded Callback for when all new nodes are rendered
-     * @param direction Indicates if loading from 'top' or 'bottom'
-     */
-    private loadPage;
+    private loadPrevPage;
+    private loadNextPage;
+    private getScrollAnchor;
+    private restoreScrollToAnchor;
+    private isInView;
+    private scrollToBottom;
     private rerender;
-    private removeLastPageIfNeeded;
-    private onDownArrowClicked;
-    private onLoadMoreOnTopClicked;
     render(): any;
 }

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MeetingMode } from '../rtk-meeting/rtk-meeting';
 import { Meeting } from '../../types/rtk-client';
-import { RtkI18n, IconPack, States, UIConfig } from '../../exports';
+import { RtkI18n, IconPack, States, UIConfig, Overrides } from '../../exports';
 export declare class RtkUiProvider {
     host: HTMLRtkUiProviderElement;
     private peerStore;
@@ -20,6 +20,8 @@ export declare class RtkUiProvider {
     mode: MeetingMode;
     /** Whether to show setup screen or not */
     showSetupScreen: boolean;
+    /** UI Kit Overrides */
+    overrides: Overrides;
     /**
      * Emits `rtkStatesUpdate` so that developers can listen to onRtkStatesUpdate and update their own stores
      * Do not confuse this with `rtkStateUpdate` that other components emit
@@ -35,6 +37,7 @@ export declare class RtkUiProvider {
     iconPackChanged(newIconPack: IconPack): void;
     tChanged(newT: RtkI18n): void;
     configChanged(config: UIConfig): void;
+    overridesChanged(overrides: Overrides): void;
     private roomJoinedListener;
     private waitlistedListener;
     private roomLeftListener;

package/dist/types/components.d.ts

@@ -12,12 +12,13 @@ import { IconPack } from "./lib/icons";
 import { RtkI18n } from "./lib/lang";
 import { AIView } from "./components/rtk-ai/rtk-ai";
 import { ControlBarVariant } from "./components/rtk-controlbar-button/rtk-controlbar-button";
-import { IconPack as IconPack1, RtkI18n as RtkI18n1, Size as Size1, States as States1, UIConfig as UIConfig1 } from "./exports";
+import { IconPack as IconPack1, Overrides as Overrides1, RtkI18n as RtkI18n1, Size as Size1, States as States1, UIConfig as UIConfig1 } from "./exports";
 import { AudioVisualizerVariant } from "./components/rtk-audio-visualizer/rtk-audio-visualizer";
 import { AvatarVariant } from "./components/rtk-avatar/rtk-avatar";
 import { DraftMeeting } from "./utils/breakout-rooms-manager";
 import { ButtonKind, ButtonVariant } from "./components/rtk-button/rtk-button";
 import { FileMessage, ImageMessage, Message, RTKBasicParticipant, RTKPermissionsPreset, RTKPlugin, TextMessage } from "@cloudflare/realtimekit";
+import { Overrides } from "./lib/overrides";
 import { ChatFilter } from "./components/rtk-chat/rtk-chat";
 import { RtkNewMessageEvent } from "./components/rtk-chat-composer-ui/rtk-chat-composer-ui";
 import { NewMessageEvent } from "./components/rtk-chat-composer-view/rtk-chat-composer-view";
@@ -52,12 +53,13 @@ export { IconPack } from "./lib/icons";
 export { RtkI18n } from "./lib/lang";
 export { AIView } from "./components/rtk-ai/rtk-ai";
 export { ControlBarVariant } from "./components/rtk-controlbar-button/rtk-controlbar-button";
-export { IconPack as IconPack1, RtkI18n as RtkI18n1, Size as Size1, States as States1, UIConfig as UIConfig1 } from "./exports";
+export { IconPack as IconPack1, Overrides as Overrides1, RtkI18n as RtkI18n1, Size as Size1, States as States1, UIConfig as UIConfig1 } from "./exports";
 export { AudioVisualizerVariant } from "./components/rtk-audio-visualizer/rtk-audio-visualizer";
 export { AvatarVariant } from "./components/rtk-avatar/rtk-avatar";
 export { DraftMeeting } from "./utils/breakout-rooms-manager";
 export { ButtonKind, ButtonVariant } from "./components/rtk-button/rtk-button";
 export { FileMessage, ImageMessage, Message, RTKBasicParticipant, RTKPermissionsPreset, RTKPlugin, TextMessage } from "@cloudflare/realtimekit";
+export { Overrides } from "./lib/overrides";
 export { ChatFilter } from "./components/rtk-chat/rtk-chat";
 export { RtkNewMessageEvent } from "./components/rtk-chat-composer-ui/rtk-chat-composer-ui";
 export { NewMessageEvent } from "./components/rtk-chat-composer-view/rtk-chat-composer-view";
@@ -676,6 +678,10 @@ export namespace Components {
           * Meeting object
          */
         "meeting": Meeting;
+        /**
+          * UI Overrides
+         */
+        "overrides": Overrides;
         /**
           * @deprecated Beta API, will change in future List of target presets allowed as private chat recipient
          */
@@ -759,6 +765,7 @@ export namespace Components {
           * Sets composer to edit mode
          */
         "isEditing": boolean;
+        "isSending": boolean;
         /**
           * Max length for text input
          */
@@ -1988,6 +1995,10 @@ export namespace Components {
           * Fill type
          */
         "mode": MeetingMode;
+        /**
+          * UI Kit Overrides
+         */
+        "overrides": Overrides;
         /**
           * Whether to show setup screen or not
          */
@@ -2051,6 +2062,10 @@ export namespace Components {
           * Icon pack
          */
         "iconPack": IconPack;
+        /**
+          * Variant
+         */
+        "menuVariant": 'primary' | 'secondary';
         /**
           * Size
          */
@@ -2068,6 +2083,10 @@ export namespace Components {
           * Icon pack
          */
         "iconPack": IconPack;
+        /**
+          * Variant
+         */
+        "menuVariant": 'primary' | 'secondary';
         /**
           * Language
          */
@@ -2131,10 +2150,22 @@ export namespace Components {
           * Icon pack
          */
         "iconPack": IconPack1;
+        /**
+          * Has the message been edited
+         */
+        "isEdited": boolean;
         /**
           * Is the message sent by the current user
          */
         "isSelf": boolean;
+        /**
+          * Type of message
+         */
+        "messageType": Message['type'];
+        /**
+          * Is message pinned
+         */
+        "pinned": boolean;
         /**
           * Time when message was sent
          */
@@ -2488,17 +2519,21 @@ export namespace Components {
          */
         "iconPack": IconPack;
         /**
-          * On a new node created
+          * Adds a new node to the beginning of the paginated list
+          * @param node - The data node to add to the beginning of the list
          */
         "onNewNode": (node: DataNode) => Promise<void>;
         /**
-          * On node deleted
+          * Deletes a node anywhere from the list
+          * @param id - The id of the node to delete
          */
-        "onNodeDelete": (key: string) => Promise<void>;
+        "onNodeDelete": (id: string) => Promise<void>;
         /**
-          * On node updated
+          * Updates a new node anywhere in the list
+          * @param id - The id of the node to update
+          * @param node - The updated data node
          */
-        "onNodeUpdate": (key: string, newItem: DataNode) => Promise<void>;
+        "onNodeUpdate": (id: string, node: DataNode) => Promise<void>;
         /**
           * Page Size
          */
@@ -3911,6 +3946,10 @@ export namespace Components {
           * Fill type
          */
         "mode": MeetingMode1;
+        /**
+          * UI Kit Overrides
+         */
+        "overrides": Overrides1;
         /**
           * Whether to show setup screen or not
          */
@@ -4750,6 +4789,7 @@ declare global {
     flags: { isReply?: boolean; isEdit?: boolean };
   };
         "pinMessage": Message;
+        "editMessage": Message;
         "deleteMessage": Message;
         "rtkStateUpdate": States;
     }
@@ -7303,6 +7343,10 @@ declare namespace LocalJSX {
           * Emits updated state data
          */
         "onRtkStateUpdate"?: (event: RtkChatCustomEvent<States1>) => void;
+        /**
+          * UI Overrides
+         */
+        "overrides"?: Overrides;
         /**
           * @deprecated Beta API, will change in future List of target presets allowed as private chat recipient
          */
@@ -7402,6 +7446,7 @@ declare namespace LocalJSX {
           * Sets composer to edit mode
          */
         "isEditing"?: boolean;
+        "isSending"?: boolean;
         /**
           * Max length for text input
          */
@@ -7590,6 +7635,10 @@ declare namespace LocalJSX {
           * Event emitted when a message is deleted
          */
         "onDeleteMessage"?: (event: RtkChatMessagesUiPaginatedCustomEvent<Message>) => void;
+        /**
+          * Event emitted when a message is edited
+         */
+        "onEditMessage"?: (event: RtkChatMessagesUiPaginatedCustomEvent<Message>) => void;
         /**
           * Event for editing a message
          */
@@ -8804,6 +8853,10 @@ declare namespace LocalJSX {
           * Emits `rtkStatesUpdate` so that developers can listen to onRtkStatesUpdate and update their own stores Do not confuse this with `rtkStateUpdate` that other components emit
          */
         "onRtkStatesUpdate"?: (event: RtkMeetingCustomEvent<States>) => void;
+        /**
+          * UI Kit Overrides
+         */
+        "overrides"?: Overrides;
         /**
           * Whether to show setup screen or not
          */
@@ -8867,6 +8920,10 @@ declare namespace LocalJSX {
           * Icon pack
          */
         "iconPack"?: IconPack;
+        /**
+          * Variant
+         */
+        "menuVariant"?: 'primary' | 'secondary';
         /**
           * Size
          */
@@ -8884,6 +8941,10 @@ declare namespace LocalJSX {
           * Icon pack
          */
         "iconPack"?: IconPack;
+        /**
+          * Variant
+         */
+        "menuVariant"?: 'primary' | 'secondary';
         /**
           * Language
          */
@@ -8947,14 +9008,26 @@ declare namespace LocalJSX {
           * Icon pack
          */
         "iconPack"?: IconPack1;
+        /**
+          * Has the message been edited
+         */
+        "isEdited"?: boolean;
         /**
           * Is the message sent by the current user
          */
         "isSelf"?: boolean;
+        /**
+          * Type of message
+         */
+        "messageType"?: Message['type'];
         /**
           * action event
          */
         "onAction"?: (event: RtkMessageViewCustomEvent<string>) => void;
+        /**
+          * Is message pinned
+         */
+        "pinned"?: boolean;
         /**
           * Time when message was sent
          */
@@ -10893,6 +10966,10 @@ declare namespace LocalJSX {
           * Emits `rtkStatesUpdate` so that developers can listen to onRtkStatesUpdate and update their own stores Do not confuse this with `rtkStateUpdate` that other components emit
          */
         "onRtkStatesUpdate"?: (event: RtkUiProviderCustomEvent<States1>) => void;
+        /**
+          * UI Kit Overrides
+         */
+        "overrides"?: Overrides1;
         /**
           * Whether to show setup screen or not
          */

package/dist/types/exports.d.ts

@@ -4,13 +4,14 @@ export { provideRtkDesignSystem } from './utils/provide-design-system';
 export { extendConfig, generateConfig } from './utils/config';
 export { sendNotification } from './utils/notification';
 export { RtkUiBuilder } from './lib/builder';
-export { uiStore, uiState, getInitialStates, createPeerStore } from './utils/sync-with-store/ui-store';
+export { uiStore, uiState, getInitialStates, createPeerStore, } from './utils/sync-with-store/ui-store';
 export { registerAddons, Addon } from './lib/addons';
 export { UIConfig } from './types/ui-config';
 export { States, Notification, Size, UserPreferences, PollObject, PartialStateEvent, } from './types/props';
 export { Peer } from './types/rtk-client';
 export { defaultConfig, createDefaultConfig } from './lib/default-ui-config';
 export { IconPack, defaultIconPack } from './lib/icons';
+export { type Overrides, defaultOverrides } from './lib/overrides';
 export { LangDict, defaultLanguage, RtkI18n, useLanguage } from './lib/lang';
 export { Sound, default as RtkNotificationsAudio } from './lib/notification';
 export { generateChatGroupKey, getChatGroups, getUnreadChatCounts, getParticipantUserId, } from './utils/chat';

package/dist/types/lib/overrides.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Initialisation overrides for UI component behavior.
+ * These values are passed through rtk-ui-provider or rtk-meeting
+ * and take effect across all child components.
+ */
+export interface Overrides {
+    /**
+     * Disables the emoji picker button in chat composer.
+     * When true, users cannot insert emojis into chat messages.
+     */
+    disableEmojiPicker?: boolean;
+}
+/**
+ * Default UI Kit Overrides
+ */
+export declare const defaultOverrides: Overrides;

package/dist/types/utils/flags.d.ts

@@ -1,7 +1,6 @@
 import RealtimeKitClient from '@cloudflare/realtimekit';
 export declare const FlagsmithFeatureFlags: {
     PLAY_PARTICIPANT_TILE_VIDEO_ON_PAUSE: string;
-    DISABLE_EMOJI_PICKER: string;
     FEAT_PAGINATED_CHAT: string;
     LOG_PLAYING_FAILURES: string;
     FEAT_CHANNEL_CHAT: string;

package/dist/types/utils/sync-with-store/ui-store.d.ts

@@ -4,6 +4,7 @@ import { type RtkI18n } from '../../lib/lang';
 import { type IconPack } from '../../lib/icons';
 import { type States } from '../../types/props';
 import { UIConfig } from '../../exports';
+import { type Overrides } from '../../lib/overrides';
 export declare const getInitialStates: (peerId?: string) => States;
 export interface RtkUiStore {
     meeting: Meeting | undefined | null;
@@ -14,6 +15,7 @@ export interface RtkUiStore {
     peerId: string | null;
     storeType: 'global' | 'peer';
     storeId: string;
+    overrides: Overrides;
 }
 export type RtkUiStoreExtended = ObservableMap<RtkUiStore> & {
     elementsMap: Map<string, HTMLElement[]>;
@@ -21,12 +23,13 @@ export type RtkUiStoreExtended = ObservableMap<RtkUiStore> & {
 declare const uiStore: RtkUiStoreExtended;
 declare const uiState: RtkUiStore;
 export { uiStore, uiState };
-export declare function createPeerStore({ meeting, config, providerId, iconPack, t }: {
+export declare function createPeerStore({ meeting, config, providerId, iconPack, t, overrides, }: {
     meeting: RealtimeKitClient;
     config?: UIConfig;
     providerId: string;
     iconPack: IconPack;
     t: RtkI18n;
+    overrides?: Overrides;
 }): RtkUiStoreExtended;
 declare function appendElement(propName: string, element: HTMLElement, targetStore?: RtkUiStoreExtended): void;
 declare function removeElement(propName: string, element: HTMLElement, targetStore?: RtkUiStoreExtended): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/realtimekit-ui",
-  "version": "1.1.0-staging.1",
+  "version": "1.1.0-staging.10",
   "description": "Pre-built, ready-to-use UI components and utilities for integrating with Cloudflare RealtimeKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",