chore: add schema drawer (#100)

src/components/ConversationView/Header.tsx

@@ -1,10 +1,10 @@
-import { useEffect } from "react";
-
+import { useEffect, useState } from "react";
 import { useConversationStore, useLayoutStore } from "@/store";
 import useDarkMode from "@/hooks/useDarkmode";
-
+import { hasFeature } from "@/utils";
 import Icon from "../Icon";
 import GitHubStarBadge from "../GitHubStarBadge";
+import SchemaDrawer from "../SchemaDrawer";
 
 interface Props {
   className?: string;
@@ -15,6 +15,7 @@ const Header = (props: Props) => {
   const layoutStore = useLayoutStore();
   const conversationStore = useConversationStore();
   const isDarkMode = useDarkMode();
+  const [showSchemaDrawer, setShowSchemaDrawer] = useState<boolean>(false);
   const currentConversationId = conversationStore.currentConversationId;
   const title = conversationStore.getConversationById(currentConversationId)?.title || "SQL Chat";
 
@@ -23,32 +24,39 @@ const Header = (props: Props) => {
   }, [title]);
 
   return (
-    <div
-      className={`${
-        className || ""
-      } w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-1 border-b dark:border-zinc-700 z-1`}
-    >
-      <div className="ml-2 flex justify-start items-center">
-        <button
-          className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-700"
-          onClick={() => layoutStore.toggleSidebar()}
-        >
-          <Icon.IoIosMenu className="text-gray-600 w-full h-auto" />
-        </button>
-        <span className="w-auto text-left block lg:hidden">{title}</span>
-        <GitHubStarBadge className="hidden lg:flex ml-2" />
+    <>
+      <div
+        className={`${
+          className || ""
+        } w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-1 border-b dark:border-zinc-700 z-1`}
+      >
+        <div className="ml-2 flex justify-start items-center">
+          <button
+            className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-700"
+            onClick={() => layoutStore.toggleSidebar()}
+          >
+            <Icon.IoIosMenu className="text-gray-600 w-full h-auto" />
+          </button>
+          <span className="w-auto text-left block lg:hidden">{title}</span>
+          <GitHubStarBadge className="hidden lg:flex ml-2" />
+        </div>
+        <span className="w-auto text-center h-8 p-1 hidden lg:block">{title}</span>
+        <div className="mr-2 sm:mr-3 relative flex flex-row justify-end items-center">
+          <a
+            href="https://www.bytebase.com?source=sqlchat"
+            className="hidden sm:flex flex-row justify-center items-center h-10 px-3 py-1 rounded-md whitespace-nowrap hover:bg-gray-100 dark:hover:bg-zinc-700"
+            target="_blank"
+          >
+            <img className="h-5 sm:h-6 w-auto" src={isDarkMode ? "/craft-by-bytebase-dark-mode.webp" : "/craft-by-bytebase.webp"} alt="" />
+          </a>
+          <button className="p-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-700">
+            <Icon.FiSettings className="w-5 h-auto" onClick={() => setShowSchemaDrawer(true)} />
+          </button>
+        </div>
       </div>
-      <span className="w-auto text-center h-8 p-1 hidden lg:block">{title}</span>
-      <div className="mr-2 sm:mr-3 relative flex flex-row justify-end items-center">
-        <a
-          href="https://www.bytebase.com?source=sqlchat"
-          className="hidden sm:flex flex-row justify-center items-center h-10 px-3 py-1 rounded-md whitespace-nowrap hover:bg-gray-100 dark:hover:bg-zinc-700"
-          target="_blank"
-        >
-          <img className="h-5 sm:h-6 w-auto" src={isDarkMode ? "/craft-by-bytebase-dark-mode.webp" : "/craft-by-bytebase.webp"} alt="" />
-        </a>
-      </div>
-    </div>
+
+      {hasFeature("debug") && showSchemaDrawer && <SchemaDrawer close={() => setShowSchemaDrawer(false)} />}
+    </>
   );
 };
 

src/components/ConversationView/index.tsx

@@ -15,13 +15,13 @@ import {
 } from "@/store";
 import { Conversation, CreatorRole, Message } from "@/types";
 import { countTextTokens, generateUUID } from "@/utils";
+import getEventEmitter from "@/utils/event-emitter";
 import Header from "./Header";
 import EmptyView from "../EmptyView";
 import MessageView from "./MessageView";
 import ClearConversationButton from "../ClearConversationButton";
 import MessageTextarea from "./MessageTextarea";
 import DataStorageBanner from "../DataStorageBanner";
-import getEventEmitter from "@/utils/event-emitter";
 
 // The maximum number of tokens that can be sent to the OpenAI API.
 // reference: https://platform.openai.com/docs/api-reference/completions/create#completions/create-max_tokens

src/components/SchemaDrawer.tsx

@@ -0,0 +1,28 @@
+import { Drawer } from "@mui/material";
+import { useEffect } from "react";
+import Icon from "./Icon";
+
+interface Props {
+  close: () => void;
+}
+
+const SchemaDrawer = (props: Props) => {
+  useEffect(() => {
+    // TODO: initial state with current conversation.
+  }, []);
+
+  const close = () => props.close();
+
+  return (
+    <Drawer open={true} anchor="right" className="w-full" onClose={close}>
+      <div className="dark:text-gray-300 w-screen sm:w-[calc(40vw)] max-w-full flex flex-col justify-start items-start p-4">
+        <button className="w-8 h-8 p-1 bg-zinc-600 text-gray-100 rounded-full hover:opacity-80" onClick={close}>
+          <Icon.IoMdClose className="w-full h-auto" />
+        </button>
+        <h3 className="font-bold text-2xl mt-4">Current conversation related schema</h3>
+      </div>
+    </Drawer>
+  );
+};
+
+export default SchemaDrawer;