Add AI agent discovery and in-header picker to floating chatbot

Author: hotlong

packages/app-shell/src/console/AppContent.tsx

@@ -13,7 +13,7 @@ import { useState, useEffect, useCallback, lazy, Suspense, useMemo, type ReactNo
 import { ModalForm } from '@object-ui/plugin-form';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
 import { toast } from 'sonner';
-import { SchemaRendererProvider, useActionRunner, useGlobalUndo } from '@object-ui/react';
+import { useActionRunner, useGlobalUndo } from '@object-ui/react';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import type { ConnectionState } from '@object-ui/data-objectstack';
 import { useAuth } from '@object-ui/auth';
@@ -292,7 +292,6 @@ export function AppContent({ extraRoutes, extraRoutesNoApp }: AppContentProps =
         />
         <KeyboardShortcutsDialog />
         <OnboardingWalkthrough />
-        <SchemaRendererProvider dataSource={dataSource || {}}>
           <ErrorBoundary>
             <Suspense fallback={<LoadingScreen />}>
               <Routes>
@@ -358,7 +357,6 @@ export function AppContent({ extraRoutes, extraRoutesNoApp }: AppContentProps =
               dataSource={dataSource}
             />
           )}
-        </SchemaRendererProvider>
       </ConsoleLayout>
     </ExpressionProvider>
   );

packages/app-shell/src/console/ConsoleShell.tsx

@@ -13,6 +13,7 @@
 import { Suspense, type ReactNode } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { AuthGuard, useAuth } from '@object-ui/auth';
+import { SchemaRendererProvider } from '@object-ui/react';
 import { AdapterProvider, useAdapter } from '../providers/AdapterProvider';
 import { MetadataProvider, useMetadata } from '../providers/MetadataProvider';
 import { NavigationProvider } from '../context/NavigationContext';
@@ -69,7 +70,13 @@ export function ConnectedShell({ children }: { children: ReactNode }) {
 function ConnectedShellInner({ children }: { children: ReactNode }) {
   const adapter = useAdapter();
   if (!adapter) return <LoadingFallback />;
-  return <MetadataProvider adapter={adapter}>{children}</MetadataProvider>;
+  // Expose the adapter via SchemaRendererContext so descendant hooks like
+  // useDiscovery() (used to gate the global AI chatbot) can resolve it.
+  return (
+    <SchemaRendererProvider dataSource={adapter}>
+      <MetadataProvider adapter={adapter}>{children}</MetadataProvider>
+    </SchemaRendererProvider>
+  );
 }
 
 /**

packages/app-shell/src/console/home/HomeLayout.tsx

@@ -8,16 +8,22 @@
  * @module
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, Suspense, lazy } from 'react';
 import { useNavigationContext } from '../../context/NavigationContext';
 import { AppHeader } from '../../layout/AppHeader';
+import { useDiscovery } from '@object-ui/react';
+
+// Lazy-load the chatbot so its heavy markdown deps stay out of the initial
+// paint until the AI assistant is actually enabled.
+const ConsoleFloatingChatbot = lazy(() => import('../../layout/ConsoleFloatingChatbot'));
 
 interface HomeLayoutProps {
   children: React.ReactNode;
 }
 
 export function HomeLayout({ children }: HomeLayoutProps) {
   const { setContext } = useNavigationContext();
+  const { isAiEnabled } = useDiscovery();
 
   useEffect(() => {
     setContext('home');
@@ -31,6 +37,13 @@ export function HomeLayout({ children }: HomeLayoutProps) {
       <main className="flex-1 min-w-0 overflow-auto">
         {children}
       </main>
+
+      {/* Global floating chatbot — also available on the home/workspace screen */}
+      {isAiEnabled && (
+        <Suspense fallback={null}>
+          <ConsoleFloatingChatbot appLabel="Workspace" objects={[]} />
+        </Suspense>
+      )}
     </div>
   );
 }

packages/app-shell/src/layout/ConsoleFloatingChatbot.tsx

@@ -1,14 +1,30 @@
 /**
  * ConsoleFloatingChatbot
  *
- * Extracted from ConsoleLayout so it can be code-split via React.lazy.
+ * Wires the global FAB chatbot to the framework's `@objectstack/service-ai`
+ * backend (the `/api/v1/ai/agents/:agentName/chat` Vercel Data Stream
+ * endpoint) and exposes an in-header agent picker.
+ *
  * The chatbot pulls in `react-markdown` + `micromark` (~150 KB) which is
  * unused on every page until the AI assistant is enabled, so deferring it
  * keeps those bytes off the initial paint.
  * @module
  */
 import React from 'react';
