@object-ui/plugin-chatbot 3.1.5 → 3.3.1

package/src/index.tsx

@@ -1,248 +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, Input, ScrollArea, Avatar, AvatarFallback, AvatarImage } from "@object-ui/components"
-import { Send } from "lucide-react"
-
-// Message type definition
-export interface ChatMessage {
-  id: string
-  role: "user" | "assistant" | "system"
-  content: string
-  timestamp?: string
-  avatar?: string
-  avatarFallback?: string
-}
-
-// Chatbot container props
-export interface ChatbotProps extends React.HTMLAttributes<HTMLDivElement> {
-  messages?: ChatMessage[]
-  placeholder?: string
-  onSendMessage?: (message: string) => void
-  disabled?: boolean
-  showTimestamp?: boolean
-  userAvatarUrl?: string
-  userAvatarFallback?: string
-  assistantAvatarUrl?: string
-  assistantAvatarFallback?: string
-  maxHeight?: string
-}
-
-// Chatbot container component
-const Chatbot = React.forwardRef<HTMLDivElement, ChatbotProps>(
-  (
-    {
-      className,
-      messages = [],
-      placeholder = "Type your message...",
-      onSendMessage,
-      disabled = false,
-      showTimestamp = false,
-      userAvatarUrl,
-      userAvatarFallback = "You",
-      assistantAvatarUrl,
-      assistantAvatarFallback = "AI",
-      maxHeight = "500px",
-      ...props
-    },
-    ref
-  ) => {
-    const [inputValue, setInputValue] = React.useState("")
-    const scrollRef = React.useRef<HTMLDivElement>(null)
-    const inputRef = React.useRef<HTMLInputElement>(null)
-
-    // Auto-scroll to bottom when new messages arrive
-    React.useEffect(() => {
-      if (scrollRef.current) {
-        const scrollElement = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]')
-        if (scrollElement) {
-          scrollElement.scrollTop = scrollElement.scrollHeight
-        }
-      }
-    }, [messages])
-
-    const handleSend = () => {
-      if (inputValue.trim() && onSendMessage) {
-        onSendMessage(inputValue.trim())
-        setInputValue("")
-        inputRef.current?.focus()
-      }
-    }
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault()
-        handleSend()
-      }
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex flex-col border rounded-lg bg-background overflow-hidden",
-          className
-        )}
-        style={{ maxHeight }}
-        {...props}
-      >
-        {/* Messages area */}
-        <ScrollArea ref={scrollRef} className="flex-1 p-4">
-          <div className="space-y-4">
-            {messages.length === 0 ? (
-              <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">
-                No messages yet. Start a conversation!
-              </div>
-            ) : (
-              messages.map((message) => (
-                <ChatMessageItem
-                  key={message.id}
-                  message={message}
-                  showTimestamp={showTimestamp}
-                  userAvatarUrl={userAvatarUrl}
-                  userAvatarFallback={userAvatarFallback}
-                  assistantAvatarUrl={assistantAvatarUrl}
-                  assistantAvatarFallback={assistantAvatarFallback}
-                />
-              ))
-            )}
-          </div>
-        </ScrollArea>
-
-        {/* Input area */}
-        <div className="border-t p-4">
-          <div className="flex gap-2">
-            <Input
-              ref={inputRef}
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={placeholder}
-              disabled={disabled}
-              className="flex-1"
-            />
-            <Button
-              onClick={handleSend}
-              disabled={disabled || !inputValue.trim()}
-              size="icon"
-            >
-              <Send className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-)
-Chatbot.displayName = "Chatbot"
-
-// Individual message component
-export interface ChatMessageProps {
-  message: ChatMessage
-  showTimestamp?: boolean
-  userAvatarUrl?: string
-  userAvatarFallback?: string
-  assistantAvatarUrl?: string
-  assistantAvatarFallback?: string
-}
-
-const ChatMessageItem: React.FC<ChatMessageProps> = ({
-  message,
-  showTimestamp,
-  userAvatarUrl,
-  userAvatarFallback,
-  assistantAvatarUrl,
-  assistantAvatarFallback,
-}) => {
-  const isUser = message.role === "user"
-  const isSystem = message.role === "system"
-
-  if (isSystem) {
-    return (
-      <div className="flex justify-center">
-        <div className="text-xs text-muted-foreground bg-muted px-3 py-1 rounded-full">
-          {message.content}
-        </div>
-      </div>
-    )
-  }
-
-  const avatar = isUser 
-    ? (message.avatar || userAvatarUrl)
-    : (message.avatar || assistantAvatarUrl)
-  
-  const avatarFallback = isUser
-    ? (message.avatarFallback || userAvatarFallback)
-    : (message.avatarFallback || assistantAvatarFallback)
-
-  return (
-    <div
-      className={cn(
-        "flex gap-3",
-        isUser ? "flex-row-reverse" : "flex-row"
-      )}
-    >
-      <Avatar className="h-8 w-8">
-        <AvatarImage src={avatar} />
-        <AvatarFallback className="text-xs">{avatarFallback}</AvatarFallback>
-      </Avatar>
-
-      <div className={cn("flex flex-col gap-1", isUser ? "items-end" : "items-start")}>
-        <div
-          className={cn(
-            "rounded-lg px-4 py-2 max-w-[70%] break-words",
-            isUser
-              ? "bg-primary text-primary-foreground"
-              : "bg-muted"
-          )}
-        >
-          <p className="text-sm whitespace-pre-wrap">{message.content}</p>
-        </div>
-        {showTimestamp && message.timestamp && (
-          <span className="text-xs text-muted-foreground">
-            {message.timestamp}
-          </span>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// Typing indicator component
-export interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
-  avatarSrc?: string
-  avatarFallback?: string
-}
-
-const TypingIndicator = React.forwardRef<HTMLDivElement, TypingIndicatorProps>(
-  ({ className, avatarSrc, avatarFallback = "AI", ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn("flex gap-3", className)} {...props}>
-        <Avatar className="h-8 w-8">
-          <AvatarImage src={avatarSrc} />
-          <AvatarFallback className="text-xs">{avatarFallback}</AvatarFallback>
-        </Avatar>
-        <div className="flex items-center bg-muted rounded-lg px-4 py-2">
-          <div className="flex gap-1">
-            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.3s]"></span>
-            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.15s]"></span>
-            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"></span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-)
-TypingIndicator.displayName = "TypingIndicator"
-
-export { Chatbot, TypingIndicator }
-
-// Export renderer to register the component with ObjectUI
-export * from './renderer';

package/src/renderer.tsx

@@ -1,314 +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 { ComponentRegistry } from '@object-ui/core';
-import type { ChatbotSchema, ChatMessage } from '@object-ui/types';
-import { Chatbot } from './index';
-import { ChatbotEnhanced } from './ChatbotEnhanced';
-import { generateUniqueId } from './utils';
-import { useState } from 'react';
-
-/**
- * Chatbot component for Object UI
- * 
- * @remarks
- * This component supports an optional `onSend` callback in the schema:
- * - Signature: `onSend(content: string, messages: ChatMessage[]): void`
- * - Parameters:
- *   - content: The message text that was sent
- *   - messages: Array of all messages including the newly added message
- * - Called when: User sends a message via the input field
- * - Use case: Connect to backend API or trigger custom actions on message send
- */
-ComponentRegistry.register('chatbot', 
-  ({ schema, className, ...props }: { schema: ChatbotSchema; className?: string; [key: string]: any }) => {
-    // Initialize messages from schema or use empty array
-    const [messages, setMessages] = useState<ChatMessage[]>(
-      schema.messages?.map((msg: any, idx: number) => ({
-        id: msg.id || `msg-${idx}`,
-        role: msg.role || 'user',
-        content: msg.content || '',
-        timestamp: typeof msg.timestamp === 'string' ? msg.timestamp : (msg.timestamp instanceof Date ? msg.timestamp.toISOString() : undefined),
-        avatar: msg.avatar,
-        avatarFallback: msg.avatarFallback,
-      })) || []
-    );
-
-    // Handle sending new messages
-    const handleSendMessage = (content: string) => {
-      // Create user message with robust ID generation
-      const userMessage: ChatMessage = {
-        id: generateUniqueId('msg'),
-        role: 'user',
-        content,
-        timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
-      };
-
-      const updatedMessages = [...messages, userMessage];
-      setMessages(updatedMessages);
-
-      // If onSend callback is provided in schema, call it with updated messages
-      if (schema.onSend) {
-        schema.onSend(content, updatedMessages);
-      }
-
-      // Auto-response feature for demo purposes
-      if (schema.autoResponse) {
-        setTimeout(() => {
-          const assistantMessage: ChatMessage = {
-            id: generateUniqueId('msg'),
-            role: 'assistant',
-            content: schema.autoResponseText || 'Thank you for your message!',
-            timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
-          };
-          setMessages((prev) => [...prev, assistantMessage]);
-        }, schema.autoResponseDelay || 1000);
-      }
-    };
-
-    return (
-      <Chatbot 
-        messages={messages as any}
-        placeholder={schema.placeholder}
-        onSendMessage={handleSendMessage}
-        disabled={schema.disabled}
-        showTimestamp={schema.showTimestamp}
-        userAvatarUrl={schema.userAvatarUrl}
-        userAvatarFallback={schema.userAvatarFallback}
-        assistantAvatarUrl={schema.assistantAvatarUrl}
-        assistantAvatarFallback={schema.assistantAvatarFallback}
-        maxHeight={schema.maxHeight}
-        className={className}
-        {...props}
-      />
-    );
-  },
-  {
-    namespace: 'plugin-chatbot',
-    label: 'Chatbot',
-    inputs: [
-      { 
-        name: 'messages', 
-        type: 'array', 
-        label: 'Initial Messages',
-        description: 'Array of message objects with id, role, content, and optional timestamp'
-      },
-      { 
-        name: 'placeholder', 
-        type: 'string', 
-        label: 'Input Placeholder',
-        defaultValue: 'Type your message...'
-      },
-      { 
-        name: 'showTimestamp', 
-        type: 'boolean', 
-        label: 'Show Timestamps',
-        defaultValue: false
-      },
-      { 
-        name: 'disabled', 
-        type: 'boolean', 
-        label: 'Disabled',
-        defaultValue: false
-      },
-      { 
-        name: 'userAvatarUrl', 
-        type: 'string', 
-        label: 'User Avatar URL',
-        description: 'URL of the user avatar image'
-      },
-      { 
-        name: 'userAvatarFallback', 
-        type: 'string', 
-        label: 'User Avatar Fallback',
-        defaultValue: 'You',
-        description: 'Fallback text shown when user avatar image is not available'
-      },
-      { 
-        name: 'assistantAvatarUrl', 
-        type: 'string', 
-        label: 'Assistant Avatar URL',
-        description: 'URL of the assistant avatar image'
-      },
-      { 
-        name: 'assistantAvatarFallback', 
-        type: 'string', 
-        label: 'Assistant Avatar Fallback',
-        defaultValue: 'AI',
-        description: 'Fallback text shown when assistant avatar image is not available'
-      },
-      { 
-        name: 'maxHeight', 
-        type: 'string', 
-        label: 'Max Height',
-        defaultValue: '500px'
-      },
-      { 
-        name: 'autoResponse', 
-        type: 'boolean', 
-        label: 'Enable Auto Response (Demo)',
-        defaultValue: false,
-        description: 'Automatically send a response after user message (for demo purposes)'
-      },
-      { 
-        name: 'autoResponseText', 
-        type: 'string', 
-        label: 'Auto Response Text',
-        defaultValue: 'Thank you for your message!'
-      },
-      { 
-        name: 'autoResponseDelay', 
-        type: 'number', 
-        label: 'Auto Response Delay (ms)',
-        defaultValue: 1000
-      },
-      { 
-        name: 'className', 
-        type: 'string', 
-        label: 'CSS Class'
-      }
-    ],
-    defaultProps: {
-      messages: [
-        {
-          id: 'welcome',
-          role: 'assistant',
-          content: 'Hello! How can I help you today?',
-        }
-      ],
-      placeholder: 'Type your message...',
-      showTimestamp: false,
-      disabled: false,
-      userAvatarFallback: 'You',
-      assistantAvatarFallback: 'AI',
-      maxHeight: '500px',
-      autoResponse: true,
-      autoResponseText: 'Thank you for your message! This is an automated response.',
-      autoResponseDelay: 1000,
-      className: 'w-full max-w-2xl'
-    }
-  }
-);
-
-// Register Enhanced Chatbot
-ComponentRegistry.register('chatbot-enhanced', 
-  ({ schema, className, ...props }: { schema: ChatbotSchema & { 
-    enableMarkdown?: boolean; 
-    enableFileUpload?: boolean;
-    onClear?: () => void;
-  }; className?: string; [key: string]: any }) => {
-    const [messages, setMessages] = useState<ChatMessage[]>(
-      schema.messages?.map((msg: any, idx: number) => ({
-        id: msg.id || `msg-${idx}`,
-        role: msg.role || 'user',
-        content: msg.content || '',
-        timestamp: typeof msg.timestamp === 'string' ? msg.timestamp : (msg.timestamp instanceof Date ? msg.timestamp.toISOString() : undefined),
-        avatar: msg.avatar,
-        avatarFallback: msg.avatarFallback,
-      })) || []
-    );
-
-    const handleSendMessage = (content: string, _files?: File[]) => {
-      const userMessage: ChatMessage = {
-        id: generateUniqueId('msg'),
-        role: 'user',
-        content,
-        timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
-      };
-
-      const updatedMessages = [...messages, userMessage];
-      setMessages(updatedMessages);
-
-      if (schema.onSend) {
-        schema.onSend(content, updatedMessages);
-      }
-
-      // Auto-response with streaming simulation
-      if (schema.autoResponse) {
-        setTimeout(() => {
-          const assistantMessage: ChatMessage = {
-            id: generateUniqueId('msg'),
-            role: 'assistant',
-            content: schema.autoResponseText || 'Thank you for your message!',
-            timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
-          };
-          setMessages((prev) => [...prev, assistantMessage]);
-        }, schema.autoResponseDelay || 1000);
-      }
-    };
-
-    const handleClear = () => {
-      setMessages([]);
-      if (schema.onClear) {
-        schema.onClear();
-      }
-    };
-
-    return (
-      <ChatbotEnhanced
-        messages={messages as any}
-        placeholder={schema.placeholder}
-        onSendMessage={handleSendMessage}
-        onClear={handleClear}
-        disabled={schema.disabled}
-        showTimestamp={schema.showTimestamp}
-        userAvatarUrl={schema.userAvatarUrl}
-        userAvatarFallback={schema.userAvatarFallback}
-        assistantAvatarUrl={schema.assistantAvatarUrl}
-        assistantAvatarFallback={schema.assistantAvatarFallback}
-        maxHeight={schema.maxHeight}
-        enableMarkdown={schema.enableMarkdown ?? true}
-        enableFileUpload={schema.enableFileUpload ?? false}
-        className={className}
-        {...props}
-      />
-    );
-  },
-  {
-    namespace: 'plugin-chatbot',
-    label: 'Chatbot (Enhanced)',
-    inputs: [
-      { name: 'messages', type: 'array', label: 'Initial Messages' },
-      { name: 'placeholder', type: 'string', label: 'Input Placeholder', defaultValue: 'Type your message...' },
-      { name: 'showTimestamp', type: 'boolean', label: 'Show Timestamps', defaultValue: false },
-      { name: 'disabled', type: 'boolean', label: 'Disabled', defaultValue: false },
-      { name: 'enableMarkdown', type: 'boolean', label: 'Enable Markdown', defaultValue: true },
-      { name: 'enableFileUpload', type: 'boolean', label: 'Enable File Upload', defaultValue: false },
-      { name: 'userAvatarUrl', type: 'string', label: 'User Avatar URL' },
-      { name: 'userAvatarFallback', type: 'string', label: 'User Avatar Fallback', defaultValue: 'You' },
-      { name: 'assistantAvatarUrl', type: 'string', label: 'Assistant Avatar URL' },
-      { name: 'assistantAvatarFallback', type: 'string', label: 'Assistant Avatar Fallback', defaultValue: 'AI' },
-      { name: 'maxHeight', type: 'string', label: 'Max Height', defaultValue: '500px' },
-      { name: 'autoResponse', type: 'boolean', label: 'Enable Auto Response (Demo)', defaultValue: false },
-      { name: 'autoResponseText', type: 'string', label: 'Auto Response Text', defaultValue: 'Thank you for your message!' },
-      { name: 'autoResponseDelay', type: 'number', label: 'Auto Response Delay (ms)', defaultValue: 1000 },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      messages: [
-        {
-          id: 'welcome',
-          role: 'assistant',
-          content: 'Hello! How can I help you today?',
-        }
-      ],
-      placeholder: 'Type your message...',
-      showTimestamp: false,
-      disabled: false,
-      enableMarkdown: true,
-      enableFileUpload: false,
-      userAvatarFallback: 'You',
-      assistantAvatarFallback: 'AI',
-      maxHeight: '500px',
-      autoResponse: true,
-      autoResponseText: 'Thank you for your message! This is an automated response.',
-      autoResponseDelay: 1000,
-      className: 'w-full max-w-2xl'
-    }
-  }
-);

package/src/utils.ts

@@ -1,18 +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.
- */
-
-/**
- * Generates a unique ID for messages or other entities
- * Uses crypto.randomUUID() if available, otherwise falls back to timestamp + random string
- */
-export function generateUniqueId(prefix = 'msg'): string {
-  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-    return crypto.randomUUID();
-  }
-  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-}

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "jsx": "react-jsx",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "noEmit": false,
-    "declaration": true,
-    "composite": true,
-    "declarationMap": true,
-    "skipLibCheck": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
-}

package/vite.config.ts

@@ -1,54 +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 { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import { resolve } from 'path';
-
-export default defineConfig({
-  plugins: [
-    react(),
-    dts({
-      insertTypesEntry: true,
-      include: ['src'],
-      exclude: ['**/*.test.ts', '**/*.test.tsx', 'node_modules'],
-      skipDiagnostics: true,
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, './src'),
-    },
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.tsx'),
-      name: 'ObjectUIPluginChatbot',
-      fileName: 'index',
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react', 'lucide-react'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          '@object-ui/components': 'ObjectUIComponents',
-          '@object-ui/core': 'ObjectUICore',
-          '@object-ui/react': 'ObjectUIReact',
-          'lucide-react': 'LucideReact',
-        },
-      },
-    },
-  },
-  test: {
-    globals: true,
-    environment: 'happy-dom',
-    passWithNoTests: true,
-  },
-});