@object-ui/plugin-chatbot 3.1.4 → 3.3.0

package/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
+}

package/src/FloatingChatbotTrigger.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { MessageCircle, X } from "lucide-react"
+import { useFloatingChatbot } from "./FloatingChatbotProvider"
+
+export interface FloatingChatbotTriggerProps {
+  /** Position of the FAB */
+  position?: "bottom-right" | "bottom-left"
+  /** Size of the trigger button in pixels */
+  size?: number
+  /** Custom className */
+  className?: string
+}
+
+/**
+ * Floating Action Button (FAB) trigger for the chatbot.
+ * Renders a circular button fixed to the viewport corner.
+ */
+export function FloatingChatbotTrigger({
+  position = "bottom-right",
+  size = 56,
+  className,
+}: FloatingChatbotTriggerProps) {
+  const { isOpen, toggle } = useFloatingChatbot()
+
+  return (
+    <Button
+      onClick={toggle}
+      className={cn(
+        "fixed z-50 rounded-full shadow-lg transition-transform hover:scale-105",
+        position === "bottom-right" ? "right-6 bottom-6" : "left-6 bottom-6",
+        className
+      )}
+      style={{ width: size, height: size }}
+      size="icon"
+      aria-label={isOpen ? "Close chat" : "Open chat"}
+      data-testid="floating-chatbot-trigger"
+    >
+      {isOpen ? (
+        <X className="h-6 w-6" />
+      ) : (
+        <MessageCircle className="h-6 w-6" />
+      )}
+    </Button>
+  )
+}

package/src/__tests__/ChatbotEnhancedStreaming.test.tsx

