feat: implement connection sidebar

.eslintrc.json

@@ -3,6 +3,7 @@
   "rules": {
     "import/no-anonymous-default-export": "off",
     "@next/next/no-img-element": "off",
-    "react/jsx-no-target-blank": "off"
+    "react/jsx-no-target-blank": "off",
+    "react-hooks/exhaustive-deps": "off"
   }
 }

components/ChatView/Header.tsx

@@ -1,14 +1,12 @@
-import { Menu, Popover } from "@headlessui/react";
+import { Menu } from "@headlessui/react";
-import Link from "next/link";
 import { toast } from "react-hot-toast";
-import { getAssistantById, useChatStore, useMessageStore } from "@/store";
+import { useChatStore, useMessageStore } from "@/store";
 import Icon from "../Icon";
 
 const Header = () => {
   const chatStore = useChatStore();
   const messageStore = useMessageStore();
   const currentChat = chatStore.currentChat;
-  const assistant = getAssistantById(currentChat?.assistantId)!;
 
   const handleClearMessage = () => {
     messageStore.clearMessage((message) => message.chatId !== currentChat?.id);
@@ -16,40 +14,14 @@ const Header = () => {
   };
 
   return (
-    <div className="sticky top-0 w-full flex flex-row justify-between items-center py-2 border-b rounded-t-lg bg-gray-100 bg-opacity-80 backdrop-blur">
+    <div className="sticky top-0 w-full flex flex-row justify-between items-center py-3 border-b bg-white shadow">
       <div className="ml-4 relative flex justify-center">
-        <Menu>
+        <Icon.Io.IoIosMenu className="text-gray-600 w-5 h-auto block sm:hidden" />
-          <Menu.Button className="w-8 h-auto p-1 cursor-pointer outline-none rounded-md hover:shadow hover:bg-white">
-            <Icon.Io.IoIosMenu className="text-gray-600 w-full h-auto" />
-          </Menu.Button>
-          <Menu.Items className="absolute left-0 top-full mt-1 w-32 origin-top-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 outline-none p-1 space-y-1">
-            <Menu.Item>
-              <Link className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100" href="/about">
-                <Icon.Io.IoMdInformationCircleOutline className="text-gray-600 w-5 h-auto mr-1" />
-                About
-              </Link>
-            </Menu.Item>
-            <Menu.Item>
-              <a
-                className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100"
-                href="https://github.com/bytebase/sqlchat"
-                target="_blank"
-              >
-                <Icon.Io.IoLogoGithub className="text-gray-600 w-5 h-auto mr-1" /> GitHub
-              </a>
-            </Menu.Item>
-          </Menu.Items>
-        </Menu>
       </div>
-      <Popover className="relative w-auto">
+      <span className="w-auto">{currentChat?.title || "SQL Chat"}</span>
-        <Popover.Button className="outline-none">{assistant.name}</Popover.Button>
-        <Popover.Panel className="absolute z-10 left-1/2 mt-1 -translate-x-1/2 bg-white shadow-lg rounded-lg outline-none border flex flex-col justify-start items-start w-72 p-4">
-          <p className="w-full text-left">{assistant.description}</p>
-        </Popover.Panel>
-      </Popover>
       <div className="mr-4 relative flex justify-center">
         <Menu>
-          <Menu.Button className="w-8 h-auto p-1 cursor-pointer outline-none rounded-md hover:shadow hover:bg-white">
+          <Menu.Button className="w-8 h-auto p-1 cursor-pointer outline-none rounded-md hover:shadow hover:bg-gray-100">
             <Icon.Io.IoIosMore className="text-gray-600 w-full h-auto" />
           </Menu.Button>
           <Menu.Items className="absolute right-0 top-full mt-1 w-32 origin-top-right rounded-lg bg-white shadow-lg outline-none ring-1 ring-black ring-opacity-5 p-1 space-y-1">

components/ChatView/MessageTextarea.tsx

@@ -67,7 +67,7 @@ const MessageTextarea = (props: Props) => {
     <div className="w-full h-auto flex flex-row justify-between items-end border rounded-lg mb-2 px-2 py-1 relative shadow bg-white">
       <TextareaAutosize
         ref={textareaRef}
-        className="w-full h-full outline-none border-none bg-transparent leading-6 py-1 px-2 resize-none hide-scrollbar"
+        className="w-full h-full outline-none border-none bg-transparent leading-8 py-1 px-2 resize-none hide-scrollbar"
         placeholder="Type a message..."
         rows={1}
         minRows={1}
@@ -78,7 +78,7 @@ const MessageTextarea = (props: Props) => {
         onKeyDown={handleKeyDown}
       />
       <button
-        className="w-8 p-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
+        className="w-8 p-1 -translate-y-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
         disabled={disabled}
         onClick={handleSend}
       >

components/ChatView/index.tsx

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { useEffect, useRef, useState } from "react";
-import { getAssistantById, getPromptOfAssistant, useChatStore, useMessageStore } from "@/store";
+import { getAssistantById, getPromptGeneratorOfAssistant, useChatStore, useMessageStore, useConnectionStore } from "@/store";
 import { CreatorRole } from "@/types";
 import { generateUUID } from "@/utils";
 import Icon from "../Icon";
@@ -9,6 +9,7 @@ import MessageView from "./MessageView";
 import MessageTextarea from "./MessageTextarea";
 
 const ChatView = () => {
+  const connectionStore = useConnectionStore();
   const chatStore = useChatStore();
   const messageStore = useMessageStore();
   const [isRequesting, setIsRequesting] = useState<boolean>(false);
@@ -35,7 +36,12 @@ const ChatView = () => {
 
     setIsRequesting(true);
     const messageList = messageStore.getState().messageList.filter((message) => message.chatId === currentChat.id);
-    const prompt = getPromptOfAssistant(getAssistantById(currentChat.assistantId)!);
+    let prompt = "";
+    if (connectionStore.currentConnectionCtx?.database) {
+      const tables = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database);
+      const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentChat.assistantId)!);
+      prompt = promptGenerator(tables.map((table) => table.structure).join("/n"));
+    }
     const { data } = await axios.post<string>("/api/chat", {
       messages: [
         {

components/ConnectionSidebar.tsx

@@ -0,0 +1,154 @@
+import { head } from "lodash-es";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useChatStore, useConnectionStore } from "@/store";
+import { Connection } from "@/types";
+import Icon from "./Icon";
+import EngineIcon from "./EngineIcon";
+import CreateConnectionModal from "./CreateConnectionModal";
+
+interface State {
+  showCreateConnectionModal: boolean;
+}
+
+const ConnectionSidebar = () => {
+  const connectionStore = useConnectionStore();
+  const chatStore = useChatStore();
+  const [state, setState] = useState<State>({
+    showCreateConnectionModal: false,
+  });
+  const connectionList = connectionStore.connectionList;
+  const currentConnectionCtx = connectionStore.currentConnectionCtx;
+  const databaseList = connectionStore.databaseList.filter((database) => database.connectionId === currentConnectionCtx?.connection.id);
+  const chatList = chatStore.chatList.filter(
+    (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,
+      showCreateConnectionModal: show,
+    });
+  };
+
+  const handleConnectionSelect = async (connection: Connection) => {
+    const databaseList = await connectionStore.getOrFetchDatabaseList(connection);
+    connectionStore.setCurrentConnectionCtx({
+      connection,
+      database: head(databaseList),
+    });
+  };
+
+  const handleDatabaseNameSelect = async (databaseName: string) => {
+    const database = databaseList.find((database) => database.name === databaseName);
+    connectionStore.setCurrentConnectionCtx({
+      connection: currentConnectionCtx!.connection,
+      database: database,
+    });
+  };
+
+  const handleCreateChat = () => {
+    if (!currentConnectionCtx) {
+      chatStore.createChat();
+    } else {
+      chatStore.createChat(currentConnectionCtx.connection.id, currentConnectionCtx.database?.name);
+    }
+  };
+
+  return (
+    <>
+      <aside className="w-80 h-full flex flex-row justify-start items-start border-r">
+        <div className="w-16 h-full bg-gray-200 pl-2 py-4 flex flex-col justify-between items-center">
+          <div className="w-full flex flex-col justify-start items-start space-y-2">
+            {connectionList.map((connection) => (
+              <button
+                key={connection.id}
+                className={`w-full h-14 rounded-l-lg p-2 ${currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 shadow"}`}
+                onClick={() => handleConnectionSelect(connection)}
+              >
+                <EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto" />
+              </button>
+            ))}
+            <button
+              className="w-10 h-10 !mt-5 ml-2 p-2 bg-gray-50 rounded-full text-gray-500 cursor-pointer hover:opacity-100"
+              onClick={() => toggleCreateConnectionModal(true)}
+            >
+              <Icon.Ai.AiOutlinePlus className="w-auto h-full mx-auto" />
+            </button>
+          </div>
+          <div className="w-full flex flex-col justify-end items-center">
+            <a
+              className="tooltip tooltip-right w-10 h-10 p-1 rounded-lg flex flex-row justify-center items-center hover:bg-gray-100"
+              href="https://github.com/bytebase/sqlchat"
+              data-tip="GitHub"
+              target="_blank"
+            >
+              <Icon.Io.IoLogoGithub className="text-gray-600 w-6 h-auto" />
+            </a>
+            <Link
+              className="tooltip tooltip-right w-10 h-10 p-1 rounded-lg flex flex-row justify-center items-center hover:bg-gray-100"
+              data-tip="About"
+              href="/about"
+            >
+              <Icon.Io.IoMdInformationCircleOutline className="text-gray-600 w-6 h-auto" />
+            </Link>
+          </div>
+        </div>
+        <div className={`w-64 h-full overflow-y-auto bg-gray-100 px-4 ${databaseList.length === 0 && "pt-4"}`}>
+          {databaseList.length > 0 && (
+            <div className="w-full sticky top-0 bg-gray-100 z-1 pt-5">
+              <select
+                className="w-full select select-bordered"
+                value={currentConnectionCtx?.database?.name}
+                onChange={(e) => handleDatabaseNameSelect(e.target.value)}
+              >
+                {databaseList.map((database) => (
+                  <option key={database.name} value={database.name}>
+                    {database.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          {chatList.map((chat) => (
+            <div
+              key={chat.id}
+              className={`w-full max-w-full mt-2 py-3 px-4 rounded-lg flex flex-row justify-start items-center cursor-pointer border border-transparent hover:bg-gray-50 ${
+                chat.id === chatStore.currentChat?.id && "!bg-white border-gray-200 font-medium"
+              }`}
+              onClick={() => chatStore.setCurrentChat(chat)}
+            >
+              {chat.id === chatStore.currentChat?.id ? (
+                <Icon.Io5.IoChatbubble className="w-5 h-auto mr-2 shrink-0" />
+              ) : (
+                <Icon.Io5.IoChatbubbleOutline className="w-5 h-auto mr-2 opacity-80 shrink-0" />
+              )}
+              <span className="truncate">{chat.title}</span>
+            </div>
+          ))}
+          <button
+            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" />
+            New Chat
+          </button>
+        </div>
+      </aside>
+
+      {createPortal(
+        <CreateConnectionModal show={state.showCreateConnectionModal} close={() => toggleCreateConnectionModal(false)} />,
+        document.body
+      )}
+    </>
+  );
+};
+
+export default ConnectionSidebar;

components/CreateConnectionModal.tsx

@@ -0,0 +1,129 @@
+import { cloneDeep } from "lodash-es";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import { testConnection, useConnectionStore } from "@/store";
+import { Connection, Engine } from "@/types";
+import Icon from "./Icon";
+
+interface Props {
+  show: boolean;
+  close: () => void;
+}
+
+const CreateConnectionModal = (props: Props) => {
+  const { show, close } = props;
+  const connectionStore = useConnectionStore();
+  const [connection, setConnection] = useState<Connection>({
+    id: "",
+    title: "",
+    engineType: Engine.MySQL,
+    host: "",
+    port: "",
+    username: "",
+    password: "",
+  });
+  const showDatabaseField = connection.engineType === Engine.PostgreSQL;
+
+  const setPartialConnection = (state: Partial<Connection>) => {
+    setConnection({
+      ...connection,
+      ...state,
+    });
+  };
+
+  const handleCreateConnection = async () => {
+    const connectionCreate = cloneDeep(connection);
+    if (!showDatabaseField) {
+      connectionCreate.database = undefined;
+    }
+    const result = await testConnection(connectionCreate);
+    if (!result) {
+      toast.error("Failed to connect");
+      return;
+    }
+    connectionStore.createConnection(connectionCreate);
+  };
+
+  return (
+    <div className={`modal modal-middle ${show && "modal-open"}`}>
+      <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" />
+        </button>
+        <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
+          <div className="w-full flex flex-col">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Database Type</label>
+            <select
+              className="select select-bordered w-full"
+              value={connection.engineType}
+              onChange={(e) => setPartialConnection({ engineType: e.target.value as Engine })}
+            >
+              <option value={Engine.MySQL}>MySQL</option>
+              <option className="hidden" value={Engine.PostgreSQL}>
+                PostgreSQL
+              </option>
+            </select>
+          </div>
+          <div className="w-full flex flex-col">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Host</label>
+            <input
+              type="text"
+              placeholder="Connect host"
+              className="input input-bordered w-full"
+              onChange={(e) => setPartialConnection({ host: e.target.value })}
+            />
+          </div>
+          <div className="w-full flex flex-col">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Port</label>
+            <input
+              type="text"
+              placeholder="Connect port"
+              className="input input-bordered w-full"
+              onChange={(e) => setPartialConnection({ port: e.target.value })}
+            />
+          </div>
+          <div className="w-full flex flex-col">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Admin Username</label>
+            <input
+              type="text"
+              placeholder="Connect admin username"
+              className="input input-bordered w-full"
+              onChange={(e) => setPartialConnection({ username: e.target.value })}
+            />
+          </div>
+          <div className="w-full flex flex-col">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Admin Password</label>
+            <input
+              type="text"
+              placeholder="Connect admin password"
+              className="input input-bordered w-full"
+              onChange={(e) => setPartialConnection({ password: e.target.value })}
+            />
+          </div>
+          {showDatabaseField && (
+            <div className="w-full flex flex-col">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Database Name</label>
+              <input
+                type="text"
+                placeholder="Type here"
+                className="input input-bordered w-full"
+                onChange={(e) => setPartialConnection({ database: e.target.value })}
+              />
+            </div>
+          )}
+        </div>
+        <div className="modal-action">
+          <button className="btn btn-outline" onClick={close}>
+            Close
+          </button>
+          <button className="btn" onClick={handleCreateConnection}>
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateConnectionModal;

components/EngineIcon.tsx

@@ -0,0 +1,21 @@
+import { Engine } from "@/types";
+import Icon from "./Icon";
+
+interface Props {
+  className: string;
+  engine: Engine;
+}
+
+const EngineIcon = (props: Props) => {
+  const { className, engine } = props;
+
+  if (engine === Engine.MySQL) {
+    return <Icon.Di.DiMysql className={className} />;
+  } else if (engine === Engine.PostgreSQL) {
+    return <Icon.Di.DiPostgresql className={className} />;
+  } else {
+    return <Icon.Di.DiDatabase className={className} />;
+  }
+};
+
+export default EngineIcon;

components/Icon.tsx

@@ -1,11 +1,19 @@
+import * as Ai from "react-icons/ai";
 import * as Bi from "react-icons/bi";
+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,
+  Di,
   Hi,
   Io,
+  Io5,
+  Si,
 };
 
 // Icon is a collection of all icons from react-icons.

package.json

@@ -11,6 +11,8 @@
     "@vercel/analytics": "^0.1.11",
     "axios": "^1.3.4",
     "csstype": "^3.1.1",
+    "daisyui": "^2.51.5",
+    "dayjs": "^1.11.7",
     "highlight.js": "^11.7.0",
     "lodash-es": "^4.17.21",
     "marked": "^4.2.12",

pages/_app.tsx

@@ -2,6 +2,10 @@ import { AppProps } from "next/app";
 import React from "react";
 import { Toaster } from "react-hot-toast";
 import { Analytics } from "@vercel/analytics/react";
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+dayjs.extend(localizedFormat);
+
 import "@/styles/tailwind.css";
 import "@/styles/global.css";
 
@@ -9,7 +13,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <Component {...pageProps} />
-      <Toaster position="top-right" />
+      <Toaster />
       <Analytics />
     </>
   );

pages/about.tsx

@@ -19,7 +19,7 @@ const HomePage: NextPage = () => {
           <div className="grid grid-cols-1 mt-8">
             <Link
               className="flex max-w-xs flex-row justify-center items-center rounded-xl bg-indigo-600 p-4 px-6 text-white shadow-lg hover:opacity-80"
-              href="/chat"
+              href="/"
             >
               <Icon.Io.IoIosChatbubbles className="w-6 h-auto mr-2" />
               <span className="text-xl font-medium">Chat →</span>

pages/api/connection/db_schema.ts

@@ -1,6 +1,6 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import { newConnector } from "@/lib/connectors";
-import { Connection } from "@/types";
+import { Connection, Table } from "@/types";
 
 // POST /api/connection/db_schema
 // req body: { connection: Connection, db: string }
@@ -14,11 +14,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const db = req.body.db as string;
   try {
     const connector = newConnector(connection);
-    const tableStructures: string[] = [];
+    const tableStructures: Table[] = [];
-    const tables = await connector.getTables(db);
+    const rawTableNameList = await connector.getTables(db);
-    for (const table of tables) {
+    for (const tableName of rawTableNameList) {
-      const structure = await connector.getTableStructure(db, table);
+      const structure = await connector.getTableStructure(db, tableName);
-      tableStructures.push(structure);
+      tableStructures.push({
+        name: tableName,
+        structure,
+      });
     }
     res.status(200).json(tableStructures);
   } catch (error) {

pages/index.tsx

@@ -5,6 +5,9 @@ import dynamic from "next/dynamic";
 
 // Use dynamic import to avoid page hydrated.
 // reference: https://github.com/pmndrs/zustand/issues/1145#issuecomment-1316431268
+const ConnectionSidebar = dynamic(() => import("@/components/ConnectionSidebar"), {
+  ssr: false,
+});
 const ChatView = dynamic(() => import("@/components/ChatView"), {
   ssr: false,
 });
@@ -18,7 +21,8 @@ const ChatPage: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="w-full h-full flex flex-col justify-center items-center bg-gray-100">
+      <main className="w-full h-full flex flex-row justify-start items-start">
+        <ConnectionSidebar />
         <ChatView />
       </main>
     </div>

pnpm-lock.yaml

@@ -13,6 +13,8 @@ specifiers:
   autoprefixer: ^10.4.13
   axios: ^1.3.4
   csstype: ^3.1.1
+  daisyui: ^2.51.5
+  dayjs: ^1.11.7
   eslint: 8.20.0
   eslint-config-next: 12.2.3
   highlight.js: ^11.7.0
@@ -37,6 +39,8 @@ dependencies:
   '@vercel/analytics': 0.1.11_react@18.2.0
   axios: 1.3.4
   csstype: 3.1.1
+  daisyui: 2.51.5_j7yt3jd32cwenjqavrrga47yr4
+  dayjs: 1.11.7
   highlight.js: 11.7.0
   lodash-es: 4.17.21
   marked: 4.2.12
@@ -251,12 +255,10 @@ packages:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
-    dev: true
 
   /@nodelib/fs.stat/2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
-    dev: true
 
   /@nodelib/fs.walk/1.2.8:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -264,7 +266,6 @@ packages:
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.15.0
-    dev: true
 
   /@rushstack/eslint-patch/1.2.0:
     resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
@@ -417,18 +418,15 @@ packages:
       acorn: 7.4.1
       acorn-walk: 7.2.0
       xtend: 4.0.2
-    dev: true
 
   /acorn-walk/7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn/7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn/8.8.2:
     resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
@@ -463,11 +461,9 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse/2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -554,7 +550,6 @@ packages:
       picocolors: 1.0.0
       postcss: 8.4.21
       postcss-value-parser: 4.2.0
-    dev: true
 
   /available-typed-arrays/1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
@@ -597,7 +592,6 @@ packages:
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -611,7 +605,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: true
 
   /browserslist/4.21.5:
     resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
@@ -622,7 +615,6 @@ packages:
       electron-to-chromium: 1.4.330
       node-releases: 2.0.10
       update-browserslist-db: 1.0.10_browserslist@4.21.5
-    dev: true
 
   /call-bind/1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
@@ -639,7 +631,6 @@ packages:
   /camelcase-css/2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /caniuse-lite/1.0.30001466:
     resolution: {integrity: sha512-ewtFBSfWjEmxUgNBSZItFSmVtvk9zkwkl1OfRZlKA8slltRN+/C/tuGVrF9styXkN36Yu3+SeJ1qkXxDEyNZ5w==}
@@ -665,7 +656,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /client-only/0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
@@ -676,11 +666,24 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
+
+  /color-string/1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: false
+
+  /color/4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    dev: false
 
   /combined-stream/1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
@@ -702,19 +705,45 @@ packages:
       which: 2.0.2
     dev: true
 
+  /css-selector-tokenizer/0.8.0:
+    resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==}
+    dependencies:
+      cssesc: 3.0.0
+      fastparse: 1.1.2
+    dev: false
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
 
+  /daisyui/2.51.5_j7yt3jd32cwenjqavrrga47yr4:
+    resolution: {integrity: sha512-L05dRw0tasmz2Ha+10LhftEGLq4kaA8vRR/T0wDaXfHwqcgsf81jfXDJ6NlZ63Z7Rl1k3rj7UHs0l0p7CM3aYA==}
+    peerDependencies:
+      autoprefixer: ^10.0.2
+      postcss: ^8.1.6
+    dependencies:
+      autoprefixer: 10.4.14_postcss@8.4.21
+      color: 4.2.3
+      css-selector-tokenizer: 0.8.0
+      postcss: 8.4.21
+      postcss-js: 4.0.1_postcss@8.4.21
+      tailwindcss: 3.2.7_postcss@8.4.21
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /damerau-levenshtein/1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
+  /dayjs/1.11.7:
+    resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
+    dev: false
+
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -774,7 +803,6 @@ packages:
 
   /defined/1.0.1:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
-    dev: true
 
   /delayed-stream/1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
@@ -794,11 +822,9 @@ packages:
       acorn-node: 1.8.2
       defined: 1.0.1
       minimist: 1.2.8
-    dev: true
 
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -809,7 +835,6 @@ packages:
 
   /dlv/1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine/2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -827,7 +852,6 @@ packages:
 
   /electron-to-chromium/1.4.330:
     resolution: {integrity: sha512-PqyefhybrVdjAJ45HaPLtuVaehiSw7C3ya0aad+rvmV53IVyXmYRk3pwIOb2TxTDTnmgQdn46NjMMaysx79/6Q==}
-    dev: true
 
   /emoji-regex/9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@@ -914,7 +938,6 @@ packages:
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
-    dev: true
 
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
@@ -1213,7 +1236,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: true
 
   /fast-json-stable-stringify/2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -1223,11 +1245,14 @@ packages:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
     dev: true
 
+  /fastparse/1.1.2:
+    resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==}
+    dev: false
+
   /fastq/1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
       reusify: 1.0.4
-    dev: true
 
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
@@ -1241,7 +1266,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /flat-cache/3.0.4:
     resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
@@ -1282,7 +1306,6 @@ packages:
 
   /fraction.js/4.2.0:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
-    dev: true
 
   /fs.realpath/1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
@@ -1293,12 +1316,10 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind/1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true
 
   /function.prototype.name/1.1.5:
     resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
@@ -1345,14 +1366,12 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-parent/6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob/7.1.7:
     resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
@@ -1453,7 +1472,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
-    dev: true
 
   /highlight.js/11.7.0:
     resolution: {integrity: sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==}
@@ -1521,6 +1539,10 @@ packages:
       is-typed-array: 1.1.10
     dev: true
 
+  /is-arrayish/0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: false
+
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
@@ -1532,7 +1554,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -1551,7 +1572,6 @@ packages:
     resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -1563,14 +1583,12 @@ packages:
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-glob/4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-map/2.0.2:
     resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
@@ -1591,7 +1609,6 @@ packages:
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-property/1.0.2:
     resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
@@ -1719,7 +1736,6 @@ packages:
   /lilconfig/2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /lodash-es/4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
@@ -1768,7 +1784,6 @@ packages:
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
-    dev: true
 
   /micromatch/4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
@@ -1776,7 +1791,6 @@ packages:
     dependencies:
       braces: 3.0.2
       picomatch: 2.3.1
-    dev: true
 
   /mime-db/1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -1798,7 +1812,6 @@ packages:
 
   /minimist/1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: true
 
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
@@ -1887,17 +1900,14 @@ packages:
 
   /node-releases/2.0.10:
     resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
-    dev: true
 
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range/0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
@@ -1907,7 +1917,6 @@ packages:
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect/1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -2016,7 +2025,6 @@ packages:
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@@ -2029,12 +2037,10 @@ packages:
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /pify/2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /postcss-import/14.1.0_postcss@8.4.21:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
@@ -2046,7 +2052,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
-    dev: true
 
   /postcss-js/4.0.1_postcss@8.4.21:
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -2056,7 +2061,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.21
-    dev: true
 
   /postcss-load-config/3.1.4_postcss@8.4.21:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -2073,7 +2077,6 @@ packages:
       lilconfig: 2.1.0
       postcss: 8.4.21
       yaml: 1.10.2
-    dev: true
 
   /postcss-nested/6.0.0_postcss@8.4.21:
     resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
@@ -2083,7 +2086,6 @@ packages:
     dependencies:
       postcss: 8.4.21
       postcss-selector-parser: 6.0.11
-    dev: true
 
   /postcss-selector-parser/6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@@ -2099,11 +2101,9 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-value-parser/4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss/8.4.14:
     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
@@ -2121,7 +2121,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /prelude-ls/1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -2147,12 +2146,10 @@ packages:
 
   /queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
 
   /quick-lru/5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
@@ -2215,14 +2212,12 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /readdirp/3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /regenerator-runtime/0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
@@ -2253,7 +2248,6 @@ packages:
       is-core-module: 2.11.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /resolve/2.0.0-next.4:
     resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
@@ -2267,7 +2261,6 @@ packages:
   /reusify/1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true
 
   /rimraf/3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
@@ -2280,7 +2273,6 @@ packages:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
-    dev: true
 
   /safe-regex-test/1.0.0:
     resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
@@ -2337,6 +2329,12 @@ packages:
       object-inspect: 1.12.3
     dev: true
 
+  /simple-swizzle/0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
   /slash/3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -2440,7 +2438,6 @@ packages:
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /tailwindcss/3.2.7_postcss@8.4.21:
     resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==}
@@ -2474,7 +2471,6 @@ packages:
       resolve: 1.22.1
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /text-table/0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
@@ -2485,7 +2481,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /tsconfig-paths/3.14.2:
     resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
@@ -2558,7 +2553,6 @@ packages:
       browserslist: 4.21.5
       escalade: 3.1.1
       picocolors: 1.0.0
-    dev: true
 
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -2611,7 +2605,6 @@ packages:
 
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /uuid/9.0.0:
     resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
@@ -2673,7 +2666,6 @@ packages:
   /xtend/4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
-    dev: true
 
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
@@ -2682,7 +2674,6 @@ packages:
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /zustand/4.3.6_react@18.2.0:
     resolution: {integrity: sha512-6J5zDxjxLE+yukC2XZWf/IyWVKnXT9b9HUv09VJ/bwGCpKNcaTqp7Ws28Xr8jnbvnZcdRaidztAPsXFBIqufiw==}

store/assistant.ts

@@ -17,9 +17,10 @@ export const getAssistantById = (id: Id) => {
 };
 
 // getPromptOfAssistant define the special prompt for each assistant.
-export const getPromptOfAssistant = (assistant: User) => {
+export const getPromptGeneratorOfAssistant = (assistant: User) => {
   if (assistant.id === "sql-assistant") {
-    return `Remember that you are an expert in SQL. And you know everything about databases. You will answer some questions about databases and SQL.`;
+    return (schema: string) =>
+      `Remember that you are an expert in SQL. And you know everything about databases. You will answer some questions about databases with a database schema like "${schema}".`;
   }
-  return "";
+  return () => "";
 };

store/chat.ts

@@ -1,35 +1,34 @@
+import dayjs from "dayjs";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { Chat, UNKNOWN_ID, User } from "@/types";
+import { Chat, Id } from "@/types";
 import { generateUUID } from "@/utils";
 
 const getDefaultChat = (): Chat => {
   return {
     id: generateUUID(),
-    connectionId: UNKNOWN_ID,
-    databaseName: "",
     assistantId: "sql-assistant",
-    title: "default chat",
+    title: "SQL Chat " + dayjs().format("LTS"),
     createdAt: Date.now(),
   };
 };
 
 interface ChatState {
   chatList: Chat[];
-  currentChat: Chat;
+  currentChat?: Chat;
-  createChat: (user: User) => void;
+  createChat: (connectionId?: Id, databaseName?: string) => void;
   setCurrentChat: (chat: Chat) => void;
 }
 
 export const useChatStore = create<ChatState>()(
   persist(
     (set) => ({
-      chatList: [getDefaultChat()],
+      chatList: [],
-      currentChat: getDefaultChat(),
+      createChat: (connectionId?: Id, databaseName?: string) => {
-      createChat: (assistant: User) => {
         const chat: Chat = {
           ...getDefaultChat(),
-          assistantId: assistant.id,
+          connectionId,
+          databaseName,
         };
         set((state) => ({
           chatList: [...state.chatList, chat],

store/connection.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { Connection, Database, Engine, UNKNOWN_ID } from "@/types";
+import { Connection, Database, Engine, Table, UNKNOWN_ID } from "@/types";
 import { generateUUID } from "@/utils";
 import axios from "axios";
 import { uniqBy } from "lodash-es";
@@ -27,12 +27,13 @@ interface ConnectionState {
   createConnection: (connection: Connection) => void;
   setCurrentConnectionCtx: (connectionCtx: ConnectionContext) => void;
   getOrFetchDatabaseList: (connection: Connection) => Promise<Database[]>;
+  getOrFetchDatabaseSchema: (database: Database) => Promise<Table[]>;
 }
 
 export const useConnectionStore = create<ConnectionState>()(
   persist(
     (set, get) => ({
-      connectionList: [connectionSampleData],
+      connectionList: [],
       databaseList: [],
       createConnection: (connection: Connection) => {
         set((state) => ({
@@ -74,6 +75,19 @@ export const useConnectionStore = create<ConnectionState>()(
         }));
         return databaseList.filter((database) => database.connectionId === connection.id);
       },
+      getOrFetchDatabaseSchema: async (database: Database) => {
+        const state = get();
+        const connection = state.connectionList.find((connection) => connection.id === database.connectionId);
+        if (!connection) {
+          return [];
+        }
+
+        const { data } = await axios.post<Table[]>("/api/connection/db_schema", {
+          connection,
+          db: database.name,
+        });
+        return data;
+      },
     }),
     {
       name: "connection-storage",

store/index.ts

@@ -1,4 +1,5 @@
 export * from "./user";
 export * from "./assistant";
+export * from "./connection";
 export * from "./chat";
 export * from "./message";

tailwind.config.js

@@ -8,5 +8,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
 };

types/chat.ts

@@ -2,8 +2,8 @@ import { Id, Timestamp } from "./";
 
 export interface Chat {
   id: string;
-  connectionId: Id;
+  connectionId?: Id;
-  databaseName: string;
+  databaseName?: string;
   assistantId: Id;
   title: string;
   createdAt: Timestamp;