Spaces:

HumbleBeeAI
/

enlighten-qalb

Running

eli02 commited on about 1 month ago

Commit

3299552

1 Parent(s): 9b06cac

feat: Implement MainLayout component for consistent layout structure

feat: Add FeedbackForm component for user feedback submission

feat: Create SearchResults component to display search results with feedback option

feat: Introduce ErrorBoundary component for handling errors gracefully

feat: Develop ErrorMessage component for displaying error alerts

feat: Add LoadingSpinner component for loading state indication

feat: Implement ThemeToggle component for switching between light and dark themes

feat: Create useAuth hook for managing authentication state and token handling

feat: Add useFeedback hook for managing feedback submission state

feat: Implement useLocalStorage hook for persistent state management

feat: Create useSearch hook for handling search queries and results

feat: Develop useTheme hook for managing theme state and preferences

chore: Set up index.js for application entry point with error boundary and theme providers

feat: Create About page to provide information about the project

feat: Develop Dashboard page for authenticated user interactions

feat: Implement Home page with call-to-action for users

feat: Create auth service for handling login, logout, and token refresh

feat: Develop search service for querying and saving feedback

style: Add global styles for consistent theming and animations

style: Implement animations for smooth transitions and effects

style: Add custom fonts for enhanced typography

style: Create spiritual styles for specific UI components

Files changed (37) hide show

package-lock.json +3 -0
package.json +3 -40
public/index.html +2 -1
src/App.js +51 -18
src/components/Auth/Login.jsx +92 -0
src/components/Auth/Logout.jsx +32 -0
src/components/Auth/PrivateRoute.jsx +15 -0
src/components/Auth/TokenHandler.jsx +34 -0
src/components/Layout/Footer.jsx +73 -0
src/components/Layout/Header.js +0 -80
src/components/Layout/Header.jsx +104 -0
src/components/Layout/MainLayout.jsx +27 -0
src/components/Search/FeedbackForm.jsx +151 -0
src/components/Search/SearchForm.jsx +75 -71
src/components/Search/SearchResults.jsx +111 -0
src/components/SearchResults.jsx +0 -81
src/components/UI/ErrorBoundary.jsx +55 -0
src/components/UI/ErrorMessage.jsx +66 -0
src/components/UI/LoadingSpinner.jsx +43 -0
src/components/UI/ThemeToggle.jsx +29 -0
src/hooks/useAuth.js +120 -0
src/hooks/useFeedback.js +39 -0
src/hooks/useLocalStorage.js +26 -0
src/hooks/useSearch.js +48 -0
src/hooks/useTheme.js +57 -0
src/index.js +27 -0
src/pages/About.jsx +70 -0
src/pages/Dashboard.jsx +75 -0
src/pages/Home.jsx +68 -0
src/services/api.js +28 -22
src/services/auth.js +77 -0
src/services/search.js +27 -0
src/styles/GlobalStyles.js +69 -0
src/styles/animations.js +56 -0
src/styles/fonts.css +28 -0
src/styles/spiritualStyles.js +73 -0
src/styles/theme.js +25 -64

package-lock.json ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:d5990b52b6a2c9a5cd8fe71c63b5f1eac65f45b6f8b2d2c8517180df35851d80
+size 676451

package.json CHANGED Viewed

@@ -1,40 +1,3 @@
-{
-  "name": "enlightenqalb-frontend",
-  "version": "1.0.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.3.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.8.1",
-    "styled-components": "^5.3.6",
-    "web-vitals": "^2.1.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"
-    ]
-  }
-}

+version https://git-lfs.github.com/spec/v1
+oid sha256:e608424869e0ed703e601a85028efaa3b2d1b05d0211fda96887bff1dd8feee8
+size 863

public/index.html CHANGED Viewed

@@ -18,7 +18,8 @@
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
   <title>EnlightenQalb | Al-Ghazali Wisdom Search</title>
 </head>
 <body>

   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+  <! -- Poppins Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
   <title>EnlightenQalb | Al-Ghazali Wisdom Search</title>
 </head>
 <body>

src/App.js CHANGED Viewed

@@ -1,30 +1,63 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { ThemeProvider } from 'styled-components';
-import { AuthProvider } from './context/AuthContext';
 import MainLayout from './components/Layout/MainLayout';
 import Home from './pages/Home';
 import Dashboard from './pages/Dashboard';
 import About from './pages/About';
-import { GlobalStyles } from './styles/GlobalStyles';
-import theme from './styles/theme';
 function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyles />
       <AuthProvider>
-        <Router>
-          <MainLayout>
-            <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/dashboard" element={<Dashboard />} />
-              <Route path="/about" element={<About />} />
-            </Routes>
-          </MainLayout>
-        </Router>
       </AuthProvider>
-    </ThemeProvider>
   );
 }

+import React, { useEffect } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';  // Remove BrowserRouter import
+import { AuthProvider } from './hooks/useAuth';
 import MainLayout from './components/Layout/MainLayout';
 import Home from './pages/Home';
 import Dashboard from './pages/Dashboard';
 import About from './pages/About';
+import Login from './components/Auth/Login';
+import Logout from './components/Auth/Logout';
+import TokenHandler from './components/Auth/TokenHandler';
+import PrivateRoute from './components/Auth/PrivateRoute';
+import useTheme from './hooks/useTheme';
+import LoadingSpinner from './components/UI/LoadingSpinner';
+import { CssBaseline } from '@mui/material';
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [pathname]);
+  return null;
+};
 function App() {
+  const { themeLoading } = useTheme();
+  if (themeLoading) {
+    return <LoadingSpinner fullScreen />;
+  }
   return (
+    <>
+      <CssBaseline />
       <AuthProvider>
+        <ScrollToTop />
+        <MainLayout>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/logout" element={<Logout />} />
+            <Route path="/token-refresh" element={<TokenHandler />} />
+            <Route path="/about" element={<About />} />
+            <Route
+              path="/dashboard"
+              element={
+                <PrivateRoute>
+                  <Dashboard />
+                </PrivateRoute>
+              }
+            />
+            <Route path="*" element={<Home />} />
+          </Routes>
+        </MainLayout>
       </AuthProvider>
+    </>
   );
 }

src/components/Auth/Login.jsx ADDED Viewed

	@@ -0,0 +1,92 @@

+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+import { Button, TextField, Box, Typography, Paper, CircularProgress } from '@mui/material';
+import styled from '@emotion/styled';
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(4),
+  maxWidth: 400,
+  margin: 'auto',
+  marginTop: theme.spacing(8),
+}));
+const Login = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      const result = await login(username, password);
+      if (result.success) {
+        navigate('/dashboard');
+      } else {
+        setError(result.error || 'Login failed. Please try again.');
+      }
+    } catch (err) {
+      setError(err.message || 'Login failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <StyledPaper elevation={3}>
+      <Typography variant="h4" gutterBottom align="center" sx={{ fontWeight: 'bold' }}>
+        EnlightenQalb
+      </Typography>
+      <Typography variant="subtitle1" gutterBottom align="center" color="textSecondary">
+        Sign in to explore Al-Ghazali's wisdom
+      </Typography>
+      {error && (
+        <Typography color="error" align="center" sx={{ my: 2 }}>
+          {error}
+        </Typography>
+      )}
+      <Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>
+        <TextField
+          fullWidth
+          label="Username"
+          variant="outlined"
+          margin="normal"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+        />
+        <TextField
+          fullWidth
+          label="Password"
+          type="password"
+          variant="outlined"
+          margin="normal"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+        <Button
+          fullWidth
+          type="submit"
+          variant="contained"
+          color="primary"
+          size="large"
+          sx={{ mt: 3 }}
+          disabled={loading}
+        >
+          {loading ? <CircularProgress size={24} /> : 'Sign In'}
+        </Button>
+      </Box>
+    </StyledPaper>
+  );
+};
+export default Login;

