feat: add connect services (#111)

* feat: add connect services * chore: adjust auth and userInfo * chore: add responsiveness to auth and userInfo * chore: add dark css * chore: handle /, to join the baseURL and url. * chore: use http:// or https:// rather http * chore: handle /, to join the baseURL and url. * chore: active current service * chore: connect * chore: data source & connect data * feat: add handleKeyDown open settings * chore: settings name
infinilabs · Jan 25, 2025 · fbfb980 · fbfb980
1 parent 6a272bd
commit fbfb980
Show file tree

Hide file tree

Showing 30 changed files with 940 additions and 326 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "dotenv": "^16.4.7",
     "i18next": "^23.16.2",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.461.0",
     "mermaid": "^11.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -55,6 +55,7 @@
     "@types/react-katex": "^3.0.4",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
+    "immer": "^10.1.1",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/api/tauriFetchClient.ts b/src/api/tauriFetchClient.ts
@@ -47,14 +47,20 @@ export const tauriFetch = async <T = any>({
     const auth = authStore?.state?.auth
     console.log("auth", auth)
 
+    if (baseURL.endsWith("/")) {
+      baseURL = baseURL.slice(0, -1);
+    }
 
-    url = baseURL + url;
+    if (!url.startsWith("http://") && !url.startsWith("https://")) {
+      // If not, prepend the defaultPrefix
+      url = baseURL + url;
+    }
 
     if (method !== "GET") {
       headers["Content-Type"] = "application/json";
     }
 
-    headers["X-API-TOKEN"] = headers["X-API-TOKEN"] || auth?.token || "";
+    headers["X-API-TOKEN"] = headers["X-API-TOKEN"] || (auth && auth[endpoint_http]?.token) || "";
 
     // debug API
     const requestInfo = {

diff --git a/src/assets/images/coco-cloud-banner.jpeg b/src/assets/images/coco-cloud-banner.jpeg
diff --git a/src/components/AppAI/DropdownList.tsx b/src/components/AppAI/DropdownList.tsx
@@ -16,6 +16,7 @@ import source_default_img from "@/assets/images/source_default.png";
 import source_default_dark_img from "@/assets/images/source_default_dark.png";
 import file_efault_img from "@/assets/images/file_efault.png";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useConnectStore } from "@/stores/connectStore";
 
 type ISearchData = Record<string, any[]>;
 
@@ -46,8 +47,9 @@ function DropdownList({
 
   const { theme } = useTheme();
 
-  const connector_data = useAppStore((state) => state.connector_data);
-  const datasourceData = useAppStore((state) => state.datasourceData);
+  const connector_data = useConnectStore((state) => state.connector_data);
+  const datasourceData = useConnectStore((state) => state.datasourceData);
+
   const endpoint_http = useAppStore((state) => state.endpoint_http);
   const setSourceData = useSearchStore((state) => state.setSourceData);
 
@@ -163,13 +165,13 @@ function DropdownList({
   function findConnectorIcon(item: any) {
     const id = item?._source?.source?.id || "";
 
-    const result_source = datasourceData.find(
+    const result_source = datasourceData[endpoint_http]?.find(
       (data: any) => data._source.id === id
     );
 
     const connector_id = result_source?._source?.connector?.id;
 
-    const result_connector = connector_data.find(
+    const result_connector = connector_data[endpoint_http]?.find(
       (data: any) => data._source.id === connector_id
     );
 
@@ -184,7 +186,7 @@ function DropdownList({
       return theme === "dark" ? source_default_dark_img : source_default_img;
     }
 
-    if (icons?.includes("http")) {
+    if (icons?.startsWith("http://") || icons?.startsWith("https://")) {
       return icons;
     } else {
       return endpoint_http + icons;
@@ -201,7 +203,7 @@ function DropdownList({
       return file_efault_img;
     }
 
-    if (selectedIcon?.includes("http")) {
+    if (selectedIcon?.startsWith("http://") || selectedIcon?.startsWith("https://")) {
       return selectedIcon;
     } else {
       return endpoint_http + selectedIcon;
@@ -218,7 +220,7 @@ function DropdownList({
       return theme === "dark" ? source_default_dark_img : source_default_img;
     }
 
-    if (selectedIcon?.includes("http")) {
+    if (selectedIcon?.startsWith("http://") || selectedIcon?.startsWith("https://")) {
       return selectedIcon;
     } else {
       return endpoint_http + selectedIcon;

diff --git a/src/components/AppAI/Footer.tsx b/src/components/AppAI/Footer.tsx
@@ -11,6 +11,7 @@ import source_default_dark_img from "@/assets/images/source_default_dark.png";
 import { useSearchStore } from "@/stores/searchStore";
 import { useAppStore } from "@/stores/appStore";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useConnectStore } from "@/stores/connectStore";
 
 interface FooterProps {
   isChat: boolean;
@@ -19,22 +20,24 @@ interface FooterProps {
 
 export default function Footer({ name }: FooterProps) {
   const sourceData = useSearchStore((state) => state.sourceData);
-  const connector_data = useAppStore((state) => state.connector_data);
-  const datasourceData = useAppStore((state) => state.datasourceData);
+
+  const connector_data = useConnectStore((state) => state.connector_data);
+  const datasourceData = useConnectStore((state) => state.datasourceData);
+
   const endpoint_http = useAppStore((state) => state.endpoint_http);
 
   const { theme } = useTheme();
 
   function findConnectorIcon(item: any) {
     const id = item?._source?.source?.id || "";
 
-    const result_source = datasourceData.find(
+    const result_source = datasourceData[endpoint_http]?.find(
       (data: any) => data._source.id === id
     );
 
     const connector_id = result_source?._source?.connector?.id;
 
-    const result_connector = connector_data.find(
+    const result_connector = connector_data[endpoint_http]?.find(
       (data: any) => data._source.id === connector_id
     );
 
@@ -49,7 +52,7 @@ export default function Footer({ name }: FooterProps) {
       return theme === "dark" ? source_default_dark_img : source_default_img;
     }
 
-    if (icons?.includes("http")) {
+    if (icons?.startsWith("http://") || icons?.startsWith("https://")) {
       return icons;
     } else {
       return endpoint_http + icons;

diff --git a/src/components/AppAI/InputBox.tsx b/src/components/AppAI/InputBox.tsx
@@ -70,14 +70,22 @@ export default function ChatInput({
     }
   }, [inputValue, disabled, onSend]);
 
+  const pressedKeys = new Set<string>();
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
+      pressedKeys.add(e.code);
+
       if (e.code === "MetaLeft" || e.code === "MetaRight") {
         setIsCommandPressed(true);
       }
 
-      if (e.metaKey) {
+      if (pressedKeys.has("MetaLeft") || pressedKeys.has("MetaRight")) {
+        e.preventDefault();
         switch (e.code) {
+          case "Comma":
+            setIsCommandPressed(false);
+            break;
           case "KeyI":
             handleToggleFocus();
             break;
@@ -88,7 +96,7 @@ export default function ChatInput({
             console.log("KeyM");
             break;
           case "Enter":
-            isChatMode && (curChatEnd ? handleSubmit() : disabledChange());
+            isChatMode && (curChatEnd ? handleSubmit() : disabledChange?.());
             break;
           case "KeyO":
             console.log("KeyO");
@@ -107,10 +115,19 @@ export default function ChatInput({
         }
       }
     },
-    [handleToggleFocus, isChatMode, handleSubmit]
+    [
+      handleToggleFocus,
+      isChatMode,
+      handleSubmit,
+      setSourceData,
+      setIsCommandPressed,
+      disabledChange,
+      curChatEnd,
+    ]
   );
 
   const handleKeyUp = useCallback((e: KeyboardEvent) => {
+    pressedKeys.delete(e.code);
     if (e.code === "MetaLeft" || e.code === "MetaRight") {
       setIsCommandPressed(false);
     }

diff --git a/src/components/AppAI/Search.tsx b/src/components/AppAI/Search.tsx
@@ -113,7 +113,7 @@ function Search({ isChatMode, input }: SearchProps) {
     };
   }
 
-  const debouncedSearch = useCallback(debounce(getSuggest, 300), [input]);
+  const debouncedSearch = useCallback(debounce(getSuggest, 500), [input]);
 
   useEffect(() => {
     !isChatMode && !sourceData && debouncedSearch();