feat: jsonrpc tool call card (#12)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Junyi-99

webapp/_webapp/src/components/message-entry-container/tools/jsonrpc.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@heroui/react";
+import { JsonRpcResult } from "./utils/common";
+import MarkdownComponent from "../../markdown";
+import { LoadingIndicator } from "../../loading-indicator";
+import { useState } from "react";
+
+type JsonRpcProps = {
+  functionName: string;
+  jsonRpcResult: JsonRpcResult;
+  preparing: boolean;
+  animated: boolean;
+};
+
+export const JsonRpc = ({ functionName, jsonRpcResult, preparing, animated }: JsonRpcProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  if (preparing) {
+    return (
+      <div className={cn("tool-card", { animated: animated })}>
+        <div className="flex items-center justify-between">
+          <h3 className="tool-card-title tool-card-jsonrpc">{functionName}</h3>
+        </div>
+        <LoadingIndicator text="Processing ..." estimatedSeconds={300} />
+      </div>
+    );
+  }
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  return (
+    <div className={cn("tool-card noselect narrow", { animated: animated })}>
+      <div className="flex items-center justify-between cursor-pointer" onClick={toggleCollapse}>
+        <h3 className="tool-card-title tool-card-jsonrpc">{functionName}</h3>
+        <button
+          className="text-gray-400 hover:text-gray-600 transition-colors duration-200 p-1 rounded"
+          aria-label={isCollapsed ? "Expand" : "Collapse"}
+        >
+          <svg
+            className={cn("w-4 h-4 transition-transform duration-200", {
+              "rotate-180": !isCollapsed
+            })}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      </div>
+      
+      <div className={cn("canselect overflow-hidden transition-all duration-300 ease-in-out", {
+        "max-h-0 opacity-0": isCollapsed,
+        "max-h-[1000px] opacity-100": !isCollapsed
+      })}>
+        {jsonRpcResult.result && (
+          <div className="text-xs">
+            <MarkdownComponent animated={animated}>
+            {jsonRpcResult.result.content?.map((content) => content.text).join("\n") || ""}
+          </MarkdownComponent>
+            </div>
+        )}
+
+        {jsonRpcResult.error && (
+          <div className="text-xs text-red-600">
+            {jsonRpcResult.error.message}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

webapp/_webapp/src/components/message-entry-container/tools/tools.tsx

@@ -4,6 +4,8 @@ import { UnknownToolCard } from "./unknown";
 import { GreetingCard } from "./greeting";
 import { ErrorToolCard } from "./error";
 import { AlwaysExceptionCard } from "./always-exception";
+import { JsonRpc } from "./jsonrpc";
+import { parseJsonRpcResult, UNKNOWN_JSONRPC_RESULT } from "./utils/common";
 
 type ToolsProps = {
   messageId: string;
@@ -14,11 +16,26 @@ type ToolsProps = {
   animated: boolean;
 };
 
+// define a const string list.
+const XTRA_MCP_TOOL_NAMES = [
+  "enhance_academic_writing",
+  "search_relevant_papers",
+  "search_user",
+  "identify_improvements",
+  "get_user_papers",
+  "deep_research",
+  "get_conference_papers",
+  "search_papers_on_openreview",
+  "search_papers",
+];
+
 export default function Tools({ messageId, functionName, message, error, preparing, animated }: ToolsProps) {
   if (error && error !== "") {
     return <ErrorToolCard functionName={functionName} errorMessage={error} animated={animated} />;
   }
 
+  const jsonRpcResult = parseJsonRpcResult(message);
+
   if (functionName === "paper_score") {
     return <PaperScoreCard message={message} preparing={preparing} animated={animated} />;
   } else if (functionName === "paper_score_comment") {
@@ -27,7 +44,14 @@ export default function Tools({ messageId, functionName, message, error, prepari
     return <GreetingCard message={message} preparing={preparing} animated={animated} />;
   } else if (functionName === "always_exception") {
     return <AlwaysExceptionCard message={message} preparing={preparing} animated={animated} />;
+  } else if (XTRA_MCP_TOOL_NAMES.includes(functionName)) {
+    return <JsonRpc functionName={functionName} jsonRpcResult={jsonRpcResult || UNKNOWN_JSONRPC_RESULT} preparing={preparing} animated={animated} />;
   }
 
-  return <UnknownToolCard functionName={functionName} message={message} animated={animated} />;
+  // fallback to unknown tool card if the json rpc result is not defined
+  if (jsonRpcResult) {
+    return <JsonRpc functionName={functionName} jsonRpcResult={jsonRpcResult} preparing={preparing} animated={animated} />;
+  } else {
+    return <UnknownToolCard functionName={functionName} message={message} animated={animated} />;
+  }
 }

webapp/_webapp/src/components/message-entry-container/tools/unknown-jsonrpc.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@heroui/react";
+
+type UnknownJsonRpcProps = {
+  functionName: string;
+  message: string;
+  animated: boolean;
+};
+
+export const UnknownJsonRpc = ({ functionName, message, animated }: UnknownJsonRpcProps) => {
+  return (
+    <div className={cn("tool-card", { animated: animated })}>
+      <h3 className="text-xs font-semibold font-sans text-primary-700 uppercase tracking-wider mb-1">
+        Unknown JsonRPC "{functionName}"
+      </h3>
+      <span className="text-xs text-primary-600">{message}</span>
+    </div>
+  );
+};

webapp/_webapp/src/components/message-entry-container/tools/utils/common.tsx

@@ -0,0 +1,83 @@
+export type JsonRpcResult = {
+    jsonrpc: string;
+    id: number;
+    result?: {
+        content: Array<{
+            type: string;
+            text: string;
+        }>;
+    };
+    error?: {
+        code: number;
+        message: string;
+    }
+}
+
+export const UNKNOWN_JSONRPC_RESULT: JsonRpcResult = {
+    jsonrpc: "2.0",
+    id: -1,
+    error: {
+        code: -1,
+        message: "Unknown JSONRPC result",
+    },
+}
+
+const isValidJsonRpcResult = (obj: any): obj is JsonRpcResult => {
+    // Check if obj is an object and not null
+    if (typeof obj !== 'object' || obj === null) {
+        return false;
+    }
+
+    // Check required properties
+    if (typeof obj.jsonrpc !== 'string' || typeof obj.id !== 'number') {
+        return false;
+    }
+
+    // Check that either result or error is present (but not both required)
+    const hasResult = obj.result !== undefined;
+    const hasError = obj.error !== undefined;
+
+    // Validate result structure if present
+    if (hasResult) {
+        if (typeof obj.result !== 'object' || obj.result === null) {
+            return false;
+        }
+        if (obj.result.content !== undefined) {
+            if (!Array.isArray(obj.result.content)) {
+                return false;
+            }
+            // Validate each content item
+            for (const item of obj.result.content) {
+                if (typeof item !== 'object' || item === null ||
+                    typeof item.type !== 'string' || typeof item.text !== 'string') {
+                    return false;
+                }
+            }
+        }
+    }
+
+    // Validate error structure if present
+    if (hasError) {
+        if (typeof obj.error !== 'object' || obj.error === null ||
+            typeof obj.error.code !== 'number' || typeof obj.error.message !== 'string') {
+            return false;
+        }
+    }
+
+    return true;
+};
+
+export const parseJsonRpcResult = (message: string): JsonRpcResult | undefined => {
+    try {
+        const json = JSON.parse(message);
+        
+        // Validate the structure before casting
+        if (isValidJsonRpcResult(json)) {
+            return json;
+        }
+        
+        return undefined;
+    } catch (error) {
+        return undefined;
+    }
+}

webapp/_webapp/src/index.css

@@ -91,16 +91,25 @@ body {
   border-color: var(--pd-border-color);
 }
 
+.tool-card.narrow {
+  @apply px-2 py-0 my-1 bg-transparent;
+}
+
 .tool-card.animated {
   opacity: 0;
   animation: toolCardAppear 0.5s ease-out 200ms forwards;
   transition-behavior: allow-discrete;
 }
 
 .tool-card-title {
-  @apply text-xs font-semibold font-sans text-primary-700 uppercase tracking-wider mb-1 noselect;
+  @apply text-xs font-semibold font-sans text-primary-700 uppercase tracking-wider noselect;
 }
 
+.tool-card-title.tool-card-jsonrpc {
+  @apply font-medium text-gray-500;
+}
+
+
 /* 相邻 tool-card 的样式处理 */
 .tool-card + .tool-card {
   /* 相邻的第二个卡片：移除上边框，调整上圆角，减少上边距，减少上 padding */