@@ -0,0 +1,159 @@
+/**
+ * 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 '@testing-library/jest-dom';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ChatbotEnhanced, type ChatMessage } from '../ChatbotEnhanced';
+
+describe('ChatbotEnhanced - Streaming & AI Features', () => {
+  const mockMessages: ChatMessage[] = [
+    { id: '1', role: 'user', content: 'Hello!' },
+    { id: '2', role: 'assistant', content: 'Hi there!' },
+  ];
+
+  it('should show stop button when isLoading and onStop is provided', () => {
+    const onStop = vi.fn();
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        isLoading={true}
+        onStop={onStop}
+      />
+    );
+
+    const stopButton = screen.getByRole('button', { name: /stop/i });
+    expect(stopButton).toBeInTheDocument();
+
+    fireEvent.click(stopButton);
+    expect(onStop).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not show stop button when not loading', () => {
+    const onStop = vi.fn();
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        isLoading={false}
+        onStop={onStop}
+      />
+    );
+
+    expect(screen.queryByRole('button', { name: /stop/i })).not.toBeInTheDocument();
+  });
+
+  it('should not show stop button when onStop is not provided', () => {
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        isLoading={true}
+      />
+    );
+
+    expect(screen.queryByRole('button', { name: /stop/i })).not.toBeInTheDocument();
+  });
+
+  it('should show error message when error is provided', () => {
+    const error = new Error('Connection failed');
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        error={error}
+      />
+    );
+
+    expect(screen.getByText('Connection failed')).toBeInTheDocument();
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('should show retry button in error state when onReload is provided', () => {
+    const onReload = vi.fn();
+    const error = new Error('Network error');
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        error={error}
+        onReload={onReload}
+      />
+    );
+
+    const retryButton = screen.getByRole('button', { name: /retry/i });
+    expect(retryButton).toBeInTheDocument();
+
+    fireEvent.click(retryButton);
+    expect(onReload).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not show retry button when onReload is not provided', () => {
+    const error = new Error('Error');
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        error={error}
+      />
+    );
+
+    expect(screen.queryByRole('button', { name: /retry/i })).not.toBeInTheDocument();
+  });
+
+  it('should disable input when isLoading is true', () => {
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        isLoading={true}
+      />
+    );
+
+    const input = screen.getByPlaceholderText(/message/i);
+    expect(input).toBeDisabled();
+  });
+
+  it('should disable send button when isLoading is true', () => {
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        isLoading={true}
+      />
+    );
+
+    const sendButton = screen.getByRole('button', { name: /send/i });
+    expect(sendButton).toBeDisabled();
+  });
+
+  it('should show streaming indicator on streaming messages', () => {
+    const streamingMessages: ChatMessage[] = [
+      {
+        id: '1',
+        role: 'assistant',
+        content: 'Generating...',
+        streaming: true,
+      },
+    ];
+
+    const { container } = render(
+      <ChatbotEnhanced messages={streamingMessages} />
+    );
+
+    expect(screen.getByText('Generating...')).toBeInTheDocument();
+    // Streaming indicator should be present (bouncing dots)
+    const bouncingDots = container.querySelectorAll('.animate-bounce');
+    expect(bouncingDots.length).toBe(3);
+  });
+
+  it('should show default error message when error has no message', () => {
+    const error = new Error('');
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        error={error}
+      />
+    );
+
+    expect(screen.getByText('An error occurred')).toBeInTheDocument();
+  });
+});

package/src/__tests__/FloatingChatbotProvider.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * 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 '@testing-library/jest-dom';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import {
+  FloatingChatbotProvider,
+  useFloatingChatbot,
+} from '../FloatingChatbotProvider';
+import * as React from 'react';
+
+// Helper to render the hook inside a provider
+function TestConsumer() {
+  const ctx = useFloatingChatbot();
+  return (
+    <div>
+      <span data-testid="isOpen">{String(ctx.isOpen)}</span>
+      <span data-testid="isFullscreen">{String(ctx.isFullscreen)}</span>
+      <button data-testid="open" onClick={ctx.open}>Open</button>
+      <button data-testid="close" onClick={ctx.close}>Close</button>
+      <button data-testid="toggle" onClick={ctx.toggle}>Toggle</button>
+      <button data-testid="toggleFs" onClick={ctx.toggleFullscreen}>ToggleFS</button>
+    </div>
+  );
+}
+
+describe('FloatingChatbotProvider', () => {
+  it('defaults to closed', () => {
+    render(
+      <FloatingChatbotProvider>
+        <TestConsumer />
+      </FloatingChatbotProvider>
+    );
+    expect(screen.getByTestId('isOpen').textContent).toBe('false');
+    expect(screen.getByTestId('isFullscreen').textContent).toBe('false');
+  });
+
+  it('respects defaultOpen=true', () => {
+    render(
+      <FloatingChatbotProvider defaultOpen={true}>
+        <TestConsumer />
+      </FloatingChatbotProvider>
+    );
+    expect(screen.getByTestId('isOpen').textContent).toBe('true');
+  });
+
+  it('open() sets isOpen to true', () => {
+    render(
+      <FloatingChatbotProvider>
+        <TestConsumer />
+      </FloatingChatbotProvider>
+    );
+    expect(screen.getByTestId('isOpen').textContent).toBe('false');
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('open'));
+    });
+    expect(screen.getByTestId('isOpen').textContent).toBe('true');
+  });
+
+  it('close() sets isOpen to false and resets fullscreen', () => {
+    render(
+      <FloatingChatbotProvider defaultOpen={true}>
+        <TestConsumer />
+      </FloatingChatbotProvider>
+    );
+
+    // Go fullscreen first
+    act(() => {
+      fireEvent.click(screen.getByTestId('toggleFs'));
+    });
+    expect(screen.getByTestId('isFullscreen').textContent).toBe('true');
+
+    // Close should reset both
+    act(() => {
+      fireEvent.click(screen.getByTestId('close'));
+    });
+    expect(screen.getByTestId('isOpen').textContent).toBe('false');
+    expect(screen.getByTestId('isFullscreen').textContent).toBe('false');
+  });
+
+  it('toggle() flips isOpen', () => {
+    render(
+      <FloatingChatbotProvider>
+        <TestConsumer />
+      </FloatingChatbotProvider>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('toggle'));
+    });
+    expect(screen.getByTestId('isOpen').textContent).toBe('true');
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('toggle'));
+    });
+    expect(screen.getByTestId('isOpen').textContent).toBe('false');
+  });
+
+  it('toggleFullscreen() flips isFullscreen', () => {
+    render(
+      <FloatingChatbotProvider defaultOpen={true}>
+        <TestConsumer />
+      </FloatingChatbotProvider>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('toggleFs'));
+    });
+    expect(screen.getByTestId('isFullscreen').textContent).toBe('true');
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('toggleFs'));
+    });
+    expect(screen.getByTestId('isFullscreen').textContent).toBe('false');
+  });
+});
+
+describe('useFloatingChatbot', () => {
+  it('throws when used outside a provider', () => {
+    // Suppress console.error for this test
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<TestConsumer />)).toThrow(
+      'useFloatingChatbot must be used within a <FloatingChatbotProvider>'
+    );
+    spy.mockRestore();
+  });
+});

package/src/__tests__/FloatingChatbotWidgets.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * 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 '@testing-library/jest-dom';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { FloatingChatbotProvider } from '../FloatingChatbotProvider';
+import { FloatingChatbotTrigger } from '../FloatingChatbotTrigger';
+import { FloatingChatbotPanel } from '../FloatingChatbotPanel';
+
+// Wrap in provider helper
+function renderWithProvider(
+  ui: React.ReactElement,
+  { defaultOpen = false }: { defaultOpen?: boolean } = {}
+) {
+  return render(
+    <FloatingChatbotProvider defaultOpen={defaultOpen}>{ui}</FloatingChatbotProvider>
+  );
+}
+
+describe('FloatingChatbotTrigger', () => {
+  it('renders a trigger button', () => {
+    renderWithProvider(<FloatingChatbotTrigger />);
+    expect(screen.getByTestId('floating-chatbot-trigger')).toBeInTheDocument();
+  });
+
+  it('shows "Open chat" label when closed', () => {
+    renderWithProvider(<FloatingChatbotTrigger />);
+    expect(screen.getByLabelText('Open chat')).toBeInTheDocument();
+  });
+
+  it('shows "Close chat" label when open', () => {
+    renderWithProvider(<FloatingChatbotTrigger />, { defaultOpen: true });
+    expect(screen.getByLabelText('Close chat')).toBeInTheDocument();
+  });
+
+  it('toggles open state on click', () => {
+    renderWithProvider(
+      <>
+        <FloatingChatbotTrigger />
+        <FloatingChatbotPanel><span>Panel content</span></FloatingChatbotPanel>
+      </>
+    );
+
+    // Panel should not be visible initially
+    expect(screen.queryByTestId('floating-chatbot-panel')).not.toBeInTheDocument();
+
+    // Click trigger to open
+    act(() => {
+      fireEvent.click(screen.getByTestId('floating-chatbot-trigger'));
+    });
+    expect(screen.getByTestId('floating-chatbot-panel')).toBeInTheDocument();
+
+    // Click trigger to close
+    act(() => {
+      fireEvent.click(screen.getByTestId('floating-chatbot-trigger'));
+    });
+    expect(screen.queryByTestId('floating-chatbot-panel')).not.toBeInTheDocument();
+  });
+
+  it('applies bottom-left position class', () => {
+    renderWithProvider(<FloatingChatbotTrigger position="bottom-left" />);
+    const trigger = screen.getByTestId('floating-chatbot-trigger');
+    expect(trigger.className).toContain('left-6');
+  });
+
+  it('applies custom size', () => {
+    renderWithProvider(<FloatingChatbotTrigger size={48} />);
+    const trigger = screen.getByTestId('floating-chatbot-trigger');
+    expect(trigger.style.width).toBe('48px');
+    expect(trigger.style.height).toBe('48px');
+  });
+});
+
+describe('FloatingChatbotPanel', () => {
+  it('does not render when closed', () => {
+    renderWithProvider(
+      <FloatingChatbotPanel><span>Content</span></FloatingChatbotPanel>
+    );
+    expect(screen.queryByTestId('floating-chatbot-panel')).not.toBeInTheDocument();
+  });
+
+  it('renders when open', () => {
+    renderWithProvider(
+      <FloatingChatbotPanel><span>Panel body</span></FloatingChatbotPanel>,
+      { defaultOpen: true }
+    );
+    expect(screen.getByTestId('floating-chatbot-panel')).toBeInTheDocument();
+    expect(screen.getByText('Panel body')).toBeInTheDocument();
+  });
+
+  it('renders custom title', () => {
+    renderWithProvider(
+      <FloatingChatbotPanel title="Help"><span>Body</span></FloatingChatbotPanel>,
+      { defaultOpen: true }
+    );
+    expect(screen.getByText('Help')).toBeInTheDocument();
+  });
+
+  it('has dialog role with aria-label', () => {
+    renderWithProvider(
+      <FloatingChatbotPanel title="Help"><span>Body</span></FloatingChatbotPanel>,
+      { defaultOpen: true }
+    );
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAttribute('aria-label', 'Help');
+  });
+
+  it('close button closes the panel', () => {
+    renderWithProvider(
+      <FloatingChatbotPanel><span>Body</span></FloatingChatbotPanel>,
+      { defaultOpen: true }
+    );
+    expect(screen.getByTestId('floating-chatbot-panel')).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('floating-chatbot-close'));
+    });
+    expect(screen.queryByTestId('floating-chatbot-panel')).not.toBeInTheDocument();
+  });
+
+  it('fullscreen button toggles fullscreen', () => {
+    renderWithProvider(
+      <FloatingChatbotPanel><span>Body</span></FloatingChatbotPanel>,
+      { defaultOpen: true }
+    );
+
+    const fsButton = screen.getByTestId('floating-chatbot-fullscreen');
+    expect(fsButton).toHaveAttribute('aria-label', 'Fullscreen');
+
+    act(() => {
+      fireEvent.click(fsButton);
+    });
+    expect(screen.getByTestId('floating-chatbot-fullscreen')).toHaveAttribute(
+      'aria-label',
+      'Exit fullscreen'
+    );
+  });
+
+  it('applies custom width and height', () => {
+    renderWithProvider(
+      <FloatingChatbotPanel width={500} height={600}>
+        <span>Body</span>
+      </FloatingChatbotPanel>,
+      { defaultOpen: true }
+    );
+    const panel = screen.getByTestId('floating-chatbot-panel');
+    expect(panel.style.width).toBe('500px');
+    expect(panel.style.height).toBe('600px');
+  });
+
+  it('bottom-left position applies left-6 class', () => {
+    renderWithProvider(
+      <FloatingChatbotPanel position="bottom-left"><span>Body</span></FloatingChatbotPanel>,
+      { defaultOpen: true }
+    );
+    const panel = screen.getByTestId('floating-chatbot-panel');
+    expect(panel.className).toContain('left-6');
+  });
+});