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').
Here's what I did:
- Added `container_name` for `api` and `ui` services in `docker-compose.yml`.
- Created `ui/src/apiClient.js` to configure the API base URL using the API container name (`http://planilla-api:4000/api`).
- Added `axios` as a dependency to the UI project.
- Ensured UI store files correctly import the new `apiClient.js`.
This will allow your UI to reliably connect to the API service using Docker's internal DNS resolution via container names.
