working elements for storybook

old-sae-airwatch/src/app/chatbot/chatbot.stories.ts

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Chatbot } from './chatbot';
+import { Store, StoreModule } from '@ngrx/store';
+import { reducers } from '../reducers';
+
+const appReducer = reducers.app;
+import { ConversationsService } from '../services/conversations.service';
+import { ApiService } from '../api-service';
+import { HttpClientModule } from '@angular/common/http';
+import { TranslationService } from '../services/translation.service';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+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';
+import { SourceBlock } from './source-block/source-block';
+import { ToolsOptions } from './tools-options/tools-options';
+
+const meta: Meta<Chatbot> = {
+  title: 'App/Chatbot',
+  component: Chatbot,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FormsModule,
+        HttpClientModule,
+        StoreModule.forRoot({ app: appReducer as any }),
+        PromptInput,
+        MessageBox,
+        NewInput,
+        FeedbackButton,
+        WarningBugs,
+        VersionInfos,
+        LoadingNotification,
+        SourceBlock,
+        ToolsOptions,
+      ],
+      providers: [
+        ConversationsService,
+        ApiService,
+        TranslationService,
+        Store
+      ]
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  }
+};
+
+export default meta;
+type Story = StoryObj<Chatbot>;
+
+export const Default: Story = {
+  args: {
+    // Les propriétés sont injectées par les services
+  }
+};
+
+export const DemoMode: Story = {
+  args: {
+    // Les propriétés sont injectées par les services
+  },
+  parameters: {
+    store: {
+      init: (store: Store) => {
+        store.dispatch({
+          type: 'UPDATE_APP',
+          payload: {
+            demoMode: true,
+            displayConversationListPanelLarge: true,
+            displaySourcesPanelLarge: true
+          }
+        });
+      }
+    }
+  }
+};
+
+export const CompactView: Story = {
+  args: {
+    // Les propriétés sont injectées par les services
+  },
+  parameters: {
+    store: {
+      init: (store: Store) => {
+        store.dispatch({
+          type: 'UPDATE_APP',
+          payload: {
+            demoMode: true,
+            displayConversationListPanelLarge: false,
+            displaySourcesPanelLarge: false
+          }
+        });
+      }
+    }
+  }
+};

old-sae-airwatch/src/app/chatbot/message-box/message-box.stories.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { MessageBox } from './message-box';
+import { moduleMetadata } from '@storybook/angular';
+import { DomSanitizer, BrowserModule } from '@angular/platform-browser';
+import { Copy } from 'sae-lib/buttons/copy/copy';
+import { FeedbackButton } from '../feedback-button/feedback-button';
+import { ChatbotMessage } from '../../services/chatbot.message.type';
+
+const meta: Meta<MessageBox> = {
+  title: 'Components/MessageBox',
+  component: MessageBox,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [Copy, FeedbackButton, BrowserModule],
+      providers: []
+    })
+  ],
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: ['user', 'llm'],
+      description: "Type de message (utilisateur ou IA)"
+    },
+    content: {
+      control: 'text',
+      description: "Contenu du message"
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<MessageBox>;
+
+export const UserMessage: Story = {
+  args: {
+    kind: 'user',
+    content: 'Voici un message de l\'utilisateur pour tester l\'affichage.',
+    message: new ChatbotMessage({
+      kind: 'user',
+      user: {},
+      content: 'Voici un message de l\'utilisateur pour tester l\'affichage.',
+      name: 'User'
+    })
+  }
+};
+
+export const AIMessage: Story = {
+  args: {
+    kind: 'llm',
+    content: 'Je suis un assistant IA qui répond à vos questions. Voici une réponse détaillée qui peut contenir du <strong>HTML</strong> et des listes:<ul><li>Point 1</li><li>Point 2</li></ul>',
+    message: new ChatbotMessage({
+      kind: 'llm',
+      user: {},
+      content: 'Je suis un assistant IA qui répond à vos questions. Voici une réponse détaillée qui peut contenir du <strong>HTML</strong> et des listes:<ul><li>Point 1</li><li>Point 2</li></ul>',
+      name: 'Assistant'
+    })
+  }
+};
+
+export const LongAIMessage: Story = {
+  args: {
+    kind: 'llm',
+    content: `<p>Voici une réponse longue avec beaucoup de contenu pour tester comment le composant gère les grands blocs de texte.</p>
+    <p>Les documents mettent également en évidence diverses mesures de sécurité post-incident mises en œuvre, notamment des procédures de formation améliorées, des protocoles de maintenance renforcés et des modifications de la conception des aéronefs. Des organismes de réglementation tels que le NTSB, le BEA, l'AAIB et d'autres ont participé à l'enquête sur ces incidents et ont formulé des recommandations de sécurité.</p>
+    <p>Ce résumé donne un aperçu des incidents aéronautiques importants, de leurs causes et de leurs conséquences, ce qui peut être utile pour comprendre les schémas d'accidents d'aéronefs et les domaines à améliorer en matière de sécurité aérienne.</p>
+    <br/>
+    <p>Pas de recherche Internet activée.<br/>
+    Aucune recherche Internet n'a été activée pour cette requête</p>
+    <br/>
+    <p>Résultats de recherche.</p>`,
+    message: new ChatbotMessage({
+      kind: 'llm',
+      user: {},
+      content: 'Contenu long...',
+      name: 'Assistant'
+    })
+  }
+};

old-sae-airwatch/src/app/chatbot/new-input/new-input.stories.ts

@@ -0,0 +1,72 @@
+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';
+
+const appReducer = reducers.app;
+
+const meta: Meta<NewInput> = {
+  title: 'Components/NewInput',
+  component: NewInput,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FormsModule,
+        PromptInput,
+        ToolsOptions,
+        HttpClientModule,
+        StoreModule.forRoot({ app: appReducer as any })
+      ],
+      providers: [
+        ApiService,
+        Store
+      ]
+    })
+  ],
+  parameters: {
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#f5f5f5' },
+        { name: 'dark', value: '#333' },
+      ],
+    },
+  }
+};
+
+export default meta;
+type Story = StoryObj<NewInput>;
+
+export const Default: Story = {
+  args: {
+    // Propriétés par défaut
+  }
+};
+
+export const DarkTheme: Story = {
+  args: {
+    // Propriétés par défaut
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    store: {
+      init: (store: Store) => {
+        store.dispatch({
+          type: 'UPDATE_APP',
+          payload: {
+            theme: 'dark'
+          }
+        });
+      }
+    }
+  }
+};

