@hef2024/llmasaservice-ui 0.24.2 → 0.24.4

package/src/AgentPanel.tsx

@@ -4,6 +4,7 @@ import materialLight from "react-syntax-highlighter/dist/esm/styles/prism/materi
 import ChatPanel from "./ChatPanel";
 import { LLMAsAServiceCustomer } from "llmasaservice-client";
 import PrismStyle from "react-syntax-highlighter";
+import { MCPAuthHeaderResolver } from "./mcpAuth";
 
 export interface AgentPanelProps {
   //project_id: string;
@@ -61,6 +62,7 @@ export interface AgentPanelProps {
   createConversationOnFirstChat?: boolean;
   customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
   customerEmailCapturePlaceholder?: string;
+  resolveMcpAuthHeaders?: MCPAuthHeaderResolver;
 }
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
   inline?: boolean;
@@ -107,6 +109,7 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
   //ragRankLimit = 5,
   initialHistory = {},
   hideRagContextInPrompt = true,
+  resolveMcpAuthHeaders,
 }) => {
   const searchParams = new URLSearchParams(location.search);
   const customer_id = searchParams.get("customer_id") || null;
@@ -314,6 +317,7 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
             "Please enter your email..."
           }
           mcpServers={mcpData}
+          resolveMcpAuthHeaders={resolveMcpAuthHeaders}
         />
       )}
     </>

package/src/ChatPanel.tsx

@@ -19,6 +19,12 @@ import materialLight from "react-syntax-highlighter/dist/esm/styles/prism/materi
 import EmailModal from "./EmailModal";
 import ToolInfoModal from "./ToolInfoModal";
 import { ThinkingBlock as ThinkingBlockComponent } from './components/ui';
