feat: add endpoint setting (#96)

* feat: add endpoint setting * feat: add endpoint change * feat: add baseURL config * feat: add port 9000
infinilabs · Jan 9, 2025 · 4431f8f · 4431f8f
1 parent cc20245
commit 4431f8f
Show file tree

Hide file tree

Showing 13 changed files with 158 additions and 18 deletions.
diff --git a/src/api/request.ts b/src/api/request.ts
@@ -3,8 +3,6 @@ import { fetch as tauriFetchModule } from "@tauri-apps/plugin-http";
 
 import { clientEnv } from "@/utils/env";
 
-const baseURL = `${clientEnv.COCO_SERVER_URL}`
-
 // Use a conditional fetch depending on whether it's in a Tauri environment or web
 let customFetch: typeof window.fetch | typeof tauriFetchModule = window.fetch;
 
@@ -19,6 +17,7 @@ interface FetchRequestConfig {
   body?: any;
   timeout?: number;
   parseAs?: "json" | "text" | "binary";
+  baseURL?: string;
 }
 
 interface FetchResponse<T = any> {
@@ -43,6 +42,7 @@ export const tauriFetch = async <T = any>({
   body,
   timeout = 30,
   parseAs = "json",
+  baseURL = clientEnv.COCO_SERVER_URL
 }: FetchRequestConfig): Promise<FetchResponse<T>> => {
   try {
     url = baseURL + url;

diff --git a/src/api/tauriFetchClient.ts b/src/api/tauriFetchClient.ts
@@ -2,15 +2,14 @@ import { fetch } from "@tauri-apps/plugin-http";
 
 import { clientEnv } from "@/utils/env";
 
-const baseURL = `${clientEnv.COCO_SERVER_URL}`
-
 interface FetchRequestConfig {
   url: string;
   method?: "GET" | "POST" | "PUT" | "DELETE";
   headers?: Record<string, string>;
   body?: any;
   timeout?: number;
   parseAs?: "json" | "text" | "binary";
+  baseURL?: string;
 }
 
 interface FetchResponse<T = any> {
@@ -33,7 +32,10 @@ export const tauriFetch = async <T = any>({
   body,
   timeout = 30,
   parseAs = "json",
+  baseURL = clientEnv.COCO_SERVER_URL
 }: FetchRequestConfig): Promise<FetchResponse<T>> => {
+  console.log(11111111, baseURL)
+
   try {
     url = baseURL + url;
     if (method !== "GET") {

diff --git a/src/components/AppAI/Search.tsx b/src/components/AppAI/Search.tsx
@@ -7,6 +7,7 @@ import DropdownList from "./DropdownList";
 import Footer from "./Footer";
 import { tauriFetch } from "@/api/tauriFetchClient";
 import noDataImg from "@/assets/coconut-tree.png";
+import { useAppStore } from '@/stores/appStore';
 
 interface SearchProps {
   changeInput: (val: string) => void;
@@ -15,6 +16,8 @@ interface SearchProps {
 }
 
 function Search({ isChatMode, input }: SearchProps) {
+  const appStore = useAppStore();
+
   const [suggests, setSuggests] = useState<any[]>([]);
   const [isSearchComplete, setIsSearchComplete] = useState(false);
   const [selectedItem, setSelectedItem] = useState<any>();
@@ -64,6 +67,7 @@ function Search({ isChatMode, input }: SearchProps) {
       const response = await tauriFetch({
         url: `/query/_search?query=${input}`,
         method: "GET",
+        baseURL: appStore.endpoint_http,
       });
       console.log("_suggest", input, response);
       const data = response.data?.hits?.hits || [];

diff --git a/src/components/ChatAI/Chat.tsx b/src/components/ChatAI/Chat.tsx
@@ -15,6 +15,7 @@ import { useWebSocket } from "../../hooks/useWebSocket";
 import { useChatStore } from "../../stores/chatStore";
 import { useWindows }  from "../../hooks/useWindows";
 import { clientEnv } from "@/utils/env";
+import { useAppStore } from '@/stores/appStore';
 
 interface ChatAIProps {
   inputValue: string;
@@ -38,6 +39,8 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
       reconnect: reconnect
     }));
 
+    const appStore = useAppStore();
+
     const { createWin } = useWindows();
 
     const { curChatEnd, setCurChatEnd, setConnected } = useChatStore();
@@ -56,9 +59,9 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
     const curIdRef = useRef(curId);
     curIdRef.current = curId;
 
-    console.log("chat useWebSocket")
+    console.log("chat useWebSocket", clientEnv.COCO_WEBSOCKET_URL)
     const { messages, setMessages, connected, reconnect } = useWebSocket(
-      `${clientEnv.COCO_WEBSOCKET_URL}`,
+      `${appStore.endpoint_websocket || clientEnv.COCO_WEBSOCKET_URL}`,
       (msg) => {
         console.log("msg", msg);
         if (msg.includes("websocket-session-id")) {
@@ -138,6 +141,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
         const response = await tauriFetch({
           url: "/chat/_new",
           method: "POST",
+          baseURL: appStore.endpoint_http,
         });
         console.log("_new", response);
         const newChat: Chat = response.data;
@@ -169,6 +173,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
             "WEBSOCKET-SESSION-ID": websocketId,
           },
           body: JSON.stringify({ message: content }),
+          baseURL: appStore.endpoint_http,
         });
         console.log("_send", response, websocketId);
         setCurId(response.data[0]?._id);
@@ -191,6 +196,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
         const response = await tauriFetch({
           url: `/chat/${activeChat._id}/_close`,
           method: "POST",
+          baseURL: appStore.endpoint_http,
         });
         console.log("_close", response);
       } catch (error) {
@@ -206,6 +212,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
         const response = await tauriFetch({
           url: `/chat/${activeChat._id}/_cancel`,
           method: "POST",
+          baseURL: appStore.endpoint_http,
         });
 
         console.log("_cancel", response);

diff --git a/src/components/ChatAI/index.tsx b/src/components/ChatAI/index.tsx
@@ -10,12 +10,15 @@ import { tauriFetch } from "../../api/tauriFetchClient";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { useWindows }  from "../../hooks/useWindows";
 import { clientEnv } from "@/utils/env";
+import { useAppStore } from '@/stores/appStore';
 
 interface ChatAIProps {}
 
 export default function ChatAI({}: ChatAIProps) {
   const { closeWin } = useWindows();
 
+  const appStore = useAppStore();
+
   const [chats, setChats] = useState<Chat[]>([]);
   const [activeChat, setActiveChat] = useState<Chat>();
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -36,7 +39,7 @@ export default function ChatAI({}: ChatAIProps) {
 
   console.log("index useWebSocket")
   const { messages, setMessages } = useWebSocket(
-    `${clientEnv.COCO_WEBSOCKET_URL}`,
+    `${appStore.endpoint_websocket || clientEnv.COCO_WEBSOCKET_URL}`,
     (msg) => {
       if (msg.includes("websocket-session-id")) {
         const array = msg.split(" ");
@@ -104,6 +107,7 @@ export default function ChatAI({}: ChatAIProps) {
       const response = await tauriFetch({
         url: "/chat/_history",
         method: "GET",
+        baseURL: appStore.endpoint_http,
       });
       console.log("_history", response);
       const hits = response.data?.hits?.hits || [];
@@ -134,6 +138,7 @@ export default function ChatAI({}: ChatAIProps) {
       const response = await tauriFetch({
         url: "/chat/_new",
         method: "POST",
+        baseURL: appStore.endpoint_http,
       });
       console.log("_new", response);
       const newChat: Chat = response.data;
@@ -166,6 +171,7 @@ export default function ChatAI({}: ChatAIProps) {
           "WEBSOCKET-SESSION-ID": websocketId,
         },
         body: JSON.stringify({ message: content }),
+        baseURL: appStore.endpoint_http,
       });
       console.log("_send", response, websocketId);
       setCurId(response.data[0]?._id);
@@ -187,6 +193,7 @@ export default function ChatAI({}: ChatAIProps) {
       const response = await tauriFetch({
         url: `/chat/${chat._id}/_history`,
         method: "GET",
+        baseURL: appStore.endpoint_http,
       });
       console.log("id_history", response);
       const hits = response.data?.hits?.hits || [];
@@ -206,6 +213,7 @@ export default function ChatAI({}: ChatAIProps) {
       const response = await tauriFetch({
         url: `/chat/${activeChat._id}/_close`,
         method: "POST",
+        baseURL: appStore.endpoint_http,
       });
       console.log("_close", response);
     } catch (error) {
@@ -219,6 +227,7 @@ export default function ChatAI({}: ChatAIProps) {
       const response = await tauriFetch({
         url: `/chat/${chat._id}/_open`,
         method: "POST",
+        baseURL: appStore.endpoint_http,
       });
       console.log("_open", response);
       chatHistory(response.data);
@@ -233,6 +242,7 @@ export default function ChatAI({}: ChatAIProps) {
       const response = await tauriFetch({
         url: `/chat/${activeChat._id}/_cancel`,
         method: "POST",
+        baseURL: appStore.endpoint_http,
       });
       console.log("_cancel", response);
     } catch (error) {

diff --git a/src/components/SearchChat/Search.tsx b/src/components/SearchChat/Search.tsx
@@ -5,7 +5,7 @@ import DropdownList from "./DropdownList";
 import { Footer } from "./Footer";
 import { SearchResults } from "./SearchResults";
 import { tauriFetch } from "../../api/tauriFetchClient";
-
+import { useAppStore } from '@/stores/appStore';
 interface SearchProps {
   changeInput: (val: string) => void;
   isTransitioned: boolean;
@@ -14,6 +14,13 @@ interface SearchProps {
 }
 
 function Search({ isTransitioned, isChatMode, input }: SearchProps) {
+  const initializeListeners = useAppStore(state => state.initializeListeners);
+  useEffect(() => {
+    initializeListeners();
+  }, []);
+
+  const appStore = useAppStore();
+
   const [suggests, setSuggests] = useState<any[]>([]);
   const [isSearchComplete, setIsSearchComplete] = useState(false);
   const [selectedItem, setSelectedItem] = useState<any>();
@@ -53,6 +60,7 @@ function Search({ isTransitioned, isChatMode, input }: SearchProps) {
       const response = await tauriFetch({
         url: `/query/_search?query=${input}`,
         method: "GET",
+        baseURL: appStore.endpoint_http,
       });
       console.log("_suggest", input, response);
       const data = response.data?.hits?.hits || [];

diff --git a/src/components/Settings/Account.tsx b/src/components/Settings/Account.tsx
@@ -13,10 +13,10 @@ import logoImg from "@/assets/32x32.png";
 import callbackTemplate from "@/components/Auth/callback.template";
 import { clientEnv } from "@/utils/env";
 
-
 export default function Account() {
   const app_uid = useAppStore((state) => state.app_uid);
   const setAppUid = useAppStore((state) => state.setAppUid);
+  const endpoint_http = useAppStore((state) => state.endpoint_http);
 
   const { auth, setAuth } = useAuthStore();
 
@@ -94,7 +94,7 @@ export default function Account() {
       });
 
       await shell.open(
-        `${clientEnv.COCO_SERVER_URL}/api/desktop/session/request?port=${port}`
+        `${endpoint_http || clientEnv.COCO_SERVER_URL}/api/desktop/session/request?port=${port}`
       );
 
       const url = await new Promise<URL>((r) => {

diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+import { Globe } from "lucide-react";
+
+import SettingsItem from "./SettingsItem";
+import { useAppStore } from "@/stores/appStore";
+import { AppEndpoint } from "@/utils/tauri";
+
+const ENDPOINTS = [
+  { value: "coco.infini.cloud", label: "coco.infini.cloud" },
+  { value: "localhost:2900", label: "localhost:2900" },
+  { value: "localhost:9000", label: "localhost:9000" },
+];
+
+export default function AdvancedSettings() {
+  const endpoint = useAppStore(state => state.endpoint);
+  const setEndpoint = useAppStore(state => state.setEndpoint);
+
+  useEffect(() => {}, [endpoint]);
+
+  const onChangeEndpoint = async (newEndpoint: AppEndpoint) => {
+    await setEndpoint(newEndpoint);
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Advanced Settings
+        </h2>
+        <div className="space-y-6">
+          <SettingsItem
+            icon={Globe}
+            title="API Endpoint"
+            description="Domain name for interface and websocket"
+          >
+            <div className={`p-4 rounded-lg`}>
+              <select
+                value={endpoint}
+                onChange={(e) =>
+                  onChangeEndpoint(e.target.value as AppEndpoint)
+                }
+                className={`w-full px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white border-gray-300 text-gray-900 dark:bg-gray-800 dark:border-gray-600 dark:text-white`}
+              >
+                {ENDPOINTS.map(({ value, label }) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </SettingsItem>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Settings/index2.tsx b/src/components/Settings/index2.tsx
@@ -5,6 +5,7 @@ import { useSearchParams } from "react-router-dom";
 
 import SettingsPanel from "./SettingsPanel";
 import GeneralSettings from "./GeneralSettings";
+import AdvancedSettings from "./AdvancedSettings";
 import AboutView from "./AboutView";
 import Account from "./Account";
 import CocoCloud from "@/components/Auth/CocoCloud"
@@ -83,9 +84,7 @@ function SettingsPage() {
               </TabPanel>
               <TabPanel>
                 <SettingsPanel title="">
-                  <div className="text-gray-600 dark:text-gray-400">
-                    Advanced settings content
-                  </div>
+                  <AdvancedSettings />
                 </SettingsPanel>
               </TabPanel>
               <TabPanel>

diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx
@@ -1,11 +1,17 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { isTauri } from "@tauri-apps/api/core";
 
 import InputBox from "@/components/AppAI/InputBox";
 import Search from "@/components/AppAI/Search";
 import ChatAI, { ChatAIRef } from "@/components/ChatAI/Chat";
+import { useAppStore } from '@/stores/appStore';
 
 export default function DesktopApp() {
+  const initializeListeners = useAppStore(state => state.initializeListeners);
+  useEffect(() => {
+    initializeListeners();
+  }, []);
+
   const chatAIRef = useRef<ChatAIRef>(null);
 
   const [isChatMode, setIsChatMode] = useState(false);

diff --git a/src/pages/#/index.tsx b/src/pages/#/index.tsx
@@ -8,8 +8,14 @@ import logoImg from "@/assets/images/coco-logo.png";
 import AppleImg from "@/assets/images/apple.png";
 import GithubImg from "@/assets/images/github.png";
 import GoogleImg from "@/assets/images/google.png";
+import { useAppStore } from "@/stores/appStore";
 
 export default function LoginPage() {
+  const initializeListeners = useAppStore((state) => state.initializeListeners);
+  useEffect(() => {
+    initializeListeners();
+  }, []);
+
   const handleGoogleSignIn = (response: any) => {
     console.log("Google Login Success:", response);
     // response.credential