feat: implement setting modal

components/ChatView/index.tsx

@@ -1,3 +1,4 @@
+import { head } from "lodash-es";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { getAssistantById, getPromptGeneratorOfAssistant, useChatStore, useMessageStore, useConnectionStore } from "@/store";
@@ -27,6 +28,17 @@ const ChatView = () => {
     });
   }, [currentChat, isRequesting]);
 
+  useEffect(() => {
+    if (!connectionStore.currentConnectionCtx) {
+      return;
+    }
+    if (currentChat?.connectionId === connectionStore.currentConnectionCtx.connection.id) {
+      return;
+    }
+    const chatList = chatStore.chatList.filter((chat) => chat.connectionId === connectionStore.currentConnectionCtx?.connection.id);
+    chatStore.setCurrentChat(head(chatList));
+  }, [connectionStore.currentConnectionCtx]);
+
   const sendMessageToCurrentChat = async () => {
     if (!currentChat || !chatViewRef.current) {
       return;
@@ -101,7 +113,11 @@ const ChatView = () => {
     <main ref={chatViewRef} className="relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white">
       <Header />
       <div className="p-2 w-full h-auto grow max-w-3xl py-1 px-4 sm:px-8 mx-auto">
-        {messageList.length === 0 ? <EmptyView /> : messageList.map((message) => <MessageView key={message.id} message={message} />)}
+        {messageList.length === 0 ? (
+          <EmptyView className="-mt-12" />
+        ) : (
+          messageList.map((message) => <MessageView key={message.id} message={message} />)
+        )}
         {isRequesting && (
           <div className="w-full pt-4 pb-8 flex justify-center items-center text-gray-600">
             <Icon.Bi.BiLoader className="w-5 h-auto mr-2 animate-spin" /> Requesting...

components/ClearDataConfirmModal.tsx

@@ -0,0 +1,42 @@
+import { toast } from "react-hot-toast";
+import Icon from "./Icon";
+
+interface Props {
+  close: () => void;
+}
+
+const ClearDataConfirmModal = (props: Props) => {
+  const { close } = props;
+
+  const handleClearData = () => {
+    window.localStorage.clear();
+    toast.success("Message cleared. The page will be reloaded.");
+    setTimeout(() => {
+      window.location.reload();
+    }, 1500);
+  };
+
+  return (
+    <div className="modal modal-middle modal-open">
+      <div className="modal-box relative">
+        <h3 className="font-bold text-lg">Clear all data</h3>
+        <button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
+          <Icon.Io.IoMdClose className="w-5 h-auto" />
+        </button>
+        <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
+          <p className="text-gray-500">SQLChat saves all of your data in localstorage. Please be sure to clear data.</p>
+        </div>
+        <div className="modal-action">
+          <button className="btn btn-outline" onClick={close}>
+            Close
+          </button>
+          <button className="btn btn-error" onClick={handleClearData}>
+            Clear data
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClearDataConfirmModal;

components/ConnectionSidebar.tsx

@@ -6,9 +6,11 @@ import { Connection } from "@/types";
 import Icon from "./Icon";
 import EngineIcon from "./EngineIcon";
 import CreateConnectionModal from "./CreateConnectionModal";
+import SettingModal from "./SettingModal";
 
 interface State {
   showCreateConnectionModal: boolean;
+  showSettingModal: boolean;
 }
 
 const ConnectionSidebar = () => {
@@ -16,6 +18,7 @@ const ConnectionSidebar = () => {
   const chatStore = useChatStore();
   const [state, setState] = useState<State>({
     showCreateConnectionModal: false,
+    showSettingModal: false,
   });
   const connectionList = connectionStore.connectionList;
   const currentConnectionCtx = connectionStore.currentConnectionCtx;
@@ -24,12 +27,6 @@ const ConnectionSidebar = () => {
     (chat) => chat.connectionId === currentConnectionCtx?.connection.id && chat.databaseName === currentConnectionCtx?.database?.name
   );
 
-  useEffect(() => {
-    if (connectionList.length > 0) {
-      handleConnectionSelect(connectionList[0]);
-    }
-  }, []);
-
   const toggleCreateConnectionModal = (show = true) => {
     setState({
       ...state,
@@ -37,6 +34,13 @@ const ConnectionSidebar = () => {
     });
   };
 
+  const toggleSettingModal = (show = true) => {
+    setState({
+      ...state,
+      showSettingModal: show,
+    });
+  };
+
   const handleConnectionSelect = async (connection: Connection) => {
     const databaseList = await connectionStore.getOrFetchDatabaseList(connection);
     connectionStore.setCurrentConnectionCtx({
@@ -86,6 +90,13 @@ const ConnectionSidebar = () => {
             </button>
           </div>
           <div className="w-full flex flex-col justify-end items-center">
+            <button
+              className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
+              data-tip="Setting"
+              onClick={() => toggleSettingModal(true)}
+            >
+              <Icon.Io.IoMdSettings className="text-gray-600 w-6 h-auto" />
+            </button>
             <a
               className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
               href="https://github.com/bytebase/sqlchat"
@@ -98,7 +109,7 @@ const ConnectionSidebar = () => {
         </div>
         <div className={`w-64 h-full overflow-y-auto bg-gray-100 px-4 pt-2 ${databaseList.length === 0 && "!pt-4"}`}>
           {databaseList.length > 0 && (
-            <div className="w-full sticky top-0 bg-gray-100 z-1">
+            <div className="w-full sticky top-0 bg-gray-100 z-1 mb-4">
               <p className="text-sm leading-6 mb-1 text-gray-500">Select your database:</p>
               <select
                 className="w-full select select-bordered"
@@ -143,6 +154,8 @@ const ConnectionSidebar = () => {
         <CreateConnectionModal show={state.showCreateConnectionModal} close={() => toggleCreateConnectionModal(false)} />,
         document.body
       )}
+
+      {createPortal(<SettingModal show={state.showSettingModal} close={() => toggleSettingModal(false)} />, document.body)}
     </>
   );
 };

components/CreateConnectionModal.tsx

@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash-es";
+import { cloneDeep, head } from "lodash-es";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { testConnection, useConnectionStore } from "@/store";
@@ -41,7 +41,14 @@ const CreateConnectionModal = (props: Props) => {
       toast.error("Failed to connect");
       return;
     }
-    connectionStore.createConnection(connectionCreate);
+    const createdConnection = connectionStore.createConnection(connectionCreate);
+    // Set the created connection as the current connection.
+    const databaseList = await connectionStore.getOrFetchDatabaseList(createdConnection);
+    connectionStore.setCurrentConnectionCtx({
+      connection: createdConnection,
+      database: head(databaseList),
+    });
+    close();
   };
 
   return (

components/EmptyView.tsx

@@ -1,8 +1,14 @@
 import Icon from "./Icon";
 
-const EmptyView = () => {
+interface Props {
+  className?: string;
+}
+
+const EmptyView = (props: Props) => {
+  const { className } = props;
+
   return (
-    <div className="w-full h-full flex flex-col justify-center items-center">
+    <div className={`${className || ""} w-full h-full flex flex-col justify-center items-center`}>
       <p className=" text-5xl font-medium leading-loose mb-8">SQLChat</p>
       <div className="w-full grid grid-cols-3 gap-4">
         <div className="w-full flex flex-col justify-start items-center">

components/SettingModal.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import Icon from "./Icon";
+import ClearDataConfirmModal from "./ClearDataConfirmModal";
+
+interface Props {
+  show: boolean;
+  close: () => void;
+}
+
+interface State {
+  showClearDataConfirmModal: boolean;
+}
+
+const SettingModal = (props: Props) => {
+  const { show, close } = props;
+  const [state, setState] = useState<State>({
+    showClearDataConfirmModal: false,
+  });
+
+  const toggleClearDataConfirmModal = (show = true) => {
+    setState({
+      ...state,
+      showClearDataConfirmModal: show,
+    });
+  };
+
+  return (
+    <>
+      <div className={`modal modal-middle ${show && "modal-open"}`}>
+        <div className="modal-box relative">
+          <h3 className="font-bold text-lg">Setting</h3>
+          <button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
+            <Icon.Io.IoMdClose className="w-5 h-auto" />
+          </button>
+          <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
+            <h3>Danger Zone</h3>
+            <div className="w-full border border-red-200 p-4 rounded-lg">
+              <div className="w-full flex flex-row justify-between items-center gap-2">
+                <div>
+                  <h4 className="leading-8">Clear all data</h4>
+                  <p className="text-gray-500 text-sm">SQLChat saves all of your data in localstorage. Please be sure to clear data.</p>
+                </div>
+                <button className="btn btn-error btn-sm" onClick={() => toggleClearDataConfirmModal(true)}>
+                  Clear data
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {state.showClearDataConfirmModal &&
+        createPortal(<ClearDataConfirmModal close={() => toggleClearDataConfirmModal(false)} />, document.body)}
+    </>
+  );
+};
+
+export default SettingModal;