chore: update Dialog kit

src/components/ActionConfirmModal.tsx

@@ -5,16 +5,17 @@ export interface ActionConfirmModalProps {
   title: string;
   content: string;
   confirmButtonStyle: string;
+  open: boolean;
   close: () => void;
   confirm: () => void;
 }
 
 const ActionConfirmModal = (props: ActionConfirmModalProps) => {
-  const { close, confirm, title, content, confirmButtonStyle } = props;
+  const { close, confirm, title, content, open, confirmButtonStyle } = props;
   const { t } = useTranslation();
 
   return (
-    <Dialog title={title} onClose={close}>
+    <Dialog title={title} open={open} onClose={close}>
       <div className="w-full flex flex-col justify-start items-start mt-2">
         <p className="text-gray-500">{content}</p>
       </div>

src/components/ClearDataButton.tsx

@@ -12,7 +12,7 @@ const ClearDataButton = () => {
         {t("common.clear")}
       </button>
 
-      {showClearDataConfirmModal && <ClearDataConfirmModal close={() => setShowClearDataConfirmModal(false)} />}
+      <ClearDataConfirmModal open={showClearDataConfirmModal} close={() => setShowClearDataConfirmModal(false)} />
     </>
   );
 };

src/components/ClearDataConfirmModal.tsx

@@ -3,11 +3,12 @@ import { useTranslation } from "react-i18next";
 import Dialog from "./kit/Dialog";
 
 interface Props {
+  open: boolean;
   close: () => void;
 }
 
 const ClearDataConfirmModal = (props: Props) => {
-  const { close } = props;
+  const { open, close } = props;
   const { t } = useTranslation();
 
   const handleClearData = () => {
@@ -20,7 +21,7 @@ const ClearDataConfirmModal = (props: Props) => {
   };
 
   return (
-    <Dialog title="Clear all data" onClose={close}>
+    <Dialog title="Clear all data" open={open} onClose={close}>
       <div className="w-full flex flex-col justify-start items-start mt-2">
         <p className="text-gray-500">SQL Chat saves all your data in your local browser. Are you sure to clear all of them?</p>
       </div>

src/components/ConnectionSidebar.tsx

@@ -159,6 +159,7 @@ const ConnectionSidebar = () => {
         variant={layoutStore.isMobileView ? "temporary" : "persistent"}
         open={layoutStore.showSidebar}
         onClose={() => layoutStore.toggleSidebar(false)}
+        ModalProps={{ disablePortal: true }}
       >
         <div className="w-80 h-full overflow-y-hidden flex flex-row justify-start items-start">
           <div className="w-16 h-full bg-gray-200 dark:bg-zinc-600 pl-2 py-4 pt-6 flex flex-col justify-between items-center">
@@ -291,15 +292,18 @@ const ConnectionSidebar = () => {
         </div>
       </Drawer>
 
-      {state.showCreateConnectionModal && (
+      <CreateConnectionModal
-        <CreateConnectionModal connection={editConnectionModalContext} close={() => toggleCreateConnectionModal(false)} />
+        connection={editConnectionModalContext}
-      )}
+        open={state.showCreateConnectionModal}
+        close={() => toggleCreateConnectionModal(false)}
+      />
 
-      {state.showSettingModal && <SettingModal close={() => toggleSettingModal(false)} />}
+      <SettingModal open={state.showSettingModal} close={() => toggleSettingModal(false)} />
 
-      {state.showEditConversationTitleModal && editConversationTitleModalContext && (
+      {editConversationTitleModalContext && (
         <EditConversationTitleModal
           close={() => toggleEditConversationTitleModal(false)}
+          open={state.showEditConversationTitleModal}
           conversation={editConversationTitleModalContext}
         />
       )}

src/components/CreateConnectionModal.tsx

@@ -13,6 +13,7 @@ import ActionConfirmModal from "./ActionConfirmModal";
 
 interface Props {
   connection?: Connection;
+  open: boolean;
   close: () => void;
 }
 
@@ -46,7 +47,7 @@ const defaultConnection: Connection = {
 };
 
 const CreateConnectionModal = (props: Props) => {
-  const { connection: editConnection, close } = props;
+  const { connection: editConnection, open, close } = props;
   const connectionStore = useConnectionStore();
   const [connection, setConnection] = useState<Connection>(defaultConnection);
   const [showDeleteConnectionModal, setShowDeleteConnectionModal] = useState(false);
@@ -206,7 +207,7 @@ const CreateConnectionModal = (props: Props) => {
 
   return (
     <>
-      <Dialog title={isEditing ? "Edit Connection" : "Create Connection"} onClose={close}>
+      <Dialog title={isEditing ? "Edit Connection" : "Create Connection"} open={open} onClose={close}>
         <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
           <DataStorageBanner className="rounded-lg bg-white border dark:border-zinc-700 py-2 !justify-start" alwaysShow={true} />
           <div className="w-full flex flex-col">
@@ -347,15 +348,14 @@ const CreateConnectionModal = (props: Props) => {
         </div>
       </Dialog>
 
-      {showDeleteConnectionModal && (
+      <ActionConfirmModal
-        <ActionConfirmModal
+        title="Delete Connection"
-          title="Delete Connection"
+        content="Are you sure you want to delete this connection?"
-          content="Are you sure you want to delete this connection?"
+        confirmButtonStyle="btn-error"
-          confirmButtonStyle="btn-error"
+        open={showDeleteConnectionModal}
-          close={() => setShowDeleteConnectionModal(false)}
+        close={() => setShowDeleteConnectionModal(false)}
-          confirm={() => handleDeleteConnection()}
+        confirm={() => handleDeleteConnection()}
-        />
+      />
-      )}
     </>
   );
 };

src/components/EditConversationTitleModal.tsx

@@ -8,11 +8,12 @@ import Dialog from "./kit/Dialog";
 
 interface Props {
   conversation: Conversation;
+  open: boolean;
   close: () => void;
 }
 
 const EditConversationTitleModal = (props: Props) => {
-  const { close, conversation } = props;
+  const { close, conversation, open } = props;
   const { t } = useTranslation();
   const conversationStore = useConversationStore();
   const [title, setTitle] = useState(conversation.title);
@@ -32,7 +33,7 @@ const EditConversationTitleModal = (props: Props) => {
   };
 
   return (
-    <Dialog title={t("conversation.edit-title")} onClose={close}>
+    <Dialog title={t("conversation.edit-title")} open={open} onClose={close}>
       <div className="w-full flex flex-col justify-start items-start mt-2">
         <TextField placeholder={t("conversation.conversation-title") || ""} value={title} onChange={(value) => setTitle(value)} />
       </div>

src/components/SettingModal.tsx

@@ -8,15 +8,16 @@ import ThemeSelector from "./ThemeSelector";
 import OpenAIApiConfigView from "./OpenAIApiConfigView";
 
 interface Props {
+  open: boolean;
   close: () => void;
 }
 
 const SettingModal = (props: Props) => {
-  const { close } = props;
+  const { open, close } = props;
   const { t } = useTranslation();
 
   return (
-    <Dialog title={t("setting.self")} onClose={close}>
+    <Dialog title={t("setting.self")} open={open} onClose={close}>
       <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
         <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2">
           <a

src/components/WeChatQRCodeView.tsx

@@ -1,21 +1,18 @@
 import { useTranslation } from "react-i18next";
 import Icon from "./Icon";
-import Popover from "./kit/Popover";
 
 const WeChatQRCodeView = () => {
   const { t } = useTranslation();
 
   return (
-    <Popover
+    <a
-      tigger={
+      className="w-auto px-4 py-2 rounded-full cursor-pointer bg-green-600 text-white text-sm font-medium flex flex-row justify-center items-center hover:underline hover:shadow"
-        <div className="w-auto px-4 py-2 rounded-full cursor-pointer bg-green-600 text-white text-sm font-medium flex flex-row justify-center items-center hover:shadow">
+      href="/wechat-qrcode.webp"
-          <Icon.BsWechat className="w-4 h-auto mr-1" />
+      target="_blank"
-          {t("social.join-wechat-group")}
-        </div>
-      }
     >
-      <img className="w-40 h-auto" src="/wechat-qrcode.webp" alt="wechat qrcode" />
+      <Icon.BsWechat className="w-4 h-auto mr-1" />
-    </Popover>
+      {t("social.join-wechat-group")}
+    </a>
   );
 };
 

src/components/kit/Dialog.tsx

@@ -4,18 +4,24 @@ import Icon from "../Icon";
 
 interface Props {
   title: string;
+  open: boolean;
   children: ReactNode;
   onClose: () => void;
 }
 
 const Dialog = (props: Props) => {
-  const { children, title, onClose } = props;
+  const { children, title, open, onClose } = props;
 
   return (
-    <DialogUI.Root open={true}>
+    <DialogUI.Root
+      open={open}
+      onOpenChange={() => {
+        onClose();
+      }}
+    >
       <DialogUI.Portal>
-        <DialogUI.Overlay className="fixed inset-0 bg-black bg-opacity-60 z-[999]" />
+        <DialogUI.Overlay className="fixed inset-0 bg-black bg-opacity-60 z-100" />
-        <DialogUI.Content className="flex flex-col bg-white dark:bg-zinc-800 rounded-xl p-4 px-5 fixed top-[50%] left-[50%] h-auto max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] z-[999]">
+        <DialogUI.Content className="flex flex-col bg-white dark:bg-zinc-800 rounded-xl p-4 px-5 fixed top-[50%] left-[50%] h-auto max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] z-100">
           <DialogUI.Title className="text-lg text-black dark:text-gray-300 font-medium mb-2">{title}</DialogUI.Title>
           <DialogUI.Close
             className="absolute top-3 right-3 outline-none w-8 h-8 p-1 bg-zinc-600 rounded-full text-gray-300 hover:opacity-80"

src/components/kit/Popover.tsx

@@ -11,10 +11,14 @@ const Popover = (props: Props) => {
   const { className, children, tigger } = props;
 
   return (
-    <PopoverUI.Root>
+    <PopoverUI.Root modal={false}>
       <PopoverUI.Trigger asChild>{tigger}</PopoverUI.Trigger>
       <PopoverUI.Portal>
-        <PopoverUI.Content className={`${className || ""} z-[9999] p-2 bg-white dark:bg-zinc-700 shadow-lg rounded-lg`} sideOffset={5}>
+        <PopoverUI.Content
+          asChild
+          className={`${className || ""} z-[9999] p-2 bg-white dark:bg-zinc-700 shadow-lg rounded-lg`}
+          sideOffset={5}
+        >
           {children}
         </PopoverUI.Content>
       </PopoverUI.Portal>

tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
     extend: {
       zIndex: {
         1: "1",
+        100: "100",
       },
     },
   },