556 code blocks (#745)

* add formatting for code blocks.

src/leapfrogai_ui/package.json

@@ -34,6 +34,7 @@
     "@sveltejs/kit": "^2.5.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^5.1.0",
+    "@types/dompurify": "^3.0.5",
     "@types/eslint": "^8.56.0",
     "@types/lodash": "^4.17.4",
     "@types/uuid": "^9.0.8",
@@ -77,7 +78,11 @@
     "ai": "^3.1.11",
     "carbon-pictograms-svelte": "^12.10.0",
     "concurrently": "^8.2.2",
+    "dompurify": "^3.1.6",
     "fuse.js": "^7.0.0",
+    "highlight.js": "^11.10.0",
+    "lit": "^3.1.4",
+    "markdown-it": "^14.1.0",
     "msw": "^2.2.14",
     "openai": "^4.47.1",
     "playwright": "^1.42.1",

src/leapfrogai_ui/src/lib/components/CopyToClipboardBtn.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Copy } from 'carbon-icons-svelte';
+  import { Button } from 'carbon-components-svelte';
+  import { toastStore } from '$stores';
+
+  export let value: string;
+  export let toastTitle = 'Copied';
+  export let btnText = 'Copy';
+  export let size: 'small' | 'default' | 'field' | 'lg' | 'xl' | undefined = 'small';
+  export let testId: string;
+
+  const handleClick = async () => {
+    if (value) {
+      await navigator.clipboard.writeText(value);
+      toastStore.addToast({
+        kind: 'info',
+        title: toastTitle,
+        subtitle: ''
+      });
+    }
+  };
+</script>
+
+<Button data-testid={testId} kind="tertiary" icon={Copy} {size} on:click={handleClick}
+  >{btnText}</Button
+>

src/leapfrogai_ui/src/lib/components/Message.svelte

@@ -3,6 +3,8 @@
   import { Button, Tile } from 'carbon-components-svelte';
   import { Copy, Edit, Reset, UserAvatar } from 'carbon-icons-svelte';
   import { type Message as VercelAIMessage } from 'ai/svelte';
+  import markdownit from 'markdown-it';
+  import hljs from 'highlight.js';
   import { LFTextArea } from '$components';
   import frog from '$assets/frog.png';
   import { writable } from 'svelte/store';
@@ -17,6 +19,7 @@
   } from '$helpers/chatHelpers';
   import DynamicPictogram from '$components/DynamicPictogram.svelte';
   import type { AppendFunction, ReloadFunction, VercelOrOpenAIMessage } from '$lib/types/messages';
+  import DOMPurify from 'dompurify';
 
   export let allStreamedMessages: VercelOrOpenAIMessage[];
   export let message: VercelOrOpenAIMessage;
@@ -26,6 +29,24 @@
   export let append: AppendFunction;
   export let reload: ReloadFunction;
 
+  // used for code formatting and handling
+  const md = markdownit({
+    highlight: function (str: string, language: string) {
+      let code: string;
+      if (language && hljs.getLanguage(language)) {
+        try {
+          code = md.utils.escapeHtml(hljs.highlight(str, { language }).value);
+        } catch (__) {
+          code = md.utils.escapeHtml(str);
+        }
+      } else {
+        code = md.utils.escapeHtml(str);
+      }
+
+      return `<pre><code><code-block code="${code}" language="${language}"></code></pre>`;
+    }
+  });
+
   let assistantImage = isRunAssistantResponse(message)
     ? getAssistantImage(...[$page.data.assistants || []], message.assistant_id)
     : null;
@@ -126,7 +147,8 @@
             <div style="font-weight: bold">
               {message.role === 'user' ? 'You' : getAssistantName(message.assistant_id)}
             </div>
-            <div>{getMessageText(message)}</div>
+            <!--eslint-disable-next-line svelte/no-at-html-tags -- We use DomPurity to sanitize the code snippet-->
+            <div>{@html md.render(DOMPurify.sanitize(getMessageText(message)))}</div>
           </div></Tile
         >
       {/if}
@@ -203,14 +225,14 @@
     flex-direction: column;
     width: 100%;
     gap: layout.$spacing-02;
+    overflow: hidden;
   }
 
   .hide {
     opacity: 0;
     transition: opacity 0.2s;
   }
   .message {
-    display: flex;
     white-space: pre-line;
   }
 

src/leapfrogai_ui/src/lib/components/modals/CopyApiKeyModal.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
   import { formatKeyLong } from '$helpers/apiKeyHelpers.js';
-  import { Copy } from 'carbon-icons-svelte';
   import { calculateDays, formatDate } from '$helpers/dates.js';
-  import { Button, Modal, TextInput } from 'carbon-components-svelte';
+  import { Modal, TextInput } from 'carbon-components-svelte';
   import type { APIKeyRow } from '$lib/types/apiKeys';
+  import CopyToClipboardBtn from '$components/CopyToClipboardBtn.svelte';
 
   export let copyKeyModalOpen: boolean;
   export let handleCloseCopyKeyModal: () => void;
-  export let handleCopyKey: () => void;
   export let createdKey: APIKeyRow | null;
 
   let saveKeyModalRef: HTMLDivElement;
@@ -35,7 +34,7 @@
           labelText="Key"
           value={formatKeyLong(createdKey.api_key, saveKeyModalRef?.offsetWidth || 200)}
         />
-        <Button kind="tertiary" icon={Copy} size="small" on:click={handleCopyKey}>Copy</Button>
+        <CopyToClipboardBtn value={createdKey.api_key} toastTitle="API Key Copied" />
       </div>
       <div style="width: 100%">
         <label for="saved-expiration" class:bx--label={true}>Expiration</label>

src/leapfrogai_ui/src/lib/types/markdown-it.d.ts

@@ -0,0 +1 @@
+declare module 'markdown-it';