feat(AI-130): handled close events inside the iframe (#17)

apps/spa/src/app/app.routes.ts

@@ -18,6 +18,6 @@ export const routes: Routes = [
   },
   {
     path: '**',
-    redirectTo: '/404',
+    redirectTo: '/chat',
   },
 ];

apps/spa/src/app/components/chat/chat-header/chat-header.component.html

@@ -17,7 +17,7 @@
         <mat-icon class="char-header__icon">refresh</mat-icon>
       </button>
     }
-    <button class="ai-assistant-toggle" mat-icon-button (click)="close$.emit()" matTooltip="Close">
+    <button class="ai-assistant-toggle" mat-icon-button (click)="close()" matTooltip="Close">
       <mat-icon class="char-header__icon">close</mat-icon>
     </button>
   </div>

apps/spa/src/app/components/chat/chat-header/chat-header.component.ts

@@ -16,4 +16,9 @@ export class ChatHeaderComponent {
   @Output() config$ = new EventEmitter();
   @Input() isRefreshEnabled = true;
   @Input() isConfigEnabled = true;
+
+  close(): void {
+    this.close$.emit();
+    parent.postMessage({ type: 'chatbot.close' }, '*');
+  }
 }

apps/spa/src/app/modules/+chat/containers/chat-example/chat-example.component.ts

@@ -3,6 +3,7 @@ import { ChatService } from '../../shared/chat.service';
 import { environment } from '../../../../../environments/environment';
 import { MarkdownComponent, MarkdownPipe } from 'ngx-markdown';
 import { AsyncPipe } from '@angular/common';
