[CORL-1086] Support bodyClassName in embed (#2969)

* feat: support embed config `bodyClassName`

* chore: add comment

src/core/client/embed/Coral.ts

@@ -16,6 +16,8 @@ export interface Config {
   events?: (eventEmitter: EventEmitter2) => void;
   accessToken?: string;
   enableDeprecatedEvents?: boolean;
+  /** Allow setting className of body tag inside iframe */
+  bodyClassName?: string;
 }
 
 export function createStreamEmbed(config: Config): StreamEmbed {
@@ -37,6 +39,7 @@ export function createStreamEmbed(config: Config): StreamEmbed {
     autoRender: config.autoRender,
     eventEmitter,
     accessToken: config.accessToken,
+    bodyClassName: config.bodyClassName,
     enableDeprecatedEvents: config.enableDeprecatedEvents,
   });
 }

src/core/client/embed/StreamEmbed.ts

@@ -33,6 +33,7 @@ export interface StreamEmbedConfig {
   id: string;
   rootURL: string;
   accessToken?: string;
+  bodyClassName?: string;
   enableDeprecatedEvents?: boolean;
 }
 
@@ -131,6 +132,7 @@ export class StreamEmbed {
 
     const externalConfig: ExternalConfig = {
       accessToken: this.config.accessToken,
+      bodyClassName: this.config.bodyClassName,
     };
 
     const streamDecorators: ReadonlyArray<Decorator> = [

src/core/client/embed/decorators/withConfig.spec.ts

@@ -3,7 +3,7 @@ import sinon from "sinon";
 import withConfig from "./withConfig";
 
 it("should emit events from pym to Config", () => {
-  const config = { accessToken: "token" };
+  const config = { accessToken: "token", bodyClassName: "custom" };
   const fakePym = {
     onMessage: (type: string, callback: () => void) => {
       expect(type).toBe("getConfig");

src/core/client/framework/lib/externalConfig.ts

@@ -4,6 +4,7 @@ import { areWeInIframe } from "coral-framework/utils";
 
 export interface ExternalConfig {
   accessToken?: string;
+  bodyClassName?: string;
 }
 
 export function getExternalConfig(

src/core/client/stream/local/initLocalState.ts

@@ -18,8 +18,14 @@ export default async function initLocalState(
   auth?: AuthState
 ) {
   const config = await getExternalConfig(context.pym);
-  if (config && config.accessToken) {
-    auth = storeAccessToken(config.accessToken);
+  if (config) {
+    if (config.accessToken) {
+      auth = storeAccessToken(config.accessToken);
+    }
+    // append body class name if set in config.
+    if (config.bodyClassName) {
+      document.body.classList.add(config.bodyClassName);
+    }
   }
 
   initLocalBaseState(environment, context, auth);