chore: update icon usage

components/ChatView/Header.tsx

@@ -15,7 +15,7 @@ const Header = () => {
     <div className="sticky top-0 w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-2 border-b bg-white">
       <div className="ml-2 flex justify-center items-center">
         <label htmlFor="connection-drawer" className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100">
-          <Icon.Io.IoIosMenu className="text-gray-600 w-full h-auto" />
+          <Icon.IoIosMenu className="text-gray-600 w-full h-auto" />
         </label>
         <span className="w-auto text-left block lg:hidden">{title}</span>
       </div>

components/ChatView/MessageTextarea.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import TextareaAutosize from "react-textarea-autosize";
-import { useChatStore, useMessageStore, useUserStore } from "@/store";
+import { useChatStore, useConnectionStore, useMessageStore, useUserStore } from "@/store";
 import { CreatorRole } from "@/types";
 import { generateUUID } from "@/utils";
 import Icon from "../Icon";
@@ -13,6 +13,7 @@ interface Props {
 
 const MessageTextarea = (props: Props) => {
   const { disabled, sendMessage } = props;
+  const connectionStore = useConnectionStore();
   const userStore = useUserStore();
   const chatStore = useChatStore();
   const messageStore = useMessageStore();
@@ -31,9 +32,14 @@ const MessageTextarea = (props: Props) => {
   };
 
   const handleSend = async () => {
-    if (!chatStore.currentChat) {
+    let chat = chatStore.currentChat;
-      toast.error("Please select a chat first.");
+    if (!chat) {
-      return;
+      const currentConnectionCtx = connectionStore.currentConnectionCtx;
+      if (!currentConnectionCtx) {
+        chat = chatStore.createChat();
+      } else {
+        chat = chatStore.createChat(currentConnectionCtx.connection.id, currentConnectionCtx.database?.name);
+      }
     }
     if (!value) {
       toast.error("Please enter a message.");
@@ -45,7 +51,7 @@ const MessageTextarea = (props: Props) => {
 
     messageStore.addMessage({
       id: generateUUID(),
-      chatId: chatStore.currentChat.id,
+      chatId: chat.id,
       creatorId: userStore.currentUser.id,
       creatorRole: CreatorRole.User,
       createdAt: Date.now(),
@@ -82,7 +88,7 @@ const MessageTextarea = (props: Props) => {
         disabled={disabled}
         onClick={handleSend}
       >
-        <Icon.Io.IoMdSend className="w-full h-auto text-indigo-600" />
+        <Icon.IoMdSend className="w-full h-auto text-indigo-600" />
       </button>
     </div>
   );

components/ChatView/MessageView.tsx

@@ -20,13 +20,13 @@ const MessageView = (props: Props) => {
             {message.content}
           </div>
           <div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center ml-2 shrink-0">
-            <Icon.Ai.AiOutlineUser className="w-6 h-6" />
+            <Icon.AiOutlineUser className="w-6 h-6" />
           </div>
         </>
       ) : (
         <>
           <div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center mr-2 shrink-0">
-            <Icon.Ai.AiOutlineRobot className="w-6 h-6" />
+            <Icon.AiOutlineRobot className="w-6 h-6" />
           </div>
           <div
             className="mt-0.5 w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow prose prose-neutral"

components/ChatView/index.tsx

@@ -40,7 +40,8 @@ const ChatView = () => {
   }, [connectionStore.currentConnectionCtx]);
 
   const sendMessageToCurrentChat = async () => {
-    if (!currentChat || !chatViewRef.current) {
+    const currentChat = chatStore.getState().currentChat;
+    if (!currentChat) {
       return;
     }
     if (isRequesting) {
@@ -123,7 +124,7 @@ const ChatView = () => {
         )}
         {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...
+            <Icon.BiLoader className="w-5 h-auto mr-2 animate-spin" /> Requesting...
           </div>
         )}
       </div>

components/ClearDataConfirmModal.tsx

@@ -21,7 +21,7 @@ const ClearDataConfirmModal = (props: Props) => {
       <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" />
+          <Icon.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>

components/ConnectionSidebar.tsx

@@ -94,7 +94,7 @@ const ConnectionSidebar = () => {
                 data-tip="Create Connection"
                 onClick={() => toggleCreateConnectionModal(true)}
               >
-                <Icon.Ai.AiOutlinePlus className="w-auto h-full mx-auto" />
+                <Icon.AiOutlinePlus className="w-auto h-full mx-auto" />
               </button>
             </div>
             <div className="w-full flex flex-col justify-end items-center">
@@ -103,7 +103,7 @@ const ConnectionSidebar = () => {
                 data-tip="Setting"
                 onClick={() => toggleSettingModal(true)}
               >
-                <Icon.Io.IoMdSettings className="text-gray-600 w-6 h-auto" />
+                <Icon.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"
@@ -111,7 +111,7 @@ const ConnectionSidebar = () => {
                 data-tip="GitHub"
                 target="_blank"
               >
-                <Icon.Io.IoLogoGithub className="text-gray-600 w-6 h-auto" />
+                <Icon.IoLogoGithub className="text-gray-600 w-6 h-auto" />
               </a>
             </div>
           </div>
@@ -141,9 +141,9 @@ const ConnectionSidebar = () => {
                 onClick={() => handleChatSelect(chat)}
               >
                 {chat.id === chatStore.currentChat?.id ? (
-                  <Icon.Io5.IoChatbubble className="w-5 h-auto mr-2 shrink-0" />
+                  <Icon.IoChatbubble className="w-5 h-auto mr-2 shrink-0" />
                 ) : (
-                  <Icon.Io5.IoChatbubbleOutline className="w-5 h-auto mr-2 opacity-80 shrink-0" />
+                  <Icon.IoChatbubbleOutline className="w-5 h-auto mr-2 opacity-80 shrink-0" />
                 )}
                 <span className="truncate">{chat.title || "SQL Chat"}</span>
               </div>
@@ -152,7 +152,7 @@ const ConnectionSidebar = () => {
               className="w-full my-4 py-3 px-4 border rounded-lg flex flex-row justify-center items-center text-gray-500 hover:text-gray-700 hover:bg-gray-50"
               onClick={handleCreateChat}
             >
-              <Icon.Ai.AiOutlinePlus className="w-5 h-auto mr-1" />
+              <Icon.AiOutlinePlus className="w-5 h-auto mr-1" />
               New Chat
             </button>
           </div>

components/CreateConnectionModal.tsx

@@ -56,7 +56,7 @@ const CreateConnectionModal = (props: Props) => {
       <div className="modal-box relative">
         <h3 className="font-bold text-lg">Create Connection</h3>
         <button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
-          <Icon.Io.IoMdClose className="w-5 h-auto" />
+          <Icon.IoMdClose className="w-5 h-auto" />
         </button>
         <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
           <div className="w-full flex flex-col">

components/EmptyView.tsx

@@ -12,19 +12,19 @@ const EmptyView = (props: Props) => {
       <p className=" text-5xl font-medium leading-loose mb-8">SQLChat</p>
       <div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
         <div className="w-full flex flex-col justify-start items-center">
-          <Icon.Bs.BsSun className="w-8 h-auto opacity-80" />
+          <Icon.BsSun className="w-8 h-auto opacity-80" />
           <span className="mt-2 mb-4">Examples</span>
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">This is the latest placeholder</div>
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">Another example</div>
         </div>
         <div className="w-full flex flex-col justify-start items-center">
-          <Icon.Bs.BsLightning className="w-8 h-auto opacity-80" />
+          <Icon.BsLightning className="w-8 h-auto opacity-80" />
           <span className="mt-2 mb-4">Capabilities</span>
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">Remembers what user said earlier in the conversation</div>
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">Allows user to provide follow-up corrections</div>
         </div>
         <div className="w-full hidden sm:flex flex-col justify-start items-center">
-          <Icon.Bs.BsEmojiNeutral className="w-8 h-auto opacity-80" />
+          <Icon.BsEmojiNeutral className="w-8 h-auto opacity-80" />
           <span className="mt-2 mb-4">Limitations</span>
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">May occasionally generate incorrect information</div>
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">

components/EngineIcon.tsx

@@ -10,11 +10,11 @@ const EngineIcon = (props: Props) => {
   const { className, engine } = props;
 
   if (engine === Engine.MySQL) {
-    return <Icon.Di.DiMysql className={className} />;
+    return <Icon.DiMysql className={className} />;
   } else if (engine === Engine.PostgreSQL) {
-    return <Icon.Di.DiPostgresql className={className} />;
+    return <Icon.DiPostgresql className={className} />;
   } else {
-    return <Icon.Di.DiDatabase className={className} />;
+    return <Icon.DiDatabase className={className} />;
   }
 };
 

components/Icon.tsx

@@ -2,20 +2,16 @@ import * as Ai from "react-icons/ai";
 import * as Bi from "react-icons/bi";
 import * as Bs from "react-icons/bs";
 import * as Di from "react-icons/di";
-import * as Hi from "react-icons/hi";
 import * as Io from "react-icons/io";
 import * as Io5 from "react-icons/io5";
-import * as Si from "react-icons/si";
 
 const Icon = {
-  Ai,
+  ...Ai,
-  Bi,
+  ...Bi,
-  Bs,
+  ...Bs,
-  Di,
+  ...Di,
-  Hi,
+  ...Io,
-  Io,
+  ...Io5,
-  Io5,
-  Si,
 };
 
 // Icon is a collection of all icons from react-icons.

components/SettingModal.tsx

@@ -31,7 +31,7 @@ const SettingModal = (props: Props) => {
         <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" />
+            <Icon.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>

store/chat.ts

@@ -16,14 +16,16 @@ const getDefaultChat = (): Chat => {
 interface ChatState {
   chatList: Chat[];
   currentChat?: Chat;
-  createChat: (connectionId?: Id, databaseName?: string) => void;
+  getState: () => ChatState;
+  createChat: (connectionId?: Id, databaseName?: string) => Chat;
   setCurrentChat: (chat: Chat | undefined) => void;
 }
 
 export const useChatStore = create<ChatState>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       chatList: [],
+      getState: () => get(),
       createChat: (connectionId?: Id, databaseName?: string) => {
         const chat: Chat = {
           ...getDefaultChat(),
@@ -34,6 +36,7 @@ export const useChatStore = create<ChatState>()(
           chatList: [...state.chatList, chat],
           currentChat: chat,
         }));
+        return chat;
       },
       setCurrentChat: (chat: Chat | undefined) => set(() => ({ currentChat: chat })),
     }),