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);
+  }
+
+
+}
+
 
 

web/fonts/icomoon.svg

@@ -19,4 +19,5 @@
 <glyph unicode="&#xe909;" glyph-name="file_upload" d="M214 170.667h596v-86h-596v86zM384 256.667v256h-170l298 298 298-298h-170v-256h-256z" />
 <glyph unicode="&#xe90a;" glyph-name="library_add" d="M810 468.667v86h-170v170h-86v-170h-170v-86h170v-170h86v170h170zM854 852.667q34 0 59-25t25-59v-512q0-34-25-60t-59-26h-512q-34 0-60 26t-26 60v512q0 34 26 59t60 25h512zM170 682.667v-598h598v-84h-598q-34 0-59 25t-25 59v598h84z" />
 <glyph unicode="&#xe90b;" glyph-name="settings" d="M512 276.667q62 0 106 44t44 106-44 106-106 44-106-44-44-106 44-106 106-44zM830 384.667l90-70q14-10 4-28l-86-148q-8-14-26-8l-106 42q-42-30-72-42l-16-112q-4-18-20-18h-172q-16 0-20 18l-16 112q-38 16-72 42l-106-42q-18-6-26 8l-86 148q-10 18 4 28l90 70q-2 14-2 42t2 42l-90 70q-14 10-4 28l86 148q8 14 26 8l106-42q42 30 72 42l16 112q4 18 20 18h172q16 0 20-18l16-112q38-16 72-42l106 42q18 6 26-8l86-148q10-18-4-28l-90-70q2-14 2-42t-2-42z" />
+<glyph unicode="&#xe90c;" glyph-name="content_copy" d="M810 42.667v598h-468v-598h468zM810 724.667q34 0 60-25t26-59v-598q0-34-26-60t-60-26h-468q-34 0-60 26t-26 60v598q0 34 26 59t60 25h468zM682 896.667v-86h-512v-598h-84v598q0 34 25 60t59 26h512z" />
 </font></defs></svg>