src/components/Auth/Logout.jsx ADDED Viewed

	@@ -0,0 +1,32 @@

+import React, { useEffect } from 'react';
+import { useAuth } from '../../hooks/useAuth';
+import { Box, Typography, CircularProgress } from '@mui/material';
+const Logout = () => {
+  const { logout } = useAuth();
+  useEffect(() => {
+    const performLogout = async () => {
+      try {
+        await logout();
+        // navigation is now handled inside logout()
+      } catch (error) {
+        console.error('Logout error:', error);
+        // navigation fallback is handled in useAuth.js
+      }
+    };
+    performLogout();
+  }, [logout]);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: 8 }}>
+      <Typography variant="h6" gutterBottom>
+        Logging out...
+      </Typography>
+      <CircularProgress />
+    </Box>
+  );
+};
+export default Logout;

src/components/Auth/PrivateRoute.jsx ADDED Viewed

	@@ -0,0 +1,15 @@

+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+const PrivateRoute = ({ children }) => {
+  const { isAuthenticated } = useAuth();
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+};
+export default PrivateRoute;

src/components/Auth/TokenHandler.jsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import React, { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+import LoadingSpinner from '../UI/LoadingSpinner';
+const TokenHandler = () => {
+  const { refreshToken } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    const handleToken = async () => {
+      try {
+        await refreshToken();
+        // Redirect to the intended page or dashboard
+        const redirectTo = new URLSearchParams(location.search).get('redirect') || '/dashboard';
+        navigate(redirectTo, { replace: true });
+      } catch (error) {
+        console.error('Token refresh error:', error);
+        navigate('/login', { replace: true });
+      }
+    };
+    handleToken();
+  }, [refreshToken, navigate, location]);
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <LoadingSpinner message="Authenticating..." />
+    </div>
+  );
+};
+export default TokenHandler;

src/components/Layout/Footer.jsx ADDED Viewed

	@@ -0,0 +1,73 @@

+import React from 'react';
+import { Box, Typography, Link, Divider, IconButton } from '@mui/material';
+import { GitHub, Twitter, Book } from '@mui/icons-material';
+import styled from '@emotion/styled';
+const FooterContainer = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(4),
+  backgroundColor: theme.palette.background.paper,
+  marginTop: 'auto',
+}));
+const Footer = () => {
+  return (
+    <FooterContainer component="footer">
+      <Divider sx={{ mb: 3 }} />
+      <Box
+        display="flex"
+        flexDirection={{ xs: 'column', md: 'row' }}
+        justifyContent="space-between"
+        alignItems="center"
+        gap={2}
+      >
+        <Box>
+          <Typography variant="h6" color="primary" gutterBottom>
+            EnlightenQalb
+          </Typography>
+          <Typography variant="body2" color="textSecondary">
+            Exploring the wisdom of Al-Ghazali through modern AI
+          </Typography>
+        </Box>
+        <Box display="flex" gap={2}>
+          <IconButton
+            aria-label="GitHub"
+            href="https://github.com/humblebeeintel"
+            target="_blank"
+            rel="noopener"
+          >
+            <GitHub />
+          </IconButton>
+          <IconButton
+            aria-label="Twitter"
+            href="https://twitter.com/your-handle"
+            target="_blank"
+            rel="noopener"
+          >
+            <Twitter />
+          </IconButton>
+          <IconButton
+            aria-label="Original Text"
+            href="https://www.goodreads.com/book/show/27167514-the-alchemy-of-happiness"
+            target="_blank"
+            rel="noopener"
+          >
+            <Book />
+          </IconButton>
+        </Box>
+        <Box textAlign={{ xs: 'center', md: 'right' }}>
+          <Typography variant="caption" display="block" color="textSecondary">
+            © {new Date().getFullYear()} EnlightenQalb
+          </Typography>
+          <Typography variant="caption" display="block" color="textSecondary">
+            <Link href="/privacy" color="inherit">Privacy Policy</Link> | {' '}
+            <Link href="/terms" color="inherit">Terms</Link>
+          </Typography>
+        </Box>
+      </Box>
+    </FooterContainer>
+  );
+};
+export default Footer;

src/components/Layout/Header.js DELETED Viewed