-import { FloatingChatbot, useObjectChat, type ChatMessage } from '@object-ui/plugin-chatbot';
+import {
+  FloatingChatbot,
+  useObjectChat,
+  useAgents,
+  type ChatMessage,
+  type AgentDescriptor,
+} from '@object-ui/plugin-chatbot';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@object-ui/components';
 
 interface ConsoleObject {
   name: string;
@@ -18,11 +34,65 @@ interface ConsoleObject {
 export interface ConsoleFloatingChatbotProps {
   appLabel: string;
   objects: ConsoleObject[];
+  /**
+   * Base URL of the AI service. Defaults to `${VITE_SERVER_URL}/api/v1/ai`
+   * (or the relative `/api/v1/ai` when no server URL is configured).
+   */
+  apiBase?: string;
+  /** Default agent name to select on first render. */
+  defaultAgent?: string;
+}
+
+const DEFAULT_AI_PATH = '/api/v1/ai';
+
+function resolveApiBase(explicit?: string): string {
+  if (explicit) return explicit.replace(/\/$/, '');
+  const env = (import.meta as any).env ?? {};
+  const fromEnv = env.VITE_AI_BASE_URL as string | undefined;
+  if (fromEnv) return fromEnv.replace(/\/$/, '');
+  const serverUrl = (env.VITE_SERVER_URL as string | undefined) ?? '';
+  return `${serverUrl.replace(/\/$/, '')}${DEFAULT_AI_PATH}`;
+}
+
+/**
+ * Inner component that owns the chat hook. Re-mounted (via `key`) whenever
+ * the active agent changes so `useObjectChat`'s first-render mode lock
+ * (api vs local) picks up the new endpoint.
+ */
+interface ChatbotInnerProps {
+  appLabel: string;
+  objects: ConsoleObject[];
+  agents: AgentDescriptor[];
+  agentsLoading: boolean;
+  agentsError: Error | undefined;
+  activeAgent: string | undefined;
+  onAgentChange: (name: string) => void;
+  chatApi: string | undefined;
 }
 
-export default function ConsoleFloatingChatbot({ appLabel, objects }: ConsoleFloatingChatbotProps) {
+function ChatbotInner({
+  appLabel,
+  objects,
+  agents,
+  agentsLoading,
+  agentsError,
+  activeAgent,
+  onAgentChange,
+  chatApi,
+}: ChatbotInnerProps) {
   const objectNames = objects.map((o) => o.label || o.name).join(', ');
 
+  const activeAgentLabel = React.useMemo<string>(() => {
+    const found = agents.find((a) => a.name === activeAgent);
+    return found?.label ?? activeAgent ?? appLabel;
+  }, [agents, activeAgent, appLabel]);
+
+  const welcomeContent = activeAgent
+    ? `Hello! I'm **${activeAgentLabel}**, your ${appLabel} assistant. How can I help you today?`
+    : `Hello! I'm your **${appLabel}** assistant. ${
+        agentsError ? '(Backend unreachable — running in offline demo mode.)' : ''
+      }`;
+
   const {
     messages,
     isLoading,
@@ -32,32 +102,78 @@ export default function ConsoleFloatingChatbot({ appLabel, objects }: ConsoleFlo
     reload,
     clear,
   } = useObjectChat({
+    api: chatApi,
+    conversationId: activeAgent ? `${appLabel}:${activeAgent}` : undefined,
+    body: {
+      context: {
+        activeApp: appLabel,
+        objects: objects.map((o) => ({ name: o.name, label: o.label })),
+        agentName: activeAgent,
+      },
+    },
     initialMessages: [
       {
         id: 'welcome',
         role: 'assistant' as const,
-        content: `Hello! I'm your **${appLabel}** assistant. How can I help you today?`,
+        content: welcomeContent,
       },
     ],
-    autoResponse: true,
+    // Local-mode fallback: only used when `chatApi` is undefined (no agent
+    // resolved yet, or no backend available). Keeps the UI usable.
+    autoResponse: !chatApi,
     autoResponseText: objectNames
       ? `I can help you work with ${objectNames}. What would you like to do?`
-      : 'Thanks for your message! I\'m here to help you navigate and manage your data.',
-    autoResponseDelay: 800,
+      : "Thanks for your message! I'm here to help you navigate and manage your data.",
+    autoResponseDelay: 600,
   });
 
+  const headerExtra =
+    agents.length > 0 ? (
+      <Select
+        value={activeAgent}
+        onValueChange={onAgentChange}
+        disabled={agentsLoading}
+      >
+        <SelectTrigger
+          className="h-7 w-[180px] text-xs"
+          data-testid="floating-chatbot-agent-picker"
+        >
+          <SelectValue placeholder="Choose agent..." />
+        </SelectTrigger>
+        <SelectContent align="end">
+          {agents.map((agent: AgentDescriptor) => (
+            <SelectItem key={agent.name} value={agent.name} className="text-xs">
+              <span className="font-medium">{agent.label}</span>
+              {agent.description ? (
+                <span className="block text-muted-foreground text-[10px] truncate max-w-[220px]">
+                  {agent.description}
+                </span>
+              ) : null}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    ) : null;
+
   return (
     <FloatingChatbot
       floatingConfig={{
         position: 'bottom-right',
         defaultOpen: false,
-        panelWidth: 400,
-        panelHeight: 520,
+        panelWidth: 420,
+        panelHeight: 560,
         title: `${appLabel} Assistant`,
         triggerSize: 56,
       }}
+      headerExtra={headerExtra}
       messages={messages as ChatMessage[]}
-      placeholder="Ask anything..."
+      placeholder={
+        activeAgent
+          ? `Ask ${activeAgentLabel}...`
+          : agentsLoading
+            ? 'Loading agents...'
+            : 'Ask anything...'
+      }
       onSendMessage={(content: string) => sendMessage(content)}
       onClear={clear}
       onStop={isLoading ? stop : undefined}
@@ -68,3 +184,47 @@ export default function ConsoleFloatingChatbot({ appLabel, objects }: ConsoleFlo
     />
   );
 }
+
+export default function ConsoleFloatingChatbot({
+  appLabel,
+  objects,
+  apiBase: apiBaseProp,
+  defaultAgent: defaultAgentProp,
+}: ConsoleFloatingChatbotProps) {
+  const apiBase = React.useMemo(() => resolveApiBase(apiBaseProp), [apiBaseProp]);
+  const env = (import.meta as any).env ?? {};
+  const envDefaultAgent = env.VITE_AI_DEFAULT_AGENT as string | undefined;
+
+  const { agents, isLoading: agentsLoading, error: agentsError } = useAgents({ apiBase });
+
+  const [activeAgent, setActiveAgent] = React.useState<string | undefined>(undefined);
+  React.useEffect(() => {
+    if (!activeAgent && agents.length > 0) {
+      const preferred = defaultAgentProp ?? envDefaultAgent;
+      const match = preferred && agents.find((a) => a.name === preferred);
+      setActiveAgent((match ?? agents[0]).name);
+    }
+  }, [agents, activeAgent, defaultAgentProp, envDefaultAgent]);
+
+  const chatApi = activeAgent
+    ? `${apiBase}/agents/${encodeURIComponent(activeAgent)}/chat`
+    : undefined;
+
+  // `key` forces a clean remount whenever the active agent (and therefore the
+  // chat API URL) changes — required because `useObjectChat` locks its mode
+  // (api vs local) on first render.
+  return (
+    <ChatbotInner
+      key={chatApi ?? 'local'}
+      appLabel={appLabel}
+      objects={objects}
+      agents={agents}
+      agentsLoading={agentsLoading}
+      agentsError={agentsError}
+      activeAgent={activeAgent}
+      onAgentChange={setActiveAgent}
+      chatApi={chatApi}
+    />
+  );
+}
+

packages/plugin-chatbot/README.md

@@ -46,7 +46,8 @@ function App() {
 ### AI Streaming Mode (service-ai)
 
 When `api` is set in the schema, the chatbot connects to a backend SSE endpoint
-using `@ai-sdk/react` for streaming, tool-calling, and production-grade chat:
+using `@ai-sdk/react` v3 (Vercel UI Message Stream protocol) for streaming,
+tool-calling, and production-grade chat:
 
 ```tsx
 import '@object-ui/plugin-chatbot';
@@ -102,6 +103,55 @@ function MyChat() {
 
 ## Schema-Driven Usage
 
+### Discovering Backend Agents
+
+Use `useAgents` to fetch the list of agents exposed by `@objectstack/service-ai`
+at `GET {apiBase}/agents`. This is what the global console FAB uses to populate
+its in-header agent picker:
+
+```tsx
+import { useAgents } from '@object-ui/plugin-chatbot';
+
+function AgentPicker() {
+  const { agents, isLoading, error } = useAgents({
+    apiBase: 'http://localhost:3000/api/v1/ai',
+    // Optional fallback list shown when the backend is unreachable
+    fallback: [{ name: 'data_chat', label: 'Data Chat' }],
+  });
+
+  if (isLoading) return <span>Loading agents…</span>;
+  if (error) return <span>Backend unreachable</span>;
+
+  return (
+    <select>
+      {agents.map(a => (
+        <option key={a.name} value={a.name}>{a.label}</option>
+      ))}
+    </select>
+  );
+}
+```
+
+Each agent's chat endpoint is `POST {apiBase}/agents/{name}/chat` — pass that
+URL as the `api` option to `useObjectChat` to talk to it.
+
+### Console Integration
+
+The console (`@object-ui/app-shell`) auto-mounts a global floating chatbot
+when `useDiscovery().isAiEnabled` is true. Configure the backend in your
+console `.env`:
+
+```bash
+# AI service endpoint (defaults to ${VITE_SERVER_URL}/api/v1/ai when unset)
+VITE_AI_BASE_URL=http://localhost:3000/api/v1/ai
+# Default agent to select on first open (must match an agent name returned
+# by GET ${VITE_AI_BASE_URL}/agents)
+VITE_AI_DEFAULT_AGENT=sales_copilot
+```
+
+The picker lets the user switch agents at runtime; switching transparently
+remounts the chat hook against the new agent's `/chat` endpoint.
+
 This plugin automatically registers with ObjectUI's component registry when imported:
 
 ```tsx