@asgard-js/react 0.2.34-canary.2 → 0.2.34

package/README.md

@@ -317,6 +317,7 @@ config: {
 - **renderHeader?**: `() => ReactNode` - Custom header renderer. When provided, completely replaces the default header. Use `useAsgardContext()` inside the render function to access `resetChannel`, `isResetting`, and other internal state.
 - **renderMenu?**: `() => ReactNode` - Custom menu renderer. When provided, renders content between the chat body and footer. Useful for quick menus, suggested questions, or navigation panels. See [Custom Menu](#custom-menu) section for details.
 - **renderMessageContent?**: `(props: MessageContentRendererProps) => ReactNode` - Custom renderer for message content. Allows customizing how messages are rendered based on message properties. See [Custom Message Renderer](#custom-message-renderer) section for details.
+- **renderToolCallGroup?**: `(props: ToolCallGroupRendererProps) => ReactNode` - Custom renderer for tool call group. Return `null` to hide, return JSX to fully customize, or call `renderDefaultContent()` to use the default UI with optional overrides (e.g., `renderDefaultContent({ title: 'AI is thinking...' })`). See [Tool Call Group Renderer](#tool-call-group-renderer) section for details.
 - **onBeforeSendMessage?**: `(params: SendMessageParams) => SendMessageParams` - Callback to modify message params before sending. Allows injecting contextual data (payload, metadata) from parent components. See [Before Send Message Hook](#before-send-message-hook) section for details.
 - **onSseMessage**: `(response: SseResponse, ctx: AsgardServiceContextValue) => void` - Callback function when SSE message is received. It would be helpful if using with the ref to provide some context and conversation data and do some proactively actions like sending messages to the bot.
 - **ref**: `ForwardedRef<ChatbotRef>` - Forwarded ref to access the chatbot instance. It can be used to access the chatbot instance and do some actions like sending messages to the bot. `ChatbotRef` provides `serviceContext` for interacting with the chatbot, and `setInputValue(value: string)` for programmatically setting the textarea text from outside the component.
@@ -592,7 +593,7 @@ Note: When `fullScreen` prop is set to `true`, the chatbot's width and height wi
 
 ### Tool Call Handler
 
-The `onToolCall` callback allows you to handle tool call events from the bot. This handler is triggered when the bot starts or completes executing a tool call. See the [Tool Call Start documentation](https://www.asgard-ai.com/docs/developer-reference/api-doc/send-message/sse-response/asgard-tool-call-start) and [Tool Call Complete documentation](https://www.asgard-ai.com/docs/developer-reference/api-doc/send-message/sse-response/asgard-tool-call-complete) for details.
+The `onToolCall` callback allows you to handle tool call events from the bot. This handler is triggered when the bot starts or completes executing a tool call. See the [Tool Call Start documentation](https://docs.asgard-ai.com/docs/developer-reference/api-doc/send-message/sse-response/asgard-tool-call-start) and [Tool Call Complete documentation](https://docs.asgard-ai.com/docs/developer-reference/api-doc/send-message/sse-response/asgard-tool-call-complete) for details.
 
 The callback receives a `SseResponse` object with one of the following event types:
 
@@ -699,13 +700,13 @@ const handleToolCall = (response: SseResponse<EventType.TOOL_CALL_START | EventT
 
 ### EMIT Action
 
-EMIT buttons allow you to handle custom actions in your application. Implement the `onTemplateBtnClick` callback to process these events. See the [EMIT Action documentation](https://www.asgard-ai.com/docs/developer-reference/asgard-builtin/message-template-action-object-emit) for details.
+EMIT buttons allow you to handle custom actions in your application. Implement the `onTemplateBtnClick` callback to process these events. See the [EMIT Action documentation](https://docs.asgard-ai.com/docs/developer-reference/asgard-builtin/message-template-action-object-emit) for details.
 
 The callback receives the following parameters:
 
 1. `payload` (optional): Custom data from the button action
 2. `eventName` (required): Event name specified in the button action
-3. `raw` (required): Complete SSE response data as JSON string. Use this when you need information beyond `payload` and `eventName`. Parse it to access additional fields from the original SSE response. See [SSE Response documentation](https://www.asgard-ai.com/docs/developer-reference/api-doc/send-message/sse-response/message-complete) for the complete response structure.
+3. `raw` (required): Complete SSE response data as JSON string. Use this when you need information beyond `payload` and `eventName`. Parse it to access additional fields from the original SSE response. See [SSE Response documentation](https://docs.asgard-ai.com/docs/developer-reference/api-doc/send-message/sse-response/message-complete) for the complete response structure.
 
 Configure EMIT buttons in your backend SSE response:
 
@@ -834,6 +835,75 @@ messageActions={(message) => {
 <a id="custom-message-renderer"></a>
 <br/>
 
+<a id="tool-call-group-renderer"></a>
+<br/>
+
+### Tool Call Group Renderer
+
+The `renderToolCallGroup` prop allows you to customize or hide the "Answer preparation steps" UI that appears when the bot calls tools before responding.
+
+#### ToolCallGroupRendererProps Interface
+
+```typescript
+interface ToolCallGroupRendererProps {
+  /** Tool call items in the group */
+  items: ToolCallItemData[];
+  /** Timestamp of the first tool call */
+  time?: Date;
+  /** Function to render the default tool call group UI. Accepts optional overrides. */
+  renderDefaultContent: (overrides?: { title?: string }) => ReactNode;
+}
+
+interface ToolCallItemData {
+  id: string;
+  label: string;
+  status: 'pending' | 'completed' | 'error';
+  initial?: Record<string, unknown>;
+  result?: Record<string, unknown>;
+}
+```
+
+#### Hide completely
+
+```typescript
+<Chatbot
+  renderToolCallGroup={() => null}
+  ...
+/>
+```
+
+#### Custom title
+
+```typescript
+<Chatbot
+  renderToolCallGroup={({ renderDefaultContent }) =>
+    renderDefaultContent({ title: 'AI is thinking...' })
+  }
+  ...
+/>
+```
+
+#### Custom UI
+
+```typescript
+<Chatbot
+  renderToolCallGroup={({ items }) => {
+    const done = items.filter(i => i.status === 'completed').length;
+    return (
+      <div>
+        {done === items.length
+          ? `✅ ${done} steps completed`
+          : `⏳ Processing...`}
+      </div>
+    );
+  }}
+  ...
+/>
+```
+
+<a id="custom-message-renderer"></a>
+<br/>
+
 ### Custom Message Renderer
 
 The `renderMessageContent` prop allows you to customize how messages are rendered based on message type, payload, or other conditions. This is useful for implementing custom message cards, special UI treatments, or integrating with your application's design system.

package/dist/components/chatbot/chatbot-body/chatbot-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot-body.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-body/chatbot-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAA2C,MAAM,OAAO,CAAC;AAkErF,wBAAgB,WAAW,IAAI,SAAS,CAqHvC"}
+{"version":3,"file":"chatbot-body.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-body/chatbot-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAA2C,MAAM,OAAO,CAAC;AAkErF,wBAAgB,WAAW,IAAI,SAAS,CAwHvC"}

package/dist/context/asgard-template-context.d.ts

@@ -28,6 +28,19 @@ export interface MessageContentRendererProps {
     /** Container component that wraps custom content with Avatar for bot messages */
     MessageContainer: FC<MessageContainerProps>;
 }
+/**
+ * Props passed to the custom tool call group renderer function
+ */
+export interface ToolCallGroupRendererProps {
+    /** Tool call items in the group */
+    items: ToolCallItemData[];
+    /** Timestamp of the first tool call */
+    time?: Date;
+    /** Function to render the default tool call group UI. Accepts optional overrides. */
+    renderDefaultContent: (overrides?: {
+        title?: string;
+    }) => ReactNode;
+}
 export interface AsgardTemplateContextValue {
     onErrorClick?: (message: ConversationErrorMessage) => void;
     errorMessageRenderer?: (message: ConversationErrorMessage) => ReactNode;
@@ -40,10 +53,7 @@ export interface AsgardTemplateContextValue {
     /** Custom renderer for message content. Allows customizing how messages are rendered based on message properties. */
     renderMessageContent?: (props: MessageContentRendererProps) => ReactNode;
     /** Custom renderer for tool call group. Return null to hide, or return custom JSX. */
-    renderToolCallGroup?: (items: ToolCallItemData[], context: {
-        time?: Date;
-        defaultRender: () => ReactNode;
-    }) => ReactNode;
+    renderToolCallGroup?: (props: ToolCallGroupRendererProps) => ReactNode;
 }
 export declare const AsgardTemplateContext: import('react').Context<AsgardTemplateContextValue>;
 interface AsgardTemplateContextProviderProps extends PropsWithChildren {
@@ -54,10 +64,7 @@ interface AsgardTemplateContextProviderProps extends PropsWithChildren {
     messageActions?: (message: ConversationBotMessage) => MessageActionConfig[];
     onMessageAction?: (actionId: string, message: ConversationBotMessage) => void;
     renderMessageContent?: (props: MessageContentRendererProps) => ReactNode;
-    renderToolCallGroup?: (items: ToolCallItemData[], context: {
-        time?: Date;
-        defaultRender: () => ReactNode;
-    }) => ReactNode;
+    renderToolCallGroup?: (props: ToolCallGroupRendererProps) => ReactNode;
 }
 export declare function AsgardTemplateContextProvider(props: AsgardTemplateContextProviderProps): ReactNode;
 export declare function useAsgardTemplateContext(): AsgardTemplateContextValue;

package/dist/context/asgard-template-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asgard-template-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-template-context.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"asgard-template-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-template-context.tsx"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -41789,11 +41789,12 @@ function i_e() {
       children: /* @__PURE__ */ V("div", { ref: f, className: t1.chatbot_body__content, style: h, children: [
         t_e(Array.from(n?.values() ?? [])).map((p, g) => {
           if (p.type === "tool-call-group") {
-            const m = p.toolCalls.map(n_e), y = p.toolCalls[0], _ = `tool-call-group-${y?.processId || g}`, b = () => /* @__PURE__ */ k(Nye, { items: m, time: y?.time });
+            const m = p.toolCalls.map(n_e), y = p.toolCalls[0], _ = `tool-call-group-${y?.processId || g}`, b = (v) => /* @__PURE__ */ k(Nye, { items: m, time: y?.time, title: v?.title });
             if (t) {
-              const v = t(m, {
+              const v = t({
+                items: m,
                 time: y?.time,
-                defaultRender: b
+                renderDefaultContent: b
               });
               return v === null ? null : /* @__PURE__ */ k(qk, { children: v }, _);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.2.34-canary.2",
+  "version": "0.2.34",
   "publishConfig": {
     "access": "public"
   },
@@ -46,7 +46,7 @@
     "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.2.33",
+    "@asgard-js/core": "^0.2.34",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }