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

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"

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}
+      />
+    </>
+  )
+}