General Improvements #4
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implemented a new reusable `fetchLLMProviders` function in the API layer and replaced hardcoded fetch logic in `LLMProvidersModal` with it. Updated the README to clarify usage instructions for both local and Docker environments.
Moved the tools fetching logic from ToolsModal to a new `fetchTools` function in the API module. This improves code reusability and separation of concerns, ensuring cleaner and more maintainable code. Updated ToolsModal to use the new function.
Introduce `APIClient` for reusable API interactions and create `LLMService`, `ChatService`, and `ToolService` for specific endpoints. Refactor `LLMProvidersModal` to use `LLMService` and `Auth0` for secure token-based fetching of LLM providers.
Replaced the old `chatService` with a class-based `ChatService` using improved error handling and token-based API requests. Updated `ChatContainer` to use the new service, properly handle authentication tokens, and map API messages to client-friendly formats. This ensures better scalability and maintainability.
Standardized spacing in import statements across the project by removing unnecessary spaces. This improves code readability and maintains a consistent coding style throughout the codebase.
Replaced React and Vite SVGs with a custom MCP Chat icon for branding consistency. Integrated the new AIIcon component into the interface header. Adjusted notification type definition to fix style.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request includes several changes aimed at improving the MCP frontend application, including updates to the user interface, API integration, and code organization. The most important changes include the addition of new API calls, the introduction of a new component, and various UI enhancements.
API Integration:
src/api/index.ts: Added new functionsfetchLLMProvidersandfetchToolsto fetch data from the backend API.New Component:
src/components/AIIcon.tsx: Created a newAIIconcomponent for displaying an AI icon with customizable size and color.UI Enhancements:
src/App.tsx: Updated the app to include the newAIIconcomponent in the header.index.html: Changed the favicon link to usemcp_chat.svginstead ofvite.svg.Code Organization:
src/components/ChatContainer.tsx: Refactored theChatContainercomponent to use the newChatServiceclass and improved state management. [1] [2] [3] [4]Other Changes:
README.md: Updated instructions for setting environment variables when running with Docker.API Methods and Service Refactoring:
src/api/index.ts: Added new methodsfetchLLMProvidersandfetchToolsfor fetching LLM providers and tools.src/services/APIClient.ts: IntroducedAPIClientclass to handle API requests with error handling.src/services/ChatService.ts: RefactoredChatServiceto extendAPIClientand added methods for sending messages and loading chat history.src/services/LLMService.ts: AddedLLMServiceclass for fetching LLM providers.src/services/ToolService.ts: AddedToolServiceclass for fetching tools.Component Updates:
src/components/ChatContainer.tsx: Updated to use the newChatServiceand refactored state management for chat messages. [1] [2] [3] [4] [5]src/components/LLMProvidersModal.tsx: Updated to use the newLLMServiceand refactored the modal's state and error handling. [1] [2] [3]src/components/ChatInputButton/ToolsModal.tsx: Updated to use the newfetchToolsmethod fromsrc/api/index.ts. [1] [2]Documentation and Other Changes:
README.md: Updated instructions for running the application locally and with Docker.src/types/llm.ts: AddedLLMProvidersResponseinterface.These changes aim to improve the maintainability and scalability of the codebase by introducing a more structured approach to API interactions and enhancing the user experience with better error handling and state management.