opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-28 17:53:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update icon usage

Browse Source
This commit is contained in:
Steven
2023-03-26 23:19:28 +08:00
parent 6e1f137048
commit cad70c919a
12 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ChatView/Header.tsx
View File

@ -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>

18
components/ChatView/MessageTextarea.tsx
View File

@ -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>
);

4
components/ChatView/MessageView.tsx
View File

@ -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"

5
components/ChatView/index.tsx
View File

@ -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>

2
components/ClearDataConfirmModal.tsx
View File

@ -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>

12
components/ConnectionSidebar.tsx
View File

@ -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>

2
components/CreateConnectionModal.tsx
View File

@ -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">

6
components/EmptyView.tsx
View File

@ -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">

6
components/EngineIcon.tsx
View File

@ -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} />;
}
};

16
components/Icon.tsx
View File

@ -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.

2
components/SettingModal.tsx
View File

@ -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>

7
store/chat.ts
View File

@ -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 })),
}),