Merge branch 'feature/export-chat-to-markdown' into 'wip/h3132'

Added functionallity to export chat to markdown See merge request schihei/chatbot-ui!3
2023-08-12 21:18:52 +00:00
parent b14c052dcd 1f94effb43
commit e48fda0a2a
1 changed files with 36 additions and 1 deletions
@@ -1,4 +1,9 @@
-import { IconClearAll, IconSettings, IconPdf } from '@tabler/icons-react';
+import { 
+  IconClearAll, 
+  IconSettings, 
+  IconMarkdown,
+  IconPdf 
+} from '@tabler/icons-react';
 import {
  MutableRefObject,
  memo,
@@ -303,6 +308,30 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
    }
  };

+  const onMarkdown = () => {
+    if (!selectedConversation){
+      return '';
+    }
+    let markdownContent = '';
+
+    selectedConversation.messages.forEach(obj => {
+      markdownContent += `## ${obj.role === "user" ? t('You') : t("AI")}\n\n${obj.content}\n\n`;
+    });
+
+    const date = new Date().toLocaleString("default", { year: "numeric", month: "long", day: "numeric" })
+    const time = new Date().toLocaleTimeString("default", {hour12: true, hour: "numeric", minute: "numeric"})
+
+    markdownContent += `---\n`
+    markdownContent += `${t("Exported on")} ` + date + ` ${t("at")} ` + time + ".";
+
+    const markdownFile = new Blob([markdownContent], { type: 'text/markdown' });
+    const downloadLink = document.createElement('a');
+
+    downloadLink.href = URL.createObjectURL(markdownFile);
+    downloadLink.download = `${selectedConversation?.name || 'conversation'}.md`;
+    downloadLink.click();
+  }
+
  const onPdf = () => {
    if (chatContainerRef.current === null) {
      return;
@@ -485,6 +514,12 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
                  >
                    <IconClearAll size={18} />
                  </button>
+                  <button
+                      className="ml-2 cursor-pointer hover:opacity-50"
+                      onClick={onMarkdown}
+                  >
+                    <IconMarkdown size={18} />
+                  </button>
                  <button
                      className="ml-2 cursor-pointer hover:opacity-50"
                      onClick={onPdf}