Fix assistant tools loading #7207

[KumarDhananjaya]

Description
This PR fixes an issue where enabled tools appeared as disabled when directly loading or refreshing the assistant edit page.

When the page was refreshed, tool configuration data was loaded asynchronously after the form was initialized, causing Formik to retain stale default values. This resulted in an incorrect UI state where tools looked disabled despite being enabled in the backend.

Changes made:
Enabled enableReinitialize in Formik so form values correctly update once tool data is fetched.
Added a loading overlay to the AgentEditorPage to prevent user interaction before tool states are fully synchronized.
Updated tool-fetching hooks to expose an isLoading state, allowing the editor to render only after data is ready.
These changes ensure tool states are accurately reflected after page refreshes and direct navigation.

How Has This Been Tested?
Created a custom assistant with one or more tools enabled.
Navigated to the assistant edit page via Admin → Assistants → Edit and confirmed tools appeared enabled.
Refreshed the page directly and verified tool states remained enabled.
Tested on a self-hosted v2.7.0 instance to confirm consistent behavior.

Issue Tagged: #7207

---

Summary by cubic

Fixes incorrect tool states on the Assistant Editor after refresh by reinitializing form values when tool data loads and blocking interaction until tools finish loading. Also improves citation click reliability during streaming. Fixes #7207.

• Bug Fixes
  • Enable Formik reinitialization so form values update when tools are fetched.
  • Add a loading overlay and gate rendering using MCP/OpenAPI/tool isLoading flags to prevent interaction until data is ready.
  • Switch citation wrapper to an anchor tag, memoize props, and prevent default/propagation to keep clicks stable during streaming.

^{Written for commit 49c007c. Summary will update on new commits.}

[greptile-apps]

Greptile Summary

Fixed tools appearing as disabled when refreshing or directly loading the assistant edit page by enabling Formik reinitialization and adding loading states.

Key changes:

• Enabled enableReinitialize in Formik configuration to update form values after asynchronous tool data loads
• Added loading overlay that displays while tool data is being fetched (isMcpLoading, isOpenApiLoading, isToolsLoading)
• Updated hooks (useMcpServers, useOpenApiTools, useAvailableTools) to expose isLoading states
• Improved citation click reliability by switching from <span> to <a> element for better behavior during streaming
• Memoized props in MemoizedTextComponents to stabilize Virtual DOM and prevent unnecessary re-renders

The core issue was that Formik initialized with default values before tool data was fetched, and without enableReinitialize, it retained these stale values even after the data loaded. The loading overlay prevents user interaction until all tool states are synchronized.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Changes are well-targeted to fix a specific UI bug without introducing side effects. The addition of enableReinitialize is the correct Formik pattern for handling async data, the loading states prevent race conditions, and the citation/memoization improvements enhance robustness during streaming without changing core logic.
• No files require special attention

Important Files Changed

Filename	Overview
web/src/refresh-pages/AgentEditorPage.tsx	Added enableReinitialize to Formik and loading overlay with isLoading states from tool hooks to fix tools appearing disabled on refresh
web/src/app/chat/message/MemoizedTextComponents.tsx	Wrapped props objects in useMemo to stabilize references and prevent unnecessary re-renders during message streaming
web/src/components/search/results/Citation.tsx	Changed wrapper from <span> to <a> with href attribute for more robust citation click handling during DOM updates

Sequence Diagram

sequenceDiagram
    participant User
    participant AgentEditorPage
    participant Formik
    participant useMcpServers
    participant useOpenApiTools
    participant useAvailableTools
    participant API

    User->>AgentEditorPage: Navigate to /edit page (or refresh)
    
    Note over AgentEditorPage: Page loads, hooks start fetching
    
    AgentEditorPage->>useMcpServers: Initialize hook
    AgentEditorPage->>useOpenApiTools: Initialize hook
    AgentEditorPage->>useAvailableTools: Initialize hook
    
    useMcpServers->>API: GET /api/admin/mcp/servers
    useOpenApiTools->>API: GET /api/tool/openapi
    useAvailableTools->>API: GET /api/tool
    
    Note over AgentEditorPage: isPageLoading = true<br/>Loading overlay shown
    
    AgentEditorPage->>Formik: Initialize with default values<br/>(tools appear disabled)
    
    API-->>useMcpServers: Return MCP data
    API-->>useOpenApiTools: Return OpenAPI tools
    API-->>useAvailableTools: Return available tools
    
    useMcpServers-->>AgentEditorPage: mcpData, isLoading=false
    useOpenApiTools-->>AgentEditorPage: openApiTools, isLoading=false
    useAvailableTools-->>AgentEditorPage: availableTools, isLoading=false
    
    Note over AgentEditorPage: All loading complete<br/>isPageLoading = false<br/>Loading overlay hidden
    
    Note over AgentEditorPage: initialValues recalculated<br/>with actual tool data
    
    AgentEditorPage->>Formik: Reinitialize form values<br/>(enableReinitialize=true)
    
    Note over Formik: Form updates with correct<br/>tool states (enabled/disabled)
    
    Formik-->>User: Display correctly initialized form

Loading

[greptile-apps]

Greptile's behavior is changing!

From now on, if a review finishes with no comments, we will not post an additional "statistics" comment to confirm that our review found nothing to comment on. However, you can confirm that we reviewed your changes in the status check section.

_{This feature can be toggled off in your Code Review Settings by deselecting "Create a status check for each PR".}

[cubic-dev-ai]

1 issue found across 3 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="web/src/app/chat/message/MemoizedTextComponents.tsx">

<violation number="1" location="web/src/app/chat/message/MemoizedTextComponents.tsx:81">
P0: This `useMemo` is called conditionally (inside nested `if` blocks) and after an early return statement, violating React&#39;s Rules of Hooks. Hooks must be called at the top level of the component in the same order on every render. This will cause React to crash with &quot;Rendered more hooks than during the previous render&quot; when the component takes different code paths.

Consider moving the memoization logic outside the conditionals, or simply removing the `useMemo` since the object creation here is inexpensive and the parent component is already wrapped with `memo`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[KumarDhananjaya]

@Weves can you review this PR and merge it !!