ikoncomponents 1.6.3 → 1.6.5

package/dist/vendor/assistant-ui-react/src/model-context/frame/AssistantFrameHost.d.ts

@@ -0,0 +1,36 @@
+import { ModelContextProvider, ModelContext } from "../ModelContextTypes";
+import { Unsubscribe } from "../../types/Unsubscribe";
+/**
+ * AssistantFrameHost - Runs in the parent window and acts as a ModelContextProvider
+ * that receives context from an iframe's AssistantFrameProvider.
+ *
+ * Usage example:
+ * ```typescript
+ * // In parent window
+ * const frameHost = new AssistantFrameHost(iframeWindow);
+ *
+ * // Register with assistant runtime
+ * const runtime = useAssistantRuntime();
+ * runtime.registerModelContextProvider(frameHost);
+ *
+ * // The assistant now has access to tools from the iframe
+ * ```
+ */
+export declare class AssistantFrameHost implements ModelContextProvider {
+    private _context;
+    private _subscribers;
+    private _pendingRequests;
+    private _requestCounter;
+    private _iframeWindow;
+    private _targetOrigin;
+    constructor(iframeWindow: Window, targetOrigin?: string);
+    private handleMessage;
+    private updateContext;
+    private callTool;
+    private sendRequest;
+    private requestContext;
+    private notifySubscribers;
+    getModelContext(): ModelContext;
+    subscribe(callback: () => void): Unsubscribe;
+    dispose(): void;
+}

package/dist/vendor/assistant-ui-react/src/model-context/frame/AssistantFrameHost.js

@@ -0,0 +1,145 @@
+import { FRAME_MESSAGE_CHANNEL, } from "./AssistantFrameTypes";
+/**
+ * Deserializes tools from JSON Schema format back to Tool objects
+ */
+const deserializeTool = (serializedTool) => (Object.assign(Object.assign(Object.assign({ parameters: serializedTool.parameters }, (serializedTool.description && {
+    description: serializedTool.description,
+})), (serializedTool.disabled !== undefined && {
+    disabled: serializedTool.disabled,
+})), (serializedTool.type && { type: serializedTool.type })));
+/**
+ * Deserializes a ModelContext from transmission format
+ */
+const deserializeModelContext = (serialized) => (Object.assign(Object.assign({}, (serialized.system !== undefined && { system: serialized.system })), (serialized.tools && {
+    tools: Object.fromEntries(Object.entries(serialized.tools).map(([name, tool]) => [
+        name,
+        deserializeTool(tool),
+    ])),
+})));
+/**
+ * AssistantFrameHost - Runs in the parent window and acts as a ModelContextProvider
+ * that receives context from an iframe's AssistantFrameProvider.
+ *
+ * Usage example:
+ * ```typescript
+ * // In parent window
+ * const frameHost = new AssistantFrameHost(iframeWindow);
+ *
+ * // Register with assistant runtime
+ * const runtime = useAssistantRuntime();
+ * runtime.registerModelContextProvider(frameHost);
+ *
+ * // The assistant now has access to tools from the iframe
+ * ```
+ */
+export class AssistantFrameHost {
+    constructor(iframeWindow, targetOrigin = "*") {
+        this._context = {};
+        this._subscribers = new Set();
+        this._pendingRequests = new Map();
+        this._requestCounter = 0;
+        this._iframeWindow = iframeWindow;
+        this._targetOrigin = targetOrigin;
+        this.handleMessage = this.handleMessage.bind(this);
+        window.addEventListener("message", this.handleMessage);
+        // Request initial context
+        this.requestContext();
+    }
+    handleMessage(event) {
+        var _a;
+        // Security: Validate origin and source
+        if (this._targetOrigin !== "*" && event.origin !== this._targetOrigin)
+            return;
+        if (event.source !== this._iframeWindow)
+            return;
+        if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.channel) !== FRAME_MESSAGE_CHANNEL)
+            return;
+        const message = event.data.message;
+        switch (message.type) {
+            case "model-context-update": {
+                this.updateContext(message.context);
+                break;
+            }
+            case "tool-result": {
+                const pending = this._pendingRequests.get(message.id);
+                if (pending) {
+                    if (message.error) {
+                        pending.reject(new Error(message.error));
+                    }
+                    else {
+                        pending.resolve(message.result);
+                    }
+                    this._pendingRequests.delete(message.id);
+                }
+                break;
+            }
+        }
+    }
+    updateContext(serializedContext) {
+        const context = deserializeModelContext(serializedContext);
+        this._context = Object.assign(Object.assign({}, context), { tools: context.tools &&
+                Object.fromEntries(Object.entries(context.tools).map(([name, tool]) => [
+                    name,
+                    Object.assign(Object.assign({}, tool), { execute: (args) => this.callTool(name, args) }),
+                ])) });
+        this.notifySubscribers();
+    }
+    callTool(toolName, args) {
+        return this.sendRequest({
+            type: "tool-call",
+            id: `tool-${this._requestCounter++}`,
+            toolName,
+            args,
+        }, 30000, `Tool call "${toolName}" timed out`);
+    }
+    sendRequest(message, timeout = 30000, timeoutMessage = "Request timed out") {
+        return new Promise((resolve, reject) => {
+            this._pendingRequests.set(message.id, { resolve, reject });
+            this._iframeWindow.postMessage({ channel: FRAME_MESSAGE_CHANNEL, message }, this._targetOrigin);
+            const timeoutId = setTimeout(() => {
+                const pending = this._pendingRequests.get(message.id);
+                if (pending) {
+                    pending.reject(new Error(timeoutMessage));
+                    this._pendingRequests.delete(message.id);
+                }
+            }, timeout);
+            // Store original resolve/reject with timeout cleanup
+            const originalResolve = this._pendingRequests.get(message.id).resolve;
+            const originalReject = this._pendingRequests.get(message.id).reject;
+            this._pendingRequests.set(message.id, {
+                resolve: (value) => {
+                    clearTimeout(timeoutId);
+                    originalResolve(value);
+                },
+                reject: (error) => {
+                    clearTimeout(timeoutId);
+                    originalReject(error);
+                },
+            });
+        });
+    }
+    requestContext() {
+        // Request current context from iframe
+        this._iframeWindow.postMessage({
+            channel: FRAME_MESSAGE_CHANNEL,
+            message: {
+                type: "model-context-request",
+            },
+        }, this._targetOrigin);
+    }
+    notifySubscribers() {
+        this._subscribers.forEach((callback) => callback());
+    }
+    getModelContext() {
+        return this._context;
+    }
+    subscribe(callback) {
+        this._subscribers.add(callback);
+        return () => this._subscribers.delete(callback);
+    }
+    dispose() {
+        window.removeEventListener("message", this.handleMessage);
+        this._subscribers.clear();
+        this._pendingRequests.clear();
+    }
+}

