From 5e4dd8acf74954d375eed9aaf2412fb7cf212723 Mon Sep 17 00:00:00 2001
From: tianzhou <t@bytebase.com>
Date: Wed, 31 May 2023 18:01:38 +0800
Subject: [PATCH 1/2] chore: replace supabase with neon as the sample database

consolidate
---
 src/store/connection.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/store/connection.ts b/src/store/connection.ts
index fb72d7fb..7bd54d45 100644
--- a/src/store/connection.ts
+++ b/src/store/connection.ts
@@ -15,10 +15,10 @@ const samplePGConnection: Connection = {
   id: "sample-pg",
   title: "Sample PostgreSQL",
   engineType: Engine.PostgreSQL,
-  host: "db.swxkyqvcefxcjecynews.supabase.co",
+  host: "ep-throbbing-thunder-042250.us-west-2.aws.neon.tech",
   port: "5432",
-  username: "readonly_user",
-  password: "sqlchat",
+  username: "sqlchat",
+  password: "h8yik1pvTQIs",
   database: "sample-employee",
 };
 

From 4a7243524b9724ce7f25f60ee3f5f0e97f9f06ee Mon Sep 17 00:00:00 2001
From: tianzhou <t@bytebase.com>
Date: Wed, 31 May 2023 18:33:57 +0800
Subject: [PATCH 2/2] 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 +-
 src/store/connection.ts              |  4 ++--
 6 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/ConnectionSidebar.tsx b/src/components/ConnectionSidebar.tsx
index b7aca7fc..e3da7398 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 d292b8e6..f64abe63 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 3283967c..93cad320 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 af638691..97fbde4c 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 7ad38cc3..8b188e39 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": "标题",
diff --git a/src/store/connection.ts b/src/store/connection.ts
index 7bd54d45..8ad1271e 100644
--- a/src/store/connection.ts
+++ b/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",
-  password: "h8yik1pvTQIs",
+  username: "sqlchat_readonly",
+  password: "U5rI8tJMiKWp",
   database: "sample-employee",
 };