From f143de4005eb7a76d0edf79205561d69e89585ce Mon Sep 17 00:00:00 2001
From: codewithcheese <mr.tmanning@gmail.com>
Date: Thu, 1 Aug 2024 19:32:13 +1000
Subject: [PATCH] Add markdown view toggle for all revise messages

---
 src/routes/(app)/chat/[id]/MessageCard.svelte  | 18 +++++++++++++++---
 .../(app)/chat/[id]/revise/RevisePage.svelte   |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/routes/(app)/chat/[id]/MessageCard.svelte b/src/routes/(app)/chat/[id]/MessageCard.svelte
index 0b7ee4a..1d58760 100644
--- a/src/routes/(app)/chat/[id]/MessageCard.svelte
+++ b/src/routes/(app)/chat/[id]/MessageCard.svelte
@@ -6,7 +6,7 @@
   import type { ChatMessage } from "$lib/chat-service.svelte";
   import MessageEditor from "./MessageEditor.svelte";
   import { Button } from "@/components/ui/button";
-  import { FilePlus2Icon, Trash2Icon } from "lucide-svelte";
+  import { EditIcon, EyeIcon, FilePlus2Icon, Trash2Icon } from "lucide-svelte";
   import AttachmentControls from "./AttachmentControls.svelte";
   import {
     DropdownMenu,
@@ -37,6 +37,7 @@
   }: Props = $props();
   let format = "markdown";
   let showAttachmentControls = $state(false);
+  let mode: "edit" | "view" = $state("edit");
 
   function handleKeyPress(event: KeyboardEvent) {
     if (event.ctrlKey && event.key === "Enter") {
@@ -98,7 +99,18 @@
       >
         <FilePlus2Icon class="h-4 w-4" />
       </Button>
-
+      <Button
+        class="h-fit w-fit p-1 text-gray-500 hover:text-black "
+        variant="ghost"
+        size="icon"
+        onclick={() => (mode = mode === "edit" ? "view" : "edit")}
+      >
+        {#if mode === "view"}
+          <EditIcon class="h-4 w-4" />
+        {:else}
+          <EyeIcon class="h-4 w-4" />
+        {/if}
+      </Button>
       <Button
         class="h-fit w-fit p-1 text-gray-500 hover:text-black"
         variant="ghost"
@@ -110,7 +122,7 @@
     </div>
   {/if}
   <CardContent class={cn("p-4", editable && "pt-0")}>
-    {#if editable}
+    {#if mode === "edit" && editable}
       <MessageEditor
         id={message.id}
         content={message.content}
diff --git a/src/routes/(app)/chat/[id]/revise/RevisePage.svelte b/src/routes/(app)/chat/[id]/revise/RevisePage.svelte
index e6d6d01..e1fa6c4 100644
--- a/src/routes/(app)/chat/[id]/revise/RevisePage.svelte
+++ b/src/routes/(app)/chat/[id]/revise/RevisePage.svelte
@@ -50,7 +50,7 @@
     version: revision ? revision.version : 1,
     initialMessages: revision.messages.map(toChatMessage),
     onLoading: () => {
-      responseMode = "edit";
+      responseMode = "view";
       autoScroller.onLoading();
     },
     onError: (e) => {