+
Please wait, validating your session...
diff --git a/client/src/index.jsx b/client/src/index.jsx
index a70b063..845fc2c 100644
--- a/client/src/index.jsx
+++ b/client/src/index.jsx
@@ -1,8 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
-import App from './App.jsx'
+import App from './App.jsx';
+
+// Main entry point for the React application
createRoot(document.getElementById('root')).render(
+ {openLogout && handleLogout(e)} />}
+
+
+
+ { window.location.reload() }}
+ sx={{ display: { xs: 'none', md: 'flex', cursor: 'pointer' } }}
+ />
+
+
+ GENAI-BOT
+
+
+
+
+
+
+
+
+
+
+
+
+
+ GENAI-BOT
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/client/src/layout/MainLayout.jsx b/client/src/layout/MainLayout.jsx
deleted file mode 100644
index 277647d..0000000
--- a/client/src/layout/MainLayout.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useEffect, useState } from 'react';
-import AppHeader from './AppHeader';
-
-export default function MainLayout({ children }) {
-
- const [chatId, setChatId] = useState(null);
- const [history, setHistory] = useState([]);
- const [messages, setMessages] = useState([]);
-
- useEffect(() => {
- const urlParams = new URLSearchParams(window.location.search);
- setChatId(urlParams.get('chatId') ?? null);
- }, []);
-
-
- const handleOpenHistory = async () => {
- console.log("Opening chat history...");
- }
-
- return (
-
- 
-
- )
-}
diff --git a/client/src/layout/Header.css b/client/src/layout/Header.css
new file mode 100644
index 0000000..1a24684
--- /dev/null
+++ b/client/src/layout/Header.css
@@ -0,0 +1,35 @@
+.logout-button {
+ border-radius: 20px !important;
+}
+
+.active-route {
+ margin: 0 !important;
+ padding: 3px 6px !important;
+ color: #FFC107 !important;
+ font-weight: 800 !important;
+ border-radius: 5px !important;
+ border: 2px solid #FFC107 !important;
+}
+
+.non-active-route {
+ margin: 0 !important;
+ padding: 3px 6px !important;
+ color: #E0E0E0 !important;
+ font-weight: 800 !important;
+}
+
+.pop-active {
+ color: #1976d2 !important;
+ align-items: center !important;
+ justify-content: center !important;
+}
+
+.pop-non-active {
+ color: black !important;
+ align-items: center !important;
+ justify-content: center !important;
+}
+
+.profileAvt {
+ border: 2px solid #FFC107 !important;
+}
\ No newline at end of file
diff --git a/client/src/layout/Header.jsx b/client/src/layout/Header.jsx
new file mode 100644
index 0000000..9cde090
--- /dev/null
+++ b/client/src/layout/Header.jsx
@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import { toast } from 'react-toastify';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+ AppBar, Toolbar, Collapse, Typography, Container, Button, Tooltip, MenuItem,
+ IconButton, Menu, Avatar
+} from '@mui/material';
+import {
+ Menu as MenuIcon, Close, Logout, Description, ConnectWithoutContact, Person
+} from '@mui/icons-material';
+
+import './Header.css';
+import { useAuth } from '../hooks/useAuth';
+import LogoutPop from '../components/LogoutPop';
+
+
+// Header component
+export default function Header() {
+
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { userData, logout } = useAuth();
+
+ const [open, setOpen] = useState(false);
+ const [popUser, setPopUser] = useState(null);
+ const [openLogout, setOpenLogout] = useState(false);
+
+ const isActive = (page) => location.pathname.split('/')[2] === page;
+
+ const toggleDrawer = (page) => {
+ setOpen(!open);
+ if (page) {
+ navigate('/admin/' + page);
+ }
+ };
+
+ const handleOpenUserMenu = (event) => {
+ setPopUser(event.currentTarget);
+ };
+
+ const handleLogout = async (e) => {
+ if (e) {
+ setOpenLogout(false);
+ await logout();
+ toast.success('Logged out successfully');
+ navigate('/');
+ }
+ setOpenLogout(false);
+ };
+
+ return (
+
- GenAIBot
-
-
- )
-}
diff --git a/client/src/layout/NavbarActions.jsx b/client/src/layout/NavbarActions.jsx
deleted file mode 100644
index 0873677..0000000
--- a/client/src/layout/NavbarActions.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import PropTypes from 'prop-types';
-import { toast } from 'react-toastify';
-import { useNavigate } from "react-router-dom";
-import { useEffect, useRef, useState } from 'react';
-import { Button, IconButton, Typography } from '@mui/material';
-import { ExpandMore, ExpandLess, AutoDelete, Delete } from '@mui/icons-material';
-
-import { useAuth } from '../hooks/useAuth';
-import { useLoading } from '../hooks/useLoading';
-import ConfirmPop from '../components/ConfirmPop';
-import LogoutPop from '../components/auth/LogoutPop';
-
-
-// Navbar actions component
-export default function NavbarActions({ chatId, history, setChatId, setHistory, setMessages, handleOpen }) {
-
- const navigate = useNavigate();
- const { http, logout } = useAuth();
- const { setLoading } = useLoading();
-
- const navbarAction = useRef(null);
- const [open, setOpen] = useState(false);
- const [expanded, setExpanded] = useState(false);
- const [openLogout, setOpenLogout] = useState(false);
-
- useEffect(() => {
- const handleClickOutside = (event) => {
- if (navbarAction.current && !navbarAction.current.contains(event.target)) {
- setExpanded(false);
- }
- };
- document.addEventListener('mousedown', handleClickOutside);
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, []);
-
- const handleLogout = async (e) => {
- if (e) {
- setOpenLogout(false);
- await logout();
- toast.success('Logged out successfully');
- navigate('/');
- }
- setOpenLogout(false);
- };
-
- const handleClearHistory = async () => {
- setOpen(false);
- try {
- setLoading(true);
- await http.delete('/history');
- toast.success('Chat history cleared successfully');
- setHistory([]);
- setMessages([]);
- setChatId(null);
- window.history.replaceState({}, '', window.location.pathname);
- } catch (error) {
- console.error(error);
- toast.error(error?.response?.data?.error || 'Failed to clear chat history');
- } finally {
- setLoading(false);
- }
- };
-
- const handleDelete = async (id) => {
- try {
- setLoading(true);
- await http.delete(`/history/${id}`);
- toast.success('Chat history deleted successfully');
- setHistory((prevHistory) => prevHistory.filter((item) => item.id !== id));
- if (id === chatId) {
- setChatId(null);
- window.history.replaceState({}, '', window.location.pathname);
- }
- } catch (error) {
- console.error(error);
- toast.error(error?.response?.data?.error || 'Failed to delete chat history');
- } finally {
- setLoading(false);
- }
- };
-
- const handleOpenChat = (id) => {
- setExpanded(false);
- handleOpen(id);
- }
-
- const handleOpenNewChat = () => {
- setExpanded(false);
- handleOpen(null);
- }
-
- return (
-
-
-
-
- {children}
-
-
-
- handleOpenHistory(e)}
- />
-
-
-
-
- {openLogout && handleLogout(e)} />}
- {open &&
- );
-};
-
-NavbarActions.propTypes = {
- chatId: PropTypes.string,
- history: PropTypes.array,
- setChatId: PropTypes.func.isRequired,
- setHistory: PropTypes.func.isRequired,
- setMessages: PropTypes.func.isRequired,
- handleOpen: PropTypes.func.isRequired,
-};
diff --git a/client/src/middleware/PrivateRoutes.jsx b/client/src/middleware/PrivateRoutes.jsx
index bd9fe9f..cad356e 100755
--- a/client/src/middleware/PrivateRoutes.jsx
+++ b/client/src/middleware/PrivateRoutes.jsx
@@ -1,73 +1,39 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';
-import AppHeader from '../layout/AppHeader';
-import NavbarActions from '../layout/NavbarActions';
+import Header from '../layout/Header';
// PrivateRoutes component to protect routes
export default function PrivateRoutes() {
const navigate = useNavigate();
- const { isAuthLoading, isAuthenticated, http } = useAuth();
-
- const tempAuth = true;
-
- const [chatId, setChatId] = useState(null);
- const [history, setHistory] = useState([]);
- const [messages, setMessages] = useState([]);
-
- const handleOpenHistory = async () => {
- console.log("Opening chat history...");
- }
+ const { isAuthLoading, isAuthenticated } = useAuth();
useEffect(() => {
- if (!isAuthenticated) { navigate('/'); };
- if (isAuthLoading || !http.defaults.headers.common.Authorization) return;
+ if (!isAuthenticated) {
+ navigate('/');
+ };
- // const urlParams = new URLSearchParams(window.location.search);
- // setChatId(urlParams.get('chatId') ?? null);
+ if (isAuthLoading) return;
- }, [isAuthLoading, isAuthenticated, http, navigate]);
+ }, [isAuthLoading, isAuthenticated, navigate]);
if (!isAuthenticated) {
return null;
}
- // useEffect(() => {
- // const urlParams = new URLSearchParams(window.location.search);
- // setChatId(urlParams.get('chatId') ?? null);
-
- // }, [chatId]);
-
-
return (
<>
- {tempAuth ? (
- // {!isAuthLoading && isAuthenticated && http.defaults.headers.common.Authorization ? (
-
- <>
- }
- onClick={() => setOpen(true)}
- >
- Clear Chat History
-
-
-
- )}
- -
- {history?.length > 0 ? (
- history.map((item, index) => (
-
- handleOpenChat(item.id)}>
- {item.name}
-
{ - e.stopPropagation(); - handleDelete(item.id); - }} - aria-label="Delete chat" - > - --
- ))
- ) : (
- -
-
- No chat history available - -
- )}
-
-
) :
null
}
diff --git a/client/src/main.css b/client/src/pages/chat/Chat.css
similarity index 64%
rename from client/src/main.css
rename to client/src/pages/chat/Chat.css
index 1319ad1..8138686 100644
--- a/client/src/main.css
+++ b/client/src/pages/chat/Chat.css
@@ -1,11 +1,4 @@
-* {
- scrollbar-width: thin;
- scroll-behavior: smooth;
- scrollbar-color: #757575 transparent;
-}
-
-/* Main CSS */
-.main {
+.chat__main {
margin: 0;
padding: 0;
width: 100vw;
@@ -17,13 +10,13 @@
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
-.main__left {
+.chat__main__left {
z-index: 1000;
display: flex;
position: absolute;
}
-.main__center {
+.chat__main__center {
width: 100%;
height: 100%;
flex-shrink: 0;
@@ -33,26 +26,13 @@
justify-content: center;
}
-.main__right {
+.chat__main__right {
right: 0;
display: flex;
position: absolute;
}
-
-/* Auth Loading */
-.auth__loading {
- width: 100vw;
- height: 100vh;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- background-color: #1d1e20;
-}
-
-/* Title CSS */
-.title {
+.chat__title {
gap: 5px;
padding: 10px;
color: #474747;
@@ -62,93 +42,20 @@
align-items: center;
}
-.title:hover {
+.chat__title:hover {
color: #000000;
}
-.title img {
+.chat__title img {
width: 40px;
height: 40px;
user-select: none;
pointer-events: none;
}
-/* NavBar Action css */
-.navbar__actions {
- gap: 5px;
- padding: 10px;
- color: #D3D2D2;
- display: flex;
- user-select: none;
- align-items: center;
-}
-
-.navbar__content {
- top: 55px;
- right: 15px;
- width: 330px;
- padding: 10px;
- z-index: 1000;
- max-height: 420px;
- border-radius: 5px;
- position: fixed;
- overflow-y: auto;
- background: #36383A;
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-}
-
-.navbar__content[hidden] {
- opacity: 0;
- pointer-events: none;
-}
-
-.navbar__content ul {
- margin: 0;
- padding: 0;
- list-style: none;
- overflow-y: auto;
-}
-
-.navbar__content ul li {
- width: 100%;
- margin-top: 5px;
- padding: 5px 10px;
- border-radius: 5px;
- display: flex;
- cursor: pointer;
- align-items: center;
- transition: all 0.2s ease;
- border: 1px solid #1976d2;
- background-color: #2a2c2e;
- justify-content: space-between;
-}
-
-.navbar__content ul li:hover {
- border-color: #42a5f5;
- background-color: #3a3c3e;
-}
-
-.navbar__content ul li.no-history {
- border: none;
- justify-content: center;
- background-color: transparent;
-}
-
-.navbar__content ul li .chat-name {
- flex-grow: 1;
- font-size: 14px;
- color: #ffffff;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.navbar__content ul li .MuiIconButton-root {
- padding: 4px;
-}
/* Welcome User */
-.welcome {
+.chat__welcome {
gap: 10px;
width: 100%;
padding: 20px;
@@ -161,38 +68,34 @@
justify-content: center;
}
-.welcome__textarea {
+
+/* Chat Textarea */
+.chat__textarea {
width: 100%;
}
-.welcome__textarea .MuiOutlinedInput-root {
+.chat__textarea .MuiOutlinedInput-root {
font-size: 16px;
margin-top: 40px;
border-radius: 10px;
background: #fff;
font-family: sans-serif;
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
border: 1px solid #D1D4DA;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
-.welcome__textarea .MuiOutlinedInput-input {
+.chat__textarea .MuiOutlinedInput-input {
padding: 10px 40px 10px 10px;
}
-.welcome__textarea .MuiOutlinedInput-input::placeholder {
+.chat__textarea .MuiOutlinedInput-input::placeholder {
opacity: 1;
color: #D1D4DA;
}
-.welcome__typewriter {
- height: 30px;
- margin-top: 60px;
- color: #D3D2D2;
- text-align: center;
-}
-/* Chat CSS */
-.chat {
+/* ChatHome CSS */
+.chat__home {
width: 100%;
height: 100%;
color: #D3D2D2;
@@ -202,7 +105,7 @@
box-sizing: border-box;
}
-.chat__messages {
+.chat__home__messages {
gap: 10px;
width: 100%;
flex-grow: 1;
@@ -213,44 +116,28 @@
flex-direction: column;
}
-.chat__container {
+.chat__home__container {
max-width: 800px !important;
}
-.chat__scrollToBottom {
- right: -50px;
- bottom: 40px;
- margin: 10px;
- color: #D3D2D2;
- cursor: pointer;
- position: absolute;
-}
-
-.chat__messages::-webkit-scrollbar {
- width: 8px;
-}
-
-.chat__messages::-webkit-scrollbar-track {
- background: #1d1e20;
-}
-
-.chat__messages::-webkit-scrollbar-thumb {
- background: #555;
- border-radius: 4px;
-}
-
-.chat__messages::-webkit-scrollbar-thumb:hover {
- background: #777;
-}
-
-.message-pair {
+.chat__home__message__pair {
gap: 10px;
display: flex;
align-items: flex-end;
flex-direction: column;
}
-.chat__input {
+.chat__home__scrollToBottom {
+ right: 30px;
+ bottom: 10px;
+ margin: 10px;
+ z-index: 1009;
+ color: #D3D2D2;
+ cursor: pointer;
+ position: absolute;
+}
+
+.chat__home__input {
left: 0;
right: 0;
bottom: 10px;
@@ -258,7 +145,8 @@
position: absolute;
}
-/* Chat messages CSS */
+
+/* Chat Message Bot CSS */
.chat-message-wrapper {
font-size: 16px;
line-height: 1.6;
@@ -274,21 +162,66 @@
color: #1D1D1D;
align-self: flex-start;
background: transparent;
+ position: relative;
}
-.chat-message-wrapper.user {
+.chat-message-wrapper-user {
+ padding: 15px;
max-width: 80%;
- padding: 6px 15px;
border-radius: 10px 10px 0 10px;
color: #2B2A29;
align-self: flex-end;
background: #FCFCFC;
display: inline-block;
+ word-wrap: break-word;
border: 1px solid #D1D4DA;
}
-.chat-message-wrapper p {
- margin: 5px 0;
+.chat-message-wrapper-user pre {
+ margin: 0;
+ padding: 0;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+ font-family: 'Poppins', sans-serif;
+}
+
+.copy-button {
+ top: 8px;
+ right: 8px;
+ position: absolute;
+}
+
+.feedback-buttons {
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+
+.chat-message-wrapper.bot:hover .feedback-buttons {
+ opacity: 1;
+}
+
+.chat-message-wrapper strong {
+ font-weight: 600;
+}
+
+.chat-message-wrapper em {
+ font-style: italic;
+}
+
+.chat-message-wrapper a {
+ color: #1976d2;
+ text-decoration: none;
+ font-weight: 500;
+}
+
+.chat-message-wrapper a:hover {
+ text-decoration: underline;
+}
+
+.chat-message-wrapper code {
+ font-size: 14px;
+ font-family: 'Fira Code', monospace;
}
.markdown-heading {
@@ -322,7 +255,6 @@
list-style-type: disc;
}
-/* From your old code */
.markdown-list ol {
list-style-type: decimal;
}
@@ -331,27 +263,6 @@
margin: 5px 0;
}
-/* Bold and Italics */
-.chat-message-wrapper strong {
- font-weight: 600;
-}
-
-.chat-message-wrapper em {
- font-style: italic;
-}
-
-/* Links */
-.chat-message-wrapper a {
- color: #1976d2;
- text-decoration: none;
- font-weight: 500;
-}
-
-.chat-message-wrapper a:hover {
- text-decoration: underline;
-}
-
-/* Code styles */
.code-block-wrapper {
width: 100%;
margin: 10px 0;
@@ -382,16 +293,6 @@
font-family: 'Fira Code', monospace;
}
-.chat-message-wrapper code {
- font-size: 14px;
- font-family: 'Fira Code', monospace;
-}
-
-.copy-button {
- top: 8px;
- right: 8px;
- position: absolute;
-}
/* Typing Indicator CSS */
.typing-indicator-wrapper {
diff --git a/client/src/pages/chat/ChatFeedback.jsx b/client/src/pages/chat/ChatFeedback.jsx
new file mode 100644
index 0000000..2f23e20
--- /dev/null
+++ b/client/src/pages/chat/ChatFeedback.jsx
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import {
+ Dialog, DialogTitle, DialogContent, Button, DialogActions, TextField
+} from '@mui/material';
+
+
+export default function ChatFeedback({ open, setOpen, onsubmit }) {
+
+ const [comment, setComment] = useState('');
+
+ return (
+
+ )
+}
+
+ChatFeedback.propTypes = {
+ open: PropTypes.bool.isRequired,
+ setOpen: PropTypes.func.isRequired,
+ onsubmit: PropTypes.func.isRequired,
+};
\ No newline at end of file
diff --git a/client/src/pages/chat/ChatHome.jsx b/client/src/pages/chat/ChatHome.jsx
index 41bd2ff..c18cdec 100644
--- a/client/src/pages/chat/ChatHome.jsx
+++ b/client/src/pages/chat/ChatHome.jsx
@@ -1,43 +1,140 @@
-import { useState } from 'react';
-
-import ChatLayout from './ChatLayout';
-import ChatWelcome from './ChatWelcome';
-import { handleChatLLM } from './handleChat';
-import { useAuth } from '../../hooks/useAuth';
-
-
-// ChatHome component
-export default function ChatHome() {
-
- const { baseURL } = useAuth();
-
- const [aiLoad, setAiLoad] = useState(false);
- const [messages, setMessages] = useState([]);
-
- const handleChat = async (text) => {
- console.log("Message sent:", text);
- try {
- setAiLoad(true);
- await handleChatLLM({
- query: text,
- baseURL,
- setMessages,
- setAiLoad,
- })
- } catch (error) {
- console.error("Error in handleChat:", error);
- } finally {
- setAiLoad(false);
+/* eslint-disable react-hooks/exhaustive-deps */
+import PropTypes from "prop-types";
+import { toast } from "react-toastify";
+import { useEffect, useRef, useState } from "react";
+import { ArrowDownward } from "@mui/icons-material";
+import { Container, IconButton } from "@mui/material";
+
+import ChatInput from "./ChatInput";
+import ChatMessageBot from "./ChatMessageBot";
+import ChatMessageUser from "./ChatMessageUser";
+import TypingIndicator from "../../components/typing/TypingIndicator";
+import { useAuth } from "../../hooks/useAuth";
+
+
+// Chat layout component
+export default function ChatHome({ aiLoad, messages, onSend }) {
+
+ const { http } = useAuth();
+ const messagesEndRef = useRef(null);
+ const chatContainerRef = useRef(null);
+
+ const [autoScroll, setAutoScroll] = useState(true);
+ const [feedbackLike, setFeedbackLike] = useState([]);
+ const [feedbackDislike, setFeedbackDislike] = useState([]);
+
+ useEffect(() => {
+ if (autoScroll) {
+ scrollToBottom();
+ }
+ }, [messages]);
+
+ const scrollToBottom = () => {
+ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+ };
+
+ const handleScroll = () => {
+ const chatContainer = chatContainerRef.current;
+ if (chatContainer) {
+ const isUserNearBottom =
+ chatContainer.scrollHeight - chatContainer.scrollTop <=
+ chatContainer.clientHeight + 60;
+ setAutoScroll(isUserNearBottom);
+ }
+ };
+
+ const handleLikeFeedback = (index) => {
+ if (!feedbackLike.includes(index)) {
+ setFeedbackLike((prev) => [...prev, index]);
+ toast.success("Thank you for your feedback!");
+ } else {
+ setFeedbackLike((prev) => prev.filter((i) => i !== index));
+ }
+ }
+
+ const handleDislikeFeedback = async (index, comment, bot, user) => {
+ console.log("Feedback submitted:", index, comment, bot, user);
+ if (!feedbackDislike.includes(index)) {
+ try {
+ await http.post("/feedback/dislike", {
+ userMessage: user,
+ botResponse: bot,
+ comment: comment,
+ });
+ setFeedbackDislike((prev) => [...prev, index]);
+ toast.success("Feedback submitted successfully!");
+ } catch (error) {
+ console.error("Error submitting feedback:", error);
+ toast.error("Error submitting feedback. Please try again.");
+ }
+ } else {
+ setFeedbackDislike((prev) => prev.filter((i) => i !== index));
}
}
return (
-
-
+ {!isAuthLoading && isAuthenticated ? (
+ <>
+
-
*/}
-
-
- handleOpenHistory(e)}
- />
-
+
-
- {messages.length === 0 ? (
-
-
),
@@ -62,5 +73,6 @@ export default function ChatInput({ onSend }) {
}
ChatInput.propTypes = {
+ isLoading: PropTypes.bool,
onSend: PropTypes.func.isRequired,
};
diff --git a/client/src/pages/chat/ChatLayout.jsx b/client/src/pages/chat/ChatLayout.jsx
deleted file mode 100644
index 3e8218b..0000000
--- a/client/src/pages/chat/ChatLayout.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import PropTypes from "prop-types";
-import { useEffect, useRef, useState } from "react";
-import { ArrowDownward } from "@mui/icons-material";
-import { Container, IconButton } from "@mui/material";
-
-import ChatInput from "./ChatInput";
-import ChatMessage from "./ChatMessage";
-import TypingIndicator from "../../components/typing/TypingIndicator";
-
-
-// Chat layout component
-export default function ChatLayout({ aiLoad, messages, onSend }) {
-
- const messagesEndRef = useRef(null);
- const chatContainerRef = useRef(null);
- const [autoScroll, setAutoScroll] = useState(true);
-
- useEffect(() => {
- if (autoScroll) {
- scrollToBottom();
- }
- }, [messages]);
-
- const scrollToBottom = () => {
- messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
- };
-
- const handleScroll = () => {
- const chatContainer = chatContainerRef.current;
- if (chatContainer) {
- const isUserNearBottom =
- chatContainer.scrollHeight - chatContainer.scrollTop <=
- chatContainer.clientHeight + 50;
- setAutoScroll(isUserNearBottom);
- }
- };
-
- return (
-
+
- )
+ );
}
+
+ChatHome.propTypes = {
+ chatId: PropTypes.string,
+ messages: PropTypes.array.isRequired,
+ setMessages: PropTypes.func.isRequired,
+};
diff --git a/client/src/pages/chat/ChatInfoPop.jsx b/client/src/pages/chat/ChatInfoPop.jsx
new file mode 100644
index 0000000..51ba277
--- /dev/null
+++ b/client/src/pages/chat/ChatInfoPop.jsx
@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import {
+ Dialog, DialogContent, IconButton, Typography
+} from '@mui/material';
+import { Close } from '@mui/icons-material';
+
+
+// ChatInfo component
+export default function ChatInfoPop({ open, setOpen }) {
+
+ return (
+
+ );
+}
+
+ChatInfoPop.propTypes = {
+ open: PropTypes.bool.isRequired,
+ setOpen: PropTypes.func.isRequired,
+};
diff --git a/client/src/pages/chat/ChatInput.jsx b/client/src/pages/chat/ChatInput.jsx
index 8b03ad2..f183d45 100644
--- a/client/src/pages/chat/ChatInput.jsx
+++ b/client/src/pages/chat/ChatInput.jsx
@@ -1,14 +1,21 @@
import PropTypes from 'prop-types';
-import { useState } from "react";
-import { Send } from '@mui/icons-material';
+import { useState, useEffect, useRef } from "react";
import { TextField, InputAdornment, IconButton } from '@mui/material';
+import { ArrowUpward } from '@mui/icons-material';
// Chat input component
-export default function ChatInput({ onSend }) {
+export default function ChatInput({ onSend, isLoading }) {
+ const inputRef = useRef();
const [inputText, setInputText] = useState("");
+ useEffect(() => {
+ if (inputRef.current) {
+ inputRef.current.setAttribute('maxLength', '10000');
+ }
+ }, []);
+
const handleSend = () => {
if (inputText.trim()) {
onSend(inputText);
@@ -28,29 +35,33 @@ export default function ChatInput({ onSend }) {
autoFocus
multiline
minRows={3}
- maxRows={8}
+ maxRows={6}
value={inputText}
+ inputRef={inputRef}
onChange={(e) => setInputText(e.target.value)}
onKeyDown={handleKeyDown}
- placeholder="Whatβs your code Q?"
- className="welcome__textarea"
+ placeholder="Type your question here..."
+ className="chat__textarea"
+ error={inputText.length > 9999}
+ helperText={inputText.length > 9999 ? "Input too long, max 10000 length supported" : ""}
slotProps={{
input: {
- 'aria-label': 'Enter your coding question',
+ 'aria-label': 'chat input',
endAdornment: (
+
+ {messages.length === 0 ? (
+
+
+ No messages yet...
+ ) : ( + messages.map((msg, index) => ( +
+ {msg.user &&
+ handleLikeFeedback(index)}
+ isDisliked={feedbackDislike.includes(index)}
+ onDislike={(comment) =>
+ handleDislikeFeedback(index, comment, msg.bot, messages[index - 1].user)}
+ />
+ }
+
+ ))
+ )}
+
+ {aiLoad &&
+ {
+ scrollToBottom();
+ setAutoScroll(true);
+ }}
+ >
+
+
+ )}
+
+
+
+
+
-
- );
-}
-
-ChatLayout.propTypes = {
- chatId: PropTypes.string,
- messages: PropTypes.array.isRequired,
- setMessages: PropTypes.func.isRequired,
-};
diff --git a/client/src/pages/chat/ChatMainLayout.jsx b/client/src/pages/chat/ChatMainLayout.jsx
new file mode 100644
index 0000000..14808d5
--- /dev/null
+++ b/client/src/pages/chat/ChatMainLayout.jsx
@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { Button, Tooltip } from '@mui/material';
+import { PsychologyAlt } from '@mui/icons-material';
+
+import "./Chat.css";
+import ChatHome from './ChatHome';
+import ChatWelcome from './ChatWelcome';
+import ChatInfoPop from './ChatInfoPop';
+import { handleChatLLM } from './handleChat';
+import { useAuth } from '../../hooks/useAuth';
+
+
+// ChatMainLayout component
+export default function ChatMainLayout() {
+
+ const { baseURL } = useAuth();
+
+ const [open, setOpen] = useState(false);
+ const [aiLoad, setAiLoad] = useState(false);
+ const [messages, setMessages] = useState([]);
+
+ const handleChat = async (text) => {
+ try {
+ setAiLoad(true);
+ await handleChatLLM({
+ query: text,
+ baseURL,
+ setMessages,
+ setAiLoad,
+ })
+ } catch (error) {
+ console.error("Error in handleChat:", error);
+ } finally {
+ setAiLoad(false);
+ }
+ }
+
+ return (
+
-
- {messages.length === 0 ? (
-
-
- No messages yet...
- ) : ( - messages.map((msg, index) => ( -
- {msg.user &&
- ))
- )}
-
- {aiLoad &&
- {
- scrollToBottom();
- setAutoScroll(true);
- }}
- >
-
-
- )}
-
-
-
-
-
-
+
+
+ )
+}
diff --git a/client/src/pages/chat/ChatMessage.jsx b/client/src/pages/chat/ChatMessageBot.jsx
similarity index 76%
rename from client/src/pages/chat/ChatMessage.jsx
rename to client/src/pages/chat/ChatMessageBot.jsx
index d6ccc47..0a57f6e 100644
--- a/client/src/pages/chat/ChatMessage.jsx
+++ b/client/src/pages/chat/ChatMessageBot.jsx
@@ -1,14 +1,22 @@
+import PropTypes from "prop-types";
import rehypeRaw from "rehype-raw";
import ReactMarkdown from "react-markdown";
-import { Highlight, themes } from "prism-react-renderer"; // change theme below
import { useState } from "react";
import { toast } from "react-toastify";
import { IconButton } from "@mui/material";
-import { ContentCopy } from "@mui/icons-material";
+import { Highlight, themes } from "prism-react-renderer";
+import { ContentCopy, ThumbUp, ThumbDown } from "@mui/icons-material";
-// Chat message component
-const ChatMessage = ({ msg }) => {
+import ChatFeedback from "./ChatFeedback";
+
+
+// ChatMessageBot component
+const ChatMessageBot = ({ msg, isLiked, isDisliked, onLike, onDislike }) => {
+
+ const [open, setOpen] = useState(false);
const [copied, setCopied] = useState(false);
+ const messageText = msg.bot || msg.user || "No message content";
+ const sender = msg.bot ? "bot" : msg.user ? "user" : "unknown";
const handleCopy = (code) => {
navigator.clipboard.writeText(code).then(() => {
@@ -21,8 +29,10 @@ const ChatMessage = ({ msg }) => {
});
};
- const messageText = msg.bot || msg.user || "No message content";
- const sender = msg.bot ? "bot" : msg.user ? "user" : "unknown";
+ const handleDislikeFeedback = (comment) => {
+ onDislike(comment);
+ setOpen(false);
+ }
return (
+
+
+ window.location.reload()}>
+
+
+
+ GenAIBot
+
+ {messages.length === 0 ? (
+
+
+
+
+ }
+ onClick={() => setOpen(!open)}
+ >
+ Info
+
+
+ {open &&
+
+
@@ -42,7 +52,7 @@ const ChatMessage = ({ msg }) => {
const match = /language-(\w+)/.exec(className || "");
if (!inline && match) {
return (
-
+
{
padding: "12px",
fontSize: "13px",
borderRadius: "5px",
- background: "#FCFCFC",
- color: "#333",
- overflowX: "auto",
- whiteSpace: "pre-wrap",
- wordBreak: "break-word",
- border: "1px solid #D1D4DA",
+ background: "#121314",
}}
>
{tokens.map((line, i) => {
@@ -81,6 +86,7 @@ const ChatMessage = ({ msg }) => {
)}
+
handleCopy(codeContent)}
@@ -89,9 +95,9 @@ const ChatMessage = ({ msg }) => {
position: "absolute",
top: 8,
right: 8,
- color: "#333",
- backgroundColor: "rgba(255, 255, 255, 0.6)",
- "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.9)" },
+ color: "white",
+ backgroundColor: "rgba(0, 0, 0, 0.6)",
+ "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.8)" },
opacity: copied ? 1 : 0.7,
transition: "opacity 0.3s",
}}
@@ -109,8 +115,36 @@ const ChatMessage = ({ msg }) => {
},
}}
/>
+ {sender === "bot" && (
+
);
};
-export default ChatMessage;
+ChatMessageBot.propTypes = {
+ msg: PropTypes.shape({
+ bot: PropTypes.string,
+ user: PropTypes.string,
+ }).isRequired,
+ isLiked: PropTypes.bool,
+ isDisliked: PropTypes.bool,
+ onLike: PropTypes.func.isRequired,
+ onDislike: PropTypes.func.isRequired,
+};
+ChatMessageBot.defaultProps = {
+ isLiked: false,
+ isDisliked: false,
+};
+
+export default ChatMessageBot;
diff --git a/client/src/pages/chat/ChatMessageUser.jsx b/client/src/pages/chat/ChatMessageUser.jsx
new file mode 100644
index 0000000..8925bae
--- /dev/null
+++ b/client/src/pages/chat/ChatMessageUser.jsx
@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+
+// ChatMessageUser Component
+const ChatMessageUser = ({ msg }) => {
+ return (
+
+
+
+ isDisliked ? onDislike() : setOpen(true)}>
+
+
+ )}
+ {open &&
+
+ )
+}
+
+ChatMessageUser.propTypes = {
+ msg: PropTypes.shape({
+ user: PropTypes.string,
+ }).isRequired,
+};
+
+export default ChatMessageUser;
diff --git a/client/src/pages/chat/ChatWelcome.jsx b/client/src/pages/chat/ChatWelcome.jsx
index 0a18fd2..c9300a3 100644
--- a/client/src/pages/chat/ChatWelcome.jsx
+++ b/client/src/pages/chat/ChatWelcome.jsx
@@ -3,14 +3,12 @@ import { Typography } from '@mui/material';
import { useEffect, useState } from 'react';
import ChatInput from './ChatInput';
-import { useAuth } from '../../hooks/useAuth';
import TypewriterEffect from '../../components/typing/TypewriterEffect';
// ChatWelcome component
export default function ChatWelcome({ onSend }) {
- const { userData } = useAuth();
const [greeting, setGreeting] = useState("Good Morning");
useEffect(() => {
@@ -23,10 +21,11 @@ export default function ChatWelcome({ onSend }) {
}, []);
return (
-
+ {msg?.user}
+
+
+
- {greeting}, {userData?.name.split(' ')[0]} π
+ Hello! {greeting} π
+
How can I assist you today?
@@ -36,15 +35,20 @@ export default function ChatWelcome({ onSend }) {
+
)
}
+
+ChatWelcome.propTypes = {
+ onSend: PropTypes.func.isRequired,
+};
diff --git a/client/src/pages/feedback/Feedback.jsx b/client/src/pages/feedback/Feedback.jsx
new file mode 100644
index 0000000..fd7bb9c
--- /dev/null
+++ b/client/src/pages/feedback/Feedback.jsx
@@ -0,0 +1,83 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useState, useEffect } from 'react';
+import {
+ Container, Grid, Paper, Typography, Card,
+ Table, TableBody, TableCell, TableContainer, TableHead, TableRow
+} from '@mui/material';
+
+import { useAuth } from '../../hooks/useAuth';
+import { useLoading } from '../../hooks/useLoading';
+
+
+
+export default function Feedback() {
+
+ const { http } = useAuth();
+ const { setLoading } = useLoading();
+
+ const [feedback, setFeedback] = useState([]);
+
+ useEffect(() => {
+ fetchData();
+ }, []);
+
+
+ const fetchData = async () => {
+ try {
+ setLoading(true);
+ const response = await http.get('/feedback');
+ setFeedback(response.data);
+ } catch (error) {
+ console.error("Error fetching sources:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+
+
+ return (
+
+
+
+
+ π Negative Feedback's Received
+
+
+
+ {feedback?.length === 0 ? (
+
+ No feedback available.
+
+ ) : (
+
+
+
+
+ )}
+
+
+ )
+}
diff --git a/client/src/pages/files/FilesMain.jsx b/client/src/pages/files/FilesMain.jsx
index c26fde2..1a89315 100644
--- a/client/src/pages/files/FilesMain.jsx
+++ b/client/src/pages/files/FilesMain.jsx
@@ -71,6 +71,7 @@ export default function FileMain() {
const handleOpenSource = async (source) => {
try {
+ setLoading(true);
const response = await http.get(`/source/file/${source?.file_id}`);
setSourceData({
fileId: source?.file_id,
@@ -80,6 +81,8 @@ export default function FileMain() {
setOpen(true);
} catch (error) {
console.error("Error fetching chunks:", error);
+ } finally {
+ setLoading(false);
}
}
diff --git a/client/src/pages/login/Account.jsx b/client/src/pages/login/Account.jsx
new file mode 100644
index 0000000..1bed9cd
--- /dev/null
+++ b/client/src/pages/login/Account.jsx
@@ -0,0 +1,21 @@
+import { Typography } from '@mui/material'
+import React from 'react'
+
+export default function Account() {
+ return (
+
+
+ {/* Left Section - Only on md+ screens */}
+ {isMdUp && (
+
+
+ GENAI-BOT
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Right Section - Always visible */}
+
+
+
+
+
+ Sign in
+
+
+
+ setShowPass(!showPass)}
+ >
+ {showPass ?
+
+ ),
+ },
+ }}
+ />
+ }
+ sx={{
+ mt: 4,
+ background: "linear-gradient(to right, #4a90e2, #a163e6)",
+ color: "#fff",
+ '&:hover': {
+ background: "linear-gradient(to right, #3a78c2, #884fd1)",
+ },
+ fontWeight: 600
+ }}
+ >
+ Sign In
+
+
+
+
+ );
+}
diff --git a/client/src/pages/welcome/Welcome.css b/client/src/pages/welcome/Welcome.css
deleted file mode 100644
index 004aace..0000000
--- a/client/src/pages/welcome/Welcome.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.welcome__buttons {
- display: flex;
- justify-content: center;
- gap: 1rem;
- margin-top: 1rem;
- flex-wrap: wrap;
-}
\ No newline at end of file
diff --git a/client/src/pages/welcome/Welcome.jsx b/client/src/pages/welcome/Welcome.jsx
deleted file mode 100644
index 419f02f..0000000
--- a/client/src/pages/welcome/Welcome.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useEffect, useState } from "react";
-import Box from "@mui/material/Box";
-import { useNavigate } from "react-router-dom";
-import { Grid, Typography, Button } from "@mui/material";
-import { Login as LoginIcon, AppRegistration } from "@mui/icons-material";
-import { DotLottieReact } from "@lottiefiles/dotlottie-react";
-
-import './Welcome.css';
-import Login from "../../components/auth/Login";
-import Register from "../../components/auth/Register";
-import TypewriterEffect from "../../components/typing/TypewriterEffect";
-import { useAuth } from "../../hooks/useAuth";
-
-
-// Welcome component
-export default function Welcome() {
-
- const navigate = useNavigate();
- const { isAuthenticated } = useAuth();
- const [openReg, setOpenReg] = useState(false);
- const [openLogin, setOpenLogin] = useState(false);
-
- useEffect(() => {
- if (isAuthenticated) {
- navigate("/chat");
- }
- }, [isAuthenticated, navigate]);
-
-
- return (
-
-
- {openReg &&
-
- GENAI-BOT
-
-
-
-
-
-
-
- {/* Right Section */}
-
-
-
- Enter the Knowledge Zone
-
-
- {/*
- Sign in or register to upload your project and unlock smart code assistance.
- */}
-
-
-
-
- );
-}
diff --git a/src/api/feedback.py b/src/api/feedback.py
new file mode 100644
index 0000000..3795d53
--- /dev/null
+++ b/src/api/feedback.py
@@ -0,0 +1,63 @@
+import uuid
+import json
+from pathlib import Path
+from datetime import datetime
+from fastapi import APIRouter, Request, HTTPException, Depends
+
+# local imports
+from src.services.auth_service import get_current_user
+
+
+feedback_router = APIRouter()
+
+
+# Path to the feedback data file
+FEEDBACK_FILE = Path("chroma_db/feedback_data.jsonl")
+
+
+@feedback_router.post("/dislike")
+async def chat(request: Request, user=Depends(get_current_user)):
+ try:
+ body = await request.json()
+ email = user['email']
+ comment = body.get('comment')
+ user_message = body.get('userMessage')
+ bot_response = body.get('botResponse')
+
+ if not comment or not user_message or not bot_response:
+ return HTTPException(status_code=400, detail="Invalid feedback data")
+
+ feedback = {
+ "id": str(uuid.uuid4()),
+ "email": email,
+ "comment": comment,
+ "userMessage": user_message,
+ "botResponse": bot_response,
+ "createdAt": datetime.now().isoformat()
+ }
+
+ with FEEDBACK_FILE.open("a", encoding="utf-8") as f:
+ f.write(json.dumps(feedback) + "\n")
+
+ except Exception as e:
+ print(f"Error processing feedback: {e}")
+ raise HTTPException(status_code=500, detail="Internal Server Error")
+
+ return {"message": "Feedback received successfully"}
+
+
+
+@feedback_router.get("/")
+async def get_feedback(user=Depends(get_current_user)):
+ try:
+ feedback_list = []
+ with FEEDBACK_FILE.open("r", encoding="utf-8") as f:
+ for line in f:
+ feedback = json.loads(line)
+ feedback_list.append(feedback)
+
+ return feedback_list
+
+ except Exception as e:
+ print(f"Error retrieving feedback: {e}")
+ raise HTTPException(status_code=500, detail="Internal Server Error")
diff --git a/src/router.py b/src/router.py
index 4c18d50..5c0a2b6 100644
--- a/src/router.py
+++ b/src/router.py
@@ -4,6 +4,7 @@
from src.api.auth import auth_router
from src.api.chat import chat_router
from src.api.chunk import chunk_router
+from src.api.feedback import feedback_router
# router for the main API
@@ -18,3 +19,6 @@
# Chat routes
router.include_router(chat_router, prefix="/chat", tags=["chat"])
+
+# Feedback routes
+router.include_router(feedback_router, prefix="/feedback", tags=["feedback"])
+
+ This page is under construction, please check back later.
+
+
+ We are working hard to bring you the best experience possible.
+
+
+ Thank you for your patience!
+
+
+ ~ Aman Singh
+
+
+ )
+}
diff --git a/client/src/pages/login/Login.jsx b/client/src/pages/login/Login.jsx
new file mode 100644
index 0000000..9c7c07e
--- /dev/null
+++ b/client/src/pages/login/Login.jsx
@@ -0,0 +1,189 @@
+import Box from "@mui/material/Box";
+import { toast } from "react-toastify";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import {
+ Typography, Button, TextField, IconButton, Grid, InputAdornment, Avatar,
+ useTheme, useMediaQuery, Paper
+} from '@mui/material';
+import {
+ Login as LoginIcon, LockOutlined, Visibility, VisibilityOff
+} from "@mui/icons-material";
+
+import { useAuth } from "../../hooks/useAuth";
+import { useLoading } from "../../hooks/useLoading";
+import TypewriterEffect from "../../components/typing/TypewriterEffect";
+
+
+// Login Component
+export default function Login() {
+ const navigate = useNavigate();
+ const { setLoading } = useLoading();
+ const { isAuthenticated, http, refreshAuth } = useAuth();
+ const [showPass, setShowPass] = useState(false);
+
+ const theme = useTheme();
+ const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
+
+ useEffect(() => {
+ if (isAuthenticated) {
+ navigate("/admin/source");
+ }
+ }, [isAuthenticated, navigate]);
+
+ const handleLogin = async (e) => {
+ e.preventDefault();
+ try {
+ setLoading(true);
+ await http.post('/auth/login', {
+ email: e?.target?.email?.value,
+ password: e?.target?.password?.value,
+ });
+ await refreshAuth();
+ toast.success('Login successful!');
+ } catch (error) {
+ console.error(error);
+ if (error?.response?.status === 401) {
+ toast.error('Invalid email or password');
+ } else {
+ toast.error(error?.response?.data?.detail[0]?.msg ?? 'An error occurred');
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
-
-
- }
- onClick={() => setOpenLogin(true)}
- sx={{
- background: "linear-gradient(to right, #4a90e2, #a163e6)",
- color: "#fff",
- '&:hover': {
- background: "linear-gradient(to right, #3a78c2, #884fd1)",
- },
- }}
- >
- Login
-
- }
- onClick={() => setOpenReg(true)}
- sx={{
- borderColor: "#4a90e2",
- color: "#4a90e2",
- '&:hover': {
- backgroundColor: "#e3f2fd",
- borderColor: "#3a78c2",
- },
- }}
- >
- Register
-
-
-