* Improve UI with style changes and add Settings button
- Improved the UI of the `Input` and `Message` components.
- Added a `Settings` button to the `NavLinks` component.
- Introduced a `Settings` component to handle user settings.
- Refactored the `Dialog` component for consistency.
* Revert not needed changes
* Updated style.css to only work for select
* feat: Remove Dark Mode component and add theme selection feature
This commit removes the Dark Mode component from the navigation bar and replaces it with a theme selection dropdown menu in the Settings dialog. The implementation of the theme selection feature includes a function that allows the user to set the theme based on the system, light, or dark mode.
* Add auto theme setting to Settings component.
This commit adds a new state variable to keep track of whether the auto theme is enabled or not. It also registers an event listener to update the theme based on system preference changes. The event listener is removed when the component is unmounted.
* Improve user experience by allowing customized themes
- Create `selectedOption` state to track user-selected theme
- Remove unused `isAutoTheme` state variable
* feat(Nav): Add SVG icon to settings gear
This commit adds an SVG icon to the settings gear in the Navigation component's Settings file. The new SVG icon replaces the previous GearIcon component.
* refactor(ui): Update overlay background color
This commit updates the background color of the overlay in the AlertDialog and Dialog components by changing the classes applied to the elements. The new color is a transition from `bg-black/50 backdrop-blur-sm` to `bg-gray-500/90 dark:bg-gray-800/90`. This change improves the readability of the dialog boxes.
* Refactor ThemeContext to include system theme and fix bug in Settings
The ThemeContext now includes a "system" theme and ClearConvos no longer relies on the "selected option" state to update the theme. The bug is now fixed if the system theme changes.
* Refactor DialogTemplate styles and color scheme
Adjusted the color scheme of the DialogTemplate component to dark mode, updated the background color to gray-900 and removed unnecessary classes.
* Refactor: Change button logic to require confirmation before clearing convos
This commit refactors the code by adding a confirmation dialog to prompt for a user's confirmation before clearing all conversations in the Settings.jsx file. The change ensures the user is aware of the irreversible action before initiating the clearConvos function. Additionally, the commit updates the clear chat button's class name and changes the button's onClick logic to call the confirmClearConvos function instead of directly invoking the clearConvos method.
* Refactor component name to reflect functionality change.
- Changed component name from ClearConvos to Settings to support potential future use cases.
* Refactor conversation clearing functionality in `Settings.jsx`
This commit optimizes the conversation clearing functionality in the `Settings.jsx` component by removing the `confirmClearConvos` function and directly calling the `clearConvos` function on confirmation. This change will simplify the code and improve the user experience.
* Refactor Input component UI styles
Simplify Input component styles by simplifying the gradient background, removing border color styles, and updating button styles.
* feat: Add e2e test for Settings modal
This commit adds an e2e test to verify whether the Settings modal is displayed on the landing page. It uses a headless browser to navigate to the page and interacts with it to verify if the dialog and its components are visible.
* test: Add Navigation and Settings tests
Add Navigation and Settings tests to verify that the navigation bar and Settings button are visible and that the Settings modal displays the expected content. The settings modal verification includes checking whether the modal is visible, if the modal title, tab list, clear conversation button and theme are present, and if the theme option can be selected to change the mode.
* Quick fix
* feat(navbar): Add confirmation before clearing conversations
Adding confirmation modal to prevent accidentally clearing conversations. Before, once you clicked on the "Clear" button it immediately clears all conversations. With this change, if you click on "Clear" the first time, it will change the text to "Confirm Clear" and if you click it again, it will clear all conversations.
* Add click functionality to the navigation bar and improve UI design
The code introduced click functionality to the nav bar and improved the user interface. It also used the new theme select feature to change the theme to dark.
* test: Add test for dark mode theme change
Refactor the test for Navigation suite to check for the 'dark' class in the HTML element when the 'dark' theme is selected in the modal. This ensures that the dark mode theme change works correctly, and improves test coverage.
* Improve navigation test clarity
This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices.
* Improve navigation test clarity
This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices.
* Hotfix
* Removed repetation
* Refactor: Change text-gray-400 to text-white/50 to make tailwind more cleaner
* style: Update CSS classes to improve the conversation UI
- Update Conversation component to improve UX
- Changed styling for group hover effect using shades of gray
- Improved color contrast of the Message component for easy readability
- Replaced class names in buildTree.js with a new class name
- Added a new color theme (gray-1000) in tailwind.config to replace an old background color.
* Refactor EndpointItem, EndpointItems, and NewConversationMenu for better user experience
- The `EndpointItem` component now accepts an `isSelected` prop instead of `onSelect` to better reflect its usage in `EndpointItems` and `NewConversationMenu`.
- `EndpointItems` component now has a `selectedEndpoint` prop to highlight the selected item in the list.
- `NewConversationMenu` now has a gap between the endpoint options to improve user experience.
* Added error messages
* refactor: Improve endpoint menu highlighting and error handling
In the UI, when the user selects an endpoint, the active class is now properly set. In the error handling function, `isJson` is now a private function called by `getError`, which provides better parsing of error messages, and returns more succinct messages upon encountering specific errors. Finally, a new end-to-end test has been added to check if the active class is properly set on selecting an endpoint in the new conversation menu.
* test: Add Conversation and Change Path of Auth JSON
In the Landing spec, test the functionality to create conversations and check that the number of items has increased. In the Popup spec, change the path of the Auth JSON used by the context.
* Fixed logo issues
* Make everything not rounded
* Added time
---------
Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
* feat: Add clear button to search bar
This commit introduces a clear button to the SearchBar component using the X icon from Lucide-React. When the user enters a query in the input field, the clear button appears allowing them to easily remove the search term. The clear button is hidden when there is no search term entered.
* Refactor SearchBar component to improve user experience
Changed SearchBar's input field to add padding on the left side and an absolute positioned search icon. Also, added absolute positioned X icon on the right side when there is an input value, ensuring a better user experience.
* Refactor SearchBar component to show Clear Search icon dynamically
This commit makes changes to the SearchBar React component to render the Clear Search X icon only when the input field has a value. A showClearIcon state using useState hook is added and updated every time the input value changes. The useEffect hook is used to handle the case when the user clears the input value. This allows better UX by providing clear intent to the user that the icon is clickable and will clear the search query.
* Improve UX: Add styling to clear button & export button
This commit modifies the NavLinks component to improve user experience by removing a rounded styling to the "Clear conversations" and "Export conversations" buttons. Prior to this change, the buttons had a rounded styling.
* Refactor submit button styling for improved accessibility and readability.
Changed submit button styling for better accessibility and readability, including adjustments to padding and hover effects. The new styles ensure that the button is easily clickable for all users, while also improving its visual appearance.
* hotfix
* Improve UI styling in Conversation component
Changed the background color and hover effect of the conversation link in Conversation component to make it more visually appealing. The previous background color was '#2A2B32' and now it's 'gray-800'. The 'px-4' class has also been changed to 'hover:pr-4' for better readability.
---------
Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
* build/refactor: move lint/prettier packages to project root, install husky, add pre-commit hook
* refactor: reformat files
* build: put full eslintrc back with all rules
