@nqminds/mcp-client 1.0.21 → 1.0.26

package/dist/MCPChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MCPChat.d.ts","sourceRoot":"","sources":["../src/MCPChat.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAyB,YAAY,EAAe,MAAM,SAAS,CAAC;AA+ChF,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,WAA6B,EAC7B,YAAiB,EACjB,SAAc,GACf,EAAE,YAAY,qBA6fd"}
+{"version":3,"file":"MCPChat.d.ts","sourceRoot":"","sources":["../src/MCPChat.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAyB,YAAY,EAAe,MAAM,SAAS,CAAC;AA+ChF,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,WAA6B,EAC7B,YAAiB,EACjB,SAAc,GACf,EAAE,YAAY,qBA+gBd"}

package/dist/MCPChat.js

@@ -39,6 +39,7 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
     const [input, setInput] = useState("");
     const [isLoading, setIsLoading] = useState(false);
     const [thinkingSteps, setThinkingSteps] = useState([]);
+    const [processingStartTime, setProcessingStartTime] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     const [preparingAction, setPreparingAction] = useState(null);
     const [directPromptOpen, setDirectPromptOpen] = useState(false);
@@ -89,6 +90,7 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
         setMessages((prev) => [...prev, userMessage]);
         setInput("");
         setThinkingSteps([]);
+        setProcessingStartTime(userMessage.timestamp);
         let thinkingStepCounter = 0;
         const addThinkingStep = (message) => {
             setThinkingSteps((prev) => [
@@ -182,7 +184,15 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
                                 }
                             }
                             catch (e) {
-                                console.error("Error parsing SSE data:", e);
+                                // Only swallow actual JSON parse failures.
+                                // Re-throw anything else (e.g. the stream error we threw above)
+                                // so it reaches the outer catch and surfaces to the user.
+                                if (e instanceof SyntaxError) {
+                                    console.error("Error parsing SSE data:", e);
+                                }
+                                else {
+                                    throw e;
+                                }
                             }
                         }
                     }
@@ -321,20 +331,23 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
                             React.createElement("span", { className: "mcp-action-card-icon" }, action.icon),
                             React.createElement("span", { className: "mcp-action-card-label" }, action.label))))),
                         React.createElement("button", { className: "mcp-chat-now-button", onClick: handleChatNow }, "\uD83D\uDCAC Or just chat\u2026"))),
-                    visibleMessages.map((msg, idx) => (React.createElement("div", { key: idx, className: `mcp-chat-message ${msg.role === "user" ? "mcp-chat-message-user" : "mcp-chat-message-assistant"}` },
+                    visibleMessages
+                        .filter((msg) => !(msg.isStreaming && msg.content === ""))
+                        .map((msg, idx) => (React.createElement("div", { key: idx, className: `mcp-chat-message ${msg.role === "user" ? "mcp-chat-message-user" : "mcp-chat-message-assistant"}` },
                         React.createElement("div", { className: "mcp-chat-message-bubble" },
                             msg.role === "assistant" ? (React.createElement("div", { className: "mcp-chat-message-content markdown-content" },
                                 React.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm] }, msg.content))) : (React.createElement("div", { className: "mcp-chat-message-content" }, msg.content)),
-                            React.createElement("div", { className: "mcp-chat-message-timestamp" },
+                            msg.role === "assistant" && !msg.isStreaming && (React.createElement("div", { className: "mcp-chat-message-timestamp" },
                                 msg.timestamp.toLocaleTimeString(),
-                                msg.role === "assistant" && msg.tokenInfo && (React.createElement("span", { className: "mcp-chat-token-info" }, msg.tokenInfo))))))),
+                                msg.tokenInfo && (React.createElement("span", { className: "mcp-chat-token-info" }, msg.tokenInfo)))))))),
                     isLoading && (React.createElement("div", { className: "mcp-chat-message mcp-chat-message-assistant" },
                         React.createElement("div", { className: "mcp-chat-thinking" },
                             React.createElement("div", { className: "mcp-chat-thinking-title" },
                                 React.createElement("span", { className: "mcp-preparing-spinner" }),
                                 thinkingSteps.length === 0
                                     ? " Thinking…"
-                                    : " Processing…"),
+                                    : " Processing…",
+                                processingStartTime && (React.createElement("span", { className: "mcp-chat-thinking-time" }, processingStartTime.toLocaleTimeString()))),
                             thinkingSteps.length > 0 && (React.createElement("div", { className: "mcp-chat-thinking-steps" },
                                 thinkingSteps.map((step) => (React.createElement("div", { key: step.id, className: "mcp-chat-thinking-step" }, step.message))),
                                 React.createElement("div", { ref: thinkingEndRef })))))),

