feat: Add more options for chat messages to copy, download chat entirely

2024-12-14 18:30:27 +05:30
parent ccca2eafd3
commit 43b4f076e9
20 changed files with 509 additions and 111 deletions
--- a/src/components/Common/ShareModal.tsx
+++ b/src/components/Common/ShareModal.tsx
@@ -14,6 +14,8 @@ import fetcher from "@/libs/fetcher"
 type Props = {
  messages: Message[]
  historyId: string
+  open: boolean
+  setOpen: (state: boolean) => void
 }

 const reformatMessages = (messages: Message[], username: string) => {
@@ -77,9 +79,13 @@ export const PlaygroundMessage = (
  )
 }

-export const ShareBtn: React.FC<Props> = ({ messages, historyId }) => {
+export const ShareModal: React.FC<Props> = ({
+  messages,
+  historyId,
+  open,
+  setOpen
+}) => {
  const { t } = useTranslation("common")
-  const [open, setOpen] = useState(false)
  const [form] = Form.useForm()
  const name = Form.useWatch("name", form)

@@ -142,75 +148,55 @@ export const ShareBtn: React.FC<Props> = ({ messages, historyId }) => {
  })

  return (
-    <>
-      <Tooltip title={t("share.tooltip.share")}>
-        <button
-          onClick={() => setOpen(true)}
-          className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
-          <Share className="w-6 h-6" />
-        </button>
-      </Tooltip>
+    <Modal
+      title={t("share.modal.title")}
+      open={open}
+      footer={null}
+      width={600}
+      onCancel={() => setOpen(false)}>
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={createShareLink}
+        initialValues={{
+          title: t("share.form.defaultValue.title"),
+          name: t("share.form.defaultValue.name")
+        }}>
+        <Form.Item
+          name="title"
+          label={t("share.form.title.label")}
+          rules={[{ required: true, message: t("share.form.title.required") }]}>
+          <Input size="large" placeholder={t("share.form.title.placeholder")} />
+        </Form.Item>
+        <Form.Item
+          name="name"
+          label={t("share.form.name.label")}
+          rules={[{ required: true, message: t("share.form.name.required") }]}>
+          <Input size="large" placeholder={t("share.form.name.placeholder")} />
+        </Form.Item>

-      <Modal
-        title={t("share.modal.title")}
-        open={open}
-        footer={null}
-        width={600}
-        onCancel={() => setOpen(false)}>
-        <Form
-          form={form}
-          layout="vertical"
-          onFinish={createShareLink}
-          initialValues={{
-            title: t("share.form.defaultValue.title"),
-            name: t("share.form.defaultValue.name")
-          }}>
-          <Form.Item
-            name="title"
-            label={t("share.form.title.label")}
-            rules={[
-              { required: true, message: t("share.form.title.required") }
-            ]}>
-            <Input
-              size="large"
-              placeholder={t("share.form.title.placeholder")}
-            />
-          </Form.Item>
-          <Form.Item
-            name="name"
-            label={t("share.form.name.label")}
-            rules={[
-              { required: true, message: t("share.form.name.required") }
-            ]}>
-            <Input
-              size="large"
-              placeholder={t("share.form.name.placeholder")}
-            />
-          </Form.Item>
-
-          <Form.Item>
-            <div className="max-h-[180px] overflow-x-auto border dark:border-gray-700 rounded-md p-2">
-              <div className="flex flex-col p-3">
-                {messages.map((message, index) => (
-                  <PlaygroundMessage key={index} {...message} username={name} />
-                ))}
-              </div>
+        <Form.Item>
+          <div className="max-h-[180px] overflow-x-auto border dark:border-gray-700 rounded-md p-2">
+            <div className="flex flex-col p-3">
+              {messages.map((message, index) => (
+                <PlaygroundMessage key={index} {...message} username={name} />
+              ))}
            </div>
-          </Form.Item>
+          </div>
+        </Form.Item>

-          <Form.Item>
-            <div className="flex justify-end">
-              <button
-                type="submit"
-                className="inline-flex items-center rounded-md border border-transparent bg-black px-2 py-2.5 text-md font-medium leading-4 text-white shadow-sm dark:bg-white dark:text-gray-800 disabled:opacity-50 ">
-                {isPending
-                  ? t("share.form.btn.saving")
-                  : t("share.form.btn.save")}
-              </button>
-            </div>
-          </Form.Item>
-        </Form>
-      </Modal>
-    </>
+        <Form.Item>
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              className="inline-flex items-center rounded-md border border-transparent bg-black px-2 py-2.5 text-md font-medium leading-4 text-white shadow-sm dark:bg-white dark:text-gray-800 disabled:opacity-50 ">
+              {isPending
+                ? t("share.form.btn.saving")
+                : t("share.form.btn.save")}
+            </button>
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
  )
 }
