From 9053a4229378b7f8b7fcbdba99c0ffae20f47c9e Mon Sep 17 00:00:00 2001 From: boojack Date: Fri, 19 May 2023 20:48:08 +0800 Subject: [PATCH] chore: add schema drawer (#100) --- src/components/ConversationView/Header.tsx | 64 ++++++++++++---------- src/components/ConversationView/index.tsx | 2 +- src/components/SchemaDrawer.tsx | 28 ++++++++++ 3 files changed, 65 insertions(+), 29 deletions(-) create mode 100644 src/components/SchemaDrawer.tsx diff --git a/src/components/ConversationView/Header.tsx b/src/components/ConversationView/Header.tsx index 9692b0e..8b190f5 100644 --- a/src/components/ConversationView/Header.tsx +++ b/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(false); const currentConversationId = conversationStore.currentConversationId; const title = conversationStore.getConversationById(currentConversationId)?.title || "SQL Chat"; @@ -23,32 +24,39 @@ const Header = (props: Props) => { }, [title]); return ( -
-
- - {title} - + <> +
+
+ + {title} + +
+ {title} +
+ + + + +
- {title} -
- - - -
-
+ + {hasFeature("debug") && showSchemaDrawer && setShowSchemaDrawer(false)} />} + ); }; diff --git a/src/components/ConversationView/index.tsx b/src/components/ConversationView/index.tsx index 0f8d57d..e2e5e9d 100644 --- a/src/components/ConversationView/index.tsx +++ b/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 diff --git a/src/components/SchemaDrawer.tsx b/src/components/SchemaDrawer.tsx new file mode 100644 index 0000000..c3f2400 --- /dev/null +++ b/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 ( + +
+ +

Current conversation related schema

+
+
+ ); +}; + +export default SchemaDrawer;