From 1ec44f047dcc07715b50b4e5bd0db60b0217452b Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Wed, 2 Oct 2024 13:55:38 +0530
Subject: [PATCH] feat(share): Add history title to share modal

Adds the title of the current chat history to the share modal. This makes it easier for users to share their conversations with others, as the title provides context for the conversation.

The title is fetched from the database and displayed in the share modal.
---
 src/components/Common/ShareBtn.tsx | 13 ++++++++-----
 src/components/Layouts/Header.tsx  |  5 ++++-
 src/db/index.ts                    | 13 +++++++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/Common/ShareBtn.tsx b/src/components/Common/ShareBtn.tsx
index ffce24c..e1146a0 100644
--- a/src/components/Common/ShareBtn.tsx
+++ b/src/components/Common/ShareBtn.tsx
@@ -7,12 +7,13 @@ import React from "react"
 import { useMutation } from "@tanstack/react-query"
 import { getPageShareUrl } from "~/services/ollama"
 import { cleanUrl } from "~/libs/clean-url"
-import { getUserId, saveWebshare } from "@/db"
+import { getTitleById, getUserId, saveWebshare } from "@/db"
 import { useTranslation } from "react-i18next"
 import fetcher from "@/libs/fetcher"
 
 type Props = {
   messages: Message[]
+  historyId: string
 }
 
 const reformatMessages = (messages: Message[], username: string) => {
@@ -76,7 +77,7 @@ export const PlaygroundMessage = (
   )
 }
 
-export const ShareBtn: React.FC<Props> = ({ messages }) => {
+export const ShareBtn: React.FC<Props> = ({ messages, historyId }) => {
   const { t } = useTranslation("common")
   const [open, setOpen] = useState(false)
   const [form] = Form.useForm()
@@ -84,11 +85,13 @@ export const ShareBtn: React.FC<Props> = ({ messages }) => {
 
   React.useEffect(() => {
     if (messages.length > 0) {
-      form.setFieldsValue({
-        title: messages[0].message
+      getTitleById(historyId).then((title) => {
+        form.setFieldsValue({
+          title
+        })
       })
     }
-  }, [messages])
+  }, [messages, historyId])
 
   const onSubmit = async (values: { title: string; name: string }) => {
     const owner_id = await getUserId()
diff --git a/src/components/Layouts/Header.tsx b/src/components/Layouts/Header.tsx
index 65fab8e..af39f1c 100644
--- a/src/components/Layouts/Header.tsx
+++ b/src/components/Layouts/Header.tsx
@@ -46,6 +46,7 @@ export const Header: React.FC<Props> = ({
     setSelectedSystemPrompt,
     messages,
     streaming,
+    historyId
   } = useMessageOption()
   const {
     data: models,
@@ -205,7 +206,9 @@ export const Header: React.FC<Props> = ({
             {pathname === "/" &&
               messages.length > 0 &&
               !streaming &&
-              shareModeEnabled && <ShareBtn messages={messages} />}
+              shareModeEnabled && <ShareBtn
+              historyId={historyId}
+              messages={messages} />}
             <Tooltip title={t("githubRepository")}>
               <a
                 href="https://github.com/n4ze3m/page-assist"
diff --git a/src/db/index.ts b/src/db/index.ts
index 6e27b3f..2a8a2e2 100644
--- a/src/db/index.ts
+++ b/src/db/index.ts
@@ -81,6 +81,12 @@ export class PageAssitDatabase {
     })
   }
 
+  async getChatHistoryTitleById(id: string): Promise<string> {
+    const chatHistories = await this.getChatHistories()
+    const chatHistory = chatHistories.find((history) => history.id === id)
+    return chatHistory?.title || ""
+  }
+
   async addChatHistory(history: HistoryInfo) {
     const chatHistories = await this.getChatHistories()
     const newChatHistories = [history, ...chatHistories]
@@ -482,4 +488,11 @@ export const getRecentChatFromCopilot = async () => {
   const messages = await db.getChatHistory(history.id)
 
   return { history, messages }
+}
+
+
+export const getTitleById = async (id: string) => {
+  const db = new PageAssitDatabase()
+  const title = await db.getChatHistoryTitleById(id)
+  return title
 }
\ No newline at end of file