@cosmoops/connect-sdk 0.30.0 → 0.30.1

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 `@cosmoops/connect-sdk` follows semver, with the 0.x convention that **minor
 versions may carry breaking changes** and patch versions never do.
 
+## 0.30.1
+
+`ConnectAppShell` was putting **462 KB** of markdown renderer on every page of
+every application platform that mounts it — which is every page, because the
+shell owns the layout. `streamdown` was a static import in `ConnectAskAi`, so
+it was downloaded, parsed and evaluated on each route to render nothing until
+somebody opened the assistant, which most page views never do. Measured on a
+partner app: 48 of its 49 routes carried it, roughly a quarter of each route's
+JavaScript.
+
+It is now `React.lazy`, so the chunk is requested the first time there is
+markdown to render and cached by React from then on. No API changed and no
+host setup changed; `streamdown` stays a peer dependency of `/client` and is
+still needed for formatted answers.
+
+The Suspense fallback is the **raw text** rather than a spinner. An answer
+streams in token by token, and unformatted prose is readable — so the first
+words now appear *while* the renderer is being fetched instead of behind it,
+and re-render as markdown when it lands. On a cold cache that makes the first
+answer feel earlier than it did before, not later.
+
+### Changed
+
+- `ConnectAskAi` loads `streamdown` on demand instead of at module scope.
+  Partner apps get the saving by upgrading; nothing in their code moves.
+
 ## 0.30.0
 
 `<ConnectAskAi>` forgot everything on reload. Connect's own panel has had

package/dist/cjs/client/components/ask-ai.js

@@ -1,13 +1,68 @@
 "use client";
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectAskAi = ConnectAskAi;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@heroui/react");
 const lucide_react_1 = require("lucide-react");
-const streamdown_1 = require("streamdown");
 const provider_js_1 = require("../provider.js");
+/**
+ * The markdown renderer, fetched the first time there is markdown to render.
+ *
+ * `streamdown` is **462 KB** of the host's client bundle, and a static import
+ * here put all of it on every page of every application platform that mounts
+ * `ConnectAppShell` - which is every page, because the shell owns the layout.
+ * It rendered nothing until somebody opened the assistant, which most page
+ * views never do. Measured on one partner app: 48 of 49 routes carrying it,
+ * about a quarter of each route's JavaScript.
+ *
+ * `lazy` rather than a conditional `import()` in an effect: React caches the
+ * module promise, so the chunk is requested once no matter how many messages
+ * render, and the boundary below is what covers the gap.
+ *
+ * The fallback is the **raw text**, not a spinner. An answer streams in token
+ * by token, and unformatted prose is readable - so the first words appear
+ * while the renderer is still arriving rather than behind it. Once it lands,
+ * the same text re-renders as markdown.
+ */
+const Streamdown = (0, react_1.lazy)(async () => {
+    const mod = await Promise.resolve().then(() => __importStar(require("streamdown")));
+    return { default: mod.Streamdown };
+});
 const use_active_path_js_1 = require("../use-active-path.js");
 const ai_screens_js_1 = require("./ai-screens.js");
 const ai_widgets_js_1 = require("./ai-widgets.js");
@@ -267,11 +322,11 @@ function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", placehold
      */
     const resolvedPath = (0, use_active_path_js_1.useActivePath)(activePath);
     const currentScreen = (0, react_1.useMemo)(() => (resolvedPath ? (0, ai_screens_js_1.matchConnectScreen)(screens, resolvedPath) : null), [screens, resolvedPath]);
