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

chore: optimize token UX (#117)

Browse Source 
* chore: replace supabase with neon as the sample database

consolidate

* chore: optimize token UX
This commit is contained in:
Tianzhou (天舟)
2023-05-31 18:51:42 +08:00
committed by GitHub
parent b4b729812d
commit eb8dad700c
5 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ConnectionSidebar.tsx
View File

@ -9,7 +9,7 @@ import Icon from "./Icon";
import DarkModeSwitch from "./DarkModeSwitch";
import ConnectionList from "./Sidebar/ConnectionList";
import QuotaView from "./QuotaView";
import { countTextTokens, hasFeature } from "../utils";
import { countTextTokens, getModel, hasFeature } from "../utils";
import SettingAvatarIcon from "./SettingAvatarIcon";
import Checkbox from "./kit/Checkbox";
@ -33,6 +33,7 @@ const ConnectionSidebar = () => {
conversationStore.getConversationById(conversationStore.currentConversationId)?.selectedSchemaName || "";
const tableSchemaLoadingState = useLoading();
const currentConversation = conversationStore.getConversationById(conversationStore.currentConversationId);
const maxToken = getModel(settingStore.setting.openAIApiConfig?.model || "").max_token;
const [totalToken, setTotalToken] = useState<number>(0);
useEffect(() => {
updateHasSchemaProperty(
@ -193,7 +194,7 @@ const ConnectionSidebar = () => {
{databaseList.length > 0 && (
<div className="w-full sticky top-0 z-1 my-4">
<Select
className="w-full px-4 py-3 !text-base"
className="w-full px-4 py-3 !text-base mb-2"
value={currentConnectionCtx?.database?.name}
itemList={databaseList.map((database) => {
return {
@ -208,7 +209,7 @@ const ConnectionSidebar = () => {
)}
{hasSchemaProperty && schemaList.length > 0 && (
<Select
className="w-full px-4 py-3 !text-base"
className="w-full px-4 py-3 !text-base mb-2"
value={selectedSchemaName}
itemList={schemaList.map((schema) => {
return {
@ -243,10 +244,15 @@ const ConnectionSidebar = () => {
))}
</div>
<div className="sticky bottom-0 w-full flex flex-col justify-center bg-gray-100 dark:bg-zinc-700 backdrop-blur bg-opacity-60 pb-4 py-2">
<div className="text-black dark:text-gray-300">
{t("connection.total-token")} {totalToken}
</div>
<div className="sticky bottom-0 w-full flex flex-col justify-center bg-gray-100 dark:bg-zinc-700 backdrop-blur bg-opacity-60 pb-4 py-2">
{currentConnectionCtx && (
<div className="flex justify-between text-sm text-gray-700 dark:text-gray-300 mb-2">
<div>{t("connection.total-token")}</div>
<div>
{totalToken}/{maxToken}
</div>
</div>
)}
{!settingStore.setting.openAIApiConfig?.key && hasFeature("quota") && (
<div className="mb-4">
<QuotaView />

4
src/components/kit/Checkbox.tsx
View File

@ -11,7 +11,7 @@ const Checkbox = (props: CheckboxProps & { children?: ReactNode }) => {
const { value, label, onValueChange, children } = props;
return (
<form>
<div className="flex justify-between items-center px-3 py-2">
<div className="flex justify-between items-center px-1">
<CheckboxUI.Root
checked={value}
onCheckedChange={(value: boolean) => onValueChange(label, value)}
@ -22,7 +22,7 @@ const Checkbox = (props: CheckboxProps & { children?: ReactNode }) => {
<CheckIcon />
</CheckboxUI.Indicator>
</CheckboxUI.Root>
<label className="Label grow m-auto px-3 py-2 cursor-pointer truncate text-black dark:text-gray-300" htmlFor={label}>
<label className="Label grow m-auto px-2 py-1 cursor-pointer truncate text-black dark:text-gray-300" htmlFor={label}>
{label}
</label>
{children}