package/dist/vendor/assistant-ui-react/src/model-context/frame/AssistantFrameProvider.d.ts

@@ -0,0 +1,40 @@
+import { ModelContextProvider } from "../ModelContextTypes";
+import { Unsubscribe } from "../../types/Unsubscribe";
+/**
+ * AssistantFrameProvider - Runs inside an iframe and provides ModelContextProviders
+ * to the parent window's AssistantFrameHost.
+ *
+ * Usage example:
+ * ```typescript
+ * // Inside the iframe
+ * // Add model context providers
+ * const registry = new ModelContextRegistry();
+ * AssistantFrameProvider.addModelContextProvider(registry);
+ *
+ * // Add tools to registry
+ * registry.addTool({
+ *   toolName: "search",
+ *   description: "Search the web",
+ *   parameters: z.object({ query: z.string() }),
+ *   execute: async (args) => {
+ *     // Tool implementation runs in iframe
+ *     return { results: ["..."] };
+ *   }
+ * });
+ * ```
+ */
+export declare class AssistantFrameProvider {
+    private static _instance;
+    private _providers;
+    private _providerUnsubscribes;
+    private _targetOrigin;
+    private constructor();
+    private static getInstance;
+    private handleMessage;
+    private handleToolCall;
+    private sendMessage;
+    private getModelContext;
+    private broadcastUpdate;
+    static addModelContextProvider(provider: ModelContextProvider, targetOrigin?: string): Unsubscribe;
+    static dispose(): void;
+}

package/dist/vendor/assistant-ui-react/src/model-context/frame/AssistantFrameProvider.js

