From e757074056b32e564f63a503eef0be019f4f60f0 Mon Sep 17 00:00:00 2001
From: ilhooq <contact@sphilip.com>
Date: Tue, 10 Sep 2024 00:11:13 +0200
Subject: [PATCH] =?UTF-8?q?Int=C3=A9gration=20clipboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite/src/ChatApp.svelte     |  29 +++++++++++++++++++----------
 vite/src/ChatMessage.svelte |  18 ++----------------
 vite/src/styles/_fonts.scss |   3 +++
 vite/src/styles/site.scss   |  35 +++++++++++++++++++++++++++++++++++
 web/fonts/icomoon.eot       | Bin 2484 -> 2600 bytes
 web/fonts/icomoon.svg       |   1 +
 web/fonts/icomoon.ttf       | Bin 2320 -> 2436 bytes
 web/fonts/icomoon.woff      | Bin 2396 -> 2512 bytes
 8 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/vite/src/ChatApp.svelte b/vite/src/ChatApp.svelte
index b65a6da..085fd95 100644
--- a/vite/src/ChatApp.svelte
+++ b/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) {
diff --git a/vite/src/ChatMessage.svelte b/vite/src/ChatMessage.svelte
index b8a7c59..ec7fec9 100644
--- a/vite/src/ChatMessage.svelte
+++ b/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}
\ No newline at end of file
+ {/if}
diff --git a/vite/src/styles/_fonts.scss b/vite/src/styles/_fonts.scss
index 33f7730..88d5c40 100644
--- a/vite/src/styles/_fonts.scss
+++ b/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";
   }
