Ajout de tooltips aux boutons de copie

vite/package-lock.json

@@ -8,9 +8,8 @@
       "name": "openai",
       "version": "0.0.1",
       "dependencies": {
-        "alpinejs": "^3.14.1",
+        "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
-        "clipboard": "^2.0.11",
         "highlight.js": "^11.10.0"
       },
       "devDependencies": {
@@ -455,7 +454,6 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -714,19 +712,6 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
-    "node_modules/@vue/reactivity": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
-      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
-      "dependencies": {
-        "@vue/shared": "3.1.5"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
-      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
-    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -739,14 +724,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/alpinejs": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.14.1.tgz",
-      "integrity": "sha512-ICar8UsnRZAYvv/fCNfNeKMXNoXGUfwHrjx7LqXd08zIP95G2d9bAOuaL97re+1mgt/HojqHsfdOLo/A5LuWgQ==",
-      "dependencies": {
-        "@vue/reactivity": "~3.1.1"
-      }
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -850,16 +827,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/clipboard": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
-      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
-      "dependencies": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
     "node_modules/code-red": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -912,11 +879,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1023,14 +985,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
-      "dependencies": {
-        "delegate": "^3.1.2"
-      }
-    },
     "node_modules/highlight.js": {
       "version": "11.10.0",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
@@ -1321,11 +1275,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
-    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -1372,11 +1321,6 @@
         "svelte": "^3.19.0 || ^4.0.0"
       }
     },
-    "node_modules/tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

vite/package.json

@@ -15,9 +15,8 @@
     "vite-plugin-live-reload": "^3.0.3"
   },
   "dependencies": {
-    "alpinejs": "^3.14.1",
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
-    "clipboard": "^2.0.11",
     "highlight.js": "^11.10.0"
   }
 }

vite/src/ChatMessage.svelte

@@ -1,6 +1,7 @@
 <script>
     import { beforeUpdate, afterUpdate, createEventDispatcher} from 'svelte';
     import { copyToClipboard } from './lib/clipboard.js';
+    import {Tooltip} from 'bootstrap';
 
     export let message;
     export let container;
@@ -43,7 +44,17 @@
             // 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);
+            copyToClipboard(codeToCopy).then(() => {
+
+                let tooltip = new Tooltip(copyButton);
+                tooltip.setContent({ '.tooltip-inner': 'Code copié!' });
+                tooltip.show();
+
+                // Destroy tooltip after 2 seconds
+                setTimeout(() => {
+                    tooltip.dispose();
+                }, 2000);
+            });
 
             event.stopPropagation();
         }
@@ -75,10 +86,23 @@
 				break;
 		}
 	}
-    function handleCopy() {
+    function handleCopy(event) {
+
+        const btn = event.currentTarget;
+        event.stopPropagation();
+
         copyToClipboard(message.content)
-            .then(() => alert('Text copied successfully!'))
+            .then(() => {
-            .catch(err => alert(`Failed to copy text: ${err.message}`));
+                let tooltip = new Tooltip(btn);
+                tooltip.setContent({ '.tooltip-inner': 'Message copié!' });
+                tooltip.show();
+
+                // Destroy tooltip after 2 seconds
+                setTimeout(() => {
+                    tooltip.dispose();
+                }, 2000);
+            })
+            .catch(err => console.log(`Failed to copy clipboard: ${err.message}`));
     }
 </script>