chore: optimize token UX

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="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">
+              {currentConnectionCtx && (
-                {t("connection.total-token")} {totalToken}
+                <div className="flex justify-between text-sm text-gray-700 dark:text-gray-300 mb-2">
-              </div>
+                  <div>{t("connection.total-token")}</div>
+                  <div>
+                    {totalToken}/{maxToken}
+                  </div>
+                </div>
+              )}
               {!settingStore.setting.openAIApiConfig?.key && hasFeature("quota") && (
                 <div className="mb-4">
                   <QuotaView />

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}

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",

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": {

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": "标题",

src/store/connection.ts

@@ -17,8 +17,8 @@ const samplePGConnection: Connection = {
   engineType: Engine.PostgreSQL,
   host: "ep-throbbing-thunder-042250.us-west-2.aws.neon.tech",
   port: "5432",
-  username: "sqlchat",
+  username: "sqlchat_readonly",
-  password: "h8yik1pvTQIs",
+  password: "U5rI8tJMiKWp",
   database: "sample-employee",
 };