add markdown

src/Chat.svelte

@@ -2,6 +2,7 @@
   import iconTrash from "@ktibow/iconset-material-symbols/delete-rounded";
   import iconSend from "@ktibow/iconset-material-symbols/send-rounded";
   import Icon from "./Icon.svelte";
+  import Markdown from "./Markdown.svelte";
   import stream from "./stream";
 
   export let groqKey: string;
@@ -43,8 +44,11 @@
 </button>
 <div class="wrapper">
   {#each conversation.toReversed() as message}
-    <div class="message">{message.content}</div>
-    <p class="role">{message.role == "user" ? "You" : "Llama 70b"}</p>
+    {#if message.role == "assistant"}
+      <Markdown text={message.content} />
+    {:else}
+      <div class="user">{message.content}</div>
+    {/if}
   {/each}
 </div>
 <form
@@ -73,16 +77,23 @@
   .wrapper {
     display: flex;
     flex-direction: column-reverse;
-    overflow-y: scroll;
+    overflow: hidden scroll;
+
     height: 100%;
-    padding: 0.5rem 0;
-  }
-  .role {
-    opacity: 0.8;
-    margin-top: 0.5rem;
+    margin: 0 -1rem;
+    padding: 0.5rem 1rem;
+    gap: 0.5rem;
+
+    width: 100%;
+    max-width: 40rem;
+    align-self: center;
   }
-  .message {
+  .user {
     white-space: pre-wrap;
+    background-color: rgb(var(--m3-scheme-primary-container) / 0.2);
+    margin: -0.25rem;
+    padding: 0.25rem;
+    border-radius: 0.5rem;
   }
 
   form {

src/Markdown.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  export let text = "";
+
+  function escapeHtml(unsafe: string) {
+    return unsafe
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+
+  function renderMarkdown(text: string) {
+    if (!text) return "";
+
+    let html = escapeHtml(text);
+
+    // Headers (h1-h3 only for speed)
+    html = html.replace(/^### (.*?)$/gm, "<h3>$1</h3>");
+    html = html.replace(/^## (.*?)$/gm, "<h2>$1</h2>");
+    html = html.replace(/^# (.*?)$/gm, "<h1>$1</h1>");
+
+    // Bold
+    html = html.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
+    html = html.replace(/__(.*?)__/g, "<strong>$1</strong>");
+
+    // Italics
+    html = html.replace(/\*(.*?)\*/g, "<em>$1</em>");
+    html = html.replace(/_(.*?)_/g, "<em>$1</em>");
+
+    return html;
+  }
+
+  $: renderedHtml = renderMarkdown(text);
+</script>
+
+<div class="space">{@html renderedHtml}</div>
+
+<style>
+  .space {
+    white-space: pre-wrap;
+  }
+</style>