From ff43253df6c762365bfa690bc2e4b63857132651 Mon Sep 17 00:00:00 2001
From: KTibow <KTibow@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:29:15 -0700
Subject: [PATCH] add markdown

---
 src/Chat.svelte     | 29 ++++++++++++++++++++---------
 src/Markdown.svelte | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 src/Markdown.svelte

diff --git a/src/Chat.svelte b/src/Chat.svelte
index d000e97..cef10eb 100644
--- a/src/Chat.svelte
+++ b/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 {
diff --git a/src/Markdown.svelte b/src/Markdown.svelte
new file mode 100644
index 0000000..1bfad5f
--- /dev/null
+++ b/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>