Merge pull request #87 from cloudflare/sm/RTK-7389-uikit-overrides

[RTK-7389] Introduce UI Kit overrides in rtk-ui-provider and rtk-meeting

Author: ravindra-cloudflare

packages/angular-library/projects/components/src/lib/stencil-generated/components.ts

@@ -602,14 +602,14 @@ export declare interface RtkChannelSelectorView extends Components.RtkChannelSel
 
 
 @ProxyCmp({
-  inputs: ['config', 'disablePrivateChat', 'displayFilter', 'iconPack', 'meeting', 'privatePresetFilter', 'size', 't']
+  inputs: ['config', 'disablePrivateChat', 'displayFilter', 'iconPack', 'meeting', 'overrides', 'privatePresetFilter', 'size', 't']
 })
 @Component({
   selector: 'rtk-chat',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['config', 'disablePrivateChat', 'displayFilter', 'iconPack', 'meeting', 'privatePresetFilter', 'size', 't'],
+  inputs: ['config', 'disablePrivateChat', 'displayFilter', 'iconPack', 'meeting', 'overrides', 'privatePresetFilter', 'size', 't'],
 })
 export class RtkChat {
   protected el: HTMLRtkChatElement;
@@ -1931,14 +1931,14 @@ export declare interface RtkMarkdownView extends Components.RtkMarkdownView {}
 
 
 @ProxyCmp({
-  inputs: ['applyDesignSystem', 'config', 'gridLayout', 'iconPack', 'leaveOnUnmount', 'loadConfigFromPreset', 'meeting', 'mode', 'showSetupScreen', 'size', 't']
+  inputs: ['applyDesignSystem', 'config', 'gridLayout', 'iconPack', 'leaveOnUnmount', 'loadConfigFromPreset', 'meeting', 'mode', 'overrides', 'showSetupScreen', 'size', 't']
 })
 @Component({
   selector: 'rtk-meeting',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['applyDesignSystem', 'config', 'gridLayout', 'iconPack', 'leaveOnUnmount', 'loadConfigFromPreset', 'meeting', 'mode', 'showSetupScreen', 'size', 't'],
+  inputs: ['applyDesignSystem', 'config', 'gridLayout', 'iconPack', 'leaveOnUnmount', 'loadConfigFromPreset', 'meeting', 'mode', 'overrides', 'showSetupScreen', 'size', 't'],
 })
 export class RtkMeeting {
   protected el: HTMLRtkMeetingElement;
@@ -3655,14 +3655,14 @@ export declare interface RtkTranscripts extends Components.RtkTranscripts {}
 
 
 @ProxyCmp({
-  inputs: ['config', 'iconPack', 'meeting', 'mode', 'showSetupScreen', 't']
+  inputs: ['config', 'iconPack', 'meeting', 'mode', 'overrides', 'showSetupScreen', 't']
 })
 @Component({
   selector: 'rtk-ui-provider',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['config', 'iconPack', 'meeting', 'mode', 'showSetupScreen', 't'],
+  inputs: ['config', 'iconPack', 'meeting', 'mode', 'overrides', 'showSetupScreen', 't'],
 })
 export class RtkUiProvider {
   protected el: HTMLRtkUiProviderElement;

packages/core/src/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
          */
@@ -1988,6 +1994,10 @@ export namespace Components {
           * Fill type
          */
         "mode": MeetingMode;
+        /**
+          * UI Kit Overrides
+         */
+        "overrides": Overrides;
         /**
           * Whether to show setup screen or not
          */
@@ -3919,6 +3929,10 @@ export namespace Components {
           * Fill type
          */
         "mode": MeetingMode1;
+        /**
+          * UI Kit Overrides
+         */
+        "overrides": Overrides1;
         /**
           * Whether to show setup screen or not
          */
@@ -7311,6 +7325,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
          */
@@ -8812,6 +8830,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
          */
@@ -10909,6 +10931,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
          */

packages/core/src/components/rtk-chat/rtk-chat.tsx

@@ -30,6 +30,7 @@ import { States, UIConfig, createDefaultConfig } from '../../exports';
 import { ChannelItem } from '../rtk-channel-selector-view/rtk-channel-selector-view';
 import { SyncWithStore } from '../../utils/sync-with-store';
 import { NewMessageEvent } from '../rtk-chat-composer-view/rtk-chat-composer-view';
+import { Overrides, defaultOverrides } from '../../lib/overrides';
 
 export type ChatFilter = (message: Message) => boolean;
 
@@ -82,6 +83,11 @@ export class RtkChat {
   @Prop()
   t: RtkI18n = useLanguage();
 
+  /** UI Overrides */
+  @SyncWithStore()
+  @Prop()
+  overrides: Overrides = defaultOverrides;
+
   /** disables private chat */
   @Prop() disablePrivateChat: boolean = false;
 
@@ -572,11 +578,7 @@ export class RtkChat {
         isEditing={!!this.editingMessage}
         canSendTextMessage={this.isTextMessagingAllowed()}
         canSendFiles={this.isFileMessagingAllowed()}
-        disableEmojiPicker={
-          !!this.meeting?.__internals__?.features.hasFeature(
-            FlagsmithFeatureFlags.DISABLE_EMOJI_PICKER
-          )
-        }
+        disableEmojiPicker={this.overrides.disableEmojiPicker}
         maxLength={this.meeting.chat.maxTextLimit}
         rateLimits={this.meeting.chat.rateLimits}
         inputTextPlaceholder={this.t('chat.message_placeholder')}

packages/core/src/components/rtk-meeting/rtk-meeting.tsx

@@ -17,6 +17,7 @@ import {
   uiStore as legacyGlobalUIStore,
   type RtkUiStoreExtended,
 } from '../../utils/sync-with-store/ui-store';
+import { Overrides, defaultOverrides } from '../../lib/overrides';
 
 export type MeetingMode = 'fixed' | 'fill';
 
@@ -119,6 +120,10 @@ export class RtkMeeting {
   @Prop()
   iconPack: IconPack = defaultIconPack;
 
+  /** UI Kit Overrides */
+  @Prop()
+  overrides: Overrides = defaultOverrides;
+
   /**
    * Emits `rtkStatesUpdate` so that developers can listen to onRtkStatesUpdate and update their own stores
    * Do not confuse this with `rtkStateUpdate` that other components emit
@@ -150,6 +155,7 @@ export class RtkMeeting {
     this.iconPackChanged(this.iconPack);
     this.tChanged(this.t);
     this.configChanged(this.config);
+    this.overridesChanged(this.overrides);
 
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.resizeObserver.observe(this.host);
@@ -251,6 +257,7 @@ export class RtkMeeting {
         iconPack: this.iconPack,
         t: this.t,
         providerId: this.providerId,
+        overrides: deepMerge({ ...defaultOverrides }, this.overrides) as Overrides,
       }) as RtkUiStoreExtended;
 
       // Notify components that peer specific store is now available
@@ -356,6 +363,13 @@ export class RtkMeeting {
     }
   }
 
+  @Watch('overrides')
+  overridesChanged(overrides: Overrides) {
+    if (this.peerStore) {
+      this.peerStore.state.overrides = deepMerge({ ...defaultOverrides }, overrides) as Overrides;
+    }
+  }
+
   private handleResize() {
     this.size = getSize(this.host.clientWidth);
   }

packages/core/src/components/rtk-ui-provider/rtk-ui-provider.tsx

@@ -10,6 +10,8 @@ import {
   useLanguage,
   defaultIconPack,
   provideRtkDesignSystem,
+  Overrides,
+  defaultOverrides,
 } from '../../exports';
 import {
   uiStore as legacyGlobalUIStore,
@@ -56,6 +58,10 @@ export class RtkUiProvider {
   /** Whether to show setup screen or not */
   @Prop() showSetupScreen: boolean = false;
 
+  /** UI Kit Overrides */
+  @Prop()
+  overrides: Overrides = defaultOverrides;
+
   /**
    * Emits `rtkStatesUpdate` so that developers can listen to onRtkStatesUpdate and update their own stores
    * Do not confuse this with `rtkStateUpdate` that other components emit
@@ -81,6 +87,7 @@ export class RtkUiProvider {
     this.iconPackChanged(this.iconPack);
     this.tChanged(this.t);
     this.configChanged(this.config);
+    this.overridesChanged(this.overrides);
   }
 
   disconnectedCallback() {
@@ -169,6 +176,7 @@ export class RtkUiProvider {
         iconPack: this.iconPack,
         t: this.t,
         providerId: this.providerId,
+        overrides: deepMerge({ ...defaultOverrides }, this.overrides) as Overrides,
       }) as RtkUiStoreExtended;
 
       // Notify components that peer specific store is now available
@@ -243,6 +251,13 @@ export class RtkUiProvider {
     }
   }
 
+  @Watch('overrides')
+  overridesChanged(overrides: Overrides) {
+    if (this.peerStore) {
+      this.peerStore.state.overrides = deepMerge({ ...defaultOverrides }, overrides) as Overrides;
+    }
+  }
+
   private roomJoinedListener = () => {
     this.updateStates({ meeting: 'joined' });
   };

packages/core/src/exports.ts

@@ -5,7 +5,12 @@ 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';
 
 // addons
 export { registerAddons, Addon } from './lib/addons';
@@ -25,6 +30,7 @@ export { Peer } from './types/rtk-client';
 // UIConfig, Icon Pack, i18n and Notification Sounds
 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';