Gestion de la copie sans ClipboardJs

vite/src/ChatApp.svelte

@@ -1,7 +1,6 @@
 <script>
     import markdownit from 'markdown-it'
     import hljs from 'highlight.js';
-    import ClipboardJS from 'clipboard';
     import ChatMessage from './ChatMessage.svelte';
     import Modal from './Modal.svelte';
     import AssistantForm from './AssistantForm.svelte';
@@ -23,16 +22,6 @@
 
     onMount(() => {
 		refreshAssistants();
-        const clipboard = new ClipboardJS('.hljs-copy-button', {
-            target: function(trigger) {
-                console.log(trigger.parentNode.nextElementSibling)
-                return trigger.parentNode.nextElementSibling;
-            }
-        });
-
-        clipboard.on('success', function(e) {
-            e.clearSelection();
-        });
 	});
 
     const md = markdownit({

vite/src/ChatMessage.svelte

@@ -31,6 +31,25 @@
         }
 	});
 
+    function handleClick(event) {
+        let codeToCopy = null;
+
+        // Vérifiez si l'élément cliqué ou son parent immédiat est le bouton de copie
+        const target = event.target;
+        const isCopyButton = target.classList.contains('hljs-copy-button');
+        const isChildOfCopyButton = target.parentNode && target.parentNode.classList.contains('hljs-copy-button');
+
+        if (isCopyButton || isChildOfCopyButton) {
+            // Trouvez le bon élément parent pour accéder au texte à copier
+            const copyButton = isCopyButton ? target : target.parentNode;
+            codeToCopy = copyButton.parentNode.nextElementSibling.innerText;
+            copyToClipboard(codeToCopy);
+
+            event.stopPropagation();
+        }
+    }
+
+
 	function handleKeyDown(event) {
 		if (event.key === 'Enter' && event.shiftKey) {
 			// Allow the default behavior of adding a new line
@@ -74,7 +93,9 @@
 </style>
 
 {#if message.role != 'system'}
-    <div class={message.role + ' message'}>
+
+    <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+    <div class={message.role + ' message'} on:click={handleClick}>
 
 	{#if isEditing}
         <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -91,9 +112,15 @@
 	                <span class="icon-edit"></span>
 	            </button>
             {:else if message.role == 'assistant'}
-                <button class="btn btn-primary btn-sm" title="Copier" on:click={handleCopy}><span class="icon-content_copy"></span></button>
+                <button class="btn btn-primary btn-sm" title="Copier" on:click={handleCopy}>
-                <button class="btn btn-primary btn-sm" title="Régénérer"><span class="icon-loop"></span></button>
+                    <span class="icon-content_copy"></span>
-                <button class="btn btn-primary btn-sm" title="Supprimer le message"><span class="icon-delete"></span></button>
+                </button>
+                <button class="btn btn-primary btn-sm" title="Régénérer">
+                    <span class="icon-loop"></span>
+                </button>
+                <button class="btn btn-primary btn-sm" title="Supprimer le message">
+                    <span class="icon-delete"></span>
+                </button>
             {/if}
         </div>
 	{/if}