From 0e9a0aa21eee74fff383471e2a78c8836d5ffc7d Mon Sep 17 00:00:00 2001 From: Tykayn Date: Mon, 18 Aug 2025 18:14:22 +0200 Subject: [PATCH] messages styling, add conversation dropdown, show tooltip on filters --- .../sae-lib/src/styles/_conversations.scss | 3 - .../sae-lib/src/styles/_layout_demo.scss | 30 +++++- .../sae-lib/src/styles/_main_button.scss | 28 ------ .../projects/sae-lib/src/styles/_states.scss | 3 +- .../projects/sae-lib/src/styles/index.scss | 1 - old-sae-airwatch/.storybook/main.ts | 21 ++++ old-sae-airwatch/.storybook/preview.ts | 1 + .../app/buttons/main-button/main-button.scss | 70 +++++++++++++ .../main-button/main-button.stories.ts | 36 ++++--- .../{ => buttons}/main-button/main-button.ts | 7 +- old-sae-airwatch/src/app/chatbot/chatbot.html | 56 +++++++---- old-sae-airwatch/src/app/chatbot/chatbot.scss | 2 + .../src/app/chatbot/chatbot.stories.ts | 42 ++++---- old-sae-airwatch/src/app/chatbot/chatbot.ts | 13 ++- .../feedback-button/feedback-button.ts | 15 +-- .../app/chatbot/message-box/message-box.html | 13 +++ .../app/chatbot/message-box/message-box.scss | 20 ++++ .../app/chatbot/message-box/message-box.ts | 25 ++++- .../src/app/chatbot/new-input/new-input.html | 3 +- .../chatbot/new-input/new-input.stories.ts | 30 +++--- .../prompt-indicator/prompt-indicator.ts | 2 +- .../chatbot/prompt-input/prompt-input.html | 1 - .../chatbot/prompt-input/prompt-input.scss | 5 + .../prompt-input/prompt-input.stories.ts | 20 ++-- .../app/chatbot/prompt-input/prompt-input.ts | 5 +- .../time-separator/time-separator.scss | 14 ++- .../chatbot/toggle-button/toggle-button.html | 3 +- .../chatbot/toggle-button/toggle-button.scss | 21 ++++ .../chatbot/toggle-button/toggle-button.ts | 1 + .../chatbot/tools-options/tools-options.html | 14 ++- .../chatbot/tools-options/tools-options.ts | 8 ++ .../color-display/color-display.stories.ts | 97 +++++++++++++++++++ .../src/app/pages/grid-demo/grid-demo.ts | 2 +- .../app/pages/testing-api/testing-api.html | 27 ++++-- .../app/pages/testing-api/testing-api.scss | 21 ---- .../src/app/pages/testing-api/testing-api.ts | 39 +++++++- .../app/{ => services}/api-service.spec.ts | 0 .../src/app/{ => services}/api-service.ts | 16 ++- .../src/app/tuto-tour/tuto-tour.ts | 2 +- 39 files changed, 537 insertions(+), 180 deletions(-) delete mode 100644 my-workspace/projects/sae-lib/src/styles/_main_button.scss create mode 100644 old-sae-airwatch/src/app/buttons/main-button/main-button.scss rename old-sae-airwatch/src/app/{ => buttons}/main-button/main-button.stories.ts (69%) rename old-sae-airwatch/src/app/{ => buttons}/main-button/main-button.ts (82%) create mode 100644 old-sae-airwatch/src/app/color-display/color-display.stories.ts rename old-sae-airwatch/src/app/{ => services}/api-service.spec.ts (100%) rename old-sae-airwatch/src/app/{ => services}/api-service.ts (97%) diff --git a/my-workspace/projects/sae-lib/src/styles/_conversations.scss b/my-workspace/projects/sae-lib/src/styles/_conversations.scss index 04afdb9..7e77633 100644 --- a/my-workspace/projects/sae-lib/src/styles/_conversations.scss +++ b/my-workspace/projects/sae-lib/src/styles/_conversations.scss @@ -46,7 +46,6 @@ margin-bottom: 40px; margin-top: 10px; animation: fadeIn 0.5s ease-in-out; - width: 500px; max-width: 100%; @@ -183,8 +182,6 @@ min-width: 100vw !important; max-width: 100vw !important; position: static; - margin-right: 10px; - margin-left: 10px; } } 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 3a355cd..422f3f5 100644 --- a/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss +++ b/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss @@ -223,6 +223,34 @@ .conversation-container { padding-left: 12px; min-height: 90vh; + + .actions { + position: relative; + top: 0; + right: 0; + background: white; + width: 30%; + float: right; + + button { + background: transparent; + border: none; + display: none; + cursor: pointer; + + &:hover { + background: variables.$primary-color; + color: white; + } + } + + &:hover { + button { + + display: block; + } + } + } } input { @@ -381,7 +409,7 @@ } .main-conversation-container { - + height: 100vh; padding-top: 88px; border-radius: 10px; diff --git a/my-workspace/projects/sae-lib/src/styles/_main_button.scss b/my-workspace/projects/sae-lib/src/styles/_main_button.scss deleted file mode 100644 index e7b1630..0000000 --- a/my-workspace/projects/sae-lib/src/styles/_main_button.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use "shadows"; - - -app-main-button { - button { - background: shadows.$primary-color; - color: shadows.$neutral-white; - border-radius: shadows.$radius-main; - padding: 1rem 2rem; - cursor: pointer; - transition: all 0.25s ease; - border: 0; - width: 100%; - margin-top: 8px; - - i { - margin-right: 1rem; - } - - &:hover, &:active, &:focus { - background: shadows.$main-bg-color-active; - color: shadows.$main-color-active; - transition: all 0.25s ease; - } - - } - -} diff --git a/my-workspace/projects/sae-lib/src/styles/_states.scss b/my-workspace/projects/sae-lib/src/styles/_states.scss index 0b73512..7c2df8a 100644 --- a/my-workspace/projects/sae-lib/src/styles/_states.scss +++ b/my-workspace/projects/sae-lib/src/styles/_states.scss @@ -1,5 +1,5 @@ @use "sass:color"; -@use "variables"; +@use "./variables"; // state colors @@ -31,7 +31,6 @@ background: variables.$success-color; color: variables.$neutral-white; border-color: color.adjust(variables.$success-color, $lightness: -50%); - } .is-error { diff --git a/my-workspace/projects/sae-lib/src/styles/index.scss b/my-workspace/projects/sae-lib/src/styles/index.scss index 3073f0a..21a3e41 100644 --- a/my-workspace/projects/sae-lib/src/styles/index.scss +++ b/my-workspace/projects/sae-lib/src/styles/index.scss @@ -25,6 +25,5 @@ @use '_states.scss'; @use '_conversations.scss'; @use '_layout_demo.scss'; -@use '_main_button.scss'; diff --git a/old-sae-airwatch/.storybook/main.ts b/old-sae-airwatch/.storybook/main.ts index 931d89a..c968a46 100644 --- a/old-sae-airwatch/.storybook/main.ts +++ b/old-sae-airwatch/.storybook/main.ts @@ -27,6 +27,27 @@ const config: StorybookConfig = { generator: {filename: 'fonts/[name].[contenthash][ext]'}, }); + // Support for remixicon font files specifically + config.module.rules.push({ + test: /remixicon.*\.(woff|woff2|eot|ttf|svg)$/, + type: 'asset/resource', + generator: {filename: 'fonts/[name].[contenthash][ext]'}, + }); + + // Add CSS loader rule to handle @font-face declarations + config.module.rules.push({ + test: /\.css$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + url: true + } + } + ] + }); + // NOUVELLE SOLUTION : Configurer css-loader pour gérer les URLs const scssRules = config.module.rules.filter(rule => { if (rule && typeof rule === 'object' && 'test' in rule && rule.test) { diff --git a/old-sae-airwatch/.storybook/preview.ts b/old-sae-airwatch/.storybook/preview.ts index 540c44b..3016910 100644 --- a/old-sae-airwatch/.storybook/preview.ts +++ b/old-sae-airwatch/.storybook/preview.ts @@ -1,4 +1,5 @@ import type {Preview} from '@storybook/angular'; +import 'remixicon/fonts/remixicon.css'; const preview: Preview = { parameters: { diff --git a/old-sae-airwatch/src/app/buttons/main-button/main-button.scss b/old-sae-airwatch/src/app/buttons/main-button/main-button.scss new file mode 100644 index 0000000..481dafd --- /dev/null +++ b/old-sae-airwatch/src/app/buttons/main-button/main-button.scss @@ -0,0 +1,70 @@ +@use "sae-lib/src/styles/shadows.scss"; +@use "sae-lib/src/styles/states.scss"; +@use "sae-lib/src/styles/variables.scss"; +@use "sass:color"; + + +:host { + display: inline-block; + + button { + background: shadows.$primary-color; + color: shadows.$neutral-white; + border-radius: shadows.$radius-main; + padding: 1rem 2rem; + cursor: pointer; + transition: all 0.25s ease; + border: 0; + width: 100%; + margin-top: 8px; + + i { + margin-right: 1rem; + } + + &:hover, &:active, &:focus { + background: shadows.$main-bg-color-active; + color: shadows.$main-color-active; + transition: all 0.25s ease; + } + + + // state colors + &.is-primary { + background-color: variables.$primary-color; + color: variables.$neutral-white; + border-color: color.adjust(variables.$primary-color, $lightness: - 10%); + } + + &.is-secondary { + background-color: variables.$secondary-color; + color: variables.$neutral-white; + } + + &.is-warning { + background: variables.$neutral-white; + color: variables.$warning-color-text; + border: 0; + + } + + &.is-info { + background: variables.$info-color; + color: variables.$neutral-white; + border-color: color.adjust(variables.$info-color, $lightness: -50%); + } + + &.is-success { + background: variables.$success-color; + color: variables.$neutral-white; + border-color: color.adjust(variables.$success-color, $lightness: -50%); + } + + &.is-error { + background: rgba(variables.$danger-color, 10%); + color: variables.$danger-color; + border: 0; + } + + } +} diff --git a/old-sae-airwatch/src/app/main-button/main-button.stories.ts b/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts similarity index 69% rename from old-sae-airwatch/src/app/main-button/main-button.stories.ts rename to old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts index c5672e6..03bd53c 100644 --- a/old-sae-airwatch/src/app/main-button/main-button.stories.ts +++ b/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts @@ -1,16 +1,24 @@ -import type { Meta, StoryObj } from '@storybook/angular'; -import { MainButton } from './main-button'; +import type {Meta, StoryObj} from '@storybook/angular'; +import {MainButton} from './main-button'; +import {moduleMetadata} from '@storybook/angular'; +import {CommonModule} from '@angular/common'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction const meta: Meta = { title: 'Components/MainButton', component: MainButton, tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [CommonModule], + providers: [] + }) + ], argTypes: { - label: { control: 'text' }, - icon: { control: 'text' }, - kind: { - control: 'select', + label: {control: 'text'}, + icon: {control: 'text'}, + kind: { + control: 'select', options: ['', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'], description: 'Style du bouton' }, @@ -24,7 +32,7 @@ type Story = StoryObj; export const Primary: Story = { args: { label: 'Button', - icon: 'ri-home-line', + icon: 'home-line-2', kind: 'primary' }, }; @@ -32,7 +40,7 @@ export const Primary: Story = { export const Secondary: Story = { args: { label: 'Secondary Button', - icon: 'ri-settings-line', + icon: 'settings-line', kind: 'secondary' }, }; @@ -40,7 +48,7 @@ export const Secondary: Story = { export const Info: Story = { args: { label: 'Info Button', - icon: 'ri-information-line', + icon: 'information-line', kind: 'info' }, }; @@ -48,7 +56,7 @@ export const Info: Story = { export const Success: Story = { args: { label: 'Success Button', - icon: 'ri-check-line', + icon: 'check-line', kind: 'success' }, }; @@ -56,7 +64,7 @@ export const Success: Story = { export const Warning: Story = { args: { label: 'Warning Button', - icon: 'ri-alert-line', + icon: 'alert-line', kind: 'warning' }, }; @@ -64,7 +72,7 @@ export const Warning: Story = { export const Danger: Story = { args: { label: 'Danger Button', - icon: 'ri-close-circle-line', + icon: 'close-circle-line', kind: 'danger' }, }; @@ -80,7 +88,7 @@ export const WithoutIcon: Story = { export const WithIcon: Story = { args: { label: 'Button with icon', - icon: 'ri-user-line', + icon: 'user-line', kind: '' }, -}; \ No newline at end of file +}; diff --git a/old-sae-airwatch/src/app/main-button/main-button.ts b/old-sae-airwatch/src/app/buttons/main-button/main-button.ts similarity index 82% rename from old-sae-airwatch/src/app/main-button/main-button.ts rename to old-sae-airwatch/src/app/buttons/main-button/main-button.ts index 8e88b56..f75584c 100644 --- a/old-sae-airwatch/src/app/main-button/main-button.ts +++ b/old-sae-airwatch/src/app/buttons/main-button/main-button.ts @@ -1,10 +1,11 @@ import {Component, Input} from '@angular/core'; +import {CommonModule} from '@angular/common'; export type ButtonKind = '' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'; @Component({ selector: 'app-main-button', - imports: [], + imports: [CommonModule], template: ` `, - styles: ` - - ` + styleUrl: './main-button.scss' }) export class MainButton { diff --git a/old-sae-airwatch/src/app/chatbot/chatbot.html b/old-sae-airwatch/src/app/chatbot/chatbot.html index 22a988c..95a2cbc 100644 --- a/old-sae-airwatch/src/app/chatbot/chatbot.html +++ b/old-sae-airwatch/src/app/chatbot/chatbot.html @@ -10,6 +10,19 @@
- + tools: +
diff --git a/old-sae-airwatch/src/app/chatbot/new-input/new-input.stories.ts b/old-sae-airwatch/src/app/chatbot/new-input/new-input.stories.ts index afbf117..1e831b0 100644 --- a/old-sae-airwatch/src/app/chatbot/new-input/new-input.stories.ts +++ b/old-sae-airwatch/src/app/chatbot/new-input/new-input.stories.ts @@ -1,14 +1,14 @@ -import type { Meta, StoryObj } from '@storybook/angular'; -import { NewInput } from './new-input'; -import { moduleMetadata } from '@storybook/angular'; -import { CommonModule } from '@angular/common'; -import { PromptInput } from '../prompt-input/prompt-input'; -import { ToolsOptions } from '../tools-options/tools-options'; -import { Store, StoreModule } from '@ngrx/store'; -import { reducers } from '../../reducers'; -import { HttpClientModule } from '@angular/common/http'; -import { ApiService } from '../../api-service'; -import { FormsModule } from '@angular/forms'; +import type {Meta, StoryObj} from '@storybook/angular'; +import {moduleMetadata} from '@storybook/angular'; +import {NewInput} from './new-input'; +import {CommonModule} from '@angular/common'; +import {PromptInput} from '../prompt-input/prompt-input'; +import {ToolsOptions} from '../tools-options/tools-options'; +import {Store, StoreModule} from '@ngrx/store'; +import {reducers} from '../../reducers'; +import {HttpClientModule} from '@angular/common/http'; +import {ApiService} from '../../services/api-service'; +import {FormsModule} from '@angular/forms'; const appReducer = reducers.app; @@ -24,7 +24,7 @@ const meta: Meta = { PromptInput, ToolsOptions, HttpClientModule, - StoreModule.forRoot({ app: appReducer as any }) + StoreModule.forRoot({app: appReducer as any}) ], providers: [ ApiService, @@ -36,8 +36,8 @@ const meta: Meta = { backgrounds: { default: 'light', values: [ - { name: 'light', value: '#f5f5f5' }, - { name: 'dark', value: '#333' }, + {name: 'light', value: '#f5f5f5'}, + {name: 'dark', value: '#333'}, ], }, } @@ -57,7 +57,7 @@ export const DarkTheme: Story = { // Propriétés par défaut }, parameters: { - backgrounds: { default: 'dark' }, + backgrounds: {default: 'dark'}, store: { init: (store: Store) => { store.dispatch({ diff --git a/old-sae-airwatch/src/app/chatbot/prompt-indicator/prompt-indicator.ts b/old-sae-airwatch/src/app/chatbot/prompt-indicator/prompt-indicator.ts index a016d9f..d60c043 100644 --- a/old-sae-airwatch/src/app/chatbot/prompt-indicator/prompt-indicator.ts +++ b/old-sae-airwatch/src/app/chatbot/prompt-indicator/prompt-indicator.ts @@ -3,7 +3,7 @@ import {Component} from '@angular/core'; import {inputModeChoicesType} from '../../services/AirWatchState'; import {Store} from '@ngrx/store'; import {ActionTypes, StateInterface} from '../../reducers'; -import {ApiService} from '../../api-service'; +import {ApiService} from '../../services/api-service'; import {NgClass} from '@angular/common'; @Component({ diff --git a/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html b/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html index d058c92..db13378 100644 --- a/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html +++ b/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html @@ -8,7 +8,6 @@ - + +
- + + +
- + + + +
+ + + + +
+ 
+        {{ response }}
+
diff --git a/old-sae-airwatch/src/app/pages/testing-api/testing-api.scss b/old-sae-airwatch/src/app/pages/testing-api/testing-api.scss index 923527d..a453c10 100644 --- a/old-sae-airwatch/src/app/pages/testing-api/testing-api.scss +++ b/old-sae-airwatch/src/app/pages/testing-api/testing-api.scss @@ -4,24 +4,3 @@ background: #c2d1dc; padding: 16px; } - -.button { - border: 1px solid #005AA2; - color: #005AA2; - text-align: center; - font-size: 20px; - font-style: normal; - font-weight: 500; - line-height: 100px; - background: white; - padding: 16px 40px; - border-radius: 10px; - margin-top: 6px; - margin-bottom: 6px; - cursor: pointer; - - &:hover { - background: #005AA2; - color: white; - } -} diff --git a/old-sae-airwatch/src/app/pages/testing-api/testing-api.ts b/old-sae-airwatch/src/app/pages/testing-api/testing-api.ts index 8cc5bbb..fd360a0 100644 --- a/old-sae-airwatch/src/app/pages/testing-api/testing-api.ts +++ b/old-sae-airwatch/src/app/pages/testing-api/testing-api.ts @@ -1,11 +1,46 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; +import {ApiService} from '../../services/api-service'; +import {MainButton} from '../../buttons/main-button/main-button'; @Component({ selector: 'app-testing-api', - imports: [], + imports: [ + MainButton + ], templateUrl: './testing-api.html', styleUrl: './testing-api.scss' }) export class TestingApi { + public response: any = ''; + + constructor(private apiservice: ApiService) { + + } + + + login() { + this.apiservice.fetchLogin().then(res => { + console.log(res); + this.response = res; + }) + } + + sendFeedback() { + console.log('sendFeedback'); + this.apiservice.fetchEndPoint('feedback').then(res => { + console.log(res); + this.response = res; + }) + } + + sendMessage() { + console.log('sendMessage'); + } + + sendFile() { + console.log('sendFile'); + } + + } diff --git a/old-sae-airwatch/src/app/api-service.spec.ts b/old-sae-airwatch/src/app/services/api-service.spec.ts similarity index 100% rename from old-sae-airwatch/src/app/api-service.spec.ts rename to old-sae-airwatch/src/app/services/api-service.spec.ts diff --git a/old-sae-airwatch/src/app/api-service.ts b/old-sae-airwatch/src/app/services/api-service.ts similarity index 97% rename from old-sae-airwatch/src/app/api-service.ts rename to old-sae-airwatch/src/app/services/api-service.ts index 66d426f..181b65f 100644 --- a/old-sae-airwatch/src/app/api-service.ts +++ b/old-sae-airwatch/src/app/services/api-service.ts @@ -3,8 +3,8 @@ import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http'; import {from, Observable, Subject, throwError} from 'rxjs'; import {catchError, finalize, takeUntil, tap} from 'rxjs/operators'; import {Store} from '@ngrx/store'; -import {ActionTypes, StateInterface} from './reducers'; -import {ChatbotMessage} from './services/chatbot.message.type'; +import {ActionTypes, StateInterface} from '../reducers'; +import {ChatbotMessage} from './chatbot.message.type'; /** * Interface for Open-Meteo API response @@ -89,14 +89,20 @@ export class ApiService { constructor(private http: HttpClient, private store: Store) { } - async fetchEndPoint(kind: string, subKind: string): Promise> { + async fetchLogin() { + console.log("fetchLogin"); + return new Promise((resolve, reject) => { + }); + } + + async fetchEndPoint(kind: string = '', subKind: string = ''): Promise> { // Record the start time for measuring response time const startTime = Date.now(); let fetchUrl: string = `${this.BASE_URL}/api/v1` - if (undefined !== this.ENDPOINTS.main.v1[kind]) { + if (null !== this.ENDPOINTS.main.v1[kind]) { fetchUrl += this.ENDPOINTS.main.v1[kind] - if (undefined !== this.ENDPOINTS.main.v1[kind][subKind]) { + if (null !== this.ENDPOINTS.main.v1[kind][subKind]) { fetchUrl += '/' + this.ENDPOINTS.main.v1[kind][subKind] } } diff --git a/old-sae-airwatch/src/app/tuto-tour/tuto-tour.ts b/old-sae-airwatch/src/app/tuto-tour/tuto-tour.ts index 0e77a9e..293e6cf 100644 --- a/old-sae-airwatch/src/app/tuto-tour/tuto-tour.ts +++ b/old-sae-airwatch/src/app/tuto-tour/tuto-tour.ts @@ -1,6 +1,6 @@ import {type AfterViewInit, Component} from '@angular/core'; import {ShepherdService} from 'angular-shepherd'; -import {MainButton} from '../main-button/main-button'; +import {MainButton} from '../buttons/main-button/main-button'; import {Store} from '@ngrx/store'; import {ActionTypes, StateInterface} from '../reducers'; import {TranslationService} from '../services/translation.service';