@pikku/assistant-ui 0.12.1 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pikku/assistant-ui
 
+## 0.12.2
+
+### Patch Changes
+
+- cc4a8e0: Show friendly error messages in agent chat instead of silently failing with a loading spinner
+
 ## 0.12.1
 
 ### Patch Changes

package/dist/cjs/use-pikku-agent-runtime.js

@@ -295,22 +295,51 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                         }
                     }
                 }
-                const response = yield __await(fetch(`${opts.api}/${opts.agentName}/stream`, {
-                    method: 'POST',
-                    headers: Object.assign({ 'Content-Type': 'application/json' }, opts.headers),
-                    body: JSON.stringify({
-                        agentName: opts.agentName,
-                        message: messageText,
-                        threadId: opts.threadId,
-                        resourceId: opts.resourceId,
-                        model: opts.model,
-                        temperature: opts.temperature,
-                    }),
-                    signal: abortSignal,
-                    credentials: opts.credentials,
-                }));
+                let response;
+                try {
+                    response = yield __await(fetch(`${opts.api}/${opts.agentName}/stream`, {
+                        method: 'POST',
+                        headers: Object.assign({ 'Content-Type': 'application/json' }, opts.headers),
+                        body: JSON.stringify({
+                            agentName: opts.agentName,
+                            message: messageText,
+                            threadId: opts.threadId,
+                            resourceId: opts.resourceId,
+                            model: opts.model,
+                            temperature: opts.temperature,
+                        }),
+                        signal: abortSignal,
+                        credentials: opts.credentials,
+                    }));
+                }
+                catch (e) {
+                    const msg = (e === null || e === void 0 ? void 0 : e.message) || 'Unknown error';
+                    let errorText = 'Failed to connect to the agent.';
+                    if (msg.includes('Failed to fetch') || msg.includes('NetworkError') || msg.includes('CORS')) {
+                        errorText = 'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.';
+                    }
+                    else if (msg.includes('abort')) {
+                        return yield __await(void 0);
+                    }
+                    yield yield __await({ content: [{ type: 'text', text: `⚠️ ${errorText}` }] });
+                    return yield __await(void 0);
+                }
                 if (!response.ok || !response.body) {
-                    throw new Error(`Agent stream failed: ${response.status}`);
+                    let errorText = `Request failed (${response.status}).`;
+                    if (response.status === 401 || response.status === 403) {
+                        errorText = 'Authentication error.';
+                    }
+                    else if (response.status === 404) {
+                        errorText = 'Agent not found — the agent may not be configured for this project.';
+                    }
+                    else if (response.status === 502 || response.status === 503) {
+                        errorText = 'The agent server is currently unavailable. Try again in a moment.';
+                    }
+                    else if (response.status === 429) {
+                        errorText = 'Rate limited — too many requests. Please wait a moment.';
+                    }
+                    yield yield __await({ content: [{ type: 'text', text: `⚠️ ${errorText}` }] });
+                    return yield __await(void 0);
                 }
                 const text = { value: '' };
                 const toolCalls = [];

package/dist/esm/use-pikku-agent-runtime.js

@@ -243,22 +243,51 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                     }
                 }
             }