@@ -1,80 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-import ThemeToggle from '../UI/ThemeToggle';
-import { useAuth } from '../../hooks/useAuth';
-const HeaderContainer = styled.header`
-  background: ${({ theme }) => theme.colors.primary};
-  color: white;
-  padding: 1rem 2rem;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
-`;
-const Nav = styled.nav`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 1200px;
-  margin: 0 auto;
-`;
-const Logo = styled(Link)`
-  font-size: ${({ theme }) => theme.fontSizes.xxlarge};
-  font-weight: bold;
-  color: white;
-  text-decoration: none;
-  font-family: ${({ theme }) => theme.fonts.secondary};
-`;
-const NavLinks = styled.div`
-  display: flex;
-  gap: 2rem;
-  align-items: center;
-`;
-const NavLink = styled(Link)`
-  color: white;
-  text-decoration: none;
-  font-weight: 500;
-  transition: opacity 0.3s ease;
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-const Header = () => {
-  const { isAuthenticated } = useAuth();
-  return (
-    <HeaderContainer>
-      <Nav>
-        <Logo to="/">EnlightenQalb</Logo>
-        <NavLinks>
-          <NavLink to="/">Home</NavLink>
-          {isAuthenticated && <NavLink to="/dashboard">Dashboard</NavLink>}
-          <NavLink to="/about">About</NavLink>
-          <ThemeToggle />
-          {isAuthenticated ? <LogoutButton /> : <LoginButton />}
-        </NavLinks>
-      </Nav>
-    </HeaderContainer>
-  );
-};
-const LoginButton = () => (
-  <NavLink to="/login">Login</NavLink>
-);
-const LogoutButton = () => {
-  const { logout } = useAuth();
-  return (
-    <NavLink as="button" onClick={logout} style={{ background: 'none', border: 'none' }}>
-      Logout
-    </NavLink>
-  );
-};
-export default Header;

src/components/Layout/Header.jsx ADDED Viewed

	@@ -0,0 +1,104 @@

+import React from 'react';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  IconButton,
+  Box,
+  useScrollTrigger,
+  Slide
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import { useAuth } from '../../hooks/useAuth';
+import { Link } from 'react-router-dom';
+import ThemeToggle from '../UI/ThemeToggle';
+function HideOnScroll({ children }) {
+  const trigger = useScrollTrigger();
+  return (
+    <Slide appear={false} direction="down" in={!trigger}>
+      {children}
+    </Slide>
+  );
+}
+const Header = () => {
+  const { isAuthenticated, logout } = useAuth();
+  return (
+    <HideOnScroll>
+      <AppBar position="sticky" elevation={1}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography
+            variant="h6"
+            component={Link}
+            to="/"
+            sx={{
+              flexGrow: 1,
+              textDecoration: 'none',
+              color: 'inherit',
+              fontWeight: 'bold'
+            }}
+          >
+            EnlightenQalb
+          </Typography>
+          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+            <Button
+              color="inherit"
+              component={Link}
+              to="/about"
+              sx={{ mx: 1 }}
+            >
+              About
+            </Button>
+            {isAuthenticated ? (
+              <>
+                <Button
+                  color="inherit"
+                  component={Link}
+                  to="/dashboard"
+                  sx={{ mx: 1 }}
+                >
+                  Dashboard
+                </Button>
+                <Button
+                  color="inherit"
+                  onClick={logout}
+                  sx={{ mx: 1 }}
+                >
+                  Logout
+                </Button>
+              </>
+            ) : (
+              <Button
+                color="inherit"
+                component={Link}
+                to="/login"
+                sx={{ mx: 1 }}
+              >
+                Login
+              </Button>
+            )}
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', ml: 2 }}>
+            <ThemeToggle />
+          </Box>
+        </Toolbar>
+      </AppBar>
+    </HideOnScroll>
+  );
+};
+export default Header;

src/components/Layout/MainLayout.jsx ADDED Viewed

	@@ -0,0 +1,27 @@

+import React from 'react';
+import { Box } from '@mui/material';
+import Header from './Header';
+import Footer from './Footer';
+import styled from '@emotion/styled';
+const MainContent = styled(Box)(({ theme }) => ({
+  minHeight: 'calc(100vh - 128px)', // Adjust based on your header/footer height
+  padding: theme.spacing(3),
+  [theme.breakpoints.down('sm')]: {
+    padding: theme.spacing(2),
+  },
+}));
+const MainLayout = ({ children }) => {
+  return (
+    <Box display="flex" flexDirection="column" minHeight="100vh">
+      <Header />
+      <MainContent component="main">
+        {children}
+      </MainContent>
+      <Footer />
+    </Box>
+  );
+};
+export default MainLayout;

src/components/Search/FeedbackForm.jsx ADDED Viewed

	@@ -0,0 +1,151 @@

+import React, { useState } from 'react';
+import { useAuth } from '../../hooks/useAuth';
+import {
+  Box,
+  Button,
+  Typography,
+  Paper,
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+  FormControl,
+  FormLabel,
+  Slider,
+  Rating,
+  Alert
+} from '@mui/material';
+import styled from '@emotion/styled';
+import { saveFeedback } from '../../services/search';
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(3),
+  marginTop: theme.spacing(3),
+  backgroundColor: theme.palette.background.paper,
+}));
+const FeedbackForm = ({ searchResult, query, onFeedbackSubmitted }) => {
+  const { user, authTokens } = useAuth();
+  const [reaction, setReaction] = useState('');
+  const [confidence, setConfidence] = useState(5);
+  const [rating, setRating] = useState(3);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  // Debug to check what searchResult contains
+  console.log('SearchResult:', searchResult);
+  // Ensure we have a proper searchResult object
+  if (!searchResult || typeof searchResult !== 'object') {
+    return (
+      <StyledPaper elevation={2}>
+        <Alert severity="error">Invalid search result data</Alert>
+      </StyledPaper>
+    );
+  }
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      // Extract only the needed text properties safely
+      const feedbackData = {
+        user_type: 'user',
+        username: user || 'anonymous',
+        query: query || '',
+        retrieved_text: searchResult.content || searchResult.text || JSON.stringify(searchResult),
+        model_type: searchResult.model_type || 'unknown',
+        reaction,
+        confidence_score: confidence,
+        rating
+      };
+      await saveFeedback(feedbackData, authTokens.access);
+      setSuccess(true);
+      if (onFeedbackSubmitted) onFeedbackSubmitted();
+      // Reset form
+      setReaction('');
+      setConfidence(5);
+      setRating(3);
+    } catch (err) {
+      console.error("Feedback submission error:", err);
+      setError(typeof err === 'string' ? err : (err.message || 'Failed to submit feedback'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return (
+    <StyledPaper elevation={2}>
+      <Typography variant="h6" gutterBottom>
+        Was this result helpful?
+      </Typography>
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {typeof error === 'string' ? error : 'An error occurred'}
+        </Alert>
+      )}
+      {success ? (
+        <Alert severity="success" sx={{ mb: 2 }}>
+          Thank you for your feedback!
+        </Alert>
+      ) : (
+        <Box component="form" onSubmit={handleSubmit}>
+          <FormControl component="fieldset" sx={{ mb: 3 }} fullWidth>
+            <FormLabel component="legend">Your reaction to this result:</FormLabel>
+            <RadioGroup
+              row
+              value={reaction}
+              onChange={(e) => setReaction(e.target.value)}
+            >
+              <FormControlLabel value="relevant" control={<Radio />} label="Relevant" />
+              <FormControlLabel value="somewhat_relevant" control={<Radio />} label="Somewhat Relevant" />
+              <FormControlLabel value="not_relevant" control={<Radio />} label="Not Relevant" />
+            </RadioGroup>
+          </FormControl>
+          <Box sx={{ mb: 3 }}>
+            <Typography gutterBottom>How confident are you in this rating?</Typography>
+            <Slider
+              value={confidence}
+              onChange={(e, newValue) => setConfidence(newValue)}
+              min={1}
+              max={10}
+              step={1}
+              marks
+              valueLabelDisplay="auto"
+              aria-labelledby="confidence-slider"
+            />
+          </Box>
+          <Box sx={{ mb: 3 }}>
+            <Typography component="legend">Overall quality rating</Typography>
+            <Rating
+              name="quality-rating"
+              value={rating}
+              onChange={(e, newValue) => setRating(newValue)}
+              precision={0.5}
+            />
+          </Box>
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            disabled={!reaction || isSubmitting}
+            fullWidth
+          >
+            {isSubmitting ? 'Submitting...' : 'Submit Feedback'}
+          </Button>
+        </Box>
+      )}
+    </StyledPaper>
+  );
+};
+export default FeedbackForm;

src/components/Search/SearchForm.jsx CHANGED Viewed

@@ -1,85 +1,89 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
-import { useSearch } from '../../hooks/useSearch';
-import LoadingSpinner from '../UI/LoadingSpinner';
-import ErrorMessage from '../UI/ErrorMessage';
-const SearchContainer = styled.div`
-  max-width: 800px;
-  margin: 2rem auto;
-  padding: 2rem;
-  background: ${({ theme }) => theme.colors.cardBg};
-  border-radius: ${({ theme }) => theme.radii.large};
-  box-shadow: ${({ theme }) => theme.shadows.medium};
-`;
-const SearchForm = styled.form`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`;
-const SearchInput = styled.input`
-  padding: 1rem;
-  border: 2px solid ${({ theme }) => theme.colors.primary};
-  border-radius: ${({ theme }) => theme.radii.medium};
-  font-size: 1rem;
-  &:focus {
-    outline: none;
-    border-color: ${({ theme }) => theme.colors.secondary};
-  }
-`;
-const SearchButton = styled.button`
-  padding: 1rem;
-  background: ${({ theme }) => theme.colors.primary};
-  color: white;
-  border: none;
-  border-radius: ${({ theme }) => theme.radii.medium};
-  cursor: pointer;
-  font-size: 1rem;
-  transition: all 0.3s ease;
-  &:hover {
-    background: ${({ theme }) => theme.colors.secondary};
-    transform: translateY(-2px);
-  }
-  &:disabled {
-    background: ${({ theme }) => theme.colors.disabled};
-    cursor: not-allowed;
-  }
-`;
-const SearchFormComponent = ({ onSearchComplete }) => {
   const [query, setQuery] = useState('');
-  const { search, isLoading, error } = useSearch();
-  const handleSubmit = async (e) => {
     e.preventDefault();
-    if (!query.trim()) return;
-    const results = await search(query);
-    onSearchComplete(results);
   };
   return (
-    <SearchContainer>
-      <SearchForm onSubmit={handleSubmit}>
-        <SearchInput
-          type="text"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          placeholder="Ask a question about Al-Ghazali's teachings..."
-          aria-label="Search query"
         />
-        <SearchButton type="submit" disabled={isLoading || !query.trim()}>
-          {isLoading ? <LoadingSpinner size="small" /> : 'Search Wisdom'}
-        </SearchButton>
-        {error && <ErrorMessage message={error} />}
-      </SearchForm>
-    </SearchContainer>
   );
 };
-export default SearchFormComponent;

 import React, { useState } from 'react';
+import {
+  Box,
+  TextField,
+  Button,
+  Typography,
+  Paper,
+  CircularProgress,
+  Grid,
+  ToggleButton,
+  ToggleButtonGroup
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import styled from '@emotion/styled';
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(3),
+  marginBottom: theme.spacing(3),
+}));
+const SearchForm = ({ onSearch, isLoading }) => {
   const [query, setQuery] = useState('');
+  const [modelPreference, setModelPreference] = useState('both');
+  const handleSubmit = (e) => {
     e.preventDefault();
+    if (query.trim()) {
+      onSearch(query, modelPreference);
+    }
   };
   return (
+    <StyledPaper elevation={2}>
+      <Typography variant="h5" gutterBottom sx={{ fontWeight: 'bold' }}>
+        Explore Al-Ghazali's Wisdom
+      </Typography>
+      <Typography variant="subtitle1" gutterBottom color="textSecondary">
+        Search through "The Alchemy of Happiness"
+      </Typography>
+      <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
+        <TextField
+          fullWidth
+          variant="outlined"
+          label="What would you like to know?"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
+          InputProps={{
+            endAdornment: (
+              <Button
+                type="submit"
+                color="primary"
+                variant="contained"
+                disabled={isLoading}
+                sx={{ ml: 1 }}
+              >
+                {isLoading ? <CircularProgress size={24} /> : <SearchIcon />}
+              </Button>
+            ),
+          }}
         />
+        <Box sx={{ mt: 2 }}>
+          <Typography variant="subtitle2" gutterBottom>
+            Model Preference:
+          </Typography>
+          <ToggleButtonGroup
+            value={modelPreference}
+            exclusive
+            onChange={(e, newValue) => newValue && setModelPreference(newValue)}
+            aria-label="model preference"
+          >
+            <ToggleButton value="uae" aria-label="uae model">
+              UAE-Large
+            </ToggleButton>
+            <ToggleButton value="bge" aria-label="bge model">
+              BGE-Large
+            </ToggleButton>
+            <ToggleButton value="both" aria-label="both models">
+              Both
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Box>
+      </Box>
+    </StyledPaper>
   );
 };
+export default SearchForm;

src/components/Search/SearchResults.jsx ADDED Viewed

	@@ -0,0 +1,111 @@

+import React, { useState } from 'react';
+import {
+  Box,
+  Paper,
+  Typography,
+  Divider,
+  Chip,
+  CircularProgress,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Alert
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import styled from '@emotion/styled';
+import FeedbackForm from './FeedbackForm';
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  backgroundColor: theme.palette.background.paper,
+}));
+const ModelChip = styled(Chip)(({ theme, modeltype }) => ({
+  marginLeft: theme.spacing(1),
+  backgroundColor: modeltype === 'WhereIsAI_UAE_Large_V1'
+    ? theme.palette.primary.light
+    : theme.palette.secondary.light,
+  color: theme.palette.getContrastText(
+    modeltype === 'WhereIsAI_UAE_Large_V1'
+      ? theme.palette.primary.light
+      : theme.palette.secondary.light
+  ),
+}));
+const SearchResults = ({ results, query, isLoading, error }) => {
+  const [expandedResult, setExpandedResult] = useState(null);
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
+  if (isLoading) {
+    return (
+      <Box display="flex" justifyContent="center" my={4}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+  if (error) {
+    return (
+      <Alert severity="error" sx={{ my: 2 }}>
+        {error}
+      </Alert>
+    );
+  }
+  if (!results || results.length === 0) {
+    return (
+      <Typography variant="body1" color="textSecondary" align="center" sx={{ my: 4 }}>
+        No results found. Try a different query.
+      </Typography>
+    );
+  }
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        Search Results
+      </Typography>
+      {results.map((result, index) => (
+        <Accordion
+          key={index}
+          expanded={expandedResult === index}
+          onChange={() => setExpandedResult(expandedResult === index ? null : index)}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box width="100%">
+              <Box display="flex" alignItems="center">
+                <Typography variant="subtitle1" noWrap sx={{ flexGrow: 1 }}>
+                  Excerpt from "{result.model_type.includes('UAE') ? 'UAE' : 'BGE'} Model"
+                </Typography>
+                <ModelChip
+                  label={`${(result.similarity * 100).toFixed(1)}% match`}
+                  modeltype={result.model_type}
+                />
+              </Box>
+              <Typography variant="caption" color="textSecondary">
+                Click to {expandedResult === index ? 'collapse' : 'expand'}
+              </Typography>
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Typography variant="body1" paragraph>
+              {result.text}
+            </Typography>
+            <Divider sx={{ my: 2 }} />
+            <FeedbackForm
+              searchResult={result}
+              query={query}
+              onFeedbackSubmitted={() => setFeedbackSubmitted(true)}
+            />
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </Box>
+  );
+};
+export default SearchResults;

src/components/SearchResults.jsx DELETED Viewed

@@ -1,81 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import FeedbackForm from './FeedbackForm';
-const ResultsContainer = styled.div`
-  max-width: 800px;
-  margin: 2rem auto;
-  padding: 2rem;
-  background: ${({ theme }) => theme.colors.cardBg};
-  border-radius: ${({ theme }) => theme.radii.large};
-  box-shadow: ${({ theme }) => theme.shadows.medium};
-`;
-const ResultItem = styled.div`
-  margin-bottom: 2rem;
-  padding: 1.5rem;
-  background: ${({ theme }) => theme.colors.background};
-  border-radius: ${({ theme }) => theme.radii.medium};
-  border-left: 4px solid ${({ theme }) => theme.colors.primary};
-`;
-const ResultText = styled.p`
-  font-size: 1.1rem;
-  line-height: 1.6;
-  color: ${({ theme }) => theme.colors.text};
-  margin-bottom: 1rem;
-`;
-const MetaInfo = styled.div`
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.9rem;
-  color: ${({ theme }) => theme.colors.muted};
-`;
-const ModelBadge = styled.span`
-  padding: 0.25rem 0.5rem;
-  border-radius: ${({ theme }) => theme.radii.small};
-  background: ${({ theme, modelType }) =>
-    modelType.includes('UAE') ? theme.colors.accent1 : theme.colors.accent2};
-  color: white;
-  font-weight: bold;
-`;
-const SimilarityScore = styled.span`
-  font-weight: bold;
-  color: ${({ theme }) => theme.colors.primary};
-`;
-const SearchResults = ({ results, onFeedbackSubmit }) => {
-  if (!results || results.length === 0) return null;
-  return (
-    <ResultsContainer>
-      <h2>Wisdom from Al-Ghazali</h2>
-      {results.map((result, index) => (
-        <div key={index}>
-          <ResultItem>
-            <ResultText>{result.text}</ResultText>
-            <MetaInfo>
-              <ModelBadge modelType={result.model_type}>
-                {result.model_type.split('_')[0]}
-              </ModelBadge>
-              <SimilarityScore>
-                {(result.similarity * 100).toFixed(1)}% match
-              </SimilarityScore>
-            </MetaInfo>
-          </ResultItem>
-          <FeedbackForm
-            query={result.query}
-            retrievedText={result.text}
-            modelType={result.model_type}
-            onSubmit={onFeedbackSubmit}
-          />
-        </div>
-      ))}
-    </ResultsContainer>
-  );
-};
-export default SearchResults;

src/components/UI/ErrorBoundary.jsx ADDED Viewed

	@@ -0,0 +1,55 @@

+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+import ErrorIcon from '@mui/icons-material/Error';
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 4,
+            minHeight: '100vh',
+            textAlign: 'center',
+          }}
+        >
+          <ErrorIcon color="error" sx={{ fontSize: 60, mb: 2 }} />
+          <Typography variant="h4" gutterBottom>
+            Something went wrong
+          </Typography>
+          <Typography variant="body1" color="textSecondary" sx={{ mb: 3 }}>
+            {this.state.error && this.state.error.toString()}
+          </Typography>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => window.location.reload()}
+          >
+            Reload page
+          </Button>
+        </Box>
+      );
+    }
+    return this.props.children;
+  }
+}
+export default ErrorBoundary;

src/components/UI/ErrorMessage.jsx ADDED Viewed

	@@ -0,0 +1,66 @@

+import React from 'react';
+import { Alert, AlertTitle, Button, Box, Collapse } from '@mui/material';
+import { Close } from '@mui/icons-material';
+import styled from '@emotion/styled';
+const ErrorContainer = styled(Box)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+  width: '100%',
+}));
+const ErrorMessage = ({
+  error,
+  onRetry,
+  onClose,
+  severity = 'error',
+  title = 'Error',
+  retryText = 'Try Again',
+  closable = true
+}) => {
+  const [open, setOpen] = React.useState(true);
+  const handleClose = () => {
+    setOpen(false);
+    if (onClose) onClose();
+  };
+  if (!error || !open) return null;
+  return (
+    <ErrorContainer>
+      <Collapse in={open}>
+        <Alert
+          severity={severity}
+          action={
+            <Box display="flex" gap={1}>
+              {onRetry && (
+                <Button
+                  color="inherit"
+                  size="small"
+                  onClick={onRetry}
+                >
+                  {retryText}
+                </Button>
+              )}
+              {closable && (
+                <Button
+                  color="inherit"
+                  size="small"
+                  onClick={handleClose}
+                  endIcon={<Close fontSize="small" />}
+                >
+                  Close
+                </Button>
+              )}
+            </Box>
+          }
+        >
+          <AlertTitle>{title}</AlertTitle>
+          {typeof error === 'string' ? error : error.message || 'An unknown error occurred'}
+        </Alert>
+      </Collapse>
+    </ErrorContainer>
+  );
+};
+export default ErrorMessage;

src/components/UI/LoadingSpinner.jsx ADDED Viewed

	@@ -0,0 +1,43 @@

+import React from 'react';
+import { CircularProgress, Box, Typography, Fade } from '@mui/material';
+import { styled } from '@mui/material/styles';
+// Fix the styled component to use proper spacing
+const StyledBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: theme.spacing ? theme.spacing(2) : '16px', // Provide fallback
+  textAlign: 'center',
+}));
+const LoadingSpinner = ({ message = 'Loading...', size = 40 }) => {
+  return (
+    <Fade in={true} timeout={600}>
+      <StyledBox>
+        <CircularProgress
+          size={size}
+          thickness={4}
+          sx={{
+            color: (theme) => theme.palette.primary.main,
+            marginBottom: (theme) => theme.spacing?.(2) || '16px',
+          }}
+        />
+        {message && (
+          <Typography
+            variant="body1"
+            sx={{
+              fontWeight: 500,
+              color: (theme) => theme.palette.text.secondary,
+            }}
+          >
+            {message}
+          </Typography>
+        )}
+      </StyledBox>
+    </Fade>
+  );
+};
+export default LoadingSpinner;

src/components/UI/ThemeToggle.jsx ADDED Viewed

	@@ -0,0 +1,29 @@

+import React from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { Brightness4, Brightness7 } from '@mui/icons-material';
+import { useTheme as useMuiTheme } from '@mui/material/styles';
+import { useTheme } from '../../hooks/useTheme';
+const ThemeToggle = ({ size = 'medium' }) => {
+  const { toggleTheme, isDark } = useTheme();
+  const theme = useMuiTheme();
+  return (
+    <Tooltip title={`Switch to ${isDark ? 'light' : 'dark'} mode`}>
+      <IconButton
+        onClick={toggleTheme}
+        color="inherit"
+        size={size}
+        aria-label="toggle theme"
+      >
+        {isDark ? (
+          <Brightness7 sx={{ color: theme.palette.warning?.main || theme.palette.primary.main }} />
+        ) : (
+          <Brightness4 sx={{ color: theme.palette.grey[600] }} />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};
+export default ThemeToggle;

src/hooks/useAuth.js ADDED Viewed

	@@ -0,0 +1,120 @@

+// src/hooks/useAuth.js
+import { useState, useContext, createContext, useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { login as apiLogin, logout as apiLogout, refreshToken as apiRefreshToken } from '../services/auth';
+import { useLocalStorage } from './useLocalStorage';
+const AuthContext = createContext();
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [authTokens, setAuthTokens] = useLocalStorage('authTokens', null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const navigate = useNavigate();
+  // Auto-refresh token when it's about to expire
+  useEffect(() => {
+    const refreshInterval = setInterval(() => {
+      if (authTokens?.access) {
+        const { exp } = parseJwt(authTokens.access);
+        // Refresh token if it expires in less than 5 minutes
+        if (exp * 1000 - Date.now() < 300000) {
+          refreshToken();
+        }
+      }
+    }, 60000); // Check every minute
+    return () => clearInterval(refreshInterval);
+  }, [authTokens]);
+  const parseJwt = (token) => {
+    try {
+      return JSON.parse(atob(token.split('.')[1]));
+    } catch (e) {
+      return null;
+    }
+  };
+  const login = useCallback(async (username, password) => {
+    try {
+      const { access_token, refresh_token } = await apiLogin(username, password);
+      setAuthTokens({
+        access: access_token,
+        refresh: refresh_token
+      });
+      setUser(username);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  }, [setAuthTokens]);
+  const logout = useCallback(async () => {
+    try {
+      if (authTokens?.access) {
+        await apiLogout(authTokens.access);
+      }
+      setAuthTokens(null);
+      setUser(null);
+      navigate('/login');
+    } catch (error) {
+      console.error('Logout error:', error);
+      // Even if logout API fails, clear local tokens
+      setAuthTokens(null);
+      setUser(null);
+    }
+  }, [authTokens, setAuthTokens, navigate]);
+  const refreshToken = useCallback(async () => {
+    if (!authTokens?.refresh || isRefreshing) return;
+    setIsRefreshing(true);
+    try {
+      const { access_token, refresh_token } = await apiRefreshToken({
+        refresh_token: authTokens.refresh
+      });
+      setAuthTokens({
+        access: access_token,
+        refresh: refresh_token
+      });
+      return access_token;
+    } catch (error) {
+      console.error('Token refresh failed:', error);
+      logout(); // Full logout if refresh fails
+      throw error;
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [authTokens, isRefreshing, setAuthTokens, logout]);
+  const getAccessToken = useCallback(async () => {
+    if (!authTokens?.access) return null;
+    const { exp } = parseJwt(authTokens.access);
+    if (exp * 1000 - Date.now() < 30000) { // If expires in <30 seconds
+      return await refreshToken();
+    }
+    return authTokens.access;
+  }, [authTokens, refreshToken]);
+  const value = {
+    user,
+    authTokens,
+    isAuthenticated: !!authTokens?.access,
+    isRefreshing,
+    login,
+    logout,
+    refreshToken,
+    getAccessToken
+  };
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

src/hooks/useFeedback.js ADDED Viewed

	@@ -0,0 +1,39 @@

+// src/hooks/useFeedback.js
+import { useState, useCallback } from 'react';
+import { saveFeedback } from '../services/api';
+import { useAuth } from './useAuth';
+export const useFeedback = () => {
+  const { authTokens } = useAuth();
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveError, setSaveError] = useState(null);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const submitFeedback = useCallback(async (feedbackData) => {
+    setIsSaving(true);
+    setSaveError(null);
+    setSaveSuccess(false);
+    try {
+      await saveFeedback(feedbackData, authTokens.access);
+      setSaveSuccess(true);
+    } catch (err) {
+      setSaveError(err.message || 'Failed to save feedback');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [authTokens.access]);
+  const resetFeedbackState = useCallback(() => {
+    setSaveError(null);
+    setSaveSuccess(false);
+  }, []);
+  return {
+    isSaving,
+    saveError,
+    saveSuccess,
+    submitFeedback,
+    resetFeedbackState,
+  };
+};

src/hooks/useLocalStorage.js ADDED Viewed

	@@ -0,0 +1,26 @@

+// src/hooks/useLocalStorage.js
+import { useState } from 'react';
+export const useLocalStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(error);
+      return initialValue;
+    }
+  });
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  return [storedValue, setValue];
+};

src/hooks/useSearch.js ADDED Viewed

	@@ -0,0 +1,48 @@

+// src/hooks/useSearch.js
+import { useState, useCallback } from 'react';
+import { searchQuery } from '../services/search';
+import { useAuth } from './useAuth';
+export const useSearch = () => {
+  const { authTokens } = useAuth();
+  const [results, setResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const handleSearch = useCallback(async (query) => {
+    if (!query.trim()) {
+      setResults([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const searchResults = await searchQuery(query, authTokens.access);
+      // Combine and sort results by similarity (highest first)
+      const sortedResults = [...searchResults].sort((a, b) => b.similarity - a.similarity);
+      setResults(sortedResults);
+    } catch (err) {
+      setError(err.message || 'Failed to perform search');
+      setResults([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [authTokens.access]);
+  const clearResults = useCallback(() => {
+    setResults([]);
+    setError(null);
+  }, []);
+  return {
+    results,
+    isLoading,
+    error,
+    handleSearch,
+    clearResults,
+  };
+};

src/hooks/useTheme.js ADDED Viewed

	@@ -0,0 +1,57 @@

+import { useState, useEffect, useCallback, createContext, useContext } from 'react';
+// Create a context for theme
+export const ThemeContext = createContext();
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+const useThemeState = () => {
+  const [isDark, setIsDark] = useState(() => {
+    // Check localStorage for saved preference
+    const savedMode = localStorage.getItem('themeMode');
+    if (savedMode) return savedMode === 'dark';
+    // Fallback to system preference
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+  const [themeLoading, setThemeLoading] = useState(true);
+  useEffect(() => {
+    // Apply the theme class to document body
+    if (isDark) {
+      document.body.classList.add('dark-mode');
+      document.body.classList.remove('light-mode');
+    } else {
+      document.body.classList.add('light-mode');
+      document.body.classList.remove('dark-mode');
+    }
+    // Save preference to localStorage
+    localStorage.setItem('themeMode', isDark ? 'dark' : 'light');
+    setThemeLoading(false);
+  }, [isDark]);
+  const toggleTheme = useCallback(() => {
+    setIsDark(prev => !prev);
+  }, []);
+  return { isDark, toggleTheme, themeLoading };
+};
+// Theme provider component
+export const ThemeProvider = ({ children }) => {
+  const themeState = useThemeState();
+  return (
+    <ThemeContext.Provider value={themeState}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+export default useThemeState;

src/index.js ADDED Viewed

	@@ -0,0 +1,27 @@

+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import GlobalStyles from './styles/GlobalStyles';
+import './styles/fonts.css';
+import ErrorBoundary from './components/UI/ErrorBoundary';
+import { ThemeProvider as ThemeStateProvider } from './hooks/useTheme';
+import { ThemeProvider as MuiThemeProvider } from './styles/theme';
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <ErrorBoundary>
+      <BrowserRouter>
+        <ThemeStateProvider>
+          <MuiThemeProvider>
+            <GlobalStyles />
+            <App />
+          </MuiThemeProvider>
+        </ThemeStateProvider>
+      </BrowserRouter>
+    </ErrorBoundary>
+  </React.StrictMode>
+);

src/pages/About.jsx ADDED Viewed

	@@ -0,0 +1,70 @@

+import { Container, Typography, Box, Link } from '@mui/material';
+import { styled } from '@mui/system';
+const Section = styled('section')(({ theme }) => ({
+  marginBottom: theme.spacing(6),
+}));
+const About = () => {
+  return (
+    <Container maxWidth="md" sx={{ py: 4 }}>
+      <Section>
+        <Typography variant="h3" component="h1" gutterBottom sx={{ fontWeight: 700 }}>
+          About EnlightenQalb
+        </Typography>
+        <Typography variant="body1" paragraph>
+          EnlightenQalb (Enlighten the Heart) is a project that brings the timeless wisdom of
+          Imam Al-Ghazali to the modern age through advanced semantic search technology.
+        </Typography>
+      </Section>
+      <Section>
+        <Typography variant="h4" component="h2" gutterBottom sx={{ fontWeight: 600 }}>
+          The Technology
+        </Typography>
+        <Typography variant="body1" paragraph>
+          Our platform uses state-of-the-art sentence embedding models (UAE-Large and BGE-Large)
+          to find the most relevant passages from Al-Ghazali's "The Alchemy of Happiness"
+          in response to your spiritual queries.
+        </Typography>
+        <Typography variant="body1" paragraph>
+          The backend employs cosine similarity to match your questions with the most appropriate
+          sections of the text, providing you with direct access to the Imam's guidance.
+        </Typography>
+      </Section>
+      <Section>
+        <Typography variant="h4" component="h2" gutterBottom sx={{ fontWeight: 600 }}>
+          The Book
+        </Typography>
+        <Typography variant="body1" paragraph>
+          "The Alchemy of Happiness" (Kimiya-yi Sa'ādat) is a Persian work by the famous
+          Islamic theologian and philosopher Imam Abu Hamid al-Ghazali. The book emphasizes
+          the importance of observing the ritual requirements of Islam and the actions that
+          would lead to happiness in the afterlife.
+        </Typography>
+      </Section>
+      <Section>
+        <Typography variant="h4" component="h2" gutterBottom sx={{ fontWeight: 600 }}>
+          The Team
+        </Typography>
+        <Typography variant="body1" paragraph>
+          EnlightenQalb is developed by HumbleBeeAI, a team passionate about making classical
+          Islamic knowledge more accessible through modern technology.
+        </Typography>
+      </Section>
+      <Box sx={{ mt: 4 }}>
+        <Typography variant="body2">
+          For more information about the technical implementation, visit our{' '}
+          <Link href="https://github.com/humblebeeintel/gazzoliy-therapy" target="_blank">
+            GitHub repository
+          </Link>.
+        </Typography>
+      </Box>
+    </Container>
+  );
+};
+export default About;

src/pages/Dashboard.jsx ADDED Viewed

	@@ -0,0 +1,75 @@

+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+import { useSearch } from '../hooks/useSearch';
+import SearchForm from '../components/Search/SearchForm';
+import SearchResults from '../components/Search/SearchResults';
+import FeedbackForm from '../components/Search/FeedbackForm';
+import LoadingSpinner from '../components/UI/LoadingSpinner';
+import ErrorMessage from '../components/UI/ErrorMessage';
+import { Box, Typography, Container } from '@mui/material';
+const Dashboard = () => {
+  const { isAuthenticated, user } = useAuth();
+  const {
+    searchQuery,
+    results,
+    loading,
+    error,
+    handleSearch,
+    handleFeedbackSubmit
+  } = useSearch();
+  const [selectedResult, setSelectedResult] = useState(null);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (!isAuthenticated) {
+      navigate('/login');
+    }
+  }, [isAuthenticated, navigate]);
+  const handleResultSelect = (result) => {
+    setSelectedResult(result);
+  };
+  if (!isAuthenticated) {
+    return null;
+  }
+  return (
+    <Container maxWidth="lg" sx={{ py: 4 }}>
+      <Typography variant="h4" component="h1" gutterBottom sx={{ fontWeight: 600 }}>
+        Welcome, {user}
+      </Typography>
+      <Box sx={{ mb: 4 }}>
+        <SearchForm onSearch={handleSearch} />
+      </Box>
+      {loading && <LoadingSpinner />}
+      {error && <ErrorMessage message={error} />}
+      {results && (
+        <Box sx={{ mb: 4 }}>
+          <SearchResults
+            results={results}
+            query={searchQuery}
+            onSelect={handleResultSelect}
+          />
+        </Box>
+      )}
+      {selectedResult && (
+        <Box sx={{ mb: 4 }}>
+          <FeedbackForm
+            searchResult={selectedResult}
+            query={searchQuery}
+            onFeedbackSubmitted={handleFeedbackSubmit}
+          />
+        </Box>
+      )}
+    </Container>
+  );
+};
+export default Dashboard;

src/pages/Home.jsx ADDED Viewed

	@@ -0,0 +1,68 @@

+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+import { Button } from '@mui/material';
+import { styled } from '@mui/system';
+const HeroSection = styled('section')(({ theme }) => ({
+  minHeight: '80vh',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textAlign: 'center',
+  padding: theme.spacing(4),
+  background: theme.palette.background.paper,
+  color: theme.palette.text.primary,
+}));
+const Title = styled('h1')(({ theme }) => ({
+  fontSize: '3rem',
+  marginBottom: theme.spacing(2),
+  fontWeight: 700,
+  color: theme.palette.primary.main,
+}));
+const Subtitle = styled('p')(({ theme }) => ({
+  fontSize: '1.5rem',
+  marginBottom: theme.spacing(4),
+  maxWidth: '800px',
+}));
+const CTAButton = styled(Button)(({ theme }) => ({
+  padding: theme.spacing(1.5, 4),
+  fontSize: '1.1rem',
+  borderRadius: '50px',
+  fontWeight: 600,
+}));
+const Home = () => {
+  const { isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate('/dashboard');
+    }
+  }, [isAuthenticated, navigate]);
+  return (
+    <HeroSection>
+      <Title>EnlightenQalb</Title>
+      <Subtitle>
+        Explore the wisdom of Imam Al-Ghazali through modern semantic search technology.
+        Discover relevant passages from "The Alchemy of Happiness" for your spiritual queries.
+      </Subtitle>
+      <CTAButton
+        variant="contained"
+        color="primary"
+        size="large"
+        onClick={() => navigate('/login')}
+      >
+        Begin Your Journey
+      </CTAButton>
+    </HeroSection>
+  );
+};
+export default Home;

src/services/api.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import axios from 'axios';
 // Replace with your actual HF Space backend URL
-const API_BASE_URL = process.env.REACT_APP_API_URL || 'https://your-hf-space.ngrok-free.app';
 const api = axios.create({
   baseURL: API_BASE_URL,
@@ -10,18 +10,22 @@ const api = axios.create({
   },
 });
 // Request interceptor to add auth token
 api.interceptors.request.use(
   (config) => {
-    const token = localStorage.getItem('access_token');
-    if (token) {
-      config.headers['Authorization'] = `Bearer ${token}`;
     }
     return config;
   },
-  (error) => {
-    return Promise.reject(error);
-  }
 );
 // Response interceptor to handle token refresh
@@ -29,31 +33,33 @@ api.interceptors.response.use(
   (response) => response,
   async (error) => {
     const originalRequest = error.config;
-    if (error.response.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
       try {
-        const refreshToken = localStorage.getItem('refresh_token');
-        if (!refreshToken) throw new Error('No refresh token');
         const response = await axios.post(`${API_BASE_URL}/refresh`, {
-          refresh_token: refreshToken
         });
-        localStorage.setItem('access_token', response.data.access_token);
-        localStorage.setItem('refresh_token', response.data.refresh_token);
-        originalRequest.headers['Authorization'] = `Bearer ${response.data.access_token}`;
         return api(originalRequest);
       } catch (refreshError) {
-        localStorage.removeItem('access_token');
-        localStorage.removeItem('refresh_token');
         window.location.href = '/';
         return Promise.reject(refreshError);
       }
     }
     return Promise.reject(error);
   }
 );

 import axios from 'axios';
 // Replace with your actual HF Space backend URL
+const API_BASE_URL = process.env.REACT_APP_API_URL || 'https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space';
 const api = axios.create({
   baseURL: API_BASE_URL,
   },
 });
+// Helper to get tokens from localStorage
+function getAuthTokens() {
+  const tokens = localStorage.getItem('authTokens');
+  return tokens ? JSON.parse(tokens) : null;
+}
 // Request interceptor to add auth token
 api.interceptors.request.use(
   (config) => {
+    const tokens = getAuthTokens();
+    if (tokens?.access) {
+      config.headers['Authorization'] = `Bearer ${tokens.access}`;
     }
     return config;
   },
+  (error) => Promise.reject(error)
 );
 // Response interceptor to handle token refresh
   (response) => response,
   async (error) => {
     const originalRequest = error.config;
+    if (error.response && error.response.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
       try {
+        const tokens = getAuthTokens();
+        if (!tokens?.refresh) throw new Error('No refresh token');
         const response = await axios.post(`${API_BASE_URL}/refresh`, {
+          refresh_token: tokens.refresh
         });
+        const newTokens = {
+          access: response.data.access_token,
+          refresh: response.data.refresh_token
+        };
+        localStorage.setItem('authTokens', JSON.stringify(newTokens));
+        originalRequest.headers['Authorization'] = `Bearer ${newTokens.access}`;
         return api(originalRequest);
       } catch (refreshError) {
+        localStorage.removeItem('authTokens');
         window.location.href = '/';
         return Promise.reject(refreshError);
       }
     }
     return Promise.reject(error);
   }
 );

src/services/auth.js ADDED Viewed

	@@ -0,0 +1,77 @@

+// src/services/auth.js
+import axios from './api';
+const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space';
+export const login = async (username, password) => {
+  try {
+    const response = await axios.post(
+      `${API_BASE_URL}/login`,
+      new URLSearchParams({
+        username,
+        password,
+        grant_type: 'password'
+      }),
+      {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded'
+        }
+      }
+    );
+    return {
+      access_token: response.data.access_token,
+      refresh_token: response.data.refresh_token,
+      token_type: response.data.token_type
+    };
+  } catch (error) {
+    if (error.response) {
+      throw new Error(
+        error.response.data.detail ||
+        error.response.data.message ||
+        'Login failed'
+      );
+    }
+    throw new Error('Network error. Please try again.');
+  }
+};
+export const logout = async (accessToken) => {
+  try {
+    await axios.post(
+      `${API_BASE_URL}/logout`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`
+        }
+      }
+    );
+  } catch (error) {
+    console.error('Logout error:', error);
+    // Proceed with client-side cleanup regardless
+  }
+};
+export const refreshToken = async (refreshToken) => {
+  try {
+    const response = await axios.post(
+      `${API_BASE_URL}/refresh`,
+      { refresh_token: refreshToken }
+    );
+    return {
+      access_token: response.data.access_token,
+      refresh_token: response.data.refresh_token || refreshToken, // Fallback to existing if not provided
+      token_type: response.data.token_type || 'bearer'
+    };
+  } catch (error) {
+    if (error.response) {
+      throw new Error(
+        error.response.data.detail ||
+        'Session expired. Please login again.'
+      );
+    }
+    throw new Error('Network error during token refresh');
+  }
+};

