tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move message box style inside component

Browse source
This commit is contained in:
Tykayn 2025-08-19 14:42:29 +02:00 • committed by tykayn
parent 681d8ecb0b
commit e6d85c7257
5 changed files with 130 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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%);
}
}
}

13
old-sae-airwatch/.storybook/preview.ts
View file

@ -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;

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

@ -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>
}

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

@ -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;
}
}
}

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

@ -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>) {
}