Merge slot B5 into blitz/lgp-genuine-pass/integration

Author: AlemTuzlak

packages/react-core/src/v2/hooks/use-default-render-tool.tsx

@@ -63,7 +63,7 @@ export function useDefaultRenderTool(
   );
 }
 
-function DefaultToolCallRenderer({
+export function DefaultToolCallRenderer({
   name,
   parameters,
   status,
@@ -86,6 +86,11 @@ function DefaultToolCallRenderer({
 
   return (
     <div
+      data-testid="copilot-tool-render"
+      data-tool-name={name}
+      data-status={statusString}
+      data-args={safeStringifyForAttr(parameters)}
+      data-result={safeStringifyForAttr(result)}
       style={{
         marginTop: "8px",
         paddingBottom: "8px",
@@ -150,6 +155,7 @@ function DefaultToolCallRenderer({
               }}
             />
             <span
+              data-testid="copilot-tool-render-name"
               style={{
                 fontSize: "13px",
                 fontWeight: 600,
@@ -164,6 +170,7 @@ function DefaultToolCallRenderer({
           </div>
 
           <span
+            data-testid="copilot-tool-render-status"
             style={{
               display: "inline-flex",
               alignItems: "center",
@@ -252,3 +259,13 @@ function DefaultToolCallRenderer({
     </div>
   );
 }
+
+function safeStringifyForAttr(value: unknown): string {
+  if (value === undefined || value === null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}

packages/react-core/src/v2/hooks/use-render-tool-call.tsx

@@ -6,6 +6,7 @@ import { useCopilotChatConfiguration } from "../providers/CopilotChatConfigurati
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { partialJSONParse } from "@copilotkit/shared";
 import { ReactToolCallRenderer } from "../types/react-tool-call-renderer";
+import { DefaultToolCallRenderer } from "./use-default-render-tool";
 
 export interface UseRenderToolCallProps {
   toolCall: ToolCall;
@@ -153,11 +154,12 @@ export function useRenderToolCall() {
         exactMatches[0] ||
         renderToolCalls.find((rc) => rc.name === "*");
 
-      if (!renderConfig) {
-        return null;
-      }
-
-      const RenderComponent = renderConfig.render;
+      // Fall back to the framework's built-in default tool-call renderer
+      // when neither a per-tool nor a wildcard renderer has been
+      // registered. This makes "zero custom renderers" demos paint tool
+      // calls out-of-the-box instead of going invisible.
+      const RenderComponent = (renderConfig?.render ??
+        defaultToolCallRenderAdapter) as ReactToolCallRenderer<unknown>["render"];
       const isExecuting = executingToolCallIds.has(toolCall.id);
 
       // Use the memoized ToolCallRenderer component to prevent unnecessary re-renders
@@ -176,3 +178,31 @@ export function useRenderToolCall() {
 
   return renderToolCall;
 }
+
+// Adapter that bridges the ReactToolCallRenderer signature
+// (`{ name, args, status, result, toolCallId }`) to the
+// `DefaultToolCallRenderer` signature (`{ name, parameters, status,
+// result }`) so the latter can be used as a zero-config fallback when
+// no `*` renderer is registered.
+function defaultToolCallRenderAdapter(props: {
+  name: string;
+  args: unknown;
+  status: ToolCallStatus;
+  result: string | undefined;
+  toolCallId: string;
+}): React.ReactElement {
+  const status =
+    props.status === ToolCallStatus.Complete
+      ? "complete"
+      : props.status === ToolCallStatus.Executing
+        ? "executing"
+        : "inProgress";
+  return (
+    <DefaultToolCallRenderer
+      name={props.name}
+      parameters={props.args}
+      status={status}
+      result={props.result}
+    />
+  );
+}

showcase/aimock/d5-all.json

@@ -1,6 +1,207 @@
 {
   "_comment": "Bundled D5 (e2e-deep) fixtures. Source files: showcase/harness/fixtures/d5/*.json (auto-merged). Uses hasToolResult matching for multi-turn disambiguation. Loaded by aimock before feature-parity.json for match precedence. The first 7 entries below are the open-gen-ui (4) and open-gen-ui-advanced (3) pill fixtures — they emit deterministic generateSandboxedUi tool calls and intentionally appear before everything else so they win first-match-wins ordering against the showcase-assistant 'hi' catch-all in feature-parity.json. Verbatim pill messages are owned by langgraph-python/src/app/demos/open-gen-ui/suggestions.ts and open-gen-ui-advanced/suggestions.ts. Source-of-truth: showcase/harness/fixtures/d5/gen-ui-open.json.",
   "fixtures": [
+    {
+      "_comment": "tool-rendering pill: Chain tools — emit 3 tool calls in one assistant turn (get_weather Tokyo + search_flights SFO->Tokyo + roll_d20=11). MUST appear before the bare 'weather in Tokyo' fixture below; substring match would otherwise leak into this prompt.",
+      "match": {
+        "userMessage": "Chain a few tools in this single turn",
+        "hasToolResult": false
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_chain_weather_001",
+            "name": "get_weather",
+            "arguments": "{\"location\":\"Tokyo\"}"
+          },
+          {
+            "id": "call_tr_chain_flights_001",
+            "name": "search_flights",
+            "arguments": "{\"origin\":\"SFO\",\"destination\":\"Tokyo\"}"
+          },
+          {
+            "id": "call_tr_chain_roll_001",
+            "name": "roll_d20",
+            "arguments": "{\"value\":11}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "Chain a few tools in this single turn",
+        "hasToolResult": true
+      },
+      "response": {
+        "content": "Done — Tokyo is sunny, three flights found, and the d20 came up 11."
+      }
+    },
+    {
+      "_comment": "tool-rendering pill: Weather in SF — verbatim pill prompt, deterministic San Francisco values.",
+      "match": {
+        "userMessage": "What's the weather in San Francisco?",
+        "hasToolResult": false
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_weather_sf_001",
+            "name": "get_weather",
+            "arguments": "{\"location\":\"San Francisco\"}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "What's the weather in San Francisco?",
+        "hasToolResult": true
+      },
+      "response": {
+        "content": "San Francisco is currently 68°F and sunny with light winds."
+      }
+    },
+    {
+      "_comment": "tool-rendering pill: Find flights — verbatim pill prompt, dedicated search_flights fixture. MUST take precedence over the a2ui beautiful-chat fixture below (which uses the same tool name with non-flight-list args shape).",
+      "match": {
+        "userMessage": "Find flights from SFO to JFK.",
+        "hasToolResult": false
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_flights_sfo_jfk_001",
+            "name": "search_flights",
+            "arguments": "{\"origin\":\"SFO\",\"destination\":\"JFK\"}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "Find flights from SFO to JFK.",
+        "hasToolResult": true
+      },
+      "response": {
+        "content": "Three flights from SFO to JFK — United UA231 at 08:15 ($348), Delta DL412 at 11:20 ($312), and JetBlue B6722 at 17:05 ($289)."
+      }
+    },
+    {
+      "_comment": "tool-rendering pill: Stock price — verbatim pill prompt, AAPL with deterministic price/change.",
+      "match": {
+        "userMessage": "What's the current price of AAPL?",
+        "hasToolResult": false
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_stock_aapl_001",
+            "name": "get_stock_price",
+            "arguments": "{\"ticker\":\"AAPL\"}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "What's the current price of AAPL?",
+        "hasToolResult": true
+      },
+      "response": {
+        "content": "AAPL is trading at $338.37, down 2.96% on the day."
+      }
+    },
+    {
+      "_comment": "tool-rendering pill: Roll a d20 — exactly 5 sequential roll_d20 calls returning [7, 14, 3, 19, 20]. Disambiguated by turnIndex (count of assistant messages so far) so the sequence is stateless across test runs.",
+      "match": {
+        "userMessage": "Roll a 20-sided die.",
+        "turnIndex": 0,
+        "hasToolResult": false
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_d20_seq_001",
+            "name": "roll_d20",
+            "arguments": "{\"value\":7}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "Roll a 20-sided die.",
+        "turnIndex": 1,
+        "hasToolResult": true
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_d20_seq_002",
+            "name": "roll_d20",
+            "arguments": "{\"value\":14}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "Roll a 20-sided die.",
+        "turnIndex": 2,
+        "hasToolResult": true
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_d20_seq_003",
+            "name": "roll_d20",
+            "arguments": "{\"value\":3}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "Roll a 20-sided die.",
+        "turnIndex": 3,
+        "hasToolResult": true
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_d20_seq_004",
+            "name": "roll_d20",
+            "arguments": "{\"value\":19}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "Roll a 20-sided die.",
+        "turnIndex": 4,
+        "hasToolResult": true
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "id": "call_tr_d20_seq_005",
+            "name": "roll_d20",
+            "arguments": "{\"value\":20}"
+          }
+        ]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "Roll a 20-sided die.",
+        "turnIndex": 5,
+        "hasToolResult": true
+      },
+      "response": {
+        "content": "Rolled the d20 five times — landed on 20 on the final roll."
+      }
+    },
     {
       "match": {
         "userMessage": "3D axis visualization (model airplane)"

showcase/integrations/langgraph-python/src/agents/tool_rendering_agent.py

@@ -19,12 +19,14 @@
 from langchain_openai import ChatOpenAI
 from copilotkit import CopilotKitMiddleware
 
-# One-tool-per-question prompt.
+# Multi-tool-per-question prompt.
 #
 # This backend serves the tool-rendering demos, whose JOB is to show the
-# rendering patterns (per-tool, catch-all, default fallback). One tool
-# call per user turn is enough to demonstrate them — chained calls just
-# clutter the chat and surprise users.
+# rendering patterns (per-tool, catch-all, default fallback). The agent
+# may call multiple tools per turn when the user asks for them. The
+# `roll_d20` tool accepts a deterministic `value` parameter so the
+# aimock fixtures can script the exact dice sequence the e2e tests
+# assert against.
 SYSTEM_PROMPT = (
     "You are a helpful travel & lifestyle concierge. You have mock tools "
     "for weather, flights, stock prices, and dice rolls — they all return "
@@ -35,14 +37,12 @@
     "destination (default origin to 'SFO' if the user only names a "
     "destination).\n"
     "  - Stock questions → call `get_stock_price` with the ticker.\n"
-    "  - Dice rolls → call `roll_dice` with the requested sides.\n"
+    "  - d20 rolls → call `roll_d20` (it returns a deterministic value).\n"
     "  - Anything else → reply in plain text.\n\n"
-    "By default, call exactly ONE tool per user question and do NOT chain "
-    "tools or fetch related data the user didn't ask for. The ONLY "
-    "exception is when the user explicitly asks you to chain or call "
-    "multiple tools in a single turn — then call each tool the user "
-    "requested. After tools return, write one short sentence summarizing "
-    "the result. Never fabricate data a tool could provide."
+    "When the user asks you to chain or call multiple tools in a single "
+    "turn, call each tool they requested. After tools return, write one "
+    "short sentence summarizing the result. Never fabricate data a tool "
+    "could provide."
 )
 
 
@@ -103,16 +103,23 @@ def get_stock_price(ticker: str) -> dict:
 
 
 @tool
-def roll_dice(sides: int = 6) -> dict:
-    """Roll a single die with the given number of sides."""
-    return {"sides": sides, "result": randint(1, max(2, sides))}
+def roll_d20(value: int = 0) -> dict:
+    """Roll a 20-sided die.
+
+    The `value` argument lets the LLM (or aimock fixture) script a
+    deterministic roll for testing — the tool simply echoes it back as
+    the result. When called without `value` (or with 0), the tool
+    returns a random natural d20 roll.
+    """
+    rolled = value if isinstance(value, int) and 1 <= value <= 20 else randint(1, 20)
+    return {"sides": 20, "value": rolled, "result": rolled}
 
 
 model = ChatOpenAI(model="gpt-4o-mini")
 
 graph = create_agent(
     model=model,
-    tools=[get_weather, search_flights, get_stock_price, roll_dice],
+    tools=[get_weather, search_flights, get_stock_price, roll_d20],
     middleware=[CopilotKitMiddleware()],
     system_prompt=SYSTEM_PROMPT,
 )