chore: update modal props

src/components/ActionConfirmModal.tsx

@@ -5,17 +5,16 @@ export interface ActionConfirmModalProps {
   title: string;
   content: string;
   confirmButtonStyle: string;
-  open: boolean;
   close: () => void;
   confirm: () => void;
 }
 
 const ActionConfirmModal = (props: ActionConfirmModalProps) => {
-  const { close, confirm, title, content, open, confirmButtonStyle } = props;
+  const { close, confirm, title, content, confirmButtonStyle } = props;
   const { t } = useTranslation();
 
   return (
-    <Modal title={title} open={open} onClose={close}>
+    <Modal title={title} 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>
 
-      <ClearDataConfirmModal open={showClearDataConfirmModal} close={() => setShowClearDataConfirmModal(false)} />
+      {showClearDataConfirmModal && <ClearDataConfirmModal close={() => setShowClearDataConfirmModal(false)} />}
     </>
   );
 };

src/components/ClearDataConfirmModal.tsx

@@ -3,12 +3,11 @@ import { useTranslation } from "react-i18next";
 import Modal from "./kit/Modal";
 
 interface Props {
-  open: boolean;
   close: () => void;
 }
 
 const ClearDataConfirmModal = (props: Props) => {
-  const { open, close } = props;
+  const { close } = props;
   const { t } = useTranslation();
 
   const handleClearData = () => {
@@ -21,7 +20,7 @@ const ClearDataConfirmModal = (props: Props) => {
   };
 
   return (
-    <Modal title="Clear all data" className="!w-96" open={open} onClose={close}>
+    <Modal title="Clear all data" className="!w-96" onClose={close}>
       <div>
         <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>

src/components/ConnectionSidebar.tsx

@@ -294,18 +294,15 @@ const ConnectionSidebar = () => {
         </div>
       </Drawer>
 
-      <CreateConnectionModal
-        connection={editConnectionModalContext}
-        open={state.showCreateConnectionModal}
-        close={() => toggleCreateConnectionModal(false)}
-      />
+      {state.showCreateConnectionModal && (
+        <CreateConnectionModal connection={editConnectionModalContext} close={() => toggleCreateConnectionModal(false)} />
+      )}
 
-      <SettingModal open={state.showSettingModal} close={() => toggleSettingModal(false)} />
+      {state.showSettingModal && <SettingModal close={() => toggleSettingModal(false)} />}
 
-      {editConversationTitleModalContext && (
+      {editConversationTitleModalContext && state.showEditConversationTitleModal && (
         <EditConversationTitleModal
           close={() => toggleEditConversationTitleModal(false)}
-          open={state.showEditConversationTitleModal}
           conversation={editConversationTitleModalContext}
         />
       )}

src/components/CreateConnectionModal.tsx

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

src/components/EditConversationTitleModal.tsx

@@ -8,12 +8,11 @@ import Modal from "./kit/Modal";
 
 interface Props {
   conversation: Conversation;
-  open: boolean;
   close: () => void;
 }
 
 const EditConversationTitleModal = (props: Props) => {
-  const { close, conversation, open } = props;
+  const { close, conversation } = props;
   const { t } = useTranslation();
   const conversationStore = useConversationStore();
   const [title, setTitle] = useState(conversation.title);
@@ -33,7 +32,7 @@ const EditConversationTitleModal = (props: Props) => {
   };
 
   return (
-    <Modal title={t("conversation.edit-title")} open={open} onClose={close}>
+    <Modal title={t("conversation.edit-title")} 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,16 +8,15 @@ import ThemeSelector from "./ThemeSelector";
 import OpenAIApiConfigView from "./OpenAIApiConfigView";
 
 interface Props {
-  open: boolean;
   close: () => void;
 }
 
 const SettingModal = (props: Props) => {
-  const { open, close } = props;
+  const { close } = props;
   const { t } = useTranslation();
 
   return (
-    <Modal title={t("setting.self")} open={open} onClose={close}>
+    <Modal title={t("setting.self")} 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/kit/Modal.tsx

@@ -4,21 +4,20 @@ import Icon from "../Icon";
 
 interface Props {
   title: string;
-  open: boolean;
   children: ReactNode;
   onClose: () => void;
   className?: string;
 }
 
 const Modal = (props: Props) => {
-  const { children, open, title, onClose, className } = props;
+  const { children, title, onClose, className } = props;
 
   return (
-    <ModalUI className="!z-100" open={open} onClose={onClose}>
+    <ModalUI className="!z-100" open={true} onClose={onClose}>
       <div
         className={`${
           className || ""
-        } flex flex-col bg-white dark:bg-zinc-800 rounded-xl p-4 fixed top-[50%] left-[50%] h-auto max-h-[85vh] w-[90vw] max-w-lg translate-x-[-50%] translate-y-[-50%] z-100`}
+        } flex flex-col bg-white dark:bg-zinc-800 rounded-xl p-4 fixed top-[50%] left-[50%] h-auto max-h-[85vh] w-[90vw] max-w-[90vw] sm:max-w-lg translate-x-[-50%] translate-y-[-50%] z-100`}
       >
         <p className="text-lg pl-1 text-black dark:text-gray-300 font-medium mb-2">{title}</p>
         <button