feat: add a table select to choose a table as prompt (#74)

src/components/ConnectionSidebar.tsx

@@ -1,7 +1,14 @@
 import { Drawer } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useConnectionStore, useLayoutStore, ResponsiveWidth } from "@/store";
+import {
+  useConnectionStore,
+  useConversationStore,
+  useLayoutStore,
+  ResponsiveWidth,
+} from "@/store";
+import { Table } from "@/types";
+import useLoading from "@/hooks/useLoading";
 import Link from "next/link";
 import Select from "./kit/Select";
 import Tooltip from "./kit/Tooltip";
@@ -16,12 +23,15 @@ const ConnectionSidebar = () => {
   const { t } = useTranslation();
   const layoutStore = useLayoutStore();
   const connectionStore = useConnectionStore();
+  const conversationStore = useConversationStore();
   const [isRequestingDatabase, setIsRequestingDatabase] =
     useState<boolean>(false);
   const currentConnectionCtx = connectionStore.currentConnectionCtx;
   const databaseList = connectionStore.databaseList.filter(
     (database) => database.connectionId === currentConnectionCtx?.connection.id
   );
+  const [tableList, updateTableList] = useState<Table[]>([]);
+  const tableSchemaLoadingState = useLoading();
 
   useEffect(() => {
     const handleWindowResize = () => {
@@ -49,12 +59,40 @@ const ConnectionSidebar = () => {
         .getOrFetchDatabaseList(currentConnectionCtx.connection)
         .finally(() => {
           setIsRequestingDatabase(false);
+          const database = databaseList.find(
+            (database) =>
+              database.name ===
+              useConnectionStore.getState().currentConnectionCtx?.database?.name
+          );
+          if (database) {
+            tableSchemaLoadingState.setLoading();
+            connectionStore.getOrFetchDatabaseSchema(database).then(() => {
+              tableSchemaLoadingState.setFinish();
+            });
+          }
         });
     } else {
       setIsRequestingDatabase(false);
     }
   }, [currentConnectionCtx?.connection]);
 
+  useEffect(() => {
+    const tableList =
+      connectionStore.databaseList.find(
+        (database) =>
+          database.connectionId === currentConnectionCtx?.connection.id &&
+          database.name === currentConnectionCtx?.database?.name
+      )?.tableList || [];
+
+    updateTableList([
+      {
+        name: "",
+        structure: "",
+      } as Table,
+      ...tableList,
+    ]);
+  }, [connectionStore, currentConnectionCtx]);
+
   const handleDatabaseNameSelect = async (databaseName: string) => {
     if (!currentConnectionCtx?.connection) {
       return;
@@ -70,8 +108,17 @@ const ConnectionSidebar = () => {
       connection: currentConnectionCtx.connection,
       database: database,
     });
+    if (database) {
+      tableSchemaLoadingState.setLoading();
+      connectionStore.getOrFetchDatabaseSchema(database).then(() => {
+        tableSchemaLoadingState.setFinish();
+      });
+    }
   };
 
+  const handleTableNameSelect = async (tableName: string) => {
+    conversationStore.updateTableName(tableName);
+  };
   return (
     <>
       <Drawer
@@ -126,6 +173,38 @@ const ConnectionSidebar = () => {
                   />
                 </div>
               )}
+              {tableSchemaLoadingState.isLoading ? (
+                <div className="w-full h-12 flex flex-row justify-start items-center px-4 sticky top-0 border z-1 mb-4 mt-2 rounded-lg text-sm text-gray-600 dark:text-gray-400">
+                  <Icon.BiLoaderAlt className="w-4 h-auto animate-spin mr-1" />{" "}
+                  {t("common.loading")}
+                </div>
+              ) : (
+                tableList.length > 0 && (
+                  <div className="w-full sticky top-0 z-1 my-4">
+                    <Select
+                      className="w-full px-4 py-3 !text-base"
+                      value={
+                        conversationStore.getConversationById(
+                          conversationStore.currentConversationId
+                        )?.tableName || ""
+                      }
+                      itemList={tableList.map((table) => {
+                        return {
+                          label:
+                            table.name === ""
+                              ? t("connection.all-tables")
+                              : table.name,
+                          value: table.name,
+                        };
+                      })}
+                      onValueChange={(tableName) =>
+                        handleTableNameSelect(tableName)
+                      }
+                      placeholder={t("connection.select-table") || ""}
+                    />
+                  </div>
+                )
+              )}
               <ConversationList />
             </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">