src/services/search.js ADDED Viewed

	@@ -0,0 +1,27 @@

+import axios from './api';
+const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space';
+export const searchQuery = async (query) => {
+  try {
+    const response = await axios.post(`${API_BASE_URL}/search`, { query });
+    return response.data;
+  } catch (error) {
+    throw new Error(error.response?.data?.detail || 'Search failed');
+  }
+};
+export const saveFeedback = async (feedbackData, token) => {
+  try {
+    await axios.post(`${API_BASE_URL}/save`,
+      { items: [feedbackData] },
+      {
+        headers: {
+          Authorization: `Bearer ${token}`
+        }
+      }
+    );
+  } catch (error) {
+    throw new Error(error.response?.data?.detail || 'Failed to save feedback');
+  }
+};

src/styles/GlobalStyles.js ADDED Viewed

	@@ -0,0 +1,69 @@

+import { GlobalStyles as MuiGlobalStyles } from '@mui/material';
+import { fadeIn } from './animations'; // Import the missing fadeIn animation
+const GlobalStyles = () => (
+  <MuiGlobalStyles
+    styles={(theme) => ({
+      html: {
+        scrollBehavior: 'smooth',
+      },
+      body: {
+        margin: 0,
+        padding: 0,
+        transition: 'all 0.3s ease',
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.text.primary,
+        fontFamily: theme.typography.fontFamily,
+        lineHeight: '1.6',
+        '&.dark-mode': {
+          backgroundColor: theme.palette.background.default,
+          color: theme.palette.text.primary,
+        },
+        '&.light-mode': {
+          backgroundColor: theme.palette.background.default,
+          color: theme.palette.text.primary,
+        },
+      },
+      a: {
+        color: theme.palette.primary.main,
+        textDecoration: 'none',
+        transition: 'color 0.3s ease',
+        '&:hover': {
+          textDecoration: 'underline',
+          color: theme.palette.primary.dark,
+        },
+      },
+      'h1, h2, h3, h4, h5, h6': {
+        fontWeight: 700,
+        marginTop: theme.spacing(3),
+        marginBottom: theme.spacing(2),
+      },
+      '::selection': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+      },
+      '.spiritual-highlight': {
+        position: 'relative',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          bottom: -2,
+          left: 0,
+          width: '100%',
+          height: 2,
+          background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+          transform: 'scaleX(0)',
+          transition: 'transform 0.3s ease',
+        },
+        '&:hover::after': {
+          transform: 'scaleX(1)',
+        },
+      },
+      '.page-transition': {
+        animation: `${fadeIn} 0.5s ease forwards`,
+      },
+    })}
+  />
+);
+export default GlobalStyles;