@@ -0,0 +1,161 @@
+import { z } from "zod";
+import { FRAME_MESSAGE_CHANNEL, } from "./AssistantFrameTypes";
+/**
+ * Converts tools to JSON Schema format for serialization
+ */
+const serializeTool = (tool) => {
+    var _a, _b, _c;
+    return (Object.assign(Object.assign(Object.assign(Object.assign({}, (tool.description && { description: tool.description })), { parameters: tool.parameters instanceof z.ZodType
+            ? ((_c = (_b = (_a = z).toJSONSchema) === null || _b === void 0 ? void 0 : _b.call(_a, tool.parameters)) !== null && _c !== void 0 ? _c : tool.parameters)
+            : tool.parameters }), (tool.disabled !== undefined && { disabled: tool.disabled })), (tool.type && { type: tool.type })));
+};
+/**
+ * Serializes a ModelContext for transmission across iframe boundary
+ */
+const serializeModelContext = (context) => (Object.assign(Object.assign({}, (context.system !== undefined && { system: context.system })), (context.tools && {
+    tools: Object.fromEntries(Object.entries(context.tools).map(([name, tool]) => [
+        name,
+        serializeTool(tool),
+    ])),
+})));
+/**
+ * AssistantFrameProvider - Runs inside an iframe and provides ModelContextProviders
+ * to the parent window's AssistantFrameHost.
+ *
+ * Usage example:
+ * ```typescript
+ * // Inside the iframe
+ * // Add model context providers
+ * const registry = new ModelContextRegistry();
+ * AssistantFrameProvider.addModelContextProvider(registry);
+ *
+ * // Add tools to registry
+ * registry.addTool({
+ *   toolName: "search",
+ *   description: "Search the web",
+ *   parameters: z.object({ query: z.string() }),
+ *   execute: async (args) => {
+ *     // Tool implementation runs in iframe
+ *     return { results: ["..."] };
+ *   }
+ * });
+ * ```
+ */
+export class AssistantFrameProvider {
+    constructor(targetOrigin = "*") {
+        this._providers = new Set();
+        this._providerUnsubscribes = new Map();
+        this._targetOrigin = targetOrigin;
+        this.handleMessage = this.handleMessage.bind(this);
+        window.addEventListener("message", this.handleMessage);
+        // Send initial update on initialization
+        setTimeout(() => this.broadcastUpdate(), 0);
+    }
+    static getInstance(targetOrigin) {
+        if (!AssistantFrameProvider._instance) {
+            AssistantFrameProvider._instance = new AssistantFrameProvider(targetOrigin);
+        }
+        return AssistantFrameProvider._instance;
+    }
+    handleMessage(event) {
+        var _a;
+        // Security: Validate origin if specified
+        if (this._targetOrigin !== "*" && event.origin !== this._targetOrigin)
+            return;
+        if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.channel) !== FRAME_MESSAGE_CHANNEL)
+            return;
+        const message = event.data.message;
+        switch (message.type) {
+            case "model-context-request":
+                // Respond with current context
+                this.sendMessage(event, {
+                    type: "model-context-update",
+                    context: serializeModelContext(this.getModelContext()),
+                });
+                break;
+            case "tool-call":
+                this.handleToolCall(message, event);
+                break;
+        }
+    }
+    async handleToolCall(message, event) {
+        var _a;
+        const tool = (_a = this.getModelContext().tools) === null || _a === void 0 ? void 0 : _a[message.toolName];
+        let result;
+        let error;
+        if (!tool) {
+            error = `Tool "${message.toolName}" not found`;
+        }
+        else {
+            try {
+                result = tool.execute
+                    ? await tool.execute(message.args, {
+                        toolCallId: message.id,
+                        abortSignal: new AbortController().signal,
+                        human: async () => {
+                            throw new Error("Tool human input is not supported in frame context");
+                        },
+                    })
+                    : undefined;
+            }
+            catch (e) {
+                error = e instanceof Error ? e.message : String(e);
+            }
+        }
+        this.sendMessage(event, Object.assign({ type: "tool-result", id: message.id }, (error ? { error } : { result })));
+    }
+    sendMessage(event, message) {
+        var _a;
+        (_a = event.source) === null || _a === void 0 ? void 0 : _a.postMessage({ channel: FRAME_MESSAGE_CHANNEL, message }, { targetOrigin: event.origin });
+    }
+    getModelContext() {
+        const contexts = Array.from(this._providers).map((p) => p.getModelContext());
+        return contexts.reduce((merged, context) => ({
+            system: context.system
+                ? merged.system
+                    ? `${merged.system}\n\n${context.system}`
+                    : context.system
+                : merged.system,
+            tools: Object.assign(Object.assign({}, (merged.tools || {})), (context.tools || {})),
+        }), {});
+    }
+    broadcastUpdate() {
+        // Always broadcast to parent window
+        if (window.parent && window.parent !== window) {
+            const updateMessage = {
+                type: "model-context-update",
+                context: serializeModelContext(this.getModelContext()),
+            };
+            window.parent.postMessage({ channel: FRAME_MESSAGE_CHANNEL, message: updateMessage }, this._targetOrigin);
+        }
+    }
+    static addModelContextProvider(provider, targetOrigin) {
+        var _a;
+        const instance = AssistantFrameProvider.getInstance(targetOrigin);
+        instance._providers.add(provider);
+        const unsubscribe = (_a = provider.subscribe) === null || _a === void 0 ? void 0 : _a.call(provider, () => instance.broadcastUpdate());
+        if (unsubscribe) {
+            instance._providerUnsubscribes.set(provider, unsubscribe);
+        }
+        instance.broadcastUpdate();
+        return () => {
+            var _a;
+            instance._providers.delete(provider);
+            (_a = instance._providerUnsubscribes.get(provider)) === null || _a === void 0 ? void 0 : _a();
+            instance._providerUnsubscribes.delete(provider);
+            instance.broadcastUpdate();
+        };
+    }
+    static dispose() {
+        if (AssistantFrameProvider._instance) {
+            const instance = AssistantFrameProvider._instance;
+            window.removeEventListener("message", instance.handleMessage);
+            // Unsubscribe from all providers
+            instance._providerUnsubscribes.forEach((unsubscribe) => unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe());
+            instance._providerUnsubscribes.clear();
+            instance._providers.clear();
+            AssistantFrameProvider._instance = null;
+        }
+    }
+}
+AssistantFrameProvider._instance = null;

