Skip to content

Enhance ChatPanel with fullscreen support, MCP integration, and UI improvements#97

Open
TheSinnerAR wants to merge 8 commits into
devfrom
feat/mcp-ia
Open

Enhance ChatPanel with fullscreen support, MCP integration, and UI improvements#97
TheSinnerAR wants to merge 8 commits into
devfrom
feat/mcp-ia

Conversation

@TheSinnerAR

Copy link
Copy Markdown
Collaborator

This pull request introduces major enhancements to the AI assistant's architecture by adding support for external Model Context Protocol (MCP) tools, most notably BioMCP, and upgrading the LangChain stack to version 1.x. The assistant can now access external biomedical databases (e.g., PubMed, ClinicalTrials.gov, OncoKB) via MCP servers, which are configured through a new config/mcp_servers.json file. The documentation and deployment guides have been significantly expanded to cover these changes, and dependency versions have been updated to ensure compatibility.

AI Assistant: External MCP Tools and Architecture Upgrade

External MCP Tools Integration:

  • Added support for external MCP tools (e.g., BioMCP) via the MCP protocol, allowing the assistant to access biomedical literature, clinical trials, and variant databases. Tools are auto-discovered from configured MCP servers, with graceful fallback to internal tools if MCP is unavailable. (AI_ASSISTANT.md, DEPLOYING.md, config/mcp_servers.json, src/assistant/services/llm_service.py) [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]

Configuration and Deployment:

  • Introduced config/mcp_servers.json for declarative MCP server configuration, supporting multiple transports (stdio, http, sse), and updated deployment documentation to explain activation and extension of MCP support. (DEPLOYING.md, docker-compose_dist.yml, AI_ASSISTANT.md) [1] [2] [3] [4]

LangChain and Dependency Upgrades:

  • Upgraded the LangChain stack from 0.3.x to 1.x, replaced the agent API (AgentExecutor/create_tool_calling_agent) with the new create_agent() function, and added langchain-mcp-adapters and biomcp-python as dependencies. (AI_ASSISTANT.md, config/requirements.txt) [1] [2] [3]

Documentation Improvements:

  • Expanded technical documentation to describe the new tool architecture, query flow, system prompt scope, and instructions for adding MCP servers and curated documentation. (AI_ASSISTANT.md) [1] [2] [3]

Codebase Changes:

  • Refactored llm_service.py to support async agent execution, MCP config loading, and improved logging and error handling for MCP server failures. (src/assistant/services/llm_service.py) [1] [2] [3]

These changes collectively make the assistant more extensible, robust, and capable of leveraging a broader range of biomedical resources.

