deploy

.dockerignore

@@ -0,0 +1,12 @@
+.env
+.env_copy
+.gitignore
+.deepeval
+.deepeval_telemetry.txt
+frontend/node_modules/
+frontend/build/
+venv/
+.files/
+__pycache__/
+LICENSE.md
+README.md

.slack_credentials

@@ -0,0 +1,2 @@
+9146298917605.9224293005140
+6a902b3d5070b9511742f8a67c5ec6f8

.webhook_secret

@@ -0,0 +1 @@
+https://eoujtjv9jy7d28z.m.pipedream.net

Dockerfile

@@ -0,0 +1,84 @@
+# ----------------------------
+# Stage 1: Build the React Frontend
+# ----------------------------
+FROM node:20-alpine AS builder
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Create writable directories for Hugging Face Spaces
+RUN mkdir -p /tmp/huggingface && \
+    chmod -R 777 /tmp/huggingface && \
+    mkdir -p /app/workspace && \
+    chmod -R 777 /app/workspace
+
+# Set cache environment variables at build time
+ENV HF_HOME=/tmp/huggingface \
+    TRANSFORMERS_CACHE=/tmp/huggingface \
+    XDG_CACHE_HOME=/tmp \
+    WRITABLE_DIR=/app/workspace
+
+# Copy the 'frontend' folder from the project root into the container
+COPY frontend ./frontend
+
+# Switch to the frontend directory
+WORKDIR /app/frontend
+
+# Install dependencies (using yarn, npm, or pnpm)
+RUN if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+    elif [ -f package-lock.json ]; then npm ci; \
+    elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+    else echo "No lockfile found. Exiting." && exit 1; \
+    fi
+
+# Build the React app (produces a production-ready build in the "build" folder)
+RUN npm run build
+
+# ----------------------------
+# Stage 2: Set Up the FastAPI Backend and Serve the React App
+# ----------------------------
+FROM python:3.12-slim AS backend
+WORKDIR /app
+
+# Install OS-level dependencies
+RUN apt-get update --fix-missing && \
+    apt-get install --no-install-recommends -y git curl && \
+    apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# Install Node.js (if needed for any backend tasks)
+RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
+    apt-get update --fix-missing && \
+    apt-get install --no-install-recommends -y nodejs && \
+    apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements.txt and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Install additional dependencies for torch and spaCy
+RUN pip install --no-cache-dir torch==2.5.1 torchvision==0.20.1 torchaudio==2.5.1 --index-url https://download.pytorch.org/whl/cu124
+RUN python -m spacy download en_core_web_sm
+
+# Disable telemetry for deepeval
+ENV DEEPEVAL_TELEMETRY_OPT_OUT=YES
+
+# Copy the rest of your backend code and resources
+COPY . .
+
+# Copy the built React app from the builder stage into the same folder structure as used in your FastAPI code
+COPY --from=builder /app/frontend/build ./frontend/build
+
+# Run HuggingFace Spaces as a root user
+# Re-create writable directories in this stage
+RUN mkdir -p /tmp/huggingface /app/workspace && \
+    chmod -R 777 /tmp/huggingface /app/workspace && \
+    useradd -m spaces-user && \
+    chown -R spaces-user:spaces-user /tmp/huggingface /app/workspace
+    
+# Set the user to spaces-user for running the application
+USER spaces-user
+
+# Expose the port
+EXPOSE ${PORT:-7860}
+
+# Start the FastAPI backend using Uvicorn, reading the PORT env variable
+CMD ["sh", "-c", "uvicorn main:app --host 0.0.0.0 --port ${PORT:-7860}"]

README.md

@@ -1,11 +1 @@
----
-title: Cohex
-emoji: 🐢
-colorFrom: red
-colorTo: purple
-sdk: docker
-pinned: false
-license: unknown
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+AI Search Project

frontend/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "hemang",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@google/generative-ai": "^0.21.0",
+    "@mui/icons-material": "^6.4.4",
+    "@mui/material": "^6.4.3",
+    "@mui/styled-engine-sc": "^6.4.2",
+    "cra-template": "1.2.0",
+    "katex": "^0.16.22",
+    "markdown-to-jsx": "^7.7.10",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.1.3",
+    "react-scripts": "5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "web-vitals": "^4.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/auth-receiver.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Completing Authentication...</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      background-color: #f5f5f5;
+    }
+    .container {
+      text-align: center;
+      padding: 20px;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .spinner {
+      border: 3px solid #f3f3f3;
+      border-top: 3px solid #3498db;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      animation: spin 1s linear infinite;
+      margin: 20px auto;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h2>Completing authentication...</h2>
+    <div class="spinner"></div>
+    <p id="status">Please wait...</p>
+  </div>
+
+  <script>
+    function updateStatus(message) {
+      document.getElementById('status').textContent = message;
+    }
+
+    try {
+      // Extract token from URL
+      let token = null;
+      let authData = { type: 'auth-success' };
+      
+      // For Google and Microsoft (token in hash)
+      if (window.location.hash) {
+        const hashParams = new URLSearchParams(window.location.hash.substring(1));
+        token = hashParams.get('access_token');
+      }
+      
+      // For Slack (code in query params)
+      if (!token && window.location.search) {
+        const queryParams = new URLSearchParams(window.location.search);
+        
+        // Check if this is a Slack OAuth response (has code and state=slack)
+        const code = queryParams.get('code');
+        const state = queryParams.get('state');
+        
+        if (code && state === 'slack') {
+          // This is a Slack OAuth response
+          token = code; // Use the code as the token for now
+          authData.code = code;
+          authData.provider = 'slack';
+          
+          // Extract team information if available
+          const team = queryParams.get('team');
+          const teamId = queryParams.get('team_id');
+          const teamName = queryParams.get('team_name');
+          
+          if (team || teamId) {
+            authData.team_id = teamId || team;
+            authData.team_name = teamName || team;
+          }
+        } else if (code && !token) {
+          // Legacy Slack handling without state parameter
+          updateStatus('Slack authentication detected. Using authorization code.');
+          token = code;
+          authData.code = code;
+          authData.provider = 'slack';
+        }
+      }
+      
+      if (token) {
+        updateStatus('Authentication successful! Closing window...');
+        
+        // Send token back to parent window
+        if (window.opener) {
+          window.opener.postMessage({
+            ...authData,
+            token: token
+          }, window.location.origin);
+          
+          // Close window after a short delay
+          setTimeout(() => window.close(), 1000);
+        } else {
+          updateStatus('Unable to communicate with main window. Please close this window manually.');
+        }
+      } else {
+        updateStatus('Authentication failed');
+        setTimeout(() => {
+          if (window.opener) {
+            window.opener.postMessage({ type: 'auth-failed', error: 'No token received' }, '*');
+            window.close();
+          }
+        }, 3000);
+      }
+    } catch (error) {
+      updateStatus('An error occurred: ' + error.message);
+      console.error('Auth error:', error);
+    }
+  </script>
+</body>
+</html>

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/App.css

@@ -0,0 +1,40 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 6vmin;
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 18s linear;
+  }
+}
+
+.App-header {
+  background: #190e10;  /* Deep, dark maroon base */
+  color: #F5E6E8; /* Soft off-white for contrast */
+  
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(5px + 2vmin);
+
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/App.js

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import CircularProgress from '@mui/material/CircularProgress';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import logo from './Icons/settings-2.svg';
+import './App.css';
+import IntialSetting from './Components/IntialSetting.js';
+import AiPage from './Components/AiPage.js';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<Home />} />
+        <Route path='/AiPage' element={<AiPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function Home() {
+  const [showSettings, setShowSettings] = useState(false);
+  const [initializing, setInitializing] = useState(false);
+  // Snackbar state
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success",
+  });
+
+  const handleInitializationStart = () => {
+    setInitializing(true);
+  };
+
+  // Function to open the snackbar
+  const openSnackbar = (message, severity = "success") => {
+    setSnackbar({ open: true, message, severity });
+  };
+
+  // Function to close the snackbar
+  const closeSnackbar = (event, reason) => {
+    if (reason === 'clickaway') return;
+    setSnackbar(prev => ({ ...prev, open: false }));
+  };
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        {initializing ? (
+          <>
+            <CircularProgress style={{ margin: '20px' }} />
+            <p>Initializing the app. This may take a few minutes...</p>
+          </>
+        ) : (
+          <>
+            <img 
+              src={logo} 
+              className="App-logo" 
+              alt="logo" 
+              onClick={() => setShowSettings(true)}
+              style={{ cursor: 'pointer' }}
+            />
+            <p>Enter the settings to proceed</p>
+          </>
+        )}
+
+        {/* InitialSetting */}
+        {showSettings && (
+          <IntialSetting 
+            trigger={showSettings} 
+            setTrigger={setShowSettings}
+            onInitializationStart={handleInitializationStart}
+            openSnackbar={openSnackbar}
+            closeSnackbar={closeSnackbar}
+          />
+        )}
+      </header>
+      
+      {/* Render the Snackbar*/}
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={snackbar.severity === 'success' ? 3000 : null}
+        onClose={closeSnackbar}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert onClose={closeSnackbar} severity={snackbar.severity} variant="filled" sx={{ width: '100%' }}>
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+}
+
+export default App;

frontend/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/Components/AiComponents/ChatComponents/Evaluate.css

@@ -0,0 +1,113 @@
+/* Container for the Evaluate component */
+.evaluate-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+
+/* Form Control */
+.evaluate-form-control {
+  width: 100%;
+}
+
+/* Input label */
+.evaluate-form-control .MuiInputLabel-root {
+  color: #26a8dc !important;
+}
+.evaluate-form-control .MuiInputLabel-root.Mui-focused {
+  color: #26a8dc !important;
+}
+
+/* Dropdown arrow icon */
+.evaluate-form-control .MuiSelect-icon {
+  color: #26a8dc !important;
+}
+
+/* Select’s OutlinedInput */
+.evaluate-outlined-input {
+  background-color: transparent !important;
+  color: #26a8dc !important;
+}
+
+/* Override the default notched outline to have a #ddd border */
+.evaluate-outlined-input .MuiOutlinedInput-notchedOutline {
+  border-color: #26a8dc !important;
+}
+
+/* Container for the rendered chips */
+.chip-container {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 0.65rem !important;
+}
+
+/* Chips */
+.evaluate-chip {
+  background-color: #b70303 !important;
+  color: #fff !important;
+  border-radius: 0.5rem !important;
+}
+
+/* Remove background from chip close button and make its icon #ddd */
+.evaluate-chip .MuiChip-deleteIcon {
+  background: none !important;
+  color: #ddd !important;
+}
+
+/* Styling for the dropdown menu */
+.evaluate-menu {
+  background-color: #2b2b2b !important;
+  border: 0.01rem solid #26a8dc !important;
+  color: #ddd !important;
+}
+
+/* Dropdown menu item hover effect: lighter shade */
+.evaluate-menu .MuiMenuItem-root:hover {
+  background-color: #3b3b3b !important;
+}
+
+/* Dropdown menu item selected effect */
+.evaluate-menu .MuiMenuItem-root.Mui-selected {
+  background-color: #4b4b4b !important;
+}
+
+/* Evaluate button styling */
+.evaluate-button {
+  background-color: #FFC300 !important;
+  color: #2b2b2b !important;
+  width: auto !important;
+  padding: 6px 16px !important;
+  align-self: flex-start !important;
+}
+
+.evaluate-button:hover {
+  background-color: #b07508 !important;
+  color: #ddd !important;
+}
+
+/* No metrics message */
+.no-metrics-message {
+  text-align: center;
+  color: red;
+}
+
+/* Spinner styling */
+.custom-spinner {
+  width: 1.35rem;
+  height: 1.35rem;
+  border: 3px solid #3b7bdc;        /* Main Spinner */
+  border-top: 3px solid #434343;     /* Rotating path */
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite; 
+}
+
+/* Spinner animation */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

frontend/src/Components/AiComponents/ChatComponents/Evaluate.js

