Refactor chat components to use dynamic API URLs moving apiurl to store

apps/adminpanel/pages/chatbot.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { SiteConfig } from 'app/conf'
-import dynamic from 'next/dynamic';
-import { Stack } from 'tamagui';
-import { useThemeSetting } from "@tamagui/next-theme";
-import {YStack} from 'tamagui'
+import dynamic from 'next/dynamic'
+import { YStack } from 'tamagui'
+import { useRouter } from 'next/router'
 
 export default function Page(props: any) {
-    //@ts-ignore
+    const { query } = useRouter()
+    const apiUrl = query.apiUrl as string
     const Chatbot = dynamic(() => import('protolib/components/chatbot'), { ssr: false })
     const projectName = SiteConfig.projectName
 
@@ -17,8 +17,8 @@ export default function Page(props: any) {
                 <title>{projectName + " - Chatbot"}</title>
             </Head>
             <YStack backgroundColor="$bgContent" f={1}>
-                <Chatbot />
+                <Chatbot apiUrl={apiUrl} />
             </YStack>
         </>
     )
-}
+}

packages/protolib/src/components/AdminPage.tsx

@@ -35,7 +35,7 @@ export const AdminPage = forwardRef(({ pageSession, title, children, integratedC
         </AdminPanel>
       </SearchContext.Provider>
       <Tinted>
-        {integratedChat && settingsAssistantEnabled && <BubbleChat/>}
+        {integratedChat && settingsAssistantEnabled && <BubbleChat apiUrl="/api/v1/chatbots/assistant"/>}
       </Tinted>
     </Page>
   )

packages/protolib/src/components/BubbleChat.tsx

@@ -1,10 +1,14 @@
 import { useState } from "react";
 import { Sparkles, X, Maximize, Minimize } from '@tamagui/lucide-icons';
 import { Tinted }  from './Tinted'
-import { Chatbot } from './Chatbot'
+import { Chat } from './Chat'
 import { YStack, Button, XStack, Theme, Spinner, Paragraph} from 'tamagui';
 
-export const BubbleChat = () => {
+type BubleChatProps = {
+  apiUrl: string;
+};
+
+export const BubbleChat = ({ apiUrl }: BubleChatProps) => {
   const [isChatVisible, setIsChatVisible] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
   const [isChatLoaded, setIsChatLoaded] = useState(false);
@@ -93,7 +97,7 @@ export const BubbleChat = () => {
 
             <Paragraph size="$5">Loading chat...</Paragraph>
           </YStack>
-          {isChatLoaded && <Chatbot/>}
+          {isChatLoaded && <Chat apiUrl={apiUrl}/>}
         </YStack>
 
 

packages/protolib/src/components/Chat.tsx

@@ -0,0 +1,15 @@
+type ChatProps = {
+    apiUrl: string;
+  };
+
+  export const Chat = ({ apiUrl }: ChatProps) => {
+    return (
+      <iframe
+        src={"/workspace/chatbot?apiUrl=" + encodeURIComponent(apiUrl)}
+        width="100%"
+        height="100%"
+        style={{ border: "none" }}
+        title="Chat Widget"
+      />
+    );
+  };

packages/protolib/src/components/chatbot/index.tsx

@@ -1,34 +1,47 @@
-import { useEffect, useState } from "react";
-import Navbar from "./components/Navbar/Navbar";
-import DefaultIdeas from "./components/DefaultIdea/DefaultIdeas";
-import UserQuery from "./components/UserInput/UserQuery";
-import { Plus, Menu, PanelLeft } from "lucide-react";
-import useChat, { chatsLength, useAuth } from "./store/store";
-import classNames from "classnames";
-import Chats from "./components/Chat/Chats";
-import Modal from "./components/modals/Modal";
-import Apikey from "./components/modals/Apikey";
-import { useThemeSetting } from "@tamagui/next-theme";
-import { Stack } from "tamagui";
+import { useEffect, useState } from "react"
+import Navbar from "./components/Navbar/Navbar"
+import DefaultIdeas from "./components/DefaultIdea/DefaultIdeas"
+import UserQuery from "./components/UserInput/UserQuery"
+import { Plus, Menu, PanelLeft } from "lucide-react"
+import useChat, { chatsLength, useAuth, useSettings } from "./store/store"
+import classNames from "classnames"
+import Chats from "./components/Chat/Chats"
+import Modal from "./components/modals/Modal"
+import Apikey from "./components/modals/Apikey"
+import { useThemeSetting } from "@tamagui/next-theme"
+import { Stack } from "tamagui"
 
 const applyTheme = (resolvedTheme) => {
   if (resolvedTheme === "light" && document.documentElement.classList.contains("dark")) {
-    document.documentElement.classList.remove("dark");
+    document.documentElement.classList.remove("dark")
   } else if (resolvedTheme === "dark" && !document.documentElement.classList.contains("dark")) {
-    document.documentElement.classList.add("dark");
+    document.documentElement.classList.add("dark")
   }
-};
+}
+
+type AppProps = {
+  apiUrl: string
+}
 
-function App() {
-  const [active, setActive] = useState(false);
-  const isChatsVisible = useChat(chatsLength);
-  const addNewChat = useChat((state) => state.addNewChat);
-  let userHasApiKey = useAuth((state) => state.apikey);
-  const { resolvedTheme } = useThemeSetting();
+function App({ apiUrl }: AppProps) {
+  const [active, setActive] = useState(false)
+  const isChatsVisible = useChat(chatsLength)
+  const addNewChat = useChat((state) => state.addNewChat)
+  let userHasApiKey = useAuth((state) => state.apikey)
+  const { resolvedTheme } = useThemeSetting()
+
+  const setApiUrl = useSettings((state) => state.setApiUrl)
+
+  useEffect(() => {
+    applyTheme(resolvedTheme)
+  }, [resolvedTheme])
 
+  // Almacena apiUrl en el store al montar el componente
   useEffect(() => {
-    applyTheme(resolvedTheme);
-  }, [resolvedTheme]);
+    if (apiUrl) {
+      setApiUrl(apiUrl) // Guarda apiUrl en el store
+    }
+  }, [apiUrl, setApiUrl])
 
   return (
     <Stack backgroundColor={resolvedTheme === "light" ? "" : "#212121"} f={1} className="h-screen flex flex-col">
@@ -71,7 +84,7 @@ function App() {
         </Modal>
       </div>
     </Stack>
-  );
+  )
 }
 
-export default App;
+export default App

packages/protolib/src/components/chatbot/services/chatService.ts

@@ -1,6 +1,5 @@
 import { ChatMessageType, ModalList, useSettings } from "../store/store";
 
-const apiUrl = "/api/v1/chatbots/assistant";
 const IMAGE_GENERATION_API_URL = "https://api.openai.com/v1/images/generations";
 
 export async function fetchResults(
@@ -11,6 +10,7 @@ export async function fetchResults(
   onCompletion: () => void
 ) {
   try {
+    const apiUrl = useSettings.getState().settings.apiUrl
     const response = await fetch(apiUrl, {
       method: `POST`,
       signal: signal,

packages/protolib/src/components/chatbot/store/store.tsx

@@ -59,6 +59,7 @@ export interface SettingsType {
     useSystemMessageForAllChats: boolean;
     selectedModal: ModalList;
     dalleImageSize: { "dall-e-3": ImageSize };
+    apiUrl: string;
   };
   modalsList: readonly string[];
   isSystemMessageModalVisible: boolean;
@@ -70,6 +71,7 @@ export interface SettingsType {
   setModalsList: (value: string[]) => void;
   setModal: (value: ModalList) => void;
   setDalleImageSize: (value: ImageSize, type: "dall-e-3") => void;
+  setApiUrl: (url: string) => void;
 }
 export interface ChatType {
   chats: ChatMessageType[];
@@ -261,6 +263,7 @@ const useSettings = createWithEqualityFn<SettingsType>()(
         useSystemMessageForAllChats: false,
         selectedModal: "gpt-4-turbo",
         dalleImageSize: { "dall-e-3": "1024x1024" },
+        apiUrl: "",
       },
       modalsList: modalsList,
       isSystemMessageModalVisible: false,
@@ -315,6 +318,13 @@ const useSettings = createWithEqualityFn<SettingsType>()(
           })
         );
       },
+      setApiUrl: (url) => {
+        set(
+          produce((state: SettingsType) => {
+            state.settings.apiUrl = url;
+          })
+        );
+      },
     }),
     {
       name: "settings",