diff --git a/vite/src/styles/site.scss b/vite/src/styles/site.scss
index d452a83..a16179f 100644
--- a/vite/src/styles/site.scss
+++ b/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);
+  }
+
+
+}
+
 
 
diff --git a/web/fonts/icomoon.eot b/web/fonts/icomoon.eot
index 57e5bd8c1396e85f3a8efbfcd82f36ceb1233781..865e0e19d22dfb8d05ab94695f7337100b249b75 100644
GIT binary patch
delta 384
zcmdlYyh4OkgNuQoWg@FN3wz1D(1{M^f`SYT410h$Avrg(Ks@Zy<cTL_>JOG>nKLjj
zRxmKIHe{qGrfB?23uItm`vFvEmH`xCpTT^Ifq~rs$XCh8Evc{qGJyOLAmNgepPa~1
z!npy+p8@2n<R(@WFo-hv1Nk6(6!H>tQ)hZ{{s!{z0PSci$S*EoU<S%CaHfFd8JL+F
zZ%<BPv}fd*yoAx4k!SM<MqAc;po;$om>ZZ60M&{!C^9gp3MvXR8i|XE3W~6^DJv?e
ztC<R#n41}^iYf{!gIUa4|8y9yC`kc<(mx#t%^32JAw*JANt-F`?<%HMK-S+?5E-U0
zB}vIOAki?O00Se)MGOp~^Gev``E9<6FmSVg1s<~syaF*m^yC0`b4J0*9qbO1H?Xrz
eKEbXe#B>0xQ;@+I;wJ{C$qPA!H}i8WWds0%lU3>f

delta 271
zcmZ1>vPGD63nv4Ez(iJamY<t4&Q31m5SbW~EXc>ez_1616OwZi3&g`NO`3Q@rk-=k
zkrfOKj1>$FtO6OSi76VtKYV9kVCw*?Gs^%9u+Lz=2;?6C@>Mc&ODfEO3?TmrkZ{P!
zPfp}0Vf(<qz^(%1E9E9u6flS|_yhSKK)ym=Vs7e8FV5dUeg@Evwu1cP5(Z|V3<C#H
z4}$^&Gc)7O$tjHXjNFr#FnTj`Z~nk&%c{%>Qo+D*He=Jzcz&C&4BRYW{$u8Awjc(G
po_v7aoKax%4|a#iHXKSqKv9q;0R~@)@eE9p1-XPbH*+jy1OUZ1K_dVF

diff --git a/web/fonts/icomoon.svg b/web/fonts/icomoon.svg
index c555534..028cc30 100644
--- a/web/fonts/icomoon.svg
+++ b/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>
\ No newline at end of file
diff --git a/web/fonts/icomoon.ttf b/web/fonts/icomoon.ttf
index 93e7d2212d5216a233cd228e48d375a39ad06b14..b586aa11a70919d444145e2de33a414f8cb7ef66 100644
GIT binary patch
delta 393
zcmbOr)FNEZz{tSBz|GLWz|3IaAFOZ0FT^GY6xjpB3CX#M1>#|sCNnTF$^iKx>50V!
zKw1FE2hkkqIhAP#%d*UY{0asJ)`pDK#1xHxX@Lw3Y(IeVW*I;M_8H8V7#P?MfP9sV
z+>#0_AOpw`0TM1b`N@un93`9^fC4js0xG$Q6$K2U4E{hq$N>s@iMgpWy*PgZ`FDVp
zv=!tRmjE3K1e_@#c?M?Y+Y=AiGxAJg^k(GQ?89iwS`U=|e}K7x`2bL%ID;YsgQ}pS
zAfu7En5du#JDakilDe9ypozJev8t$|pfZ@nto2Wa@rsfZ5GeiAfzXU0{}@6fC6%<9
z!v3yeS_NeNT?LV03R9AlTmupf0}6n{59pTAc_r-e{5D@j7`RzL4rF-DD)0(MPhP`j
e&L}wf37f+tc9zL1>`EL=2f!KyH~X<4VgvxYNK<$K

delta 291
zcmZn>o*-1uz{tSBz|GLWz|3IaAFOZ0FT}<N6xjpB3CX#M1>#|sCNVHD$^iKx>50V!
zKw1FE2hkkqIhARgQ;w_v@+%k^SOqdt6H_#PfB4S8z}5kjH_HGDu+Lz=2;?6C@>Mc&
zODfEO3?TmrkZ{P!Pj*b?C}I1+z`(8o6i~`dtSDd*Vekj?J%D_Lyu{qpnO>Z~f&2`h
zC2a-y#U((80s#k54}$^&GxN=f2kaTSCoy_6a&Puwv}IKW`3DHjW^DQy&u{aUftv-)
wf6RQ%7Q_J2lV#Y=83iVXuscki!LB3(6a{G#VDN>Q&A>FdkW+Z`efFh{079}o#Q*>R

diff --git a/web/fonts/icomoon.woff b/web/fonts/icomoon.woff
index faadfa3966d941b1ad5fcd6e80c7c8853a8124a7..220ed8769b8b0b2bf17bcf5811deaa1c6670fcca 100644
GIT binary patch
delta 437
zcmca3bU|38+~3WOfsp|SI4>}8gXxyZj+_z`b%g5$lXDXb7#J8cfWjdlEFN}ga(ZGh
zNNf*~&jG~(={c2YK(QkX46F?xe6TFbJR>zRg@J+H1*pahgf;%91!e#Rfnqg4z6uDl
z&tSfkky}y$6k7n~gVefM0g0UaWS}}f_9s9#SRqFV=Z4(G3ZTUtAWId%Sd_s(FEKY2
zD5e3lybXkBdU5_P$S*Dd`ep-M9W#){%zS$?52HOJ&txA)Z$_TYGZ<}I>wyyg4=^_{
zA7Ef+5NA+iU{DoQ6l63K7ZVi}VP{iTR8m(n6*Mt7GgcK<6jTPYn6>`tFkVrT0s^If
zIuM#M<R3$bq@<EIQ`p~COsjybzpEfJOkqlrl50SsVL$-}MxaB0Aaq^{dpy6*R}lto
t7O=o$R)JR_28f>ggUy^#aIyir!{h*VmdOR|N*qiFz&Zst&tgBs2mq6AScCuo

delta 316
zcmca0d`C#6+~3WOfsp|SIAa*N!L-0c5$$@u<lMvp1_s6qpil@1i-%pBl%7}&659jh
zb3m~`dQN2;Q0xc;1FHZCb51$3A|o|1g@J+X3Q&z12y6WQ@I3=4$iTqP1LUiKF#8PV
ziy65k6+kfqAm0ImL5g$olY#2|*nt)?D1k6X3EPL<#0nsveF~7T0LCH={&|VHsX(zU
zK+D@ec%~QU?}Gf|5};3P;OdxxEN14LlX)2J8M!C>FnTj`Z=S(u%c>0aG6Tcej7>k|
u`E9;3aI*kaGB7-5zGe%fCugvmGYU*z!0s^l3A+-=!yrupoB22nF#-VT=033i