Intégration clipboard

vite/src/ChatApp.svelte

@@ -1,7 +1,7 @@
 <script>
     import markdownit from 'markdown-it'
     import hljs from 'highlight.js';
-    // import ClipboardJS from 'clipboard';
+    import ClipboardJS from 'clipboard';
     import ChatMessage from './ChatMessage.svelte';
     import Modal from './Modal.svelte';
     import AssistantForm from './AssistantForm.svelte';
@@ -24,25 +24,34 @@
 
     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({
         linkify: true,
-
         highlight(code, lang) {
             const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-            const html = hljs.highlight(code, {language: language, ignoreIllegals: true }).value
-            return `<pre class="hljs-code-container my-3"><div class="hljs-code-header"><span>${language}</span><button class="hljs-copy-button">Copy</button></div><code class="hljs language-${language}">${html}</code></pre>`
+            const html = hljs.highlight(code, {language: language, ignoreIllegals: true }).value;
+            return '<pre class="hljs-code-container my-3">'
+            + '<div class="hljs-code-header bg-light-subtle text-light-emphasis">' + `<span>${language}</span>`
+            + '<button class="hljs-copy-button btn btn-secondary btn-sm" title="Copier le code">'
+            + '<span class="icon-content_copy"></span></button></div>'
+            + `<code class="hljs language-${language}">${html}</code>`
+            + '</pre>';
         },
     });
 
     /*
-    new ClipboardJS('.hljs-copy-button', {
-        target: function(trigger) {
-            console.log(trigger.parentNode.nextElementSibling)
-            return trigger.parentNode.nextElementSibling;
-        }
-    });
+
     */
 
     async function postRequest(url, headers, body) {

vite/src/ChatMessage.svelte

@@ -21,22 +21,8 @@
 </script>
 
 <style>
-    .hljs-code-header {
-        display: flex;
-        justify-content: space-between;
-        padding: 3px 6px;
-        background-color: #9b9b9b;
-        color: #fff;
-    }
-
     .message {
-        padding: 2px 16px;
-    }
-
-    code:not(.hljs) {
-        color: #4d4d4d;
-        padding: 0 5px;
-        display: inline-block;
+        padding: 16px;
     }
 
     .assistant {
@@ -48,4 +34,4 @@
     <div class={message.role + ' message'}>
         {@html renderedContent}
     </div>
- {/if}
+ {/if}

vite/src/styles/_fonts.scss

@@ -43,6 +43,9 @@
   .icon-add:before {
     content: "\e904";
   }
+  .icon-content_copy:before {
+    content: "\e90c";
+  }
   .icon-edit:before {
     content: "\e905";
   }

vite/src/styles/site.scss

@@ -56,5 +56,40 @@ body {
   }
 }
 
+code:not(.hljs) {
+  color: #4d4d4d;
+  padding: 0 5px;
+  display: inline-block;
+}
+
+.hljs-code-container {
+
+  border-radius: var(--bs-border-radius-sm);
+
+  .hljs-code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & > span {
+      display: inline-block;
+      padding-left: 1em;
+      font-family: var(--bs-font-sans-serif);
+      text-transform: capitalize;
+      font-weight: 700;
+    }
+
+    & > button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    border-bottom: 1px solid var(--bs-gray-200);
+  }
+
+
+}
+