@datalayer/agent-runtimes 1.0.3 → 1.0.5

package/lib/examples/AgentMemoryExample.js

@@ -18,27 +18,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, TextInput, Heading, Label, Flash, } from '@primer/react';
-import { AlertIcon, SearchIcon, DatabaseIcon, SignOutIcon, } from '@primer/octicons-react';
+import { SearchIcon, DatabaseIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { SignInSimple } from '@datalayer/core/lib/views/iam';
-import { UserBadge } from '@datalayer/core/lib/views/profile';
 import { Chat } from '../chat';
-import { useAgents } from '../hooks/useAgents';
+import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'memory-demo-agent';
 const AGENT_SPEC_ID = 'monitor-sales-kpis'; // uses mem0 memory
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentMemoryInner = ({ onLogout }) => {
     const { token } = useSimpleAuthStore();
-    const { runtime, status: runtimeStatus, isReady, error: hookError, } = useAgents({
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const { runtime, status: runtimeStatus, isReady, error: hookError, } = useAgentRuntimes({
         agentSpecId: AGENT_SPEC_ID,
         autoStart: true,
         agentConfig: {
-            name: AGENT_NAME,
-            protocol: 'ag-ui',
+            name: agentName,
+            model: 'bedrock:us.anthropic.claude-3-5-haiku-20241022-v1:0',
+            protocol: 'vercel-ai',
             description: 'Agent with Mem0 persistent memory',
         },
     });
@@ -116,14 +118,7 @@ const AgentMemoryInner = ({ onLogout }) => {
                         : 'Creating memory-enabled agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     // ── Main layout ──────────────────────────────────────────────────────────
     return (_jsxs(Box, { sx: {
@@ -139,12 +134,12 @@ const AgentMemoryInner = ({ onLogout }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Durable Memory \u2014 ", podName] }), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
+                }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Durable Memory \u2014 ", podName] })] }), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
                             flex: 1,
                             minWidth: 0,
                             borderRight: '1px solid',
                             borderColor: 'border.default',
-                        }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, title: "Memory Agent", placeholder: "Chat \u2014 the agent remembers you across sessions\u2026", description: "Agent with Mem0 persistent memory", showHeader: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                        }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Memory Agent", placeholder: "Chat \u2014 the agent remembers you across sessions\u2026", description: "Agent with Mem0 persistent memory", showHeader: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'Remember',
                                     message: 'My favourite colour is midnight blue.',
@@ -206,7 +201,7 @@ const syncTokenToIamStore = (token) => {
 };
 // ─── Main component with auth gate ─────────────────────────────────────────
 const AgentMemoryExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -214,11 +209,6 @@ const AgentMemoryExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -227,7 +217,7 @@ const AgentMemoryExample = () => {
         });
     }, [clearAuth]);
     if (!token) {
-        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Memory Agent", description: "Sign in to use agents with persistent memory.", leadingIcon: _jsx(DatabaseIcon, { size: 24 }) }) }));
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentMemoryInner, { onLogout: handleLogout }) }) }));
 };