{"version":3,"file":"use-component.mjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import type {\n  StandardSchemaV1,\n  InferSchemaOutput,\n} from \"@copilotkitnext/shared\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\ntype InferRenderProps<T> = T extends StandardSchemaV1\n  ? InferSchemaOutput<T>\n  : any;\n\n/**\n * Registers a React component as a frontend tool renderer in chat.\n *\n * This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional schema parameters (any Standard Schema V1 compatible library),\n * - renders your component with tool call parameters.\n *\n * Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n *\n * When `parameters` is provided, render props are inferred from the schema.\n * When omitted, the render component may accept any props.\n *\n * @typeParam TSchema - Schema describing tool parameters, or `undefined` when no schema is given.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n *\n * @example\n * ```tsx\n * // Without parameters — render accepts any props\n * useComponent({\n *   name: \"showGreeting\",\n *   render: ({ message }: { message: string }) => <div>{message}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * // With parameters — render props inferred from schema\n * useComponent({\n *   name: \"showWeatherCard\",\n *   parameters: z.object({ city: z.string() }),\n *   render: ({ city }) => <div>{city}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * useComponent(\n *   {\n *     name: \"renderProfile\",\n *     parameters: z.object({ userId: z.string() }),\n *     render: ProfileCard,\n *     agentId: \"support-agent\",\n *   },\n *   [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n  TSchema extends StandardSchemaV1 | undefined = undefined,\n>(\n  config: {\n    name: string;\n    description?: string;\n    parameters?: TSchema;\n    render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n  const fullDescription = config.description\n    ? `${prefix}\\n\\n${config.description}`\n    : prefix;\n\n  useFrontendTool(\n    {\n      name: config.name,\n      description: fullDescription,\n      parameters: config.parameters,\n      render: ({ args }: { args: unknown }) => {\n        const Component = config.render;\n        return <Component {...(args as InferRenderProps<TSchema>)} />;\n      },\n      agentId: config.agentId,\n    },\n    deps,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,iBACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,WAA8B;GACvC,MAAM,YAAY,OAAO;AACzB,UAAO,oBAAC,aAAU,GAAK,OAAsC;;EAE/D,SAAS,OAAO;EACjB,EACD,KACD"}