old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { PromptInput } from './prompt-input';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Store, StoreModule } from '@ngrx/store';
+import { reducers } from '../../reducers';
+import { HttpClientModule } from '@angular/common/http';
+import { ApiService } from '../../api-service';
+
+const appReducer = reducers.app;
+
+const meta: Meta<PromptInput> = {
+  title: 'Components/PromptInput',
+  component: PromptInput,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FormsModule,
+        HttpClientModule,
+        StoreModule.forRoot({ app: appReducer as any })
+      ],
+      providers: [
+        ApiService,
+        Store
+      ]
+    })
+  ],
+  argTypes: {
+    // Vous pouvez définir des contrôles pour les propriétés ici
+  }
+};
+
+export default meta;
+type Story = StoryObj<PromptInput>;
+
+export const Default: Story = {
+  args: {
+    // Les propriétés par défaut
+  }
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    // Les propriétés avec un placeholder personnalisé
+  },
+  parameters: {
+    // Vous pouvez surcharger certains paramètres ici
+  }
+};
+
+export const LoadingState: Story = {
+  args: {
+    // Les propriétés de base
+  },
+  parameters: {
+    store: {
+      init: (store: Store) => {
+        store.dispatch({
+          type: 'UPDATE_APP',
+          payload: {
+            loading: true
+          }
+        });
+      }
+    }
+  }
+};

old-sae-airwatch/src/app/chatbot/source-block/source-block.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { SourceBlock } from './source-block';
+import { ChatbotSource } from '../../services/conversations.service';
+
+const meta: Meta<SourceBlock> = {
+  title: 'Components/SourceBlock',
+  component: SourceBlock,
+  tags: ['autodocs'],
+  argTypes: {
+    source: {
+      control: 'object',
+      description: 'Objet contenant les informations de la source'
+    }
+  },
+};
+
+export default meta;
+type Story = StoryObj<SourceBlock>;
+
+export const Default: Story = {
+  args: {
+    source: new ChatbotSource({
+      title: 'Document technique.pdf',
+      url: 'https://example.com/document-technique.pdf',
+      description: 'Ce document contient des informations techniques sur les avions de ligne modernes et leur maintenance.'
+    })
+  },
+};
+
+export const ShortDescription: Story = {
+  args: {
+    source: new ChatbotSource({
+      title: 'Rapport d\'accident.pdf',
+      url: 'https://example.com/rapport-accident.pdf',
+      description: 'Rapport concernant l\'incident de vol 123.'
+    })
+  },
+};
+
+export const LongDescription: Story = {
+  args: {
+    source: new ChatbotSource({
+      title: 'Documentation complète.pdf',
+      url: 'https://example.com/documentation-complete.pdf',
+      description: 'DE GAGNE DATE: JANUARY 18, 2008 VEN #: V6-CAW-M2700-10 APPROVED BY: MARTIN SWAN DATE: FEBRUARY 5, 2008 -TITLE- DHC-6 ELEVATOR CONTROL CABLE WEAR SURVEY RESULTS ISSUE: 2 PAGE 2 respondents, representing 16 aircraft, operate outside the tropics and have a cycle/hour ratio of 1.6 to 2.8. Most respondents have reported that carbon steel elevator control cables are more wear resistant than stainless steel cables. Two operators in the tropics, representing 39 aircraft, use.'
+    })
+  },
+};
+
+export const WithoutUrl: Story = {
+  args: {
+    source: new ChatbotSource({
+      title: 'Document interne.pdf',
+      description: 'Document à usage interne uniquement, sans lien externe.'
+    })
+  },
+};

