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.
23 Commits
2 Branches
Tree: b468cb4bad
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'b468cb4bad'
${ noResults }
ReAct_PME/WebUI/ReAct_PME.WebUI/Pages/ChatRoom/ChatRoom_base.razor

408 lines
27KB
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.                             @* Sélecteur de domaine pour RAG *@

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

  86.                             {

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

  88.                                     @foreach (var domain in RagDomains)

  89.                                     {

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

  91.                                     }

  92.                                 </select>

  93.                             }

  94. 

  95.                             @* Input ID Client pour AUDIT *@

  96.                             @if (SelectedAgentType == 3)

  97.                             {

  98.                                 <input type="text"

  99.                                        class="client-id-input"

  100.                                        @bind="ClientId"

  101.                                        placeholder="ID Client"

  102.                                        aria-label="ID Client" />

  103.                             }

  104. 

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

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

  107.                                     <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" />

  108.                                 </svg>

  109.                             </button>

  110. 

  111.                             <button class="send-button"

  112.                                     @onclick="SendMessageFromHome"

  113.                                     disabled="@((string.IsNullOrWhiteSpace(CurrentInput) && !UploadedDocuments.Any()) || isDisabled || (SelectedAgentType == 3 && string.IsNullOrWhiteSpace(ClientId)))"

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

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

  116.                                     <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" />

  117.                                 </svg>

  118.                             </button>

  119.                         </div>

  120.                     </div>

  121.                 </div>

  122. 

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

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

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

  126.                         <input type="radio"

  127.                                id="agent1"

  128.                                name="agentType"

  129.                                value="1"

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

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

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

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

  134.                                 <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" />

  135.                             </svg>

  136.                         </div>

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

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

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

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

  141.                             </p>

  142.                         </div>

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

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

  145.                                 <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" />

  146.                             </svg>

  147.                         </div>

  148.                     </label>

  149. 

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

  151.                         <input type="radio"

  152.                                id="agent2"

  153.                                name="agentType"

  154.                                value="2"

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

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

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

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

  159.                                 <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" />

  160.                             </svg>

  161.                         </div>

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

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

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

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

  166.                             </p>

  167.                         </div>

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

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

  170.                                 <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" />

  171.                             </svg>

  172.                         </div>

  173.                     </label>

  174. 

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

  176.                         <input type="radio"

  177.                                id="agent3"

  178.                                name="agentType"

  179.                                value="3"

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

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

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

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

  184.                                 <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" />

  185.                                 <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" />

  186.                                 <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" />

  187.                             </svg>

  188.                         </div>

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

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

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

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

  193.                             </p>

  194.                         </div>

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

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

  197.                                 <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" />

  198.                             </svg>

  199.                         </div>

  200.                     </label>

  201. 

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

  203.                         <input type="radio"

  204.                                id="agent4"

  205.                                name="agentType"

  206.                                value="4"

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

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

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

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

  211.                                 <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" />

  212.                             </svg>

  213.                         </div>

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

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

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

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

  218.                             </p>

  219.                         </div>

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

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

  222.                                 <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" />

  223.                             </svg>

  224.                         </div>

  225.                     </label>

  226.                 </div>

  227.             </div>

  228.         </div>

  229.     </div>

  230. 

  231. }

  232. else

  233. {

  234.     <!-- Vue ChatRoom -->

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

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

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

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

  239.             {

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

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

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

  243.                     <p>Tapez votre premier message ci-dessous</p>

  244.                 </div>

  245.             }

  246.             else

  247.             {

  248.                 @foreach (var msg in Messages)

  249.                 {

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

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

  252.                             @if (msg.IsUser)

  253.                             {

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

  255.                                     <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z" />

  256.                                 </svg>

  257.                             }

  258.                             else

  259.                             {

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

  261.                                     <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" />

  262.                                     <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" />

  263.                                 </svg>

  264.                             }

  265.                         </div>

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

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

  268.                                 @msg.Text

  269.                             </div>

  270.                             @if (!msg.IsUser)

  271.                             {

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

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

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

  275.                                             <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" />

  276.                                             <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" />

  277.                                         </svg>

  278.                                     </button>

  279.                                 </div>

  280.                             }

  281.                         </div>

  282.                     </div>

  283.                 }

  284. 

  285.                 @if (isTyping)

  286.                 {

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

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

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

  290.                                 <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" />

  291.                                 <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" />

  292.                             </svg>

  293.                         </div>

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

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

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

  297.                                     <span></span>

  298.                                     <span></span>

  299.                                     <span></span>

  300.                                 </div>

  301.                             </div>

  302.                         </div>

  303.                     </div>

  304.                 }

  305.             }

  306.         </div>

  307. 

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

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

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

  311.             @if (UploadedDocuments.Any())

  312.             {

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

  314.                     @foreach (var doc in UploadedDocuments)

  315.                     {

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

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

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

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

  320.                                         <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" />

  321.                                     </svg>

  322.                                 </div>

  323.                             </div>

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

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

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

  327.                             </div>

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

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

  330.                                     <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" />

  331.                                 </svg>

  332.                             </button>

  333.                         </div>

  334.                     }

  335.                 </div>

  336.             }

  337. 

  338.             <!-- Input wrapper -->

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

  340.                 <textarea id="chatroomTextarea"

  341.                           @bind="CurrentInput"

  342.                           @oninput="OnChatroomTextareaInput"

  343.                           @onkeydown="HandleKeyPress"

  344.                           placeholder="Nouvelle conversation..."

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

  346. 

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

  348.                     <!-- Bouton attachement -->

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

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

  351.                             <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" />

  352.                         </svg>

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

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

  355.                     </label>

  356. 

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

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

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

  360.                         {

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

  362.                                 @foreach (var domain in RagDomains)

  363.                                 {

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

  365.                                 }

  366.                             </select>

  367.                         }

  368. 

  369.                         @* Input ID Client pour AUDIT *@

  370.                         @if (TypeLLM == 3)

  371.                         {

  372.                             <input type="text"

  373.                                    class="client-id-input"

  374.                                    @bind="ClientId"

  375.                                    placeholder="ID Client"

  376.                                    aria-label="ID Client" />

  377.                         }

  378. 

  379.                         <!-- Bouton historique -->

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

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

  382.                                 <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" />

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

  384.                                 <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" />

  385.                             </svg>

  386.                         </button>

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

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

  389.                                 <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" />

  390.                             </svg>

  391.                         </button>

  392. 

  393.                         <!-- Bouton envoyer -->

  394.                         <button class="send-button"

  395.                                 @onclick="SendMessage"

  396.                                 disabled="@((string.IsNullOrWhiteSpace(CurrentInput) && !UploadedDocuments.Any()) || (TypeLLM == 3 && string.IsNullOrWhiteSpace(ClientId)))"

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

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

  399.                                 <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" />

  400.                             </svg>

  401.                         </button>

  402.                     </div>

  403.                 </div>

  404.             </div>

  405.         </div>

  406.     </div>

  407. }