@object-ui/plugin-chatbot 3.3.0 → 3.3.2

package/src/FloatingChatbotPanel.tsx

@@ -1,102 +0,0 @@
-/**
- * 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>
-  )
-}

package/src/FloatingChatbotProvider.tsx

@@ -1,80 +0,0 @@
-/**
- * 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

@@ -1,55 +0,0 @@
-/**
- * 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__/ChatbotEnhanced.test.tsx

@@ -1,199 +0,0 @@
-/**
- * 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, waitFor } from '@testing-library/react';
-import { ChatbotEnhanced, type ChatMessage } from '../ChatbotEnhanced';
-
-describe('ChatbotEnhanced', () => {
-  const mockMessages: ChatMessage[] = [
-    {
-      id: '1',
-      role: 'user',
-      content: 'Hello!',
-      timestamp: '10:00 AM',
-    },
-    {
-      id: '2',
-      role: 'assistant',
-      content: 'Hi there! How can I help you?',
-      timestamp: '10:01 AM',
-    },
-  ];
-
-  it('should render without crashing', () => {
-    const { container } = render(<ChatbotEnhanced />);
-    expect(container).toBeTruthy();
-  });
-
-  it('should render messages', () => {
-    render(<ChatbotEnhanced messages={mockMessages} />);
-    
-    expect(screen.getByText('Hello!')).toBeInTheDocument();
-    expect(screen.getByText('Hi there! How can I help you?')).toBeInTheDocument();
-  });
-
-  it('should render placeholder in input', () => {
-    const placeholder = 'Type your message...';
-    render(<ChatbotEnhanced placeholder={placeholder} />);
-    
-    expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
-  });
-
-  it('should call onSendMessage when send button is clicked', async () => {
-    const onSendMessage = vi.fn();
-    render(<ChatbotEnhanced onSendMessage={onSendMessage} />);
-    
-    const input = screen.getByPlaceholderText(/message/i);
-    const sendButton = screen.getByRole('button', { name: /send/i });
-    
-    fireEvent.change(input, { target: { value: 'Test message' } });
-    fireEvent.click(sendButton);
-    
-    await waitFor(() => {
-      expect(onSendMessage).toHaveBeenCalledWith('Test message', []);
-    });
-  });
-
-  it('should call onSendMessage when Enter is pressed', async () => {
-    const onSendMessage = vi.fn();
-    render(<ChatbotEnhanced onSendMessage={onSendMessage} />);
-    
-    const input = screen.getByPlaceholderText(/message/i);
-    
-    fireEvent.change(input, { target: { value: 'Test message' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    
-    await waitFor(() => {
-      expect(onSendMessage).toHaveBeenCalledWith('Test message', []);
-    });
-  });
-
-  it('should not send empty messages', async () => {
-    const onSendMessage = vi.fn();
-    render(<ChatbotEnhanced onSendMessage={onSendMessage} />);
-    
-    const sendButton = screen.getByRole('button', { name: /send/i });
-    
-    fireEvent.click(sendButton);
-    
-    await waitFor(() => {
-      expect(onSendMessage).not.toHaveBeenCalled();
-    });
-  });
-
-  it('should call onClear when clear button is clicked', () => {
-    const onClear = vi.fn();
-    render(<ChatbotEnhanced messages={mockMessages} onClear={onClear} />);
-    
-    const clearButton = screen.getByRole('button', { name: /clear/i });
-    fireEvent.click(clearButton);
-    
-    expect(onClear).toHaveBeenCalled();
-  });
-
-  it('should render markdown content when enabled', () => {
-    const markdownMessage: ChatMessage[] = [
-      {
-        id: '1',
-        role: 'assistant',
-        content: '**Bold text** and *italic text*',
-      },
-    ];
-    
-    render(<ChatbotEnhanced messages={markdownMessage} enableMarkdown={true} />);
-    
-    // Check that markdown is rendered (will create strong and em tags)
-    const { container } = render(<ChatbotEnhanced messages={markdownMessage} enableMarkdown={true} />);
-    expect(container.querySelector('strong')).toBeTruthy();
-  });
-
-  it('should render plain text when markdown is disabled', () => {
-    const textMessage: ChatMessage[] = [
-      {
-        id: '1',
-        role: 'assistant',
-        content: '**Bold text** and *italic text*',
-      },
-    ];
-    
-    render(<ChatbotEnhanced messages={textMessage} enableMarkdown={false} />);
-    
-    // Should render as plain text
-    expect(screen.getByText('**Bold text** and *italic text*')).toBeInTheDocument();
-  });
-
-  it('should show timestamps when enabled', () => {
-    render(<ChatbotEnhanced messages={mockMessages} showTimestamp={true} />);
-    
-    expect(screen.getByText('10:00 AM')).toBeInTheDocument();
-    expect(screen.getByText('10:01 AM')).toBeInTheDocument();
-  });
-
-  it('should disable input when disabled prop is true', () => {
-    render(<ChatbotEnhanced disabled={true} />);
-    
-    const input = screen.getByPlaceholderText(/message/i);
-    expect(input).toBeDisabled();
-  });
-
-  it('should render file upload button when enabled', () => {
-    render(<ChatbotEnhanced enableFileUpload={true} />);
-    
-    const fileButton = screen.getByRole('button', { name: /attach/i });
-    expect(fileButton).toBeInTheDocument();
-  });
-
-  it('should handle streaming messages', () => {
-    const streamingMessage: ChatMessage[] = [
-      {
-        id: '1',
-        role: 'assistant',
-        content: 'Streaming content...',
-        streaming: true,
-      },
-    ];
-    
-    const { container } = render(<ChatbotEnhanced messages={streamingMessage} />);
-    
-    expect(screen.getByText('Streaming content...')).toBeInTheDocument();
-    // Streaming messages typically have a visual indicator (cursor/animation)
-  });
-
-  it('should render user and assistant avatars', () => {
-    render(
-      <ChatbotEnhanced
-        messages={mockMessages}
-        userAvatarFallback="U"
-        assistantAvatarFallback="A"
-      />
-    );
-    
-    // Avatars should be rendered
-    expect(screen.getByText('U')).toBeInTheDocument();
-    expect(screen.getByText('A')).toBeInTheDocument();
-  });
-
-  it('should clear input after sending message', async () => {
-    const onSendMessage = vi.fn();
-    render(<ChatbotEnhanced onSendMessage={onSendMessage} />);
-    
-    const input = screen.getByPlaceholderText(/message/i) as HTMLInputElement;
-    
-    fireEvent.change(input, { target: { value: 'Test message' } });
-    expect(input.value).toBe('Test message');
-    
-    const sendButton = screen.getByRole('button', { name: /send/i });
-    fireEvent.click(sendButton);
-    
-    await waitFor(() => {
-      expect(input.value).toBe('');
-    });
-  });
-});

package/src/__tests__/ChatbotEnhancedStreaming.test.tsx

@@ -1,159 +0,0 @@
-/**
- * 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();
-  });
-});