From eb8dad700c2733177a2f84e1e8352ec3dd595ab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tianzhou=20=28=E5=A4=A9=E8=88=9F=29?= <t@bytebase.com>
Date: Wed, 31 May 2023 18:51:42 +0800
Subject: [PATCH] chore: optimize token UX (#117)

* chore: replace supabase with neon as the sample database

consolidate

* chore: optimize token UX
---
 src/components/ConnectionSidebar.tsx | 20 +++++++++++++-------
 src/components/kit/Checkbox.tsx      |  4 ++--
 src/locales/en.json                  |  2 +-
 src/locales/es.json                  |  2 +-
 src/locales/zh.json                  |  2 +-
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/ConnectionSidebar.tsx b/src/components/ConnectionSidebar.tsx
index b7aca7f..e3da739 100644
--- a/src/components/ConnectionSidebar.tsx
+++ b/src/components/ConnectionSidebar.tsx
@@ -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 />
diff --git a/src/components/kit/Checkbox.tsx b/src/components/kit/Checkbox.tsx
index d292b8e..f64abe6 100644
--- a/src/components/kit/Checkbox.tsx
+++ b/src/components/kit/Checkbox.tsx
@@ -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}
diff --git a/src/locales/en.json b/src/locales/en.json
index 3283967..93cad32 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -32,7 +32,7 @@
     "select-table": "Select your table",
     "select-schema": "Select your Schema",
     "all-tables": "All Tables",
-    "total-token": "Total Tokens",
+    "total-token": "Tokens",
     "database-type": "Database type",
     "title": "Title",
     "host": "Host",
diff --git a/src/locales/es.json b/src/locales/es.json
index af63869..97fbde4 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -38,7 +38,7 @@
     "password": "Contraseña",
     "empty-select": "selección clara",
     "select-all": "seleccionar todo",
-    "total-token": "Total Tokens",
+    "total-token": "Tokens",
     "tidb-serverless-ssl-hint": "Se requiere SSL y ya está configurado"
   },
   "assistant": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 7ad38cc..8b188e3 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -33,7 +33,7 @@
     "select-schema": "选择 Schema",
     "all-tables": "全部表",
     "select-all": "选择全部",
-    "total-token": "总计 Token",
+    "total-token": "Token",
     "empty-select": "清空选择",
     "database-type": "数据库类型",
     "title": "标题",