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

airwatch styles

Browse source
This commit is contained in:
Tykayn 2025-10-13 09:20:31 +02:00 • committed by tykayn
parent a4f106ab84
commit 91f078ae01
13 changed files with 2464 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

96
airwatch/src/app/chatbot/chatbot.html
View file

@ -34,7 +34,7 @@
</span> </span>
} @else { } @else {
<img src="safran_logo_small.svg" alt="logo"> <img alt="logo" src="safran_logo_small.svg">
} }
</a> </a>
@ -136,39 +136,39 @@
@if (appState.displayConversationListPanelLarge) { @if (appState.displayConversationListPanelLarge) {
<div class="conversation-container"> <div class="conversation-container">
@for (conversation of conversationsList; track conversation) { @for (conversation of conversationsList; track conversation) {
<div class="conversation-item" <div (click)="updateActiveConversation(conversation)"
[ngClass]="{'is-active' : conversation.name == activeConversation?.name }" [ngClass]="{'is-active' : conversation.name == activeConversation?.name }"
(click)="updateActiveConversation(conversation)"> class="conversation-item">
<div class="actions"> <!-- <div class="actions">-->
<div class="dropdown is-hoverable"> <!-- <div class="dropdown is-hoverable">-->
<div class="dropdown-trigger"> <!-- <div class="dropdown-trigger">-->
<div class="menu"> <!-- <div class="menu">-->
<i class="ri-more-line"></i> <!-- <i class="ri-more-line"></i>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="dropdown-menu" role="menu"> <!-- <div class="dropdown-menu" role="menu">-->
<div class="dropdown-content"> <!-- <div class="dropdown-content">-->
<a class="dropdown-item" (click)="copyConversationLink(conversation)"> <!-- <a class="dropdown-item" (click)="copyConversationLink(conversation)">-->
<i class="ri-link-m"></i> <!-- <i class="ri-link-m"></i>-->
<span>Share</span> <!-- <span>Share</span>-->
</a> <!-- </a>-->
<a class="dropdown-item" (click)="toggleVisibleEditInput(conversation)"> <!-- <a class="dropdown-item" (click)="toggleVisibleEditInput(conversation)">-->
<i class="ri-edit-line"></i> <!-- <i class="ri-edit-line"></i>-->
<span>Rename</span> <!-- <span>Rename</span>-->
</a> <!-- </a>-->
<a class="dropdown-item" (click)="pinConversation(conversation)"> <!-- <a class="dropdown-item" (click)="pinConversation(conversation)">-->
<i class="ri-pushpin-fill"></i> <!-- <i class="ri-pushpin-fill"></i>-->
<span>Pin</span> <!-- <span>Pin</span>-->
</a> <!-- </a>-->
<hr class="dropdown-divider"> <!-- <hr class="dropdown-divider">-->
<a class="dropdown-item trash" (click)="deleteConversation(conversation)"> <!-- <a class="dropdown-item trash" (click)="deleteConversation(conversation)">-->
<i class="ri-delete-bin-line"></i> <!-- <i class="ri-delete-bin-line"></i>-->
<span>Delete</span> <!-- <span>Delete</span>-->
</a> <!-- </a>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="container-text"> <div class="container-text">
@if (conversation.pinned) { @if (conversation.pinned) {
<span class="pinned-icon"> <span class="pinned-icon">
@ -188,13 +188,13 @@
<span class="description"> <span class="description">
{{ conversation.description || 'No description' }} {{ conversation.description || 'No description' }}
</span> </span>
<input type="text" [(ngModel)]="conversation.name" <input [(ngModel)]="conversation.name" [ngClass]="{'is-expanded': ! conversation.visibleInput}"
[ngClass]="{'is-expanded': ! conversation.visibleInput}"> type="text">
<!-- <i class="ri-pencil-line" (click)="toggleVisibleEditInput(conversation)"></i>--> <!-- <i class="ri-pencil-line" (click)="toggleVisibleEditInput(conversation)"></i>-->
</div> </div>
<div class="active-peak"> <div class="active-peak">
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg fill="none" height="14" viewBox="0 0 12 14" width="12" xmlns="http://www.w3.org/2000/svg">
<path d="M12 7L0 13.9282V0.0717969L12 7Z" fill="#3B87CC" fill-opacity="0.1"/> <path d="M12 7L0 13.9282V0.0717969L12 7Z" fill="#3B87CC" fill-opacity="0.1"/>
</svg> </svg>
</div> </div>
@ -244,9 +244,9 @@
</div> </div>
<div class="action"> <div class="action">
@if (displayExportConversation) { @if (displayExportConversation) {
<div class="dropdown" [ngClass]="{'is-active': isExportDropdownActive}"> <div [ngClass]="{'is-active': isExportDropdownActive}" class="dropdown">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<div class="export-chat-button is-clickable" (click)="toggleExportDropdown()"> <div (click)="toggleExportDropdown()" class="export-chat-button is-clickable">
<i class="ri-download-2-line"></i> <i class="ri-download-2-line"></i>
<span class="label"> <span class="label">
Export chat Export chat
@ -255,13 +255,13 @@
</div> </div>
<div class="dropdown-menu" role="menu"> <div class="dropdown-menu" role="menu">
<div class="dropdown-content"> <div class="dropdown-content">
<a class="dropdown-item" (click)="exportConversation('csv')"> <a (click)="exportConversation('csv')" class="dropdown-item">
CSV CSV
</a> </a>
<a class="dropdown-item" (click)="exportConversation('excel')"> <a (click)="exportConversation('excel')" class="dropdown-item">
Excel Excel
</a> </a>
<a class="dropdown-item" (click)="exportConversation('txt')"> <a (click)="exportConversation('txt')" class="dropdown-item">
TXT TXT
</a> </a>
</div> </div>
@ -292,8 +292,8 @@
<app-time-separator></app-time-separator> <app-time-separator></app-time-separator>
@if (activeConversation && activeConversation.messages) { @if (activeConversation && activeConversation.messages) {
@for (message of activeConversation.messages; track message) { @for (message of activeConversation.messages; track message) {
<app-message-box [message]="message" [kind]="message.kind" <app-message-box [content]="message.content" [kind]="message.kind"
[content]="message.content"></app-message-box> [message]="message"></app-message-box>
} }
} }
@ -305,19 +305,19 @@
</div> </div>
<div class="conversation-bottom"> <div class="conversation-bottom">
<app-prompt-input></app-prompt-input> <app-prompt-input></app-prompt-input>
<app-tools-options [alignLeft]="true" [hideDisabledButtons]="true"></app-tools-options> <app-tools-options [alignLeft]="true" [disableToggle]="true"
[hideDisabledButtons]="true"></app-tools-options>
<div class="bottom-warning-container">
<app-warning-bugs></app-warning-bugs>
</div>
</div> </div>
</div> </div>
} }
<div class="bottom-warning-container">
<app-warning-bugs></app-warning-bugs>
</div>
</div> </div>
<div [ngClass]="{'expanded': appState.displaySourcesPanelLarge}" class="column panel-more"> <div [ngClass]="{'expanded': appState.displaySourcesPanelLarge}" class="column panel-more">

4
airwatch/src/app/chatbot/chatbot.ts
View file

@ -2,7 +2,6 @@ import {AfterViewChecked, Component, ElementRef, ViewChild} from '@angular/core'
import {PromptInput} from './prompt-input/prompt-input'; import {PromptInput} from './prompt-input/prompt-input';
import {MessageBox} from './message-box/message-box'; import {MessageBox} from './message-box/message-box';
import {NewInput} from './new-input/new-input'; import {NewInput} from './new-input/new-input';
import {FeedbackButton} from './feedback-button/feedback-button';
import {WarningBugs} from './warning-bugs/warning-bugs'; import {WarningBugs} from './warning-bugs/warning-bugs';
import {VersionInfos} from './version-infos/version-infos'; import {VersionInfos} from './version-infos/version-infos';
import {LoadingNotification} from './loading-notification/loading-notification'; import {LoadingNotification} from './loading-notification/loading-notification';
@ -20,6 +19,7 @@ import {ChatbotMessage, ChatbotMessageKind} from '../services/chatbot.message.ty
import {ToolsOptions} from './tools-options/tools-options'; import {ToolsOptions} from './tools-options/tools-options';
import {TranslationService} from '../services/translation.service'; import {TranslationService} from '../services/translation.service';
import {TimeSeparator} from './time-separator/time-separator'; import {TimeSeparator} from './time-separator/time-separator';
import {FeedbackButton} from './feedback-button/feedback-button';
@Component({ @Component({
selector: 'app-chatbot', selector: 'app-chatbot',
@ -36,6 +36,8 @@ import {TimeSeparator} from './time-separator/time-separator';
CommonModule, CommonModule,
ToolsOptions, ToolsOptions,
TimeSeparator, TimeSeparator,
FeedbackButton,
FeedbackButton,
], ],
templateUrl: './chatbot.html', templateUrl: './chatbot.html',
styleUrl: './chatbot.scss' styleUrl: './chatbot.scss'

18
airwatch/src/app/chatbot/message-box/message-box.html
View file

@ -52,16 +52,16 @@
</div> </div>
<div class=" has-text-right"> <div class=" has-text-right">
<button (click)="generateResponse()" class="button generate-response"> <!-- <button (click)="generateResponse()" class="button generate-response">-->
<i class="ri-refresh-line"></i> <!-- <i class="ri-refresh-line"></i>-->
<span class="label"> <!-- <span class="label">-->
Generate Response <!-- Generate Response-->
</span> <!-- </span>-->
</button> <!-- </button>-->
<app-copy [textToCopy]="content"></app-copy> <app-copy [textToCopy]="content"></app-copy>
<button (click)="bookmark()" class="button bookmark"> <!-- <button (click)="bookmark()" class="button bookmark">-->
<i class="ri-bookmark-line"></i> <!-- <i class="ri-bookmark-line"></i>-->
</button> <!-- </button>-->
<button (click)="toggleSources()" class="button sources"> <button (click)="toggleSources()" class="button sources">
<i class="ri-book-2-fill"></i> <i class="ri-book-2-fill"></i>

4
airwatch/src/app/chatbot/prompt-input/prompt-input.html
View file

@ -8,9 +8,9 @@
<input (keydown)="handleKeyEvent($event)" [(ngModel)]="userInput" <input (keydown)="handleKeyEvent($event)" [(ngModel)]="userInput"
placeholder="Ask questions, request or a web search" type="text"> placeholder="Ask questions, request or a web search" type="text">
<app-options-dropdown></app-options-dropdown>
<button (click)="submitMessage()" class="submit"> <button (click)="submitMessage()" class="submit">
<i class="ri-send-plane-2-line"></i> <i class="ri-send-plane-2-line"></i>
</button> </button>
<app-options-dropdown></app-options-dropdown>
</div> </div>

5
airwatch/src/app/chatbot/prompt-input/prompt-input.scss
View file

@ -137,4 +137,9 @@
position: absolute; position: absolute;
} }
} }
app-options-dropdown {
margin-left: -3rem;
margin-top: -0.25rem;
}
} }

21
airwatch/src/app/chatbot/toggle-button/toggle-button.scss
View file

@ -1,3 +1,21 @@
:host {
.is-disabled .togglable-button {
&.outside {
&:hover {
border: solid 1px #50d494;
color: #50d494;
}
}
&.local {
&:hover {
border: solid 1px #005aa2;
color: #005aa2;
}
}
}
}
.togglable-button { .togglable-button {
@ -55,7 +73,7 @@
color: white; color: white;
&:hover { &:hover {
color: #7FB8E7; color: white;
border: solid 1px #7FB8E7; border: solid 1px #7FB8E7;
} }
} }
@ -84,4 +102,5 @@
color: black; color: black;
} }
} }
} }

