From d9841cb79872f0d6dd268bd43bcfe6d08d61625d Mon Sep 17 00:00:00 2001
From: barry3406 <duan3406@gmail.com>
Date: Thu, 9 Apr 2026 05:10:16 -0700
Subject: [PATCH] perf: remove react-dom/server from client bundle

Replace ReactDOMServer.renderToString with a client-side helper using
createRoot + flushSync to render small icon elements to HTML strings.

react-dom/server pulls the entire server rendering runtime into the
client JS bundle. Since this file is imported by the main chat
component (thread.tsx), the extra weight hits every chat page load.

react-dom and react-dom/client are already in the client bundle, so
the replacement adds zero new bundle weight.

Fixes #1189
---
 .../assistant-ui/inline-mention-editor.tsx       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
index 2d55f4d20..14b8252f8 100644
--- a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
+++ b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
@@ -10,11 +10,21 @@ import {
 	useRef,
 	useState,
 } from "react";
-import ReactDOMServer from "react-dom/server";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { Document } from "@/contracts/types/document.types";
 import { cn } from "@/lib/utils";
 
+function renderToHTML(element: React.ReactElement): string {
+	const container = document.createElement("div");
+	const root = createRoot(container);
+	flushSync(() => root.render(element));
+	const html = container.innerHTML;
+	root.unmount();
+	return html;
+}
+
 export interface MentionedDocument {
 	id: number;
 	title: string;
@@ -213,7 +223,7 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
 
 				const iconSpan = document.createElement("span");
 				iconSpan.className = "flex items-center text-muted-foreground";
-				iconSpan.innerHTML = ReactDOMServer.renderToString(
+				iconSpan.innerHTML = renderToHTML(
 					getConnectorIcon(doc.document_type ?? "UNKNOWN", "h-3 w-3")
 				);
 
@@ -222,7 +232,7 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
 				removeBtn.className =
 					"size-3 items-center justify-center rounded-full text-muted-foreground transition-colors";
 				removeBtn.style.display = "none";
-				removeBtn.innerHTML = ReactDOMServer.renderToString(
+				removeBtn.innerHTML = renderToHTML(
 					createElement(X, { className: "h-3 w-3", strokeWidth: 2.5 })
 				);
 				removeBtn.onclick = (e) => {