From 8e02dae8d368c0eb0c80d921f42b7a54479dafc3 Mon Sep 17 00:00:00 2001
From: Zhang Minghan <zmh13054618081@dingtalk.com>
Date: Wed, 18 Oct 2023 20:25:12 +0800
Subject: [PATCH] update sharing

---
 app/src/assets/home.less                      |  26 ++-
 app/src/assets/ui.less                        |   7 +-
 app/src/components/EditorProvider.tsx         |  14 +-
 app/src/components/ProjectLink.tsx            |   4 +-
 app/src/components/ReloadService.tsx          |  49 +++---
 .../components/home/ConversationSegment.tsx   |  89 ++++++++++
 app/src/conf.ts                               |   4 +-
 app/src/conversation/history.ts               |  17 ++
 app/src/i18n.ts                               |  70 ++++++--
 app/src/routes/Home.tsx                       | 152 +++++++++++++-----
 app/src/routes/Package.tsx                    |   4 +-
 app/src/types/service.d.ts                    |  18 +--
 connection/database.go                        |   3 +-
 manager/conversation/api.go                   |  17 +-
 manager/conversation/router.go                |   1 +
 manager/conversation/shared.go                |  14 +-
 16 files changed, 366 insertions(+), 123 deletions(-)
 create mode 100644 app/src/components/home/ConversationSegment.tsx

diff --git a/app/src/assets/home.less b/app/src/assets/home.less
index c0f69b0..78a071e 100644
--- a/app/src/assets/home.less
+++ b/app/src/assets/home.less
@@ -92,10 +92,13 @@
       transition: 0.2s ease-in-out;
       background: var(--conversation-card);
 
-      .delete {
+      .more {
         color: hsl(var(--text-secondary));
         display: none;
         transition: 0.2s;
+        opacity: 0;
+        border: 1px solid var(--border);
+        outline: 0;
 
         &:hover {
           color: hsl(var(--text));
@@ -109,8 +112,9 @@
           display: none;
         }
 
-        .delete {
+        .more {
           display: block;
+          opacity: 1;
         }
       }
 
@@ -332,3 +336,21 @@
     }
   }
 }
