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) {
-      toast.error("Please select a chat first.");
-      return;
+    let chat = chatStore.currentChat;
+    if (!chat) {
+      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>