From 10c04630fbc3d1674a2a5d43c1466edd96749e30 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 20 Aug 2025 16:39:49 +0200 Subject: [PATCH] position of main conversation --- .../sae-lib/alert-box/alert-box.stories.ts | 2 +- .../projects/sae-lib/alert-box/alert-box.ts | 1 + .../sae-lib/src/styles/_conversations.scss | 4 +- .../sae-lib/src/styles/_layout_demo.scss | 6 +- .../main-button/main-button.stories.ts | 2 +- .../src/app/chatbot/IMPLEMENTATION_SUMMARY.md | 64 --------- old-sae-airwatch/src/app/chatbot/README.md | 74 ---------- old-sae-airwatch/src/app/chatbot/chatbot.html | 4 +- old-sae-airwatch/src/app/chatbot/chatbot.scss | 30 +++- .../conversation-item.stories.ts | 2 +- .../export-chat-button.stories.ts | 2 +- .../chatbot/prompt-input/prompt-input.scss | 6 +- .../warning-bugs/warning-bugs.stories.ts | 83 +++++++++++ .../src/stories/alert-box.stories.ts | 4 +- .../src/stories/implementation-summary.md | 84 +++++++++++ .../src/stories/storybook-categories.md | 84 +++++++++++ .../src/stories/testing-instructions.md | 80 +++++++++++ .../src/stories/update-story-categories.js | 136 ++++++++++++++++++ 18 files changed, 509 insertions(+), 159 deletions(-) delete mode 100644 old-sae-airwatch/src/app/chatbot/IMPLEMENTATION_SUMMARY.md delete mode 100644 old-sae-airwatch/src/app/chatbot/README.md create mode 100644 old-sae-airwatch/src/app/chatbot/warning-bugs/warning-bugs.stories.ts create mode 100644 old-sae-airwatch/src/stories/implementation-summary.md create mode 100644 old-sae-airwatch/src/stories/storybook-categories.md create mode 100644 old-sae-airwatch/src/stories/testing-instructions.md create mode 100644 old-sae-airwatch/src/stories/update-story-categories.js diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts b/my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts index 348e465..07aeba7 100644 --- a/my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts +++ b/my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts @@ -71,7 +71,7 @@ export const Danger: Story = { }, }; -export const Error: Story = { +export const ErrorState: Story = { args: { message: 'Une erreur est survenue', _alertKind: 'error' diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.ts b/my-workspace/projects/sae-lib/alert-box/alert-box.ts index 473cf7e..d164c29 100644 --- a/my-workspace/projects/sae-lib/alert-box/alert-box.ts +++ b/my-workspace/projects/sae-lib/alert-box/alert-box.ts @@ -2,6 +2,7 @@ import {Component, Input} from '@angular/core'; @Component({ selector: 'sae-alert-box', + standalone: true, imports: [], templateUrl: './alert-box.html', styleUrl: './alert-box.scss' diff --git a/my-workspace/projects/sae-lib/src/styles/_conversations.scss b/my-workspace/projects/sae-lib/src/styles/_conversations.scss index dd77190..187a0e9 100644 --- a/my-workspace/projects/sae-lib/src/styles/_conversations.scss +++ b/my-workspace/projects/sae-lib/src/styles/_conversations.scss @@ -67,9 +67,9 @@ &.user { background: white; - margin-right: 10px; - margin-left: 260px; + text-align: right; + float: right; .bottom-actions { display: none; 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 4b5407b..c018c22 100644 --- a/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss +++ b/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss @@ -312,6 +312,7 @@ .actions { width: 28px; height: 28px; + padding: 4px; border-radius: 6px; background: #B9D6ED; } @@ -489,9 +490,8 @@ } .conversation-bottom { - padding: 10px 60px; - //margin-top: -100px; - margin-top: -43px; + padding: 60px; + margin-top: -100px; } .bottom-warning-container { diff --git a/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts b/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts index 03bd53c..02ed373 100644 --- a/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts +++ b/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts @@ -5,7 +5,7 @@ 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', + title: 'UI/Buttons/MainButton', component: MainButton, tags: ['autodocs'], decorators: [ diff --git a/old-sae-airwatch/src/app/chatbot/IMPLEMENTATION_SUMMARY.md b/old-sae-airwatch/src/app/chatbot/IMPLEMENTATION_SUMMARY.md deleted file mode 100644 index 32fb4b2..0000000 --- a/old-sae-airwatch/src/app/chatbot/IMPLEMENTATION_SUMMARY.md +++ /dev/null @@ -1,64 +0,0 @@ -# Implementation Summary: Stories for Conversation-Item and Export Chat Button - -## Overview - -As requested in the issue, I've created Storybook stories for two key components: -1. The conversation-item component -2. The export chat button component - -## Implementation Details - -### 1. Conversation-Item Component - -I created a standalone Angular component for the conversation-item, which was previously implemented directly in the chatbot.html template. The new component: - -- Encapsulates all the functionality of a conversation item -- Provides proper inputs and outputs for component interaction -- Includes styles from the original implementation -- Supports all states (default, active, pinned) -- Maintains the dropdown menu with hover functionality - -The component is accompanied by a comprehensive set of stories that demonstrate its various states and behaviors. - -### 2. Export Chat Button Component - -I created a standalone Angular component for the export chat button, which was also previously implemented directly in the chatbot.html template. The new component: - -- Encapsulates the export button functionality -- Provides a dropdown menu with export format options (CSV, Excel, TXT) -- Emits events when an export format is selected -- Maintains the same styling as the original implementation -- Supports hover state and dropdown functionality - -The component is accompanied by a set of stories that demonstrate its various states and behaviors. - -## Benefits of This Implementation - -1. **Reusability**: Both components can now be easily reused throughout the application -2. **Maintainability**: Code is more organized and easier to maintain -3. **Testability**: Components can be tested in isolation -4. **Documentation**: Storybook stories serve as living documentation for the components -5. **Consistency**: Ensures consistent behavior and appearance across the application - -## Technical Notes - -- Both components are implemented as standalone Angular components -- They use Bulma CSS classes for styling -- The dropdown functionality works on hover as requested -- The components maintain the same visual appearance as the original implementation - -## Next Steps - -To fully integrate these components into the application: - -1. Replace the inline implementation in chatbot.html with the new components -2. Update any references to the original implementation -3. Run the application to verify everything works as expected - -## Documentation - -A detailed README.md file has been created in the chatbot directory that provides: -- Component features and capabilities -- Available stories and what they demonstrate -- Usage examples -- Instructions for running Storybook diff --git a/old-sae-airwatch/src/app/chatbot/README.md b/old-sae-airwatch/src/app/chatbot/README.md deleted file mode 100644 index 0e541ea..0000000 --- a/old-sae-airwatch/src/app/chatbot/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# Chatbot Component Stories - -This document provides information about the Storybook stories created for the chatbot components. - -## Components and Stories - -### 1. ConversationItem Component - -The `ConversationItem` component is a standalone Angular component that displays a conversation item with a dropdown menu for actions. - -#### Component Features: -- Displays conversation name, description, and date -- Shows a pinned icon for pinned conversations -- Provides a dropdown menu with actions (Share, Rename, Pin, Delete) -- Highlights active conversations -- Supports hover state styling - -#### Stories: -- **Default**: Shows a basic conversation item -- **Active**: Demonstrates the active state of a conversation item -- **Pinned**: Shows a pinned conversation with the pin icon -- **LongContent**: Demonstrates how the component handles long names and descriptions - -#### Usage: -```html - - -``` - -### 2. ExportChatButton Component - -The `ExportChatButton` component is a standalone Angular component that displays an "Export chat" button with a dropdown menu for selecting export formats. - -#### Component Features: -- Displays an "Export chat" button with an icon -- Provides a dropdown menu with export format options (CSV, Excel, TXT) -- Supports hover state styling -- Emits events when an export format is selected - -#### Stories: -- **Default**: Shows the basic export button -- **ActiveDropdown**: Demonstrates the button with an open dropdown -- **HoverState**: Shows the hover state styling -- **ExportFunctionality**: Demonstrates the export functionality - -#### Usage: -```html - - -``` - -## Running Storybook - -To run Storybook and view these components: - -1. Ensure you have Node.js v20.19+ or v22.12+ installed -2. Navigate to the project directory -3. Run `npm run storybook` -4. Open your browser to the URL displayed in the terminal (usually http://localhost:6006) - -## Notes - -- The stories are configured to be automatically discovered by Storybook -- Each component has its own set of stories demonstrating different states and behaviors -- The components use Bulma CSS classes for styling -- Both components support hover functionality for dropdowns diff --git a/old-sae-airwatch/src/app/chatbot/chatbot.html b/old-sae-airwatch/src/app/chatbot/chatbot.html index 201f981..f79b7a8 100644 --- a/old-sae-airwatch/src/app/chatbot/chatbot.html +++ b/old-sae-airwatch/src/app/chatbot/chatbot.html @@ -143,7 +143,7 @@
- +