Introduce a fullscreen toggle for the ChatPanel with an isFullscreen state and toggleFullscreen handler (restores default dimensions to 700x520 and persists them). Update panel layout/styles to occupy the full viewport in fullscreen and hide resize handles while fullscreen. Add header window controls (maximize/restore and close) and improve ChatWidget FAB behavior: smaller when panel open, updated titles (Spanish) and icon markup. Refresh CSS: FAB sizing/centering/transitions, enhanced resize-handle visuals, header and control button styles, and corner grip indicator.
Integrates external MCP (BioMCP) tools and upgrades the LangChain stack to 1.x. Adds config/mcp_servers.json and a new mcp_loader to read/validate MCP server entries (with PATH/transport checks and graceful warnings). Refactors llm_service: switches to async agent execution (asyncio.run), uses create_agent()/ainvoke with langchain 1.x + langchain-mcp-adapters, loads MCP tools at runtime, and falls back to internal tools if MCP is unavailable. Updates docs (AI_ASSISTANT.md) and docker-compose hints to document MCP usage. Updates Python dependencies and settings: bumps langchain/openai libraries, adds langchain-mcp-adapters and biomcp-python, updates ASSISTANT_MCP_CONFIG_PATH handling in settings.
Adjust chat panel sizing to be responsive: compute MIN/MAX dimensions from window size, update default restore sizes, and persist new dimensions to localStorage. Enhance header with a robot icon and show active conversation title; improve conversation list layout and hover/delete behavior. Replace simple empty hint with a capability grid and richer suggested prompts, and tweak CSS for resize handles, sidebar width, spacing, and visual polish to improve overall UX.
Introduce a help/info button in ChatPanel with local state and outside-click handler to toggle a small informational dropdown (Spanish copy) describing the assistant and available tools. Added helpRef, helpOpen state, and an effect to close the dropdown when clicking outside; adjusted header layout to include the new control. Added CSS rules for .chat-help-btn, .chat-help-dropdown and related classes for styling and positioning. Also updated a CSS comment in chat-widget.css for clarity.
Update chat assistant help content and tweak widget styling. In ChatPanel.tsx the help section heading and list were replaced with concise Spanish tips for better results and a new keyboard shortcuts subsection was added; minor reformatting of the control buttons block only changes indentation. In chat-widget.css added width/display/flex centering to the affected element and introduced a left padding tweak for list cells to refine spacing and alignment.
Add a new "AI Assistant MCP Tools" section to DEPLOYING.md describing Model Context Protocol (MCP) servers, the default BioMCP config (config/mcp_servers.json), how to enable MCP support in docker-compose (ASSISTANT_MCP_CONFIG_PATH + volume mount), requirements for stdio servers, how to add custom MCP servers, supported transport types (stdio, http, sse), and an example. Also replace the biomcp dependency in config/requirements.txt from biomcp-python==0.7.3 to biomcp-cli==0.8.22 so the documented runtime command matches the installed package.
Comment thread src/assistant/services/llm_service.py Outdated
Comment thread src/assistant/services/llm_service.py Outdated
Comment thread src/frontend/static/frontend/src/components/assistant/ChatPanel.tsx
Comment thread src/frontend/static/frontend/src/components/assistant/ChatPanel.tsx
Comment thread src/frontend/static/frontend/src/components/assistant/ChatPanel.tsx Outdated
Comment thread src/frontend/static/frontend/src/components/assistant/ChatPanel.tsx Outdated
Comment thread src/frontend/static/frontend/src/components/assistant/ChatWidget.tsx Outdated
Comment thread src/frontend/static/frontend/src/components/assistant/ChatWidget.tsx Outdated
Comment thread src/frontend/static/frontend/src/components/assistant/MessageThread.tsx Outdated
Python: import and enable langchain_core.set_debug only when the root logger is at DEBUG level, and lower MCP tools log from INFO to DEBUG.

Frontend: translate assistant UI copy from Spanish to English across ChatPanel, ChatWidget, ConversationList and MessageThread. Add JSDoc/comments, introduce TOOL_CATEGORIES and SUGGESTED_PROMPTS for the empty-state, and improve behavior/robustness: use Number.parseInt for persisted sizes/ids, clamp restored panel dimensions to MIN/MAX when toggling fullscreen, map cursor style via an object, and extract small state-update helpers for conversation removal/renaming. Misc UI text, placeholders and tooltip refinements included.
Refactor assistant components to use a single props param and add clearer JSDoc annotations. Components updated: ChatPanel, ChatWidget, ConversationList, MessageThread. Changes include switching from destructured parameters to a props object with local destructuring, adding @param/@returns details for functions, small cleanup (removed unused Icon import), and minor docstring clarifications. No behavioral changes intended—this improves readability and documentation for maintainers.

/**
* Formats an ISO timestamp as "HH:MM" for today, or "DD Mon" otherwise.
* @param iso

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hay varios warnings del linter por todos lados, corregir! Instalar ESLint en el IDE para ver los cambios. En su defecto, correr npm run check-lint hasta que no aparezca nada. Indicar al LLM que después de los cambios ejecute ese comando, así itera corrigiendo todo

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image estoy ejecutando el eslint y no me marca ningun warning ni error en esos archivos

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Buenas! Avisame cuando hayas solucionado esto que le mando al Merge! Abrazooo!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants