update sharing

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;
+  }
+}

app/src/assets/ui.less

@@ -17,19 +17,22 @@
   }
 
   .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));
     }
 
     &.active {
       background: hsl(var(--text));
+      border-color: hsl(var(--border-hover));
       color: hsl(var(--background));
     }
   }

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>

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"

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;
-

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;

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";
 

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,