chore: update request error message

components/ChatView/index.tsx

@@ -93,15 +93,19 @@ const ChatView = () => {
     let prompt = "";
     let tokens = 0;
     if (connectionStore.currentConnectionCtx?.database) {
-      const tables = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database);
-      const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentChat.assistantId)!);
       let schema = "";
-      for (const table of tables) {
-        if (tokens < MAX_TOKENS / 2) {
-          tokens += countTextTokens(schema + table.structure);
-          schema += table.structure;
+      try {
+        const tables = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database);
+        for (const table of tables) {
+          if (tokens < MAX_TOKENS / 2) {
+            tokens += countTextTokens(schema + table.structure);
+            schema += table.structure;
+          }
         }
+      } catch (error: any) {
+        toast.error(error.message);
       }
+      const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentChat.assistantId)!);
       prompt = promptGenerator(schema);
     }
     let formatedMessageList = [];

components/CreateConnectionModal.tsx

@@ -2,8 +2,8 @@ import { cloneDeep, head } from "lodash-es";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "react-hot-toast";
-import { testConnection, useConnectionStore } from "@/store";
-import { Connection, Engine } from "@/types";
+import { useConnectionStore } from "@/store";
+import { Connection, Engine, ResponseObject } from "@/types";
 import Icon from "./Icon";
 import DataStorageBanner from "./DataStorageBanner";
 import ActionConfirmModal from "./ActionConfirmModal";
@@ -32,6 +32,7 @@ const CreateConnectionModal = (props: Props) => {
   const [isRequesting, setIsRequesting] = useState(false);
   const showDatabaseField = connection.engineType === Engine.PostgreSQL;
   const isEditing = editConnection !== undefined;
+  const allowSave = connection.host !== "" && connection.username !== "";
 
   useEffect(() => {
     if (show) {
@@ -60,11 +61,25 @@ const CreateConnectionModal = (props: Props) => {
     }
 
     try {
-      await testConnection(tempConnection);
+      const response = await fetch("/api/connection/test", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          connection: tempConnection,
+        }),
+      });
+      const result = (await response.json()) as ResponseObject<boolean>;
+      if (result.message) {
+        toast.error(result.message);
+        return;
+      }
     } catch (error) {
+      console.error(error);
+      toast.error("Failed to test connection");
+    } finally {
       setIsRequesting(false);
-      toast.error("Failed to test connection, please check your connection configuration");
-      return;
     }
 
     try {
@@ -187,7 +202,7 @@ const CreateConnectionModal = (props: Props) => {
               <button className="btn btn-outline" onClick={close}>
                 Close
               </button>
-              <button className="btn" disabled={isRequesting} onClick={handleCreateConnection}>
+              <button className="btn" disabled={isRequesting || !allowSave} onClick={handleCreateConnection}>
                 {isRequesting && <Icon.BiLoaderAlt className="w-4 h-auto animate-spin mr-1" />}
                 Save
               </button>

components/QueryDrawer.tsx

@@ -5,6 +5,7 @@ import DataTable from "react-data-table-component";
 import { toast } from "react-hot-toast";
 import TextareaAutosize from "react-textarea-autosize";
 import { useQueryStore } from "@/store";
+import { ResponseObject } from "@/types";
 import Icon from "./Icon";
 import EngineIcon from "./EngineIcon";
 
@@ -63,12 +64,17 @@ const QueryDrawer = () => {
           statement,
         }),
       });
-      const result = await response.json();
-      setIsLoading(false);
-      setRawResults(result);
+      const result = (await response.json()) as ResponseObject<RawQueryResult[]>;
+      if (result.message) {
+        toast.error(result.message);
+      } else {
+        setRawResults(result.data);
+      }
     } catch (error) {
       console.error(error);
       toast.error("Failed to execute statement");
+    } finally {
+      setIsLoading(false);
     }
   };