Integrates the chat UI with the conversation layer router.
Key changes:
- Added new environment variables (`CONVERSATION_LAYER_ROUTER_URL` for the API and `VITE_CONVERSATION_LAYER_ROUTER_URL` for the UI) to specify the router's URL. These have been configured in `docker-compose.yml`, `api/.env.example`, and `ui/runtime-env.sh`.
- Modified `ui/src/stores/useChat.js`:
- Introduced a `sendMessage` action that constructs a message object (as per the specified format with `id`, `from`, `to`, `ts`, `type`, `text`, `meta`) and sends it to the conversation router.
- Implemented optimistic local display of your message.
- Handles the `Conversation` object returned by the router, iterating through its `messages` array and adding them to the chat display.
- Determines message ownership ('user' for UI messages, 'bot' for Nucleo messages) for appropriate rendering.
- Includes basic error handling for API requests, logging errors and showing system messages in the chat.
- Updated `ui/src/components/chat/CanvasChat.vue`:
- Modified the message sending mechanism to use the new `chat.sendMessage()` action.
- Adjusted message rendering to correctly differentiate between messages from 'user' and 'bot' based on the `owner` field from the chat store.
This allows the UI to send messages to the conversation router and display the resulting conversation, focusing on rendering messages from both the UI ('planilla-UI') and the bot ('Nucleo').
This commit enhances the behavior of the persistent desktop navbar.
Previously, if `desktopNavbarPersistent` was true, the main content
would always shift to accommodate the sidebar on medium screens and up.
Now, the content shifting is also conditional on available viewport width:
- The main content wrapper in `App.vue` now tracks `window.innerWidth`.
- A `SHIFT_THRESHOLD` is defined (currently 880px), calculated from
NAVBAR_WIDTH (240px) + MIN_CONTENT_WIDTH (640px).
- If `ui.sidebarOpen` and `ui.desktopNavbarPersistent` are both true,
the `md:pl-60` class (to shift content) is only applied if
`viewportWidth.value >= SHIFT_THRESHOLD`.
- If the viewport width is below this threshold (but still potentially
above the 'md' breakpoint), the persistent sidebar will overlay the
content, similar to a non-persistent or mobile sidebar, preventing
the main content area from becoming too cramped.
This provides a more refined and responsive user experience for you
if you enable the persistent navbar feature on varying screen sizes.
This commit addresses an issue where the main content area would shift
to the right on desktop when the sidebar was opened, regardless of the
`desktopNavbarPersistent` setting.
The layout logic in `App.vue` has been updated so that the `md:pl-60`
class (which adds left padding to the main content area) is now
applied only when both `ui.sidebarOpen` and `ui.desktopNavbarPersistent`
are true.
This ensures that:
- If `desktopNavbarPersistent` is true, the sidebar will take up
dedicated space, and the content will correctly shift.
- If `desktopNavbarPersistent` is false, the sidebar will overlay the
content on desktop, and the main content will no longer shift.
This commit implements the following changes:
1. Removed the close button (✕) from within the NavBar component (`ui/src/components/ui/NavBar.vue`). The sidebar is now exclusively controlled by the hamburger icon in the TopBar.
2. Moved the hamburger menu button in the TopBar component (`ui/src/components/ui/TopBar.vue`) to the left side of the application title ("Núcleo").
3. Improved the visual styling of the hamburger button in `TopBar.vue` with increased padding, consistent border-radius, and clearer hover and focus states for better usability and accessibility.
These changes address the issue of redundant close buttons and aim to provide a cleaner and more intuitive navigation experience.
