move message box style inside component

my-workspace/projects/sae-lib/src/styles/_layout_demo.scss

@@ -246,7 +246,7 @@
 
         &:hover {
           button {
-          
+
             display: block;
           }
         }
@@ -416,88 +416,6 @@
       background: variables.$bg-color-chat;
     }
 
-    .app-theme-light & {
-
-      background: #F5F5F5;
-
-    }
-
-    .app-theme-dark & {
-
-      background: #2c2c2c;
-      color: #d5d5d5;
-
-      .message {
-
-        &.user {
-          background: #232432;
-          color: #8b8ecf;
-        }
-
-        &.llm {
-          background: #232432;
-
-          .message-content {
-            color: #8b8ecf;
-
-          }
-
-          .actions {
-
-            .button {
-              background: #0d0e15;
-              color: grey;
-            }
-          }
-
-        }
-      }
-
-    }
-
-    .app-theme-funky & {
-      color: #1B1D27;
-      background: #ffe8e8;
-
-      .message {
-        .message-content {
-          color: #fff3f3;
-        }
-
-        &.user {
-          background: #d6a3a3;
-          color: #1B1D27;
-        }
-
-        &.llm {
-
-          background: #9f36bc;
-          color: #bba7d6;
-
-          .actions {
-
-            .button {
-              background: #b08eba;
-              color: #d4b4ff;
-            }
-          }
-
-        }
-      }
-
-    }
-
-    .message {
-
-      &.user {
-        background: variables.$neutral-white;
-      }
-
-      &.llm {
-        background: rgba(#3B87CC1A, 10%);
-
-      }
-    }
   }
 
 

old-sae-airwatch/.storybook/preview.ts

@@ -1,4 +1,7 @@
 import type {Preview} from '@storybook/angular';
+import {moduleMetadata} from '@storybook/angular';
+import {Store, StoreModule} from '@ngrx/store';
+import {reducers} from '../src/app/reducers';
 // import 'remixicon/fonts/remixicon.css';
 
 const preview: Preview = {
@@ -11,6 +14,16 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        StoreModule.forRoot(reducers),
+      ],
+      providers: [
+        Store
+      ]
+    })
+  ]
 };
 
 export default preview;

old-sae-airwatch/src/app/chatbot/message-box/message-box.html

@@ -68,7 +68,7 @@
       </div>
     }
   </div>
-  <div [ngClass]="{'expanded': expanded}" class="expanded-message-fullscreen">
+  <div [ngClass]="{'is-expanded': expanded}" class="expanded-message-fullscreen">
     @if (content) {
       <div [innerHTML]="sanitizedContent"></div>
     }

old-sae-airwatch/src/app/chatbot/message-box/message-box.scss

@@ -1,3 +1,5 @@
+@use 'sae-lib/src/styles/variables' as variables;
+
 :host {
   width: 100%;
 }
@@ -28,21 +30,128 @@
   margin-left: 39px;
 }
 
-.message {
 
 
-  .actions {
+  .message {
-    .fullscreen {
+    &.user {
-      float: right;
+      background: #232432;
+      color: #8b8ecf;
+    }
+
+    &.llm {
+      //background: #232432;
+
+      .message-content {
+        color: #8b8ecf;
+      }
+
+      .actions {
+        .button {
+          background: #0d0e15;
+          color: grey;
+        }
+      }
+
+    }
+
+    .actions {
+      .fullscreen {
+        float: right;
+      }
+    }
+
+    .app-theme-light & {
+
+      background: #F5F5F5;
+
+    }
+
+    .app-theme-dark & {
+
+      background: #2c2c2c;
+      color: #d5d5d5;
+
+      .message {
+
+        &.user {
+          background: #232432;
+          color: #8b8ecf;
+        }
+
+        &.llm {
+          background: #232432;
+
+          .message-content {
+            color: #8b8ecf;
+          }
+
+          .actions {
+
+            .button {
+              background: #0d0e15;
+              color: grey;
+            }
+          }
+
+        }
+      }
+
+    }
+
+    .app-theme-funky & {
+      color: #1B1D27;
+      background: #ffe8e8;
+
+      .message {
+        .message-content {
+          color: #fff3f3;
+        }
+
+        &.user {
+          background: #d6a3a3;
+          color: #1B1D27;
+        }
+
+        &.llm {
+
+          background: #9f36bc;
+          color: #bba7d6;
+
+          .actions {
+
+            .button {
+              background: #b08eba;
+              color: #d4b4ff;
+            }
+          }
+
+        }
+      }
+
+    }
+
+    .message {
+
+      &.user {
+        background: variables.$neutral-white;
+      }
+
+      &.llm {
+        background: rgba(#3B87CC1A, 10%);
+
+      }
     }
   }
 
+
   .expanded-message-fullscreen {
     display: none;
     width: 50%;
 
     &.is-visible {
       display: block;
+      padding: 20px;
+      background: #ccc;
+      border-radius: 3px;
     }
   }
-}

old-sae-airwatch/src/app/chatbot/message-box/message-box.ts

@@ -29,7 +29,7 @@ export class MessageBox implements OnChanges {
   @Input() message: ChatbotMessage = {} as ChatbotMessage;
   id: string = "00122121221312";
   sanitizedContent: SafeHtml = "";
-  expanded: boolean = false;
+  expanded: boolean = true;
 
   constructor(private sanitizer: DomSanitizer, private store: Store<StateInterface>) {
   }