mishig HF staff commited on
Commit
b37c7b7
1 Parent(s): e94cf4d

Implement copy code snippet to clipboard

Browse files
src/lib/components/Icons/IconCopyCode.svelte ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let classNames = '';
3
+ </script>
4
+
5
+ <svg
6
+ class={classNames}
7
+ xmlns="http://www.w3.org/2000/svg"
8
+ aria-hidden="true"
9
+ fill="currentColor"
10
+ focusable="false"
11
+ role="img"
12
+ width="0.9em"
13
+ height="0.9em"
14
+ preserveAspectRatio="xMidYMid meet"
15
+ viewBox="0 0 32 32"
16
+ ><path
17
+ d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
18
+ transform="translate(0)"
19
+ ></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect
20
+ fill="none"
21
+ width="32"
22
+ height="32"
23
+ ></rect></svg
24
+ >
src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte CHANGED
@@ -4,6 +4,8 @@
4
  import python from 'highlight.js/lib/languages/python';
5
  import bash from 'highlight.js/lib/languages/bash';
6
  import type { Conversation } from '$lib/types';
 
 
7
 
8
  hljs.registerLanguage('javascript', javascript);
9
  hljs.registerLanguage('python', python);
@@ -31,7 +33,8 @@
31
  bash: getBashSnippets(conversation)
32
  };
33
 
34
- let selectedLanguage: Language = 'bash';
 
35
 
36
  function getMessages() {
37
  const placeholder = [{ role: 'user', content: 'Tell me a story' }];
@@ -221,6 +224,12 @@ print(output.choices[0].message)`
221
 
222
  return snippets;
223
  }
 
 
 
 
 
 
224
  </script>
225
 
226
  <div class="px-2 pt-2">
@@ -246,10 +255,28 @@ print(output.choices[0].message)`
246
  <div class="px-4 pb-4 pt-6">
247
  <h2 class="font-semibold">{label}</h2>
248
  </div>
249
- <pre
250
- class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
251
- code,
252
- language ?? selectedLanguage
253
- )}</pre>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  {/each}
255
  </div>
 
4
  import python from 'highlight.js/lib/languages/python';
5
  import bash from 'highlight.js/lib/languages/bash';
6
  import type { Conversation } from '$lib/types';
7
+ import IconCopyCode from '../Icons/IconCopyCode.svelte';
8
+ import { onDestroy } from 'svelte';
9
 
10
  hljs.registerLanguage('javascript', javascript);
11
  hljs.registerLanguage('python', python);
 
33
  bash: getBashSnippets(conversation)
34
  };
35
 
36
+ let selectedLanguage: Language = 'javascript';
37
+ let timeout: ReturnType<typeof setTimeout>;
38
 
39
  function getMessages() {
40
  const placeholder = [{ role: 'user', content: 'Tell me a story' }];
 
224
 
225
  return snippets;
226
  }
227
+
228
+ onDestroy(() => {
229
+ if (timeout) {
230
+ clearTimeout(timeout);
231
+ }
232
+ });
233
  </script>
234
 
235
  <div class="px-2 pt-2">
 
255
  <div class="px-4 pb-4 pt-6">
256
  <h2 class="font-semibold">{label}</h2>
257
  </div>
258
+ <div class="group relative">
259
+ <pre
260
+ class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
261
+ code,
262
+ language ?? selectedLanguage
263
+ )}</pre>
264
+ <button
265
+ class="absolute right-3 top-3 opacity-0 transition group-hover:opacity-80"
266
+ on:click={(e) => {
267
+ const el = e.currentTarget;
268
+ el.classList.add('text-green-500');
269
+ navigator.clipboard.writeText(code);
270
+ if (timeout) {
271
+ clearTimeout(timeout);
272
+ }
273
+ timeout = setTimeout(() => {
274
+ el.classList.remove('text-green-500');
275
+ }, 1000);
276
+ }}
277
+ >
278
+ <IconCopyCode />
279
+ </button>
280
+ </div>
281
  {/each}
282
  </div>