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,6 +24,7 @@ const Header = (props: Props) => {
   }, [title]);
 
   return (
+    <>
       <div
         className={`${
           className || ""
@@ -47,8 +49,14 @@ const Header = (props: Props) => {
           >
             <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>
+
+      {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;