opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-28 10:33:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: display token in the prompt drawer

Browse Source
This commit is contained in:
Tianzhou Chen
2023-06-07 23:56:19 +08:00
parent 3b276ce9a6
commit a62b5d803a
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/SchemaDrawer.tsx
View File

@ -1,9 +1,9 @@
import { encode } from "@nem035/gpt-3-encoder";
import { Drawer } from "@mui/material"; import { Drawer } from "@mui/material";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Icon from "./Icon"; import Icon from "./Icon";
import { getAssistantById, getPromptGeneratorOfAssistant, useConnectionStore, useConversationStore, useSettingStore } from "@/store"; import { getAssistantById, getPromptGeneratorOfAssistant, useConnectionStore, useConversationStore, useSettingStore } from "@/store";
import { getModel, generateDbPromptFromContext } from "@/utils"; import { getModel, generateDbPromptFromContext } from "@/utils";
import toast from "react-hot-toast";
import { CodeBlock } from "./CodeBlock"; import { CodeBlock } from "./CodeBlock";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -16,8 +16,8 @@ const SchemaDrawer = (props: Props) => {
const conversationStore = useConversationStore(); const conversationStore = useConversationStore();
const connectionStore = useConnectionStore(); const connectionStore = useConnectionStore();
const settingStore = useSettingStore(); const settingStore = useSettingStore();
const currentConversation = conversationStore.getConversationById(conversationStore.currentConversationId); const currentConversation = conversationStore.getConversationById(conversationStore.currentConversationId);
const maxToken = getModel(settingStore.setting.openAIApiConfig?.model || "").max_token;
const [prompt, setPrompt] = useState<string>(""); const [prompt, setPrompt] = useState<string>("");
const getPrompt = async () => { const getPrompt = async () => {
@ -25,7 +25,6 @@ const SchemaDrawer = (props: Props) => {
const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentConversation.assistantId)!); const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentConversation.assistantId)!);
let dbPrompt = promptGenerator(); let dbPrompt = promptGenerator();
if (connectionStore.currentConnectionCtx?.database) { if (connectionStore.currentConnectionCtx?.database) {
const maxToken = getModel(settingStore.setting.openAIApiConfig?.model || "").max_token;
const schemaList = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database); const schemaList = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database);
dbPrompt = generateDbPromptFromContext( dbPrompt = generateDbPromptFromContext(
promptGenerator, promptGenerator,
@ -49,11 +48,16 @@ const SchemaDrawer = (props: Props) => {
const close = () => props.close(); const close = () => props.close();
return ( return (
<Drawer open={true} anchor="right" className="w-full" onClose={close}> <Drawer open={true} anchor="right" className="w-full" onClose={close}>
<div className="dark:text-gray-300 w-screen sm:w-[calc(50vw)] max-w-full flex flex-col justify-start items-start p-4"> <div className="dark:text-gray-300 w-screen sm:w-[calc(75vw)] max-w-full flex flex-col p-4">
<button className="w-8 h-8 p-1 bg-zinc-600 text-gray-100 rounded-full hover:opacity-80" onClick={close}> <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" /> <Icon.IoMdClose className="w-full h-auto" />
</button> </button>
<div className="flex justify-between items-center">
<h3 className="font-bold text-2xl mt-4">{t("prompt.current-conversation")}</h3> <h3 className="font-bold text-2xl mt-4">{t("prompt.current-conversation")}</h3>
<div className="text-base mt-4">
{t("connection.total-token")} {encode(prompt).length}/{maxToken}
</div>
</div>
<div> <div>
<CodeBlock language="Prompt" value={prompt} messageId={currentConversation?.id || ""} wrapLongLines={true} /> <CodeBlock language="Prompt" value={prompt} messageId={currentConversation?.id || ""} wrapLongLines={true} />
</div> </div>