From cad70c919aab09344aa5d271a4d3062a3c075c1c Mon Sep 17 00:00:00 2001 From: Steven Date: Sun, 26 Mar 2023 23:19:28 +0800 Subject: [PATCH] chore: update icon usage --- components/ChatView/Header.tsx | 2 +- components/ChatView/MessageTextarea.tsx | 18 ++++++++++++------ components/ChatView/MessageView.tsx | 4 ++-- components/ChatView/index.tsx | 5 +++-- components/ClearDataConfirmModal.tsx | 2 +- components/ConnectionSidebar.tsx | 12 ++++++------ components/CreateConnectionModal.tsx | 2 +- components/EmptyView.tsx | 6 +++--- components/EngineIcon.tsx | 6 +++--- components/Icon.tsx | 16 ++++++---------- components/SettingModal.tsx | 2 +- store/chat.ts | 7 +++++-- 12 files changed, 44 insertions(+), 38 deletions(-) diff --git a/components/ChatView/Header.tsx b/components/ChatView/Header.tsx index 863afc5..bbb3862 100644 --- a/components/ChatView/Header.tsx +++ b/components/ChatView/Header.tsx @@ -15,7 +15,7 @@ const Header = () => {
{title}
diff --git a/components/ChatView/MessageTextarea.tsx b/components/ChatView/MessageTextarea.tsx index 1e1bd77..05eec7f 100644 --- a/components/ChatView/MessageTextarea.tsx +++ b/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} > - +
); diff --git a/components/ChatView/MessageView.tsx b/components/ChatView/MessageView.tsx index 54e43ba..011829a 100644 --- a/components/ChatView/MessageView.tsx +++ b/components/ChatView/MessageView.tsx @@ -20,13 +20,13 @@ const MessageView = (props: Props) => { {message.content}
- +
) : ( <>
- +
{ }, [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 && (
- Requesting... + Requesting...
)}
diff --git a/components/ClearDataConfirmModal.tsx b/components/ClearDataConfirmModal.tsx index 4b163bb..3396aed 100644 --- a/components/ClearDataConfirmModal.tsx +++ b/components/ClearDataConfirmModal.tsx @@ -21,7 +21,7 @@ const ClearDataConfirmModal = (props: Props) => {

Clear all data

SQLChat saves all of your data in localstorage. Please be sure to clear data.

diff --git a/components/ConnectionSidebar.tsx b/components/ConnectionSidebar.tsx index e0af815..b2588f6 100644 --- a/components/ConnectionSidebar.tsx +++ b/components/ConnectionSidebar.tsx @@ -94,7 +94,7 @@ const ConnectionSidebar = () => { data-tip="Create Connection" onClick={() => toggleCreateConnectionModal(true)} > - +
@@ -103,7 +103,7 @@ const ConnectionSidebar = () => { data-tip="Setting" onClick={() => toggleSettingModal(true)} > - + { data-tip="GitHub" target="_blank" > - +
@@ -141,9 +141,9 @@ const ConnectionSidebar = () => { onClick={() => handleChatSelect(chat)} > {chat.id === chatStore.currentChat?.id ? ( - + ) : ( - + )} {chat.title || "SQL Chat"} @@ -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} > - + New Chat diff --git a/components/CreateConnectionModal.tsx b/components/CreateConnectionModal.tsx index 660f501..9298df5 100644 --- a/components/CreateConnectionModal.tsx +++ b/components/CreateConnectionModal.tsx @@ -56,7 +56,7 @@ const CreateConnectionModal = (props: Props) => {

Create Connection

diff --git a/components/EmptyView.tsx b/components/EmptyView.tsx index 78ed9da..7509d78 100644 --- a/components/EmptyView.tsx +++ b/components/EmptyView.tsx @@ -12,19 +12,19 @@ const EmptyView = (props: Props) => {

SQLChat

- + Examples
This is the latest placeholder
Another example
- + Capabilities
Remembers what user said earlier in the conversation
Allows user to provide follow-up corrections
- + Limitations
May occasionally generate incorrect information
diff --git a/components/EngineIcon.tsx b/components/EngineIcon.tsx index 87328f1..d397707 100644 --- a/components/EngineIcon.tsx +++ b/components/EngineIcon.tsx @@ -10,11 +10,11 @@ const EngineIcon = (props: Props) => { const { className, engine } = props; if (engine === Engine.MySQL) { - return ; + return ; } else if (engine === Engine.PostgreSQL) { - return ; + return ; } else { - return ; + return ; } }; diff --git a/components/Icon.tsx b/components/Icon.tsx index 70580d8..97e20b5 100644 --- a/components/Icon.tsx +++ b/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, - Bi, - Bs, - Di, - Hi, - Io, - Io5, - Si, + ...Ai, + ...Bi, + ...Bs, + ...Di, + ...Io, + ...Io5, }; // Icon is a collection of all icons from react-icons. diff --git a/components/SettingModal.tsx b/components/SettingModal.tsx index cb0c486..9c73980 100644 --- a/components/SettingModal.tsx +++ b/components/SettingModal.tsx @@ -31,7 +31,7 @@ const SettingModal = (props: Props) => {

Setting

Danger Zone

diff --git a/store/chat.ts b/store/chat.ts index 24fbff0..78b1cef 100644 --- a/store/chat.ts +++ b/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()( persist( - (set) => ({ + (set, get) => ({ chatList: [], + getState: () => get(), createChat: (connectionId?: Id, databaseName?: string) => { const chat: Chat = { ...getDefaultChat(), @@ -34,6 +36,7 @@ export const useChatStore = create()( chatList: [...state.chatList, chat], currentChat: chat, })); + return chat; }, setCurrentChat: (chat: Chat | undefined) => set(() => ({ currentChat: chat })), }),