diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..4d73c925 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "rag_modulo", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} diff --git a/webui/package.json b/webui/package.json index 488e7036..02ec9eee 100644 --- a/webui/package.json +++ b/webui/package.json @@ -45,6 +45,8 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "react-scripts": "5.0.1", "sass": "^1.77.6", - "sass-resources-loader": "^2.2.5" + "sass-resources-loader": "^2.2.5", + "@babel/plugin-proposal-private-property-in-object": "^7.14.5" } + } diff --git a/webui/src/components/Settings.js b/webui/src/components/DashboardSettings.js similarity index 90% rename from webui/src/components/Settings.js rename to webui/src/components/DashboardSettings.js index 69f74c00..ca1747e8 100644 --- a/webui/src/components/Settings.js +++ b/webui/src/components/DashboardSettings.js @@ -6,7 +6,7 @@ import { FormGroup } from '@carbon/react'; -const Settings = ({ isOpen, onClose, settings, onSettingsChange }) => { +const DashboardSettings = ({ isOpen, onClose, settings, onSettingsChange }) => { return ( { ); }; -export default Settings; +export default DashboardSettings; diff --git a/webui/src/components/Header.js b/webui/src/components/Header.js index db73c7da..341e7095 100644 --- a/webui/src/components/Header.js +++ b/webui/src/components/Header.js @@ -7,7 +7,7 @@ import { } from '@carbon/react' import { Menu, UserAvatar } from '@carbon/icons-react'; -const Header = ({ onMenuClick, onSettingsClick }) => ( +const Header = ({ onMenuClick}) => ( @@ -16,9 +16,6 @@ const Header = ({ onMenuClick, onSettingsClick }) => ( RAG Modulo - - Settings - @@ -26,4 +23,4 @@ const Header = ({ onMenuClick, onSettingsClick }) => ( ); -export default Header; \ No newline at end of file +export default Header; diff --git a/webui/src/components/IngestionSettings.js b/webui/src/components/IngestionSettings.js new file mode 100644 index 00000000..cefc66af --- /dev/null +++ b/webui/src/components/IngestionSettings.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { + Modal, + NumberInput, + Dropdown, + Form, + FormGroup +} from '@carbon/react'; + +const IngestionSettings = ({ isOpen, onClose, settings, onSettingsChange }) => { + return ( + +
+ + onSettingsChange('chunking_strategy', parseInt(e.imaginaryTarget.value))} + /> + onSettingsChange('chunk_overlap', parseInt(e.imaginaryTarget.value))} + /> + onSettingsChange('chunk_size', parseFloat(e.imaginaryTarget.value))} + /> + onSettingsChange('database', e.selectedItem)} + /> + +
+ + ); +}; + +export default IngestionSettings; diff --git a/webui/src/components/ResultsDisplay.js b/webui/src/components/ResultsDisplay.js index c2229b8c..7f5b162c 100644 --- a/webui/src/components/ResultsDisplay.js +++ b/webui/src/components/ResultsDisplay.js @@ -46,4 +46,4 @@ const ResultsDisplay = ({ results }) => { ); }; -export default ResultsDisplay; +export default ResultsDisplay; \ No newline at end of file diff --git a/webui/src/components/SideNav.js b/webui/src/components/SideNav.js index 51025648..d4e50cc7 100644 --- a/webui/src/components/SideNav.js +++ b/webui/src/components/SideNav.js @@ -12,9 +12,6 @@ const UISideNav = ({ expanded, onNavigate }) => { onNavigate(e, 'create')}> Create New Collection - onNavigate(e, 'settings')}> - Settings - ); diff --git a/webui/src/pages/HomePage.css b/webui/src/pages/HomePage.css index 584cf832..6b28abee 100644 --- a/webui/src/pages/HomePage.css +++ b/webui/src/pages/HomePage.css @@ -1,118 +1,145 @@ .homepage { - display: flex; - flex-direction: column; - height: 100vh; - } - - .main-content { - flex: 1; - padding: 2rem; - background-color: #f4f4f4; - margin-left: 0; - transition: margin-left 0.3s; - } - - .bx--side-nav--expanded + .main-content { - margin-left: 16rem; - } - - .top-actions { - display: flex; - justify-content: flex-end; - margin-bottom: 2rem; - } - - .top-actions .bx--btn { - margin-left: 1rem; - } - - h1 { - font-size: 2.5rem; - margin-bottom: 0.5rem; - } - - p { - font-size: 1rem; - margin-bottom: 2rem; - } - - .example-questions { - display: flex; - gap: 1rem; - margin-bottom: 2rem; - } - - .example-questions .bx--tile { - flex: 1; - background-color: #e0e0e0; - cursor: pointer; - } - - .search-container { - display: flex; - align-items: center; - } - - .search-container .bx--text-input-wrapper { - flex-grow: 1; - margin-right: 1rem; - } - - .bx--header { - background-color: #000000; - } - - .bx--side-nav { - background-color: #000000; - } - - .bx--side-nav__link { - color: #ffffff; - } - - .bx--side-nav__menu { - background-color: #000000; - } - - .bx--side-nav__menu-item { - color: #ffffff; - } - .bx--modal-container { - background-color: #f4f4f4; - } - - .bx--form-item { - margin-bottom: 1rem; - } - .example-questions { - display: flex; - gap: 1rem; - margin-bottom: 2rem; - } - - .example-questions .bx--tile { - flex: 1; - background-color: #e0e0e0; - cursor: pointer; - transition: background-color 0.3s; - } - - .example-questions .bx--tile:hover { - background-color: #d0d0d0; - } - - .collections-grid { - display: flex; - flex-wrap: wrap; - gap: 1rem; - margin-top: 2rem; - } - - .collection-tile { - background-color: #f4f4f4; - padding: 1rem; - border-radius: 4px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - width: calc(33.333% - 1rem); - box-sizing: border-box; - } \ No newline at end of file + display: flex; + flex-direction: column; + height: 100vh; +} + +.main-content { + flex: 1; + padding: 2rem; + background-color: #f4f4f4; + margin-left: 0; + transition: margin-left 0.3s; +} + +.bx--side-nav--expanded + .main-content { + margin-left: 16rem; +} + +.top-actions { + display: flex; + justify-content: flex-end; + margin-bottom: 2rem; +} + +.top-actions .bx--btn { + margin-left: 1rem; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +p { + font-size: 1rem; + margin-bottom: 2rem; +} + +.example-questions { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} + +.example-questions .bx--tile { + flex: 1; + background-color: #ffffff; + cursor: pointer; +} + +.search-container { + display: flex; + align-items: center; +} + +.search-container .bx--text-input-wrapper { + flex-grow: 1; + margin-right: 1rem; +} + +.query-input .cds--text-input__field-outer-wrapper .cds--text-input__field-wrapper .cds--text-input { + background-color: #ffffff !important; + border: 1px solid #000000 !important; + color: #000000 !important; + padding: 0.5rem !important; + border-radius: 4px !important; + box-sizing: border-box !important; + outline: none !important; +} + +.query-input .cds--text-input__field-outer-wrapper .cds--text-input__field-wrapper .cds--text-input:focus { + background-color: #ffffff !important; + border: 1px solid #000000 !important; + color: #000000 !important; + padding: 0.5rem !important; + border-radius: 4px !important; + box-sizing: border-box !important; + outline: none !important; +} + +.query-input .cds--text-input__label-wrapper .cds--label { + font-weight: bold !important; + color: #000000 !important; +} + +.bx--header { + background-color: #000000; +} + +.bx--side-nav { + background-color: #000000; +} + +.bx--side-nav__link { + color: #ffffff; +} + +.bx--side-nav__menu { + background-color: #000000; +} + +.bx--side-nav__menu-item { + color: #ffffff; +} + +.bx--modal-container { + background-color: #ffffff; +} + +.bx--form-item { + margin-bottom: 1rem; +} + +.example-questions { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} + +.example-questions .bx--tile { + flex: 1; + background-color: #ffffff; + cursor: pointer; + transition: background-color 0.3s; +} + +.example-questions .bx--tile:hover { + background-color: #ffffff; +} + +.collections-grid { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 2rem; +} + +.collection-tile { + background-color: #f4f4f4; + padding: 1rem; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: calc(33.333% - 1rem); + box-sizing: border-box; +} \ No newline at end of file diff --git a/webui/src/pages/HomePage.js b/webui/src/pages/HomePage.js index ad4e4042..ff147505 100644 --- a/webui/src/pages/HomePage.js +++ b/webui/src/pages/HomePage.js @@ -1,4 +1,4 @@ -// pages/HomePage.js +// Importing necessary libraries and components import React, { useState } from 'react'; import { Content, @@ -10,25 +10,37 @@ import Header from '../components/Header.js'; import UISideNav from '../components/SideNav.js'; import QueryInput from '../components/QueryInput'; import ResultsDisplay from '../components/ResultsDisplay'; -import Settings from '../components/Settings'; +import DashboardSettings from '../components/DashboardSettings'; +import IngestionSettings from '../components/IngestionSettings'; import CollectionForm from '../components/CollectionForm'; import './HomePage.css'; +// HomePage component definition const HomePage = () => { - const [query, setQuery] = useState(''); - const [results, setResults] = useState([]); - const [isSideNavExpanded, setIsSideNavExpanded] = useState(false); - const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); - const [hasSearched, setHasSearched] = useState(false); - const [currentPage, setCurrentPage] = useState('dashboard'); - const [llmSettings, setLlmSettings] = useState({ + // State variables for managing component state + const [query, setQuery] = useState(''); // Search query + const [results, setResults] = useState([]); // Search results + const [isSideNavExpanded, setIsSideNavExpanded] = useState(false); // Sidebar toggle state + const [isDashboardSettingsModalOpen, setIsDashboardSettingsModalOpen] = useState(false); // Dashboard settings modal state + const [isIngestionSettingsModalOpen, setIsIngestionSettingsModalOpen] = useState(false); // Ingestion settings modal state + const [hasSearched, setHasSearched] = useState(false); // Search state + const [currentPage, setCurrentPage] = useState('dashboard'); // Current page state + const [llmSettings, setLlmSettings] = useState({ // Settings for language model topK: 5, numTokens: 100, temperature: 0.7, }); + const [ingestionSettings, setIngestionSettings] = useState({ // Settings for ingestion + chunking_strategy: 5, + chunk_overlap: 10, + chunk_size: 0.5, + database: 'Milvus', + }); + // Function to toggle sidebar visibility const toggleSideNav = () => setIsSideNavExpanded(!isSideNavExpanded); + // Function to handle search const handleSearch = async () => { console.log('Searching:', query); setResults([ @@ -38,36 +50,47 @@ const HomePage = () => { setHasSearched(true); }; + // Function to clear search results const clearSearch = () => { setQuery(''); setResults([]); setHasSearched(false); }; + // Function to handle settings change const handleSettingsChange = (setting, value) => { setLlmSettings(prev => ({ ...prev, [setting]: value })); }; + // Function to handle ingestion settings change + const handleIngestionSettingsChange = (setting, value) => { + setIngestionSettings(prev => ({ ...prev, [setting]: value })); + }; + + // Function to handle example question click const handleExampleClick = (question) => { setQuery(question); handleSearch(); }; + // Function to handle page navigation const handleNavigation = (e, page) => { e.preventDefault(); console.log(`Navigating to: ${page}`); setCurrentPage(page); - if (page === 'settings') { - setIsSettingsModalOpen(true); - } + // Close both modals when navigating to a new page + setIsDashboardSettingsModalOpen(false); + setIsIngestionSettingsModalOpen(false); }; + // Example questions for quick search const exampleQuestions = [ "What is included in my Northwind Health Plus plan that is not in standard?", "What happens in a performance review?", "What does a Product Manager do?" ]; + // Function to handle form submission const handleFormSubmit = (data) => { console.log('Form data submitted:', data); // Add your form submission logic here @@ -75,24 +98,35 @@ const HomePage = () => { return (
+ {/* Header component with menu click handler */}
setIsSettingsModalOpen(true)} + onMenuClick={toggleSideNav} // Only this line remains, removed onSettingsClick prop /> + {/* Sidebar navigation component */}
+ {/* Button to clear search */} -
+ {/* Conditional rendering based on current page */} {currentPage === 'dashboard' && ( <> + {/* Display example questions */}
{exampleQuestions.map((question, index) => ( { ))}
+ {/* Query input component */} + {/* Results display component if search has been conducted */} {hasSearched && } )} + {/* Conditional rendering for create page */} {currentPage === 'create' && ( )} + {/* Placeholder for report 1 content */} {currentPage === 'report1' &&
Report 1 Content
} + {/* Placeholder for report 2 content */} {currentPage === 'report2' &&
Report 2 Content
} - setIsSettingsModalOpen(false)} + {/* Dashboard settings modal component */} + setIsDashboardSettingsModalOpen(false)} settings={llmSettings} onSettingsChange={handleSettingsChange} /> + + {/* Ingestion settings modal component */} + setIsIngestionSettingsModalOpen(false)} + settings={ingestionSettings} + onSettingsChange={handleIngestionSettingsChange} + />
);