package/dist/vendor/assistant-ui-react/src/model-context/frame/AssistantFrameTypes.d.ts

@@ -0,0 +1,28 @@
+export type SerializedTool = {
+    description?: string;
+    parameters: any;
+    disabled?: boolean;
+    type?: string;
+};
+export type SerializedModelContext = {
+    system?: string;
+    tools?: Record<string, SerializedTool>;
+};
+export type FrameMessageType = "model-context-request" | "model-context-update" | "tool-call" | "tool-result";
+export type FrameMessage = {
+    type: "model-context-request";
+} | {
+    type: "model-context-update";
+    context: SerializedModelContext;
+} | {
+    type: "tool-call";
+    id: string;
+    toolName: string;
+    args: unknown;
+} | {
+    type: "tool-result";
+    id: string;
+    result?: unknown;
+    error?: string;
+};
+export declare const FRAME_MESSAGE_CHANNEL = "assistant-ui-frame";

package/dist/vendor/assistant-ui-react/src/model-context/frame/AssistantFrameTypes.js

@@ -0,0 +1 @@
+export const FRAME_MESSAGE_CHANNEL = "assistant-ui-frame";

package/dist/vendor/assistant-ui-react/src/model-context/frame/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./AssistantFrameHost";
+export * from "./AssistantFrameProvider";
+export * from "./AssistantFrameTypes";
+export * from "./useAssistantFrameHost";

package/dist/vendor/assistant-ui-react/src/model-context/frame/index.js

@@ -0,0 +1,4 @@
+export * from "./AssistantFrameHost";
+export * from "./AssistantFrameProvider";
+export * from "./AssistantFrameTypes";
+export * from "./useAssistantFrameHost";

