From 546f4c4265304202ead518fabfefb8ca59f92b92 Mon Sep 17 00:00:00 2001 From: susie-laptop Date: Tue, 4 Mar 2025 14:46:45 -0500 Subject: [PATCH] [dev]chat pages --- src/components/SvgIcon.jsx | 40 +- src/icons/icons.js | 6 +- src/layouts/HeaderWithNav.jsx | 20 +- src/pages/Chat/Chat.jsx | 67 +++ src/pages/Chat/ChatSidebar.jsx | 94 ++++ src/pages/Chat/ChatWindow.jsx | 161 ++++++ src/pages/Chat/NewChat.jsx | 102 ++++ src/pages/KnowledgeBase/Detail/DatasetTab.jsx | 331 +++++++++++-- .../KnowledgeBase/Detail/SettingsTab.jsx | 458 ++++++++++++++++-- src/pages/KnowledgeBase/KnowledgeBase.jsx | 2 +- src/pages/KnowledgeBase/KnowledgeCard.jsx | 4 + src/router/router.jsx | 25 + 12 files changed, 1223 insertions(+), 87 deletions(-) create mode 100644 src/pages/Chat/Chat.jsx create mode 100644 src/pages/Chat/ChatSidebar.jsx create mode 100644 src/pages/Chat/ChatWindow.jsx create mode 100644 src/pages/Chat/NewChat.jsx diff --git a/src/components/SvgIcon.jsx b/src/components/SvgIcon.jsx index 4a71d99..61d2b0c 100644 --- a/src/components/SvgIcon.jsx +++ b/src/components/SvgIcon.jsx @@ -1,12 +1,46 @@ import React from 'react'; import { icons } from '../icons/icons'; -export default function SvgIcon({ className }) { +export default function SvgIcon({ className, width, height, color, style }) { + // Create a new SVG string with custom attributes if provided + const customizeSvg = (svgString) => { + if (!svgString) return ''; + + // If no customization needed, return the original SVG + if (!width && !height && !color) return svgString; + + // Parse the SVG to modify attributes + let modifiedSvg = svgString; + + // Replace width if provided + if (width) { + modifiedSvg = modifiedSvg.replace(/width=['"]([^'"]*)['"]/g, `width="${width}"`); + } + + // Replace height if provided + if (height) { + modifiedSvg = modifiedSvg.replace(/height=['"]([^'"]*)['"]/g, `height="${height}"`); + } + + // Replace fill color if provided + if (color) { + modifiedSvg = modifiedSvg.replace(/fill=['"]currentColor['"]/g, `fill="${color}"`); + } + + return modifiedSvg; + }; + return ( ); } diff --git a/src/icons/icons.js b/src/icons/icons.js index 0305393..a5424d5 100644 --- a/src/icons/icons.js +++ b/src/icons/icons.js @@ -94,9 +94,11 @@ export const icons = { p-id='21341' > `, - 'setting-fill': ``, - dataset: ``, + 'setting-fill': ``, + dataset: ``, calendar: ``, clipboard: ``, chat: ``, + 'arrowup-upload': ``, + send: ``, }; diff --git a/src/layouts/HeaderWithNav.jsx b/src/layouts/HeaderWithNav.jsx index 8a290ba..3ee1685 100644 --- a/src/layouts/HeaderWithNav.jsx +++ b/src/layouts/HeaderWithNav.jsx @@ -1,11 +1,12 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useNavigate, useLocation } from 'react-router-dom'; import { logoutThunk } from '../store/auth/auth.thunk'; export default function HeaderWithNav() { const dispatch = useDispatch(); const navigate = useNavigate(); + const location = useLocation(); const { user } = useSelector((state) => state.auth); const handleLogout = async () => { @@ -16,9 +17,14 @@ export default function HeaderWithNav() { } catch (error) {} }; + // Check if the current path starts with the given path + const isActive = (path) => { + return location.pathname.startsWith(path); + }; + return ( -
-