package/dist/api-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api-helpers.d.ts","sourceRoot":"","sources":["../src/api-helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,sBAAsB,IACnD,SAAS,OAAO,uBAoH/B;AAED;;GAEG;AACH,wBAAgB,qBAAqB,KACrB,SAAS,OAAO,uBAU/B;AAED;;GAEG;AACH,wBAAsB,iBAAiB,kBAKtC"}
+{"version":3,"file":"api-helpers.d.ts","sourceRoot":"","sources":["../src/api-helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,sBAAsB,IACnD,SAAS,OAAO,uBAqH/B;AAED;;GAEG;AACH,wBAAgB,qBAAqB,KACrB,SAAS,OAAO,uBAU/B;AAED;;GAEG;AACH,wBAAsB,iBAAiB,kBAKtC"}

package/dist/api-helpers.js

@@ -69,8 +69,10 @@ export function createMCPChatHandler(config) {
                     if (abortController.signal.aborted) {
                         return;
                     }
-                    // Stream the response in chunks
-                    const chunkSize = 10;
+                    // Stream the response in chunks.
+                    // Use large chunks + short delay so long responses don't hit proxy send_timeout.
+                    // 200 chars @ 15ms = ~13,000 chars/sec — a 100k response streams in ~8s.
+                    const chunkSize = 200;
                     for (let i = 0; i < response.length; i += chunkSize) {
                         // Check for cancellation between chunks
                         if (abortController.signal.aborted) {
@@ -78,8 +80,7 @@ export function createMCPChatHandler(config) {
                         }
                         const chunk = response.slice(i, i + chunkSize);
                         sendEvent("content", { chunk });
-                        // Small delay for better streaming effect
-                        await new Promise((resolve) => setTimeout(resolve, 20));
+                        await new Promise((resolve) => setTimeout(resolve, 15));
                     }
                     sendEvent("done", {});
                 }

package/dist/styles/MCPChat.css

@@ -630,37 +630,41 @@
    Thinking steps
 ─────────────────────────────────────────────── */
 .mcp-chat-thinking {
-  padding: 14px 18px;
-  border-radius: 12px;
+  padding: 20px 24px;
+  border-radius: 14px;
   background: var(--mcp-card-bg);
   border: 1px solid var(--mcp-border);
   width: 100%;
+  min-width: fit-content;
+  min-height: 140px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
 .mcp-chat-thinking-title {
-  font-size: 14px;
-  font-weight: 600;
-  opacity: 0.8;
+  font-size: 16px;
+  font-weight: 700;
+  opacity: 0.9;
   color: var(--mcp-text);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  width: 100%;
 }
 
 .mcp-chat-thinking-steps {
-  max-height: 120px;
+  max-height: 320px;
   overflow-y: auto;
-  font-size: 13px;
-  line-height: 1.6;
+  font-size: 15px;
+  line-height: 1.7;
   color: var(--mcp-text-secondary);
 }
 
 .mcp-chat-thinking-step {
-  padding-bottom: 6px;
-  margin-bottom: 6px;
+  padding: 6px 0;
+  margin-bottom: 4px;
   border-bottom: 1px solid var(--mcp-border);
 }
 
@@ -668,6 +672,13 @@
   border-bottom: none;
 }
 
+.mcp-chat-thinking-time {
+  margin-left: auto;
+  font-size: 13px;
+  font-weight: 400;
+  opacity: 0.6;
+}
+
 /* ───────────────────────────────────────────────
    Input form
 ─────────────────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqminds/mcp-client",
-  "version": "1.0.21",
+  "version": "1.0.26",
   "description": "Reusable MCP client component with AI chat interface",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",