10
airwatch/src/app/chatbot/tools-options/tools-options.html
View file

@ -1,25 +1,25 @@
<div class="tools-options {{alignLeft ? 'has-text-left' : ''}}"> <div class="tools-options {{alignLeft ? 'has-text-left' : ''}} {{disableToggle? 'is-disabled': ''}}">
@for (filter of filters; track filter.name) { @for (filter of filters; track filter.name) {
@if (hideDisabledButtons) { @if (hideDisabledButtons) {
@if (filter.enabled) { @if (filter.enabled) {
<app-toggle-button <app-toggle-button
(stateChanged)="toggleFilter(filter, $event)"
[active]="filter.enabled" [active]="filter.enabled"
[icon]="filter.kind === 'local' ? 'database-2-line' : 'google-line'" [icon]="filter.kind === 'local' ? 'database-2-line' : 'google-line'"
[kind]="filter.kind" [kind]="filter.kind"
[label]="filter.name" [label]="filter.name"
[tooltip]="getTooltipForFilter(filter)" [tooltip]="getTooltipForFilter(filter)">
(stateChanged)="toggleFilter(filter, $event)">
</app-toggle-button> </app-toggle-button>
} }
} @else { } @else {
<app-toggle-button <app-toggle-button
(stateChanged)="toggleFilter(filter, $event)"
[active]="filter.enabled" [active]="filter.enabled"
[icon]="filter.kind === 'local' ? 'database-2-line' : 'google-line'" [icon]="filter.kind === 'local' ? 'database-2-line' : 'google-line'"
[kind]="filter.kind" [kind]="filter.kind"
[label]="filter.name" [label]="filter.name"
[tooltip]="getTooltipForFilter(filter)" [tooltip]="getTooltipForFilter(filter)">
(stateChanged)="toggleFilter(filter, $event)">
</app-toggle-button> </app-toggle-button>
} }
} }