@@ -0,0 +1,142 @@
+import React, { useRef } from 'react';
+import { FaTimes, FaCheck, FaSpinner } from 'react-icons/fa';
+import { BsChevronLeft } from 'react-icons/bs';
+import CircularProgress from '@mui/material/CircularProgress';
+import Sources from './Sources';
+import Evaluate from './Evaluate'
+import '../Sidebars/RightSidebar.css';
+
+function RightSidebar({
+  isOpen,
+  rightSidebarWidth,
+  setRightSidebarWidth,
+  toggleRightSidebar,
+  sidebarContent,
+  tasks = [],
+  tasksLoading,
+  sources = [],
+  sourcesLoading,
+  onTaskClick,
+  onSourceClick,
+  evaluation
+}) {
+  const minWidth = 200;
+  const maxWidth = 450;
+  const sidebarRef = useRef(null);
+
+  // Called when the user starts resizing the sidebar.
+  const startResize = (e) => {
+    e.preventDefault();
+    sidebarRef.current.classList.add("resizing"); // Add the "resizing" class to the sidebar when resizing
+    document.addEventListener("mousemove", resizeSidebar);
+    document.addEventListener("mouseup", stopResize);
+  };
+
+  const resizeSidebar = (e) => {
+    let newWidth = window.innerWidth - e.clientX;
+    if (newWidth < minWidth) newWidth = minWidth;
+    if (newWidth > maxWidth) newWidth = maxWidth;
+    setRightSidebarWidth(newWidth);
+  };
+
+  const stopResize = () => {
+    sidebarRef.current.classList.remove("resizing"); // Remove the "resizing" class from the sidebar when resizing stops
+    document.removeEventListener("mousemove", resizeSidebar);
+    document.removeEventListener("mouseup", stopResize);
+  };
+
+  // Default handler for source clicks: open the link in a new tab.
+  const handleSourceClick = (source) => {
+    if (source && source.link) {
+      window.open(source.link, '_blank');
+    }
+  };
+
+  // Helper function to return the proper icon based on task status.
+  const getTaskIcon = (task) => {
+    // If the task is a simple string, default to the completed icon.
+    if (typeof task === 'string') {
+      return <FaCheck />;
+    }
+    // Use the status field to determine which icon to render.
+    switch (task.status) {
+      case 'RUNNING':
+        // FaSpinner is used for running tasks. The CSS class "spin" can be defined to add animation.
+        return <FaSpinner className="spin"/>;
+      case 'DONE':
+        return <FaCheck className="checkmark" />;
+      case 'FAILED':
+        return <FaTimes className="x" />;
+      default:
+        return <FaCheck />;
+    }
+  };
+
+  return (
+    <>
+      <nav
+        ref={sidebarRef}
+        className={`right-side-bar ${isOpen ? "open" : "closed"}`}
+        style={{ width: isOpen ? rightSidebarWidth : 0 }}
+      >
+        <div className="sidebar-header">
+          <h3>
+              {sidebarContent === "sources"
+                ? "Sources"
+                : sidebarContent === "evaluate"
+                ? "Evaluation"
+                : "Tasks"}
+            </h3>
+          <button className="close-btn" onClick={toggleRightSidebar}>
+            <FaTimes />
+          </button>
+        </div>
+        <div className="sidebar-content">
+          {sidebarContent === "sources" ? ( // If the sidebar content is "sources", show the sources component
+            sourcesLoading ? (
+              <div className="tasks-loading">
+                <CircularProgress size={20} sx={{ color: '#ccc' }} />
+                <span className="loading-tasks-text">Generating sources...</span>
+              </div>
+            ) : (
+              <Sources sources={sources} handleSourceClick={onSourceClick || handleSourceClick} />
+            )
+          ) 
+          // If the sidebar content is "evaluate", show the evaluation component
+          : sidebarContent === "evaluate" ? (
+            <Evaluate evaluation={evaluation} />
+          ) : (
+            // Otherwise, show tasks
+            tasksLoading ? (
+              <div className="tasks-loading">
+                <CircularProgress size={20} sx={{ color: '#ccc' }} />
+                <span className="loading-tasks-text">Generating tasks...</span>
+              </div>
+            ) : (
+              <ul className="nav-links" style={{ listStyle: 'none', padding: 0 }}>
+                {tasks.map((task, index) => (
+                  <li key={index} className="task-item">
+                    <span className="task-icon">
+                      {getTaskIcon(task)}
+                    </span>
+                    <span className="task-text">
+                      {typeof task === 'string' ? task : task.task}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )
+          )}
+        </div>
+        <div className="resizer" onMouseDown={startResize}></div>
+      </nav>
+      {!isOpen && (
+        <button className="toggle-btn right-toggle" onClick={toggleRightSidebar}>
+          <BsChevronLeft />
+        </button>
+      )}
+    </>
+  );
+}
+
+export default RightSidebar;

frontend/src/Components/AiComponents/ChatComponents/Graph.css

@@ -0,0 +1,85 @@
+/* Fullscreen overlay */
+.graph-dialog-container {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100vh !important;
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  z-index: 1000 !important;
+  overflow: hidden !important;
+}
+
+/* Inner dialog container */
+.graph-dialog-inner {
+  position: relative !important;
+  border-radius: 12px !important;
+  padding: 1rem !important;
+  width: 45% !important;
+  max-width: 100% !important;
+  background-color: #1e1e1e !important;
+  min-height: 80vh !important;
+  overflow: hidden !important; /* Prevent scrolling */
+}
+
+/* Header styling */
+.graph-dialog-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 16px !important;
+  background-color: #1e1e1e !important;
+  color: #fff !important;
+}
+
+/* Title styling */
+.graph-dialog-title {
+  font-weight: bold !important;
+  font-size: 1.5rem !important;
+  margin: 0 !important;
+}
+
+/* Close button styling */
+.graph-dialog .close-btn {
+  position: absolute !important;
+  top: 16px !important;
+  right: 16px !important;
+  background: none !important;
+  color: white !important;
+  padding: 7px !important;
+  border-radius: 5px !important;
+  cursor: pointer !important;
+}
+.graph-dialog-close-btn:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: white !important;
+}
+
+/* Content area */
+.graph-dialog-content {
+  padding: 0 !important;
+  background-color: #1e1e1e !important;
+  height: 550px !important;
+  overflow: hidden !important;
+}
+
+/* Loading state */
+.graph-loading {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  height: 50% !important;
+  color: #fff !important;
+}
+
+/* Error message */
+.graph-error {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  height: 50% !important;
+  color: red !important;
+}

frontend/src/Components/AiComponents/ChatComponents/Graph.js

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import './Graph.css';
+
+export default function Graph({ open, onClose, payload, onError }) {
+  const [graphHtml, setGraphHtml] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    // if (open && payload) {
+    if (open) {
+      setLoading(true);
+      setError("");
+      fetch("/action/graph", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify()
+        // body: JSON.stringify(payload)
+      })
+        .then(res => res.json())
+        .then(data => {
+          // If the API returns an error, throw it to be caught below.
+          if (data.error) {
+            throw new Error(data.error);
+          }
+          setGraphHtml(data.result);
+          setLoading(false);
+        })
+        .catch(err => {
+          console.error("Error fetching graph:", err);
+          const errMsg = err.message || "Error fetching graph.";
+          setError(errMsg);
+          setLoading(false);
+          // Propagate error to parent using the onError callback.
+          if (onError && typeof onError === 'function') {
+            onError(errMsg);
+          }
+        });
+    }
+  }, [open, onError]);
+  // }, [open, payload, onError]);
+
+  if (!open) return null;
+
+  return (
+    <div className="graph-dialog-container" onClick={onClose}>
+      <div className="graph-dialog-inner" onClick={e => e.stopPropagation()}>
+        <div className="graph-dialog-header">
+          <h3 className="graph-dialog-title">Graph Display</h3>
+          <button className="graph-dialog close-btn" onClick={onClose}>
+            <FaTimes />
+          </button>
+        </div>
+        <div className="graph-dialog-content">
+          {loading ? (
+            <div className="graph-loading">
+              <p>Loading Graph...</p>
+            </div>
+          ) : error ? (
+            <p className="graph-error">{error}</p>
+          ) : (
+            <iframe
+              title="Graph Display"
+              srcDoc={graphHtml}
+              style={{ border: "none", width: "100%", height: "625px" }}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/Components/AiComponents/ChatComponents/SourcePopup.css

@@ -0,0 +1,77 @@
+.source-popup {
+    position: absolute; /* Crucial for positioning */
+    /* transform is set inline based on calculation */
+    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+    opacity: 1; /* Start visible, manage via state */
+    pointer-events: auto; /* Allow interaction */
+    width: 300px; /* Or max-width */
+    max-width: 90vw;
+  }
+  
+.source-popup-card {
+    background-color: #333 !important; /* Dark background */
+    color: #eee !important; /* Light text */
+    border: 1px solid #555 !important;
+    border-radius: 8px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+    padding: 0.5rem !important; /* Reduced padding */
+  }
+  
+.source-popup-card .MuiCardContent-root {
+     padding: 8px !important; /* Further reduce padding inside content */
+     padding-bottom: 8px !important; /* Ensure bottom padding is also reduced */
+  }
+  
+  
+.source-popup-title {
+    font-size: 0.9rem !important; /* Slightly smaller title */
+    font-weight: 600 !important;
+    margin-bottom: 0.3rem !important;
+    line-height: 1.3 !important;
+    color: #eee !important; /* Ensure title color */
+  }
+  
+.source-popup-title a {
+     color: inherit !important; /* Inherit color for link */
+     text-decoration: none !important;
+  }
+.source-popup-title a:hover {
+     text-decoration: underline !important;
+  }
+  
+  
+.source-popup-link-info {
+    display: flex !important;
+    align-items: center !important;
+    font-size: 0.75rem !important; /* Smaller domain text */
+    color: #bbb !important;
+    margin-bottom: 0.4rem !important; /* Space below link info */
+  }
+  
+.source-popup-icon {
+    width: 14px !important; /* Smaller icon */
+    height: 14px !important;
+    margin-right: 0.3rem !important;
+    vertical-align: middle; /* Align icon better */
+    filter: brightness(1.1); /* Slightly brighter icon */
+  }
+  
+.source-popup-domain {
+    vertical-align: middle !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+.source-popup-description {
+    font-size: 0.8rem !important; /* Smaller description text */
+    color: #ccc !important;
+    line-height: 1.4 !important;
+    /* Limit the number of lines shown */
+    display: -webkit-box;
+    -webkit-line-clamp: 3; /* Show max 3 lines */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 0.4rem !important; /* Space above description */
+  }

frontend/src/Components/AiComponents/ChatComponents/SourcePopup.js

@@ -0,0 +1,187 @@
+import React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import './SourcePopup.css';
+
+// Helper function to extract a friendly domain name from a URL.
+const getDomainName = (url) => {
+  try {
+    if (!url) return 'Unknown Source';
+    const hostname = new URL(url).hostname;
+    const domain = hostname.startsWith('www.') ? hostname.slice(4) : hostname;
+    const parts = domain.split('.');
+    return parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
+  } catch (err) {
+    console.error("Error parsing URL for domain name:", url, err);
+    return 'Invalid URL';
+  }
+};
+
+// Helper function for Levenshtein distance calculation
+function levenshtein(a, b) {
+  if (a.length === 0) return b.length;
+  if (b.length === 0) return a.length;
+  const matrix = [];
+  for (let i = 0; i <= b.length; i++) matrix[i] = [i];
+  for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
+  for (let i = 1; i <= b.length; i++) {
+    for (let j = 1; j <= a.length; j++) {
+      if (b.charAt(i - 1) === a.charAt(j - 1)) {
+        matrix[i][j] = matrix[i - 1][j - 1];
+      } else {
+        matrix[i][j] = Math.min(
+          matrix[i - 1][j - 1] + 1,
+          matrix[i][j - 1] + 1,
+          matrix[i - 1][j] + 1
+        );
+      }
+    }
+  }
+  return matrix[b.length][a.length];
+}
+
+// SourcePopup component to display source information and excerpts
+function SourcePopup({ 
+  sourceData, 
+  excerptsData, 
+  position, 
+  onMouseEnter, 
+  onMouseLeave,
+  statementText 
+}) {
+  if (!sourceData || !position) return null;
+
+  const domain = getDomainName(sourceData.link);
+  let hostname = '';
+  try {
+    hostname = sourceData.link ? new URL(sourceData.link).hostname : '';
+  } catch (err) {
+    hostname = sourceData.link || ''; // Fallback to link if URL parsing fails
+  }
+
+  let displayExcerpt = null;
+  const sourceIdStr = String(sourceData.id);
+
+  // Find the relevant excerpt
+  if (excerptsData && Array.isArray(excerptsData) && statementText) {
+    let foundExcerpt = null;
+    let foundByFuzzy = false;
+    const norm = s => s.replace(/\s+/g, ' ').trim();
+    const lower = s => norm(s).toLowerCase();
+    const statementNorm = norm(statementText);
+    const statementLower = lower(statementText);
+    console.log(`[SourcePopup] Searching for excerpt for source ID ${sourceIdStr}: ${statementText}`);
+
+    // Iterate through the list of statement-to-excerpt mappings
+    for (const entry of excerptsData) {
+      const [thisStatement, sourcesMap] = Object.entries(entry)[0];
+      const thisNorm = norm(thisStatement);
+      const thisLower = lower(thisStatement);
+      console.log(`[SourcePopup] Checking against statement: ${thisStatement}`);
+
+      // Normalized exact match
+      if (thisNorm === statementNorm && sourcesMap && sourceIdStr in sourcesMap) {
+        foundExcerpt = sourcesMap[sourceIdStr];
+        break;
+      }
+      // Case-insensitive match
+      if (thisLower === statementLower && sourcesMap && sourceIdStr in sourcesMap) {
+        foundExcerpt = sourcesMap[sourceIdStr];
+        break;
+      }
+      // Substring containment
+      if (
+        (statementNorm && thisNorm && statementNorm.includes(thisNorm)) ||
+        (thisNorm && statementNorm && thisNorm.includes(statementNorm))
+      ) {
+        if (sourcesMap && sourceIdStr in sourcesMap) {
+          foundExcerpt = sourcesMap[sourceIdStr];
+          foundByFuzzy = true;
+          break;
+        }
+      }
+      // Levenshtein distance
+      if (
+        levenshtein(statementNorm, thisNorm) <= 5 &&
+        sourcesMap && sourceIdStr in sourcesMap
+      ) {
+        foundExcerpt = sourcesMap[sourceIdStr];
+        foundByFuzzy = true;
+        break;
+      }
+    }
+
+    // Set displayExcerpt based on what was found
+    if (foundExcerpt && foundExcerpt.toLowerCase() !== 'excerpt not found') {
+      if (foundByFuzzy) {
+        // Fuzzy match found an excerpt
+        console.log("[SourcePopup] Fuzzy match found an excerpt:", foundExcerpt);
+      } else {
+        // Exact match found an excerpt
+        console.log("[SourcePopup] Exact match found an excerpt:", foundExcerpt);
+      }
+      // Exact match found an excerpt
+      displayExcerpt = foundExcerpt;
+    } else if (foundExcerpt) {
+      // Handle case where LLM explicitly said "Excerpt not found"
+      displayExcerpt = "Relevant excerpt could not be automatically extracted.";
+      console.log("[SourcePopup] Excerpt marked as not found or invalid type:", foundExcerpt);
+    } else {
+      // Excerpt for this specific source ID wasn't found in the loaded data
+      displayExcerpt = "Excerpt not found for this citation.";
+      console.log(`[SourcePopup] Excerpt not found for source ID ${sourceIdStr}: ${statementText}`);
+    }
+  }
+
+  return (
+    <div
+      className="source-popup"
+      style={{
+        position: 'absolute', // Use absolute positioning
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        transform: 'translate(-50%, -100%)', // Center above the reference
+        zIndex: 1100, // Ensure it's above other content
+      }}
+      onMouseEnter={onMouseEnter} // Keep popup open when mouse enters it
+      onMouseLeave={onMouseLeave} // Hide popup when mouse leaves it
+    >
+      <Card variant="outlined" className="source-popup-card">
+        <CardContent>
+          <Typography variant="subtitle2" component="div" className="source-popup-title" gutterBottom>
+            <Link href={sourceData.link} target="_blank" rel="noopener noreferrer" underline="hover" color="inherit">
+              {sourceData.title || 'Untitled Source'}
+            </Link>
+          </Typography>
+          <Typography variant="body2" className="source-popup-link-info">
+            {hostname && (
+              <img
+                src={`https://www.google.com/s2/favicons?domain=${hostname}&sz=16`}
+                alt=""
+                className="source-popup-icon"
+              />
+            )}
+            <span className="source-popup-domain">{domain}</span>
+          </Typography>
+          {displayExcerpt !== null && (
+             <Typography variant="caption" className="source-popup-excerpt" display="block" sx={{ mt: 1 }}>
+               <Link
+                  href={`${sourceData.link}#:~:text=${encodeURIComponent(displayExcerpt)}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  underline="none"
+                  color="inherit"
+                >
+                  {displayExcerpt}
+                </Link>
+             </Typography>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default SourcePopup;

frontend/src/Components/AiComponents/ChatComponents/SourceRef.css

@@ -0,0 +1,21 @@
+.source-reference {
+    display: inline-block;
+    vertical-align: super;
+    font-size: 0.75em;
+    line-height: 1;
+    margin: 0 0.15em;
+    padding: 0.2em 0.3em;
+    background-color: rgba(135, 131, 120, 0.265);
+    color: #a9a9a9;
+    border-radius: 0.35em;
+    cursor: pointer; 
+    transition: background-color 0.2s ease, color 0.2s ease;
+    font-weight: 540;
+    position: relative; 
+    top: 0.35em;
+  }
+  
+.source-reference:hover {
+    background-color: rgba(135, 131, 120, 0.463);
+    color: #ffffff;
+}

frontend/src/Components/AiComponents/ChatComponents/Sources.css

@@ -0,0 +1,70 @@
+/* Container for the sources list */
+.sources-container {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 0.65rem !important; 
+  padding: 0 !important;
+}
+
+/* Styling for the sources loading text */
+.loading-sources {
+  padding: 1rem !important;
+}
+
+/* Styling for each Card component */
+.source-card {
+  background-color: #3e3e3eec !important;
+  border-radius: 1rem !important;
+  color: #fff !important;
+  cursor: pointer !important;
+}
+.source-card:hover {
+  background-color: #262626e5 !important;
+}
+
+/* Styling for the CardContent title (header) - reduced text size slightly */
+.source-title {
+  color: #fff !important;
+  margin-top: -0.5rem !important;
+  margin-bottom: 0.4rem !important;
+  font-size: 1rem !important;
+}
+
+/* Styling for the link row (icon, domain, bullet, serial number) */
+.source-link {
+  display: flex !important;
+  align-items: center !important;
+  font-size: 0.8rem !important;
+  color: #c1c1c1 !important;
+  margin-bottom: 0.5rem !important;
+}
+
+/* Styling for the favicon icon - reduced size and increased brightness */
+.source-icon {
+  width: 0.88rem !important;
+  height: 0.88rem !important;
+  margin-right: 0.3rem !important;
+  filter: brightness(1.2) !important;  /* Makes the icon brighter */
+}
+
+/* Styling for the domain text */
+.source-domain {
+  vertical-align: middle !important;
+}
+
+/* Styling for the separator bullet */
+.separator {
+  margin: 0 0.3rem !important;
+}
+
+/* Styling for the serial number */
+.source-serial {
+  font-size: 0.8rem !important;
+  color: #c1c1c1 !important;
+}
+
+/* Styling for the CardContent description */
+.source-description {
+  color: #e8e8e8 !important;
+  margin-bottom: -0.65rem !important;
+}

frontend/src/Components/AiComponents/ChatComponents/Sources.js

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import './Sources.css';
+
+// Helper function to extract a friendly domain name from a URL.
+const getDomainName = (url) => {
+  try {
+    const hostname = new URL(url).hostname;
+    // Remove "www." if present.
+    const domain = hostname.startsWith('www.') ? hostname.slice(4) : hostname;
+    // Return the first part in title case.
+    const parts = domain.split('.');
+    return parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
+  } catch (err) {
+    return url;
+  }
+};
+
+export default function Sources({ sources, handleSourceClick }) {
+  // "sources" prop is the payload passed from the parent.
+  const [fetchedSources, setFetchedSources] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchSources = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const startTime = Date.now(); // record start time
+    try {
+      // Use sources.payload if it exists.
+      const bodyData = sources && sources.payload ? sources.payload : sources;
+      const res = await fetch("/action/sources", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(bodyData)
+      });
+      const data = await res.json();
+      // Backend returns {"result": [...]}
+      setFetchedSources(data.result);
+    } catch (err) {
+      console.error("Error fetching sources:", err);
+      setError("Error fetching sources.");
+    }
+    const elapsed = Date.now() - startTime;
+    // Ensure that the loading state lasts at least 1 second.
+    if (elapsed < 500) {
+      setTimeout(() => {
+        setLoading(false);
+      }, 500 - elapsed);
+    } else {
+      setLoading(false);
+    }
+  }, [sources]);
+
+  useEffect(() => {
+    if (sources) {
+      fetchSources();
+    }
+  }, [sources, fetchSources]);
+
+  if (loading) {
+    return (
+      <Box className="sources-container">
+        <Typography className="loading-sources" variant="body2">Loading Sources...</Typography>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box className="sources-container">
+        <Typography variant="body2" color="error">{error}</Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="sources-container">
+      {fetchedSources.map((source, index) => {
+        const domain = getDomainName(source.link);
+        let hostname = '';
+        try {
+          hostname = new URL(source.link).hostname;
+        } catch (err) {
+          hostname = source.link;
+        }
+        return (
+          <Card
+            key={index}
+            variant="outlined"
+            className="source-card"
+            onClick={() => handleSourceClick(source)}
+          >
+            <CardContent>
+              {/* Header/Title */}
+              <Typography variant="h6" component="div" className="source-title">
+                {source.title}
+              </Typography>
+              {/* Link info: icon, domain, bullet, serial number */}
+              <Typography variant="body2" className="source-link">
+                <img 
+                  src={`https://www.google.com/s2/favicons?domain=${hostname}`} 
+                  alt={domain} 
+                  className="source-icon" 
+                />
+                <span className="source-domain">{domain}</span>
+                <span className="separator"> • </span>
+                <span className="source-serial">{index + 1}</span>
+              </Typography>
+              {/* Description */}
+              <Typography variant="body2" className="source-description">
+                {source.description}
+              </Typography>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </Box>
+  );
+}

frontend/src/Components/AiComponents/ChatComponents/Streaming.css

@@ -0,0 +1,732 @@
+/* Tables and Pre blocks spacing */
+.streaming-content pre + p,
+.streaming-content pre + ul,
+.streaming-content pre + ol,
+.streaming-content pre + blockquote,
+.streaming-content pre + h1,
+.streaming-content pre + h2,
+.streaming-content pre + h3,
+.streaming-content pre + h4,
+.streaming-content pre + h5,
+.streaming-content pre + h6,
+.table-container + p,
+.table-container + ul,
+.table-container + ol,
+.table-container + blockquote,
+.table-container + h1,
+.table-container + h2,
+.table-container + h3,
+.table-container + h4,
+.table-container + h5,
+.table-container + h6 {
+  margin-top: 1rem !important;
+}
+
+/* Streaming cursor effect */
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+.streaming-content .streaming-cursor {
+  animation: blink 1s infinite;
+  font-weight: normal;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .streaming-content {
+    font-size: 0.95rem;
+  }
+  
+  .code-block-container {
+    margin: 0.75rem 0.5rem !important;
+    border-radius: 0 !important;
+  }
+  
+  .streaming-content code {
+    font-size: 0.8em;
+  }
+  
+  .table-container {
+    margin: 0.75rem -0.5rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+}
+
+/* Base streaming content container */
+.streaming-content {
+  font-family: inherit;
+  line-height: 2rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;          
+  padding: 0;
+}
+
+/* Reset margin/padding for all descendants */
+.streaming-content * {
+  margin: 0;
+  padding: 0;
+}
+
+/* Paragraphs */
+.streaming-content p {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/* First paragraph should have no top margin */
+.streaming-content p:first-child {
+  margin-top: 0 !important;
+}
+
+/* Consecutive paragraphs */
+.streaming-content p + p {
+  margin-top: 0.25rem !important;
+}
+
+/* Headings */
+.streaming-content h1,
+.streaming-content h2,
+.streaming-content h3,
+.streaming-content h4,
+.streaming-content h5,
+.streaming-content h6 {
+  margin-top: 1rem !important;
+  margin-bottom: 0.75rem !important;
+  font-weight: bold;
+}
+
+/* First heading should have no top margin */
+.streaming-content h1:first-child,
+.streaming-content h2:first-child,
+.streaming-content h3:first-child,
+.streaming-content h4:first-child,
+.streaming-content h5:first-child,
+.streaming-content h6:first-child {
+  margin-top: 0 !important;
+}
+
+/* Heading sizes */
+.streaming-content h1 { font-size: 2em; }
+.streaming-content h2 { font-size: 1.5em; }
+.streaming-content h3 { font-size: 1.17em; }
+.streaming-content h4 { font-size: 1em; }
+.streaming-content h5 { font-size: 0.83em; }
+.streaming-content h6 { font-size: 0.67em; }
+
+/* Lists */
+.streaming-content ul,
+.streaming-content ol {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+  padding-left: 1.5rem !important;   
+  white-space: normal !important;     
+}
+
+/* Unordered list styling */
+.streaming-content ul {
+  list-style-type: disc;
+}
+
+/* Nested unordered lists */
+.streaming-content ul ul {
+  list-style-type: circle;
+}
+
+.streaming-content ul ul ul {
+  list-style-type: square;
+}
+
+/* Ordered list styling */
+.streaming-content ol {
+  list-style-type: decimal;
+}
+
+/* Nested ordered lists */
+.streaming-content ol ol {
+  list-style-type: lower-alpha;
+}
+
+.streaming-content ol ol ol {
+  list-style-type: lower-roman;
+}
+
+/* Lists after paragraphs need less top margin */
+.streaming-content p + ul,
+.streaming-content p + ol {
+  margin-top: -0.25rem !important;
+}
+
+/* Lists after headings */
+.streaming-content h1 + ul,
+.streaming-content h2 + ul,
+.streaming-content h3 + ul,
+.streaming-content h4 + ul,
+.streaming-content h5 + ul,
+.streaming-content h6 + ul,
+.streaming-content h1 + ol,
+.streaming-content h2 + ol,
+.streaming-content h3 + ol,
+.streaming-content h4 + ol,
+.streaming-content h5 + ol,
+.streaming-content h6 + ol {
+  margin-top: -0.25rem !important;
+}
+
+/* List items */
+.streaming-content li {
+  margin-bottom: 0.6rem !important;
+  line-height: 2rem;
+}
+
+/* Last item in a list needs less margin */
+.streaming-content li:last-child {
+  margin-bottom: 0.3rem !important;
+}
+
+/* Nested lists */
+.streaming-content li ul,
+.streaming-content li ol {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+/* Nested list items */
+.streaming-content li ul li,
+.streaming-content li ol li {
+  margin-bottom: 0.4rem !important;
+  line-height: 2rem;
+}
+
+/* Deep nested list items */
+.streaming-content li ul li ul li,
+.streaming-content li ol li ol li,
+.streaming-content li ul li ol li,
+.streaming-content li ol li ul li {
+  margin-bottom: 0.3rem !important;
+  line-height: 2rem;
+}
+
+/* Code Blocks */
+.code-block-container {
+  margin: 1rem 0 0 0 !important;
+  border-radius: 8px !important;
+  background-color: #0d1117 !important;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.code-block-header {
+  background-color: #161b22;
+  color: #e6edf3;
+  padding: 0.5rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.3);
+}
+
+/* Copy button */
+.code-copy-button {
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: inherit;
+  font-size: 1.05rem;
+  position: relative;
+}
+
+.code-copy-button:hover {
+  opacity: 1;
+}
+
+.code-copy-button:hover svg {
+  filter: brightness(0.65);
+}
+
+.code-copy-button.copied {
+  color: inherit;
+  font-size: 1.05rem;
+}
+
+.code-copy-button.copied:hover {
+  opacity: 1;
+}
+
+/* Code block content */
+.code-block-container pre {
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow-x: auto;
+}
+
+/* The actual syntax highlighter container */
+.code-block-container > div:last-child {
+  background-color: #0d1117 !important;
+  max-height: 65rem !important;
+  max-width: 45rem !important;
+  overflow: auto !important;
+}
+
+/* Plain pre blocks (without syntax highlighting) */
+.streaming-content pre {
+  background-color: #0d1117;
+  color: #e6edf3;
+  padding: 0;
+  border-radius: 0.75rem;
+  overflow-x: auto;
+  margin-top: 1rem;
+  margin-bottom: -1.25rem;
+  font-family: 'inherit';
+  font-size: 1.17rem;
+  line-height: 2rem;
+  border: 0.3rem solid #30363d4d;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Pre blocks inside code blocks */
+.streaming-content pre code {
+  padding: 1rem !important;
+  display: block;
+}
+
+/* Syntax highlighter specific styles */
+.code-block-container pre > div {
+  background-color: transparent !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 0.875em;
+  line-height: 2rem;
+}
+
+/* Custom scrollbar for code blocks */
+.code-block-container::-webkit-scrollbar,
+.code-block-container pre::-webkit-scrollbar,
+.code-block-container > div::-webkit-scrollbar,
+.streaming-content pre::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.code-block-container::-webkit-scrollbar-track,
+.code-block-container pre::-webkit-scrollbar-track,
+.code-block-container > div::-webkit-scrollbar-track,
+.streaming-content pre::-webkit-scrollbar-track {
+  background: rgba(139, 148, 158, 0.1);
+  border-radius: 4px;
+}
+
+.code-block-container::-webkit-scrollbar-thumb,
+.code-block-container pre::-webkit-scrollbar-thumb,
+.code-block-container > div::-webkit-scrollbar-thumb,
+.streaming-content pre::-webkit-scrollbar-thumb {
+  background: rgba(139, 148, 158, 0.4);
+  border-radius: 4px;
+}
+
+.code-block-container::-webkit-scrollbar-thumb:hover,
+.code-block-container pre::-webkit-scrollbar-thumb:hover,
+.code-block-container > div::-webkit-scrollbar-thumb:hover,
+.streaming-content pre::-webkit-scrollbar-thumb:hover {
+  background: rgba(139, 148, 158, 0.6);
+}
+
+/* Inline code */
+.streaming-content code {
+  background-color: rgba(175, 184, 193, 0.2);
+  color: #0969da;
+  padding: 0.2rem 0.4rem;
+  border-radius: 6px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 0.85em;
+  font-weight: 600;
+  white-space: pre-wrap;
+}
+
+/* Dark mode support for inline code */
+@media (prefers-color-scheme: dark) {
+  .streaming-content code {
+    background-color: rgba(110, 118, 129, 0.4);
+    color: #79c0ff;
+    font-weight: 100;
+  }
+}
+
+/* Code inside pre blocks */
+.streaming-content pre code,
+.code-block-container code,
+.code-block-container pre code {
+  background-color: transparent !important;
+  color: inherit;
+  padding: 0;
+  font-weight: normal;
+  font-size: 0.95rem !important;
+}
+
+/* Ensure code in blockquotes still has styling */
+.markdown-blockquote code {
+  background-color: rgba(31, 35, 40, 0.12);
+  color: #0969da;
+  font-weight: 600;
+}
+
+/* Table Container */
+.table-container {
+  margin: 1rem 0 0.5rem 0;
+  max-width: 45rem !important;
+  position: relative;
+  border: none;
+  border-radius: none;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.table-container table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #e5e7eb80;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0,0.05);
+  overflow-x: auto;
+}
+
+.table-container th,
+.table-container td {
+  border: 1px solid #e5e7eb80;
+  padding: 0.2rem 0.4rem;
+  text-align: center !important;
+  font-size: 0.95rem;
+  vertical-align: middle;
+  white-space: wrap;
+}
+
+.table-container th {
+  background-color: #2b181bb7;
+  font-weight: 700;
+  color: inherit;
+}
+
+/* Table copy button */
+.table-copy-button {
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  font-size: 1.05rem;
+  margin-bottom: 0.5rem;
+  position: relative;
+}
+
+.table-container:hover .table-copy-button {
+  opacity: 1;
+}
+
+.table-copy-button:hover {
+  opacity: 1;
+}
+
+.table-copy-button:hover svg {
+  filter: brightness(0.65);
+}
+
+.table-copy-button.copied {
+  color: inherit;
+  opacity: 1 !important;
+  font-size: 1.05rem;
+}
+
+.table-copy-button.fading {
+  opacity: 0 !important;
+}
+
+/* Table download button */
+.table-download-button {
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  font-size: 1.05rem;
+  margin-top: 0.5rem;
+  position: relative;
+}
+
+.table-container:hover .table-download-button {
+  opacity: 1;
+}
+
+.table-download-button:hover {
+  opacity: 1;
+}
+
+.table-download-button:hover svg {
+  filter: brightness(0.65);
+}
+
+.table-download-button.downloaded {
+  color: inherit;
+  opacity: 1 !important;
+  font-size: 1.05rem;
+}
+
+.table-download-button.fading {
+  opacity: 0 !important;
+}
+
+/* Math expressions */
+.inline-math {
+  display: inline;
+  margin: 0;
+}
+
+.block-math {
+  display: block;
+  margin: 0;
+  text-align: left;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* KaTeX specific adjustments */
+.katex {
+  font-size: 1.1rem;
+  vertical-align: baseline;
+}
+
+.katex-display {
+  margin: 0;
+  text-align: left;
+}
+
+/* Ensure math expressions don't break responsive layout */
+.block-math .katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0;
+}
+
+.block-math .katex-display > .katex {
+  text-align: left;
+  padding-left: 0;
+}
+
+/* Make inline math blend with text */
+.streaming-content .inline-math .katex {
+  display: inline;
+  line-height: inherit;
+}
+
+/* Make block math blend with paragraphs */
+.streaming-content .block-math {
+  line-height: 2rem;
+  font-size: inherit;
+}
+
+/* Fix fraction sizing */
+.streaming-content .katex .frac-line {
+  border-bottom-width: 0.06em; /* Fraction line */
+}
+
+.streaming-content .katex .mfrac {
+  font-size: 1.2rem; /* Nested fractions */
+}
+
+/* Complex math elements */
+.streaming-content .katex .mord,
+.streaming-content .katex .mbin,
+.streaming-content .katex .mrel,
+.streaming-content .katex .minner,
+.streaming-content .katex .mop {
+  font-size: inherit; /* Ensure all math elements scale with text */
+}
+
+/* Tooltip styling */
+.tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(10px) scale(0.9);
+  transform-origin: bottom center;
+  margin-bottom: 0.65rem;
+  padding: 0.3rem 0.6rem;
+  background-color: #2b2b2b;
+  color: #e0e0e0;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  font-size: 0.85rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+/* Show the tooltip on hover */
+.code-copy-button:hover .tooltip,
+.table-copy-button:hover .tooltip,
+.table-download-button:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0) scale(1);
+}
+
+/* Links */
+.markdown-link {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s ease;
+}
+
+.markdown-link:hover {
+  color: #1d4ed8;
+  text-decoration: underline;
+}
+
+/* Blockquotes */
+.markdown-blockquote {
+  border-left: 4px solid #3b82f6;
+  padding-left: 1rem;
+  margin: 1rem 0; 
+  color: #4b5563;
+  font-style: italic;
+  background-color: #f0f9ff;
+  padding: 1rem;
+  border-radius: 0 8px 8px 0;
+}
+
+/* Strong/Bold text */
+.streaming-content strong {
+  font-weight: bold;
+}
+
+/* Emphasis/Italic text */
+.streaming-content em {
+  font-style: italic;
+}
+
+/* Horizontal rule */
+.streaming-content hr {
+  margin: 1.5rem 0;
+  border: 0;
+  height: 1px;
+  background: linear-gradient(to right, transparent, #e5e7eb, transparent);
+}
+
+/* Images */
+.streaming-content img {
+  max-width: 100%;
+  height: auto;
+  margin: 1rem 0;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Line breaks */
+.streaming-content br {
+  margin: 0;
+}
+
+/* Source reference styling (for citations) */
+.source-reference {
+  color: #2563eb;
+  cursor: pointer;
+  font-size: 0.75em;
+  padding: 0 0.2rem;
+  font-weight: 500;
+  transition: all 0.15s ease;
+}
+
+.source-reference:hover {
+  text-decoration: underline;
+  background-color: #dbeafe;
+  border-radius: 3px;
+}
+
+/* Ensure proper spacing when mixing elements */
+.streaming-content > :first-child {
+  margin-top: 0 !important;
+}
+
+.streaming-content > :last-child {
+  margin-bottom: 0 !important;
+}
+
+/* Adjacent element spacing rules */
+.streaming-content p + h1,
+.streaming-content p + h2,
+.streaming-content p + h3,
+.streaming-content p + h4,
+.streaming-content p + h5,
+.streaming-content p + h6,
+.streaming-content ul + h1,
+.streaming-content ul + h2,
+.streaming-content ul + h3,
+.streaming-content ul + h4,
+.streaming-content ul + h5,
+.streaming-content ul + h6,
+.streaming-content ol + h1,
+.streaming-content ol + h2,
+.streaming-content ol + h3,
+.streaming-content ol + h4,
+.streaming-content ol + h5,
+.streaming-content ol + h6 {
+  margin-top: 1.5rem !important;
+}
+
+/* Blockquote spacing */
+.streaming-content blockquote + p,
+.streaming-content p + blockquote {
+  margin-top: 0.75rem !important;
+}
+
+/* Code block spacing */
+.code-block-container + p,
+.code-block-container + ul,
+.code-block-container + ol,
+.code-block-container + blockquote,
+.code-block-container + h1,
+.code-block-container + h2,
+.code-block-container + h3,
+.code-block-container + h4,
+.code-block-container + h5,
+.code-block-container + h6 {
+  margin-top: 0 !important;
+}
+
+.streaming-content p + .code-block-container,
+.streaming-content ul + .code-block-container,
+.streaming-content ol + .code-block-container,
+.streaming-content blockquote + .code-block-container,
+.streaming-content h1 + .code-block-container,
+.streaming-content h2 + .code-block-container,
+.streaming-content h3 + .code-block-container,
+.streaming-content h4 + .code-block-container,
+.streaming-content h5 + .code-block-container,
+.streaming-content h6 + .code-block-container {
+  margin-top: 1rem !important;
+}

frontend/src/Components/AiComponents/ChatComponents/Streaming.js

@@ -0,0 +1,536 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Markdown from 'markdown-to-jsx';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { FcCheckmark } from 'react-icons/fc';
+import { BiSolidCopy } from 'react-icons/bi';
+import { LuDownload } from 'react-icons/lu';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+import './Streaming.css';
+import './SourceRef.css';
+
+// Math rendering components
+const InlineMath = ({ children }) => {
+  const mathRef = useRef(null);
+  
+  useEffect(() => {
+    if (mathRef.current && children) {
+      try {
+        katex.render(children.toString(), mathRef.current, {
+          throwOnError: false,
+          displayMode: false
+        });
+      } catch (e) {
+        mathRef.current.innerHTML = `<span style="color: red;">Error: ${e.message}</span>`;
+      }
+    }
+  }, [children]);
+  
+  return <span ref={mathRef} className="inline-math" />;
+};
+
+const BlockMath = ({ children }) => {
+  const mathRef = useRef(null);
+  
+  useEffect(() => {
+    if (mathRef.current && children) {
+      try {
+        katex.render(children.toString(), mathRef.current, {
+          throwOnError: false,
+          displayMode: true
+        });
+      } catch (e) {
+        mathRef.current.innerHTML = `<div style="color: red;">Error: ${e.message}</div>`;
+      }
+    }
+  }, [children]);
+  
+  return <div ref={mathRef} className="block-math" />;
+};
+
+// Helper function to normalize various citation formats (e.g., [1,2], [1, 2]) into the standard [1][2] format
+const normalizeCitations = (text) => {
+  if (!text) return '';
+
+  // First, temporarily replace math expressions to protect them from citation processing
+  const mathPlaceholders = [];
+  let mathIndex = 0;
+  
+  // Replace block math
+  text = text.replace(/\$\$([\s\S]*?)\$\$/g, (match) => {
+    const placeholder = `__BLOCK_MATH_${mathIndex}__`;
+    mathPlaceholders[mathIndex] = match;
+    mathIndex++;
+    return placeholder;
+  });
+  
+  // Replace inline math
+  text = text.replace(/\$([^\$\n]+?)\$/g, (match) => {
+    const placeholder = `__INLINE_MATH_${mathIndex}__`;
+    mathPlaceholders[mathIndex] = match;
+    mathIndex++;
+    return placeholder;
+  });
+
+  // Process citations
+  const citationRegex = /\[(\d+(?:,\s*\d+)+)\]/g;
+  text = text.replace(citationRegex, (match, capturedNumbers) => {
+    const numbers = capturedNumbers
+                      .split(/,\s*/)
+                      .map(numStr => numStr.trim())
+                      .filter(Boolean);
+
+    if (numbers.length <= 1) {
+      return match;
+    }
+
+    return numbers.map(num => `[${num}]`).join('');
+  });
+
+  // Restore math expressions
+  mathPlaceholders.forEach((math, index) => {
+    const placeholder = math.startsWith('$$') ? `__BLOCK_MATH_${index}__` : `__INLINE_MATH_${index}__`;
+    text = text.replace(placeholder, math);
+  });
+
+  return text;
+};
+
+// Streaming component for rendering markdown content
+const Streaming = ({ content, isStreaming, onContentRef, showSourcePopup, hideSourcePopup }) => {
+  const contentRef = useRef(null);
+  
+  useEffect(() => {
+    if (contentRef.current && onContentRef) {
+      onContentRef(contentRef.current);
+    }
+  }, [content, onContentRef]);
+
+  const displayContent = isStreaming ? `${content}▌` : (content || '');
+  const normalizedContent = normalizeCitations(displayContent);
+
+  // CodeBlock component with copy functionality
+  const CodeBlock = ({ language, codeString }) => {
+    const [copied, setCopied] = useState(false);
+    const [showCopyTooltip, setShowCopyTooltip] = useState(true);
+
+    const handleCopy = () => {
+      const textToCopy = String(codeString).replace(/\n$/, '');
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        setCopied(true);
+        setShowCopyTooltip(false);
+        setTimeout(() => setCopied(false), 2000);
+      }).catch(err => {
+        console.error('Failed to copy:', err);
+      });
+    };
+
+    return (
+      <div className="code-block-container">
+        <div className="code-block-header">
+          <span>{language}</span>
+          <button className={`code-copy-button ${copied ? 'copied' : ''}`} onClick={handleCopy}>
+            {copied ? <FcCheckmark /> : <BiSolidCopy />}
+            {showCopyTooltip && <span className="tooltip">Copy Code</span>}
+          </button>
+        </div>
+        <SyntaxHighlighter
+          style={vscDarkPlus}
+          language={language}
+          PreTag="div"
+        >
+          {String(codeString).replace(/\n$/, '')}
+        </SyntaxHighlighter>
+      </div>
+    );
+  };
+
+  // TableWithCopy component with copy and download functionality
+  const TableWithCopy = ({ children, ...props }) => {
+    const [copied, setCopied] = useState(false);
+    const [fadingCopy, setFadingCopy] = useState(false);
+    const [showCopyTooltip, setShowCopyTooltip] = useState(true);
+    const [downloaded, setDownloaded] = useState(false);
+    const [fadingDownload, setFadingDownload] = useState(false);
+    const [showDownloadTooltip, setShowDownloadTooltip] = useState(true);
+    const tableRef = useRef(null);
+
+    const handleCopy = () => {
+      if (tableRef.current) {
+        const rows = Array.from(tableRef.current.querySelectorAll('tr'));
+        const csvData = rows.map(row => {
+          const cells = Array.from(row.querySelectorAll('th, td'));
+          return cells.map(cell => {
+            let text = cell.innerText.trim();
+            if (text.includes('"') || text.includes(',') || text.includes('\n')) {
+              text = '"' + text.replace(/"/g, '""') + '"';
+            }
+            return text;
+          }).join(',');
+        }).join('\n');
+        navigator.clipboard.writeText(csvData).then(() => {
+          setCopied(true);
+          setShowCopyTooltip(false);
+          setTimeout(() => {
+            setFadingCopy(true);
+            setTimeout(() => {
+              setCopied(false);
+              setFadingCopy(false);
+            }, 200);
+          }, 2000);
+        }).catch(err => {
+          console.error('Failed to copy table:', err);
+        });
+      }
+    };
+
+    const handleDownload = () => {
+      if (tableRef.current) {
+        const rows = Array.from(tableRef.current.querySelectorAll('tr'));
+        const tsvData = rows.map(row => {
+          const cells = Array.from(row.querySelectorAll('th, td'));
+          return cells.map(cell => {
+            let text = cell.innerText.trim();
+            if (text.includes('"') || text.includes('\t') || text.includes('\n')) {
+              text = '"' + text.replace(/"/g, '""') + '"';
+            }
+            return text;
+          }).join('\t');
+        }).join('\n');
+        const blob = new Blob([tsvData], { type: 'application/vnd.ms-excel' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'table.xls';
+        a.click();
+        URL.revokeObjectURL(url);
+        setDownloaded(true);
+        setShowDownloadTooltip(false);
+        setTimeout(() => {
+          setFadingDownload(true);
+          setTimeout(() => {
+            setDownloaded(false);
+            setFadingDownload(false);
+          }, 200);
+        }, 2000);
+      }
+    };
+
+    return (
+      <div className="table-container">
+        <button className={`table-copy-button ${copied ? 'copied' : ''} ${fadingCopy ? 'fading' : ''}`} onClick={handleCopy}>
+          {copied ? <FcCheckmark /> : <BiSolidCopy />}
+          {showCopyTooltip && <span className="tooltip">Copy Table</span>}
+        </button>
+        <table ref={tableRef} {...props}>{children}</table>
+        <button className={`table-download-button ${downloaded ? 'downloaded' : ''} ${fadingDownload ? 'fading' : ''}`} onClick={handleDownload}>
+          {downloaded ? <FcCheckmark /> : <LuDownload />}
+          {showDownloadTooltip && <span className="tooltip">Download Table</span>}
+        </button>
+      </div>
+    );
+  };
+
+  // Custom renderer for text nodes to handle source references and math
+  const renderWithSourceRefsAndMath = (elementType) => {
+    const ElementComponent = elementType; // e.g., 'p', 'li'
+  
+    // Helper to gather plain text
+    const getFullText = (something) => {
+      if (typeof something === 'string') return something;
+      if (Array.isArray(something)) return something.map(getFullText).join('');
+      if (React.isValidElement(something) && something.props?.children)
+        return getFullText(React.Children.toArray(something.props.children));
+      return '';
+    };
+  
+    return ({ children, ...props }) => {
+      // Plain‑text version of this block (paragraph / list‑item)
+      const fullText = getFullText(children);
+      // Same regex the backend used
+      const sentenceRegex = /[^.!?\n]+[.!?]+[\])'"`'"]*|[^.!?\n]+$/g;
+      const sentencesArr = fullText.match(sentenceRegex) || [fullText];
+  
+      // Helper function to find the sentence that contains position `pos`
+      const sentenceByPos = (pos) => {
+        let run = 0;
+        for (const s of sentencesArr) {
+          const end = run + s.length;
+          if (pos >= run && pos < end) return s.trim();
+          run = end;
+        }
+        return fullText.trim();
+      };
+  
+      // Cursor that advances through fullText so each subsequent 
+      // indexOf search starts AFTER the previous match
+      let searchCursor = 0;                                         
+  
+      // Recursive renderer that preserves existing markup and adds math support
+      const processNode = (node, keyPrefix = 'node') => {
+        if (typeof node === 'string') {
+          const parts = [];
+          let lastIndex = 0;
+          
+          // First process block math
+          const blockMathRegex = /\$\$([\s\S]*?)\$\$/g;
+          let blockMatch;
+          
+          while ((blockMatch = blockMathRegex.exec(node))) {
+            // Process text before the math expression for citations
+            const textBefore = node.slice(lastIndex, blockMatch.index);
+            if (textBefore) {
+              parts.push(...processCitations(textBefore, keyPrefix, lastIndex));
+            }
+            
+            // Add the block math component
+            parts.push(
+              <BlockMath key={`${keyPrefix}-block-math-${blockMatch.index}`}>
+                {blockMatch[1]}
+              </BlockMath>
+            );
+            
+            lastIndex = blockMatch.index + blockMatch[0].length;
+          }
+          
+          // Process remaining text for inline math and citations
+          const remainingText = node.slice(lastIndex);
+          if (remainingText) {
+            parts.push(...processInlineMathAndCitations(remainingText, keyPrefix, lastIndex));
+          }
+          
+          return parts;
+        }
+  
+        // For non‑string children, recurse (preserves <em>, <strong>, links, etc.)
+        if (React.isValidElement(node) && node.props?.children) {
+          const processed = React.Children.map(node.props.children, (child, i) =>
+            processNode(child, `${keyPrefix}-${i}`)
+          );
+          return React.cloneElement(node, { children: processed });
+        }
+  
+        return node; // element without children or unknown type
+      };
+      
+      // Helper function to process inline math and citations
+      const processInlineMathAndCitations = (text, keyPrefix, offset) => {
+        const parts = [];
+        let lastIndex = 0;
+        
+        // Combined regex for inline math and citations
+        const combinedRegex = /\$([^\$\n]+?)\$|\[(\d+)\]/g;
+        let match;
+        
+        while ((match = combinedRegex.exec(text))) {
+          // Add text before the match
+          if (match.index > lastIndex) {
+            parts.push(text.slice(lastIndex, match.index));
+          }
+          
+          if (match[1] !== undefined) {
+            // It's inline math
+            parts.push(
+              <InlineMath key={`${keyPrefix}-inline-math-${match.index}`}>
+                {match[1]}
+              </InlineMath>
+            );
+          } else if (match[2] !== undefined) {
+            // It's a citation
+            const num = parseInt(match[2], 10);
+            const absIdx = fullText.indexOf(match[0], searchCursor);
+            if (absIdx !== -1) searchCursor = absIdx + match[0].length;
+            const sentenceForPopup = sentenceByPos(absIdx);
+            
+            parts.push(
+              <sup
+                key={`${keyPrefix}-ref-${num}-${match.index}`}
+                className="source-reference"
+                onMouseEnter={(e) =>
+                  showSourcePopup &&
+                  showSourcePopup(num - 1, e.target, sentenceForPopup)
+                }
+                onMouseLeave={hideSourcePopup}
+              >
+                {num}
+              </sup>
+            );
+          }
+          
+          lastIndex = match.index + match[0].length;
+        }
+        
+        // Add remaining text
+        if (lastIndex < text.length) {
+          parts.push(text.slice(lastIndex));
+        }
+        
+        return parts;
+      };
+      
+      // Helper function to process only citations
+      const processCitations = (text, keyPrefix, offset) => {
+        const citationRegex = /\[(\d+)\]/g;
+        let last = 0;
+        let parts = [];
+        let m;
+        
+        while ((m = citationRegex.exec(text))) {
+          const sliceBefore = text.slice(last, m.index);
+          if (sliceBefore) parts.push(sliceBefore);
+
+          const localIdx = m.index;
+          const num = parseInt(m[1], 10);
+          const citStr = m[0];
+
+          // Find this specific occurrence in fullText, starting at searchCursor
+          const absIdx = fullText.indexOf(citStr, searchCursor);
+          if (absIdx !== -1) searchCursor = absIdx + citStr.length;
+
+          const sentenceForPopup = sentenceByPos(absIdx);
+
+          parts.push(
+            <sup
+              key={`${keyPrefix}-ref-${num}-${localIdx}`}
+              className="source-reference"
+              onMouseEnter={(e) =>
+                showSourcePopup &&
+                showSourcePopup(num - 1, e.target, sentenceForPopup)
+              }
+              onMouseLeave={hideSourcePopup}
+            >
+              {num}
+            </sup>
+          );
+          last = localIdx + citStr.length;
+        }
+        
+        if (last < text.length) parts.push(text.slice(last));
+        return parts;
+      };
+  
+      const processedChildren = React.Children.map(children, (child, i) =>
+        processNode(child, `root-${i}`)
+      );
+  
+      // Render original element (p, li, …) with processed children
+      return <ElementComponent {...props}>{processedChildren}</ElementComponent>;
+    };
+  };  
+
+  return (
+    <div className="streaming-content" ref={contentRef}>
+      <Markdown
+        options={{
+          wrapper: React.Fragment, // Use Fragment to avoid wrapper div
+          forceBlock: false,
+          forceInline: false,
+          overrides: {
+            p: {
+              component: renderWithSourceRefsAndMath('p')
+            },
+            li: {
+              component: renderWithSourceRefsAndMath('li')
+            },
+            h1: {
+              component: renderWithSourceRefsAndMath('h1')
+            },
+            h2: {
+              component: renderWithSourceRefsAndMath('h2')
+            },
+            h3: {
+              component: renderWithSourceRefsAndMath('h3')
+            },
+            h4: {
+              component: renderWithSourceRefsAndMath('h4')
+            },
+            h5: {
+              component: renderWithSourceRefsAndMath('h5')
+            },
+            h6: {
+              component: renderWithSourceRefsAndMath('h6')
+            },
+            pre: {
+              component: ({ children, ...props }) => {
+                let codeElement = null;
+                let codeString = '';
+                let language = '';
+
+                React.Children.forEach(children, (child) => {
+                  if (React.isValidElement(child)) {  // Check for element, no type restriction
+                    codeElement = child;
+                    const className = child.props?.className || '';
+                    const match = /(?:lang|language)-(\w+)/.exec(className);
+                    if (match) {
+                      language = match[1];
+                    }
+                    // Flatten children safely
+                    codeString = React.Children.toArray(child.props?.children).join('');
+                  }
+                });
+
+                // Always start code blocks on a new line
+                return (
+                  <>
+                    <div style={{ display: 'block', width: '100%', height: 0, margin: 0, padding: 0 }} />
+                    {codeElement ? (
+                      <CodeBlock 
+                        language={language || 'plaintext'}  // Default for no-lang blocks
+                        codeString={codeString} 
+                      />
+                    ) : (
+                      <pre {...props}>{children}</pre>
+                    )}
+                  </>
+                );
+              }
+            },
+            code: {
+              component: ({ className, children, ...props }) => {
+                // This handles inline code only
+                // Block code is handled by the pre component above
+                return (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                );
+              }
+            },
+            table: {
+              component: TableWithCopy
+            },
+            a: {
+              component: ({ children, href, ...props }) => {
+                return (
+                  <a 
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="markdown-link"
+                    {...props}
+                  >
+                    {children}
+                  </a>
+                );
+              }
+            },
+            blockquote: {
+              component: ({ children, ...props }) => {
+                return (
+                  <blockquote className="markdown-blockquote" {...props}>
+                    {children}
+                  </blockquote>
+                );
+              }
+            }
+          }
+        }}
+      >
+        {normalizedContent}
+      </Markdown>
+    </div>
+  );
+};
+
+export default Streaming;

frontend/src/Components/AiComponents/ChatWindow.css

@@ -0,0 +1,277 @@
+:root {
+  --dark-surface:  #190e10;       /* Deep, dark maroon base */
+  --primary-color: #2b2b2b;       /* A dark gray for sidebars and buttons */
+  --secondary-color: #03dac6;     /* A cool teal for accents */
+  --accent-color: #aaabb9;        /* A warm accent for highlights and borders */
+  --text-color: #e0e0e0;          /* Off-white text */
+  --hover-bg: #3a3a3a;           /* Slightly lighter for hover effects */
+  --transition-speed: 0.3s;
+}
+
+/* Error message container */
+.error-block {
+  background-color: #f25e5ecb;
+  color: var(--text-color);
+  padding: 0.1rem 1rem;
+  border-radius: 0.3rem;
+  margin: 2rem 0;
+  text-align: left;
+}
+
+/* Container for the messages */
+.answer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1rem;
+  min-width: 800px;
+}
+
+.answer-block {
+  position: relative;
+  padding-left: 45px;
+}
+
+/* Common message row styling */
+.message-row {
+  display: flex;
+  align-items: flex-start;
+}
+
+/* ----------------- User Message Styling ----------------- */
+/* User message row: bubble on the left, icon on the right */
+.user-message {
+  justify-content: flex-end;
+}
+
+.user-message .message-bubble {
+  background-color: #FF8C00;
+  color: #ffffff;
+  border-radius: 0.35rem;
+  padding: 0.5rem 1rem;
+  max-width: 70%;
+  text-align: left;
+}
+
+.user-message .user-icon {
+  margin-left: 0.5rem;
+}
+
+.sources-read {
+  font-weight: bold;
+}
+
+/* ----------------- Bot Message Styling ----------------- */
+/* Bot message row */
+.bot-icon {
+  position: absolute;
+  left: 0;
+  top: 0.25rem;
+}
+
+.bot-message {
+  justify-content: flex-start;
+}
+
+.bot-message .bot-icon {
+  margin: 0;
+}
+
+
+/* Container for the bot bubble and its post-icons */
+.bot-container {
+  display: flex;
+  flex-direction: column; 
+  gap: 0rem;
+}
+
+.bot-answer-container {
+  display: flex;
+  align-items: center; 
+  gap: 0.5rem;        
+}
+
+/* Bot message bubble styling */
+.bot-container .message-bubble {
+  background-color: none;
+  color: var(--text-color);
+  padding: 0.25rem 1.15rem 1rem 0.1rem;
+  max-width: 97%;
+  text-align: left;
+}
+
+/* ----------------- Additional Styling ----------------- */
+
+/* Styling for the "Thought and searched for..." line */
+.thinking-info {
+  font-size: large;
+  font-style: italic;
+  color: var(--accent-color);
+  margin-bottom: 1.3rem;
+  margin-left: 3rem;
+}
+
+.sources-read {
+  font-weight: bold;
+  color: var(--text-color);
+  margin-bottom: 1rem;
+  margin-left: 3rem;
+}
+
+/* Styling for the answer text */
+.answer {
+  margin: 0;
+  line-height: 1.85;
+  white-space: pre-wrap;
+}
+
+/* Post-answer icons container: placed below the bot bubble */
+.post-icons {
+  display: flex;
+  padding-left: 0.12rem;
+  gap: 1rem;
+}
+
+/* Make each post icon container position relative for tooltip positioning */
+.post-icons .copy-icon,
+.post-icons .evaluate-icon,
+.post-icons .sources-icon,
+.post-icons .graph-icon,
+.post-icons .excerpts-icon {
+  cursor: pointer;
+  position: relative;
+}
+
+/* Apply a brightness filter to the icon images on hover */
+.post-icons .copy-icon img,
+.post-icons .evaluate-icon img,
+.post-icons .sources-icon img,
+.post-icons .graph-icon img,
+.post-icons .excerpts-icon img {
+  transition: filter var(--transition-speed);
+}
+
+.post-icons .copy-icon:hover img,
+.post-icons .evaluate-icon:hover img,
+.post-icons .sources-icon:hover img,
+.post-icons .graph-icon:hover img,
+.post-icons .excerpts-icon:hover img {
+  filter: brightness(0.65);
+}
+
+/* Tooltip styling */
+.tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(10px) scale(0.9);
+  transform-origin: bottom center;
+  margin-bottom: 0.65rem;
+  padding: 0.3rem 0.6rem;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  font-size: 0.85rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+/* Show the tooltip on hover */
+.post-icons .copy-icon:hover .tooltip,
+.post-icons .evaluate-icon:hover .tooltip,
+.post-icons .sources-icon:hover .tooltip,
+.post-icons .graph-icon:hover .tooltip,
+.post-icons .excerpts-icon:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0) scale(1);
+}
+
+/* Styling for the question text */
+.question {
+  margin: 0;
+  white-space: pre-wrap;
+  line-height: 1.4;
+}
+
+/* Reduce the size of user and bot icons */
+.user-icon img,
+.bot-icon img {
+  width: 35px;
+  height: 35px;
+  object-fit: contain;
+}
+
+/* Reduce the size of the post-action icons */
+.post-icons img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+/* Increase the size of the excerpts icon */
+.post-icons .excerpts-icon img {
+  width: 20px;
+  height: 26px;
+  margin-top: -3.5px;
+  object-fit: fill;
+}
+
+/* Container for the loading state with a dark background */
+.bot-loading {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px; /* adds space between the spinner and the text */
+  padding: 30px;
+  background-color: var(--dark-surface);  /* Dark background */
+}
+
+.loading-text {
+  margin: 0; /* removes any default margins */
+  font-size: 1rem;
+  color: #ccc;
+}
+
+/* Finished state: styling for the thought time info */
+.thinking-info {
+  margin-bottom: 4px;
+}
+
+.thinking-time {
+  font-size: 1rem;
+  color: #888;
+  cursor: pointer;
+}
+
+/* Snackbar styling */
+.custom-snackbar {
+  background-color: #1488e7 !important;
+  color: var(--text-color) !important;
+  padding: 0.35rem 1rem !important;
+  border-radius: 4px !important;
+}
+
+/* Spinner styling */
+.custom-spinner {
+  width: 1.35rem !important;
+  height: 1.35rem !important;
+  border: 3px solid #3b7bdc !important;        /* Main Spinner */
+  border-top: 3px solid #434343 !important;     /* Rotating path */
+  border-radius: 50% !important;
+  margin-top: 0.1rem !important;
+  animation: spin 0.9s linear infinite !important; 
+}
+
+/* Spinner animation */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

frontend/src/Components/AiComponents/ChatWindow.js

@@ -0,0 +1,368 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Snackbar from '@mui/material/Snackbar';
+import Slide from '@mui/material/Slide';
+import IconButton from '@mui/material/IconButton';
+import { FaTimes, FaSpinner, FaCheckCircle } from 'react-icons/fa';
+import GraphDialog from './ChatComponents/Graph';
+import Streaming from './ChatComponents/Streaming';
+import SourcePopup from './ChatComponents/SourcePopup';
+import './ChatWindow.css';
+
+import bot from '../../Icons/bot.png';
+import copy from '../../Icons/copy.png';
+import evaluate from '../../Icons/evaluate.png';
+import sourcesIcon from '../../Icons/sources.png';
+import graphIcon from '../../Icons/graph.png';
+import user from '../../Icons/user.png';
+import excerpts from '../../Icons/excerpts.png';
+
+// SlideTransition function for both entry and exit transitions.
+function SlideTransition(props) {
+  return <Slide {...props} direction="up" />;
+}
+
+function ChatWindow({
+  blockId,
+  userMessage,
+  tokenChunks,
+  aiAnswer,
+  thinkingTime,
+  thoughtLabel,
+  sourcesRead,
+  finalSources,
+  excerptsData,
+  isLoadingExcerpts,
+  onFetchExcerpts,
+  actions,
+  tasks,
+  openRightSidebar,
+  // openLeftSidebar,
+  isError,
+  errorMessage
+}) {
+  console.log(`[ChatWindow ${blockId}] Received excerptsData:`, excerptsData);
+  const answerRef = useRef(null);
+  const [graphDialogOpen, setGraphDialogOpen] = useState(false);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [hoveredSourceInfo, setHoveredSourceInfo] = useState(null);
+  const popupTimeoutRef = useRef(null);
+
+  // Get the graph action from the actions prop.
+  const graphAction = actions && actions.find(a => a.name === "graph");
+
+  // Handler for copying answer to clipboard.
+  const handleCopy = () => {
+    if (answerRef.current) {
+      const textToCopy = answerRef.current.innerText || answerRef.current.textContent;
+      navigator.clipboard.writeText(textToCopy)
+        .then(() => {
+          console.log('Copied to clipboard:', textToCopy);
+          setSnackbarOpen(true);
+        })
+        .catch((err) => console.error('Failed to copy text:', err));
+    }
+  };
+
+  // Snackbar close handler
+  const handleSnackbarClose = (event, reason) => {
+    if (reason === 'clickaway') return;
+    setSnackbarOpen(false);
+  };
+
+  // Combine partial chunks (tokenChunks) if present; else fall back to the aiAnswer string.
+  const combinedAnswer = (tokenChunks && tokenChunks.length > 0)
+  ? tokenChunks.join("")
+  : aiAnswer;
+  const hasTokens = combinedAnswer && combinedAnswer.length > 0;
+  // Assume streaming is in progress if thinkingTime is not set.
+  const isStreaming = thinkingTime === null || thinkingTime === undefined;
+
+  // Helper to render the thought label.
+  const renderThoughtLabel = () => {
+    if (!hasTokens) {
+      return thoughtLabel;
+    } else {
+      if (thoughtLabel && thoughtLabel.startsWith("Thought and searched for")) {
+        return thoughtLabel;
+      }
+      return null;
+    }
+  };
+
+  // Helper to render sources read.
+  const renderSourcesRead = () => {
+    if (!sourcesRead && sourcesRead !== 0) return null;
+    return sourcesRead;
+  };
+
+  // When tasks first appear, automatically open the sidebar.
+  const prevTasksRef = useRef(tasks);
+  useEffect(() => {
+    if (prevTasksRef.current.length === 0 && tasks && tasks.length > 0) {
+      openRightSidebar("tasks", blockId);
+    }
+    prevTasksRef.current = tasks;
+  }, [tasks, blockId, openRightSidebar]);
+
+  // Handle getting the reference to the content for copy functionality
+  const handleContentRef = (ref) => {
+    answerRef.current = ref;
+  };
+
+  // Handle showing the source popup
+  const showSourcePopup = useCallback((sourceIndex, targetElement, statementText) => {
+    // Clear any existing timeout to prevent flickering
+    if (popupTimeoutRef.current) {
+      clearTimeout(popupTimeoutRef.current);
+      popupTimeoutRef.current = null;
+    }
+
+    if (!finalSources || !finalSources[sourceIndex] || !targetElement) return;
+
+    const rect = targetElement.getBoundingClientRect();
+    const scrollY = window.scrollY || window.pageYOffset;
+    const scrollX = window.scrollX || window.pageXOffset;
+
+    const newHoverInfo = {
+      index: sourceIndex,
+      statementText,
+      position: {
+        top: rect.top + scrollY - 10, // Position above the reference
+        left: rect.left + scrollX + rect.width / 2, // Center horizontally
+      }
+    };
+    setHoveredSourceInfo(newHoverInfo);
+  }, [finalSources]);
+
+  const hideSourcePopup = useCallback(() => {
+    if (popupTimeoutRef.current) {
+        clearTimeout(popupTimeoutRef.current); // Clear existing timeout if mouse leaves quickly
+    }
+    popupTimeoutRef.current = setTimeout(() => {
+      setHoveredSourceInfo(null);
+      popupTimeoutRef.current = null;
+    }, 15); // Delay allows moving mouse onto popup
+  }, []);
+
+  // Handle mouse enter on the popup to cancel the hide timeout
+  const cancelHidePopup = useCallback(() => {
+    // Clear the hide timeout if the mouse enters the popup itself
+    if (popupTimeoutRef.current) {
+      clearTimeout(popupTimeoutRef.current);
+      popupTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Determine button state and appearance for excerpts icon
+  const excerptsLoaded = !!excerptsData;  // True if excerptsData is not null/empty
+  const canFetchExcerpts = finalSources && finalSources.length > 0 && 
+                           !isError && !excerptsLoaded && !isLoadingExcerpts;
+  const buttonDisabled = isLoadingExcerpts || excerptsLoaded; // Disable button if loading or loaded
+  const buttonIcon = isLoadingExcerpts
+                      ? <FaSpinner className="spin" style={{ fontSize: 20 }} />
+                      : excerptsLoaded
+                      ? <FaCheckCircle 
+                          style={{ 
+                            width: 22, 
+                            height: 22, 
+                            color: 'var(--secondary-color)',
+                            filter: 'brightness(0.75)' 
+                          }} 
+                        />
+                      : <img src={excerpts} alt="excerpts icon" />; 
+  const buttonClassName = `excerpts-icon ${isLoadingExcerpts ? 'loading' : ''} ${excerptsLoaded ? 'loaded' : ''}`;
+
+  return (
+    <>
+      { !hasTokens ? (
+        // If no tokens, render pre-stream UI.
+        (!isError && thoughtLabel) ? (
+          <div className="answer-container">
+            {/* User Message */}
+            <div className="message-row user-message">
+              <div className="message-bubble user-bubble">
+                <p className="question">{userMessage}</p>
+              </div>
+              <div className="user-icon">
+                <img src={user} alt="user icon" />
+              </div>
+            </div>
+            {/* Bot Message (pre-stream with spinner) */}
+            <div className="message-row bot-message pre-stream">
+              <div className="bot-container">
+                <div className="thinking-info">
+                  <Box mt={1} display="flex" alignItems="center">
+                    <Box className="custom-spinner" />
+                    <Box ml={1}>
+                      <span
+                        className="thinking-time"
+                        onClick={() => openRightSidebar("tasks", blockId)}
+                      >
+                        {thoughtLabel}
+                      </span>
+                    </Box>
+                  </Box>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          // Render without spinner (user message only)
+          <div className="answer-container">
+            <div className="message-row user-message">
+              <div className="message-bubble user-bubble">
+                <p className="question">{userMessage}</p>
+              </div>
+              <div className="user-icon">
+                <img src={user} alt="user icon" />
+              </div>
+            </div>
+          </div>
+        )
+      ) : (
+        // Render Full Chat Message
+        <div className="answer-container">
+          {/* User Message */}
+          <div className="message-row user-message">
+            <div className="message-bubble user-bubble">
+              <p className="question">{userMessage}</p>
+            </div>
+            <div className="user-icon">
+              <img src={user} alt="user icon" />
+            </div>
+          </div>
+          {/* Bot Message */}
+          <div className="message-row bot-message">
+            <div className="bot-container">
+              {!isError && renderThoughtLabel() && (
+                <div className="thinking-info">
+                  <span
+                    className="thinking-time"
+                    onClick={() => openRightSidebar("tasks", blockId)}
+                  >
+                    {renderThoughtLabel()}
+                  </span>
+                </div>
+              )}
+              {renderSourcesRead() !== null && (
+                <div className="sources-read-container">
+                  <p className="sources-read">
+                    Sources Read: {renderSourcesRead()}
+                  </p>
+                </div>
+              )}
+              <div className="answer-block">
+                <div className="bot-icon">
+                  <img src={bot} alt="bot icon" />
+                </div>
+                <div className="message-bubble bot-bubble">
+                  <div className="answer">
+                    <Streaming
+                      content={combinedAnswer}
+                      isStreaming={isStreaming}
+                      onContentRef={handleContentRef}
+                      showSourcePopup={showSourcePopup} 
+                      hideSourcePopup={hideSourcePopup} 
+                    />
+                  </div>
+                </div>
+                <div className="post-icons">
+                  {!isStreaming && (
+                    <div className="copy-icon" onClick={handleCopy}>
+                      <img src={copy} alt="copy icon" />
+                      <span className="tooltip">Copy</span>
+                    </div>
+                  )}
+                  {actions && actions.some(a => a.name === "evaluate") && (
+                    <div className="evaluate-icon" onClick={() => openRightSidebar("evaluate", blockId)}>
+                      <img src={evaluate} alt="evaluate icon" />
+                      <span className="tooltip">Evaluate</span>
+                    </div>
+                  )}
+                  {actions && actions.some(a => a.name === "sources") && (
+                    <div className="sources-icon" onClick={() => openRightSidebar("sources", blockId)}>
+                      <img src={sourcesIcon} alt="sources icon" />
+                      <span className="tooltip">Sources</span>
+                    </div>
+                  )}
+                  {actions && actions.some(a => a.name === "graph") && (
+                    <div className="graph-icon" onClick={() => setGraphDialogOpen(true)}>
+                      <img src={graphIcon} alt="graph icon" />
+                      <span className="tooltip">View Graph</span>
+                    </div>
+                  )}
+                  {/* Show Excerpts Button - Conditionally Rendered */}
+                  {finalSources && finalSources.length > 0 && !isError && (
+                    <div
+                      className={buttonClassName}
+                      onClick={() => canFetchExcerpts && onFetchExcerpts(blockId)}
+                      style={{
+                        cursor: buttonDisabled ? 'default' : 'pointer',
+                        opacity: excerptsLoaded ? 0.6 : 1
+                      }}
+                    >
+                      {buttonIcon}
+                      <span className="tooltip">
+                        {excerptsLoaded ? 'Excerpts Loaded'
+                          : isLoadingExcerpts ? 'Loading Excerpts…'
+                          : 'Show Excerpts'}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Render the GraphDialog when graphDialogOpen is true */}
+          {graphDialogOpen && (
+            <GraphDialog 
+              open={graphDialogOpen} 
+              onClose={() => setGraphDialogOpen(false)} 
+              payload={graphAction ? graphAction.payload : { query: userMessage }} 
+            />
+          )}
+        </div>
+      )}
+      {/* Render Source Popup */}
+      {hoveredSourceInfo && finalSources && finalSources[hoveredSourceInfo.index] && (
+        <SourcePopup
+          sourceData={finalSources[hoveredSourceInfo.index]}
+          excerptsData={excerptsData}
+          position={hoveredSourceInfo.position}
+          onMouseEnter={cancelHidePopup} // Keep popup open if mouse enters it
+          onMouseLeave={hideSourcePopup}
+          statementText={hoveredSourceInfo.statementText}
+        />
+      )}
+      {/* Render error container if there's an error */}
+      {isError && (
+        <div className="error-block" style={{ marginTop: '1rem' }}>
+          <h3>Error</h3>
+          <p>{errorMessage}</p>
+        </div>
+      )}
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message="Copied To Clipboard"
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        TransitionComponent={SlideTransition}
+        ContentProps={{ classes: { root: 'custom-snackbar' } }}
+        action={
+          <IconButton
+            size="small"
+            aria-label="close"
+            color="inherit"
+            onClick={handleSnackbarClose}
+          >
+            <FaTimes />
+          </IconButton>
+        }
+      />
+    </>
+  );
+}
+
+export default ChatWindow;

frontend/src/Components/AiComponents/Dropdowns/AddContentDropdown.css

@@ -0,0 +1,150 @@
+.add-content-dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  background-color: #21212f;
+  /* border: 0.01rem solid #444; */
+  border-radius: 0.35rem;
+  box-shadow: 0 0.75rem 0.85rem rgba(0, 0, 0, 0.484);
+  z-index: 1010;
+  width: 13.5rem;
+  padding: 0.3rem 0;
+  margin-bottom: 0.75rem;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.add-content-dropdown.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.add-content-dropdown ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.add-content-dropdown li {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  color: #e0e0e0;
+  font-size: 1rem;
+  position: relative;
+  transition: background-color 0.2s ease;
+}
+
+.add-content-dropdown li:hover {
+  background-color: #15151f;
+  border-radius: 1.35rem;
+}
+
+.add-content-dropdown li.selected:hover {
+  background-color: #4caf5033;
+  border-radius: 1.35rem;
+}
+
+/* Active state for items with open sub-menus */
+.add-content-dropdown li.has-submenu.active {
+  background-color: #15151f;
+  border-radius: 1.35rem;
+}
+
+.add-content-dropdown .dropdown-icon {
+  margin-right: 0.75rem;
+  font-size: 1rem;
+  color: #aaabb9;
+}
+
+.selected {
+  background-color: #4caf501a;
+}
+
+.selected:hover {
+  background-color: #4caf5033;
+}
+
+.menu-item-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.add-content-dropdown li.has-submenu {
+  justify-content: space-between;
+  user-select: none; /* Prevent text selection on click */
+}
+
+.add-content-dropdown .submenu-arrow {
+  font-size: 0.8rem;
+  color: #aaabb9;
+  margin-left: auto;
+  flex-shrink: 0;
+  pointer-events: none; /* Prevent arrow from blocking clicks */
+}
+
+.dropdown-icon {
+  margin-right: 8px;
+}
+
+.sub-dropdown {
+  position: absolute;
+  left: 100%;
+  /* Default to opening upwards for chat view */
+  bottom: 0;
+  background-color: #21212f;
+  border-radius: 0.35rem;
+  box-shadow: 0 0.75rem 0.85rem rgba(0, 0, 0, 0.484);
+  z-index: 1020; /* Higher than main dropdown */
+  width: 13.5rem;
+  padding: 0.3rem 0;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.sub-dropdown.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+
+/* Nested sub-dropdown (third level) */
+.sub-dropdown .sub-dropdown {
+  z-index: 1030; /* Higher than second level */
+}
+
+.sub-dropdown li.has-submenu {
+  justify-content: space-between;
+}
+
+/* Initial Chat Window */
+.search-bar .add-content-dropdown {
+  top: 100%;
+  bottom: auto;
+  margin-top: 0.6rem;
+  margin-bottom: 0;
+  box-shadow: 0 -0.75rem 1rem rgba(0, 0, 0, 0.484);
+  transform: translateY(-10px);
+}
+
+.search-bar .sub-dropdown {
+  top: 0;
+  bottom: auto;
+}
+
+/* Third level sub-dropdown in search bar - open upward */
+.search-bar .sub-dropdown .sub-dropdown {
+  top: auto;
+  bottom: 0;
+}
+
+.search-bar .add-content-dropdown.open {
+  transform: translateY(0);
+}

frontend/src/Components/AiComponents/Dropdowns/AddContentDropdown.js

@@ -0,0 +1,359 @@
+import { useEffect, useRef, useState } from 'react';
+import { 
+  FaPaperclip, 
+  FaCubes, 
+  FaGoogle, 
+  FaMicrosoft, 
+  FaSlack, 
+  FaChevronRight,
+  FaFileAlt,
+  FaTable,
+  FaDesktop,
+  FaStickyNote,
+  FaTasks,
+  FaCalendarAlt,
+  FaFolderOpen,
+  FaEnvelope,
+  FaFileWord,
+  FaFileExcel,
+  FaFilePowerpoint,
+  FaClipboardList,
+  FaExchangeAlt,
+  FaCloud
+} from 'react-icons/fa';
+import './AddContentDropdown.css';
+
+function AddContentDropdown({ 
+  isOpen, 
+  onClose, 
+  toggleButtonRef, 
+  onAddFilesClick, 
+  onServiceClick,
+  selectedServices = { google: [], microsoft: [], slack: false }
+}) {
+  const dropdownRef = useRef(null);
+  const [openSubMenus, setOpenSubMenus] = useState({
+    connectApps: false,
+    googleWorkspace: false,
+    microsoft365: false
+  });
+
+  // Effect to handle clicks outside the dropdown to close it
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      // Do not close if the click is on the toggle button itself
+      if (toggleButtonRef && toggleButtonRef.current && toggleButtonRef.current.contains(event.target)) {
+        return;
+      }
+
+      // Close the dropdown if the click is outside of it
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        onClose();
+        // Reset all sub-menus when closing
+        setOpenSubMenus({
+          connectApps: false,
+          googleWorkspace: false,
+          microsoft365: false
+        });
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose, toggleButtonRef]);
+
+  // Reset sub-menus when dropdown closes
+  useEffect(() => {
+    if (!isOpen) {
+      setOpenSubMenus({
+        connectApps: false,
+        googleWorkspace: false,
+        microsoft365: false
+      });
+    }
+  }, [isOpen]);
+
+  const handleConnectAppsHover = () => {
+    setOpenSubMenus(prev => ({
+      ...prev,
+      connectApps: true
+    }));
+  };
+
+  const handleGoogleWorkspaceHover = () => {
+    setOpenSubMenus(prev => ({
+      ...prev,
+      googleWorkspace: true,
+      // Close Microsoft 365 when hovering Google Workspace
+      microsoft365: false
+    }));
+  };
+
+  const handleMicrosoft365Hover = () => {
+    setOpenSubMenus(prev => ({
+      ...prev,
+      microsoft365: true,
+      // Close Google Workspace when hovering Microsoft 365
+      googleWorkspace: false
+    }));
+  };
+
+  const handleSlackHover = () => {
+    // Close service sub-menus when hovering Slack
+    setOpenSubMenus(prev => ({
+      ...prev,
+      googleWorkspace: false,
+      microsoft365: false
+    }));
+  };
+
+  const handleAddFilesHover = () => {
+    // Close Connect Apps menu when hovering Add Files
+    setOpenSubMenus({
+      connectApps: false,
+      googleWorkspace: false,
+      microsoft365: false
+    });
+  };
+
+  // Simplified handlers - just call onServiceClick
+  const handleGoogleServiceClick = (service) => {
+    if (onServiceClick && typeof onServiceClick === 'function') {
+      onServiceClick('google', service);
+    }
+  };
+
+  const handleMicrosoftServiceClick = (service) => {
+    if (onServiceClick && typeof onServiceClick === 'function') {
+      onServiceClick('microsoft', service);
+    }
+  };
+
+  const handleSlackClick = () => {
+    if (onServiceClick && typeof onServiceClick === 'function') {
+      onServiceClick('slack', 'slack');
+    }
+  };
+
+  // Helper to check if a service is selected
+  const isServiceSelected = (provider, service) => {
+    if (provider === 'slack') {
+      return selectedServices.slack || false;
+    }
+    return selectedServices[provider]?.includes(service) || false;
+  };
+
+  return (
+    <div className={`add-content-dropdown ${isOpen ? 'open' : ''}`} ref={dropdownRef}>
+      <ul>
+        <li onClick={onAddFilesClick} onMouseEnter={handleAddFilesHover}>
+          <div className="menu-item-content">
+            <FaPaperclip className="dropdown-icon" />
+            <span>Add Files and Links</span>
+          </div>
+        </li>  
+        <li className={`has-submenu ${openSubMenus.connectApps ? 'active' : ''}`} onMouseEnter={handleConnectAppsHover}>
+          <div className="menu-item-content">
+            <FaCubes className="dropdown-icon" />
+            <span>Connect Apps</span>
+          </div>
+          <FaChevronRight className="submenu-arrow" />
+          <div className={`sub-dropdown ${openSubMenus.connectApps ? 'open' : ''}`}>
+            <ul>
+              <li className={`has-submenu ${openSubMenus.googleWorkspace ? 'active' : ''}`} onMouseEnter={handleGoogleWorkspaceHover}>
+                <div className="menu-item-content">
+                  <FaGoogle className="dropdown-icon" />
+                  <span>Google Workspace</span>
+                </div>
+                <FaChevronRight className="submenu-arrow" />
+                <div className={`sub-dropdown ${openSubMenus.googleWorkspace ? 'open' : ''}`}>
+                  <ul>
+                    <li 
+                      onClick={() => handleGoogleServiceClick('docs')} 
+                      className={isServiceSelected('google', 'docs') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaFileAlt className="dropdown-icon" />
+                        <span>Docs</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleGoogleServiceClick('sheets')} 
+                      className={isServiceSelected('google', 'sheets') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaTable className="dropdown-icon" />
+                        <span>Sheets</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleGoogleServiceClick('slides')} 
+                      className={isServiceSelected('google', 'slides') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaDesktop className="dropdown-icon" />
+                        <span>Slides</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleGoogleServiceClick('keep')} 
+                      className={isServiceSelected('google', 'keep') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaStickyNote className="dropdown-icon" />
+                        <span>Keep</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleGoogleServiceClick('tasks')} 
+                      className={isServiceSelected('google', 'tasks') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaTasks className="dropdown-icon" />
+                        <span>Tasks</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleGoogleServiceClick('calendar')} 
+                      className={isServiceSelected('google', 'calendar') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaCalendarAlt className="dropdown-icon" />
+                        <span>Calendar</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleGoogleServiceClick('drive')} 
+                      className={isServiceSelected('google', 'drive') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaFolderOpen className="dropdown-icon" />
+                        <span>Drive</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleGoogleServiceClick('gmail')} 
+                      className={isServiceSelected('google', 'gmail') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaEnvelope className="dropdown-icon" />
+                        <span>Gmail</span>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li className={`has-submenu ${openSubMenus.microsoft365 ? 'active' : ''}`} onMouseEnter={handleMicrosoft365Hover}>
+                <div className="menu-item-content">
+                  <FaMicrosoft className="dropdown-icon" />
+                  <span>Microsoft 365</span>
+                </div>
+                <FaChevronRight className="submenu-arrow" />
+                <div className={`sub-dropdown ${openSubMenus.microsoft365 ? 'open' : ''}`}>
+                  <ul>
+                    <li 
+                      onClick={() => handleMicrosoftServiceClick('word')} 
+                      className={isServiceSelected('microsoft', 'word') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaFileWord className="dropdown-icon" />
+                        <span>Word</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleMicrosoftServiceClick('excel')} 
+                      className={isServiceSelected('microsoft', 'excel') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaFileExcel className="dropdown-icon" />
+                        <span>Excel</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleMicrosoftServiceClick('powerpoint')} 
+                      className={isServiceSelected('microsoft', 'powerpoint') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaFilePowerpoint className="dropdown-icon" />
+                        <span>PowerPoint</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleMicrosoftServiceClick('onenote')} 
+                      className={isServiceSelected('microsoft', 'onenote') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaStickyNote className="dropdown-icon" />
+                        <span>OneNote</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleMicrosoftServiceClick('todo')} 
+                      className={isServiceSelected('microsoft', 'todo') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaClipboardList className="dropdown-icon" />
+                        <span>To Do</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleMicrosoftServiceClick('exchange')} 
+                      className={isServiceSelected('microsoft', 'exchange') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaExchangeAlt className="dropdown-icon" />
+                        <span>Exchange</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleMicrosoftServiceClick('onedrive')} 
+                      className={isServiceSelected('microsoft', 'onedrive') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaCloud className="dropdown-icon" />
+                        <span>OneDrive</span>
+                      </div>
+                    </li>
+                    <li 
+                      onClick={() => handleMicrosoftServiceClick('outlook')} 
+                      className={isServiceSelected('microsoft', 'outlook') ? 'selected' : ''}
+                    >
+                      <div className="menu-item-content">
+                        <FaEnvelope className="dropdown-icon" />
+                        <span>Outlook</span>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li 
+                onMouseEnter={handleSlackHover} 
+                onClick={handleSlackClick} 
+                className={isServiceSelected('slack', 'slack') ? 'selected' : ''}
+              >
+                <div className="menu-item-content">
+                  <FaSlack className="dropdown-icon" />
+                  <span>Slack</span>
+                  {isServiceSelected('slack', 'slack') && sessionStorage.getItem('slack_workspace') && (
+                    <span className="workspace-info">
+                      ({JSON.parse(sessionStorage.getItem('slack_workspace')).team_name})
+                    </span>
+                  )}
+                </div>
+              </li>
+            </ul>
+          </div>
+        </li>    
+      </ul>
+    </div>
+  );
+}
+
+export default AddContentDropdown;

frontend/src/Components/AiComponents/Dropdowns/AddFilesDialog.css

@@ -0,0 +1,191 @@
+.add-files-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.add-files-dialog-inner {
+  position: relative;
+  border-radius: 12px;
+  padding: 32px;
+  width: 45%;
+  max-width: 100%;
+  background-color: #1e1e1e;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding-top: 4.5rem;
+}
+
+.add-files-dialog-inner .dialog-title {
+  position: absolute;
+  font-weight: bold;
+  font-size: 1.5rem;
+  top: 16px;
+  left: 16px;
+  color: #e0e0e0;
+}
+
+.add-files-dialog-inner .close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  color: white;
+  padding: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  border: none;
+}
+
+.add-files-dialog-inner .close-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.dialog-content-area {
+  color: #e0e0e0;
+}
+
+.url-input-container {
+  margin-bottom: 1.5rem;
+}
+
+.url-input-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.url-input-textarea {
+  width: 100%;
+  min-height: 80px;
+  background: #1E1E1E;
+  color: #DDD;
+  border: 1px solid #444;
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 16px;
+  resize: vertical;
+  transition: border 0.3s ease, background 0.3s ease;
+}
+
+.file-drop-zone {
+  margin-top: 1rem;
+  border: 2px dashed #555;
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #aaa;
+}
+
+.file-drop-zone:hover {
+  border-color: #777;
+  background-color: #2a2a2a;
+}
+
+.file-drop-zone.dragging {
+  border-color: #26a8dc;
+  background-color: rgba(38, 168, 220, 0.1);
+}
+
+.file-drop-zone .upload-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: #666;
+}
+
+.file-drop-zone p {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.file-list {
+  margin-top: 1.5rem;
+  max-height: 250px;
+  overflow-y: auto;
+  padding-right: 0.5rem; /* Space for scrollbar */
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  background-color: #2a2a2a;
+  padding: 0.75rem;
+  border-radius: 6px;
+  margin-bottom: 0.5rem;
+}
+
+.file-icon {
+  color: #aaa;
+  font-size: 1.5rem;
+  margin-right: 1rem;
+}
+
+.file-info {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.file-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.9rem;
+}
+
+.file-size {
+  font-size: 0.75rem;
+  color: #888;
+}
+
+.progress-bar-container {
+  width: 100px;
+  height: 8px;
+  background-color: #444;
+  border-radius: 4px;
+  margin: 0 1rem;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #26a8dc;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.cancel-file-btn {
+  background: none;
+  border: none;
+  color: #aaa;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0.25rem;
+}
+
+.cancel-file-btn:hover {
+  color: #fff;
+}
+
+.dialog-actions {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}

frontend/src/Components/AiComponents/Dropdowns/AddFilesDialog.js

@@ -0,0 +1,282 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { FaTimes, FaFileUpload, FaFileAlt } from 'react-icons/fa';
+import Button from '@mui/material/Button';
+import './AddFilesDialog.css';
+
+const MAX_TOTAL_SIZE = 10 * 1024 * 1024; // 10 MB
+const ALLOWED_EXTENSIONS = new Set([
+  // Documents
+  '.pdf', '.doc', '.docx', '.odt', '.txt', '.rtf', '.md',
+  // Spreadsheets
+  '.csv', '.xls', '.xlsx',
+  // Presentations
+  '.ppt', '.pptx',
+  // Code files
+  '.js', '.jsx', '.ts', '.tsx', '.py', '.java', '.c', '.cpp', '.h',
+  '.cs', '.html', '.css', '.scss', '.json', '.xml', '.sql', '.sh',
+  '.rb', '.php', '.go'
+]);
+
+function AddFilesDialog({ isOpen, onClose, openSnackbar, setSessionContent }) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [urlInput, setUrlInput] = useState("");
+  const fileInputRef = useRef(null);
+
+  // Function to handle files dropped or selected
+  const handleFiles = useCallback((incomingFiles) => {
+    if (incomingFiles && incomingFiles.length > 0) {
+      let currentTotalSize = files.reduce((acc, f) => acc + f.file.size, 0);
+      const validFiles = [];
+
+      for (const file of Array.from(incomingFiles)) {
+        // 1. Check for duplicates
+        if (files.some(existing => existing.file.name === file.name && existing.file.size === file.size)) {
+          continue; // Skip duplicate file
+        }
+
+        // 2. Check file type
+        const fileExtension = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
+        if (!ALLOWED_EXTENSIONS.has(fileExtension)) {
+          openSnackbar(`File type not supported: ${file.name}`, 'error', 5000);
+          continue; // Skip unsupported file type
+        }
+
+        // 3. Check total size limit
+        if (currentTotalSize + file.size > MAX_TOTAL_SIZE) {
+          openSnackbar('Total file size cannot exceed 10 MB', 'error', 5000);
+          break; // Stop processing further files as limit is reached
+        }
+
+        currentTotalSize += file.size;
+        validFiles.push({
+          id: window.crypto.randomUUID(),
+          file: file,
+          progress: 0,
+        });
+      }
+
+      if (validFiles.length > 0) {
+        setFiles(prevFiles => [...prevFiles, ...validFiles]);
+      }
+    }
+  }, [files, openSnackbar]);
+
+  // Function to handle file removal
+  const handleRemoveFile = useCallback((fileId) => {
+    setFiles(prevFiles => prevFiles.filter(f => f.id !== fileId));
+  }, []);
+
+  // Ensure that the component does not render if isOpen is false
+  if (!isOpen) {
+    return null;
+  }
+
+  // Function to format file size in a human-readable format
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  // Handlers for drag and drop events
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  // Handler for when the drag leaves the drop zone
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  // Handler for when files are dropped into the drop zone
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+
+  // Handler for when files are selected via the file input
+  const handleFileSelect = (e) => {
+    handleFiles(e.target.files);
+    // Reset input value to allow selecting the same file again
+    e.target.value = null;
+  };
+
+  // Handler for clicking the drop zone to open the file dialog
+  const handleBoxClick = () => {
+    fileInputRef.current.click();
+  };
+
+  // Handler for resetting the file list
+  const handleReset = () => {
+    setFiles([]);
+    setUrlInput("");
+  };
+
+  // Handler for adding files
+  const handleAdd = () => {
+    setIsUploading(true); // Start upload state, disable buttons
+    
+    // Regex to validate URL format
+    const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
+    const urls = urlInput.split('\n').map(url => url.trim()).filter(url => url);
+
+    // 1. Validate URLs before proceeding
+    if (files.length === 0 && urls.length === 0) {
+      openSnackbar("Please add files or URLs before submitting.", "error", 5000);
+      return;
+    }
+
+    for (const url of urls) {
+      if (!urlRegex.test(url)) {
+        openSnackbar(`Invalid URL format: ${url}`, 'error', 5000);
+        setIsUploading(false); // Reset upload state on validation error
+        return; // Stop the process if an invalid URL is found
+      }
+    }
+
+    // 2. If all URLs are valid, proceed with logging/uploading
+    const formData = new FormData();
+    if (files.length > 0) {
+      files.forEach(fileWrapper => {
+        formData.append('files', fileWrapper.file, fileWrapper.file.name);
+      });
+    }
+    formData.append('urls', JSON.stringify(urls));
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', '/add-content', true);
+
+    // Track upload progress
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable) {
+        const percentage = Math.round((event.loaded / event.total) * 100);
+        setFiles(prevFiles =>
+          prevFiles.map(f => ({ ...f, progress: percentage }))
+        );
+      }
+    };
+
+    // Handle completion
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        // --- ARTIFICIAL DELAY FOR LOCAL DEVELOPMENT ---
+        // This timeout ensures the 100% progress bar is visible before the dialog closes.
+        // This can be removed for production.
+        setTimeout(() => {
+          const result = JSON.parse(xhr.responseText);
+          openSnackbar('Content added successfully!', 'success');
+          setSessionContent(prev => ({
+            files: [...prev.files, ...result.files_added],
+            links: [...prev.links, ...result.links_added],
+          }));
+          handleReset();
+          onClose();
+        }, 500); // 0.5-second delay
+      } else {
+        const errorResult = JSON.parse(xhr.responseText);
+        openSnackbar(errorResult.detail || 'Failed to add content.', 'error', 5000);
+        setFiles(prevFiles => prevFiles.map(f => ({ ...f, progress: 0 }))); // Reset progress on error
+        setIsUploading(false); // End upload state
+      }
+    };
+
+    // Handle network errors
+    xhr.onerror = () => {
+      openSnackbar('An error occurred during the upload. Please check your network.', 'error', 5000);
+      setFiles(prevFiles => prevFiles.map(f => ({ ...f, progress: 0 }))); // Reset progress on error
+    };
+
+    xhr.send(formData);
+  };
+
+  return (
+    <div className="add-files-dialog" onClick={isUploading ? null : onClose}>
+      <div className="add-files-dialog-inner" onClick={(e) => e.stopPropagation()}>
+        <label className="dialog-title">Add Files and Links</label>
+        <button className="close-btn" onClick={onClose} disabled={isUploading}>
+          <FaTimes />
+        </button>
+        <div className="dialog-content-area">
+          <div className="url-input-container">
+            <textarea
+              id="url-input"
+              className="url-input-textarea"
+              placeholder="Enter one URL per line"
+              value={urlInput}
+              onChange={(e) => setUrlInput(e.target.value)}
+            />
+          </div>
+          <div
+            className={`file-drop-zone ${isDragging ? 'dragging' : ''}`}
+            onClick={handleBoxClick}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleFileSelect}
+              style={{ display: 'none' }}
+              multiple
+            />
+            <FaFileUpload className="upload-icon" />
+            <p>Drag and drop files here, or click to select files</p>
+          </div>
+
+          {files.length > 0 && (
+            <div className="file-list">
+              {files.map(fileWrapper => (
+                <div key={fileWrapper.id} className="file-item">
+                  <FaFileAlt className="file-icon" />
+                  <div className="file-info">
+                    <span className="file-name">{fileWrapper.file.name}</span>
+                    <span className="file-size">{formatFileSize(fileWrapper.file.size)}</span>
+                  </div>
+                  {isUploading && (
+                    <div className="progress-bar-container">
+                      <div className="progress-bar" style={{ width: `${fileWrapper.progress}%` }}></div>
+                    </div>
+                  )}
+                  <button className="cancel-file-btn" onClick={() => handleRemoveFile(fileWrapper.id)} disabled={isUploading}>
+                    <FaTimes />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div className="dialog-actions">
+            <Button
+              disabled={isUploading}
+              onClick={handleReset}
+              sx={{ color: "#2196f3" }}
+            >
+              Reset
+            </Button>
+            <Button
+              disabled={isUploading}
+              onClick={handleAdd}
+              variant="contained"
+              color="success"
+            >
+              Add
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AddFilesDialog;

frontend/src/Components/AiComponents/Notifications/Notification.css

@@ -0,0 +1,379 @@
+.notification-container {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing, 10px);
+  pointer-events: none;
+}
+
+.notification-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing, 10px);
+}
+
+.notification-list.collapsed {
+  gap: 0;
+}
+
+.notification-list.collapsed .notification:not(:first-child) {
+  margin-top: -80%;
+  opacity: 0.3;
+  transform: scale(0.95);
+}
+
+/* Position variations */
+.position-top-left {
+  top: var(--offset-y);
+  left: var(--offset-x);
+  align-items: flex-start;
+}
+
+.position-top-center {
+  top: var(--offset-y);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.position-top-right {
+  top: var(--offset-y);
+  right: var(--offset-x);
+  align-items: flex-end;
+}
+
+.position-bottom-left {
+  bottom: var(--offset-y);
+  left: var(--offset-x);
+  align-items: flex-start;
+}
+
+.position-bottom-center {
+  bottom: var(--offset-y);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.position-bottom-right {
+  bottom: var(--offset-y);
+  right: var(--offset-x);
+  align-items: flex-end;
+}
+
+.position-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  align-items: center;
+}
+
+/* Stack direction */
+.stack-up {
+  flex-direction: column-reverse;
+}
+
+.stack-up .notification-list {
+  flex-direction: column-reverse;
+}
+
+/* Base notification styles */
+.notification {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 300px;
+  max-width: 500px;
+  position: relative;
+  overflow: hidden;
+  pointer-events: all;
+  transition: all 0.3s ease;
+}
+
+.notification-content {
+  padding: 16px;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.notification-icon {
+  flex-shrink: 0;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.notification-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.notification-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 4px;
+  color: #333;
+  word-wrap: break-word;
+}
+
+.notification-message {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.notification-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.notification-action {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: #1976d2;
+  color: white;
+}
+
+.notification-action:hover {
+  background: #1565c0;
+  transform: translateY(-1px);
+}
+
+.notification-close {
+  background: none;
+  border: none;
+  color: #999;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 4px;
+  transition: color 0.2s;
+  display: flex;
+  align-items: center;
+}
+
+.notification-close:hover {
+  color: #666;
+}
+
+.notification-footer {
+  padding: 12px 16px;
+  background: #f5f5f5;
+  border-top: 1px solid #e0e0e0;
+  font-size: 12px;
+  color: #666;
+}
+
+/* Notification types */
+.notification-success {
+  border-left: 4px solid #4caf50;
+}
+
+.notification-success .notification-icon {
+  color: #4caf50;
+}
+
+.notification-error {
+  border-left: 4px solid #f44336;
+}
+
+.notification-error .notification-icon {
+  color: #f44336;
+}
+
+.notification-warning {
+  border-left: 4px solid #ff9800;
+}
+
+.notification-warning .notification-icon {
+  color: #ff9800;
+}
+
+.notification-info {
+  border-left: 4px solid #2196f3;
+}
+
+.notification-info .notification-icon {
+  color: #2196f3;
+}
+
+/* Dark theme */
+.theme-dark .notification {
+  background: #1e1e1e;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.theme-dark .notification-title {
+  color: #fff;
+}
+
+.theme-dark .notification-message {
+  color: #ccc;
+}
+
+.theme-dark .notification-close {
+  color: #666;
+}
+
+.theme-dark .notification-close:hover {
+  color: #999;
+}
+
+.theme-dark .notification-footer {
+  background: #2a2a2a;
+  border-top-color: #444;
+  color: #999;
+}
+
+/* Animations */
+/* Slide animation */
+.animation-slide {
+  animation: slideIn 0.3s ease-out forwards;
+  animation-delay: var(--animation-delay, 0s);
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.position-top-left .animation-slide,
+.position-bottom-left .animation-slide {
+  animation-name: slideInLeft;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Fade animation */
+.animation-fade {
+  animation: fadeIn 0.3s ease-out forwards;
+  animation-delay: var(--animation-delay, 0s);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Zoom animation */
+.animation-zoom {
+  animation: zoomIn 0.3s ease-out forwards;
+  animation-delay: var(--animation-delay, 0s);
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Bounce animation */
+.animation-bounce {
+  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+  animation-delay: var(--animation-delay, 0s);
+}
+
+@keyframes bounceIn {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  60% {
+    transform: translateY(10%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Progress bar */
+.notification-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  background: currentColor;
+  opacity: 0.3;
+  animation: progress linear forwards;
+  animation-duration: var(--duration);
+}
+
+@keyframes progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+/* Collapse toggle */
+.notification-collapse-toggle {
+  align-self: center;
+  padding: 8px 16px;
+  background: #1976d2;
+  color: white;
+  border: none;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  pointer-events: all;
+  margin-bottom: 8px;
+  transition: all 0.2s;
+}
+
+.notification-collapse-toggle:hover {
+  background: #1565c0;
+  transform: translateY(-1px);
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  .notification {
+    min-width: calc(100vw - 40px);
+    max-width: calc(100vw - 40px);
+  }
+  
+  .position-top-center,
+  .position-bottom-center {
+    transform: none;
+    left: 20px;
+    right: 20px;
+  }
+}

frontend/src/Components/AiComponents/Notifications/Notification.js

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { 
+  FaTimes, 
+  FaCheckCircle, 
+  FaExclamationCircle, 
+  FaInfoCircle, 
+  FaExclamationTriangle 
+} from 'react-icons/fa';
+import './Notification.css';
+
+const Notification = ({
+  notifications = [],
+  position = 'top-right',
+  animation = 'slide',
+  stackDirection = 'down',
+  maxNotifications = 5,
+  spacing = 10,
+  offset = { x: 20, y: 20 },
+  onDismiss,
+  onAction,
+  autoStackCollapse = false,
+  theme = 'light'
+}) => {
+  const [internalNotifications, setInternalNotifications] = useState([]);
+  const [collapsed, setCollapsed] = useState(false);
+  const timersRef = useRef({});
+
+  const handleDismiss = useCallback((id) => {
+    if (timersRef.current[id]) {
+      clearTimeout(timersRef.current[id]);
+      delete timersRef.current[id];
+    }
+    onDismiss?.(id);
+  }, [onDismiss]);
+
+  useEffect(() => {
+    // Update internal notifications
+    const processedNotifications = notifications.slice(
+      stackDirection === 'up' ? -maxNotifications : 0,
+      stackDirection === 'up' ? undefined : maxNotifications
+    );
+    
+    setInternalNotifications(processedNotifications);
+
+    // Keep track of current timer IDs for this effect
+    const currentTimerIds = [];
+
+    // Set up auto-dismiss timers
+    processedNotifications.forEach(notification => {
+      if (notification.autoDismiss && notification.duration && !timersRef.current[notification.id]) {
+        const timerId = setTimeout(() => {
+          handleDismiss(notification.id);
+        }, notification.duration);
+        
+        timersRef.current[notification.id] = timerId;
+        currentTimerIds.push(notification.id);
+      }
+    });
+
+    // Cleanup function
+    return () => {
+      // Use the captured timer IDs and current ref
+      const timers = timersRef.current;
+      
+      // Clear timers for notifications that were removed
+      Object.keys(timers).forEach(id => {
+        if (!processedNotifications.find(n => n.id === id)) {
+          clearTimeout(timers[id]);
+          delete timers[id];
+        }
+      });
+    };
+  }, [notifications, maxNotifications, stackDirection, handleDismiss]);
+
+  const handleAction = (notificationId, actionId, actionData) => {
+    onAction?.(notificationId, actionId, actionData);
+  };
+
+  const getIcon = (type, customIcon) => {
+    if (customIcon) return customIcon;
+    
+    switch (type) {
+      case 'success':
+        return <FaCheckCircle />;
+      case 'error':
+        return <FaExclamationCircle />;
+      case 'warning':
+        return <FaExclamationTriangle />;
+      case 'info':
+        return <FaInfoCircle />;
+      default:
+        return null;
+    }
+  };
+
+  const getPositionClasses = () => {
+    const classes = ['notification-container'];
+    
+    // Position classes
+    switch (position) {
+      case 'top-left':
+        classes.push('position-top-left');
+        break;
+      case 'top-center':
+        classes.push('position-top-center');
+        break;
+      case 'top-right':
+        classes.push('position-top-right');
+        break;
+      case 'bottom-left':
+        classes.push('position-bottom-left');
+        break;
+      case 'bottom-center':
+        classes.push('position-bottom-center');
+        break;
+      case 'bottom-right':
+        classes.push('position-bottom-right');
+        break;
+      case 'center':
+        classes.push('position-center');
+        break;
+      default:
+        classes.push('position-top-right');
+    }
+
+    // Stack direction
+    if (stackDirection === 'up') {
+      classes.push('stack-up');
+    }
+
+    // Theme
+    classes.push(`theme-${theme}`);
+
+    return classes.join(' ');
+  };
+
+  const getAnimationClass = (index) => {
+    return `animation-${animation} animation-${animation}-${index}`;
+  };
+
+  const containerStyle = {
+    '--spacing': `${spacing}px`,
+    '--offset-x': `${offset.x}px`,
+    '--offset-y': `${offset.y}px`,
+  };
+
+  if (internalNotifications.length === 0) return null;
+
+  return (
+    <div 
+      className={getPositionClasses()} 
+      style={containerStyle}
+    >
+      {autoStackCollapse && internalNotifications.length > 3 && (
+        <button 
+          className="notification-collapse-toggle"
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          {collapsed ? `Show ${internalNotifications.length} notifications` : 'Collapse'}
+        </button>
+      )}
+      
+      <div className={`notification-list ${collapsed ? 'collapsed' : ''}`}>
+        {internalNotifications.map((notification, index) => (
+          <div
+            key={notification.id}
+            className={`notification notification-${notification.type || 'default'} ${getAnimationClass(index)} ${notification.className || ''}`}
+            style={{
+              '--animation-delay': `${index * 0.05}s`,
+              ...notification.style
+            }}
+          >
+            {notification.showProgress && notification.duration && (
+              <div 
+                className="notification-progress"
+                style={{
+                  '--duration': `${notification.duration}ms`
+                }}
+              />
+            )}
+            
+            <div className="notification-content">
+              {(notification.icon !== false) && (
+                <div className="notification-icon">
+                  {getIcon(notification.type, notification.icon)}
+                </div>
+              )}
+              
+              <div className="notification-body">
+                {notification.title && (
+                  <div className="notification-title">{notification.title}</div>
+                )}
+                
+                {notification.message && (
+                  <div className="notification-message">
+                    {typeof notification.message === 'string' 
+                      ? notification.message 
+                      : notification.message
+                    }
+                  </div>
+                )}
+                
+                {notification.actions && notification.actions.length > 0 && (
+                  <div className="notification-actions">
+                    {notification.actions.map((action) => (
+                      <button
+                        key={action.id}
+                        className={`notification-action ${action.className || ''}`}
+                        onClick={() => handleAction(notification.id, action.id, action.data)}
+                        style={action.style}
+                      >
+                        {action.label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              
+              {notification.dismissible !== false && (
+                <button
+                  className="notification-close"
+                  onClick={() => handleDismiss(notification.id)}
+                  aria-label="Dismiss notification"
+                >
+                  <FaTimes />
+                </button>
+              )}
+            </div>
+            
+            {notification.footer && (
+              <div className="notification-footer">
+                {notification.footer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Notification;

frontend/src/Components/AiComponents/Notifications/useNotification.js

@@ -0,0 +1,43 @@
+import { useState, useCallback } from 'react';
+
+export const useNotification = () => {
+  const [notifications, setNotifications] = useState([]);
+
+  const addNotification = useCallback((notification) => {
+    const id = notification.id || `notification-${Date.now()}-${Math.random()}`;
+    const newNotification = {
+      id,
+      type: 'info',
+      dismissible: true,
+      autoDismiss: false,
+      duration: 5000,
+      showProgress: false,
+      ...notification
+    };
+
+    setNotifications(prev => [...prev, newNotification]);
+    return id;
+  }, []);
+
+  const removeNotification = useCallback((id) => {
+    setNotifications(prev => prev.filter(n => n.id !== id));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setNotifications([]);
+  }, []);
+
+  const updateNotification = useCallback((id, updates) => {
+    setNotifications(prev => 
+      prev.map(n => n.id === id ? { ...n, ...updates } : n)
+    );
+  }, []);
+
+  return {
+    notifications,
+    addNotification,
+    removeNotification,
+    clearAll,
+    updateNotification
+  };
+};

frontend/src/Components/AiComponents/Sidebars/LeftSideBar.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import { FaBars } from 'react-icons/fa';
+import './LeftSidebar.css';
+
+function LeftSidebar() {
+  const [isLeftSidebarOpen, setLeftSidebarOpen] = useState(
+    localStorage.getItem("leftSidebarState") === "true"
+  );
+
+  useEffect(() => {
+    localStorage.setItem("leftSidebarState", isLeftSidebarOpen);
+  }, [isLeftSidebarOpen]);
+
+  const toggleLeftSidebar = () => {
+    setLeftSidebarOpen(!isLeftSidebarOpen);
+  };
+
+  return (
+    <>
+      <nav className={`left-side-bar ${isLeftSidebarOpen ? 'open' : 'closed'}`}>
+        ... (left sidebar content)
+      </nav>
+      {!isLeftSidebarOpen && (
+        <button className='toggle-btn left-toggle' onClick={toggleLeftSidebar}>
+          <FaBars />
+        </button>
+      )}
+    </>
+  );
+//   return (
+//     <div className="left-side-bar-placeholder">
+//       {/* Left sidebar is currently disabled. Uncomment the code in LeftSidebar.js to enable it. */}
+//       Left sidebar is disabled.
+//     </div>
+//   );
+}
+
+export default LeftSidebar;

frontend/src/Components/AiComponents/Sidebars/LeftSidebar.css

@@ -0,0 +1,59 @@
+/* Left Sidebar Specific */
+.left-side-bar {
+    background-color: var(--primary-color);
+    color: var(--text-color);
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    transition: transform var(--transition-speed);
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+  
+  .left-side-bar.closed {
+    transform: translateX(-100%);
+  }
+  
+  /* Toggle Button for Left Sidebar */
+  .toggle-btn.left-toggle {
+    background-color: var(--primary-color);
+    color: var(--text-color);
+    border: none;
+    padding: 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color var(--transition-speed);
+    z-index: 1100;
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+  
+  /* Responsive Adjustments for Left Sidebar */
+  @media (max-width: 768px) {
+    .left-side-bar {
+      width: 200px;
+    }
+  }
+  
+  @media (max-width: 576px) {
+    .left-side-bar {
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      transform: translateY(-100%);
+    }
+    .left-side-bar.open {
+      transform: translateY(0);
+    }
+    .toggle-btn.left-toggle {
+      top: auto;
+      bottom: 1rem;
+      left: 1rem;
+    }
+  }  

frontend/src/Components/AiComponents/Sidebars/RightSidebar.css

@@ -0,0 +1,138 @@
+:root {
+  /* Dark theme variables */
+  --sidebar-background: #2b2b2b;
+  --text-light: #eee;
+  --border-dark: #333;
+}
+
+/* Main sidebar container */
+.right-side-bar {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  background-color: var(--sidebar-background);  /* Keep background uniform */
+  color: var(--text-light);
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5);
+  transition: width 0.4s ease;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+/* Sidebar resizing */
+.right-side-bar.resizing {
+  transition: none;
+}
+
+/* When the sidebar is closed */
+.right-side-bar.closed {
+  width: 0;
+  overflow: hidden;
+}
+
+/* Sidebar header styling */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 3px solid var(--border-dark);
+}
+
+.sidebar-header h3 {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+/* Close button styling */
+.close-btn {
+  background: none;
+  border: none;
+  padding: 6px;
+  color: var(--text-color);
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: color var(--transition-speed);
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+/* Ensure the sidebar background remains uniform */
+.sidebar-content {
+  padding: 16px;
+  background: transparent;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* Also clear any default marker via the pseudo-element */
+.nav-links.no-bullets li::marker {
+  content: "";
+}
+
+/* Lay out each task item using flex so that the icon and text align */
+.task-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+/* Icon span: fixed width and margin for spacing */
+.task-icon {
+  flex-shrink: 0;
+  margin-right: 1rem;
+}
+
+/* Task list text */
+.task-text {
+  white-space: pre-wrap;
+}
+
+/* Resizer for sidebar width adjustment */
+.resizer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 5px;
+  height: 100%;
+  cursor: ew-resize;
+}
+
+/* Toggle button (when sidebar is closed) */
+.toggle-btn.right-toggle {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  background-color: var(--dark-surface);
+  color: var(--text-light);
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  z-index: 1001;
+  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.5);
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+  color: #328bff;
+}
+
+.checkmark {
+  color: #03c203;
+}
+
+.x {
+  color: #d10808;
+}
+
+/* Keyframes for the spinner animation */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

frontend/src/Components/AiComponents/Sidebars/RightSidebar.js

@@ -0,0 +1,142 @@
+import React, { useRef } from 'react';
+import { FaTimes, FaCheck, FaSpinner } from 'react-icons/fa';
+import { BsChevronLeft } from 'react-icons/bs';
+import CircularProgress from '@mui/material/CircularProgress';
+import Sources from '../ChatComponents/Sources';
+import Evaluate from '../ChatComponents/Evaluate';
+import './RightSidebar.css';
+
+function RightSidebar({
+  isOpen,
+  rightSidebarWidth,
+  setRightSidebarWidth,
+  toggleRightSidebar,
+  sidebarContent,
+  tasks = [],
+  tasksLoading,
+  sources = [],
+  sourcesLoading,
+  onTaskClick,
+  onSourceClick,
+  evaluation
+}) {
+  const minWidth = 200;
+  const maxWidth = 450;
+  const sidebarRef = useRef(null);
+
+  // Called when the user starts resizing the sidebar.
+  const startResize = (e) => {
+    e.preventDefault();
+    sidebarRef.current.classList.add("resizing"); // Add the "resizing" class to the sidebar when resizing
+    document.addEventListener("mousemove", resizeSidebar);
+    document.addEventListener("mouseup", stopResize);
+  };
+
+  const resizeSidebar = (e) => {
+    let newWidth = window.innerWidth - e.clientX;
+    if (newWidth < minWidth) newWidth = minWidth;
+    if (newWidth > maxWidth) newWidth = maxWidth;
+    setRightSidebarWidth(newWidth);
+  };
+
+  const stopResize = () => {
+    sidebarRef.current.classList.remove("resizing"); // Remove the "resizing" class from the sidebar when resizing stops
+    document.removeEventListener("mousemove", resizeSidebar);
+    document.removeEventListener("mouseup", stopResize);
+  };
+
+  // Default handler for source clicks: open the link in a new tab.
+  const handleSourceClick = (source) => {
+    if (source && source.link) {
+      window.open(source.link, '_blank');
+    }
+  };
+
+  // Helper function to return the proper icon based on task status.
+  const getTaskIcon = (task) => {
+    // If the task is a simple string, default to the completed icon.
+    if (typeof task === 'string') {
+      return <FaCheck />;
+    }
+    // Use the status field to determine which icon to render.
+    switch (task.status) {
+      case 'RUNNING':
+        // FaSpinner is used for running tasks. The CSS class "spin" can be defined to add animation.
+        return <FaSpinner className="spin"/>;
+      case 'DONE':
+        return <FaCheck className="checkmark" />;
+      case 'FAILED':
+        return <FaTimes className="x" />;
+      default:
+        return <FaCheck />;
+    }
+  };
+
+  return (
+    <>
+      <nav
+        ref={sidebarRef}
+        className={`right-side-bar ${isOpen ? "open" : "closed"}`}
+        style={{ width: isOpen ? rightSidebarWidth : 0 }}
+      >
+        <div className="sidebar-header">
+          <h3>
+              {sidebarContent === "sources"
+                ? "Sources"
+                : sidebarContent === "evaluate"
+                ? "Evaluation"
+                : "Tasks"}
+            </h3>
+          <button className="close-btn" onClick={toggleRightSidebar}>
+            <FaTimes />
+          </button>
+        </div>
+        <div className="sidebar-content">
+          {sidebarContent === "sources" ? ( // If the sidebar content is "sources", show the sources component
+            sourcesLoading ? (
+              <div className="tasks-loading">
+                <CircularProgress size={20} sx={{ color: '#ccc' }} />
+                <span className="loading-tasks-text">Generating sources...</span>
+              </div>
+            ) : (
+              <Sources sources={sources} handleSourceClick={onSourceClick || handleSourceClick} />
+            )
+          ) 
+          // If the sidebar content is "evaluate", show the evaluation component
+          : sidebarContent === "evaluate" ? (
+            <Evaluate evaluation={evaluation} />
+          ) : (
+            // Otherwise, show tasks
+            tasksLoading ? (
+              <div className="tasks-loading">
+                <CircularProgress size={20} sx={{ color: '#ccc' }} />
+                <span className="loading-tasks-text">Generating tasks...</span>
+              </div>
+            ) : (
+              <ul className="nav-links" style={{ listStyle: 'none', padding: 0 }}>
+                {tasks.map((task, index) => (
+                  <li key={index} className="task-item">
+                    <span className="task-icon">
+                      {getTaskIcon(task)}
+                    </span>
+                    <span className="task-text">
+                      {typeof task === 'string' ? task : task.task}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )
+          )}
+        </div>
+        <div className="resizer" onMouseDown={startResize}></div>
+      </nav>
+      {!isOpen && (
+        <button className="toggle-btn right-toggle" onClick={toggleRightSidebar}>
+          <BsChevronLeft />
+        </button>
+      )}
+    </>
+  );
+}
+
+export default RightSidebar;

frontend/src/Components/AiPage.css

@@ -0,0 +1,434 @@
+/* Define a modern dark theme */
+:root {
+  --dark-surface: #190e10;       /* Deep, dark maroon base */
+  --primary-color: #2b2b2b;       /* A dark gray for sidebars and buttons */
+  --secondary-color: #03dac6;     /* A cool teal for accents */
+  --accent-color: #444a89;        /* A warm accent for highlights and borders */
+  --text-color: #e0e0e0;          /* Off-white text */
+  --hover-bg: #3a3a3a;           /* Slightly lighter for hover effects */
+  --transition-speed: 0.25s;      /* Speed of transitions */
+  --search-bar: #21212f;      /* Search bar background */
+}
+
+/* Global font settings */
+html, body {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background: var(--dark-surface);
+}
+
+/* Main container styling */
+.app-container {
+  background: var(--dark-surface);
+  color: var(--text-color);
+  display: flex;
+  min-height: 100vh;
+  position: relative;
+  overflow-y: auto;
+}
+
+/* Main Content */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  padding: 2rem;
+  transition: 0.1s;
+  width: 99%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+/* Search Area for Initial Mode */
+.search-area h1 {
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-area {
+  width: 83%;
+}
+
+.search-bar {
+  position: relative;
+  width: 100%;
+  border-radius: 0.35rem;
+  background-color: var(--search-bar);
+}
+
+.search-input-wrapper {
+  padding: 0rem 0.6rem 4.15rem 0.6rem;
+}
+
+.search-input {
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: 1.2rem;
+  border: none;
+  background-color: transparent;
+  color: var(--text-color);
+  line-height: 1.4;
+  padding: 0.65rem 0.65rem;
+  resize: none;
+  white-space: pre-wrap;
+}
+
+.search-input:focus {
+  outline: none;
+}
+
+.search-input::placeholder {
+  color: #888;
+}
+
+.icon-container {
+  position: absolute;
+  bottom: 0.25rem;
+  left: 0;
+  right: 0;
+  height: 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.75rem;
+}
+
+.settings-btn,
+.add-btn,
+.send-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.settings-btn svg,
+.add-btn svg,
+.send-btn svg {
+  font-size: 1.45rem;
+}
+
+.settings-btn:hover,
+.add-btn:hover,
+.send-btn:hover {
+  color: #888;
+}
+
+/* Stop button */
+button.chat-send-btn.stop-btn,
+button.send-btn.stop-btn {
+  background-color: var(--text-color) !important;
+  border-radius: 50%;
+  width: 28.5px;
+  height: 28.5px;
+  border: none;
+  display: flex;
+  align-items: center;    
+  justify-content: center; 
+  cursor: pointer;
+  padding: 0;
+  margin: 0 0 10px;
+}
+
+button.chat-send-btn.stop-btn:hover,
+button.send-btn.stop-btn:hover {
+  background-color: #888 !important;
+}
+
+/* Chat Mode Search Bar and Textarea Styling */
+.floating-chat-search-bar {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48%;
+  background-color: var(--search-bar);
+  border-radius: 0.35rem;
+}
+
+.floating-chat-search-bar::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1.5rem;
+  height: 1.5rem;
+  background-color: var(--dark-surface);
+}
+
+.chat-search-input-wrapper {
+  padding: 0.25rem 0.6rem;
+}
+
+.chat-search-input {
+  width: 100%;
+  min-width: 700px;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: 1.2rem;
+  border: none;
+  background-color: transparent;
+  color: var(--text-color);
+  line-height: 1.4;
+  padding: 0.65rem 3.25rem 0.65rem 5.5rem;
+  resize: none;
+  white-space: pre-wrap;
+}
+
+.left-icons {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+.chat-search-input:focus {
+  outline: none;
+}
+
+.chat-icon-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.75rem;
+  pointer-events: none;
+}
+
+/* Re-enable pointer events on the actual buttons so they remain clickable */
+.chat-icon-container button,
+.chat-left-icons {
+  pointer-events: auto;
+}
+
+.chat-left-icons {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+.chat-settings-btn,
+.chat-add-btn,
+.chat-send-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  font-size: 1.45rem;
+  margin-bottom: 0.25rem;
+  cursor: pointer;
+}
+
+.chat-settings-btn:hover,
+.chat-add-btn:hover,
+.chat-send-btn:hover {
+  color: #888;
+}
+
+/* Tooltip Wrapper */
+.tooltip-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Tooltip styling */
+.tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(10px) scale(0.9);
+  transform-origin: bottom center;
+  margin-bottom: 0.65rem;
+  padding: 0.3rem 0.6rem;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  font-size: 0.85rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  z-index: 10;
+}
+
+/* Show the tooltip on hover */
+.tooltip-wrapper:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0) scale(1);
+}
+
+/* Hide tooltip when its associated dropdown is open */
+.tooltip-wrapper .tooltip.hidden {
+  opacity: 0;
+  visibility: hidden;
+ }
+
+/* Floating sidebar container for chat mode */
+.floating-sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--right-sidebar-width, 300px);
+  z-index: 1000;
+}
+
+/* Chat container */
+.chat-container {
+  flex-grow: 1;
+  margin-bottom: 9rem;
+}
+
+/* When processing a new prompt */
+.chat-container.processing {
+  margin-bottom: 46rem;
+}
+
+/* Slack Authentication Modal */
+.slack-auth-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.slack-auth-modal-content {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  max-width: 500px;
+  width: 90%;
+  animation: slideUp 0.3s ease-out;
+}
+
+.slack-auth-modal-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+}
+
+.slack-auth-modal-icon {
+  width: 48px;
+  height: 48px;
+  background: #4A154B;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+}
+
+.slack-auth-modal-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.slack-auth-modal-body {
+  margin-bottom: 2rem;
+  color: #666;
+  line-height: 1.6;
+}
+
+.slack-auth-modal-tips {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.slack-auth-modal-tips-title {
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+}
+
+.slack-auth-modal-tips ul {
+  margin: 0.5rem 0 0 0;
+  padding-left: 1.5rem;
+}
+
+.slack-auth-modal-tips li {
+  margin: 0.5rem 0;
+}
+
+.slack-auth-modal-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+}
+
+.slack-auth-modal-button {
+  padding: 0.75rem 1.5rem;
+  border-radius: 6px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.slack-auth-modal-button-primary {
+  background: #4A154B;
+  color: white;
+}
+
+.slack-auth-modal-button-primary:hover {
+  background: #3a0f3b;
+}
+
+.slack-auth-modal-button-secondary {
+  background: #f1f1f1;
+  color: #666;
+}
+
+.slack-auth-modal-button-secondary:hover {
+  background: #e1e1e1;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .main-content {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .main-content {
+    margin: 0;
+    padding: 1rem;
+  }
+}

frontend/src/Components/AiPage.js

@@ -0,0 +1,1253 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { flushSync } from 'react-dom';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import { FaCog, FaPaperPlane, FaStop, FaPlus, FaGoogle, FaMicrosoft, FaSlack } from 'react-icons/fa';
+import IntialSetting from './IntialSetting';
+import AddContentDropdown from './AiComponents/Dropdowns/AddContentDropdown';
+import AddFilesDialog from './AiComponents/Dropdowns/AddFilesDialog';
+import ChatWindow from './AiComponents/ChatWindow';
+import RightSidebar from './AiComponents/Sidebars/RightSidebar';
+import Notification from '../Components/AiComponents/Notifications/Notification';
+import { useNotification } from '../Components/AiComponents/Notifications/useNotification';
+import './AiPage.css';
+
+function AiPage() {
+  // Sidebar and other states
+  const [isRightSidebarOpen, setRightSidebarOpen] = useState(
+    localStorage.getItem("rightSidebarState") === "true"
+  );
+  const [rightSidebarWidth, setRightSidebarWidth] = useState(300);
+  const [sidebarContent, setSidebarContent] = useState("default");
+
+  const [searchText, setSearchText] = useState("");
+  const textAreaRef = useRef(null);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
+
+  const [showChatWindow, setShowChatWindow] = useState(false);
+  const [chatBlocks, setChatBlocks] = useState([]);
+  const [selectedChatBlockId, setSelectedChatBlockId] = useState(null);
+
+  const addBtnRef = useRef(null);
+  const chatAddBtnRef = useRef(null);
+  const [isAddContentOpen, setAddContentOpen] = useState(false);
+  const [isTooltipSuppressed, setIsTooltipSuppressed] = useState(false);
+
+  const [isAddFilesDialogOpen, setIsAddFilesDialogOpen] = useState(false);
+
+  const [defaultChatHeight, setDefaultChatHeight] = useState(null);
+  const [chatBottomPadding, setChatBottomPadding] = useState("60px");
+
+  const [sessionContent, setSessionContent] = useState({ files: [], links: [] });
+
+  // States/refs for streaming
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [activeBlockId, setActiveBlockId] = useState(null);
+  const activeEventSourceRef = useRef(null);
+
+  // State to track if we should auto-scroll to the bottom
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(false);
+
+  // Snackbar state
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success",
+  });
+
+  // State for tracking selected services
+  const [selectedServices, setSelectedServices] = useState({
+    google: [],
+    microsoft: [],
+    slack: false
+  });
+
+  // State for Slack authentication modal
+  const [showSlackAuthModal, setShowSlackAuthModal] = useState(false);
+  const [pendingSlackAuth, setPendingSlackAuth] = useState(null);
+
+  // Notifications
+  const { 
+    notifications, 
+    addNotification, 
+    removeNotification,
+    updateNotification 
+  } = useNotification();
+
+  // Token management
+  const tokenExpiryTimersRef = useRef({});
+  const notificationIdsRef = useRef({});
+
+  // Function to check if we are near the bottom of the page
+  const checkIfNearBottom = (threshold = 400) => {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = window.innerHeight;
+    const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+    
+    return distanceFromBottom <= threshold;
+  };
+
+  // Helper to scroll to bottom
+  const scrollToBottom = (smooth = true) => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto'
+    });
+  };
+
+  // Function to open the snackbar
+  const openSnackbar = useCallback((message, severity = "success", duration) => {
+    let finalDuration;
+
+    if (duration !== undefined) {
+      // If a specific duration is provided (e.g., 5000 or null), use it.
+      finalDuration = duration;
+    } else {
+      // Otherwise, use the default logic.
+      finalDuration = severity === 'success' ? 3000 : null; // Success auto-hides, others are persistent by default.
+    }
+
+    setSnackbar({ open: true, message, severity, duration: finalDuration });
+  }, []);
+
+  // Function to close the snackbar
+  const closeSnackbar = (event, reason) => {
+    if (reason === 'clickaway') return;
+    setSnackbar(prev => ({ ...prev, open: false, duration: null }));
+  };
+
+  useEffect(() => {
+    localStorage.setItem("rightSidebarState", isRightSidebarOpen);
+  }, [isRightSidebarOpen]);
+
+  // Add cleanup handler for when the user closes the tab/browser
+  useEffect(() => {
+    const handleCleanup = () => {
+      navigator.sendBeacon('/cleanup');
+    };
+    window.addEventListener('beforeunload', handleCleanup);
+    return () => window.removeEventListener('beforeunload', handleCleanup);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('--right-sidebar-width', rightSidebarWidth + 'px');
+  }, [rightSidebarWidth]);
+
+  // Dynamically increase height of chat input field based on newlines entered
+  useEffect(() => {
+    if (textAreaRef.current) {
+      if (!defaultChatHeight) {
+        setDefaultChatHeight(textAreaRef.current.scrollHeight);
+      }
+      textAreaRef.current.style.height = "auto";
+      textAreaRef.current.style.overflowY = "hidden";
+
+      const newHeight = textAreaRef.current.scrollHeight;
+      let finalHeight = newHeight;
+      if (newHeight > 200) {
+        finalHeight = 200;
+        textAreaRef.current.style.overflowY = "auto";
+      }
+      textAreaRef.current.style.height = `${finalHeight}px`;
+
+      const minPaddingPx = 0;
+      const maxPaddingPx = 59;
+      let newPaddingPx = minPaddingPx;
+      if (defaultChatHeight && finalHeight > defaultChatHeight) {
+        newPaddingPx =
+          minPaddingPx +
+          ((finalHeight - defaultChatHeight) / (200 - defaultChatHeight)) *
+            (maxPaddingPx - minPaddingPx);
+        if (newPaddingPx > maxPaddingPx) newPaddingPx = maxPaddingPx;
+      }
+      setChatBottomPadding(`${newPaddingPx}px`);
+    }
+  }, [searchText, defaultChatHeight]);
+
+  // Update backend whenever selected services change
+  useEffect(() => {
+    const updateSelectedServices = async () => {
+      try {
+        await fetch('/api/selected-services', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            services: selectedServices
+          })
+        });
+      } catch (error) {
+        console.error('Failed to update selected services:', error);
+      }
+    };
+    
+    updateSelectedServices();
+  }, [selectedServices]);
+
+  // Clear all tokens on page load
+  useEffect(() => {
+    // Clear all provider tokens on new tab/page load
+    ['google', 'microsoft', 'slack'].forEach(provider => {
+      sessionStorage.removeItem(`${provider}_token`);
+      sessionStorage.removeItem(`${provider}_token_expiry`);
+    });
+    
+    // Clear any existing timers
+    Object.values(tokenExpiryTimersRef.current).forEach(timer => clearTimeout(timer));
+    tokenExpiryTimersRef.current = {};
+    
+    console.log('Cleared all tokens for new session');
+  }, []);
+
+  const handleOpenRightSidebar = (content, chatBlockId = null) => {
+    flushSync(() => {
+      if (chatBlockId) {
+        setSelectedChatBlockId(chatBlockId);
+      }
+      setSidebarContent(content ? content : "default");
+      setRightSidebarOpen(true);
+    });
+  };
+
+  const handleEvaluationError = useCallback((blockId, errorMsg) => {
+    setChatBlocks(prev =>
+      prev.map(block =>
+        block.id === blockId
+          ? { ...block, isError: true, errorMessage: errorMsg }
+          : block
+      )
+    );
+  }, []);
+
+  // Function to store token with expiry
+  const storeTokenWithExpiry = (provider, token) => {
+    const expiryTime = Date.now() + (60 * 60 * 1000); // 1 hour from now
+    sessionStorage.setItem(`${provider}_token`, token);
+    sessionStorage.setItem(`${provider}_token_expiry`, expiryTime.toString());
+    
+    // Set up expiry timer
+    setupTokenExpiryTimer(provider, expiryTime);
+  };
+
+  // Function to check if token is valid
+  const isTokenValid = (provider) => {
+    const token = sessionStorage.getItem(`${provider}_token`);
+    const expiry = sessionStorage.getItem(`${provider}_token_expiry`);
+    
+    if (!token || !expiry) return false;
+    
+    const expiryTime = parseInt(expiry);
+    return Date.now() < expiryTime;
+  };
+
+  // Function to get provider icon
+  const getProviderIcon = useCallback((provider) => {
+    switch (provider.toLowerCase()) {
+      case 'google':
+        return <FaGoogle />;
+      case 'microsoft':
+        return <FaMicrosoft />;
+      case 'slack':
+        return <FaSlack />;
+      default:
+        return null;
+    }
+  }, []);
+
+  // Function to get provider color
+  const getProviderColor = useCallback((provider) => {
+    switch (provider.toLowerCase()) {
+      case 'google':
+        return '#4285F4';
+      case 'microsoft':
+        return '#00A4EF';
+      case 'slack':
+        return '#4A154B';
+      default:
+        return '#666';
+    }
+  }, []);
+
+  // Function to set up timer for token expiry notification
+  const setupTokenExpiryTimer = useCallback((provider, expiryTime) => {
+    // Clear existing timer if any
+    if (tokenExpiryTimersRef.current[provider]) {
+      clearTimeout(tokenExpiryTimersRef.current[provider]);
+    }
+    
+    // Remove any existing notification for this provider
+    if (notificationIdsRef.current[provider]) {
+      removeNotification(notificationIdsRef.current[provider]);
+      delete notificationIdsRef.current[provider];
+    }
+    
+    const timeUntilExpiry = expiryTime - Date.now();
+    
+    if (timeUntilExpiry > 0) {
+      tokenExpiryTimersRef.current[provider] = setTimeout(() => {
+        const providerName = provider.charAt(0).toUpperCase() + provider.slice(1);
+        const providerColor = getProviderColor(provider);
+        
+        // Add notification
+        const notificationId = addNotification({
+          type: 'warning',
+          title: `${providerName} Authentication Expired`,
+          message: `Your ${providerName} authentication has expired. Please reconnect to continue using ${providerName} services.`,
+          icon: getProviderIcon(provider),
+          dismissible: true,
+          autoDismiss: false,
+          actions: [
+            {
+              id: 'reconnect',
+              label: `Reconnect ${providerName}`,
+              style: {
+                background: providerColor,
+                color: 'white',
+                border: 'none'
+              },
+              data: { provider }
+            }
+          ],
+          style: {
+            borderLeftColor: providerColor
+          }
+        });
+        
+        // Store notification ID
+        notificationIdsRef.current[provider] = notificationId;
+        
+        // Clear token data
+        sessionStorage.removeItem(`${provider}_token`);
+        sessionStorage.removeItem(`${provider}_token_expiry`);
+        
+        // Update selected services to reflect disconnection
+        if (provider === 'slack') {
+          setSelectedServices(prev => ({ ...prev, slack: false }));
+        } else {
+          setSelectedServices(prev => ({ ...prev, [provider]: [] }));
+        }
+        
+      }, timeUntilExpiry);
+    }
+  }, [addNotification, getProviderColor, getProviderIcon, removeNotification, setSelectedServices]);
+
+  // Check existing tokens on component mount and set up timers
+  useEffect(() => {
+    ['google', 'microsoft', 'slack'].forEach(provider => {
+      const expiry = sessionStorage.getItem(`${provider}_token_expiry`);
+      if (expiry) {
+        const expiryTime = parseInt(expiry);
+        if (Date.now() < expiryTime) {
+          setupTokenExpiryTimer(provider, expiryTime);
+        } else {
+          // Token already expired, clear it
+          sessionStorage.removeItem(`${provider}_token`);
+          sessionStorage.removeItem(`${provider}_token_expiry`);
+        }
+      }
+    });
+    
+    // Cleanup timers on unmount
+    return () => {
+      Object.values(tokenExpiryTimersRef.current).forEach(timer => clearTimeout(timer));
+    };
+  }, [setupTokenExpiryTimer]);
+
+  // Initiate the SSE
+  const initiateSSE = (query, blockId) => {
+    const startTime = Date.now();
+    const sseUrl = `/message-sse?user_message=${encodeURIComponent(query)}`;
+    const eventSource = new EventSource(sseUrl);
+    activeEventSourceRef.current = eventSource;
+
+    eventSource.addEventListener("token", (e) => {
+      const { chunk, index } = JSON.parse(e.data);
+      console.log("[SSE token chunk]", JSON.stringify(chunk));
+      console.log("[SSE token index]", JSON.stringify(index));
+    
+      setChatBlocks(prevBlocks => {
+        return prevBlocks.map(block => {
+          if (block.id === blockId) {
+            const newTokenArray = block.tokenChunks ? [...block.tokenChunks] : [];
+            newTokenArray[index] = chunk;
+    
+            return {
+              ...block,
+              tokenChunks: newTokenArray
+            };
+          }
+          return block;
+        });
+      });
+    });    
+
+    eventSource.addEventListener("final_message", (e) => {
+      console.log("[SSE final message]", e.data);
+      const endTime = Date.now();
+      const thinkingTime = ((endTime - startTime) / 1000).toFixed(1);
+      // Only update thinkingTime so the streaming flag turns false and the cursor disappears
+      setChatBlocks(prev => prev.map(block =>
+        block.id === blockId
+          ? { ...block, thinkingTime }
+          : block
+      ));
+    });    
+
+    // Listen for the "final_sources" event to update sources in AI answer of this chat block.
+    eventSource.addEventListener("final_sources", (e) => {
+      try {
+        const sources = JSON.parse(e.data);
+        console.log("Final sources received:", sources);
+        setChatBlocks(prev => prev.map(block =>
+          block.id === blockId ? { ...block, finalSources: sources } : block
+        ));
+      } catch (err) {
+        console.error("Error parsing final_sources event:", err);
+      }
+    });
+  
+    // Listen for the "complete" event to know when to close the connection.
+    eventSource.addEventListener("complete", (e) => {
+      console.log("Complete event received:", e.data);
+      eventSource.close();
+      activeEventSourceRef.current = null;
+      setIsProcessing(false);
+      setActiveBlockId(null);
+    });
+
+    // Update actions for only this chat block.
+    eventSource.addEventListener("action", (e) => {
+      try {
+        const actionData = JSON.parse(e.data);
+        console.log("Action event received:", actionData);
+        setChatBlocks(prev => prev.map(block => {
+          if (block.id === blockId) {
+            let updatedBlock = { ...block, actions: [...(block.actions || []), actionData] };
+            if (actionData.name === "sources") {
+              updatedBlock.sources = actionData.payload;
+            }
+            if (actionData.name === "graph") {
+              updatedBlock.graph = actionData.payload;
+            }
+            return updatedBlock;
+          }
+          return block;
+        }));
+      } catch (err) {
+        console.error("Error parsing action event:", err);
+      }
+    });
+    
+    // Update the error for this chat block.
+    eventSource.addEventListener("error", (e) => {
+      console.error("Error from SSE:", e.data);
+      setChatBlocks(prev => prev.map(block =>
+        block.id === blockId
+          ? { 
+              ...block, 
+              isError: true, 
+              errorMessage: e.data, 
+              aiAnswer: "",
+              tasks: [] 
+            }
+          : block
+      ));
+      eventSource.close();
+      activeEventSourceRef.current = null;
+      setIsProcessing(false);
+      setActiveBlockId(null);
+    });
+
+    eventSource.addEventListener("step", (e) => {
+      console.log("Step event received:", e.data);
+      setChatBlocks(prev => prev.map(block =>
+        block.id === blockId
+          ? { ...block, thoughtLabel: e.data }
+          : block
+      ));
+    });
+
+    eventSource.addEventListener("sources_read", (e) => {
+      console.log("Sources read event received:", e.data);
+      try {
+        const parsed = JSON.parse(e.data);
+        let count;
+        if (typeof parsed === 'number') {
+          count = parsed;
+        } else if (parsed && typeof parsed.count === 'number') {
+          count = parsed.count;
+        }
+        if (typeof count === 'number') {
+          setChatBlocks(prev => prev.map(block =>
+            block.id === blockId
+              ? { ...block, sourcesRead: count, sources: parsed.sources || [] }
+              : block
+          ));
+        }
+      } catch(err) {
+        if (e.data.trim() !== "") {
+          setChatBlocks(prev => prev.map(block =>
+            block.id === blockId
+              ? { ...block, sourcesRead: e.data }
+              : block
+          ));
+        }
+      }
+    });
+
+    eventSource.addEventListener("task", (e) => {
+      console.log("Task event received:", e.data);
+      try {
+        const taskData = JSON.parse(e.data);
+        setChatBlocks(prev => prev.map(block => {
+          if (block.id === blockId) {
+            const existingTaskIndex = (block.tasks || []).findIndex(t => t.task === taskData.task);
+            if (existingTaskIndex !== -1) {
+              const updatedTasks = [...block.tasks];
+              updatedTasks[existingTaskIndex] = { ...updatedTasks[existingTaskIndex], status: taskData.status };
+              return { ...block, tasks: updatedTasks };
+            } else {
+              return { ...block, tasks: [...(block.tasks || []), taskData] };
+            }
+          }
+          return block;
+        }));
+      } catch (error) {
+        console.error("Error parsing task event:", error);
+      }
+    });
+  };
+
+  // Create a new chat block and initiate the SSE
+  const handleSend = () => {
+    if (!searchText.trim()) return;
+
+    // Check if this is the first prompt (no existing chat blocks)
+    const isFirstPrompt = chatBlocks.length === 0;
+
+    // Only check if user is near bottom if this is NOT the first prompt before adding a new block
+    const shouldScroll = !isFirstPrompt && checkIfNearBottom(1000); // 1000px threshold
+    setAutoScrollEnabled(shouldScroll);
+
+    const blockId = new Date().getTime();
+    setActiveBlockId(blockId);
+    setIsProcessing(true);
+    setChatBlocks(prev => [
+      ...prev,
+      { 
+        id: blockId, 
+        userMessage: searchText, 
+        tokenChunks: [],
+        aiAnswer: "", 
+        thinkingTime: null, 
+        thoughtLabel: "", 
+        sourcesRead: "",
+        tasks: [], 
+        sources: [],
+        actions: []
+      }
+    ]);
+    setShowChatWindow(true);
+    const query = searchText;
+    setSearchText("");
+    initiateSSE(query, blockId);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (!isProcessing) {
+        handleSend();
+      }
+    }
+  };
+
+  // Auto-scroll when chat block is added
+  useEffect(() => {
+    if (autoScrollEnabled && isProcessing) {
+      scrollToBottom();
+    }
+  }, [isProcessing, autoScrollEnabled]);
+
+  // Stop the user request and close the active SSE connection
+  const handleStop = async () => {
+    // Close the active SSE connection if it exists
+    if (activeEventSourceRef.current) {
+      activeEventSourceRef.current.close();
+      activeEventSourceRef.current = null;
+    }
+    // Send POST request to /stop and update the chat block with the returned message
+    try {
+      const response = await fetch('/stop', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({})
+      });
+      const data = await response.json();
+
+      if (activeBlockId) {
+        setChatBlocks(prev => prev.map(block =>
+          block.id === activeBlockId
+            ? { ...block, aiAnswer: data.message, thinkingTime: 0, tasks: [] }
+            : block
+        ));
+      }
+    } catch (error) {
+      console.error("Error stopping the request:", error);
+      if (activeBlockId) {
+        setChatBlocks(prev => prev.map(block =>
+          block.id === activeBlockId
+            ? { ...block, aiAnswer: "Error stopping task", thinkingTime: 0, tasks: [] }
+            : block
+        ));
+      }
+    }
+    setIsProcessing(false);
+    setActiveBlockId(null);
+  };
+
+  const handleSendButtonClick = () => {
+    if (searchText.trim()) handleSend();
+  };
+
+  // Toggle the Add Content dropdown
+  const handleToggleAddContent = (event) => {
+    event.stopPropagation(); // Prevents the click from closing the menu immediately
+    // If we are about to close the dropdown, suppress the tooltip.
+    if (isAddContentOpen) {
+      setIsTooltipSuppressed(true);
+    }
+     setAddContentOpen(prev => !prev);
+  };
+
+  // Handle mouse enter on the Add Content button to suppress tooltip
+  const handleMouseLeaveAddBtn = () => {
+    setIsTooltipSuppressed(false);
+  };
+
+  // Close the Add Content dropdown
+  const closeAddContentDropdown = () => {
+    setAddContentOpen(false);
+  };
+
+  // Open the Add Files dialog
+  const handleOpenAddFilesDialog = () => {
+    setAddContentOpen(false); // Close the dropdown when opening the dialog
+    setIsAddFilesDialogOpen(true);
+  };
+
+  // Fetch excerpts for a specific block
+  const handleFetchExcerpts = useCallback(async (blockId) => {
+    let blockIndex = -1;
+    let currentBlock = null;
+  
+    // Find the block to check its current state
+    setChatBlocks(prev => {
+        blockIndex = prev.findIndex(b => b.id === blockId);
+        if (blockIndex !== -1) {
+            currentBlock = prev[blockIndex];
+        }
+        // No state change here, just reading the state
+        return prev;
+    });
+  
+    // Prevent fetching if already loaded or currently loading
+    if (blockIndex === -1 || !currentBlock || currentBlock.excerptsData || currentBlock.isLoadingExcerpts) return;
+  
+    // Set loading state for the specific block
+    setChatBlocks(prev => prev.map(b =>
+      b.id === blockId ? { ...b, isLoadingExcerpts: true } : b
+    ));
+  
+    try {
+      // Call the backend endpoint to get excerpts
+      const response = await fetch('/action/excerpts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ blockId: blockId })
+      });
+  
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.detail || `HTTP error! status: ${response.status}`);
+      }
+  
+      const data = await response.json();
+      console.log("Fetched excerpts data from backend:", data.result);
+  
+      // Update the specific block with the fetched excerptsData
+      setChatBlocks(prev => prev.map(b =>
+        b.id === blockId
+          ? {
+              ...b,
+              excerptsData: data.result, // Store the fetched data
+              isLoadingExcerpts: false,    // Turn off loading
+            }
+          : b
+      ));
+      openSnackbar("Excerpts loaded successfully!", "success");
+  
+    } catch (error) {
+      console.error("Error requesting excerpts:", error);
+      // Reset loading state on error
+      setChatBlocks(prev => prev.map(b =>
+        b.id === blockId ? { ...b, isLoadingExcerpts: false } : b
+      ));
+      openSnackbar(`Failed to load excerpts`, "error");
+    }
+  }, [openSnackbar]);
+
+  // Function to handle notification actions
+  const handleNotificationAction = (notificationId, actionId, actionData) => {
+    console.log('Notification action triggered:', { notificationId, actionId, actionData });
+    
+    // Handle both 'reconnect' and 'connect' actions
+    if ((actionId === 'reconnect' || actionId === 'connect') && actionData?.provider) {
+      // Remove the notification
+      removeNotification(notificationId);
+      
+      // Clean up stored notification ID if it exists
+      if (notificationIdsRef.current[actionData.provider] === notificationId) {
+        delete notificationIdsRef.current[actionData.provider];
+      }
+      
+      // Trigger authentication
+      initiateOAuth(actionData.provider);
+    }
+  };
+
+  // Slack Auth Modal Component
+  const SlackAuthModal = () => {
+    if (!showSlackAuthModal) return null;
+
+    return (
+      <div className="slack-auth-modal" onClick={() => setShowSlackAuthModal(false)}>
+        <div className="slack-auth-modal-content" onClick={(e) => e.stopPropagation()}>
+          <div className="slack-auth-modal-header">
+            <div className="slack-auth-modal-icon">
+              <FaSlack />
+            </div>
+            <h2 className="slack-auth-modal-title">Connect to Slack</h2>
+          </div>
+          
+          <div className="slack-auth-modal-body">
+            <p>
+              Slack will use your currently logged-in workspace. If you're logged into multiple workspaces, 
+              you'll be able to select which one to use.
+            </p>
+            
+            <div className="slack-auth-modal-tips">
+              <div className="slack-auth-modal-tips-title">
+                To use a different workspace:
+              </div>
+              <ul>
+                <li>Sign out of Slack in your browser first</li>
+                <li>Use an incognito/private browser window</li>
+                <li>Or switch workspaces in Slack before continuing</li>
+              </ul>
+            </div>
+            
+            <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#888' }}>
+              You'll be redirected to Slack to authorize access. This allows the app to read messages 
+              and channels from your selected workspace.
+            </p>
+          </div>
+          
+          <div className="slack-auth-modal-buttons">
+            <button 
+              className="slack-auth-modal-button slack-auth-modal-button-secondary"
+              onClick={() => {
+                setShowSlackAuthModal(false);
+                if (pendingSlackAuth?.notificationId) {
+                  removeNotification(pendingSlackAuth.notificationId);
+                }
+                setPendingSlackAuth(null);
+              }}
+            >
+              Cancel
+            </button>
+            <button 
+              className="slack-auth-modal-button slack-auth-modal-button-primary"
+              onClick={() => {
+                setShowSlackAuthModal(false);
+                if (pendingSlackAuth) {
+                  // Continue with the actual OAuth flow
+                  proceedWithSlackAuth(pendingSlackAuth);
+                }
+              }}
+            >
+              Continue to Slack
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Function to proceed with Slack authentication
+  const proceedWithSlackAuth = (pendingAuth) => {
+    const { provider, notificationId } = pendingAuth;
+    setPendingSlackAuth(null);
+    
+    // Update the notification
+    if (notificationId) {
+      updateNotification(notificationId, {
+        message: 'Redirecting to Slack for authentication...'
+      });
+    }
+    
+    // Now proceed with OAuth
+    proceedWithOAuth(provider, notificationId);
+  };
+
+  // Function to initiate OAuth
+  const initiateOAuth = (provider) => {
+    // Special handling for Slack - show modal first
+    if (provider === 'slack') {
+      // Show the modal first
+      const connectingNotificationId = addNotification({
+        type: 'info',
+        title: `Preparing to connect to Slack`,
+        message: 'Please review the connection information...',
+        icon: getProviderIcon(provider),
+        dismissible: false,
+        autoDismiss: false
+      });
+      
+      setPendingSlackAuth({ provider, notificationId: connectingNotificationId });
+      setShowSlackAuthModal(true);
+      return;
+    }
+    
+    // For Google and Microsoft, proceed normally
+    proceedWithOAuth(provider);
+  };
+
+  // Function to proceed with OAuth (renamed from initiateOAuth)
+  const proceedWithOAuth = (provider, existingNotificationId = null) => {
+    const authUrls = {
+      google: `https://accounts.google.com/o/oauth2/v2/auth?` +
+        `client_id=${process.env.REACT_APP_GOOGLE_CLIENT_ID}&` +
+        `response_type=token&` +
+        `scope=email profile https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/gmail.readonly https://www.googleapis.com/auth/calendar.readonly https://www.googleapis.com/auth/tasks.readonly&` +
+        `redirect_uri=${window.location.origin}/auth-receiver.html&` +
+        `state=google&` +
+        `prompt=select_account`,
+      
+      microsoft: `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?` +
+        `client_id=${process.env.REACT_APP_MICROSOFT_CLIENT_ID}&` +
+        `response_type=token&` +
+        `scope=openid profile email Files.Read.All Mail.Read Calendars.Read Tasks.Read Notes.Read&` +
+        `redirect_uri=${window.location.origin}/auth-receiver.html&` +
+        `response_mode=fragment&` +
+        `state=microsoft&` +
+        `prompt=select_account`,
+      
+      slack: `https://slack.com/oauth/v2/authorize?` +
+        `client_id=${process.env.REACT_APP_SLACK_CLIENT_ID}&` +
+        `user_scope=channels:read,channels:history,files:read,groups:read,im:read,mpim:read,search:read,users:read&` +
+        `redirect_uri=${window.location.origin}/auth-receiver.html&` +
+        `state=slack`
+    };
+    
+    const authWindow = window.open(
+      authUrls[provider],
+      'Connect Account',
+      'width=600,height=700,left=200,top=100'
+    );
+    
+    // Show connecting notification
+    const connectingNotificationId = existingNotificationId || addNotification({
+      type: 'info',
+      title: `Connecting to ${provider.charAt(0).toUpperCase() + provider.slice(1)}`,
+      message: 'Please complete the authentication in the popup window...',
+      icon: getProviderIcon(provider),
+      dismissible: false,
+      autoDismiss: false
+    });
+    
+    // Set up message listener
+    const messageHandler = async (event) => {
+      if (event.origin !== window.location.origin) return;
+      
+      if (event.data.type === 'auth-success') {
+        const { token, code, team_id, team_name, provider: authProvider } = event.data;
+        
+        // Remove connecting notification
+        removeNotification(connectingNotificationId);
+        
+        // Store token with expiry
+        storeTokenWithExpiry(provider, token);
+        
+        // Store workspace info in sessionStorage for Slack
+        if (provider === 'slack' && team_id) {
+          sessionStorage.setItem('slack_workspace', JSON.stringify({
+            team_id,
+            team_name: team_name || 'Unknown Workspace'
+          }));
+        }
+        
+        // Build payload for backend
+        const payload = {
+          provider: authProvider || provider,  // Use provider from auth data if available
+          token,
+          origin: window.location.origin  // Add origin for backend
+        };
+        
+        // Include code for Slack and Microsoft (if using code flow)
+        if (code) {
+          payload.code = code;
+        }
+        
+        // Include workspace info for Slack
+        if (provider === 'slack' || authProvider === 'slack') {
+          if (team_id) payload.team_id = team_id;
+          if (team_name) payload.team_name = team_name;
+        }
+        
+        // Send token and workspace info to backend
+        try {
+          const response = await fetch('/api/session-token', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+          });
+          
+          if (response.ok) {
+            // Show success notification with workspace info
+            const workspaceInfo = provider === 'slack' && team_name 
+              ? ` (Workspace: ${team_name})` 
+              : '';
+              
+            addNotification({
+              type: 'success',
+              title: 'Connected Successfully',
+              message: `Successfully connected to ${provider.charAt(0).toUpperCase() + provider.slice(1)}${workspaceInfo}!`,
+              icon: getProviderIcon(provider),
+              autoDismiss: true,
+              duration: 3000,
+              showProgress: true
+            });
+          }
+        } catch (error) {
+          console.error(`Failed to connect to ${provider}:`, error);
+          addNotification({
+            type: 'error',
+            title: 'Connection Failed',
+            message: `Failed to connect to ${provider.charAt(0).toUpperCase() + provider.slice(1)}. Please try again.`,
+            autoDismiss: true,
+            duration: 5000
+          });
+        }
+        
+        window.removeEventListener('message', messageHandler);
+      } else if (event.data.type === 'auth-failed') {
+        console.error(`Authentication failed for ${provider}:`, event.data.error);
+        
+        // Remove connecting notification
+        removeNotification(connectingNotificationId);
+        
+        // Show error notification
+        addNotification({
+          type: 'error',
+          title: 'Authentication Failed',
+          message: `Failed to authenticate with ${provider.charAt(0).toUpperCase() + provider.slice(1)}. ${event.data.error_description || 'Please try again.'}`,
+          autoDismiss: true,
+          duration: 5000
+        });
+        
+        window.removeEventListener('message', messageHandler);
+      }
+    };
+    
+    window.addEventListener('message', messageHandler);
+    
+    // Handle if user closes the popup without authenticating
+    const checkInterval = setInterval(() => {
+      if (authWindow.closed) {
+        clearInterval(checkInterval);
+        removeNotification(connectingNotificationId);
+        window.removeEventListener('message', messageHandler);
+      }
+    }, 1000);
+  };
+
+  // Handle service selection from dropdown
+  const handleServiceClick = useCallback((provider, service) => {
+    // Toggle selection
+    if (provider === 'slack') {
+      setSelectedServices(prev => ({ ...prev, slack: !prev.slack }));
+    } else {
+      setSelectedServices(prev => ({
+        ...prev,
+        [provider]: prev[provider].includes(service) 
+          ? prev[provider].filter(s => s !== service)
+          : [...prev[provider], service]
+      }));
+    }
+    
+    // Check if token is valid
+    if (!isTokenValid(provider)) {
+      // Show notification prompting to authenticate
+      const notificationId = addNotification({
+        type: 'info',
+        title: 'Authentication Required',
+        message: `Please connect your ${provider.charAt(0).toUpperCase() + provider.slice(1)} account to use this service.`,
+        icon: getProviderIcon(provider),
+        actions: [
+          {
+            id: 'connect',
+            label: `Connect ${provider.charAt(0).toUpperCase() + provider.slice(1)}`,
+            style: {
+              background: getProviderColor(provider),
+              color: 'white',
+              border: 'none'
+            },
+            data: { provider }
+          }
+        ],
+        autoDismiss: true,
+        duration: 5000,
+        showProgress: true
+      });
+    }
+  }, [addNotification, getProviderIcon, getProviderColor]);
+
+  // Get the chat block whose details should be shown in the sidebar.
+  const selectedBlock = chatBlocks.find(block => block.id === selectedChatBlockId);
+  const evaluateAction = selectedBlock && selectedBlock.actions
+    ? selectedBlock.actions.find(a => a.name === "evaluate")
+    : null;
+
+  // Memoized evaluation object
+  const evaluation = useMemo(() => {
+    if (!evaluateAction) return null;
+    return {
+      ...evaluateAction.payload,
+      blockId: selectedBlock?.id,
+      onError: handleEvaluationError,
+    };
+  }, [evaluateAction, selectedBlock?.id, handleEvaluationError]);
+
+  return (
+    <div 
+      className="app-container"
+      style={{
+        paddingRight: isRightSidebarOpen
+          ? Math.max(0, rightSidebarWidth - 250) + 'px'
+          : 0,
+      }}
+    >
+      <Notification
+        notifications={notifications}
+        position="top-right"
+        animation="slide"
+        stackDirection="down"
+        maxNotifications={5}
+        spacing={12}
+        offset={{ x: 20, y: 20 }}
+        onDismiss={removeNotification}
+        onAction={handleNotificationAction}
+        theme="light"
+      />
+      {showSlackAuthModal && <SlackAuthModal />}
+      {showChatWindow && selectedBlock && (sidebarContent !== "default" || (selectedBlock.tasks && selectedBlock.tasks.length > 0) || (selectedBlock.sources && selectedBlock.sources.length > 0)) && (
+        <div className="floating-sidebar">
+          <RightSidebar 
+            isOpen={isRightSidebarOpen}
+            rightSidebarWidth={rightSidebarWidth}
+            setRightSidebarWidth={setRightSidebarWidth}
+            toggleRightSidebar={() => setRightSidebarOpen(!isRightSidebarOpen)}
+            sidebarContent={sidebarContent}
+            tasks={selectedBlock.tasks || []}
+            tasksLoading={false}
+            sources={selectedBlock.sources || []}
+            sourcesLoading={false}
+            onSourceClick={(source) => {
+              if (!source || !source.link) return;
+              window.open(source.link, '_blank');
+            }}
+            evaluation={evaluation}            
+          />
+        </div>
+      )}
+      
+      <main className="main-content">
+        {showChatWindow ? (
+          <>
+            <div className={`chat-container ${isProcessing ? 'processing' : ''}`}>
+              {chatBlocks.map((block) => (
+                <ChatWindow
+                  key={block.id}
+                  blockId={block.id}
+                  userMessage={block.userMessage}
+                  tokenChunks={block.tokenChunks}
+                  aiAnswer={block.aiAnswer}
+                  thinkingTime={block.thinkingTime}
+                  thoughtLabel={block.thoughtLabel}
+                  sourcesRead={block.sourcesRead}
+                  finalSources={block.finalSources}
+                  excerptsData={block.excerptsData}
+                  isLoadingExcerpts={block.isLoadingExcerpts}
+                  onFetchExcerpts={handleFetchExcerpts}
+                  actions={block.actions}        
+                  tasks={block.tasks}            
+                  openRightSidebar={handleOpenRightSidebar}
+                  openLeftSidebar={() => { /* if needed */ }}
+                  isError={block.isError}
+                  errorMessage={block.errorMessage}
+                />
+              ))}
+            </div>
+            <div 
+              className="floating-chat-search-bar"
+              style={{
+                transform: isRightSidebarOpen
+                  ? `translateX(calc(-50% - ${Math.max(0, (rightSidebarWidth - 250) / 2)}px))`
+                  : 'translateX(-50%)'               
+              }}
+            >
+              <div className="chat-search-input-wrapper" style={{ paddingBottom: chatBottomPadding }}>
+                <textarea
+                  rows="1"
+                  className="chat-search-input"
+                  placeholder="Message..."
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  ref={textAreaRef}
+                />
+              </div>
+              <div className="chat-icon-container">
+                <div className="chat-left-icons">
+                  <div className="tooltip-wrapper">
+                    <button
+                      className="chat-settings-btn"
+                      onClick={() => setShowSettingsModal(true)}
+                    >
+                      <FaCog />
+                    </button>
+                    <span className="tooltip">Settings</span>
+                  </div>
+                  <div 
+                    className="tooltip-wrapper" 
+                    onMouseLeave={handleMouseLeaveAddBtn}
+                  >
+                    <button className="chat-add-btn" onClick={handleToggleAddContent} ref={chatAddBtnRef}>
+                      <FaPlus />
+                    </button>
+                    <span className={`tooltip ${isAddContentOpen || isTooltipSuppressed ? 'hidden' : ''}`}>Add Content</span>
+                    <AddContentDropdown
+                      isOpen={isAddContentOpen}
+                      onClose={closeAddContentDropdown}
+                      toggleButtonRef={chatAddBtnRef}
+                      onAddFilesClick={handleOpenAddFilesDialog}
+                      onServiceClick={handleServiceClick}
+                      selectedServices={selectedServices}
+                    />
+                  </div>
+                </div>
+                {/* Conditionally render Stop or Send button */}
+                <div className="tooltip-wrapper">
+                  <button
+                    className={`chat-send-btn ${isProcessing ? 'stop-btn' : ''}`}
+                    onClick={isProcessing ? handleStop : handleSendButtonClick}
+                  >
+                    {isProcessing ? <FaStop size={12} color="black" /> : <FaPaperPlane />}
+                  </button>
+                  <span className="tooltip">{isProcessing ? 'Stop' : 'Send'}</span>
+                </div>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="search-area">
+            <h1>How can I help you today?</h1>
+            <div className="search-bar">
+              <div className="search-input-wrapper">
+                <textarea
+                  rows="1"
+                  className="search-input"
+                  placeholder="Message..."
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  ref={textAreaRef}
+                />
+              </div>
+              <div className="icon-container">
+                <div className="left-icons">
+                  <div className="tooltip-wrapper">
+                    <button
+                      className="settings-btn"
+                      onClick={() => setShowSettingsModal(true)}
+                    >
+                      <FaCog />
+                    </button>
+                    <span className="tooltip">Settings</span>
+                  </div>
+                  <div 
+                    className="tooltip-wrapper" 
+                    onMouseLeave={handleMouseLeaveAddBtn}
+                  >
+                    <button className="add-btn" onClick={handleToggleAddContent} ref={addBtnRef}>
+                      <FaPlus />
+                    </button>
+                    <span className={`tooltip ${isAddContentOpen || isTooltipSuppressed ? 'hidden' : ''}`}>Add Content</span>
+                    <AddContentDropdown
+                      isOpen={isAddContentOpen}
+                      onClose={closeAddContentDropdown}
+                      toggleButtonRef={addBtnRef}
+                      onAddFilesClick={handleOpenAddFilesDialog}
+                      onServiceClick={handleServiceClick}
+                      selectedServices={selectedServices}
+                    />
+                  </div>
+                </div>
+                <div className="tooltip-wrapper">
+                  <button
+                    className={`send-btn ${isProcessing ? 'stop-btn' : ''}`}
+                    onClick={isProcessing ? handleStop : handleSendButtonClick}
+                  >
+                    {isProcessing ? <FaStop /> : <FaPaperPlane />}
+                  </button>
+                  <span className="tooltip">{isProcessing ? 'Stop' : 'Send'}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+      
+      {showSettingsModal && (
+        <IntialSetting
+          trigger={true}
+          setTrigger={() => setShowSettingsModal(false)}
+          fromAiPage={true}
+          openSnackbar={openSnackbar}
+          closeSnackbar={closeSnackbar}
+        />
+      )}
+      {isAddFilesDialogOpen && (
+        <AddFilesDialog
+          isOpen={isAddFilesDialogOpen}
+          onClose={() => setIsAddFilesDialogOpen(false)}
+          openSnackbar={openSnackbar}
+          setSessionContent={setSessionContent}
+        />
+      )}
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={snackbar.duration}
+        onClose={closeSnackbar}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert onClose={closeSnackbar} severity={snackbar.severity} variant="filled" sx={{ width: '100%' }}>
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+}
+
+export default AiPage;

frontend/src/Components/IntialSetting.css

@@ -0,0 +1,174 @@
+.showSetting {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.showSetting-inner {
+  position: relative;
+  border-radius: 12px;
+  padding: 32px;
+  width: 45%;
+  max-width: 100%;
+  background-color: #1e1e1e;
+  max-height: 80vh; /* Limits height to 80% of the viewport */
+  overflow-y: auto; /* Enables vertical scrolling when content overflows */
+}
+
+/* Dark Themed Scrollbar */
+.showSetting-inner::-webkit-scrollbar {
+  width: 8px; /* Width of the scrollbar */
+}
+
+.showSetting-inner::-webkit-scrollbar-track {
+  background: #2a2a2a; /* Darker track background */
+  border-radius: 5px;
+}
+
+.showSetting-inner::-webkit-scrollbar-thumb {
+  background: #444; /* Darker scrollbar handle */
+  border-radius: 5px;
+}
+
+.showSetting-inner::-webkit-scrollbar-thumb:hover {
+  background: #555; /* Lighter on hover */
+}
+
+/* Setting inner container */
+.showSetting-inner {
+  position: relative;
+  scrollbar-color: #444 #2a2a2a; /* Scrollbar thumb and track */
+  scrollbar-width: thin;
+  padding-top: 4.5rem;
+}
+
+/* Ensure the close button stays fixed */
+.showSetting-inner .close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  color: white;
+  padding: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+/* Close button hover effect */
+.showSetting-inner .close-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+/* Ensure the title stays at the top */
+.showSetting-inner .setting-size {
+  position: absolute;
+  font-weight: bold;
+  font-size: 1.5rem;
+  top: 16px;
+  left: 16px;
+}
+
+/* Form groups styling */
+.form-group {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.form-group label {
+  font-size: large;
+  margin-bottom: 5px;
+}
+
+.sliders-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 30px;
+  width: 100%;
+}
+
+.slider-item {
+  flex: 1; /* Each slider item will take up equal available space */
+  width: 100%;
+}
+
+/* Container for password input and icon */
+.password-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+/* Style the input to have extra padding on the right so text doesn’t run under the icon */
+.password-wrapper input {
+  width: 100%;
+  padding-right: 40px; /* Adjust based on the icon size */
+}
+
+.password-wrapper .password-toggle {
+  position: absolute !important;
+  color: #DDD;
+  top: 50% !important;
+  left: 95% !important;
+  transform: translateY(-50%) !important;
+}
+
+/* Slider styling */
+.slider-item {
+  text-align: center;
+}
+
+input, select, textarea {
+  background: #1E1E1E;
+  color: #DDD;
+  border: 1px solid #444;
+  padding: 10px;
+  border-radius: 5px;
+  width: 100%;
+  font-size: 16px;
+  transition: border 0.3s ease, background 0.3s ease;
+}
+
+/* Text for re-applying settings snackbar*/
+.re-applying-settings-text {
+  color: #DDD;
+  margin-top: -0.5rem;
+}
+
+/* Spinner styling */
+.re-applying-settings-custom-spinner {
+  width: 1.2rem !important;
+  height: 1.2rem !important;
+  border: 2.5px solid #ececece1 !important;        /* Main Spinner */
+  border-top: 2.5px solid #303030 !important;     /* Rotating path */
+  border-radius: 50% !important;
+  margin-top: -0.5rem !important;
+  animation: spin 0.9s linear infinite !important; 
+}
+
+/* Spinner animation */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+  .showSetting-inner {
+      width: 90%;
+      max-height: 75vh; /* Adjust height for smaller screens */
+  }
+}

frontend/src/Components/IntialSetting.js

@@ -0,0 +1,316 @@
+import React, { useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import './IntialSetting.css';
+import { FaTimes, FaEye, FaEyeSlash } from 'react-icons/fa';
+
+function IntialSetting(props) {
+  // State variables for form controls
+  const [selectedProvider, setSelectedProvider] = useState("OpenAI");
+  const [modelTemperature, setModelTemperature] = useState(0.0);
+  const [modelTopP, setModelTopP] = useState(1.0);
+  const [showPassword, setShowPassword] = useState(false);
+
+  // Ref for the form and navigation hook
+  const formRef = useRef(null);
+  const navigate = useNavigate();
+
+  // Model options for different providers
+  const modelOptions = {
+    OpenAI: {
+      "GPT 4o": "gpt-4o",
+      "GPT 4o Latest": "gpt-4o-2024-11-20",
+      "GPT 4o Mini": "gpt-4o-mini",
+      "GPT 4.1": "gpt-4.1",
+      "GPT 4.1 Mini": "gpt-4.1-mini",
+      "GPT 4.1 Nano": "gpt-4.1-nano",
+      "ChatGPT": "chatgpt-4o-latest"
+    },
+    Anthropic: {
+      "Claude 4 Opus": "claude-opus-4-20250514",
+      "Claude Sonnet 4": "claude-sonnet-4-20250514",
+      "Claude Sonnet 3.7": "claude-3-7-sonnet-20250219",
+      "Claude Sonnet 3.5": "claude-3-5-sonnet-20241022",
+      "Claude Haiku 3.5": "claude-3-5-haiku-20241022",
+      "Claude Opus 3": "claude-3-opus-20240229",
+      "Claude Sonnet 3": "claude-3-sonnet-20240229",
+      "Claude Haiku 3": "claude-3-haiku-20240307"
+    },
+    Google: {
+      "Gemini 2.0 Flash Lite": "gemini-2.0-flash-lite",
+      "Gemini 2.0 Flash": "gemini-2.0-flash",
+      "Gemini 2.5 Flash Lite": "gemini-2.5-flash-lite-preview-06-17",
+      "Gemini 2.5 Flash": "gemini-2.5-flash",
+      "Gemini 2.5 Pro": "gemini-2.5-pro"
+    },
+    XAI: {
+      "Grok 2": "grok-2",
+      "Grok 3 Mini": "grok-3-mini-latest",
+      "Grok 3 Mini (Fast)": "grok-3-mini-fast-latest",
+      "Grok 3": "grok-3-latest",
+      "Grok 3 (Fast)": "grok-3-fast-latest"
+    },
+  };
+
+  // Reset form and state variables
+  const handleReset = (e) => {
+    e.preventDefault();
+    if (formRef.current) {
+      formRef.current.reset();
+    }
+    setSelectedProvider("OpenAI");
+    setModelTemperature(0.0);
+    setModelTopP(1.0);
+  };
+
+  // Handle form submission and save settings
+  const handleSave = async (e) => {
+    e.preventDefault();
+    const form = formRef.current;
+
+    // Retrieve form values
+    const modelProvider = form.elements["model-provider"].value;
+    const modelName = form.elements["model-name"].value;
+    const modelAPIKeys = form.elements["model-api"].value;
+    const braveAPIKey = form.elements["brave-api"].value;
+    const proxyList = form.elements["proxy-list"].value;
+
+    // Check for missing required fields
+    const missingFields = [];
+    if (!modelProvider || modelProvider.trim() === "") missingFields.push("Model Provider");
+    if (!modelName || modelName.trim() === "") missingFields.push("Model Name");
+    if (!modelAPIKeys || modelAPIKeys.trim() === "") missingFields.push("Model API Key");
+    if (!braveAPIKey || braveAPIKey.trim() === "") missingFields.push("Brave Search API Key");
+
+    if (missingFields.length > 0) {
+      props.openSnackbar(
+        "Please fill in the following required fields: " + missingFields.join(", "),
+        "error"
+      );
+      return;
+    }
+
+    // Build payload for backend
+    const payload = {
+      "Model_Provider": modelProvider.toLowerCase(),
+      "Model_Name": modelName,
+      "Model_API_Keys": modelAPIKeys,
+      "Brave_Search_API_Key": braveAPIKey,
+      "Model_Temperature": modelTemperature,
+      "Model_Top_P": modelTopP,
+    };
+
+    if (proxyList && proxyList.trim() !== "") {
+      payload["Proxy_List"] = proxyList;
+    }
+
+    // Show appropriate notification based on context
+    if (props.fromAiPage) {
+      props.openSnackbar(
+        <Box mt={1} display="flex" alignItems="center">
+          <Box className="re-applying-settings-custom-spinner" />
+          <Box ml={1} className="re-applying-settings-text">
+            <span>Re-applying settings. This may take a few minutes...</span>
+          </Box>
+        </Box>,
+        "info"
+      );
+    } else {
+      props.openSnackbar("Settings saved successfully!", "success");
+      if (props.onInitializationStart) {
+        props.onInitializationStart();
+      }
+    }
+
+    // Send settings to backend
+    try {
+      const response = await fetch("/settings", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success === true) {
+          if (props.fromAiPage) {
+            props.openSnackbar("Settings saved successfully!", "success");
+          }
+          navigate("/AiPage");
+        } else {
+          props.openSnackbar("Error saving settings. Please try again.", "error");
+        }
+      } else {
+        props.openSnackbar("Error saving settings. Please try again.", "error");
+      }
+    } catch (error) {
+      console.error("Error saving settings:", error);
+      props.openSnackbar("Error saving settings. Please try again.", "error");
+    }
+  };
+
+  // Render the settings modal
+  return props.trigger ? (
+    <div className="showSetting" onClick={() => props.setTrigger(false)}>
+      <div className="showSetting-inner" onClick={(e) => e.stopPropagation()}>
+        <label className="setting-size">Settings</label>
+        <button className="close-btn" onClick={() => props.setTrigger(false)}>
+          <FaTimes />
+        </button>
+        <form ref={formRef}>
+          <div className="form-group">
+            <label htmlFor="model-provider">Model Provider</label>
+            <select
+              id="model-provider"
+              name="model-provider"
+              value={selectedProvider}
+              onChange={(e) => setSelectedProvider(e.target.value)}
+            >
+              {Object.keys(modelOptions).map(provider => (
+                <option key={provider} value={provider}>
+                  {provider}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="form-group">
+            <label htmlFor="model-name">Model Name</label>
+            <select id="model-name" name="model-name">
+              {Object.entries(modelOptions[selectedProvider]).map(
+                ([displayName, backendName]) => (
+                  <option key={backendName} value={backendName}>
+                    {displayName}
+                  </option>
+                )
+              )}
+            </select>
+          </div>
+          <div className="form-group">
+            <label htmlFor="model-api">Model API Key</label>
+            <textarea
+              id="model-api"
+              name="model-api"
+              placeholder="Enter API Key, one per line"
+            ></textarea>
+          </div>
+          <div className="form-group">
+            <label htmlFor="brave-api">Brave Search API Key</label>
+            <input
+              type="text"
+              id="brave-api"
+              name="brave-api"
+              placeholder="Enter API Key"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="proxy-list">Proxy List</label>
+            <textarea
+              id="proxy-list"
+              name="proxy-list"
+              placeholder="Enter proxies, one per line"
+            ></textarea>
+          </div>
+          {/* Commented Neo4j configuration fields */}
+          {/* <div className="form-group">
+            <label htmlFor="neo4j-url">Neo4j URL</label>
+            <input
+              type="text"
+              id="neo4j-url"
+              name="neo4j-url"
+              placeholder="Enter Neo4j URL"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="neo4j-username">Neo4j Username</label>
+            <input
+              type="text"
+              id="neo4j-username"
+              name="neo4j-username"
+              placeholder="Enter Username"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="neo4j-password">Neo4j Password</label>
+            <div className="password-wrapper">
+              <input
+                type={showPassword ? "text" : "password"}
+                id="neo4j-password"
+                name="neo4j-password"
+                placeholder="Enter Password"
+              />
+              <IconButton 
+                onClick={() => setShowPassword(prev => !prev)}
+                className="password-toggle"
+                sx={{ 
+                  color: "white", 
+                  p: 0, 
+                  m: 0 
+                }}
+              >
+                {showPassword ? <FaEyeSlash /> : <FaEye />}
+              </IconButton>
+            </div>
+          </div> */}
+          <div className="form-group">
+            <div className="sliders-container">
+              <div className="slider-item">
+                <label htmlFor="temperature">Temperature</label>
+                <Slider
+                  id="temperature"
+                  value={modelTemperature}
+                  onChange={(e, newValue) => setModelTemperature(newValue)}
+                  step={0.05}
+                  min={0.0}
+                  max={1.0}
+                  valueLabelDisplay="auto"
+                  sx={{ width: '100%', color: 'success.main' }}
+                />
+              </div>
+              <div className="slider-item">
+                <label htmlFor="top-p">Top-P</label>
+                <Slider
+                  id="top-p"
+                  value={modelTopP}
+                  onChange={(e, newValue) => setModelTopP(newValue)}
+                  step={0.05}
+                  min={0.0}
+                  max={1.0}
+                  valueLabelDisplay="auto"
+                  sx={{ width: '100%', color: 'success.main' }}
+                />
+              </div>
+            </div>
+          </div>
+          <Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
+            <Button 
+              type="button" 
+              className="reset-btn" 
+              sx={{ color: "#2196f3" }} 
+              onClick={handleReset}
+            >
+              Reset
+            </Button>
+            <Button 
+              type="button" 
+              variant="contained" 
+              color="success" 
+              className="save-btn" 
+              onClick={handleSave}
+            >
+              Save
+            </Button>
+          </Stack>
+        </form>
+        {props.children}
+      </div>
+    </div>
+  ) : null;
+}
+
+export default IntialSetting;