From aa304617c2801e696c1d5fe6c4d3cf8e6fcbc862 Mon Sep 17 00:00:00 2001
From: Ian Sinnott <3154865+iansinnott@users.noreply.github.com>
Date: Mon, 29 Jan 2024 19:38:00 +0800
Subject: [PATCH] fix escaping issue. fixes #27

---
 src/lib/components/ChatMessageItem.svelte   | 9 ++++++++-
 src/lib/components/MarkdownHtmlBlock.svelte | 8 ++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/MarkdownHtmlBlock.svelte

diff --git a/src/lib/components/ChatMessageItem.svelte b/src/lib/components/ChatMessageItem.svelte
index 2e516a3..4b8d56f 100644
--- a/src/lib/components/ChatMessageItem.svelte
+++ b/src/lib/components/ChatMessageItem.svelte
@@ -6,6 +6,7 @@
   import IconBrain from "./IconBrain.svelte";
   import IconVerticalDots from "./IconVerticalDots.svelte";
   import CodeBlock from "./CodeBlock.svelte";
+  import MarkdownHtmlBlock from "./MarkdownHtmlBlock.svelte";
   import "./markdown.css";
   import { currentlyEditingMessage, inProgressMessageId } from "$lib/stores/stores";
   import { onMount } from "svelte";
@@ -103,7 +104,13 @@
       <!-- User input is not considered markdown, but whitespace should be respected -->
       <p class="whitespace-pre-wrap">{item.content}</p>
     {:else}
-      <SvelteMarkdown source={item.content || NBSP} renderers={{ code: CodeBlock }} />
+      <SvelteMarkdown
+        source={item.content || NBSP}
+        renderers={{
+          code: CodeBlock,
+          html: MarkdownHtmlBlock,
+        }}
+      />
     {/if}
 
     <!-- All this markup to accomplish a smooth animation -->
diff --git a/src/lib/components/MarkdownHtmlBlock.svelte b/src/lib/components/MarkdownHtmlBlock.svelte
new file mode 100644
index 0000000..448ef59
--- /dev/null
+++ b/src/lib/components/MarkdownHtmlBlock.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import classNames from "classnames";
+  let _class: string = "";
+  export { _class as class };
+  export let text: string;
+</script>
+
+<span class={classNames("MarkdownHtmlBlock", _class)}>{text}</span>