feat(console): integrate floating chatbot FAB into ConsoleLayout with metadata-aware context

Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/e0efdafc-aeb8-4dcc-859c-f5d6d07a2879

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

CHANGELOG.md

@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - **New ChatbotSchema floating fields** (`@object-ui/types`): Extended `ChatbotSchema` with `displayMode` (`'inline' | 'floating'`) and `floatingConfig` (`FloatingChatbotConfig`) for schema-driven floating chatbot configuration. New `FloatingChatbotConfig` interface with `position`, `defaultOpen`, `panelWidth`, `panelHeight`, `title`, `triggerIcon`, and `triggerSize` options.
 
+- **Console floating chatbot integration** (`@object-ui/console`): Added the floating chatbot FAB to `ConsoleLayout`, making it available on every authenticated page. Uses `useObjectChat` with metadata-aware context (app name, object list) for intelligent auto-responses. Wired with demo auto-response mode by default, switchable to API streaming when `api` endpoint is configured.
+
 - **AI SDUI Chatbot integration** (`@object-ui/plugin-chatbot`): Refactored chatbot plugin to support full AI streaming via `service-ai` backend and `vercel/ai` SDK (`@ai-sdk/react`). New `useObjectChat` composable hook wraps `@ai-sdk/react`'s `useChat` for SSE streaming, tool-calling, and production-grade chat. Auto-detects API mode (when `api` schema field is set) vs legacy local auto-response mode. ChatbotEnhanced component now supports stop, reload, error display, and streaming state indicators. 44 unit tests (19 new hook tests, 10 new streaming tests).
 
 - **New ChatbotSchema fields** (`@object-ui/types`): Extended `ChatbotSchema` with `api`, `conversationId`, `systemPrompt`, `model`, `streamingEnabled`, `headers`, `requestBody`, `maxToolRoundtrips`, and `onError` fields for service-ai integration. Extended `ChatMessage` with `streaming`, `toolInvocations` fields and added `ChatToolInvocation` interface for tool-calling flows.

apps/console/src/components/ConsoleLayout.tsx

@@ -3,11 +3,13 @@
  *
  * Root layout shell for the console application. Composes the AppShell
  * with the sidebar, header, and main content area.
+ * Includes the global floating chatbot (FAB) widget.
  * @module
  */
 
 import React from 'react';
 import { AppShell } from '@object-ui/layout';
+import { FloatingChatbot, useObjectChat } from '@object-ui/plugin-chatbot';
 import { AppSidebar } from './AppSidebar';
 import { AppHeader } from './AppHeader';
 import { useResponsiveSidebar } from '../hooks/useResponsiveSidebar';
@@ -29,6 +31,56 @@ function ConsoleLayoutInner({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
 
+/** Floating chatbot wired with useObjectChat for demo auto-response */
+function ConsoleFloatingChatbot({ appLabel, objects }: { appLabel: string; objects: any[] }) {
+  const objectNames = objects.map((o: any) => o.label || o.name).join(', ');
+
+  const {
+    messages,
+    isLoading,
+    error,
+    sendMessage,
+    stop,
+    reload,
+    clear,
+  } = useObjectChat({
+    initialMessages: [
+      {
+        id: 'welcome',
+        role: 'assistant' as const,
+        content: `Hello! I'm your **${appLabel}** assistant. How can I help you today?`,
+      },
+    ],
+    autoResponse: true,
+    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,
+  });
+
+  return (
+    <FloatingChatbot
+      floatingConfig={{
+        position: 'bottom-right',
+        defaultOpen: false,
+        panelWidth: 400,
+        panelHeight: 520,
+        title: `${appLabel} Assistant`,
+        triggerSize: 56,
+      }}
+      messages={messages as any}
+      placeholder="Ask anything..."
+      onSendMessage={(content: string) => sendMessage(content)}
+      onClear={clear}
+      onStop={isLoading ? stop : undefined}
+      onReload={reload}
+      isLoading={isLoading}
+      error={error}
+      enableMarkdown
+    />
+  );
+}
+
 export function ConsoleLayout({ 
   children, 
   activeAppName, 
@@ -37,6 +89,8 @@ export function ConsoleLayout({
   objects,
   connectionState
 }: ConsoleLayoutProps) {
+  const appLabel = resolveI18nLabel(activeApp?.label) || activeAppName;
+
   return (
     <AppShell
       sidebar={
@@ -47,7 +101,7 @@ export function ConsoleLayout({
       }
       navbar={
           <AppHeader 
-            appName={resolveI18nLabel(activeApp?.label) || activeAppName} 
+            appName={appLabel} 
             objects={objects}
             connectionState={connectionState}
           />
@@ -70,6 +124,9 @@ export function ConsoleLayout({
       <ConsoleLayoutInner>
         {children}
       </ConsoleLayoutInner>
+
+      {/* Global floating chatbot — available on every page */}
+      <ConsoleFloatingChatbot appLabel={appLabel} objects={objects} />
     </AppShell>
   );
 }