package/dist/vendor/assistant-ui-react/src/model-context/frame/useAssistantFrameHost.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from "react";
+import { AssistantFrameHost } from "./AssistantFrameHost";
+import { Unsubscribe } from "../../types";
+type UseAssistantFrameHostOptions = {
+    iframeRef: Readonly<RefObject<HTMLIFrameElement | null | undefined>>;
+    targetOrigin?: string;
+    register: (frameHost: AssistantFrameHost) => Unsubscribe;
+};
+/**
+ * React hook that manages the lifecycle of an AssistantFrameHost and its binding to the current AssistantRuntime.
+ *
+ * Usage example:
+ * ```typescript
+ * function MyComponent() {
+ *   const iframeRef = useRef<HTMLIFrameElement>(null);
+ *
+ *   useAssistantFrameHost({
+ *     iframeRef,
+ *     targetOrigin: "https://trusted-domain.com", // optional
+ *   });
+ *
+ *   return <iframe ref={iframeRef} src="..." />;
+ * }
+ * ```
+ */
+export declare const useAssistantFrameHost: ({ iframeRef, targetOrigin, register, }: UseAssistantFrameHostOptions) => void;
+export {};

package/dist/vendor/assistant-ui-react/src/model-context/frame/useAssistantFrameHost.js

@@ -0,0 +1,34 @@
+"use client";
+import { useEffect } from "react";
+import { AssistantFrameHost } from "./AssistantFrameHost";
+/**
+ * React hook that manages the lifecycle of an AssistantFrameHost and its binding to the current AssistantRuntime.
+ *
+ * Usage example:
+ * ```typescript
+ * function MyComponent() {
+ *   const iframeRef = useRef<HTMLIFrameElement>(null);
+ *
+ *   useAssistantFrameHost({
+ *     iframeRef,
+ *     targetOrigin: "https://trusted-domain.com", // optional
+ *   });
+ *
+ *   return <iframe ref={iframeRef} src="..." />;
+ * }
+ * ```
+ */
+export const useAssistantFrameHost = ({ iframeRef, targetOrigin = "*", register, }) => {
+    useEffect(() => {
+        var _a;
+        const iframeWindow = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+        if (!iframeWindow)
+            return;
+        const frameHost = new AssistantFrameHost(iframeWindow, targetOrigin);
+        const unsubscribe = register(frameHost);
+        return () => {
+            frameHost.dispose();
+            unsubscribe();
+        };
+    }, [iframeRef, targetOrigin, register]);
+};

package/dist/vendor/assistant-ui-react/src/model-context/index.d.ts

@@ -0,0 +1,15 @@
+export { makeAssistantTool, type AssistantTool } from "./makeAssistantTool";
+export { type AssistantToolUI, makeAssistantToolUI, } from "./makeAssistantToolUI";
+export { useAssistantInstructions } from "./useAssistantInstructions";
+export { useAssistantTool, type AssistantToolProps } from "./useAssistantTool";
+export { useAssistantToolUI, type AssistantToolUIProps, } from "./useAssistantToolUI";
+export { useInlineRender } from "./useInlineRender";
+export type { ModelContext, ModelContextProvider } from "./ModelContextTypes";
+export type { Tool } from "assistant-stream";
+export { tool } from "./tool";
+export { makeAssistantVisible } from "./makeAssistantVisible";
+export type { Toolkit, ToolDefinition } from "./toolbox";
+export { Tools } from "../client/Tools";
+export { Suggestions, type SuggestionConfig } from "../client/Suggestions";
+export * from "./registry";
+export * from "./frame";

package/dist/vendor/assistant-ui-react/src/model-context/index.js

@@ -0,0 +1,12 @@
+export { makeAssistantTool } from "./makeAssistantTool";
+export { makeAssistantToolUI, } from "./makeAssistantToolUI";
+export { useAssistantInstructions } from "./useAssistantInstructions";
+export { useAssistantTool } from "./useAssistantTool";
+export { useAssistantToolUI, } from "./useAssistantToolUI";
+export { useInlineRender } from "./useInlineRender";
+export { tool } from "./tool";
+export { makeAssistantVisible } from "./makeAssistantVisible";
+export { Tools } from "../client/Tools";
+export { Suggestions } from "../client/Suggestions";
+export * from "./registry";
+export * from "./frame";

package/dist/vendor/assistant-ui-react/src/model-context/makeAssistantTool.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { type AssistantToolProps } from "./useAssistantTool";
+export type AssistantTool = FC & {
+    unstable_tool: AssistantToolProps<any, any>;
+};
+export declare const makeAssistantTool: <TArgs extends Record<string, unknown>, TResult>(tool: AssistantToolProps<TArgs, TResult>) => AssistantTool;

package/dist/vendor/assistant-ui-react/src/model-context/makeAssistantTool.js