-            const response = await fetch(`${opts.api}/${opts.agentName}/stream`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json', ...opts.headers },
-                body: JSON.stringify({
-                    agentName: opts.agentName,
-                    message: messageText,
-                    threadId: opts.threadId,
-                    resourceId: opts.resourceId,
-                    model: opts.model,
-                    temperature: opts.temperature,
-                }),
-                signal: abortSignal,
-                credentials: opts.credentials,
-            });
+            let response;
+            try {
+                response = await fetch(`${opts.api}/${opts.agentName}/stream`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', ...opts.headers },
+                    body: JSON.stringify({
+                        agentName: opts.agentName,
+                        message: messageText,
+                        threadId: opts.threadId,
+                        resourceId: opts.resourceId,
+                        model: opts.model,
+                        temperature: opts.temperature,
+                    }),
+                    signal: abortSignal,
+                    credentials: opts.credentials,
+                });
+            }
+            catch (e) {
+                const msg = e?.message || 'Unknown error';
+                let errorText = 'Failed to connect to the agent.';
+                if (msg.includes('Failed to fetch') || msg.includes('NetworkError') || msg.includes('CORS')) {
+                    errorText = 'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.';
+                }
+                else if (msg.includes('abort')) {
+                    return;
+                }
+                yield { content: [{ type: 'text', text: `⚠️ ${errorText}` }] };
+                return;
+            }
             if (!response.ok || !response.body) {
-                throw new Error(`Agent stream failed: ${response.status}`);
+                let errorText = `Request failed (${response.status}).`;
+                if (response.status === 401 || response.status === 403) {
+                    errorText = 'Authentication error.';
+                }
+                else if (response.status === 404) {
+                    errorText = 'Agent not found — the agent may not be configured for this project.';
+                }
+                else if (response.status === 502 || response.status === 503) {
+                    errorText = 'The agent server is currently unavailable. Try again in a moment.';
+                }
+                else if (response.status === 429) {
+                    errorText = 'Rate limited — too many requests. Please wait a moment.';
+                }
+                yield { content: [{ type: 'text', text: `⚠️ ${errorText}` }] };
+                return;
             }
             const text = { value: '' };
             const toolCalls = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pikku/assistant-ui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "author": "yasser.fadl@gmail.com",
   "license": "MIT",
   "type": "module",
@@ -16,7 +16,8 @@
     "tsc": "tsc",
     "build:esm": "tsc -b && echo '{\"type\": \"module\"}' > dist/esm/package.json",
     "build:cjs": "tsc -b tsconfig.cjs.json && echo '{\"type\": \"commonjs\"}' > dist/cjs/package.json",
-    "build": "yarn build:esm && yarn build:cjs"
+    "build": "yarn build:esm && yarn build:cjs",
+    "prepublishOnly": "yarn build"
   },
   "dependencies": {
     "@assistant-ui/react": "^0.12.12",

package/src/use-pikku-agent-runtime.ts

@@ -351,23 +351,47 @@ function createPikkuStreamingAdapter(
         }
       }
 
-      const response = await fetch(`${opts.api}/${opts.agentName}/stream`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', ...opts.headers },
-        body: JSON.stringify({
-          agentName: opts.agentName,
-          message: messageText,
-          threadId: opts.threadId,
-          resourceId: opts.resourceId,
-          model: opts.model,
-          temperature: opts.temperature,
-        }),
-        signal: abortSignal,
-        credentials: opts.credentials,
-      })
+      let response: Response
+      try {
+        response = await fetch(`${opts.api}/${opts.agentName}/stream`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', ...opts.headers },
+          body: JSON.stringify({
+            agentName: opts.agentName,
+            message: messageText,
+            threadId: opts.threadId,
+            resourceId: opts.resourceId,
+            model: opts.model,
+            temperature: opts.temperature,
+          }),
+          signal: abortSignal,
+          credentials: opts.credentials,
+        })
+      } catch (e: any) {
+        const msg = e?.message || 'Unknown error'
+        let errorText = 'Failed to connect to the agent.'
+        if (msg.includes('Failed to fetch') || msg.includes('NetworkError') || msg.includes('CORS')) {
+          errorText = 'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.'
+        } else if (msg.includes('abort')) {
+          return
+        }
+        yield { content: [{ type: 'text' as const, text: `⚠️ ${errorText}` }] }
+        return
+      }
 
       if (!response.ok || !response.body) {
-        throw new Error(`Agent stream failed: ${response.status}`)
+        let errorText = `Request failed (${response.status}).`
+        if (response.status === 401 || response.status === 403) {
+          errorText = 'Authentication error.'
+        } else if (response.status === 404) {
+          errorText = 'Agent not found — the agent may not be configured for this project.'
+        } else if (response.status === 502 || response.status === 503) {
+          errorText = 'The agent server is currently unavailable. Try again in a moment.'
+        } else if (response.status === 429) {
+          errorText = 'Rate limited — too many requests. Please wait a moment.'
+        }
+        yield { content: [{ type: 'text' as const, text: `⚠️ ${errorText}` }] }
+        return
       }
 
       const text = { value: '' }