@creature-ai/sdk 0.1.1 → 0.1.3

package/dist/react/index.js

@@ -9328,8 +9328,11 @@ var Subscribable = class {
   }
 };
 
-// src/core/McpHostClient.ts
-var McpHostClient = class extends Subscribable {
+// src/core/McpAppHostClient.ts
+var McpAppHostClient = class extends Subscribable {
+  // ============================================================================
+  // Private Properties
+  // ============================================================================
   state = {
     isReady: false,
     environment: "mcp-apps",
@@ -9338,18 +9341,22 @@ var McpHostClient = class extends Subscribable {
   config;
   app = null;
   connected = false;
+  // ============================================================================
+  // Constructor
+  // ============================================================================
   constructor(config) {
     super();
     this.config = config;
   }
+  // ============================================================================
+  // Public API
+  // ============================================================================
+  /**
+   * Get the current client state.
+   */
   getState() {
     return this.state;
   }
-  setState(partial) {
-    const prev = this.state;
-    this.state = { ...this.state, ...partial };
-    this.notifyStateChange(this.state, prev);
-  }
   /**
    * Connect to the MCP Apps host.
    *
@@ -9371,90 +9378,6 @@ var McpHostClient = class extends Subscribable {
     this.setupHandlers();
     this.initiateConnection();
   }
-  /**
-   * Set up notification handlers on the App instance.
-   *
-   * Maps the official SDK's callback pattern to our event emitter pattern,
-   * allowing consumers to use `.on("tool-result", ...)` etc.
-   */
-  setupHandlers() {
-    if (!this.app) return;
-    this.app.ontoolinput = (params) => {
-      console.debug(`[${this.config.name}] Received tool-input`, { args: params.arguments });
-      this.emit("tool-input", params.arguments || {});
-    };
-    this.app.ontoolresult = (params) => {
-      console.log(`[McpHostClient] ontoolresult called`, {
-        isError: params.isError,
-        source: params.source,
-        hasContent: !!params.content,
-        hasStructuredContent: !!params.structuredContent,
-        structuredContent: params.structuredContent
-      });
-      const textContent = params.content?.filter((item) => item.type === "text").map((item) => ({ type: item.type, text: item.text }));
-      const result = {
-        content: textContent,
-        structuredContent: params.structuredContent,
-        isError: params.isError,
-        source: params.source
-      };
-      console.log(`[McpHostClient] Emitting tool-result event`, result);
-      this.emit("tool-result", result);
-    };
-    this.app.onhostcontextchanged = (params) => {
-      console.debug(`[${this.config.name}] Host context changed`, { theme: params.theme });
-      if (params.theme) {
-        YU(params.theme);
-        this.emit("theme-change", params.theme);
-      }
-      if (params.styles?.variables) {
-        QU(params.styles.variables);
-      }
-      if (params.styles?.css?.fonts) {
-        qU(params.styles.css.fonts);
-      }
-    };
-    this.app.onteardown = async (_params, _extra) => {
-      console.debug(`[${this.config.name}] Teardown requested`);
-      await this.emit("teardown");
-      return {};
-    };
-  }
-  /**
-   * Initiate connection using PostMessageTransport.
-   *
-   * The SDK's App.connect() handles the protocol handshake correctly:
-   * the guest (App) sends `ui/initialize` to the host.
-   */
-  async initiateConnection() {
-    if (!this.app) {
-      return;
-    }
-    try {
-      const transport = new Yn(window.parent, window.parent);
-      await this.app.connect(transport);
-      const hostContext = this.app.getHostContext();
-      console.debug(`[${this.config.name}] Connected to host`, { theme: hostContext?.theme });
-      if (hostContext?.theme) {
-        YU(hostContext.theme);
-        this.emit("theme-change", hostContext.theme);
-      }
-      if (hostContext?.styles?.variables) {
-        QU(hostContext.styles.variables);
-      }
-      if (hostContext?.styles?.css?.fonts) {
-        qU(hostContext.styles.css.fonts);
-      }
-      const widgetState = hostContext?.widgetState;
-      if (widgetState) {
-        this.setState({ widgetState });
-        this.emit("widget-state-change", widgetState);
-      }
-      this.setState({ isReady: true });
-    } catch (error) {
-      console.error(`[${this.config.name}] Connection failed`, { error });
-    }
-  }
   /**
    * Disconnect from the host.
    *
@@ -9487,9 +9410,8 @@ var McpHostClient = class extends Subscribable {
       name: toolName,
       arguments: args
     });
-    const textContent = sdkResult.content?.filter((item) => item.type === "text").map((item) => ({ type: item.type, text: item.text }));
     const result = {
-      content: textContent,
+      content: this.extractTextContent(sdkResult.content),
       structuredContent: sdkResult.structuredContent,
       isError: sdkResult.isError
     };
@@ -9530,6 +9452,13 @@ var McpHostClient = class extends Subscribable {
       widgetState: state
     });
   }
+  async requestDisplayMode(params) {
+    if (!this.app) {
+      return { mode: params.mode };
+    }
+    const result = await this.app.requestDisplayMode({ mode: params.mode });
+    return { mode: result.mode };
+  }
   /**
    * Send a log message to the host's DevConsole.
    *
@@ -9537,8 +9466,6 @@ var McpHostClient = class extends Subscribable {
    * to the host. Logs appear in the unified DevConsole alongside server logs,
    * with appropriate color coding based on level.
    *
-   * The logger name is automatically set to the app name from config.
-   *
    * @param level - Log severity level (debug, info, notice, warning, error)
    * @param message - Log message
    * @param data - Optional structured data to include with the log
@@ -9555,10 +9482,113 @@ var McpHostClient = class extends Subscribable {
       data: data ? { message, ...data } : message
     });
   }
+  // ============================================================================
+  // Private Methods
+  // ============================================================================
+  /**
+   * Update internal state and notify listeners.
+   */
+  setState(partial) {
+    const prev = this.state;
+    this.state = { ...this.state, ...partial };
+    this.notifyStateChange(this.state, prev);
+  }
+  /**
+   * Set up notification handlers on the App instance.
+   *
+   * Maps the official SDK's callback pattern to our event emitter pattern,
+   * allowing consumers to use `.on("tool-result", ...)` etc.
+   */
+  setupHandlers() {
+    if (!this.app) return;
+    this.app.ontoolinput = (params) => {
+      console.debug(`[${this.config.name}] Received tool-input`, { args: params.arguments });
+      this.emit("tool-input", params.arguments || {});
+    };
+    this.app.ontoolresult = (params) => {
+      console.log(`[McpAppHostClient] ontoolresult called`, {
+        isError: params.isError,
+        source: params.source,
+        hasContent: !!params.content,
+        hasStructuredContent: !!params.structuredContent,
+        structuredContent: params.structuredContent
+      });
+      const result = {
+        content: this.extractTextContent(params.content),
+        structuredContent: params.structuredContent,
+        isError: params.isError,
+        source: params.source
+      };
+      console.log(`[McpAppHostClient] Emitting tool-result event`, result);
+      this.emit("tool-result", result);
+    };
+    this.app.onhostcontextchanged = (params) => {
+      console.debug(`[${this.config.name}] Host context changed`, { theme: params.theme });
+      this.applyHostContext(params);
+    };
+    this.app.onteardown = async (_params, _extra) => {
+      console.debug(`[${this.config.name}] Teardown requested`);
+      await this.emit("teardown");
+      return {};
+    };
+  }
+  /**
+   * Initiate connection using PostMessageTransport.
+   *
+   * The SDK's App.connect() handles the protocol handshake correctly:
+   * the guest (App) sends `ui/initialize` to the host.
+   */
+  async initiateConnection() {
+    if (!this.app) {
+      return;
+    }
+    try {
+      const transport = new Yn(window.parent, window.parent);
+      await this.app.connect(transport);
+      const hostContext = this.app.getHostContext();
+      console.debug(`[${this.config.name}] Connected to host`, { theme: hostContext?.theme });
+      if (hostContext) {
+        this.applyHostContext(hostContext);
+        const widgetState = hostContext.widgetState;
+        if (widgetState) {
+          this.setState({ widgetState });
+          this.emit("widget-state-change", widgetState);
+        }
+      }
+      this.setState({ isReady: true });
+    } catch (error) {
+      console.error(`[${this.config.name}] Connection failed`, { error });
+    }
+  }
+  /**
+   * Apply theme, styles, and fonts from host context.
+   */
+  applyHostContext(context) {
+    if (context.theme) {
+      YU(context.theme);
+      this.emit("theme-change", context.theme);
+    }
+    if (context.styles?.variables) {
+      QU(context.styles.variables);
+    }
+    if (context.styles?.css?.fonts) {
+      qU(context.styles.css.fonts);
+    }
+  }
+  /**
+   * Extract text content from SDK result content array.
+   * Filters to only include text items since our ToolResult type expects text.
+   */
+  extractTextContent(content) {
+    return content?.filter((item) => item.type === "text").map((item) => ({ type: item.type, text: item.text }));
+  }
 };
 
-// src/core/ChatGPTHostClient.ts
-var ChatGPTHostClient = class extends Subscribable {
+// src/core/ChatGptAppHostClient.ts
+var ChatGptAppHostClient = class extends Subscribable {
+  // ============================================================================
+  // Private Properties
+  // ============================================================================
   state = {
     isReady: false,
     environment: "chatgpt",
@@ -9568,24 +9598,39 @@ var ChatGPTHostClient = class extends Subscribable {
   connected = false;
   hasProcessedInitialData = false;
   globalsHandler = null;
+  // ============================================================================
+  // Constructor
+  // ============================================================================
   constructor(config) {
     super();
     this.config = config;
   }
+  // ============================================================================
+  // Public API
+  // ============================================================================
+  /**
+   * Get the current client state.
+   */
   getState() {
     return this.state;
   }
-  setState(partial) {
-    const prev = this.state;
-    this.state = { ...this.state, ...partial };
-    this.notifyStateChange(this.state, prev);
-  }
+  /**
+   * Connect to the ChatGPT host.
+   *
+   * Processes initial data from `window.openai` and sets up a listener
+   * for subsequent `openai:set_globals` events.
+   */
   connect() {
     if (this.connected) return;
     this.connected = true;
     this.processInitialData();
     this.setupGlobalsListener();
   }
+  /**
+   * Disconnect from the host.
+   *
+   * Removes the globals event listener.
+   */
   disconnect() {
     if (!this.connected) return;
     this.connected = false;
@@ -9594,39 +9639,13 @@ var ChatGPTHostClient = class extends Subscribable {
       this.globalsHandler = null;
     }
   }
-  processInitialData() {
-    if (this.hasProcessedInitialData) return;
-    const openai = window.openai;
-    if (!openai) {
-      console.warn("[SDK] window.openai not available");
-      return;
-    }
-    this.hasProcessedInitialData = true;
-    this.setState({ isReady: true });
-    if (openai.toolOutput) {
-      this.emit("tool-input", openai.toolOutput);
-      this.emit("tool-result", { structuredContent: openai.toolOutput });
-    }
-    if (openai.widgetState) {
-      this.setState({ widgetState: openai.widgetState });
-      this.emit("widget-state-change", openai.widgetState);
-    }
-  }
-  setupGlobalsListener() {
-    this.globalsHandler = (event) => {
-      const customEvent = event;
-      const globals = customEvent.detail?.globals;
-      if (globals?.toolOutput) {
-        this.emit("tool-input", globals.toolOutput);
-        this.emit("tool-result", { structuredContent: globals.toolOutput });
-      }
-      if (globals?.widgetState !== void 0) {
-        this.setState({ widgetState: globals.widgetState });
-        this.emit("widget-state-change", globals.widgetState);
-      }
-    };
-    window.addEventListener("openai:set_globals", this.globalsHandler, { passive: true });
-  }
+  /**
+   * Call a tool on the MCP server via the ChatGPT bridge.
+   *
+   * @param toolName - Name of the tool to call
+   * @param args - Arguments to pass to the tool
+   * @returns Tool result with content and structuredContent
+   */
   async callTool(toolName, args) {
     const openai = window.openai;
     if (!openai?.callTool) {
@@ -9644,8 +9663,18 @@ var ChatGPTHostClient = class extends Subscribable {
     this.emit("tool-result", result);
     return result;
   }
+  /**
+   * Send a notification to the host.
+   *
+   * No-op on ChatGPT — notifications are not supported.
+   */
   sendNotification(_method, _params) {
   }
+  /**
+   * Set widget state and sync with the ChatGPT host.
+   *
+   * @param state - New widget state (or null to clear)
+   */
   setWidgetState(state) {
     this.setState({ widgetState: state });
     if (window.openai?.setWidgetState) {
@@ -9657,7 +9686,7 @@ var ChatGPTHostClient = class extends Subscribable {
    * Log a message to the console.
    *
    * ChatGPT doesn't have a DevConsole, so logs go to browser console only.
-   * This provides API parity with McpHostClient.
+   * This provides API parity with McpAppHostClient.
    *
    * @param level - Log severity level
    * @param message - Log message
@@ -9667,6 +9696,76 @@ var ChatGPTHostClient = class extends Subscribable {
     const consoleMethod = level === "error" ? "error" : level === "warning" ? "warn" : "log";
     console[consoleMethod](`[${this.config.name}]`, message, data ?? "");
   }
+  // ============================================================================
+  // Private Methods
+  // ============================================================================
+  /**
+   * Update internal state and notify listeners.
+   */
+  setState(partial) {
+    const prev = this.state;
+    this.state = { ...this.state, ...partial };
+    this.notifyStateChange(this.state, prev);
+  }
+  /**
+   * Process initial data from `window.openai`.
+   *
+   * Called once on connect to handle any tool output or widget state
+   * that was set before the client connected.
+   */
+  processInitialData() {
+    if (this.hasProcessedInitialData) return;
+    const openai = window.openai;
+    if (!openai) {
+      console.warn("[SDK] window.openai not available");
+      return;
+    }
+    this.hasProcessedInitialData = true;
+    this.setState({ isReady: true });
+    if (openai.toolOutput) {
+      this.emit("tool-input", openai.toolOutput);
+      this.emit("tool-result", { structuredContent: openai.toolOutput });
+    }
+    if (openai.widgetState) {
+      this.setState({ widgetState: openai.widgetState });
+      this.emit("widget-state-change", openai.widgetState);
+    }
+  }
+  /**
+   * Set up listener for `openai:set_globals` events.
+   *
+   * ChatGPT dispatches this event when tool output or widget state
+   * changes after initial load.
+   */
+  setupGlobalsListener() {
+    this.globalsHandler = (event) => {
+      const customEvent = event;
+      const globals = customEvent.detail?.globals;
+      if (globals?.toolOutput) {
+        this.emit("tool-input", globals.toolOutput);
+        this.emit("tool-result", { structuredContent: globals.toolOutput });
+      }
+      if (globals?.widgetState !== void 0) {
+        this.setState({ widgetState: globals.widgetState });
+        this.emit("widget-state-change", globals.widgetState);
+      }
+    };
+    window.addEventListener("openai:set_globals", this.globalsHandler, { passive: true });
+  }
+  /**
+   * Request a display mode change from the ChatGPT host.
+   *
+   * @param params - Display mode to request
+   * @returns The resulting display mode
+   */
+  async requestDisplayMode(params) {
+    const openai = window.openai;
+    if (openai?.requestDisplayMode) {
+      const result = await openai.requestDisplayMode({ mode: params.mode });
+      return { mode: result.mode };
+    }
+    return { mode: params.mode };
+  }
 };
 
 // src/core/utils.ts
@@ -9683,123 +9782,8 @@ function detectEnvironment() {
   return "standalone";
 }
 
-// src/core/AppSession.ts
-var AppSession = class {
-  id;
-  _state;
-  listeners = /* @__PURE__ */ new Set();
-  hostClient = null;
-  hostUnsubscribe = null;
-  constructor(initialState = {}, options = {}) {
-    this.id = options.id ?? this.generateId();
-    this._state = {
-      internal: initialState.internal ?? {},
-      backend: initialState.backend ?? {},
-      ui: initialState.ui ?? null
-    };
-  }
-  generateId() {
-    return `session_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
-  }
-  get state() {
-    return this._state;
-  }
-  get internal() {
-    return this._state.internal;
-  }
-  get backend() {
-    return this._state.backend;
-  }
-  get ui() {
-    return this._state.ui;
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  notify(prevState) {
-    this.listeners.forEach((listener) => listener(this._state, prevState));
-  }
-  setState(partial) {
-    const prev = this._state;
-    this._state = {
-      internal: partial.internal !== void 0 ? { ...prev.internal, ...partial.internal } : prev.internal,
-      backend: partial.backend !== void 0 ? { ...prev.backend, ...partial.backend } : prev.backend,
-      ui: partial.ui !== void 0 ? partial.ui : prev.ui
-    };
-    this.notify(prev);
-  }
-  setInternal(internal) {
-    const prev = this._state;
-    this._state = {
-      ...prev,
-      internal: { ...prev.internal, ...internal }
-    };
-    this.notify(prev);
-  }
-  setBackend(backend) {
-    const prev = this._state;
-    this._state = {
-      ...prev,
-      backend: { ...prev.backend, ...backend }
-    };
-    this.notify(prev);
-  }
-  setUi(ui2) {
-    console.log(`[AppSession:${this.id}] setUi`, ui2);
-    const prev = this._state;
-    this._state = { ...prev, ui: ui2 };
-    this.notify(prev);
-    if (this.hostClient) {
-      this.hostClient.setWidgetState(ui2);
-    }
-  }
-  updateUi(partial) {
-    const prev = this._state;
-    const newUi = prev.ui !== null ? { ...prev.ui, ...partial } : partial;
-    this._state = { ...prev, ui: newUi };
-    this.notify(prev);
-    if (this.hostClient) {
-      this.hostClient.setWidgetState(newUi);
-    }
-  }
-  bindHost(host) {
-    this.hostClient = host;
-    console.log(`[AppSession:${this.id}] Binding to host`);
-    const currentHostState = host.getState();
-    if (currentHostState.widgetState !== null && currentHostState.widgetState !== void 0) {
-      console.log(`[AppSession:${this.id}] Restoring UI state from host`, currentHostState.widgetState);
-      const prev = this._state;
-      this._state = { ...prev, ui: currentHostState.widgetState };
-      this.notify(prev);
-    }
-    this.hostUnsubscribe = host.on("widget-state-change", (widgetState) => {
-      console.log(`[AppSession:${this.id}] Host widget state changed`, widgetState);
-      const prev = this._state;
-      this._state = { ...prev, ui: widgetState };
-      this.notify(prev);
-    });
-    return () => {
-      this.unbindHost();
-    };
-  }
-  unbindHost() {
-    console.log(`[AppSession:${this.id}] Unbinding from host`);
-    if (this.hostUnsubscribe) {
-      this.hostUnsubscribe();
-      this.hostUnsubscribe = null;
-    }
-    this.hostClient = null;
-  }
-  injectAppSessionId(data) {
-    return { ...data, appSessionId: this.id };
-  }
-};
-
-// src/core/channel.ts
-function createChannel(url, config = {}) {
+// src/core/websocket.ts
+function createWebSocket(url, config = {}) {
   const {
     onMessage,
     onStatusChange,
@@ -9819,36 +9803,36 @@ function createChannel(url, config = {}) {
   };
   const connect = () => {
     if (ws?.readyState === WebSocket.OPEN || ws?.readyState === WebSocket.CONNECTING) {
-      console.log("[Channel] Already connected/connecting to:", url);
+      console.log("[WebSocket] Already connected/connecting to:", url);
       return;
     }
     intentionalClose = false;
     setStatus("connecting");
-    console.log("[Channel] Connecting to:", url);
+    console.log("[WebSocket] Connecting to:", url);
     try {
       ws = new WebSocket(url);
     } catch (e2) {
-      console.error("[Channel] Failed to create WebSocket:", e2);
+      console.error("[WebSocket] Failed to create WebSocket:", e2);
       setStatus("error", "Failed to create WebSocket");
       scheduleReconnect();
       return;
     }
     ws.onopen = () => {
-      console.log("[Channel] Connected to:", url);
+      console.log("[WebSocket] Connected to:", url);
       reconnectAttempts = 0;
       setStatus("connected");
     };
     ws.onmessage = (event) => {
       try {
         const message = JSON.parse(event.data);
-        console.log("[Channel] Received message:", message);
+        console.log("[WebSocket] Received message:", message);
         onMessage?.(message);
       } catch (e2) {
-        console.error("[Channel] Failed to parse message:", e2);
+        console.error("[WebSocket] Failed to parse message:", e2);
       }
     };
     ws.onerror = (e2) => {
-      console.error("[Channel] WebSocket error:", e2);
+      console.error("[WebSocket] Error:", e2);
       setStatus("error", "Connection error");
     };
     ws.onclose = (event) => {
@@ -9858,7 +9842,7 @@ function createChannel(url, config = {}) {
         return;
       }
       if (event.code === 4004) {
-        setStatus("error", "AppSession channel not found");
+        setStatus("error", "Instance WebSocket not found");
         return;
       }
       scheduleReconnect();
@@ -9906,9 +9890,9 @@ function createChannel(url, config = {}) {
 function createHost(config) {
   const environment = detectEnvironment();
   if (environment === "chatgpt") {
-    return new ChatGPTHostClient(config);
+    return new ChatGptAppHostClient(config);
   }
-  return new McpHostClient(config);
+  return new McpAppHostClient(config);
 }
 
 // src/react/useHost.ts
@@ -9943,7 +9927,8 @@ function useHost(config) {
     () => ({
       callTool: client.callTool.bind(client),
       sendNotification: client.sendNotification.bind(client),
-      setWidgetState: client.setWidgetState.bind(client)
+      setWidgetState: client.setWidgetState.bind(client),
+      requestDisplayMode: client.requestDisplayMode.bind(client)
     }),
     [client]
   );
@@ -10001,6 +9986,7 @@ function useHost(config) {
     callTool: boundMethods.callTool,
     sendNotification: boundMethods.sendNotification,
     setWidgetState: boundMethods.setWidgetState,
+    requestDisplayMode: boundMethods.requestDisplayMode,
     log
   };
 }
@@ -10009,17 +9995,21 @@ function useHost(config) {
 import { useState, useCallback } from "react";
 function useToolResult() {
   const [data, setData] = useState(null);
+  const [instanceId, setInstanceId] = useState(null);
   const [title, setTitle] = useState(null);
   const [isError, setIsError] = useState(false);
   const [text, setText] = useState(null);
   const onToolResult = useCallback((result) => {
     const structured = result.structuredContent;
     if (structured) {
-      const { title: resultTitle, ...rest } = structured;
+      const { title: resultTitle, instanceId: resultInstanceId, ...rest } = structured;
       setData(rest);
       if (resultTitle) {
         setTitle(resultTitle);
       }
+      if (resultInstanceId) {
+        setInstanceId(resultInstanceId);
+      }
     }
     setIsError(result.isError || false);
     if (result.content?.[0]?.text) {
@@ -10028,12 +10018,14 @@ function useToolResult() {
   }, []);
   const reset = useCallback(() => {
     setData(null);
+    setInstanceId(null);
     setTitle(null);
     setIsError(false);
     setText(null);
   }, []);
   return {
     data,
+    instanceId,
     title,
     isError,
     text,
@@ -10074,9 +10066,9 @@ function useWidgetState(initialState) {
   return [localState, setState];
 }
 
-// src/react/useChannel.ts
+// src/react/useWebSocket.ts
 import { useEffect as useEffect3, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore2 } from "react";
-function useChannel(url, config = {}) {
+function useWebSocket(url, config = {}) {
   const { onMessage, enabled = true } = config;
   const onMessageRef = useRef2(onMessage);
   onMessageRef.current = onMessage;
@@ -10101,7 +10093,7 @@ function useChannel(url, config = {}) {
       }
       return;
     }
-    const client = createChannel(url, {
+    const client = createWebSocket(url, {
       onMessage: (msg) => onMessageRef.current?.(msg),
       onStatusChange: (status, error) => {
         stateRef.current = { status, error };
@@ -10127,56 +10119,115 @@ function useChannel(url, config = {}) {
   };
 }
 
-// src/react/useAppSession.ts
-import { useRef as useRef3, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3, useCallback as useCallback4 } from "react";
-function useAppSession(config = {}) {
-  const { hostClient, initialState, id } = config;
-  const sessionRef = useRef3(null);
-  if (!sessionRef.current) {
-    sessionRef.current = new AppSession(initialState, { id });
-  }
-  const session = sessionRef.current;
+// src/react/CreatureIcon.tsx
+import { useState as useState3, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function CreatureIcon({
+  isDarkMode,
+  showEyes = true,
+  enableBlink = false,
+  width = 26,
+  height = 26,
+  className = ""
+}) {
+  const fillColor = isDarkMode ? "#F8F7F6" : "#0D0D0C";
+  const [isBlinking, setIsBlinking] = useState3(false);
+  const timeoutRef = useRef3(null);
   useEffect4(() => {
-    if (hostClient) {
-      const unbind = session.bindHost(hostClient);
-      return unbind;
-    }
-  }, [session, hostClient]);
-  const subscribe = useCallback4(
-    (onStoreChange) => session.subscribe(onStoreChange),
-    [session]
-  );
-  const getSnapshot = useCallback4(() => session.state, [session]);
-  const state = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
-  const setUi = useCallback4((ui2) => session.setUi(ui2), [session]);
-  const updateUi = useCallback4(
-    (partial) => session.updateUi(partial),
-    [session]
+    if (!enableBlink || !showEyes) {
+      return;
+    }
+    const scheduleNextBlink = () => {
+      const nextBlinkDelay = Math.random() * 4e3 + 2e3;
+      timeoutRef.current = setTimeout(() => {
+        setIsBlinking(true);
+        setTimeout(() => {
+          setIsBlinking(false);
+          scheduleNextBlink();
+        }, 150);
+      }, nextBlinkDelay);
+    };
+    scheduleNextBlink();
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [enableBlink, showEyes]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 110 111",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M76.7407 18.0698L69.6709 0L47.7099 28.6693L11.7829 31.4596L8.12513 55.4302L15.3684 62.8469L21.6574 63.9457L0 88.9139C11.8118 94.2343 23.6381 99.5546 35.4499 104.861L54.2013 93.3813L62.7746 105.265L71.5215 110.889L87.5115 105.439L85.0537 85.1115L100.971 91.1693L109.053 74.5286L106.812 62.0084L94.7692 52.4953L101.608 26.3995L98.0532 1.81982L78.3892 18.2808L76.7407 18.0698ZM76.5816 94.1909L71.2034 65.0011L95.6366 73.5166L101.318 63.1072L80.9622 47.0159C84.5477 35.4354 88.191 23.826 91.5452 12.1877L77.1744 24.5698L69.6709 23.4566L68.3264 8.84802L49.9797 32.7897L15.5563 35.4643L13.113 51.4544L36.621 53.2616L7.08419 87.338L24.6212 95.2318L48.1147 77.5069L64.2348 99.8582L76.6105 94.1764L76.5816 94.1909Z",
+            fill: fillColor
+          }
+        ),
+        showEyes && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "g",
+            {
+              style: {
+                transformOrigin: "64px 33.65px",
+                transform: isBlinking ? "scaleY(0.1)" : "scaleY(1)",
+                transition: "transform 0.1s ease-out"
+              },
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M65.6051 34.48C66.4951 32.97 66.6051 31.3799 65.8451 30.9299C65.0851 30.4899 63.7451 31.3499 62.8551 32.8699C61.9651 34.3799 61.8551 35.97 62.6151 36.42C63.3751 36.86 64.7151 36 65.6051 34.48Z",
+                  fill: fillColor
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "g",
+            {
+              style: {
+                transformOrigin: "70px 36.265px",
+                transform: isBlinking ? "scaleY(0.1)" : "scaleY(1)",
+                transition: "transform 0.1s ease-out"
+              },
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M71.7651 37.0999C72.6951 35.1499 72.6551 33.1899 71.6751 32.73C70.6951 32.27 69.1551 33.4799 68.2351 35.4299C67.3051 37.3799 67.3451 39.3399 68.3251 39.7999C69.3051 40.2599 70.8451 39.0499 71.7651 37.0999Z",
+                  fill: fillColor
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
   );
-  return {
-    session,
-    state,
-    ui: state.ui,
-    setUi,
-    updateUi
-  };
 }
 export {
-  AppSession,
-  ChatGPTHostClient,
-  McpHostClient,
+  ChatGptAppHostClient,
+  CreatureIcon,
+  McpAppHostClient,
   WidgetStateContext,
   YU as applyDocumentTheme,
   qU as applyHostFonts,
   QU as applyHostStyleVariables,
-  createChannel,
   createHost,
+  createWebSocket,
   detectEnvironment,
   VU as getDocumentTheme,
-  useAppSession,
-  useChannel,
   useHost,
   useToolResult,
+  useWebSocket,
   useWidgetState
 };
 //# sourceMappingURL=index.js.map