guillaume.topenot
/
ReAct_PME
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
22 Commits
2 Branches
Tree: f405c8927c
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'f405c8927c'
${ noResults }
ReAct_PME/WebUI/ReAct_PME.WebUI/Pages/ChatRoom/ChatRoom_base.razor

389 lines
25KB
Raw Blame History 

  1. @page "/chatroom_base/{typellm:int}"

  2. @page "/chatroom_base/{typellm:int}/{conversationid}"

  3. 

  4. <script>

  5.     window.autoResizeTextarea = function (elementId) {

  6.         const element = document.getElementById(elementId);

  7.         if (!element) return;

  8. 

  9.         element.style.height = 'auto';

  10.         element.style.height = Math.min(element.scrollHeight, 200) + 'px';

  11.     };

  12. 

  13.     window.setupTextareaAutoResize = function (textareaId) {

  14.         const textarea = document.getElementById(textareaId);

  15.         if (!textarea) return;

  16. 

  17.         textarea.addEventListener('input', function () {

  18.             window.autoResizeTextarea(this);

  19.         });

  20. 

  21.         // Initial resize

  22.         window.autoResizeTextarea(textarea);

  23.     };

  24. </script>

  25. 

  26. @if (TypeLLM == 0)

  27. {

  28.     <!-- Vue Home -->

  29.     <div class="home-container">

  30.         <div class="home-content">

  31.             <!-- Section bienvenue -->

  32.             <div class="welcome-section">

  33.                 <h1 class="welcome-title">Bonjour !</h1>

  34.                 <p class="welcome-subtitle">Qu'est-ce qu'on fait aujourd'hui ?</p>

  35.             </div>

  36. 

  37.             <!-- Zone de saisie -->

  38.             <div class="input-container">

  39.                 @if (UploadedDocuments.Any())

  40.                 {

  41.                     <div class="input-files">

  42.                         @foreach (var doc in UploadedDocuments)

  43.                         {

  44.                             <div class="file-item">

  45.                                 <div class="file-preview">

  46.                                     <div class="file-icon">

  47.                                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  48.                                             <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z" />

  49.                                         </svg>

  50.                                     </div>

  51.                                 </div>

  52.                                 <div class="file-info">

  53.                                     <span class="file-name">@doc.FileName</span>

  54.                                     <span class="file-size">@FormatFileSize(doc.Bytes.Length)</span>

  55.                                 </div>

  56.                                 <button class="remove-file-button" @onclick="() => RemoveDocument(doc)" aria-label="Supprimer le fichier">

  57.                                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">

  58.                                         <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />

  59.                                     </svg>

  60.                                 </button>

  61.                             </div>

  62.                         }

  63.                     </div>

  64.                 }

  65. 

  66.                 <div class="input-wrapper @(UploadedDocuments.Any() ? "has-files" : "")">

  67.                     <textarea id="homeTextarea"

  68.                               @bind="CurrentInput"

  69.                               @oninput="OnHomeTextareaInput"

  70.                               placeholder="Nouvelle conversation..."

  71.                               rows="1"

  72.                               disabled="@isDisabled"></textarea>

  73. 

  74.                     <div class="input-actions">

  75.                         <label class="attach-button" for="fileInputHome">

  76.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">

  77.                                 <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />

  78.                             </svg>

  79.                             <span>Importer un fichier</span>

  80.                             <InputFile id="fileInputHome" OnChange="HandleFileSelection" multiple style="display: none;" />

  81.                         </label>

  82. 

  83.                         <div class="input-right-actions">

  84.                             @if (!hiddenDomain && SelectedAgentType == 2 && RagDomains.Any())

  85.                             {

  86.                                 <select class="domain-select" @bind="SelectedDomain">

  87.                                     @foreach (var domain in RagDomains)

  88.                                     {

  89.                                         <option value="@domain">@domain</option>

  90.                                     }

  91.                                 </select>

  92.                             }

  93.                             <button class="voice-button" @onclick="RecordVoice" aria-label="Message vocal">

  94.                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">

  95.                                     <path fill-rule="evenodd" d="M8.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5m-2 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m-6 1.5A.5.5 0 0 1 5 6v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m8 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m-10 1A.5.5 0 0 1 3 7v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5m12 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5" />

  96.                                 </svg>

  97.                             </button>

  98. 

  99.                             <button class="send-button"

  100.                                     @onclick="SendMessageFromHome"

  101.                                     disabled="@((string.IsNullOrWhiteSpace(CurrentInput) && !UploadedDocuments.Any()) || isDisabled)"

  102.                                     aria-label="Envoyer le message">

  103.                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">

  104.                                     <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5" />

  105.                                 </svg>

  106.                             </button>

  107.                         </div>

  108.                     </div>

  109.                 </div>

  110. 

  111.                 <!-- Cartes des agents -->

  112.             <div class="agents-grid">

  113.                 <label class="agent-card @(SelectedAgentType == 1 ? "selected" : "")" for="agent1">

  114.                     <input type="radio" 

  115.                            id="agent1" 

  116.                            name="agentType" 

  117.                            value="1" 

  118.                            checked="@(SelectedAgentType == 1)"

  119.                            @onchange="() => SelectAgent(1)" />

  120.                     <div class="agent-icon">

  121.                         <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 16 16">

  122.                             <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325" />

  123.                         </svg>

  124.                     </div>

  125.                     <div class="agent-content">

  126.                         <h3 class="agent-name">conversation</h3>

  127.                         <p class="agent-description">

  128.                                 Discutez avec un agent IA ayant une bonne connaissance de votre secteur d'activité

  129.                         </p>

  130.                     </div>

  131.                     <div class="agent-check">

  132.                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  133.                             <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>

  134.                         </svg>

  135.                     </div>

  136.                 </label>

  137. 

  138.                 <label class="agent-card @(SelectedAgentType == 2 ? "selected" : "")" for="agent2">

  139.                     <input type="radio" 

  140.                            id="agent2" 

  141.                            name="agentType" 

  142.                            value="2" 

  143.                            checked="@(SelectedAgentType == 2)"

  144.                            @onchange="() => SelectAgent(2)" />

  145.                     <div class="agent-icon">

  146.                         <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 16 16">

  147.                             <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0" />

  148.                         </svg>

  149.                     </div>

  150.                     <div class="agent-content">

  151.                         <h3 class="agent-name">Agent RAG</h3>

  152.                         <p class="agent-description">

  153.                                 un agent possédant une excellente connaissance de votre base documentaire

  154.                             </p>

  155.                     </div>

  156.                     <div class="agent-check">

  157.                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  158.                             <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>

  159.                         </svg>

  160.                     </div>

  161.                 </label>

  162. 

  163.                 <label class="agent-card @(SelectedAgentType == 3 ? "selected" : "")" for="agent3">

  164.                     <input type="radio" 

  165.                            id="agent3" 

  166.                            name="agentType" 

  167.                            value="3" 

  168.                            checked="@(SelectedAgentType == 3)"

  169.                            @onchange="() => SelectAgent(3)" />

  170.                     <div class="agent-icon">

  171.                         <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 16 16">

  172.                             <path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0" />

  173.                             <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2" />

  174.                             <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z" />

  175.                         </svg>

  176.                     </div>

  177.                     <div class="agent-content">

  178.                             <h3 class="agent-name">L'agent Audit</h3>

  179.                             <p class="agent-description">

  180.                                 Un agent IA spécialisé dans l'étude de vos documents et dans la réalisation d'audit financier

  181.                             </p>

  182.                     </div>

  183.                     <div class="agent-check">

  184.                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  185.                             <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>

  186.                         </svg>

  187.                     </div>

  188.                 </label>

  189. 

  190.                 <label class="agent-card @(SelectedAgentType == 4 ? "selected" : "")" for="agent4">

  191.                     <input type="radio" 

  192.                            id="agent4" 

  193.                            name="agentType" 

  194.                            value="4" 

  195.                            checked="@(SelectedAgentType == 4)"

  196.                            @onchange="() => SelectAgent(4)" />

  197.                     <div class="agent-icon">

  198.                         <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 16 16">

  199.                             <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z" />

  200.                         </svg>

  201.                     </div>

  202.                     <div class="agent-content">

  203.                             <h3 class="agent-name">L'agent mail spécialisé</h3>

  204.                             <p class="agent-description">

  205.                                 un agent IA spécialisé dans le traitement de vos mails avec une approche humaine et experte

  206.                             </p>

  207.                     </div>

  208.                     <div class="agent-check">

  209.                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  210.                             <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>

  211.                         </svg>

  212.                     </div>

  213.                 </label>

  214.             </div>

  215.         </div>

  216.     </div>

  217.     </div>

  218. 

  219. }

  220. else

  221. {

  222.     <!-- Vue ChatRoom -->

  223.     <div class="chatroom-container">

  224.         <!-- Zone de messages -->

  225.         <div class="chatroom-messages">

  226.             @if (SelectedConversation == null || !Messages.Any())

  227.             {

  228.                 <div class="chatroom-empty">

  229.                     <div class="empty-icon">💬</div>

  230.                     <h3>Commencez une conversation</h3>

  231.                     <p>Posez une question ou envoyez un message pour démarrer</p>

  232.                 </div>

  233.             }

  234.             else

  235.             {

  236.                 @foreach (var msg in Messages)

  237.                 {

  238.                     <div class="message-row @(msg.IsUser ? "user" : "assistant")">

  239.                         <div class="avatar @(msg.IsUser ? "avatar-user" : "avatar-assistant")">

  240.                             @if (msg.IsUser)

  241.                             {

  242.                                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  243.                                     <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />

  244.                                     <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1" />

  245.                                 </svg>

  246.                             }

  247.                             else

  248.                             {

  249.                                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  250.                                     <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />

  251.                                     <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />

  252.                                 </svg>

  253.                             }

  254.                         </div>

  255. 

  256.                         <div class="message-content-wrapper">

  257.                             <div class="bubble @(msg.IsUser ? "bubble-user" : "bubble-assistant")">

  258.                                 @msg.Text

  259.                             </div>

  260. 

  261.                             @if (!msg.IsUser)

  262.                             {

  263.                                 <div class="message-actions">

  264.                                     <button class="btn-message-action" @onclick="() => CopyMessage(msg.Text)" title="Copier">

  265.                                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">

  266.                                             <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z" />

  267.                                             <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z" />

  268.                                         </svg>

  269.                                     </button>

  270.                                 </div>

  271.                             }

  272.                         </div>

  273.                     </div>

  274.                 }

  275. 

  276.                 @if (isTyping)

  277.                 {

  278.                     <div class="message-row assistant">

  279.                         <div class="avatar avatar-assistant">

  280.                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  281.                                 <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />

  282.                                 <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />

  283.                             </svg>

  284.                         </div>

  285.                         <div class="message-content-wrapper">

  286.                             <div class="bubble bubble-assistant">

  287.                                 <div class="typing-indicator">

  288.                                     <span></span>

  289.                                     <span></span>

  290.                                     <span></span>

  291.                                 </div>

  292.                             </div>

  293.                         </div>

  294.                     </div>

  295.                 }

  296.             }

  297.         </div>

  298. 

  299.         <!-- Zone de saisie moderne -->

  300.         <div class="chat-input-container">

  301.             <!-- Fichiers attachés -->

  302.             @if (UploadedDocuments.Any())

  303.             {

  304.                 <div class="attached-files">

  305.                     @foreach (var doc in UploadedDocuments)

  306.                     {

  307.                         <div class="file-item">

  308.                             <div class="file-preview">

  309.                                 <div class="file-icon">

  310.                                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">

  311.                                         <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z" />

  312.                                     </svg>

  313.                                 </div>

  314.                             </div>

  315.                             <div class="file-info">

  316.                                 <span class="file-name">@doc.FileName</span>

  317.                                 <span class="file-size">@FormatFileSize(doc.Bytes.Length)</span>

  318.                             </div>

  319.                             <button class="remove-file-button" @onclick="() => RemoveDocument(doc)" aria-label="Supprimer le fichier">

  320.                                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">

  321.                                     <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />

  322.                                 </svg>

  323.                             </button>

  324.                         </div>

  325.                     }

  326.                 </div>

  327.             }

  328. 

  329.             <!-- Input wrapper -->

  330.             <div class="input-wrapper @(UploadedDocuments.Any() ? "has-files" : "")">

  331.                 <textarea id="chatroomTextarea"

  332.                           @bind="CurrentInput"

  333.                           @oninput="OnChatroomTextareaInput"

  334.                           @onkeydown="HandleKeyPress"

  335.                           placeholder="Nouvelle conversation..."

  336.                           rows="1"></textarea>

  337. 

  338.                 <div class="actions-row">

  339.                     <!-- Bouton attachement -->

  340.                     <label class="attach-button" for="fileUpload">

  341.                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">

  342.                             <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />

  343.                         </svg>

  344.                         <span>Importer un fichier</span>

  345.                         <InputFile id="fileUpload" OnChange="UploadDocuments" multiple style="display: none;" />

  346.                     </label>

  347. 

  348.                     <div class="right-actions">

  349.                         <!-- Sélecteur de domaine RAG -->

  350.                         @if (!hiddenDomain && RagDomains.Any())

  351.                         {

  352.                             <select class="domain-select" @bind="SelectedDomain">

  353.                                 @foreach (var domain in RagDomains)

  354.                                 {

  355.                                     <option value="@domain">@domain</option>

  356.                                 }

  357.                             </select>

  358.                         }

  359. 

  360.                         <!-- Bouton historique -->

  361.                         <button class="history-button @(IsWithHistorique ? "active" : "desactive")" @onclick="ToggleHistory" title="@(IsWithHistorique ? "Historique activé" : "Historique désactivé")">

  362.                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">

  363.                                 <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z" />

  364.                                 <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z" />

  365.                                 <path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5" />

  366.                             </svg>

  367.                         </button>

  368.                         <button class="voice-button" @onclick="RecordVoice" aria-label="Message vocal">

  369.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">

  370.                                 <path fill-rule="evenodd" d="M8.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5m-2 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m-6 1.5A.5.5 0 0 1 5 6v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m8 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m-10 1A.5.5 0 0 1 3 7v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5m12 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5" />

  371.                             </svg>

  372.                         </button>

  373. 

  374.                         <!-- Bouton envoyer -->

  375.                         <button class="send-button"

  376.                                 @onclick="SendMessage"

  377.                                 disabled="@(string.IsNullOrWhiteSpace(CurrentInput) && !UploadedDocuments.Any())"

  378.                                 aria-label="Envoyer le message">

  379.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">

  380.                                 <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5" />

  381.                             </svg>

  382.                         </button>

  383.                     </div>

  384.                 </div>

  385.             </div>

  386.         </div>

  387.     </div>

  388. }