feat: add custom styling feature

packages/chat-component/src/config/global-config.js

@@ -12,6 +12,13 @@ const globalConfig = {
   ],
   DEFAULT_PROMPTS_HEADING_CHAT: 'Chat with our support team',
   DEFAULT_PROMPTS_HEADING_ASK: 'Ask now',
+  // Custom Branding
+  IS_CUSTOM_BRANDING: true,
+  // Custom Branding details
+  // All these should come from persistence config
+  BRANDING_URL: '#',
+  BRANDING_LOGO_ALT: 'Brand Logo',
+  BRANDING_HEADLINE: 'Welcome to the Support Assistant of our Brand',
   // This are the chat bubbles that will be displayed in the chat
   CHAT_MESSAGES: [],
   // This are the labels for the chat button and input

packages/chat-component/src/main.ts

@@ -25,6 +25,9 @@ import iconSpinner from '../public/svg/spinner-icon.svg?raw';
 import iconMicOff from '../public/svg/mic-icon.svg?raw';
 import iconMicOn from '../public/svg/mic-record-on-icon.svg?raw';
 
+// Branding
+import iconLogo from '../public/branding/brand-logo-contoso.svg?raw';
+
 import { marked } from 'marked';
 
 /**
@@ -56,9 +59,14 @@ export class ChatComponent extends LitElement {
   @property({ type: String, attribute: 'data-use-stream', converter: (value) => value?.toLowerCase() === 'true' })
   useStream: boolean = chatHttpOptions.stream;
 
+  @property({ type: String, attribute: 'data-custom-branding', converter: (value) => value?.toLowerCase() === 'true' })
+  isCustomBranding: boolean = globalConfig.IS_CUSTOM_BRANDING;
+
   @property({ type: String, attribute: 'data-overrides', converter: (value) => JSON.parse(value || '{}') })
   overrides: RequestOverrides = {};
 
+  @property({ type: String, attribute: 'data-custom-styles', converter: (value) => JSON.parse(value || '{}') })
+  customStyles: any = {};
   //--
 
   @property({ type: String })
@@ -133,6 +141,26 @@ export class ChatComponent extends LitElement {
 
   static override styles = [mainStyle];
 
+  // The following block is only necessary when you want to override the component from settings in the outside.
+  // Remove this block when not needed, considering that updated() is a LitElement lifecycle method
+  // that may be used by other components if you update this code.
+  override updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('customStyles')) {
+      this.style.setProperty('--c-accent-high', this.customStyles.AccentHigh);
+      this.style.setProperty('--c-accent-light', this.customStyles.AccentLight);
+      this.style.setProperty('--c-accent-dark', this.customStyles.AccentDark);
+      this.style.setProperty('--c-text-color', this.customStyles.TextColor);
+      this.style.setProperty('--c-light-gray', this.customStyles.BackgroundColor);
+      this.style.setProperty('--c-dark-gray', this.customStyles.ForegroundColor);
+      this.style.setProperty('--c-base-gray', this.customStyles.FormBackgroundColor);
+      this.style.setProperty('--radius-base', this.customStyles.BorderRadius);
+      this.style.setProperty('--border-base', this.customStyles.BorderWidth);
+      this.style.setProperty('--font-base', this.customStyles.FontBaseSize);
+    }
+  }
+
   // debounce dispatching must-scroll event
   debounceScrollIntoView(): void {
     let timeout: any = 0;
@@ -609,6 +637,33 @@ export class ChatComponent extends LitElement {
     return this.isProcessingResponse ? cancelChatButton : submitChatButton;
   }
 
+  // Render Branding if custom branding is enabled
+  renderBrandingBanner() {
+    if (this.isCustomBranding) {
+      return html`
+        <header class="branding__banner">
+          <a class="branding__link" href="${globalConfig.BRANDING_URL}" target="_blank" rel="noopener noreferrer">
+            ${unsafeSVG(iconLogo)}
+          </a>
+          <h1 class="branding__hl">${globalConfig.BRANDING_HEADLINE}</h1>
+        </header>
+      `;
+    }
+    return '';
+  }
+
+  // Render assistant logo as per branding
+  renderBrandingAvatar() {
+    if (this.isCustomBranding) {
+      return html`
+        <a class="branding__link" href="${globalConfig.BRANDING_URL}" target="_blank" rel="noopener noreferrer">
+          ${unsafeSVG(iconLogo)}
+        </a>
+      `;
+    }
+    return '';
+  }
+
   // Render the chat component as a web component
   override render() {
     return html`
@@ -636,32 +691,35 @@ export class ChatComponent extends LitElement {
                           ${message.isUserMessage
                             ? ''
                             : html` <div class="chat__header">
-                                <button
-                                  title="${globalConfig.SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT}"
-                                  class="button chat__header--button"
-                                  data-testid="chat-show-thought-process"
-                                  @click="${this.handleShowThoughtProcess}"
-                                  ?disabled="${this.isShowingThoughtProcess || !this.canShowThoughtProcess}"
-                                >
-                                  <span class="chat__header--span"
-                                    >${globalConfig.SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT}</span
+                                <div class="chat__header--avatar">${this.renderBrandingAvatar()}</div>
+                                <div class="chat__header--buttons">
+                                  <button
+                                    title="${globalConfig.SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT}"
+                                    class="button chat__header--button"
+                                    data-testid="chat-show-thought-process"
+                                    @click="${this.handleShowThoughtProcess}"
+                                    ?disabled="${this.isShowingThoughtProcess || !this.canShowThoughtProcess}"
                                   >
-
-                                  ${unsafeSVG(iconLightBulb)}
-                                </button>
-                                <button
-                                  title="${globalConfig.COPY_RESPONSE_BUTTON_LABEL_TEXT}"
-                                  class="button chat__header--button"
-                                  @click="${this.copyResponseToClipboard}"
-                                  ?disabled="${this.isDisabled}"
-                                >
-                                  <span class="chat__header--span"
-                                    >${this.isResponseCopied
-                                      ? globalConfig.COPIED_SUCCESSFULLY_MESSAGE
-                                      : globalConfig.COPY_RESPONSE_BUTTON_LABEL_TEXT}</span
+                                    <span class="chat__header--span"
+                                      >${globalConfig.SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT}</span
+                                    >
+
+                                    ${unsafeSVG(iconLightBulb)}
+                                  </button>
+                                  <button
+                                    title="${globalConfig.COPY_RESPONSE_BUTTON_LABEL_TEXT}"
+                                    class="button chat__header--button"
+                                    @click="${this.copyResponseToClipboard}"
+                                    ?disabled="${this.isDisabled}"
                                   >
-                                  ${this.isResponseCopied ? unsafeSVG(iconSuccess) : unsafeSVG(iconCopyToClipboard)}
-                                </button>
+                                    <span class="chat__header--span"
+                                      >${this.isResponseCopied
+                                        ? globalConfig.COPIED_SUCCESSFULLY_MESSAGE
+                                        : globalConfig.COPY_RESPONSE_BUTTON_LABEL_TEXT}</span
+                                    >
+                                    ${this.isResponseCopied ? unsafeSVG(iconSuccess) : unsafeSVG(iconCopyToClipboard)}
+                                  </button>
+                                </div>
                               </div>`}
                           ${message.text.map((textEntry) => this.renderTextEntry(textEntry))}
                           ${this.renderCitation(message.citations)}
@@ -694,7 +752,8 @@ export class ChatComponent extends LitElement {
             <!-- Conditionally render default prompts based on hasDefaultPromptsEnabled -->
             ${this.hasDefaultPromptsEnabled
               ? html`
-                  <div class="defaults__container">
+                  ${this.renderBrandingBanner()}
+                  <div class="defaults__container" data-testid="chat-branding">
                     <h1 class="headline">
                       ${this.interactionModel === 'chat'
                         ? this.title || globalConfig.DEFAULT_PROMPTS_HEADING_CHAT