add a new function: export messages as markdown'

src/lib/Export.svelte

@@ -0,0 +1,28 @@
+<script context="module" lang="ts">
+  import { get } from "svelte/store";
+  import { chatsStorage } from "./Storage.svelte";
+
+  export const exportAsMarkdown = (chatId: number) => {
+    const chats = get(chatsStorage);
+    const chat = chats.find((chat) => chat.id === chatId);
+    const messages = chat.messages;
+    console.log(chat);
+    let markdownContent = `# ${chat.name}\n`;
+
+    messages.forEach((message) => {
+      const author = message.role;
+      const content = message.content;
+      const messageMarkdown = `## ${author}\n${content}\n\n`;
+
+      markdownContent += messageMarkdown;
+    });
+    const blob = new Blob([markdownContent], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.download = `${chat.name}.md`;
+    a.href = url;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+</script>

src/lib/Sidebar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { addChat, clearChats } from "./Storage.svelte";
+  import { exportAsMarkdown } from "./Export.svelte";
   import type { Chat } from "./Types.svelte";
 
   export let activeChatId: number;
@@ -64,5 +65,17 @@
         }}><span class="greyscale mr-2">🗑️</span> Clear chats</a
       >
     </li>
+    {#if activeChatId }
+    <li>
+      <a
+        href={"#"}
+        class="panel-block"
+        class:is-disabled={!apiKey}
+        on:click|preventDefault={() => {
+          exportAsMarkdown(activeChatId);
+        }}><span class="greyscale mr-2">📥</span> Export chat</a
+      >
+    </li>
+    {/if}
   </ul>
 </aside>