fixed: the mcpServer you need maybe undefined when you want to use #601

cmdparkour · 2025-07-14T16:55:56Z

Pull Request Description

Is your feature request related to a problem? Please describe.

#551
In Setting -> KnowledgeBase Tab, server config is load undefined beacuse when mcpserver is initing and component load the server config, so it will be undefined.

Describe the solution you'd like

add a ready status in config.value and change value to true when servers is ready. // Line 42 and Line 116
add a watch to handle config.value.ready is true // three knowledge setting file in end of the file.
in this time, load the server config.
maybe watch special value has a better way to do it, will change it in future.
setTimeout is too simple to do it, less code than this pr, but maybe the time is not enough to get the servers.
In other way, the servers will load quickly, everything better, if the servers load slowly, the bug will reappear, beause the component don't has a loading status, maybe we can design a good enough workflow in the future.

UI/UX changes for Desktop Application
nothing

Platform Compatibility Notes
nothing

Additional context
#551

Summary by CodeRabbit

New Features
- Added a readiness indicator for configuration loading, improving feedback on when settings are available.
Refactor
- Improved the loading process for configuration settings in multiple components to ensure they only load after configuration is ready.
- Enhanced lifecycle management to prevent potential memory leaks during component unmounting.
Chores
- Added debug logging for configuration loading in FastGPT settings.

coderabbitai · 2025-07-14T16:56:02Z

Walkthrough

A new ready boolean property was introduced to the MCP configuration to indicate when initialization is complete. Three Vue components were refactored to load their respective configurations only after MCP is ready, using watchers and lifecycle hooks to manage resource cleanup and avoid memory leaks.

Changes

File(s)	Change Summary
src/renderer/src/components/settings/DifyKnowledgeSettings.vue src/renderer/src/components/settings/FastGptKnowledgeSettings.vue src/renderer/src/components/settings/RagflowKnowledgeSettings.vue	Refactored to load configuration only when `mcpStore.config.ready` becomes true; added watchers and cleanup hooks.
src/renderer/src/stores/mcp.ts	Added `ready` boolean to MCP config; set `ready` to true after configuration loads.
src/shared/presenter.d.ts	Added `ready: boolean` property to the `MCPConfig` interface.

Sequence Diagram(s)

sequenceDiagram
    participant Component as KnowledgeSettings.vue
    participant MCPStore as MCP Store

    Component->>MCPStore: Watch mcpStore.config.ready
    MCPStore-->>Component: config.ready = false (initial)
    MCPStore->>MCPStore: loadConfig()
    MCPStore-->>MCPStore: Set config.ready = true
    MCPStore-->>Component: Notify watcher (config.ready is true)
    Component->>Component: Load config from MCP
    Component->>Component: Unregister watcher
    Component->>Component: Cleanup watcher on unmount (if needed)

Poem

🐰
The config waits, the watcher spies,
For ready true before it tries.
No more rush on component mount,
Just patience as the numbers count.
With cleanup neat and leaks all gone,
The rabbit hops—code marches on!

✨ Finishing Touches

📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (4)

src/renderer/src/components/settings/RagflowKnowledgeSettings.vue (1)
434-453: Excellent reactive loading pattern with minor safety suggestion.

The implementation correctly waits for MCP readiness before loading configuration and includes proper cleanup to prevent memory leaks. The self-unregistering watcher is a good approach to ensure single execution.

Consider initializing unwatch to prevent potential undefined access:
-let unwatch: () => void // only use here, so declare it here
+let unwatch: (() => void) | undefined // only use here, so declare it here
 onMounted(async () => {
   unwatch = watch(
     () => mcpStore.config.ready,
     async (ready) => {
       if (ready) {
-        unwatch() // only run once to avoid multiple calls
+        unwatch?.() // only run once to avoid multiple calls
         await loadRagflowConfigFromMcp()
       }
     },
     { immediate: true }
   )
 })

 // cancel the watch to avoid memory leaks
 onUnmounted(() => {
-  if (unwatch) {
-    unwatch()
-  }
+  unwatch?.()
 })
src/renderer/src/components/settings/DifyKnowledgeSettings.vue (1)
417-436: Excellent reactive loading pattern with minor safety suggestion.

The implementation correctly waits for MCP readiness before loading configuration and includes proper cleanup to prevent memory leaks. The pattern is consistent with other knowledge settings components.

Consider the same safety improvement as suggested for RagflowKnowledgeSettings:
-let unwatch: () => void // only use here, so declare it here
+let unwatch: (() => void) | undefined // only use here, so declare it here
 onMounted(async () => {
   unwatch = watch(
     () => mcpStore.config.ready,
     async (ready) => {
       if (ready) {
-        unwatch() // only run once to avoid multiple calls
+        unwatch?.() // only run once to avoid multiple calls
         await loadDifyConfigFromMcp()
       }
     },
     { immediate: true }
   )
 })

 // cancel the watch to avoid memory leaks
 onUnmounted(() => {
-  if (unwatch) {
-    unwatch()
-  }
+  unwatch?.()
 })
src/renderer/src/components/settings/FastGptKnowledgeSettings.vue (2)
358-358: Remove debug console.log statement.

This debug statement should be removed for production code.
-    console.log(mcpStore.config)
416-435: Excellent reactive loading pattern with minor safety suggestion.

The implementation correctly waits for MCP readiness before loading configuration and includes proper cleanup to prevent memory leaks. The pattern is consistent with other knowledge settings components.

Consider the same safety improvement as suggested for other knowledge settings components:
-let unwatch: () => void // only use here, so declare it here
+let unwatch: (() => void) | undefined // only use here, so declare it here
 onMounted(async () => {
   unwatch = watch(
     () => mcpStore.config.ready,
     async (ready) => {
       if (ready) {
-        unwatch() // only run once to avoid multiple calls
+        unwatch?.() // only run once to avoid multiple calls
         await loadFastGptConfigFromMcp()
       }
     },
     { immediate: true }
   )
 })

 // cancel the watch to avoid memory leaks
 onUnmounted(() => {
-  if (unwatch) {
-    unwatch()
-  }
+  unwatch?.()
 })

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6bf2cf7 and a36282d.

📒 Files selected for processing (5)

src/renderer/src/components/settings/DifyKnowledgeSettings.vue (2 hunks)
src/renderer/src/components/settings/FastGptKnowledgeSettings.vue (3 hunks)
src/renderer/src/components/settings/RagflowKnowledgeSettings.vue (2 hunks)
src/renderer/src/stores/mcp.ts (2 hunks)
src/shared/presenter.d.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{js,jsx,ts,tsx}

Instructions used from: