refactor: extract theme into src/theme; lazy-load ChatBot

src/App.jsx

@@ -1,6 +1,8 @@
-import React from "react";
-import ChatBot from "./components/ChatBot";
+
+ import React, { Suspense, lazy } from "react";
+ const ChatBot = lazy(() => import("./components/ChatBot"));
 import "./App.css";
+import glassTheme from "./theme/glassTheme";
 
 const GEMINI_API_KEY = "GEMINI_API_KEY";
 
@@ -169,51 +171,6 @@ const GlowingOrbIcon = () => (
 );
 
 function App() {
-  const glassTheme = {
-    launcher: { backgroundColor: "#a855f7", iconColor: "#ffffff" },
-    header: {
-      backgroundColor: "rgba(255, 255, 255, 0.05)",
-      textColor: "#f9fafb",
-      fontFamily: "'Inter', sans-serif",
-    },
-    window: {
-      backgroundColor: "rgba(17, 24, 39, 0.7)",
-      borderColor: "rgba(168, 85, 247, 0.3)",
-      borderRadius: "1rem",
-      placement: "center",
-      width: "min(640px, 90vw)",
-      height: "min(720px, 80vh)",
-      backdrop: true,
-      backdropColor: "rgba(0, 0, 0, 0.6)",
-      backdropBlur: "12px",
-      scrollbarThumbColor: "#a855f7",
-      scrollbarTrackColor: "rgba(255, 255, 255, 0.05)",
-    },
-    messages: {
-      userBackgroundColor: "#7e22ce",
-      userTextColor: "#ffffff",
-      botBackgroundColor: "rgba(255, 255, 255, 0.1)",
-      botTextColor: "#f3f4f6",
-      fontFamily: "'Inter', sans-serif",
-      bubbleShape: "rounded",
-      animation: "typing",
-      // **NEW:** Complete Markdown styling for a cohesive look
-      markdownStyles: {
-        boldColor: "#c084fc",
-        italicColor: "#a78bfa",
-        linkColor: "#818cf8",
-        codeColor: "#f5d0fe",
-        codeBackgroundColor: "rgba(0, 0, 0, 0.3)",
-      },
-    },
-    input: {
-      backgroundColor: "rgba(0, 0, 0, 0.2)",
-      textColor: "#f9fafb",
-      placeholderTextColor: "#9ca3af",
-      borderColor: "rgba(168, 85, 247, 0.3)",
-      focusRingColor: "#d8b4fe",
-    },
-  };
 
   const handleFileUpload = (file) => {
     console.log("File has been selected:", file);
@@ -267,6 +224,10 @@ function App() {
           </div>
         </div>
 
+        <Suspense fallback={<div>Loading chat...</div>}>
+
+
+
         <div className="h-24"></div>
 
         <ChatBot
@@ -285,6 +246,8 @@ function App() {
           fileUploadAccept="image/*,.pdf,.doc,.docx"
           onFileUpload={handleFileUpload}
         />
+
+        </Suspense>
       </div>
     </div>
   );

src/theme/glassTheme.js

@@ -0,0 +1,46 @@
+// src/theme/glassTheme.js
+const glassTheme = {
+  launcher: { backgroundColor: "#a855f7", iconColor: "#ffffff" },
+  header: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    textColor: "#f9fafb",
+    fontFamily: "'Inter', sans-serif",
+  },
+  window: {
+    backgroundColor: "rgba(17, 24, 39, 0.7)",
+    borderColor: "rgba(168, 85, 247, 0.3)",
+    borderRadius: "1rem",
+    placement: "center",
+    width: "min(640px, 90vw)",
+    height: "min(720px, 80vh)",
+    backdrop: true,
+    backdropColor: "rgba(0, 0, 0, 0.6)",
+    backdropBlur: "12px",
+    scrollbarThumbColor: "#a855f7",
+    scrollbarTrackColor: "rgba(255, 255, 255, 0.05)",
+  },
+  messages: {
+    userBackgroundColor: "#7e22ce",
+    userTextColor: "#ffffff",
+    botBackgroundColor: "rgba(255, 255, 255, 0.1)",
+    botTextColor: "#f3f4f6",
+    fontFamily: "'Inter', sans-serif",
+    bubbleShape: "rounded",
+    animation: "typing",
+    markdownStyles: {
+      boldColor: "#c084fc",
+      italicColor: "#a78bfa",
+      linkColor: "#818cf8",
+      codeColor: "#f5d0fe",
+      codeBackgroundColor: "rgba(0, 0, 0, 0.3)",
+    },
+  },
+  input: {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    textColor: "#f9fafb",
+    placeholderTextColor: "#9ca3af",
+    borderColor: "rgba(168, 85, 247, 0.3)",
+    focusRingColor: "#d8b4fe",
+  },
+};
+export default glassTheme;