ready to 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

Dockerfile

@@ -0,0 +1,74 @@
+# ----------------------------
+# 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
+
+# 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,10 +1,12 @@
 ---
-title: Seekr Copy
-emoji: 🏢
-colorFrom: pink
-colorTo: green
+title: Seekr
+emoji: 👀
+colorFrom: blue
+colorTo: yellow
 sdk: docker
 pinned: false
+license: unknown
+short_description: AI Search Project
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

frontend/package.json

@@ -0,0 +1,55 @@
+{
+  "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.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
+    "react-markdown": "^9.1.0",
+    "react-router-dom": "^7.1.3",
+    "react-scripts": "5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^6.0.2",
+    "rehype-raw": "^6.1.1",
+    "rehype-sanitize": "^5.0.1",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
+    "styled-components": "^6.1.14",
+    "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/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,244 @@
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Chip from '@mui/material/Chip';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import './Evaluate.css';
+
+const MenuProps = {
+  PaperProps: {
+    className: 'evaluate-menu',
+  },
+  disableScrollLock: true
+};
+
+function getStyles(name, selectedNames, theme) {
+  return {
+    fontWeight: selectedNames.includes(name.toLowerCase())
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
+  };
+}
+
+export default function MultipleSelectChip({ evaluation }) {
+  const theme = useTheme();
+  const [personName, setPersonName] = React.useState([]);
+  const [selectedMetrics, setSelectedMetrics] = React.useState([]);
+  const [evaluationResult, setEvaluationResult] = React.useState("");
+  const [isEvaluating, setIsEvaluating] = React.useState(false);
+  const [localLoading, setLocalLoading] = React.useState(false);
+  const [noMetricsError, setNoMetricsError] = React.useState("");
+  const [metricOptions, setMetricOptions] = React.useState([]);
+
+  React.useEffect(() => {
+    // If 'contents' is undefined in the payload
+    if (evaluation && evaluation.contents === undefined) {
+      setMetricOptions([
+        "Bias",
+        "Toxicity",
+        "Summarization",
+        "Answer Correctness",
+      ]);
+    } else {
+      // Else, all except "Answer Correctness"
+      setMetricOptions([
+        "Bias",
+        "Toxicity",
+        "Summarization",
+        "Faithfulness",
+        "Hallucination",
+        "Answer Relevancy",
+        "Contextual Relevancy",
+        "Contextual Recall",
+      ]);
+    }
+  }, [evaluation]);
+
+  // Reset the form fields
+  React.useEffect(() => {
+    // Reset the form and evaluation result
+    setPersonName([]);
+    setSelectedMetrics([]);
+    setEvaluationResult("");
+    setLocalLoading(true);
+    setNoMetricsError("");
+    
+    // Simulate a loading delay
+    const timer = setTimeout(() => {
+      setLocalLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [evaluation]);
+
+  const handleChange = (event) => {
+    const { target: { value } } = event;
+    const metrics = typeof value === 'string' ? value.split(',') : value;
+    setPersonName(metrics);
+    setSelectedMetrics(metrics);
+    setNoMetricsError("");
+  };
+
+  const handleDelete = (chipToDelete) => {
+    setPersonName((chips) => chips.filter((chip) => chip !== chipToDelete));
+  };
+
+  // Function to convert a string to title case.
+  const titleCase = (str) => {
+    return str
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
+  const handleEvaluateClick = async () => {
+    // Clear previous evaluation result immediately.
+    setEvaluationResult("");
+
+    // Check if no metrics selected
+    if (selectedMetrics.length === 0) {
+      setNoMetricsError("No metrics selected");
+      return;
+    }
+
+    setNoMetricsError("");
+    setIsEvaluating(true);
+
+    const payload = { ...evaluation, metrics: selectedMetrics };
+    try {
+      const res = await fetch("/action/evaluate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(`Evaluation Error: ${error.error}`);
+      }
+
+      const data = await res.json();
+      if (!data.result) {
+        throw new Error("No results returned from evaluation");
+      } 
+
+      // Format the JSON into Markdown.
+      let markdown = "### Result\n\n";
+      for (const [metric, details] of Object.entries(data.result)) {
+        let score = details.score;
+        if (typeof score === "number") {
+          const percentage = score * 100;
+          score = Number.isInteger(percentage)
+            ? percentage.toFixed(0) + "%"
+            : percentage.toFixed(2) + "%";
+        }
+        let reason = details.reason;
+        markdown += `**${titleCase(metric)}:** ${score}\n\n${reason}\n\n`;
+      }
+      setEvaluationResult(markdown);
+    } catch (err) {
+      // Use the callback to trigger the error block in ChatWindow
+      if (evaluation.onError && evaluation.blockId) {
+        evaluation.onError(evaluation.blockId, err.message || "Evaluation failed");
+      }
+      else {
+        console.error("Evaluation prop is missing or incomplete:", evaluation);
+      }
+    }
+    setIsEvaluating(false);
+  };
+
+  // Finds the matching display name for a metric.
+  const getDisplayName = (lowerValue) => {
+    const found = metricOptions.find(n => n.toLowerCase() === lowerValue);
+    return found ? found : lowerValue;
+  };
+
+  return (
+    <Box className="evaluate-container">
+      {localLoading ? (
+        <Box>
+          <Typography variant="body2">Loading Evaluation...</Typography>
+        </Box>
+      ) : (
+        <>
+          <FormControl className="evaluate-form-control">
+            <InputLabel id="chip-label">Select Metrics</InputLabel>
+            <Select
+              labelId="chip-label"
+              id="multiple-chip"
+              multiple
+              value={personName}
+              onChange={handleChange}
+              input={
+                <OutlinedInput
+                  id="select-multiple-chip"
+                  label="Select Metrics"
+                  className="evaluate-outlined-input"
+                />
+              }
+              renderValue={(selected) => (
+                <Box className="chip-container">
+                  {selected.map((value) => (
+                    <Chip
+                      className="evaluate-chip"
+                      key={value}
+                      label={getDisplayName(value)}
+                      onDelete={() => handleDelete(value)}
+                      onMouseDown={(event) => event.stopPropagation()}
+                    />
+                  ))}
+                </Box>
+              )}
+              MenuProps={MenuProps}
+            >
+              {metricOptions.map((name) => (
+                <MenuItem
+                  key={name}
+                  value={name.toLowerCase()}  // underlying value is lowercase
+                  style={getStyles(name, personName, theme)}
+                >
+                  {name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          
+          <Box mt={1}>
+            <Button
+              variant="contained"
+              onClick={handleEvaluateClick}
+              className="evaluate-button"
+            >
+              Evaluate
+            </Button>
+          </Box>
+
+          {noMetricsError && (
+            <Box className="no-metrics-message">
+              {noMetricsError}
+            </Box>
+          )}
+
+          {isEvaluating && (
+            <Box mt={1} display="flex" alignItems="center">
+              <Box className="custom-spinner" />
+              <Box ml={1}>Evaluating...</Box>
+            </Box>
+          )}
+
+          {evaluationResult && (
+            <Box mt={2}>
+              <ReactMarkdown>{evaluationResult}</ReactMarkdown>
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  );
+}

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

@@ -0,0 +1,9 @@
+const { GoogleGenerativeAI } = require("@google/generative-ai");
+
+const genAI = new GoogleGenerativeAI("AIzaSyCx3MefHEMw2MNfzB2fI2IvpBnWBGLirmg");
+const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+
+const prompt = "Explain how AI works";
+
+const result = await model.generateContent(prompt);
+console.log(result.response.text());

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/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/ChatComponents/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/ChatComponents/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/ChatComponents/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 './Sources';
+import Evaluate from './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/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,120 @@
+.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;
+  }
+  
+  /* Top-level elements */
+  .streaming-content > * {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  /* VERY FIRST element in an AI answer */
+  .streaming-content > *:first-child {
+    margin-top: 0 !important;
+  }
+  
+  /* Headings */
+  .streaming-content h1,
+  .streaming-content h2,
+  .streaming-content h3,
+  .streaming-content h4,
+  .streaming-content h5,
+  .streaming-content h6 {
+    margin-top: 1rem;
+    margin-bottom: 0.75rem; 
+  }
+  
+  /* If heading is the very first element */
+  .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;
+  }
+  
+  /* Paragraphs */
+  .streaming-content p {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  
+  /* Lists */
+  .streaming-content ul,
+  .streaming-content ol {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    padding-left: 1.25rem;   
+    white-space: normal;     
+  }
+  
+  .streaming-content li {
+    margin-bottom: 0.25rem;
+  }
+  
+  .streaming-content li ul,
+  .streaming-content li ol {
+    margin-top: 0.15rem;
+    margin-bottom: 0.15rem;
+  }
+  
+  /* Code Blocks */
+  .code-block-container {
+    margin: 0.5rem 0;
+    border-radius: 4px;
+    background-color: #2b2b2b;
+    overflow: hidden;
+  }
+  
+  .code-block-header {
+    background-color: #1e1e1e;
+    color: #ffffff;
+    padding: 0.5rem;
+    font-size: 0.85rem;
+    font-weight: bold;
+  }
+  
+  /* Table Container */
+  .table-container {
+    margin: 0.5rem 0;
+    width: 100%;
+    overflow-x: auto;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  
+  .table-container th,
+  .table-container td {
+    border: 1px solid #ddd;
+    padding: 0.5rem;
+  }
+  
+  /* Markdown Links */
+  .markdown-link {
+    color: #1a73e8;
+    text-decoration: none;
+  }
+  .markdown-link:hover {
+    text-decoration: underline;
+  }
+  
+  /* Blockquotes */
+  .markdown-blockquote {
+    border-left: 4px solid #ccc;
+    padding-left: 0.75rem;
+    margin: 0.5rem 0; 
+    color: #555;
+    font-style: italic;
+  }

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

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import './Streaming.css';
+
+// Streaming component for rendering markdown content
+const Streaming = ({ content, isStreaming, onContentRef }) => {
+  const contentRef = useRef(null);
+  
+  useEffect(() => {
+    if (contentRef.current && onContentRef) {
+      onContentRef(contentRef.current);
+    }
+  }, [content, onContentRef]);
+
+  const displayContent = isStreaming ? `${content}▌` : (content || '');
+
+  return (
+    <div className="streaming-content" ref={contentRef}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          code({node, inline, className, children, ...props}) {
+            const match = /language-(\w+)/.exec(className || '');
+            return !inline ? (
+              <div className="code-block-container">
+                <div className="code-block-header">
+                  <span>{match ? match[1] : 'code'}</span>
+                </div>
+                <SyntaxHighlighter
+                  style={atomDark}
+                  language={match ? match[1] : 'text'}
+                  PreTag="div"
+                  {...props}
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              </div>
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+          },
+          table({node, ...props}) {
+            return (
+              <div className="table-container">
+                <table {...props} />
+              </div>
+            );
+          },
+          a({node, children, href, ...props}) {
+            return (
+              <a 
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="markdown-link"
+                {...props}
+              >
+                {children}
+              </a>
+            );
+          },
+          blockquote({node, ...props}) {
+            return (
+              <blockquote className="markdown-blockquote" {...props} />
+            );
+          }
+        }}
+      >
+        {displayContent}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default Streaming;

frontend/src/Components/AiComponents/ChatWindow.css

@@ -0,0 +1,267 @@
+: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 {
+  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 {
+  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 {
+  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 {
+  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;
+}
+
+/* ChatWindow.css */
+
+/* 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,265 @@
+import React, { useRef, useState, 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 } from 'react-icons/fa';
+import GraphDialog from './ChatComponents/Graph';
+import Streaming from './ChatComponents/Streaming';
+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';
+
+// 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,
+  actions,
+  tasks,
+  openRightSidebar,
+  // openLeftSidebar,
+  isError,
+  errorMessage
+}) {
+  const answerRef = useRef(null);
+  const [graphDialogOpen, setGraphDialogOpen] = useState(false);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+
+  // 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;
+  };
+
+  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}
+                    />
+                  </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>
+                  )}
+                </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 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/AiPage.css

@@ -0,0 +1,247 @@
+/* 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 */
+}
+
+/* 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: #21212f;
+}
+
+.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,
+.send-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.settings-btn svg,
+.send-btn svg {
+  font-size: 1.45rem;
+}
+
+.settings-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: #21212f;
+  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;
+  resize: none;
+  white-space: pre-wrap;
+}
+
+.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 {
+  pointer-events: auto;
+}
+
+.chat-settings-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-send-btn:hover {
+  color: #888;
+}
+
+/* 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;
+}
+
+/* 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,502 @@
+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 } from 'react-icons/fa';
+import IntialSetting from './IntialSetting';
+import ChatWindow from './AiComponents/ChatWindow';
+import RightSidebar from './AiComponents/ChatComponents/RightSidebar';
+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 [defaultChatHeight, setDefaultChatHeight] = useState(null);
+  const [chatBottomPadding, setChatBottomPadding] = useState("60px");
+
+  // States/refs for streaming
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [activeBlockId, setActiveBlockId] = useState(null);
+  const activeEventSourceRef = useRef(null);
+
+  // Snackbar state
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success",
+  });
+
+  // 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 }));
+  };
+
+  useEffect(() => {
+    localStorage.setItem("rightSidebarState", isRightSidebarOpen);
+  }, [isRightSidebarOpen]);
+
+  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]);
+
+  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
+      )
+    );
+  }, []);
+
+  // 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) => {
+      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 "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;
+    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();
+      }
+    }
+  };
+
+  // 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();
+  };
+
+  // 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,
+      }}
+    >
+      {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">
+              {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}
+                  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">
+                <button
+                  className="chat-settings-btn"
+                  onClick={() => setShowSettingsModal(true)}
+                >
+                  <FaCog />
+                </button>
+                {/* Conditionally render Stop or Send button */}
+                <button 
+                  className={`chat-send-btn ${isProcessing ? 'stop-btn' : ''}`}
+                  onClick={isProcessing ? handleStop : handleSendButtonClick}
+                >
+                  {isProcessing ? <FaStop size={12} color="black" /> : <FaPaperPlane />}
+                </button>
+              </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">
+                <button
+                  className="settings-btn"
+                  onClick={() => setShowSettingsModal(true)}
+                >
+                  <FaCog />
+                </button>
+                <button 
+                  className={`send-btn ${isProcessing ? 'stop-btn' : ''}`}
+                  onClick={isProcessing ? handleStop : handleSendButtonClick}
+                >
+                  {isProcessing ? <FaStop /> : <FaPaperPlane />}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+
+      {showSettingsModal && (
+        <IntialSetting
+          trigger={true}
+          setTrigger={() => setShowSettingsModal(false)}
+          fromAiPage={true}
+          openSnackbar={openSnackbar}
+          closeSnackbar={closeSnackbar}
+        />
+      )}
+      <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 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,309 @@
+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-4 Turbo": "gpt-4-turbo",
+      "GPT-4o": "gpt-4o",
+      "GPT-4o Latest": "gpt-4o-2024-11-20",
+      "GPT-4o Mini": "gpt-4o-mini",
+      "ChatGPT": "chatgpt-4o-latest",
+    },
+    Anthropic: {
+      "Claude 3.5 Sonnet": "claude-3-5-sonnet-20241022",
+      "Claude 3.5 Haiku": "claude-3-5-haiku-20241022",
+      "Claude 3 Opus": "claude-3-opus-20240229",
+      "Claude 3 Sonnet": "claude-3-sonnet-20240229",
+      "Claude 3 Haiku": "claude-3-haiku-20240307",
+    },
+    Google: {
+      "Gemini 1.5 Pro": "gemini-1.5-pro",
+      "Gemini 1.5 Flash": "gemini-1.5-flash",
+      "Gemini 2.0 Flash Lite": "gemini-2.0-flash-lite-preview-02-05",
+      "Gemini 2.0 Flash Experimental": "gemini-2.0-flash-exp",
+      "Gemini 2.0 Flash": "gemini-2.0-flash",
+      "Gemini 2.0 Pro Experimental": "gemini-2.0-pro-exp-02-05",
+    },
+    XAI: {
+      "Grok-2": "grok-2-latest",
+      "Grok Beta": "grok-beta",
+    },
+  };
+
+  // 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;

frontend/src/index.css

@@ -0,0 +1,18 @@
+/* Reset some default styles */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';