+
+.share-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  width: 100%;
+
+  input {
+    text-align: center;
+    font-size: 16px;
+    cursor: pointer;
+    flex-grow: 1;
+  }
+
+  button {
+    flex-shrink: 0;
+  }
+}
diff --git a/app/src/assets/ui.less b/app/src/assets/ui.less
index 189c26a..70912c5 100644
--- a/app/src/assets/ui.less
+++ b/app/src/assets/ui.less
@@ -17,12 +17,14 @@
   }
 
   .select-group-item {
-    padding: 0.35rem 0.5rem;
+    padding: 0.35rem 0.8rem;
+    border: 1px solid hsl(var(--border));
     border-radius: 4px;
     transition: .2s;
     cursor: pointer;
     font-size: 16px;
-    background: hsl(var(--accent-secondary));
+    background: hsl(var(--background));
+    color: hsl(var(--text));
 
     &:hover {
       background: hsl(var(--accent));
@@ -30,6 +32,7 @@
 
     &.active {
       background: hsl(var(--text));
+      border-color: hsl(var(--border-hover));
       color: hsl(var(--background));
     }
   }
diff --git a/app/src/components/EditorProvider.tsx b/app/src/components/EditorProvider.tsx
index 3438a9c..ddc88f4 100644
--- a/app/src/components/EditorProvider.tsx
+++ b/app/src/components/EditorProvider.tsx
@@ -13,7 +13,7 @@ import { Textarea } from "./ui/textarea.tsx";
 import Markdown from "./Markdown.tsx";
 import { useEffect, useRef, useState } from "react";
 import { Toggle } from "./ui/toggle.tsx";
-import {mobile} from "../utils.ts";
+import { mobile } from "../utils.ts";
 
 type RichEditorProps = {
   value: string;
@@ -103,9 +103,9 @@ function RichEditor({
       </div>
       <div className={`editor-wrapper`}>
         <div
-          className={`editor-object ${
-            openInput ? "show-editor" : ""
-          } ${openPreview ? "show-preview" : ""}`}
+          className={`editor-object ${openInput ? "show-editor" : ""} ${
+            openPreview ? "show-preview" : ""
+          }`}
         >
           {openInput && (
             <Textarea
@@ -124,7 +124,7 @@ function RichEditor({
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 function EditorProvider(props: RichEditorProps) {
@@ -134,9 +134,7 @@ function EditorProvider(props: RichEditorProps) {
     <>
       <Dialog>
         <DialogTrigger asChild>
-          <div
-            className={`editor-action active ${props.className}`}
-          >
+          <div className={`editor-action active ${props.className}`}>
             <Edit className={`h-3.5 w-3.5`} />
           </div>
         </DialogTrigger>
diff --git a/app/src/components/ProjectLink.tsx b/app/src/components/ProjectLink.tsx
index d59df6c..e33908d 100644
--- a/app/src/components/ProjectLink.tsx
+++ b/app/src/components/ProjectLink.tsx
@@ -5,7 +5,9 @@ function ProjectLink() {
     <Button
       variant="outline"
       size="icon"
-      onClick={() => window.open("https://github.com/Deeptrain-Community/chatnio")}
+      onClick={() =>
+        window.open("https://github.com/Deeptrain-Community/chatnio")
+      }
     >
       <svg
         viewBox="0 0 438.549 438.549"
diff --git a/app/src/components/ReloadService.tsx b/app/src/components/ReloadService.tsx
index 29cf8b7..e50b536 100644
--- a/app/src/components/ReloadService.tsx
+++ b/app/src/components/ReloadService.tsx
@@ -1,9 +1,9 @@
-import { useRegisterSW } from 'virtual:pwa-register/react'
-import {version} from "../conf.ts";
-import {useTranslation} from "react-i18next";
-import {useToast} from "./ui/use-toast.ts";
-import {useEffect} from "react";
-import {ToastAction} from "./ui/toast.tsx";
+import { useRegisterSW } from "virtual:pwa-register/react";
+import { version } from "../conf.ts";
+import { useTranslation } from "react-i18next";
+import { useToast } from "./ui/use-toast.ts";
+import { useEffect } from "react";
+import { ToastAction } from "./ui/toast.tsx";
 
 function ReloadPrompt() {
   const { t } = useTranslation();
@@ -18,36 +18,42 @@ function ReloadPrompt() {
       console.debug(`[service] service worker registered (version ${version})`);
     },
     onRegisterError(error) {
-      console.log(`[service] service worker registration failed: ${error.message}`);
+      console.log(
+        `[service] service worker registration failed: ${error.message}`,
+      );
     },
   });
 
-  const before = localStorage.getItem('version') || '';
+  const before = localStorage.getItem("version") || "";
   if (before.length > 0 && before !== version) {
     toast({
-      title: t('service.update-success'),
-      description: t('service.update-success-prompt'),
-    })
-    console.debug(`[service] service worker updated (from ${before} to ${version})`);
+      title: t("service.update-success"),
+      description: t("service.update-success-prompt"),
+    });
+    console.debug(
+      `[service] service worker updated (from ${before} to ${version})`,
+    );
   }
-  localStorage.setItem('version', version);
-
+  localStorage.setItem("version", version);
 
   useEffect(() => {
     if (offlineReady) {
       toast({
-        title: t('service.offline-title'),
-        description: t('service.offline'),
-      })
+        title: t("service.offline-title"),
+        description: t("service.offline"),
+      });
     }
 
     if (needRefresh) {
       toast({
-        title: t('service.title'),
-        description: t('service.description'),
+        title: t("service.title"),
+        description: t("service.description"),
         action: (
-          <ToastAction altText={t('service.update')} onClick={() => updateServiceWorker(true)}>
-            {t('service.update')}
+          <ToastAction
+            altText={t("service.update")}
+            onClick={() => updateServiceWorker(true)}
+          >
+            {t("service.update")}
           </ToastAction>
         ),
       });
@@ -61,4 +67,3 @@ function ReloadPrompt() {
 }
 
 export default ReloadPrompt;
-
diff --git a/app/src/components/home/ConversationSegment.tsx b/app/src/components/home/ConversationSegment.tsx
new file mode 100644
index 0000000..9ee053d
--- /dev/null
+++ b/app/src/components/home/ConversationSegment.tsx
@@ -0,0 +1,89 @@
+import { toggleConversation } from "../../conversation/history.ts";
+import { filterMessage, mobile } from "../../utils.ts";
+import { setMenu } from "../../store/menu.ts";
+import {MessageSquare, MoreHorizontal, Share2, Trash2} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu.tsx";
+import { useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { ConversationInstance } from "../../conversation/types.ts";
+import { useState } from "react";
+
+type ConversationSegmentProps = {
+  conversation: ConversationInstance;
+  current: number;
+  operate: (conversation: { target: ConversationInstance, type: string }) => void;
+};
+function ConversationSegment({
+  conversation,
+  current,
+  operate,
+}: ConversationSegmentProps) {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [offset, setOffset] = useState(0);
+
+  return (
+    <div
+      className={`conversation ${current === conversation.id ? "active" : ""}`}
+      onClick={async (e) => {
+        const target = e.target as HTMLElement;
+        if (
+          target.classList.contains("delete") ||
+          target.parentElement?.classList.contains("delete")
+        )
+          return;
+        await toggleConversation(dispatch, conversation.id);
+        if (mobile) dispatch(setMenu(false));
+      }}
+    >
+      <MessageSquare className={`h-4 w-4 mr-1`} />
+      <div className={`title`}>{filterMessage(conversation.name)}</div>
+      <div className={`id`}>{conversation.id}</div>
+      <DropdownMenu open={open} onOpenChange={(state: boolean) => {
+        setOpen(state);
+        if (state) setOffset(new Date().getTime());
+      }}>
+        <DropdownMenuTrigger>
+          <MoreHorizontal className={`more h-5 w-5 p-0.5`} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem
+            onClick={(e) => {
+              // prevent click event from opening the dropdown menu
+              if (offset + 500 > new Date().getTime()) return;
+
+              e.preventDefault();
+              e.stopPropagation();
+              operate({ target: conversation, type: "delete" });
+
+              setOpen(false);
+            }}
+          >
+            <Trash2 className={`more h-4 w-4 mx-1`} />
+            {t("conversation.delete-conversation")}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              operate({ target: conversation, type: "share" });
+
+              setOpen(false);
+            }}
+          >
+            <Share2 className={`more h-4 w-4 mx-1`} />
+            {t("share.share-conversation")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export default ConversationSegment;
diff --git a/app/src/conf.ts b/app/src/conf.ts
index e70b4ba..b501186 100644
--- a/app/src/conf.ts
+++ b/app/src/conf.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 
-export const version = "3.4.0";
-export const deploy: boolean = true;
+export const version = "3.4.1";
+export const deploy: boolean = false;
 export let rest_api: string = "http://localhost:8094";
 export let ws_api: string = "ws://localhost:8094";
 
diff --git a/app/src/conversation/history.ts b/app/src/conversation/history.ts
index 8aaeaf5..be23c77 100644
--- a/app/src/conversation/history.ts
+++ b/app/src/conversation/history.ts
@@ -4,6 +4,12 @@ import { setHistory } from "../store/chat.ts";
 import { manager } from "./manager.ts";
 import { AppDispatch } from "../store";
 
+type SharingForm = {
+  status: boolean;
+  message: string;
+  data: string;
+}
+
 export async function updateConversationList(
   dispatch: AppDispatch,
 ): Promise<void> {
@@ -36,6 +42,17 @@ export async function deleteConversation(
   return true;
 }
 
+export async function shareConversation(
+  id: number, refs: number[] = [-1],
+): Promise<SharingForm> {
+  try {
+    const resp = await axios.post("/conversation/share", { id, refs });
+    return resp.data;
+  } catch (e) {
+    return { status: false, message: (e as Error).message, data: "" };
+  }
+}
+
 export async function toggleConversation(
   dispatch: AppDispatch,
   id: number,
diff --git a/app/src/i18n.ts b/app/src/i18n.ts
index f574578..8520ed8 100644
--- a/app/src/i18n.ts
+++ b/app/src/i18n.ts
@@ -40,6 +40,7 @@ const resources = {
           "This action cannot be undone. This will permanently delete the conversation ",
         cancel: "Cancel",
         delete: "Delete",
+        "delete-conversation": "Delete Conversation",
         "delete-success": "Conversation deleted",
         "delete-success-prompt": "Conversation has been deleted.",
         "delete-failed": "Delete failed",
@@ -164,13 +165,24 @@ const resources = {
         "learn-more": "Learn more",
       },
       service: {
-        "title": "New Version Available",
-        "description": "A new version is available. Do you want to update now?",
-        "update": "Update",
+        title: "New Version Available",
+        description: "A new version is available. Do you want to update now?",
+        update: "Update",
         "offline-title": "Offline Mode",
-        "offline": "App is currently offline.",
+        offline: "App is currently offline.",
         "update-success": "Update Success",
         "update-success-prompt": "You have been updated to the latest version.",
+      },
+      share: {
+        title: "Share",
+        "share-conversation": "Share Conversation",
+        description: "Share this conversation with others: ",
+        "copy-link": "Copy Link",
+        "view": "View",
+        success: "Share success",
+        failed: "Share failed",
+        copied: "Copied",
+        "copied-description": "Link has been copied to clipboard",
       }
     },
   },
@@ -196,18 +208,19 @@ const resources = {
       close: "关闭",
       edit: "编辑",
       conversation: {
-        title: "会话",
+        title: "对话",
         empty: "空空如也",
         "refresh-failed": "刷新失败",
         "refresh-failed-prompt": "请求出错，请重试。",
         "remove-title": "是否确定？",
-        "remove-description": "此操作无法撤消。这将永久删除会话 ",
+        "remove-description": "此操作无法撤消。这将永久删除对话 ",
         cancel: "取消",
         delete: "删除",
-        "delete-success": "会话已删除",
-        "delete-success-prompt": "会话已删除。",
+        "delete-conversation": "删除对话",
+        "delete-success": "对话已删除",
+        "delete-success-prompt": "对话已删除。",
         "delete-failed": "删除失败",
-        "delete-failed-prompt": "删除会话失败，请检查您的网络并重试。",
+        "delete-failed-prompt": "删除对话失败，请检查您的网络并重试。",
       },
       chat: {
         web: "联网搜索功能",
@@ -322,13 +335,24 @@ const resources = {
         "learn-more": "了解更多",
       },
       service: {
-        "title": "发现新版本",
-        "description": "发现新版本，是否立即更新？",
-        "update": "更新",
+        title: "发现新版本",
+        description: "发现新版本，是否立即更新？",
+        update: "更新",
         "offline-title": "离线模式",
-        "offline": "应用当前处于离线状态。",
+        offline: "应用当前处于离线状态。",
         "update-success": "更新成功",
         "update-success-prompt": "您已更新至最新版本。",
+      },
+      share: {
+        title: "分享",
+        "share-conversation": "分享对话",
+        description: "将此对话与他人分享：",
+        "copy-link": "复制链接",
+        "view": "查看",
+        success: "分享成功",
+        failed: "分享失败",
+        copied: "复制成功",
+        "copied-description": "链接已复制到剪贴板",
       }
     },
   },
@@ -367,6 +391,7 @@ const resources = {
           "Это действие нельзя отменить. Это навсегда удалит разговор ",
         cancel: "Отмена",
         delete: "Удалить",
+        "delete-conversation": "Удалить разговор",
         "delete-success": "Разговор удален",
         "delete-success-prompt": "Разговор был удален.",
         "delete-failed": "Ошибка удаления",
@@ -491,13 +516,24 @@ const resources = {
         "learn-more": "Узнать больше",
       },
       service: {
-        "title": "Доступна новая версия",
-        "description": "Доступна новая версия. Хотите обновить сейчас?",
-        "update": "Обновить",
+        title: "Доступна новая версия",
+        description: "Доступна новая версия. Хотите обновить сейчас?",
+        update: "Обновить",
         "offline-title": "Режим оффлайн",
-        "offline": "Приложение в настоящее время находится в автономном режиме.",
+        offline: "Приложение в настоящее время находится в автономном режиме.",
         "update-success": "Обновление успешно",
         "update-success-prompt": "Вы обновились до последней версии.",
+      },
+      share: {
+        title: "Поделиться",
+        "share-conversation": "Поделиться разговором",
+        description: "Поделитесь этим разговором с другими: ",
+        "copy-link": "Скопировать ссылку",
+        "view": "Посмотреть",
+        success: "Поделиться успешно",
+        failed: "Поделиться не удалось",
+        copied: "Скопировано",
+        "copied-description": "Ссылка скопирована в буфер обмена",
       }
     },
   },
diff --git a/app/src/routes/Home.tsx b/app/src/routes/Home.tsx
index b4a4781..bcca040 100644
--- a/app/src/routes/Home.tsx
+++ b/app/src/routes/Home.tsx
@@ -4,14 +4,12 @@ import { Input } from "../components/ui/input.tsx";
 import { Toggle } from "../components/ui/toggle.tsx";
 import {
   ChevronDown,
-  ChevronRight,
+  ChevronRight, Copy,
   FolderKanban,
   Globe,
   LogIn,
-  MessageSquare,
   Plus,
   RotateCw,
-  Trash2,
 } from "lucide-react";
 import { Button } from "../components/ui/button.tsx";
 import {
@@ -25,7 +23,7 @@ import type { RootState } from "../store";
 import { selectAuthenticated, selectInit } from "../store/auth.ts";
 import { login, supportModels } from "../conf.ts";
 import {
-  deleteConversation,
+  deleteConversation, shareConversation,
   toggleConversation,
   updateConversationList,
 } from "../conversation/history.ts";
@@ -36,7 +34,7 @@ import {
   formatMessage,
   mobile,
   useAnimation,
-  useEffectAsync,
+  useEffectAsync, copyClipboard,
 } from "../utils.ts";
 import { toast, useToast } from "../components/ui/use-toast.ts";
 import { ConversationInstance, Message } from "../conversation/types.ts";
@@ -67,6 +65,7 @@ import FileProvider, { FileObject } from "../components/FileProvider.tsx";
 import router from "../router.ts";
 import SelectGroup from "../components/SelectGroup.tsx";
 import EditorProvider from "../components/EditorProvider.tsx";
+import ConversationSegment from "../components/home/ConversationSegment.tsx";
 
 function SideBar() {
   const { t } = useTranslation();
@@ -74,15 +73,20 @@ function SideBar() {
   const open = useSelector((state: RootState) => state.menu.open);
   const auth = useSelector(selectAuthenticated);
   const current = useSelector(selectCurrent);
-  const [removeConversation, setRemoveConversation] =
-    useState<ConversationInstance | null>(null);
+  const [operateConversation, setOperateConversation] =
+    useState<{
+      target: ConversationInstance | null;
+      type: string;
+    }>({ target: null, type: "" });
   const { toast } = useToast();
   const history: ConversationInstance[] = useSelector(selectHistory);
   const refresh = useRef(null);
+  const [shared, setShared] = useState<string>("");
   useEffectAsync(async () => {
     await updateConversationList(dispatch);
   }, []);
 
+  // @ts-ignore
   return (
     <div className={`sidebar ${open ? "open" : ""}`}>
       {auth ? (
@@ -123,45 +127,21 @@ function SideBar() {
           <div className={`conversation-list`}>
             {history.length ? (
               history.map((conversation, i) => (
-                <div
-                  className={`conversation ${
-                    current === conversation.id ? "active" : ""
-                  }`}
+                <ConversationSegment
+                  operate={setOperateConversation}
+                  conversation={conversation}
+                  current={current}
                   key={i}
-                  onClick={async (e) => {
-                    const target = e.target as HTMLElement;
-                    if (
-                      target.classList.contains("delete") ||
-                      target.parentElement?.classList.contains("delete")
-                    )
-                      return;
-                    await toggleConversation(dispatch, conversation.id);
-                    if (mobile) dispatch(setMenu(false));
-                  }}
-                >
-                  <MessageSquare className={`h-4 w-4 mr-1`} />
-                  <div className={`title`}>
-                    {filterMessage(conversation.name)}
-                  </div>
-                  <div className={`id`}>{conversation.id}</div>
-                  <Trash2
-                    className={`delete h-4 w-4`}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setRemoveConversation(conversation);
-                    }}
-                  />
-                </div>
+                />
               ))
             ) : (
               <div className={`empty`}>{t("conversation.empty")}</div>
             )}
           </div>
           <AlertDialog
-            open={removeConversation !== null}
+            open={operateConversation.type === "delete" && !!operateConversation.target}
             onOpenChange={(open) => {
-              if (!open) setRemoveConversation(null);
+              if (!open) setOperateConversation({ target: null, type: "" });
             }}
           >
             <AlertDialogContent>
@@ -173,7 +153,7 @@ function SideBar() {
                   {t("conversation.remove-description")}
                   <strong className={`conversation-name`}>
                     {extractMessage(
-                      filterMessage(removeConversation?.name || ""),
+                      filterMessage(operateConversation?.target?.name || ""),
                     )}
                   </strong>
                   {t("end")}
@@ -191,7 +171,7 @@ function SideBar() {
                     if (
                       await deleteConversation(
                         dispatch,
-                        removeConversation?.id || -1,
+                        operateConversation?.target?.id || -1,
                       )
                     )
                       toast({
@@ -203,7 +183,7 @@ function SideBar() {
                         title: t("conversation.delete-failed"),
                         description: t("conversation.delete-failed-prompt"),
                       });
-                    setRemoveConversation(null);
+                    setOperateConversation({ target: null, type: "" });
                   }}
                 >
                   {t("conversation.delete")}
@@ -211,6 +191,96 @@ function SideBar() {
               </AlertDialogFooter>
             </AlertDialogContent>
           </AlertDialog>
+
+          <AlertDialog
+            open={operateConversation.type === "share" && !!operateConversation.target}
+            onOpenChange={(open) => {
+              if (!open) setOperateConversation({ target: null, type: "" });
+            }}
+          >
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  {t("share.title")}
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  {t("share.description")}
+                  <strong className={`conversation-name`}>
+                    {extractMessage(
+                      filterMessage(operateConversation?.target?.name || ""),
+                    )}
+                  </strong>
+                  {t("end")}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>
+                  {t("conversation.cancel")}
+                </AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={async (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    const resp = await shareConversation(operateConversation?.target?.id || -1);
+                    if (resp.status) setShared(`${location.origin}/share/${resp.data}`);
+                    else toast({
+                        title: t("share.failed"),
+                        description: resp.message,
+                      });
+
+                    setOperateConversation({ target: null, type: "" });
+                  }}
+                >
+                  {t("share.title")}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <AlertDialog
+            open={shared.length > 0}
+            onOpenChange={(open) => {
+              if (!open) {
+                setShared("");
+                setOperateConversation({ target: null, type: "" });
+              }
+            }}
+          >
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  {t("share.success")}
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  <div className={`share-wrapper mt-4 mb-2`}>
+                    <Input value={shared} />
+                    <Button variant={`default`} size={`icon`} onClick={async () => {
+                      await copyClipboard(shared);
+                      toast({
+                        title: t("share.copied"),
+                        description: t("share.copied-description"),
+                      });
+                    }}>
+                      <Copy className={`h-4 w-4`} />
+                    </Button>
+                  </div>
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>{t("close")}</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={async (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    window.open(shared, "_blank");
+                  }}
+                >
+                  {t("share.view")}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         </div>
       ) : (
         <Button className={`login-action`} variant={`default`} onClick={login}>
diff --git a/app/src/routes/Package.tsx b/app/src/routes/Package.tsx
index 8d5be28..cf9f889 100644
--- a/app/src/routes/Package.tsx
+++ b/app/src/routes/Package.tsx
@@ -71,9 +71,7 @@ function Package() {
           </Button>
           <Button
             variant={`default`}
-            onClick={() =>
-              window.open("https://deeptrain.net/home/package")
-            }
+            onClick={() => window.open("https://deeptrain.net/home/package")}
           >
             {t("pkg.go")}
           </Button>
diff --git a/app/src/types/service.d.ts b/app/src/types/service.d.ts
index 5ef1ae1..7c61797 100644
--- a/app/src/types/service.d.ts
+++ b/app/src/types/service.d.ts
@@ -1,15 +1,15 @@
-declare module 'virtual:pwa-register/react' {
+declare module "virtual:pwa-register/react" {
   // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
   // @ts-expect-error ignore when React is not installed
-  import type { Dispatch, SetStateAction } from 'react'
-  import type { RegisterSWOptions } from 'vite-plugin-pwa/types'
+  import type { Dispatch, SetStateAction } from "react";
+  import type { RegisterSWOptions } from "vite-plugin-pwa/types";
 
-  export type { RegisterSWOptions }
+  export type { RegisterSWOptions };
 
   export function useRegisterSW(options?: RegisterSWOptions): {
-    needRefresh: [boolean, Dispatch<SetStateAction<boolean>>]
-    offlineReady: [boolean, Dispatch<SetStateAction<boolean>>]
-    updateServiceWorker: (reloadPage?: boolean) => Promise<void>
-    onRegistered: (registration: ServiceWorkerRegistration) => void
-  }
+    needRefresh: [boolean, Dispatch<SetStateAction<boolean>>];
+    offlineReady: [boolean, Dispatch<SetStateAction<boolean>>];
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>;
+    onRegistered: (registration: ServiceWorkerRegistration) => void;
+  };
 }
diff --git a/connection/database.go b/connection/database.go
index 4ee6aad..656d915 100644
--- a/connection/database.go
+++ b/connection/database.go
@@ -111,8 +111,7 @@ func CreateSharingTable(db *sql.DB) {
 		  conversation_id INT,
 		  refs TEXT,
 		  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-		  FOREIGN KEY (user_id) REFERENCES auth(id),
-		  FOREIGN KEY (conversation_id) REFERENCES conversation(id)
+		  FOREIGN KEY (user_id) REFERENCES auth(id)
 		);
 	`)
 	if err != nil {
diff --git a/manager/conversation/api.go b/manager/conversation/api.go
index 43a96ce..a344f80 100644
--- a/manager/conversation/api.go
+++ b/manager/conversation/api.go
@@ -10,8 +10,8 @@ import (
 )
 
 type ShareForm struct {
-	ConversationId int64 `json:"conversation_id"`
-	Refs           []int `json:"refs"`
+	Id   int64 `json:"id"`
+	Refs []int `json:"refs"`
 }
 
 func ListAPI(c *gin.Context) {
@@ -121,18 +121,19 @@ func ShareAPI(c *gin.Context) {
 		return
 	}
 
-	if err := ShareConversation(db, user, form.ConversationId, form.Refs); err != nil {
+	if hash, err := ShareConversation(db, user, form.Id, form.Refs); err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"status":  false,
 			"message": err.Error(),
 		})
 		return
+	} else {
+		c.JSON(http.StatusOK, gin.H{
+			"status":  true,
+			"message": "",
+			"data":    hash,
+		})
 	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"status":  true,
-		"message": "",
-	})
 }
 
 func ViewAPI(c *gin.Context) {
diff --git a/manager/conversation/router.go b/manager/conversation/router.go
index b5e9bc8..881d392 100644
--- a/manager/conversation/router.go
+++ b/manager/conversation/router.go
@@ -9,5 +9,6 @@ func Register(app *gin.Engine) {
 		router.GET("/load", LoadAPI)
 		router.GET("/delete", DeleteAPI)
 		router.POST("/share", ShareAPI)
+		router.GET("/view", ViewAPI)
 	}
 }
diff --git a/manager/conversation/shared.go b/manager/conversation/shared.go
index b2c760a..320421f 100644
--- a/manager/conversation/shared.go
+++ b/manager/conversation/shared.go
@@ -30,9 +30,9 @@ func GetRef(refs []int) (result string) {
 	return strings.TrimSuffix(result, ",")
 }
 
-func ShareConversation(db *sql.DB, user *auth.User, id int64, refs []int) error {
+func ShareConversation(db *sql.DB, user *auth.User, id int64, refs []int) (string, error) {
 	if id < 0 || user == nil {
-		return nil
+		return "", nil
 	}
 
 	ref := GetRef(refs)
@@ -42,12 +42,14 @@ func ShareConversation(db *sql.DB, user *auth.User, id int64, refs []int) error
 		Refs:           refs,
 	})
 
-	_, err := db.Exec(`
+	if _, err := db.Exec(`
 		INSERT INTO sharing (hash, user_id, conversation_id, refs) VALUES (?, ?, ?, ?)
 		ON DUPLICATE KEY UPDATE refs = ?
-	`, hash, user.GetID(db), id, ref, ref)
+	`, hash, user.GetID(db), id, ref, ref); err != nil {
+		return "", err
+	}
 
-	return err
+	return hash, nil
 }
 
 func GetSharedMessages(db *sql.DB, userId int64, conversationId int64, refs []string) []globals.Message {
@@ -84,7 +86,7 @@ func GetSharedConversation(db *sql.DB, hash string) (*SharedForm, error) {
 		       sharing.user_id, sharing.conversation_id
 		FROM sharing
 		INNER JOIN auth ON auth.id = sharing.user_id
-		INNER JOIN conversation ON conversation.id = sharing.conversation_id
+		INNER JOIN conversation ON conversation.conversation_id = sharing.conversation_id AND conversation.user_id = sharing.user_id
 		WHERE sharing.hash = ?
 	`, hash).Scan(&shared.Username, &ref, &updated, &shared.Name, &uid, &cid); err != nil {
 		return nil, err