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>
} @else {
<img src="safran_logo_small.svg" alt="logo">
<img alt="logo" src="safran_logo_small.svg">
}
</a>
@ -136,39 +136,39 @@
@if (appState.displayConversationListPanelLarge) {
<div class="conversation-container">
@for (conversation of conversationsList; track conversation) {
<div class="conversation-item"
<div (click)="updateActiveConversation(conversation)"
[ngClass]="{'is-active' : conversation.name == activeConversation?.name }"
(click)="updateActiveConversation(conversation)">
<div class="actions">
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<div class="menu">
<i class="ri-more-line"></i>
</div>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" (click)="copyConversationLink(conversation)">
<i class="ri-link-m"></i>
<span>Share</span>
</a>
<a class="dropdown-item" (click)="toggleVisibleEditInput(conversation)">
<i class="ri-edit-line"></i>
<span>Rename</span>
</a>
<a class="dropdown-item" (click)="pinConversation(conversation)">
<i class="ri-pushpin-fill"></i>
<span>Pin</span>
</a>
<hr class="dropdown-divider">
<a class="dropdown-item trash" (click)="deleteConversation(conversation)">
<i class="ri-delete-bin-line"></i>
<span>Delete</span>
</a>
</div>
</div>
</div>
</div>
class="conversation-item">
<!-- <div class="actions">-->
<!-- <div class="dropdown is-hoverable">-->
<!-- <div class="dropdown-trigger">-->
<!-- <div class="menu">-->
<!-- <i class="ri-more-line"></i>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="dropdown-menu" role="menu">-->
<!-- <div class="dropdown-content">-->
<!-- <a class="dropdown-item" (click)="copyConversationLink(conversation)">-->
<!-- <i class="ri-link-m"></i>-->
<!-- <span>Share</span>-->
<!-- </a>-->
<!-- <a class="dropdown-item" (click)="toggleVisibleEditInput(conversation)">-->
<!-- <i class="ri-edit-line"></i>-->
<!-- <span>Rename</span>-->
<!-- </a>-->
<!-- <a class="dropdown-item" (click)="pinConversation(conversation)">-->
<!-- <i class="ri-pushpin-fill"></i>-->
<!-- <span>Pin</span>-->
<!-- </a>-->
<!-- <hr class="dropdown-divider">-->
<!-- <a class="dropdown-item trash" (click)="deleteConversation(conversation)">-->
<!-- <i class="ri-delete-bin-line"></i>-->
<!-- <span>Delete</span>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="container-text">
@if (conversation.pinned) {
<span class="pinned-icon">
@ -188,13 +188,13 @@
<span class="description">
{{ conversation.description || 'No description' }}
</span>
<input type="text" [(ngModel)]="conversation.name"
[ngClass]="{'is-expanded': ! conversation.visibleInput}">
<input [(ngModel)]="conversation.name" [ngClass]="{'is-expanded': ! conversation.visibleInput}"
type="text">
<!-- <i class="ri-pencil-line" (click)="toggleVisibleEditInput(conversation)"></i>-->
</div>
<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"/>
</svg>
</div>
@ -244,9 +244,9 @@
</div>
<div class="action">
@if (displayExportConversation) {
<div class="dropdown" [ngClass]="{'is-active': isExportDropdownActive}">
<div [ngClass]="{'is-active': isExportDropdownActive}" class="dropdown">
<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>
<span class="label">
Export chat
@ -255,13 +255,13 @@
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" (click)="exportConversation('csv')">
<a (click)="exportConversation('csv')" class="dropdown-item">
CSV
</a>
<a class="dropdown-item" (click)="exportConversation('excel')">
<a (click)="exportConversation('excel')" class="dropdown-item">
Excel
</a>
<a class="dropdown-item" (click)="exportConversation('txt')">
<a (click)="exportConversation('txt')" class="dropdown-item">
TXT
</a>
</div>
@ -292,8 +292,8 @@
<app-time-separator></app-time-separator>
@if (activeConversation && activeConversation.messages) {
@for (message of activeConversation.messages; track message) {
<app-message-box [message]="message" [kind]="message.kind"
[content]="message.content"></app-message-box>
<app-message-box [content]="message.content" [kind]="message.kind"
[message]="message"></app-message-box>
}
}
@ -305,19 +305,19 @@
</div>
<div class="conversation-bottom">
<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 class="bottom-warning-container">
<app-warning-bugs></app-warning-bugs>
</div>
</div>
<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 {MessageBox} from './message-box/message-box';
import {NewInput} from './new-input/new-input';
import {FeedbackButton} from './feedback-button/feedback-button';
import {WarningBugs} from './warning-bugs/warning-bugs';
import {VersionInfos} from './version-infos/version-infos';
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 {TranslationService} from '../services/translation.service';
import {TimeSeparator} from './time-separator/time-separator';
import {FeedbackButton} from './feedback-button/feedback-button';
@Component({
selector: 'app-chatbot',
@ -36,6 +36,8 @@ import {TimeSeparator} from './time-separator/time-separator';
CommonModule,
ToolsOptions,
TimeSeparator,
FeedbackButton,
FeedbackButton,
],
templateUrl: './chatbot.html',
styleUrl: './chatbot.scss'

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

@ -52,16 +52,16 @@
</div>
<div class=" has-text-right">
<button (click)="generateResponse()" class="button generate-response">
<i class="ri-refresh-line"></i>
<span class="label">
Generate Response
</span>
</button>
<!-- <button (click)="generateResponse()" class="button generate-response">-->
<!-- <i class="ri-refresh-line"></i>-->
<!-- <span class="label">-->
<!-- Generate Response-->
<!-- </span>-->
<!-- </button>-->
<app-copy [textToCopy]="content"></app-copy>
<button (click)="bookmark()" class="button bookmark">
<i class="ri-bookmark-line"></i>
</button>
<!-- <button (click)="bookmark()" class="button bookmark">-->
<!-- <i class="ri-bookmark-line"></i>-->
<!-- </button>-->
<button (click)="toggleSources()" class="button sources">
<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"
placeholder="Ask questions, request or a web search" type="text">
<app-options-dropdown></app-options-dropdown>
<button (click)="submitMessage()" class="submit">
<i class="ri-send-plane-2-line"></i>
</button>
<app-options-dropdown></app-options-dropdown>
</div>

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

@ -137,4 +137,9 @@
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 {
@ -55,7 +73,7 @@
color: white;
&:hover {
color: #7FB8E7;
color: white;
border: solid 1px #7FB8E7;
}
}
@ -84,4 +102,5 @@
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) {
@if (hideDisabledButtons) {
@if (filter.enabled) {
<app-toggle-button
(stateChanged)="toggleFilter(filter, $event)"
[active]="filter.enabled"
[icon]="filter.kind === 'local' ? 'database-2-line' : 'google-line'"
[kind]="filter.kind"
[label]="filter.name"
[tooltip]="getTooltipForFilter(filter)"
(stateChanged)="toggleFilter(filter, $event)">
[tooltip]="getTooltipForFilter(filter)">
</app-toggle-button>
}
} @else {
<app-toggle-button
(stateChanged)="toggleFilter(filter, $event)"
[active]="filter.enabled"
[icon]="filter.kind === 'local' ? 'database-2-line' : 'google-line'"
[kind]="filter.kind"
[label]="filter.name"
[tooltip]="getTooltipForFilter(filter)"
(stateChanged)="toggleFilter(filter, $event)">
[tooltip]="getTooltipForFilter(filter)">
</app-toggle-button>
}
}

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

@ -16,6 +16,7 @@ export class ToolsOptions {
filters: filterType[] = [];
@Input() public hideDisabledButtons: boolean = false;
@Input() public alignLeft: boolean = false;
@Input() disableToggle: boolean = false;
constructor(private store: Store<StateInterface>) {
this.store.select(state => state.app.filters).subscribe(filters => {
@ -26,6 +27,9 @@ export class ToolsOptions {
}
toggleFilter(filter: filterType, newState: boolean) {
if (this.disableToggle) {
return
}
// Find the main-button of the filter in the array
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,
"dependencies": {},
"dependencies": {
"aws-amplify": "^6.15.7"
},
"devDependencies": {
"@angular/build": "^20.1.5",
"@angular/cli": "^20.1.4",
"@angular/compiler-cli": "^20.1.0",
"@angular/common": "^20.1.0",
"@angular/compiler": "^20.1.0",
"@angular/compiler-cli": "^20.1.0",
"@angular/core": "^20.1.0",
"@angular/forms": "^20.1.0",
"@angular/platform-browser": "^20.1.0",
"@angular/router": "^20.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"@types/jasmine": "~5.1.0",
"angular-eslint": "20.1.1",
"eslint": "^9.29.0",
@ -42,8 +42,10 @@
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"sae-lib": "file:../my-workspace/projects/sae-lib",
"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-eslint": "8.34.1"
}

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

@ -9,7 +9,8 @@
"@ngrx/store-devtools": "^20.0.0",
"bulma": "^1.0.4",
"remixicon": "^4.6.0",
"shepherd.js": "^14.5.1"
"shepherd.js": "^14.5.1",
"aws-amplify": "^6.0.0"
},
"dependencies": {
"tslib": "^2.3.0"
@ -21,5 +22,6 @@
}
},
"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 {
min-width: 900px;
min-width: 985px;
.is-small-right & {
min-width: 1200px;
min-width: 985px;
}
}

2
sae-csc/package.json
View file

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