+import { AssistantIframe } from '@boldare/ai-embedded';
 
 @Component({
   selector: 'ai-chat-example',
@@ -19,12 +20,17 @@ export class ChatExampleComponent {
   markdown = `\`\`\`html
 <script
   src="${environment.appUrl}/assets/js/ai-embedded.js"
+  data-chat-initial="true"
   type="module"
   defer
 ></script>
 \`\`\``;
 
-  constructor(private readonly chatService: ChatService,) {
-    this.chatService.loadScript();
+  constructor(private readonly chatService: ChatService) {
+    if (environment.env === 'prod') {
+      this.chatService.loadScript();
+    } else {
+      new AssistantIframe({ url: `${environment.appUrl}/chat/iframe` }).init();
+    }
   }
 }

apps/spa/src/app/modules/+chat/shared/chat.service.ts

@@ -96,6 +96,7 @@ export class ChatService {
     script.async = true;
     script.defer = true;
     script.type = 'module';
+    script.dataset['chatInitial'] = 'true';
     body.appendChild(script);
   }
 }

apps/spa/src/environments/environment.development.ts

@@ -1,4 +1,5 @@
 export const environment = {
+  env: 'dev',
   appUrl: 'http://localhost:4200',
   apiUrl: 'http://localhost:3000/api',
   websocketUrl: 'http://localhost:3000',

apps/spa/src/environments/environment.ts

@@ -1,4 +1,5 @@
 export const environment = {
+  env: 'prod',
   appUrl: 'https://ai-assistant-c8b469d88808.herokuapp.com',
   apiUrl: 'https://ai-assistant-c8b469d88808.herokuapp.com/api',
   websocketUrl: 'https://ai-assistant-c8b469d88808.herokuapp.com',

apps/spa/src/styles/_extends/_material.scss

@@ -12,6 +12,7 @@
   --mdc-filled-text-field-focus-label-text-color: var(--color-grey-500);
   --mat-option-selected-state-label-text-color: var(--color-primary-500);
   --mat-select-focused-arrow-color: var(--color-primary-500);
+  --mdc-filled-text-field-label-text-size: 14px;
 
   .mat-primary {
     --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--color-primary-500);
@@ -71,4 +72,8 @@
     width: 100%;
     min-height: 42px;
   }
+
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+    top: 28px;
+  }
 }

apps/spa/src/styles/styles.scss

@@ -9,12 +9,13 @@
 
 html,
 body {
-  height: 100%;
+  min-height: 100vh;
 }
 
 body {
   margin: 0;
   background-color: var(--color-grey-300);
+  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   color: var(--color-grey-900);
   font-size: 12px;
   font-family: Roboto, 'Helvetica Neue', sans-serif;

libs/ai-embedded/src/lib/assistant-iframe.styles.ts

@@ -14,7 +14,18 @@ export const addIframeClass = (className: string) => `.${className} {
   border: 0;
   box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px, rgba(17, 17, 26, 0.1) 0 8px 32px;
   z-index: 50;
-}`;
+}
+
+@media (max-width: 460px) {
+  .${className} {
+    width: calc(100% - 20px);
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+    height: calc(100% - 20px);
+  }
+}
+`;
 
 export const addTriggerClass = (className: string) => `
 @keyframes trigger {
@@ -46,6 +57,12 @@ export const addTriggerClass = (className: string) => `
   background-position: center;
   transition: 0.2s all ease-in-out;
   cursor: pointer;
+
+  @media (max-width: 460px) {
+    width: 40px;
+    height: 40px;
+    margin: 10px;
+  }
 }
 
 .${className}:hover {

libs/ai-embedded/src/lib/assistant-iframe.ts

@@ -7,19 +7,21 @@ export class AssistantIframe {
   trigger!: HTMLElement;
 
   constructor(config: Partial<AssistantIframeConfig> = {}) {
-    // @TODO: set URL as an env variable
-    const url = 'https://ai-assistant-c8b469d88808.herokuapp.com';
+    const url = 'https://ai-assistant-c8b469d88808.herokuapp.com/chat/iframe';
 
     this.config = {
-      url: `${url}/chat/iframe`,
+      url: config.url || url,
       elementId: config.elementId || '',
       iframeId: config.elementId || 'ai-assistant-iframe',
       iframeClass: 'ai-assistant-iframe',
       toggleClass: 'ai-assistant-toggle',
       bodyOpenClass: 'ai-assistant-open',
       toggleIsAnimated: config.toggleIsAnimated || true,
     };
-    this.init();
+
+    if (this.getChatInitialValue()) {
+      this.init();
+    }
   }
 
   addStyles(): void {
@@ -32,6 +34,14 @@ export class AssistantIframe {
     );
   }
 
+  getChatInitialValue(): boolean {
+    const dataChatInitialKey = 'data-chat-initial';
+    const element = document.querySelector(`[${dataChatInitialKey}]`);
+    const chatInitialData = element?.getAttribute(dataChatInitialKey);
+
+    return chatInitialData ? JSON.parse(chatInitialData) : false;
+  }
+
   init(): void {
     this.addStyles();
     this.iframe = this.getIframe();
@@ -88,13 +98,14 @@ export class AssistantIframe {
           this.config.bodyOpenClass,
         );
 
-      this.toggleModal(!currentState);
+      this.changeModalState(!currentState);
       this.watchToggleButton();
+      this.watchCloseButton();
     });
   }
 
-  toggleModal(state: boolean): void {
-    if (!state) {
+  changeModalState(currentState: boolean): void {
+    if (!currentState) {
       document.body.classList.add(this.config.bodyOpenClass);
       this.iframe.style.display = 'block';
     } else {
@@ -104,20 +115,19 @@ export class AssistantIframe {
   }
 
   watchToggleButton(): void {
-    const iframeButtons = this.iframe?.contentDocument?.getElementsByClassName(
-      this.config.toggleClass,
-    );
     const appButtons = document.getElementsByClassName(this.config.toggleClass);
-    const buttons = [iframeButtons, appButtons];
-
-    buttons.map(elements => {
-      if (elements?.length) {
-        elements[0].addEventListener('click', () => {
-          const isVisible = document.body.classList.contains(
-            this.config.bodyOpenClass,
-          );
-          this.toggleModal(isVisible);
-        });
+
+    appButtons[0].addEventListener('click', () => {
+      const isVisible = document.body.classList.contains(this.config.bodyOpenClass);
+      this.changeModalState(isVisible);
+    });
+  }
+
+  watchCloseButton(): void {
+    window.addEventListener('message', (message) => {
+      if (message.data.type === 'chatbot.close') {
+        const isVisible = document.body.classList.contains(this.config.bodyOpenClass);
+        this.changeModalState(isVisible);
       }
     });
   }