feat: function delete chat dev done

2025-10-23 08:29:21 +08:00 · 2024-04-26 19:33:22 +08:00
parent 48e8c0a194
commit 1a636b0f50
36 changed files with 598 additions and 187 deletions
--- a/app/containers/Chat/components/ChatHeader.tsx
+++ b/app/containers/Chat/components/ChatHeader.tsx
@@ -0,0 +1,102 @@
+import { useNavigate } from "react-router-dom";
+import Locale from "@/app/locales";
+import { Path } from "@/app/constant";
+import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat";
+
+import LogIcon from "@/app/icons/logIcon.svg";
+import GobackIcon from "@/app/icons/goback.svg";
+import ShareIcon from "@/app/icons/shareIcon.svg";
+import BottomArrow from "@/app/icons/bottomArrow.svg";
+
+export interface ChatHeaderProps {
+  isMobileScreen: boolean;
+  setIsEditingMessage: (v: boolean) => void;
+  setShowExport: (v: boolean) => void;
+  showModelSelector: (v: boolean) => void;
+}
+
+export default function ChatHeader(props: ChatHeaderProps) {
+  const {
+    isMobileScreen,
+    setIsEditingMessage,
+    setShowExport,
+    showModelSelector,
+  } = props;
+
+  const navigate = useNavigate();
+
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+
+  const currentModel = chatStore.currentSession().mask.modelConfig.model;
+
+  return (
+    <div
+      className={`
+        absolute w-[100%] backdrop-blur-[30px] z-20 flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap 
+        sm:border-b sm:border-chat-header-bottom 
+        max-md:h-menu-title-mobile
+      `}
+      data-tauri-drag-region
+    >
+      <div
+        className={`absolute z-[-1] top-0 left-0 w-[100%] h-[100%] opacity-85 backdrop-blur-[20px]  sm:bg-chat-panel-header-mask bg-chat-panel-header-mobile flex flex-0 justify-between items-center  gap-chat-header-gap`}
+      >
+        {" "}
+      </div>
+
+      {isMobileScreen ? (
+        <div className=" cursor-pointer" onClick={() => navigate(Path.Home)}>
+          <GobackIcon />
+        </div>
+      ) : (
+        <LogIcon />
+      )}
+
+      <div
+        className={`
+        flex-1 
+        max-md:flex max-md:flex-col max-md:items-center max-md:justify-center max-md:gap-0.5 max-md:text
+        md:mr-4
+      `}
+      >
+        <div
+          className={`
+            line-clamp-1 cursor-pointer text-text-chat-header-title text-chat-header-title font-common 
+            max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5
+          `}
+          onClickCapture={() => setIsEditingMessage(true)}
+        >
+          {!session.topic ? DEFAULT_TOPIC : session.topic}
+        </div>
+        <div
+          className={`
+            text-text-chat-header-subtitle text-sm 
+            max-md:text-sm-mobile-tab max-md:leading-4
+          `}
+        >
+          {isMobileScreen ? (
+            <div
+              className="flex items-center gap-1 cursor-pointer"
+              onClick={() => showModelSelector(true)}
+            >
+              {currentModel}
+              <BottomArrow />
+            </div>
+          ) : (
+            Locale.Chat.SubTitle(session.messages.length)
+          )}
+        </div>
+      </div>
+
+      <div
+        className=" cursor-pointer"
+        onClick={() => {
+          setShowExport(true);
+        }}
+      >
+        <ShareIcon />
+      </div>
+    </div>
+  );
+}