Merge pull request #1156 from objectstack-ai/copilot/add-floating-chatbot-widget

Author: hotlong

CHANGELOG.md

@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **Floating Chatbot FAB Widget** (`@object-ui/plugin-chatbot`): Airtable-style floating action button (FAB) that opens a chatbot panel overlay. New components: `FloatingChatbot`, `FloatingChatbotPanel`, `FloatingChatbotTrigger`, `FloatingChatbotProvider`. Features include configurable position (bottom-right/left), fullscreen toggle, close, portal rendering to avoid z-index conflicts, and `useFloatingChatbot` hook for programmatic control. Registered as `chatbot-floating` in ComponentRegistry. 21 new unit tests.
+
+- **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,17 +3,25 @@
  *
  * 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, type ChatMessage } from '@object-ui/plugin-chatbot';
 import { AppSidebar } from './AppSidebar';
 import { AppHeader } from './AppHeader';
 import { useResponsiveSidebar } from '../hooks/useResponsiveSidebar';
 import { resolveI18nLabel } from '../utils';
 import type { ConnectionState } from '../dataSource';
 
+/** Minimal object shape used by the chatbot context */
+interface ConsoleObject {
+  name: string;
+  label?: string;
+}
+
 interface ConsoleLayoutProps {
   children: React.ReactNode;
   activeAppName: string;
@@ -29,6 +37,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: ConsoleObject[] }) {
+  const objectNames = objects.map((o) => 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 ChatMessage[]}
+      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 +95,8 @@ export function ConsoleLayout({
   objects,
   connectionState
 }: ConsoleLayoutProps) {
+  const appLabel = resolveI18nLabel(activeApp?.label) || activeAppName;
+
   return (
     <AppShell
       sidebar={
@@ -47,7 +107,7 @@ export function ConsoleLayout({
       }
       navbar={
           <AppHeader 
-            appName={resolveI18nLabel(activeApp?.label) || activeAppName} 
+            appName={appLabel} 
             objects={objects}
             connectionState={connectionState}
           />
@@ -70,6 +130,9 @@ export function ConsoleLayout({
       <ConsoleLayoutInner>
         {children}
       </ConsoleLayoutInner>
+
+      {/* Global floating chatbot — available on every page */}
+      <ConsoleFloatingChatbot appLabel={appLabel} objects={objects} />
     </AppShell>
   );
 }

packages/plugin-chatbot/src/FloatingChatbot.tsx

@@ -0,0 +1,89 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import type { FloatingChatbotConfig } from "@object-ui/types"
+import { FloatingChatbotProvider } from "./FloatingChatbotProvider"
+import { FloatingChatbotTrigger } from "./FloatingChatbotTrigger"
+import { FloatingChatbotPanel } from "./FloatingChatbotPanel"
+import { ChatbotEnhanced, type ChatbotEnhancedProps } from "./ChatbotEnhanced"
+
+export interface FloatingChatbotProps extends ChatbotEnhancedProps {
+  /** Floating configuration */
+  floatingConfig?: FloatingChatbotConfig
+}
+
+/**
+ * Floating Chatbot — Airtable-style FAB widget.
+ *
+ * Wraps `ChatbotEnhanced` in a floating panel that can be toggled
+ * via a fixed FAB trigger button. Uses React portal to avoid
+ * DOM/z-index conflicts.
+ */
+export function FloatingChatbot({
+  floatingConfig,
+  ...chatbotProps
+}: FloatingChatbotProps) {
+  const {
+    position = "bottom-right",
+    defaultOpen = false,
+    panelWidth = 400,
+    panelHeight = 520,
+    title = "Chat",
+    triggerSize = 56,
+  } = floatingConfig ?? {}
+
+  const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null)
+
+  React.useEffect(() => {
+    // Create a portal root so the floating UI sits outside the normal DOM tree
+    let container = document.getElementById("floating-chatbot-portal")
+    if (!container) {
+      container = document.createElement("div")
+      container.id = "floating-chatbot-portal"
+      document.body.appendChild(container)
+    }
+    setPortalContainer(container)
+
+    return () => {
+      // Only remove if we created it and it's still in the DOM
+      if (container && container.parentNode && !container.hasChildNodes()) {
+        container.parentNode.removeChild(container)
+      }
+    }
+  }, [])
+
+  const content = (
+    <FloatingChatbotProvider defaultOpen={defaultOpen}>
+      <FloatingChatbotTrigger
+        position={position}
+        size={triggerSize}
+      />
+      <FloatingChatbotPanel
+        title={title}
+        position={position}
+        width={panelWidth}
+        height={panelHeight}
+      >
+        <ChatbotEnhanced
+          {...chatbotProps}
+          maxHeight="100%"
+          className="h-full border-0 rounded-none"
+        />
+      </FloatingChatbotPanel>
+    </FloatingChatbotProvider>
+  )
+
+  // Use portal rendering when in browser, fallback to inline for SSR / tests
+  if (portalContainer) {
+    return ReactDOM.createPortal(content, portalContainer)
+  }
+
+  return content
+}

packages/plugin-chatbot/src/FloatingChatbotPanel.tsx

@@ -0,0 +1,102 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import { cn } from "@object-ui/components"
+import { Button } from "@object-ui/components"
+import { X, Maximize2, Minimize2 } from "lucide-react"
+import { useFloatingChatbot } from "./FloatingChatbotProvider"
+
+export interface FloatingChatbotPanelProps {
+  /** Panel title */
+  title?: string
+  /** Position of the panel (anchored to FAB corner) */
+  position?: "bottom-right" | "bottom-left"
+  /** Panel width in pixels (ignored in fullscreen) */
+  width?: number
+  /** Panel height in pixels (ignored in fullscreen) */
+  height?: number
+  /** Content to render inside the panel body */
+  children: React.ReactNode
+  /** Custom className for the panel container */
+  className?: string
+}
+
+/**
+ * Floating panel overlay for the chatbot.
+ * Renders above all content, anchored to the configured position.
+ * Supports fullscreen toggle and close.
+ */
+export function FloatingChatbotPanel({
+  title = "Chat",
+  position = "bottom-right",
+  width = 400,
+  height = 520,
+  children,
+  className,
+}: FloatingChatbotPanelProps) {
+  const { isOpen, isFullscreen, close, toggleFullscreen } = useFloatingChatbot()
+
+  if (!isOpen) return null
+
+  const panelStyle: React.CSSProperties = isFullscreen
+    ? { inset: 0, width: "100vw", height: "100vh" }
+    : { width, height, maxHeight: "calc(100vh - 100px)" }
+
+  return (
+    <div
+      className={cn(
+        "fixed z-50 flex flex-col rounded-lg border bg-background shadow-xl overflow-hidden transition-all",
+        isFullscreen
+          ? "inset-0 rounded-none"
+          : position === "bottom-right"
+            ? "right-6 bottom-20"
+            : "left-6 bottom-20",
+        className
+      )}
+      style={panelStyle}
+      role="dialog"
+      aria-label={title}
+      data-testid="floating-chatbot-panel"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40">
+        <span className="text-sm font-medium truncate">{title}</span>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={toggleFullscreen}
+            aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+            data-testid="floating-chatbot-fullscreen"
+          >
+            {isFullscreen ? (
+              <Minimize2 className="h-4 w-4" />
+            ) : (
+              <Maximize2 className="h-4 w-4" />
+            )}
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={close}
+            aria-label="Close chat"
+            data-testid="floating-chatbot-close"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-hidden">{children}</div>
+    </div>
+  )
+}

packages/plugin-chatbot/src/FloatingChatbotProvider.tsx

@@ -0,0 +1,80 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+
+export interface FloatingChatbotState {
+  /** Whether the floating panel is currently open */
+  isOpen: boolean
+  /** Whether the panel is in fullscreen mode */
+  isFullscreen: boolean
+}
+
+export interface FloatingChatbotActions {
+  /** Open the floating panel */
+  open: () => void
+  /** Close the floating panel */
+  close: () => void
+  /** Toggle the floating panel open/closed */
+  toggle: () => void
+  /** Toggle fullscreen mode */
+  toggleFullscreen: () => void
+}
+
+export type FloatingChatbotContextValue = FloatingChatbotState & FloatingChatbotActions
+
+const FloatingChatbotContext = React.createContext<FloatingChatbotContextValue | null>(null)
+
+export interface FloatingChatbotProviderProps {
+  /** Whether the panel is open by default */
+  defaultOpen?: boolean
+  children: React.ReactNode
+}
+
+export function FloatingChatbotProvider({
+  defaultOpen = false,
+  children,
+}: FloatingChatbotProviderProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen)
+  const [isFullscreen, setIsFullscreen] = React.useState(false)
+
+  const value = React.useMemo<FloatingChatbotContextValue>(
+    () => ({
+      isOpen,
+      isFullscreen,
+      open: () => setIsOpen(true),
+      close: () => {
+        setIsOpen(false)
+        setIsFullscreen(false)
+      },
+      toggle: () => setIsOpen((prev) => !prev),
+      toggleFullscreen: () => setIsFullscreen((prev) => !prev),
+    }),
+    [isOpen, isFullscreen]
+  )
+
+  return (
+    <FloatingChatbotContext.Provider value={value}>
+      {children}
+    </FloatingChatbotContext.Provider>
+  )
+}
+
+/**
+ * Hook to access the floating chatbot state and actions.
+ * Must be used within a `FloatingChatbotProvider`.
+ */
+export function useFloatingChatbot(): FloatingChatbotContextValue {
+  const context = React.useContext(FloatingChatbotContext)
+  if (!context) {
+    throw new Error(
+      "useFloatingChatbot must be used within a <FloatingChatbotProvider>"
+    )
+  }
+  return context
+}