-    const renderMarkdown = (0, react_1.useCallback)((text, isStreaming = false) => ((0, jsx_runtime_1.jsx)(streamdown_1.Streamdown, { className: "connect-ai-body", mode: isStreaming ? "streaming" : "static", isAnimating: isStreaming, animated: ANIMATED, caret: isStreaming ? "block" : undefined, plugins: markdownPlugins, 
-        // Retrieved documents cite real URLs; an interstitial on every one of
-        // them turns a citation into a chore. The renderer still sanitises the
-        // markup itself, which is the part that matters.
-        linkSafety: LINK_SAFETY, children: text })), [markdownPlugins]);
+    const renderMarkdown = (0, react_1.useCallback)((text, isStreaming = false) => ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { className: "connect-ai-body whitespace-pre-wrap", children: text }), children: (0, jsx_runtime_1.jsx)(Streamdown, { className: "connect-ai-body", mode: isStreaming ? "streaming" : "static", isAnimating: isStreaming, animated: ANIMATED, caret: isStreaming ? "block" : undefined, plugins: markdownPlugins, 
+            // Retrieved documents cite real URLs; an interstitial on every one of
+            // them turns a citation into a chore. The renderer still sanitises the
+            // markup itself, which is the part that matters.
+            linkSafety: LINK_SAFETY, children: text }) })), [markdownPlugins]);
     const stop = (0, react_1.useCallback)(() => {
         abortRef.current?.abort();
         abortRef.current = null;

package/dist/cjs/server/client.js

@@ -165,4 +165,4 @@ class ConnectClient {
 }
 exports.ConnectClient = ConnectClient;
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-exports.SDK_VERSION = "0.30.0";
+exports.SDK_VERSION = "0.30.1";

package/dist/esm/client/components/ask-ai.js

@@ -1,10 +1,32 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button, Input, Label, TextField } from "@heroui/react";
 import { Brain, ChevronDown, History, Plus, Send, Sparkles, Square, X } from "lucide-react";
-import { Streamdown } from "streamdown";
 import { useConnect } from "../provider.js";
+/**
+ * The markdown renderer, fetched the first time there is markdown to render.
+ *
+ * `streamdown` is **462 KB** of the host's client bundle, and a static import
+ * here put all of it on every page of every application platform that mounts
+ * `ConnectAppShell` - which is every page, because the shell owns the layout.
+ * It rendered nothing until somebody opened the assistant, which most page
+ * views never do. Measured on one partner app: 48 of 49 routes carrying it,
+ * about a quarter of each route's JavaScript.
+ *
+ * `lazy` rather than a conditional `import()` in an effect: React caches the
+ * module promise, so the chunk is requested once no matter how many messages
+ * render, and the boundary below is what covers the gap.
+ *
+ * The fallback is the **raw text**, not a spinner. An answer streams in token
+ * by token, and unformatted prose is readable - so the first words appear
+ * while the renderer is still arriving rather than behind it. Once it lands,
+ * the same text re-renders as markdown.
+ */
+const Streamdown = lazy(async () => {
+    const mod = await import("streamdown");
+    return { default: mod.Streamdown };
+});
 import { useActivePath } from "../use-active-path.js";
 import { matchConnectScreen } from "./ai-screens.js";
 import { AiActions, AiChart, AiDetails, AiMetrics, AiSources, AiSteps, AiTable, AiTimeline } from "./ai-widgets.js";
@@ -264,11 +286,11 @@ export function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", pl
      */
     const resolvedPath = useActivePath(activePath);
     const currentScreen = useMemo(() => (resolvedPath ? matchConnectScreen(screens, resolvedPath) : null), [screens, resolvedPath]);
-    const renderMarkdown = useCallback((text, isStreaming = false) => (_jsx(Streamdown, { className: "connect-ai-body", mode: isStreaming ? "streaming" : "static", isAnimating: isStreaming, animated: ANIMATED, caret: isStreaming ? "block" : undefined, plugins: markdownPlugins, 
-        // Retrieved documents cite real URLs; an interstitial on every one of
-        // them turns a citation into a chore. The renderer still sanitises the
-        // markup itself, which is the part that matters.
-        linkSafety: LINK_SAFETY, children: text })), [markdownPlugins]);
+    const renderMarkdown = useCallback((text, isStreaming = false) => (_jsx(Suspense, { fallback: _jsx("div", { className: "connect-ai-body whitespace-pre-wrap", children: text }), children: _jsx(Streamdown, { className: "connect-ai-body", mode: isStreaming ? "streaming" : "static", isAnimating: isStreaming, animated: ANIMATED, caret: isStreaming ? "block" : undefined, plugins: markdownPlugins, 
+            // Retrieved documents cite real URLs; an interstitial on every one of
+            // them turns a citation into a chore. The renderer still sanitises the
+            // markup itself, which is the part that matters.
+            linkSafety: LINK_SAFETY, children: text }) })), [markdownPlugins]);
     const stop = useCallback(() => {
         abortRef.current?.abort();
         abortRef.current = null;

package/dist/esm/server/client.js

@@ -161,4 +161,4 @@ export class ConnectClient {
     }
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export const SDK_VERSION = "0.30.0";
+export const SDK_VERSION = "0.30.1";

package/dist/types/client/components/ask-ai.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type StreamdownProps } from "streamdown";
+import type { StreamdownProps } from "streamdown";
 import type { ConnectScreen } from "../../types.js";
 export interface ConnectAskAiProps {
     /**

package/dist/types/server/client.d.ts

@@ -126,4 +126,4 @@ export declare class ConnectClient {
     constructor(options: ConnectClientOptions);
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export declare const SDK_VERSION = "0.30.0";
+export declare const SDK_VERSION = "0.30.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmoops/connect-sdk",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "description": "Official server-side SDK for the CosmoOps Connect platform API - Login with Connect, entitlements, billing and metering.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "commonjs",