From e6d85c72575f218b297d4c872c6ad7f694e7d4c9 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 19 Aug 2025 14:42:29 +0200
Subject: [PATCH] move message box style inside component

---
 .../sae-lib/src/styles/_layout_demo.scss      |  84 +------------
 old-sae-airwatch/.storybook/preview.ts        |  13 ++
 .../app/chatbot/message-box/message-box.html  |   2 +-
 .../app/chatbot/message-box/message-box.scss  | 119 +++++++++++++++++-
 .../app/chatbot/message-box/message-box.ts    |   2 +-
 5 files changed, 130 insertions(+), 90 deletions(-)

diff --git a/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss b/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss
index 422f3f5..82993aa 100644
--- a/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss
+++ b/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%);
-
-      }
-    }
   }
 
 
diff --git a/old-sae-airwatch/.storybook/preview.ts b/old-sae-airwatch/.storybook/preview.ts
index 418c712..c91c628 100644
--- a/old-sae-airwatch/.storybook/preview.ts
+++ b/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;
diff --git a/old-sae-airwatch/src/app/chatbot/message-box/message-box.html b/old-sae-airwatch/src/app/chatbot/message-box/message-box.html
index 57a5d27..64f5fb0 100644
--- a/old-sae-airwatch/src/app/chatbot/message-box/message-box.html
+++ b/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>
     }
diff --git a/old-sae-airwatch/src/app/chatbot/message-box/message-box.scss b/old-sae-airwatch/src/app/chatbot/message-box/message-box.scss
index 7bf7ff6..e1a6cf6 100644
--- a/old-sae-airwatch/src/app/chatbot/message-box/message-box.scss
+++ b/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 {
-    .fullscreen {
-      float: right;
+  .message {
+    &.user {
+      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;
     }
   }
-}
diff --git a/old-sae-airwatch/src/app/chatbot/message-box/message-box.ts b/old-sae-airwatch/src/app/chatbot/message-box/message-box.ts
index 47ea310..fff3f1b 100644
--- a/old-sae-airwatch/src/app/chatbot/message-box/message-box.ts
+++ b/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>) {
   }