Fix assistant tools loading #7207

web/src/app/chat/message/MemoizedTextComponents.tsx

@@ -77,13 +77,17 @@ export const MemoizedAnchor = memo(
               />
             );
           }
-          const associatedDocInfo = associatedDoc
-            ? {
-                ...associatedDoc,
-                icon: icon as any,
-                link: associatedDoc.link,
-              }
-            : undefined;
+          const associatedDocInfo = useMemo(
+            () =>
+              associatedDoc
+                ? {
+                  ...associatedDoc,
+                  icon: icon as any,
+                  link: associatedDoc.link,
+                }
+                : undefined,
+            [associatedDoc, icon]
+          );
 
           return (
             <MemoizedLink
@@ -124,22 +128,28 @@ export const MemoizedLink = memo(
     [key: string]: any;
   }) => {
     const value = rest.children;
-    const questionCardProps: QuestionCardProps | undefined =
-      question && openQuestion
-        ? {
+    const questionCardProps: QuestionCardProps | undefined = useMemo(
+      () =>
+        question && openQuestion
+          ? {
             question: question,
             openQuestion: openQuestion,
           }
-        : undefined;
+          : undefined,
+      [question, openQuestion]
+    );
 
-    const documentCardProps: DocumentCardProps | undefined =
-      document && updatePresentingDocument
-        ? {
+    const documentCardProps: DocumentCardProps | undefined = useMemo(
+      () =>
+        document && updatePresentingDocument
+          ? {
             url: document.link,
             document: document as LoadedOnyxDocument,
             updatePresentingDocument: updatePresentingDocument!,
           }
-        : undefined;
+          : undefined,
+      [document, updatePresentingDocument]
+    );
 
     if (value?.toString().startsWith("*")) {
       return <BlinkingDot addMargin />;

web/src/components/search/results/Citation.tsx

@@ -71,13 +71,16 @@ export function Citation({
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <span
-            onClick={() => {
+          <a
+            href={document_info?.document?.link || "#"}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
               document_info?.document
                 ? openDocument(
-                    document_info.document,
-                    document_info.updatePresentingDocument
-                  )
+                  document_info.document,
+                  document_info.updatePresentingDocument
+                )
                 : question_info?.question
                   ? question_info.openQuestion(question_info.question)
                   : null;
@@ -94,7 +97,7 @@ export function Citation({
                 {citationText}
               </Text>
             </span>
-          </span>
+          </a>
         </TooltipTrigger>
         <TooltipContent
           className="bg-transparent p-0 shadow-none"

web/src/refresh-pages/AgentEditorPage.tsx

@@ -449,15 +449,15 @@ export default function AgentEditorPage({
     (values: any, llmProviders: any) =>
       values.llm_model_version_override && values.llm_model_provider_override
         ? (() => {
-            const provider = llmProviders?.find(
-              (p: any) => p.name === values.llm_model_provider_override
-            );
-            return structureValue(
-              values.llm_model_provider_override,
-              provider?.provider || "",
-              values.llm_model_version_override
-            );
-          })()
+          const provider = llmProviders?.find(
+            (p: any) => p.name === values.llm_model_provider_override
+          );
+          return structureValue(
+            values.llm_model_provider_override,
+            provider?.provider || "",
+            values.llm_model_version_override
+          );
+        })()
         : null,
     []
   );
@@ -487,8 +487,9 @@ export default function AgentEditorPage({
     semantic_identifier: string;
   } | null>(null);
 
-  const { mcpData } = useMcpServers();
-  const { openApiTools: openApiToolsRaw } = useOpenApiTools();
+  const { mcpData, isLoading: isMcpLoading } = useMcpServers();
+  const { openApiTools: openApiToolsRaw, isLoading: isOpenApiLoading } =
+    useOpenApiTools();
   const { llmProviders } = useLLMProviders(existingAgent?.id);
   const mcpServers = mcpData?.mcp_servers ?? [];
   const openApiTools = openApiToolsRaw ?? [];
@@ -498,7 +499,10 @@ export default function AgentEditorPage({
   // - image-gen
   // - web-search
   // - code-interpreter
-  const { tools: availableTools } = useAvailableTools();
+  const { tools: availableTools, isLoading: isToolsLoading } =
+    useAvailableTools();
+
+  const isPageLoading = isMcpLoading || isOpenApiLoading || isToolsLoading;
   const searchTool = availableTools?.find(
     (t) => t.in_code_tool_id === SEARCH_TOOL_ID
   );
@@ -818,9 +822,8 @@ export default function AgentEditorPage({
           : "No response received";
         setPopup({
           type: "error",
-          message: `Failed to ${
-            existingAgent ? "update" : "create"
-          } agent - ${error}`,
+          message: `Failed to ${existingAgent ? "update" : "create"
+            } agent - ${error}`,
         });
         return;
       }
@@ -829,9 +832,8 @@ export default function AgentEditorPage({
       const agent = await personaResponse.json();
       setPopup({
         type: "success",
-        message: `Agent "${agent.name}" ${
-          existingAgent ? "updated" : "created"
-        } successfully`,
+        message: `Agent "${agent.name}" ${existingAgent ? "updated" : "created"
+          } successfully`,
       });
 
       // Refresh agents list and the specific agent
@@ -927,10 +929,21 @@ export default function AgentEditorPage({
         aria-label="Agents Editor Page"
         className="h-full w-full"
       >
+        {isPageLoading && (
+          <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/50 backdrop-blur-sm">
+            <SettingsLayouts.Body>
+              <div className="flex flex-col items-center gap-4">
+                <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+                <Text>Loading tools...</Text>
+              </div>
+            </SettingsLayouts.Body>
+          </div>
+        )}
         <Formik
           initialValues={initialValues}
           validationSchema={validationSchema}
           onSubmit={handleSubmit}
+          enableReinitialize={true}
           validateOnChange
           validateOnBlur
           validateOnMount
@@ -1309,8 +1322,8 @@ export default function AgentEditorPage({
                             {/* render the separator if there is at least one mcp-server or open-api-tool */}
                             {(mcpServers.length > 0 ||
                               openApiTools.length > 0) && (
-                              <Separator noPadding className="py-1" />
-                            )}
+                                <Separator noPadding className="py-1" />
+                              )}
 
                             {/* MCP tools */}
                             {mcpServersWithTools.length > 0 && (