src/styles/animations.js ADDED Viewed

	@@ -0,0 +1,56 @@

+import { keyframes } from '@emotion/react';
+export const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+export const slideUp = keyframes`
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+`;
+export const pulse = keyframes`
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+export const spiritualGlow = keyframes`
+  0% {
+    box-shadow: 0 0 5px rgba(63, 81, 181, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(63, 81, 181, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 5px rgba(63, 81, 181, 0.5);
+  }
+`;
+export const pageTransition = {
+  enter: {
+    opacity: 0,
+    animation: `${fadeIn} 0.5s ease forwards`,
+  },
+  exit: {
+    opacity: 1,
+    animation: `${fadeIn} 0.5s ease reverse`,
+  },
+};

src/styles/fonts.css ADDED Viewed

	@@ -0,0 +1,28 @@

+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
+/* Arabic font for Quranic/hadith references */
+@font-face {
+  font-family: 'Traditional Arabic';
+  font-weight: normal;
+  src: local('Traditional Arabic'),
+       url('https://fonts.cdnfonts.com/css/traditional-arabic') format('truetype');
+}
+body {
+  font-family: 'Poppins', sans-serif;
+}
+.arabic-text {
+  font-family: 'Traditional Arabic', 'Amiri', serif;
+  font-size: 1.5rem;
+  line-height: 2.5rem;
+  direction: rtl;
+}
+.spiritual-quote {
+  font-family: 'Amiri', serif;
+  font-size: 1.2rem;
+  line-height: 2rem;
+  font-style: italic;
+}

src/styles/spiritualStyles.js ADDED Viewed

	@@ -0,0 +1,73 @@

+import { css } from '@emotion/react';
+export const spiritualCard = css`
+  position: relative;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+`;
+export const quoteStyle = (theme) => css`
+  padding: 1.5rem;
+  border-left: 4px solid ${theme.palette.spiritual.quoteBorder};
+  background-color: ${theme.palette.background.paper};
+  font-family: 'Amiri', serif;
+  font-size: 1.2rem;
+  line-height: 2rem;
+  margin: 1.5rem 0;
+  border-radius: 0 8px 8px 0;
+`;
+export const arabicTextStyle = css`
+  font-family: 'Traditional Arabic', 'Amiri', serif;
+  font-size: 1.5rem;
+  line-height: 2.5rem;
+  direction: rtl;
+  text-align: right;
+`;
+export const fadeInAnimation = css`
+  animation: fadeIn 0.8s ease forwards;
+`;
+export const prayerMatStyle = (theme) => css`
+  background: linear-gradient(145deg, ${theme.palette.spiritual.light} 0%, ${theme.palette.spiritual.dark} 100%);
+  padding: 2rem;
+  border-radius: 0 0 20px 20px;
+  position: relative;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60%;
+    height: 3px;
+    background: ${theme.palette.spiritual.accent};
+    border-radius: 3px;
+  }
+`;
+export const illuminationEffect = css`
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  &:hover:after {
+    opacity: 1;
+  }
+`;

src/styles/theme.js CHANGED Viewed

@@ -1,64 +1,25 @@
-export const lightTheme = {
-    colors: {
-      primary: '#4a6fa5',  // Deep blue
-      secondary: '#6b8cae',  // Lighter blue
-      accent1: '#166088',  // Darker blue
-      accent2: '#4fc3a1',  // Teal
-      background: '#ffffff',
-      cardBg: '#f8f9fa',
-      text: '#333333',
-      muted: '#6c757d',
-      disabled: '#cccccc',
-      error: '#dc3545',
-      success: '#28a745',
-    },
-    fonts: {
-      primary: '"Open Sans", sans-serif',
-      secondary: '"Merriweather", serif',
-    },
-    fontSizes: {
-      small: '0.875rem',
-      medium: '1rem',
-      large: '1.25rem',
-      xlarge: '1.5rem',
-      xxlarge: '2rem',
-    },
-    spacing: {
-      small: '0.5rem',
-      medium: '1rem',
-      large: '1.5rem',
-      xlarge: '2rem',
-    },
-    radii: {
-      small: '4px',
-      medium: '8px',
-      large: '16px',
-    },
-    shadows: {
-      small: '0 2px 4px rgba(0,0,0,0.1)',
-      medium: '0 4px 8px rgba(0,0,0,0.1)',
-      large: '0 8px 16px rgba(0,0,0,0.1)',
-    },
-    breakpoints: {
-      mobile: '576px',
-      tablet: '768px',
-      desktop: '992px',
-    },
-  };
-  export const darkTheme = {
-    ...lightTheme,
-    colors: {
-      primary: '#6b8cae',
-      secondary: '#4a6fa5',
-      accent1: '#4fc3a1',
-      accent2: '#166088',
-      background: '#1a1a2e',
-      cardBg: '#16213e',
-      text: '#e6e6e6',
-      muted: '#aaaaaa',
-      disabled: '#555555',
-      error: '#ff6b6b',
-      success: '#51cf66',
-    },
-  };

+import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import React, { useMemo } from 'react';
+import useTheme from '../hooks/useTheme';
+const getTheme = (isDark) => createTheme({
+  palette: {
+    mode: isDark ? 'dark' : 'light',
+    primary: {
+      main: isDark ? '#7986cb' : '#3f51b5',
+    },
+    background: {
+      default: isDark ? '#121212' : '#f9f9f9',
+    },
+  },
+});
+export const ThemeProvider = ({ children }) => {
+  const { isDark } = useTheme();
+  const theme = useMemo(() => getTheme(isDark), [isDark]);
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+};
+export default getTheme;