@@ -0,0 +1,10 @@
+"use client";
+import { useAssistantTool } from "./useAssistantTool";
+export const makeAssistantTool = (tool) => {
+    const Tool = () => {
+        useAssistantTool(tool);
+        return null;
+    };
+    Tool.unstable_tool = tool;
+    return Tool;
+};

package/dist/vendor/assistant-ui-react/src/model-context/makeAssistantToolUI.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { type AssistantToolUIProps } from "./useAssistantToolUI";
+export type AssistantToolUI = FC & {
+    unstable_tool: AssistantToolUIProps<any, any>;
+};
+export declare const makeAssistantToolUI: <TArgs, TResult>(tool: AssistantToolUIProps<TArgs, TResult>) => AssistantToolUI;

package/dist/vendor/assistant-ui-react/src/model-context/makeAssistantToolUI.js

@@ -0,0 +1,10 @@
+"use client";
+import { useAssistantToolUI, } from "./useAssistantToolUI";
+export const makeAssistantToolUI = (tool) => {
+    const ToolUI = () => {
+        useAssistantToolUI(tool);
+        return null;
+    };
+    ToolUI.unstable_tool = tool;
+    return ToolUI;
+};

package/dist/vendor/assistant-ui-react/src/model-context/makeAssistantVisible.d.ts

@@ -0,0 +1,6 @@
+import { ComponentType } from "react";
+export declare const makeAssistantVisible: <T extends ComponentType<any>>(Component: T, config?: {
+    clickable?: boolean | undefined;
+    editable?: boolean | undefined;
+}) => T;
+export default makeAssistantVisible;

package/dist/vendor/assistant-ui-react/src/model-context/makeAssistantVisible.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, forwardRef, useId, createContext, useContext, } from "react";
+import { useAui } from "@assistant-ui/store";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { tool } from "./tool";
+const click = tool({
+    parameters: {
+        type: "object",
+        properties: {
+            clickId: {
+                type: "string",
+            },
+        },
+        required: ["clickId"],
+    },
+    execute: async ({ clickId }) => {
+        const escapedClickId = CSS.escape(clickId);
+        const el = document.querySelector(`[data-click-id='${escapedClickId}']`);
+        if (el instanceof HTMLElement) {
+            el.click();
+            // todo make adjustable
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+            return {};
+        }
+        else {
+            return "Element not found";
+        }
+    },
+});
+const edit = tool({
+    parameters: {
+        type: "object",
+        properties: {
+            editId: {
+                type: "string",
+            },
+            value: {
+                type: "string",
+            },
+        },
+        required: ["editId", "value"],
+    },
+    execute: async ({ editId, value }) => {
+        const escapedEditId = CSS.escape(editId);
+        const el = document.querySelector(`[data-edit-id='${escapedEditId}']`);
+        if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+            el.value = value;
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+            // todo make adjustable
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+            return {};
+        }
+        else {
+            return "Element not found";
+        }
+    },
+});
+const ReadableContext = createContext(false);
+export const makeAssistantVisible = (Component, config) => {
+    const ReadableComponent = forwardRef((props, outerRef) => {
+        const isNestedReadable = useContext(ReadableContext);
+        const clickId = useId();
+        const componentRef = useRef(null);
+        const aui = useAui();
+        const { clickable, editable } = config !== null && config !== void 0 ? config : {};
+        useEffect(() => {
+            return aui.modelContext().register({
+                getModelContext: () => {
+                    var _a;
+                    return {
+                        tools: Object.assign(Object.assign({}, (clickable ? { click } : {})), (editable ? { edit } : {})),
+                        system: !isNestedReadable // only pass content if this readable isn't nested in another readable
+                            ? (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.outerHTML
+                            : undefined,
+                    };
+                },
+            });
+        }, [isNestedReadable, aui, clickable, editable]);
+        const ref = useComposedRefs(componentRef, outerRef);
+        return (_jsx(ReadableContext.Provider, { value: true, children: _jsx(Component, Object.assign({}, props, ((config === null || config === void 0 ? void 0 : config.clickable) ? { "data-click-id": clickId } : {}), ((config === null || config === void 0 ? void 0 : config.editable) ? { "data-edit-id": clickId } : {}), { ref: ref })) }));
+    });
+    ReadableComponent.displayName = Component.displayName;
+    return ReadableComponent;
+};
+export default makeAssistantVisible;