Settings User Interface Changes

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"
   }
+
 }

webui/src/components/Settings.js → 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 (
     <Modal
       open={isOpen}
@@ -44,4 +44,4 @@ const Settings = ({ isOpen, onClose, settings, onSettingsChange }) => {
   );
 };
 
-export default Settings;
+export default DashboardSettings;

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}) => (
   <CarbonHeader aria-label="RAG Modulo">
     <HeaderGlobalAction aria-label="Menu" onClick={onMenuClick}>
       <Menu size={20} />
@@ -16,14 +16,11 @@ const Header = ({ onMenuClick, onSettingsClick }) => (
       RAG Modulo
     </HeaderName>
     <HeaderGlobalBar>
-      <HeaderGlobalAction aria-label="Settings" onClick={onSettingsClick}>
-        Settings
-      </HeaderGlobalAction>
       <HeaderGlobalAction aria-label="User Avatar">
         <UserAvatar />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
   </CarbonHeader>
 );
 
-export default Header;
+export default Header;

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 (
+    <Modal
+      open={isOpen}
+      onRequestClose={onClose}
+      modalHeading="Ingestion Settings"
+      primaryButtonText="Save"
+      secondaryButtonText="Cancel"
+    >
+      <Form>
+        <FormGroup legendText="Ingestion Configurations">
+          <NumberInput
+            id="chunking_strategy"
+            label="Chunking Strategy"
+            value={settings.chunking_strategy}
+            onChange={(e) => onSettingsChange('chunking_strategy', parseInt(e.imaginaryTarget.value))}
+          />
+          <NumberInput
+            id="chunk_overlap"
+            label="Chunk Overlap"
+            value={settings.chunk_overlap}
+            onChange={(e) => onSettingsChange('chunk_overlap', parseInt(e.imaginaryTarget.value))}
+          />
+          <NumberInput
+            id="chunk_size"
+            label="Chunk Size"
+            value={settings.chunk_size}
+            step={0.1}
+            min={0}
+            max={1}
+            onChange={(e) => onSettingsChange('chunk_size', parseFloat(e.imaginaryTarget.value))}
+          />
+          <Dropdown
+            id="database"
+            titleText="Select Database"
+            label="Database"
+            items={['Milvus', 'Elastic', 'Pinecone', 'Chroma']}
+            selectedItem={settings.database}
+            onChange={(e) => onSettingsChange('database', e.selectedItem)}
+          />
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+export default IngestionSettings;

webui/src/components/ResultsDisplay.js

@@ -46,4 +46,4 @@ const ResultsDisplay = ({ results }) => {
   );
 };
 
-export default ResultsDisplay;
+export default ResultsDisplay;

webui/src/components/SideNav.js

@@ -12,9 +12,6 @@ const UISideNav = ({ expanded, onNavigate }) => {
         <SideNavLink href="#" onClick={(e) => onNavigate(e, 'create')}>
           Create New Collection
         </SideNavLink>
-        <SideNavLink href="#" onClick={(e) => onNavigate(e, 'settings')}>
-          Settings
-        </SideNavLink>
       </SideNavItems>
     </SideNav>
   );

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;
-  }
+  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;
+}