--- a/src/components/Layouts/Header.tsx
+++ b/src/components/Layouts/Header.tsx
@@ -19,10 +19,10 @@ import { fetchChatModels } from "~/services/ollama"
 import { useMessageOption } from "~/hooks/useMessageOption"
 import { Select, Tooltip } from "antd"
 import { getAllPrompts } from "@/db"
-import { ShareBtn } from "~/components/Common/ShareBtn"
 import { ProviderIcons } from "../Common/ProviderIcon"
 import { NewChat } from "./NewChat"
 import { PageAssistSelect } from "../Select"
+import { MoreOptions } from "./MoreOptions"
 type Props = {
  setSidebarOpen: (open: boolean) => void
  setOpenModelSettings: (open: boolean) => void
@@ -50,7 +50,11 @@ export const Header: React.FC<Props> = ({
    historyId,
    temporaryChat
  } = useMessageOption()
-  const { data: models, isLoading: isModelsLoading, refetch } = useQuery({
+  const {
+    data: models,
+    isLoading: isModelsLoading,
+    refetch
+  } = useQuery({
    queryKey: ["fetchModel"],
    queryFn: () => fetchChatModels({ returnEmpty: true }),
    refetchIntervalInBackground: false,
@@ -134,7 +138,6 @@ export const Header: React.FC<Props> = ({
              ),
              value: model.model
            }))}
-
            onRefresh={() => {
              refetch()
            }}
@@ -189,6 +192,19 @@ export const Header: React.FC<Props> = ({
      <div className="flex flex-1 justify-end px-4">
        <div className="ml-4 flex items-center md:ml-6">
          <div className="flex gap-4 items-center">
+            {/* {pathname === "/" &&
+              messages.length > 0 &&
+              !streaming &&
+              shareModeEnabled && (
+                <ShareBtn historyId={historyId} messages={messages} />
+              )} */}
+            {messages.length > 0 && !streaming && (
+              <MoreOptions
+                shareModeEnabled={shareModeEnabled}
+                historyId={historyId}
+                messages={messages}
+              />
+            )}
            {!hideCurrentChatModelSettings && (
              <Tooltip title={t("common:currentChatModelSettings")}>
                <button
@@ -198,12 +214,6 @@ export const Header: React.FC<Props> = ({
                </button>
              </Tooltip>
            )}
-            {pathname === "/" &&
-              messages.length > 0 &&
-              !streaming &&
-              shareModeEnabled && (
-                <ShareBtn historyId={historyId} messages={messages} />
-              )}
            <Tooltip title={t("githubRepository")}>
              <a
                href="https://github.com/n4ze3m/page-assist"
--- a/src/components/Layouts/MoreOptions.tsx
+++ b/src/components/Layouts/MoreOptions.tsx
@@ -0,0 +1,163 @@
+import {
+  MoreHorizontal,
+  FileText,
+  Share2,
+  FileJson,
+  FileCode
+} from "lucide-react"
+import { Dropdown, MenuProps, message } from "antd"
+import { Message } from "@/types/message"
+import { useState } from "react"
+import { ShareModal } from "../Common/ShareModal"
+import { useTranslation } from "react-i18next"
+
+interface MoreOptionsProps {
+  messages: Message[]
+  historyId: string
+  shareModeEnabled: boolean
+}
+const formatAsText = (messages: Message[]) => {
+  return messages
+    .map((msg) => {
+      const text = `${msg.isBot ? msg.name : "You"}: ${msg.message}`
+      return text
+    })
+    .join("\n\n")
+}
+
+const formatAsMarkdown = (messages: Message[]) => {
+  return messages
+    .map((msg) => {
+      let content = `**${msg.isBot ? msg.name : "You"}**:\n${msg.message}`
+
+      if (msg.images && msg.images.length > 0) {
+        const imageMarkdown = msg.images
+          .filter((img) => img.length > 0)
+          .map((img) => `\n\n![Image](${img})`)
+          .join("\n")
+        content += imageMarkdown
+      }
+
+      return content
+    })
+    .join("\n\n")
+}
+
+const downloadFile = (content: string, filename: string) => {
+  const blob = new Blob([content], { type: "text/plain;charset=utf-8" })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+export const MoreOptions = ({
+  shareModeEnabled = false,
+  historyId,
+  messages
+}: MoreOptionsProps) => {
+  const { t } = useTranslation("option")
+  const [onShareOpen, setOnShareOpen] = useState(false)
+  const baseItems: MenuProps["items"] = [
+    {
+      type: "group",
+      label: t("more.copy.group"), 
+      children: [
+        {
+          key: "copy-text",
+          label: t("more.copy.asText"),
+          icon: <FileText className="w-4 h-4" />,
+          onClick: () => {
+            navigator.clipboard.writeText(formatAsText(messages))
+            message.success(t("more.copy.success")) 
+          }
+        },
+        {
+          key: "copy-markdown", 
+          label: t("more.copy.asMarkdown"), 
+          icon: <FileCode className="w-4 h-4" />,
+          onClick: () => {
+            navigator.clipboard.writeText(formatAsMarkdown(messages))
+            message.success(t("more.copy.success"))
+          }
+        }
+      ]
+    },
+    {
+      type: "divider"
+    },
+    {
+      type: "group",
+      label: t("more.download.group"), 
+      children: [
+        {
+          key: "download-txt",
+          label: t("more.download.text"),
+          icon: <FileText className="w-4 h-4" />,
+          onClick: () => {
+            downloadFile(formatAsText(messages), "chat.txt")
+          }
+        },
+        {
+          key: "download-md",
+          label: t("more.download.markdown"),
+          icon: <FileCode className="w-4 h-4" />,
+          onClick: () => {
+            downloadFile(formatAsMarkdown(messages), "chat.md")
+          }
+        },
+        {
+          key: "download-json",
+          label: t("more.download.json"),
+          icon: <FileJson className="w-4 h-4" />,
+          onClick: () => {
+            const jsonContent = JSON.stringify(messages, null, 2)
+            downloadFile(jsonContent, "chat.json")
+          }
+        }
+      ]
+    }
+  ]
+
+  const shareItem = {
+    type: "divider"
+  } as const
+
+  const shareOption = {
+    key: "share",
+    label: t("more.share"),
+    icon: <Share2 className="w-4 h-4" />,
+    onClick: () => {
+      setOnShareOpen(true)
+    }
+  }
+
+  const items = shareModeEnabled
+    ? [...baseItems, shareItem, shareOption]
+    : baseItems
+
+  return (
+    <>
+      <Dropdown
+        menu={{
+          items
+        }}
+        trigger={["click"]}
+        placement="bottomRight">
+        <button className="!text-gray-500 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+          <MoreHorizontal className="w-6 h-6" />
+        </button>
+      </Dropdown>
+      <ShareModal
+        open={onShareOpen}
+        historyId={historyId}
+        messages={messages}
+        setOpen={setOnShareOpen}
+      />
+    </>
+  )
+}