+import {
+  MCPAuthHeaderResolver,
+  MCPAuthPhase,
+  normalizeMcpHeaders,
+} from "./mcpAuth";
+import { parseToolArguments } from "./toolArgsParser";
 
 export interface ChatPanelProps {
   project_id: string;
@@ -80,6 +86,7 @@ export interface ChatPanelProps {
   customerEmailCapturePlaceholder?: string;
   mcpServers?: [];
   progressiveActions?: boolean;
+  resolveMcpAuthHeaders?: MCPAuthHeaderResolver;
 }
 
 interface HistoryEntry {
@@ -138,6 +145,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   customerEmailCapturePlaceholder = "Please enter your email...",
   mcpServers,
   progressiveActions = true,
+  resolveMcpAuthHeaders,
 }) => {
   const isEmailAddress = (email: string): boolean => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -624,6 +632,59 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   const [toolsLoading, setToolsLoading] = useState(false);
   const [toolsFetchError, setToolsFetchError] = useState(false);
 
+  const buildMcpRequestHeaders = useCallback(
+    async ({
+      phase,
+      mcpServer,
+      toolName,
+      toolArgs,
+    }: {
+      phase: MCPAuthPhase;
+      mcpServer: Record<string, unknown>;
+      toolName?: string;
+      toolArgs?: unknown;
+    }): Promise<Record<string, string>> => {
+      const merged: Record<string, string> = {};
+
+      const baseAccessToken =
+        typeof mcpServer.accessToken === "string"
+          ? mcpServer.accessToken.trim()
+          : "";
+      if (baseAccessToken) {
+        merged["x-mcp-access-token"] = baseAccessToken;
+      }
+      if (project_id) {
+        merged["x-project-id"] = project_id;
+      }
+
+      if (!resolveMcpAuthHeaders) return merged;
+
+      try {
+        const resolved = await resolveMcpAuthHeaders({
+          phase,
+          mcpServer,
+          projectId: project_id,
+          customer: currentCustomer,
+          toolName,
+          toolArgs,
+        });
+        return {
+          ...merged,
+          ...normalizeMcpHeaders(
+            resolved as Record<string, unknown> | null | undefined
+          ),
+        };
+      } catch (error) {
+        console.error(
+          `Failed to resolve MCP auth headers for ${phase} request:`,
+          error
+        );
+        return merged;
+      }
+    },
+    [project_id, currentCustomer, resolveMcpAuthHeaders]
+  );
+
   // mcp servers are passed in in the mcpServers prop. Fetch tools for each one.
   useEffect(() => {
     //console.log("MCP servers", mcpServers);
@@ -647,7 +708,13 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           )}`;
 
           try {
-            const response = await fetch(urlToFetch);
+            const requestHeaders = await buildMcpRequestHeaders({
+              phase: "list",
+              mcpServer: m,
+            });
+            const response = await fetch(urlToFetch, {
+              headers: requestHeaders,
+            });
             if (!response.ok) {
               console.error(
                 `Error fetching tools from ${m.url}: ${response.status} ${response.statusText}`
@@ -664,7 +731,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                 ...tool,
                 url: m.url,
                 accessToken: m.accessToken || "",
-                headers: {},
+                headers: requestHeaders,
               }));
             } else {
               return [];
@@ -699,7 +766,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     };
 
     fetchAndSetTools();
-  }, [mcpServers, publicAPIUrl]);
+  }, [mcpServers, publicAPIUrl, buildMcpRequestHeaders]);
 
   const llmResult = useLLM({
     project_id: project_id,
@@ -1203,7 +1270,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
   const anthropic_toolAction = {
     pattern:
-      '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[\\s\\S]+?\\}),"service":"([^"]+)"\\}',
+      '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[\\s\\S]*?\\}),"service":"([^"]+)"\\}',
     type: "markdown",
     markdown: "<br />*Tool use requested: $2*",
     actionType: "tool",
@@ -1211,7 +1278,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
   const openAI_toolAction = {
     pattern:
-      '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"((?:\\\\.|[^"\\\\])*)"\\},"service":"([^"]+)"\\}',
+      '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"([\\s\\S]*?)"\\},"service":"([^"]+)"\\}',
     type: "markdown",
     markdown: "<br />*Tool use requested: $2*",
     actionType: "tool",
@@ -1220,7 +1287,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   // google doesn't return an id, so we just grab functioCall
   const google_toolAction = {
     pattern:
-      '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[\\s\\S]+?\\})\\s*\\}(?:\\s*,\\s*"thoughtSignature"\\s*:\\s*"[^"]*")?\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
+      '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[\\s\\S]*?\\})\\s*\\}(?:\\s*,\\s*"thoughtSignature"\\s*:\\s*"[^"]*")?\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
     type: "markdown",
     markdown: "<br />*Tool use requested: $2*",
     actionType: "tool",
@@ -1400,7 +1467,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     setPendingToolRequests([]);
     try {
       // Start with base messages including the user's original question
-      const newMessages = [
+      const newMessages: any[] = [
         {
           role: "user",
           content: [
@@ -1412,72 +1479,108 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         },
       ];
 
-      // Add a single assistant message with ALL tool calls
-      const toolCallsMessage = {
-        role: "assistant",
-        content: [],
-        tool_calls: [],
-      };
+      const parsedToolCalls = await Promise.all(
+        toolsToProcess.map(async (req, index) => {
+          if (!req) return null;
 
-      // Parse all tool calls first
-      const toolCallsPromises = toolsToProcess.map(async (req) => {
-        if (!req) return null;
+          let parsedToolCall: any = null;
+          try {
+            parsedToolCall = JSON.parse(req.match);
+          } catch (error) {
+            console.error("Failed to parse tool call:", error);
+          }
+
+          const toolName =
+            req.groups[1] ||
+            req.toolName ||
+            (typeof parsedToolCall?.name === "string" ? parsedToolCall.name : "") ||
+            (typeof parsedToolCall?.function?.name === "string"
+              ? parsedToolCall.function.name
+              : "");
+          if (!toolName) return null;
+
+          const rawCallId =
+            req.groups[0] ||
+            parsedToolCall?.id ||
+            parsedToolCall?.tool_call_id ||
+            `${toolName}-${index + 1}`;
+          const callId =
+            typeof rawCallId === "string" &&
+            rawCallId.trim().length > 0 &&
+            rawCallId !== "functionCall"
+              ? rawCallId
+              : `${toolName}-${index + 1}`;
+
+          let args: Record<string, unknown> = {};
+          const rawArgs =
+            req.groups[2] ??
+            parsedToolCall?.input ??
+            parsedToolCall?.args ??
+            parsedToolCall?.function?.arguments ??
+            "{}";
+
+          const parsedArgs = parseToolArguments(rawArgs);
+          if (!parsedArgs) {
+            console.error("Failed to parse tool arguments", {
+              toolName,
+              callId,
+              rawArgsPreview:
+                typeof rawArgs === "string"
+                  ? rawArgs.slice(0, 500)
+                  : JSON.stringify(rawArgs).slice(0, 500),
+            });
+            return null;
+          }
+          args = parsedArgs;
+
+          const serviceTag =
+            (typeof req.groups[3] === "string" && req.groups[3]) ||
+            (typeof parsedToolCall?.service === "string" && parsedToolCall.service) ||
+            "";
 
-        try {
           return {
             req,
-            parsedToolCall: JSON.parse(req.match),
+            toolName,
+            callId,
+            args,
+            serviceTag,
           };
-        } catch (e) {
-          console.error("Failed to parse tool call:", e);
-          return null;
-        }
-      });
-
-      // Wait for all tool calls to be parsed
-      const parsedToolCalls = await Promise.all(toolCallsPromises);
-
-      // Add all tool calls to the assistant message
-      parsedToolCalls.forEach((item) => {
-        if (item && item.parsedToolCall) {
-          (toolCallsMessage.tool_calls as any[]).push(item.parsedToolCall);
-        }
-      });
-
-      // Add the assistant message with all tool calls
-      newMessages.push(toolCallsMessage);
-
-      const finalToolCalls = toolCallsMessage.tool_calls;
+        })
+      );
 
-      const toolResponsePromises = parsedToolCalls.map(async (item) => {
-        if (!item || !item.req) return null;
+      const toolCallBatch = parsedToolCalls.filter(Boolean) as Array<{
+        req: any;
+        toolName: string;
+        callId: string;
+        args: Record<string, unknown>;
+        serviceTag: string;
+      }>;
 
-        const req = item.req;
-        //console.log(`Processing tool ${req.toolName}`);
+      const finalToolCalls = toolCallBatch.map((toolCall) => ({
+        id: toolCall.callId,
+        type: "tool_use",
+        name: toolCall.toolName,
+        input: toolCall.args,
+        service: toolCall.serviceTag,
+      }));
 
-        const mcpTool = toolList.find((tool) => tool.name === req.toolName);
+      const toolResponsePromises = toolCallBatch.map(async (toolCall) => {
+        const mcpTool = toolList.find((tool) => tool.name === toolCall.toolName);
 
         if (!mcpTool) {
-          console.error(`Tool ${req.toolName} not found in tool list`);
-          return null;
+          console.error(`Tool ${toolCall.toolName} not found in tool list`);
+          return {
+            tool_call_id: toolCall.callId,
+            tool_name: toolCall.toolName,
+            result: `Tool ${toolCall.toolName} not found in current tool list.`,
+            isError: true,
+          };
         }
 
         try {
-          let args;
-          try {
-            args = JSON.parse(req.groups[2]);
-          } catch (e) {
-            try {
-              args = JSON.parse(req.groups[2].replace(/\\"/g, '"'));
-            } catch (err) {
-              console.error("Failed to parse tool arguments:", err);
-              return null;
-            }
-          }
-
           const body = {
-            tool: req.groups[1],
-            args: args,
+            tool: toolCall.toolName,
+            args: toolCall.args,
           };
 
           const result = await fetch(
@@ -1486,11 +1589,12 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
               method: "POST",
               headers: {
                 "Content-Type": "application/json",
-                "x-mcp-access-token":
-                  mcpTool.accessToken && mcpTool.accessToken !== ""
-                    ? mcpTool.accessToken
-                    : "",
-                "x-project-id": project_id,
+                ...(await buildMcpRequestHeaders({
+                  phase: "call",
+                  mcpServer: mcpTool as Record<string, unknown>,
+                  toolName: toolCall.toolName,
+                  toolArgs: toolCall.args,
+                })),
               },
               body: JSON.stringify(body),
             }
@@ -1498,11 +1602,18 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
           if (!result.ok) {
             console.error(
-              `Error calling tool ${req.toolName}: ${result.status} ${result.statusText}`
+              `Error calling tool ${toolCall.toolName}: ${result.status} ${result.statusText}`
             );
             const errorBody = await result.text();
             console.error(`Error body: ${errorBody}`);
-            return null;
+            return {
+              tool_call_id: toolCall.callId,
+              tool_name: toolCall.toolName,
+              result: `HTTP ${result.status} ${result.statusText}: ${
+                errorBody || "Tool call failed"
+              }`,
+              isError: true,
+            };
           }
 
           let resultData;
@@ -1510,45 +1621,40 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
             resultData = await result.json();
           } catch (jsonError) {
             console.error(
-              `Error parsing JSON response for tool ${req.toolName}:`,
+              `Error parsing JSON response for tool ${toolCall.toolName}:`,
               jsonError
             );
-            // Attempt to read as text for debugging if JSON fails
-            try {
-              const textBody = await result.text(); // Note: This consumes the body if json() failed early
-              console.error("Response body (text):", textBody);
-            } catch (textError) {
-              console.error(
-                "Failed to read response body as text either:",
-                textError
-              );
-            }
-            return null; // Exit if JSON parsing failed
-          }
-
-          if (
-            resultData &&
-            resultData.content &&
-            resultData.content.length > 0
-          ) {
-            const textResult = resultData.content[0]?.text;
             return {
-              role: "tool",
-              content: [
-                {
-                  type: "text",
-                  text: textResult,
-                },
-              ],
-              tool_call_id: req.groups[0],
+              tool_call_id: toolCall.callId,
+              tool_name: toolCall.toolName,
+              result: "Tool returned a non-JSON response.",
+              isError: true,
             };
-          } else {
-            console.error(`No content returned from tool ${req.toolName}`);
-            return null;
           }
+
+          const textResult =
+            resultData?.content?.[0]?.text ??
+            (resultData?.result
+              ? JSON.stringify(resultData.result)
+              : JSON.stringify(resultData));
+
+          return {
+            tool_call_id: toolCall.callId,
+            tool_name: toolCall.toolName,
+            result: textResult || "",
+            isError: resultData?.isError === true,
+          };
         } catch (error) {
-          console.error(`Error processing tool ${req.toolName}:`, error);
-          return null;
+          console.error(`Error processing tool ${toolCall.toolName}:`, error);
+          return {
+            tool_call_id: toolCall.callId,
+            tool_name: toolCall.toolName,
+            result:
+              error instanceof Error
+                ? error.message
+                : `Unhandled error calling ${toolCall.toolName}`,
+            isError: true,
+          };
         }
       });
 
@@ -1577,11 +1683,55 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         });
       }
 
-      finalToolResponses.forEach((response) => {
-        if (response) {
-          newMessages.push(response);
-        }
-      });
+      const toReplayText = (value: unknown, maxLength = 2000): string => {
+        const raw =
+          typeof value === "string"
+            ? value
+            : (() => {
+                try {
+                  return JSON.stringify(value);
+                } catch (_error) {
+                  return String(value ?? "");
+                }
+              })();
+        const normalized = String(raw ?? "").replace(/\s+/g, " ").trim();
+        if (normalized.length <= maxLength) return normalized;
+        return `${normalized.slice(0, maxLength - 3)}...`;
+      };
+
+      if (toolCallBatch.length > 0) {
+        const replayLines = toolCallBatch.map((toolCall, index) => {
+          const matchedResponse =
+            finalToolResponses.find(
+              (response: any) => response?.tool_call_id === toolCall.callId
+            ) || finalToolResponses[index];
+          const status = matchedResponse?.isError ? "error" : "ok";
+          const resultText = toReplayText(matchedResponse?.result ?? "No result returned");
+
+          return [
+            `Tool: ${toolCall.toolName}`,
+            `Call ID: ${toolCall.callId}`,
+            `Status: ${status}`,
+            `Args: ${toReplayText(toolCall.args, 600)}`,
+            `Result: ${resultText}`,
+          ].join("\n");
+        });
+
+        newMessages.push({
+          role: "user",
+          content: [
+            {
+              type: "text",
+              text: [
+                "Tool execution summary for the previous request:",
+                ...replayLines,
+                "Continue the same assistant response from exactly where you paused using these tool results.",
+                "If this response is using meta tags, keep the same format (<thinking>, <reasoning>, <searching>) in the continuation.",
+              ].join("\n\n"),
+            },
+          ],
+        });
+      }
 
       send(
         "",

package/src/hooks/useAgentRegistry.ts

@@ -39,6 +39,8 @@ export interface MCPServer {
   status: 'active' | 'inactive';
   executionMode: 'CLIENT' | 'SERVER';
   url?: string;
+  accessToken?: string;
+  headers?: Record<string, string>;
 }
 
 export interface AgentProfile {
@@ -343,4 +345,3 @@ function extractAgentNameFromMessage(message: string): string | null {
 }
 
 export default useAgentRegistry;
-

package/src/mcpAuth.ts

@@ -0,0 +1,36 @@
+import type { LLMAsAServiceCustomer } from "llmasaservice-client";
+
+export type MCPAuthPhase = "list" | "call";
+
+export interface MCPAuthHeaderResolverInput {
+  phase: MCPAuthPhase;
+  mcpServer: Record<string, unknown>;
+  projectId?: string;
+  customer?: LLMAsAServiceCustomer;
+  toolName?: string;
+  toolArgs?: unknown;
+}
+
+export type MCPAuthHeaderResolver = (
+  input: MCPAuthHeaderResolverInput
+) =>
+  | Record<string, string>
+  | null
+  | undefined
+  | Promise<Record<string, string> | null | undefined>;
+
+export function normalizeMcpHeaders(
+  value: Record<string, unknown> | null | undefined
+): Record<string, string> {
+  const normalized: Record<string, string> = {};
+  if (!value) return normalized;
+
+  for (const [key, raw] of Object.entries(value)) {
+    if (typeof raw !== "string") continue;
+    const trimmedValue = raw.trim();
+    if (!trimmedValue) continue;
+    normalized[key] = trimmedValue;
+  }
+
+  return normalized;
+}