76 lines
3.2 KiB
JavaScript
76 lines
3.2 KiB
JavaScript
import { useCopilotChatConfiguration } from "../providers/CopilotChatConfigurationProvider.mjs";
|
|
import { useCopilotKit } from "../providers/CopilotKitProvider.mjs";
|
|
import React, { useCallback, useMemo, useSyncExternalStore } from "react";
|
|
import { DEFAULT_AGENT_ID, partialJSONParse } from "@copilotkitnext/shared";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { ToolCallStatus } from "@copilotkitnext/core";
|
|
|
|
//#region src/hooks/use-render-tool-call.tsx
|
|
/**
|
|
* Memoized component that renders a single tool call.
|
|
* This prevents unnecessary re-renders when parent components update
|
|
* but the tool call data hasn't changed.
|
|
*/
|
|
const ToolCallRenderer = React.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
|
|
const args = useMemo(() => partialJSONParse(toolCall.function.arguments), [toolCall.function.arguments]);
|
|
const toolName = toolCall.function.name;
|
|
if (toolMessage) return /* @__PURE__ */ jsx(RenderComponent, {
|
|
name: toolName,
|
|
args,
|
|
status: ToolCallStatus.Complete,
|
|
result: toolMessage.content
|
|
});
|
|
else if (isExecuting) return /* @__PURE__ */ jsx(RenderComponent, {
|
|
name: toolName,
|
|
args,
|
|
status: ToolCallStatus.Executing,
|
|
result: void 0
|
|
});
|
|
else return /* @__PURE__ */ jsx(RenderComponent, {
|
|
name: toolName,
|
|
args,
|
|
status: ToolCallStatus.InProgress,
|
|
result: void 0
|
|
});
|
|
}, (prevProps, nextProps) => {
|
|
if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
|
|
if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
|
|
if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
|
|
if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
|
|
if (prevProps.isExecuting !== nextProps.isExecuting) return false;
|
|
if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
|
|
return true;
|
|
});
|
|
/**
|
|
* Hook that returns a function to render tool calls based on the render functions
|
|
* defined in CopilotKitProvider.
|
|
*
|
|
* @returns A function that takes a tool call and optional tool message and returns the rendered component
|
|
*/
|
|
function useRenderToolCall() {
|
|
const { copilotkit, executingToolCallIds } = useCopilotKit();
|
|
const agentId = useCopilotChatConfiguration()?.agentId ?? DEFAULT_AGENT_ID;
|
|
const renderToolCalls = useSyncExternalStore((callback) => {
|
|
return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
|
|
}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
|
|
return useCallback(({ toolCall, toolMessage }) => {
|
|
const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
|
|
const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
|
|
if (!renderConfig) return null;
|
|
const RenderComponent = renderConfig.render;
|
|
return /* @__PURE__ */ jsx(ToolCallRenderer, {
|
|
toolCall,
|
|
toolMessage,
|
|
RenderComponent,
|
|
isExecuting: executingToolCallIds.has(toolCall.id)
|
|
}, toolCall.id);
|
|
}, [
|
|
renderToolCalls,
|
|
executingToolCallIds,
|
|
agentId
|
|
]);
|
|
}
|
|
|
|
//#endregion
|
|
export { useRenderToolCall };
|
|
//# sourceMappingURL=use-render-tool-call.mjs.map
|