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

@@ -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({
+      getTitleById(historyId).then((title) => {
-        title: messages[0].message
+        form.setFieldsValue({
+          title
+        })
       })
     }
-  }, [messages])
+  }, [messages, historyId])
 
   const onSubmit = async (values: { title: string; name: string }) => {
     const owner_id = await getUserId()

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"

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
 }