4
airwatch/src/app/chatbot/tools-options/tools-options.ts
View file

@ -16,6 +16,7 @@ export class ToolsOptions {
filters: filterType[] = []; filters: filterType[] = [];
@Input() public hideDisabledButtons: boolean = false; @Input() public hideDisabledButtons: boolean = false;
@Input() public alignLeft: boolean = false; @Input() public alignLeft: boolean = false;
@Input() disableToggle: boolean = false;
constructor(private store: Store<StateInterface>) { constructor(private store: Store<StateInterface>) {
this.store.select(state => state.app.filters).subscribe(filters => { this.store.select(state => state.app.filters).subscribe(filters => {
@ -26,6 +27,9 @@ export class ToolsOptions {
} }
toggleFilter(filter: filterType, newState: boolean) { toggleFilter(filter: filterType, newState: boolean) {
if (this.disableToggle) {
return
}
// Find the main-button of the filter in the array // Find the main-button of the filter in the array
const filterIndex = this.filters.findIndex(f => f.name === filter.name); const filterIndex = this.filters.findIndex(f => f.name === filter.name);

2365
my-workspace/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

12
my-workspace/package.json
View file

@ -20,19 +20,19 @@
] ]
}, },
"private": true, "private": true,
"dependencies": {}, "dependencies": {
"aws-amplify": "^6.15.7"
},
"devDependencies": { "devDependencies": {
"@angular/build": "^20.1.5", "@angular/build": "^20.1.5",
"@angular/cli": "^20.1.4", "@angular/cli": "^20.1.4",
"@angular/compiler-cli": "^20.1.0",
"@angular/common": "^20.1.0", "@angular/common": "^20.1.0",
"@angular/compiler": "^20.1.0", "@angular/compiler": "^20.1.0",
"@angular/compiler-cli": "^20.1.0",
"@angular/core": "^20.1.0", "@angular/core": "^20.1.0",
"@angular/forms": "^20.1.0", "@angular/forms": "^20.1.0",
"@angular/platform-browser": "^20.1.0", "@angular/platform-browser": "^20.1.0",
"@angular/router": "^20.1.0", "@angular/router": "^20.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"@types/jasmine": "~5.1.0", "@types/jasmine": "~5.1.0",
"angular-eslint": "20.1.1", "angular-eslint": "20.1.1",
"eslint": "^9.29.0", "eslint": "^9.29.0",
@ -42,8 +42,10 @@
"karma-coverage": "~2.2.0", "karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0", "karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0", "karma-jasmine-html-reporter": "~2.1.0",
"sae-lib": "file:../my-workspace/projects/sae-lib",
"ng-packagr": "^20.1.0", "ng-packagr": "^20.1.0",
"rxjs": "~7.8.0",
"sae-lib": "file:../my-workspace/projects/sae-lib",
"tslib": "^2.3.0",
"typescript": "~5.8.2", "typescript": "~5.8.2",
"typescript-eslint": "8.34.1" "typescript-eslint": "8.34.1"
} }

4
my-workspace/projects/sae-lib/package.json
View file

@ -9,7 +9,8 @@
"@ngrx/store-devtools": "^20.0.0", "@ngrx/store-devtools": "^20.0.0",
"bulma": "^1.0.4", "bulma": "^1.0.4",
"remixicon": "^4.6.0", "remixicon": "^4.6.0",
"shepherd.js": "^14.5.1" "shepherd.js": "^14.5.1",
"aws-amplify": "^6.0.0"
}, },
"dependencies": { "dependencies": {
"tslib": "^2.3.0" "tslib": "^2.3.0"
@ -21,5 +22,6 @@
} }
}, },
"devDependencies": { "devDependencies": {
"aws-amplify": "^6.0.0"
} }
} }

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

@ -386,10 +386,10 @@
.chat-column { .chat-column {
min-width: 900px; min-width: 985px;
.is-small-right & { .is-small-right & {
min-width: 1200px; min-width: 985px;
} }
} }

2
sae-csc/package.json
View file

@ -34,6 +34,8 @@
"tslib": "^2.3.0", "tslib": "^2.3.0",
"shepherd.js": "^14.5.1", "shepherd.js": "^14.5.1",
"sae-lib": "file:../my-workspace/dist/sae-lib", "sae-lib": "file:../my-workspace/dist/sae-lib",
"aws-amplify": "^6.0.0",
"angular-oauth2-oidc": "^18.0.4",
"zone.js": "~0.15.0" "zone.js": "~0.15.0"
}, },
"devDependencies": { "devDependencies": {