old-sae-airwatch/src/app/ds-navbar/ds-navbar.stories.ts

@@ -0,0 +1,73 @@
+import type {Meta, StoryObj} from '@storybook/angular';
+import {moduleMetadata} from '@storybook/angular';
+import {DsNavbar} from './ds-navbar';
+import {CommonModule} from '@angular/common';
+import {Store, StoreModule} from '@ngrx/store';
+import {reducers} from '../reducers';
+
+const appReducer = reducers.app;
+
+const meta: Meta<DsNavbar> = {
+  title: 'Navigation/DsNavbar',
+  component: DsNavbar,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        StoreModule.forRoot({app: appReducer as any}),
+      ],
+      providers: [
+        Store
+      ]
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  }
+};
+
+export default meta;
+type Story = StoryObj<DsNavbar>;
+
+export const Default: Story = {
+  args: {
+    // Propriétés par défaut
+  }
+};
+
+export const Expanded: Story = {
+  args: {
+    // Propriétés par défaut
+  },
+  parameters: {
+    store: {
+      init: (store: Store) => {
+        store.dispatch({
+          type: 'UPDATE_APP',
+          payload: {
+            displayConversationListPanelLarge: true
+          }
+        });
+      }
+    }
+  }
+};
+
+export const Collapsed: Story = {
+  args: {
+    // Propriétés par défaut
+  },
+  parameters: {
+    store: {
+      init: (store: Store) => {
+        store.dispatch({
+          type: 'UPDATE_APP',
+          payload: {
+            displayConversationListPanelLarge: false
+          }
+        });
+      }
+    }
+  }
+};

old-sae-airwatch/src/app/main-button/main-button.stories.ts

@@ -9,6 +9,11 @@ const meta: Meta<MainButton> = {
   argTypes: {
     label: { control: 'text' },
     icon: { control: 'text' },
+    kind: { 
+      control: 'select', 
+      options: ['', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'],
+      description: 'Style du bouton'
+    },
   },
 };
 
@@ -20,6 +25,47 @@ export const Primary: Story = {
   args: {
     label: 'Button',
     icon: 'ri-home-line',
+    kind: 'primary'
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Secondary Button',
+    icon: 'ri-settings-line',
+    kind: 'secondary'
+  },
+};
+
+export const Info: Story = {
+  args: {
+    label: 'Info Button',
+    icon: 'ri-information-line',
+    kind: 'info'
+  },
+};
+
+export const Success: Story = {
+  args: {
+    label: 'Success Button',
+    icon: 'ri-check-line',
+    kind: 'success'
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    label: 'Warning Button',
+    icon: 'ri-alert-line',
+    kind: 'warning'
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    label: 'Danger Button',
+    icon: 'ri-close-circle-line',
+    kind: 'danger'
   },
 };
 
@@ -27,6 +73,7 @@ export const WithoutIcon: Story = {
   args: {
     label: 'Button without icon',
     icon: '',
+    kind: 'primary'
   },
 };
 
@@ -34,5 +81,6 @@ export const WithIcon: Story = {
   args: {
     label: 'Button with icon',
     icon: 'ri-user-line',
+    kind: ''
   },
 };

old-sae-airwatch/src/app/services/conversations.service.ts

@@ -3,9 +3,16 @@ import {ChatbotMessage} from './chatbot.message.type';
 
 
 export class ChatbotSource {
-  title: string = "";
-  url: string = "";
-  description: string = "";
+
+  public title = "";
+  public url = "";
+  public description = "";
+
+  constructor(config: any = {}) {
+    this.title = config.title;
+    this.url = config.url;
+    this.description = config.description;
+  }
 }
 
 export class ChatbotConversation {