From a04045b13f45116e7fd353947c23ef353983e61e Mon Sep 17 00:00:00 2001
From: Hardik Patel <hardik.patel@devoteam.com>
Date: Tue, 5 Mar 2024 16:05:49 +0100
Subject: [PATCH] Fix for env variables

---
 config.js                                            |  5 +++++
 .../templates/configjs-configmap.yaml                | 12 +++++-------
 index.html                                           |  2 ++
 src/components/ChatWindow/ChatWindow.tsx             |  3 +--
 src/components/PluginSelector/PluginSelector.tsx     |  3 +--
 src/config.js                                        |  6 ------
 src/context/ThreadContext.tsx                        |  3 +--
 src/global.d.ts                                      |  6 ++++++
 src/index.tsx                                        |  4 ++--
 9 files changed, 23 insertions(+), 21 deletions(-)
 create mode 100644 config.js
 delete mode 100644 src/config.js
 create mode 100644 src/global.d.ts

diff --git a/config.js b/config.js
new file mode 100644
index 0000000..73d9ed2
--- /dev/null
+++ b/config.js
@@ -0,0 +1,5 @@
+window.config = {
+  VITE_API_BASE_URL: "http://localhost:8080",
+  VITE_GOOGLE_CLIENT_ID:
+    "779787791084-sf0tjf22s5cl3odf9sjg6rch0if9c0qq.apps.googleusercontent.com",
+};
diff --git a/helm-charts/infini-connect-ui/templates/configjs-configmap.yaml b/helm-charts/infini-connect-ui/templates/configjs-configmap.yaml
index 8fc2f16..603ca3f 100644
--- a/helm-charts/infini-connect-ui/templates/configjs-configmap.yaml
+++ b/helm-charts/infini-connect-ui/templates/configjs-configmap.yaml
@@ -5,10 +5,8 @@ metadata:
   namespace: {{ .Values.namespace }} 
 data:
   config.js: |
-    var config = (() => {
-       return {
-            {{- range $key, $value := .Values.configMapValues }}
-              {{ $key | quote}}: {{ $value | quote }},
-            {{- end }}
-        };
-       })();
+    window.config = {
+      {{- range $key, $value := .Values.configMapValues }}
+        {{ $key | quote}}: {{ $value | quote }},
+      {{- end }}
+    };
diff --git a/index.html b/index.html
index d950aa0..051d90e 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,8 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
+    <script src="config.js"></script>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/ChatWindow/ChatWindow.tsx b/src/components/ChatWindow/ChatWindow.tsx
index 0c19fa9..3290009 100644
--- a/src/components/ChatWindow/ChatWindow.tsx
+++ b/src/components/ChatWindow/ChatWindow.tsx
@@ -20,7 +20,6 @@ import { useSettings } from "../../context/SettingsContext";
 import { Thread, useThreadContext } from "../../context/ThreadContext";
 import PluginSelector from "../PluginSelector/PluginSelector";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { config } from "../../config";
 // Define the MainContentProps interface for the component's props
 interface MainContentProps {
   thread?: Thread;
@@ -122,7 +121,7 @@ const MainContent: React.FC<MainContentProps> = () => {
     const messageId = messages?.[messages.length - 1].id;
     if (!messageId) return;
 
-    const url = new URL(config.VITE_API_BASE_URL || process.env.VITE_API_BASE_URL || "");
+    const url = new URL(window.config.VITE_API_BASE_URL || process.env.VITE_API_BASE_URL || "");
     url.pathname = `api/message/${messageId}/feedback`;
 
     fetch(url, {
diff --git a/src/components/PluginSelector/PluginSelector.tsx b/src/components/PluginSelector/PluginSelector.tsx
index a3c592a..04e3a1c 100644
--- a/src/components/PluginSelector/PluginSelector.tsx
+++ b/src/components/PluginSelector/PluginSelector.tsx
@@ -10,7 +10,6 @@ import OutlinedInput from "@mui/material/OutlinedInput";
 import Select from "@mui/material/Select";
 import * as React from "react";
 import { useAuthContext } from "../../context/AuthContext";
-import { config } from "../../config";
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
@@ -43,7 +42,7 @@ export default function PluginSelector({
     if (expired) {
       return;
     }
-    const url = new URL(config.VITE_API_BASE_URL || process.env.VITE_API_BASE_URL || "");
+    const url = new URL(window.config.VITE_API_BASE_URL || process.env.VITE_API_BASE_URL || "");
     url.pathname = "api/plugin/";
 
     fetch(url, {
diff --git a/src/config.js b/src/config.js
deleted file mode 100644
index 0b4a40b..0000000
--- a/src/config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const config = (() => {
-  return {
-    "VITE_API_BASE_URL": "http://localhost:8080",
-    "VITE_GOOGLE_CLIENT_ID": "779787791084-sf0tjf22s5cl3odf9sjg6rch0if9c0qq.apps.googleusercontent.com"
-  };
-})();
\ No newline at end of file
diff --git a/src/context/ThreadContext.tsx b/src/context/ThreadContext.tsx
index 354b06d..daa54d0 100644
--- a/src/context/ThreadContext.tsx
+++ b/src/context/ThreadContext.tsx
@@ -7,7 +7,6 @@ import {
   useState,
 } from "react";
 import { useAuthContext } from "./AuthContext";
-import { config } from "../config";
 
 // Define the thread context
 interface ThreadContextProps {
@@ -173,7 +172,7 @@ const ThreadProvider = ({
       if (expired) {
         return;
       }
-      const url = new URL(config.VITE_API_BASE_URL || process.env.VITE_API_BASE_URL || "");
+      const url = new URL(window.config.VITE_API_BASE_URL || process.env.VITE_API_BASE_URL || "");
       url.pathname = "api/thread/";
       if (params.threadId) {
         url.pathname +=
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..f6dd39a
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,6 @@
+interface Window {
+  config: {
+    VITE_API_BASE_URL?: string;
+    VITE_GOOGLE_CLIENT_ID?: string;
+  };
+}
diff --git a/src/index.tsx b/src/index.tsx
index 506ebef..25c7d2c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,7 +11,7 @@ import App from "./App";
 import { AuthProvider } from "./context/AuthContext";
 import { SettingsProvider, useSettings } from "./context/SettingsContext";
 import { devoteamDesignTokens } from "./themes/devoteamTheme";
-import { config } from "./config";
+
 
 const Theme = ({ children }: { children: ReactNode[] | ReactNode }) => {
   const { darkMode } = useSettings();
@@ -26,7 +26,7 @@ root.render(
   <StrictMode>
     <StyledEngineProvider injectFirst>
       <GoogleOAuthProvider
-        clientId={config.VITE_GOOGLE_CLIENT_ID || process.env.VITE_GOOGLE_CLIENT_ID || ""}
+        clientId={window.config.VITE_GOOGLE_CLIENT_ID || process.env.VITE_GOOGLE_CLIENT_ID || ""}
       >
         <SettingsProvider>
           <Theme>