@object-ui/plugin-chatbot 3.3.0 → 3.3.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@object-ui/plugin-chatbot",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "type": "module",
   "license": "MIT",
   "description": "Chatbot interface plugin for Object UI",
-  "homepage": "https://www.objectui.org",
+  "homepage": "https://www.objectui.org/docs/plugins/plugin-chatbot",
   "repository": {
     "type": "git",
-    "url": "https://github.com/objectstack-ai/objectui.git",
+    "url": "git+https://github.com/objectstack-ai/objectui.git",
     "directory": "packages/plugin-chatbot"
   },
   "bugs": {
@@ -24,16 +24,16 @@
     }
   },
   "dependencies": {
-    "@ai-sdk/react": "^3.0.160",
-    "ai": "^6.0.158",
+    "@ai-sdk/react": "^3.0.176",
+    "ai": "^6.0.174",
     "lucide-react": "^1.8.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "remark-gfm": "^4.0.1",
-    "@object-ui/components": "3.3.0",
-    "@object-ui/core": "3.3.0",
-    "@object-ui/react": "3.3.0",
-    "@object-ui/types": "3.3.0"
+    "@object-ui/components": "3.3.1",
+    "@object-ui/core": "3.3.1",
+    "@object-ui/react": "3.3.1",
+    "@object-ui/types": "3.3.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -44,10 +44,34 @@
     "@types/react-dom": "19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^6.0.1",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.8",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
     "vite-plugin-dts": "^4.5.4"
   },
+  "keywords": [
+    "objectui",
+    "sdui",
+    "schema-driven-ui",
+    "react",
+    "tailwind",
+    "shadcn",
+    "objectstack",
+    "plugin",
+    "chatbot",
+    "ai",
+    "chat",
+    "conversation"
+  ],
+  "author": "ObjectStack Team <team@objectstack.ai>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "vite build",
     "test": "vitest run",

package/.turbo/turbo-build.log

@@ -1,53 +0,0 @@
-
-> @object-ui/plugin-chatbot@3.3.0 build /home/runner/work/objectui/objectui/packages/plugin-chatbot
-> vite build
-
-vite v8.0.8 building client environment for production...
-
-rendering chunks...
-
-[vite:dts] Start generate declaration files...
-src/useObjectChat.ts:178:5 - error TS2353: Object literal may only specify known properties, and 'api' does not exist in type 'UseChatOptions<UIMessage<unknown, UIDataTypes, UITools>>'.
-
-178     api: isApiMode ? api! : '/api/noop',
-        ~~~
-src/useObjectChat.ts:216:7 - error TS2339: Property 'isLoading' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
-
-216       isLoading,
-          ~~~~~~~~~
-src/useObjectChat.ts:218:7 - error TS2339: Property 'input' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
-
-218       input,
-          ~~~~~
-src/useObjectChat.ts:219:7 - error TS2339: Property 'setInput' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
-
-219       setInput,
-          ~~~~~~~~
-src/useObjectChat.ts:220:7 - error TS2339: Property 'handleInputChange' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
-
-220       handleInputChange,
-          ~~~~~~~~~~~~~~~~~
-src/useObjectChat.ts:221:7 - error TS2339: Property 'append' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
-
-221       append,
-          ~~~~~~
-src/useObjectChat.ts:223:7 - error TS2339: Property 'reload' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
-
-223       reload,
-          ~~~~~~
-
-[vite:dts] Declaration files built in 30288ms.
-
-computing gzip size...
-dist/index.js  1,222.85 kB │ gzip: 352.84 kB
-
-[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugin `vite:dts`. See https://rolldown.rs/options/checks#plugintimings for more details.
-
-
-rendering chunks...
-computing gzip size...
-dist/index.umd.cjs  1,006.91 kB │ gzip: 327.98 kB
-
-[MISSING_GLOBAL_NAME] Warning: No name was provided for external module "react/jsx-runtime" in "output.globals" – guessing "react_jsx_runtime".
-
-✓ built in 37.23s

package/src/ChatbotEnhanced.tsx

@@ -1,426 +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, Trash2, Paperclip, X, Square, RefreshCw, AlertCircle } from "lucide-react"
-import ReactMarkdown from "react-markdown"
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"
-import remarkGfm from "remark-gfm"
-
-export interface ChatMessage {
-  id: string
-  role: "user" | "assistant" | "system"
-  content: string
-  timestamp?: string
-  avatar?: string
-  avatarFallback?: string
-  streaming?: boolean
-}
-
-export interface ChatbotEnhancedProps extends React.HTMLAttributes<HTMLDivElement> {
-  messages?: ChatMessage[]
-  placeholder?: string
-  onSendMessage?: (message: string, files?: File[]) => void
-  onClear?: () => void
-  /** Stop the current streaming response (API mode only) */
-  onStop?: () => void
-  /** Reload / retry the last assistant message (API mode only) */
-  onReload?: () => void
-  disabled?: boolean
-  /** Whether the assistant is currently generating a response */
-  isLoading?: boolean
-  /** Current streaming/API error */
-  error?: Error
-  showTimestamp?: boolean
-  userAvatarUrl?: string
-  userAvatarFallback?: string
-  assistantAvatarUrl?: string
-  assistantAvatarFallback?: string
-  maxHeight?: string
-  enableMarkdown?: boolean
-  enableFileUpload?: boolean
-  acceptedFileTypes?: string
-  maxFileSize?: number
-  onStreamingUpdate?: (messageId: string, content: string) => void
-}
-
-function MessageContent({ content, enableMarkdown }: { content: string; enableMarkdown?: boolean }) {
-  if (!enableMarkdown) {
-    return <div className="whitespace-pre-wrap">{content}</div>
-  }
-
-  return (
-    <div className="prose prose-sm dark:prose-invert max-w-none">
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      components={{
-        code({ node, inline, className, children, ...props }: any) {
-          const match = /language-(\w+)/.exec(className || '')
-          return !inline && match ? (
-            <SyntaxHighlighter
-              style={oneDark}
-              language={match[1]}
-              PreTag="div"
-              className="rounded-md my-2"
-              {...props}
-            >
-              {String(children).replace(/\n$/, '')}
-            </SyntaxHighlighter>
-          ) : (
-            <code className={cn("bg-muted px-1 py-0.5 rounded text-sm", className)} {...props}>
-              {children}
-            </code>
-          )
-        },
-        p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
-        ul: ({ children }) => <ul className="list-disc pl-4 mb-2">{children}</ul>,
-        ol: ({ children }) => <ol className="list-decimal pl-4 mb-2">{children}</ol>,
-        li: ({ children }) => <li className="mb-1">{children}</li>,
-        a: ({ href, children }) => (
-          <a href={href} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">
-            {children}
-          </a>
-        ),
-        blockquote: ({ children }) => (
-          <blockquote className="border-l-4 border-primary pl-4 italic my-2 text-muted-foreground">
-            {children}
-          </blockquote>
-        ),
-        table: ({ children }) => (
-          <div className="overflow-x-auto my-2">
-            <table className="min-w-full divide-y divide-border">{children}</table>
-          </div>
-        ),
-        th: ({ children }) => (
-          <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wider bg-muted">
-            {children}
-          </th>
-        ),
-        td: ({ children }) => (
-          <td className="px-3 py-2 text-sm border-t border-border">{children}</td>
-        ),
-      }}
-    >
-      {content}
-    </ReactMarkdown>
-    </div>
-  )
-}
-
-const ChatbotEnhanced = React.forwardRef<HTMLDivElement, ChatbotEnhancedProps>(
-  (
-    {
-      className,
-      messages = [],
-      placeholder = "Type your message...",
-      onSendMessage,
-      onClear,
-      onStop,
-      onReload,
-      disabled = false,
-      isLoading = false,
-      error,
-      showTimestamp = false,
-      userAvatarUrl,
-      userAvatarFallback = "You",
-      assistantAvatarUrl,
-      assistantAvatarFallback = "AI",
-      maxHeight = "500px",
-      enableMarkdown = true,
-      enableFileUpload = false,
-      acceptedFileTypes = "image/*,.pdf,.doc,.docx,.txt",
-      maxFileSize = 10 * 1024 * 1024, // 10MB
-      ...props
-    },
-    ref
-  ) => {
-    const [inputValue, setInputValue] = React.useState("")
-    const [selectedFiles, setSelectedFiles] = React.useState<File[]>([])
-    const scrollRef = React.useRef<HTMLDivElement>(null)
-    const inputRef = React.useRef<HTMLInputElement>(null)
-    const fileInputRef = 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() || selectedFiles.length > 0) && onSendMessage) {
-        onSendMessage(inputValue.trim(), selectedFiles)
-        setInputValue("")
-        setSelectedFiles([])
-        inputRef.current?.focus()
-      }
-    }
-
-    const isInputDisabled = disabled || isLoading
-    const isSendDisabled = isInputDisabled || (!inputValue.trim() && selectedFiles.length === 0)
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault()
-        handleSend()
-      }
-    }
-
-    const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || [])
-    
-    // Validate file sizes and MIME types
-    const validFiles = files.filter(file => {
-      // Size validation
-      if (file.size > maxFileSize) {
-        console.warn(`File ${file.name} exceeds ${maxFileSize / 1024 / 1024}MB limit`)
-        return false
-      }
-      
-      // Basic MIME type validation
-      const acceptedTypes = acceptedFileTypes.split(',').map(t => t.trim())
-      const matchesType = acceptedTypes.some(type => {
-        if (type.startsWith('.')) {
-          return file.name.toLowerCase().endsWith(type.toLowerCase())
-        }
-        if (type.endsWith('/*')) {
-          const category = type.split('/')[0]
-          return file.type.startsWith(category + '/')
-        }
-        return file.type === type
-      })
-      
-      if (!matchesType) {
-        console.warn(`File ${file.name} type ${file.type} not accepted`)
-        return false
-      }
-      
-      return true
-    })
-    
-    if (validFiles.length < files.length) {
-      console.warn(`${files.length - validFiles.length} file(s) were rejected`)
-    }
-    
-    setSelectedFiles(prev => [...prev, ...validFiles])
-  }
-
-    const handleRemoveFile = (index: number) => {
-      setSelectedFiles(prev => prev.filter((_, i) => i !== index))
-    }
-
-    const handleClear = () => {
-      if (onClear) {
-        onClear()
-      }
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex flex-col border rounded-lg bg-background overflow-hidden",
-          className
-        )}
-        style={{ maxHeight }}
-        {...props}
-      >
-        {/* Header with clear button */}
-        {onClear && messages.length > 0 && (
-          <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30">
-            <span className="text-sm text-muted-foreground">
-              {messages.length} message{messages.length !== 1 ? 's' : ''}
-            </span>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleClear}
-              className="h-8 text-xs"
-            >
-              <Trash2 className="h-3 w-3 mr-1" />
-              Clear
-            </Button>
-          </div>
-        )}
-
-        {/* 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">
-                Start a conversation...
-              </div>
-            ) : (
-              messages.map((message) => (
-                <div
-                  key={message.id}
-                  className={cn(
-                    "flex gap-3",
-                    message.role === "user" ? "justify-end" : "justify-start"
-                  )}
-                >
-                  {message.role !== "user" && (
-                    <Avatar className="h-8 w-8 flex-shrink-0">
-                      <AvatarImage src={message.avatar || assistantAvatarUrl} />
-                      <AvatarFallback>{message.avatarFallback || assistantAvatarFallback}</AvatarFallback>
-                    </Avatar>
-                  )}
-                  
-                  <div
-                    className={cn(
-                      "rounded-lg px-4 py-2 max-w-[80%]",
-                      message.role === "user"
-                        ? "bg-primary text-primary-foreground"
-                        : "bg-muted"
-                    )}
-                  >
-                    <MessageContent content={message.content} enableMarkdown={enableMarkdown} />
-                    {showTimestamp && message.timestamp && (
-                      <div className="text-xs opacity-70 mt-1">
-                        {message.timestamp}
-                      </div>
-                    )}
-                    {message.streaming && (
-                      <div className="flex gap-1 mt-2">
-                        <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-                        <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-                        <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
-                      </div>
-                    )}
-                  </div>
-
-                  {message.role === "user" && (
-                    <Avatar className="h-8 w-8 flex-shrink-0">
-                      <AvatarImage src={message.avatar || userAvatarUrl} />
-                      <AvatarFallback>{message.avatarFallback || userAvatarFallback}</AvatarFallback>
-                    </Avatar>
-                  )}
-                </div>
-              ))
-            )}
-          </div>
-        </ScrollArea>
-
-        {/* Selected files preview */}
-        {selectedFiles.length > 0 && (
-          <div className="px-4 py-2 border-t bg-muted/30">
-            <div className="flex flex-wrap gap-2">
-              {selectedFiles.map((file, index) => (
-                <div
-                  key={index}
-                  className="flex items-center gap-2 bg-background border rounded px-2 py-1 text-xs"
-                >
-                  <Paperclip className="h-3 w-3" />
-                  <span className="max-w-[150px] truncate">{file.name}</span>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-4 w-4 p-0"
-                    onClick={() => handleRemoveFile(index)}
-                  >
-                    <X className="h-3 w-3" />
-                  </Button>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Error display */}
-        {error && (
-          <div className="flex items-center gap-2 px-4 py-2 border-t bg-destructive/10 text-destructive text-sm" role="alert">
-            <AlertCircle className="h-4 w-4 flex-shrink-0" />
-            <span className="flex-1 truncate">{error.message || 'An error occurred'}</span>
-            {onReload && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={onReload}
-                className="h-7 text-xs"
-                aria-label="Retry"
-              >
-                <RefreshCw className="h-3 w-3 mr-1" />
-                Retry
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Streaming controls */}
-        {isLoading && onStop && (
-          <div className="flex items-center justify-center px-4 py-2 border-t">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={onStop}
-              className="h-8 text-xs"
-              aria-label="Stop generating"
-            >
-              <Square className="h-3 w-3 mr-1" />
-              Stop generating
-            </Button>
-          </div>
-        )}
-
-        {/* Input area */}
-        <div className="flex items-center gap-2 p-4 border-t">
-          {enableFileUpload && (
-            <>
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                accept={acceptedFileTypes}
-                onChange={handleFileSelect}
-                className="hidden"
-              />
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => fileInputRef.current?.click()}
-                disabled={isInputDisabled}
-                aria-label="Attach file"
-              >
-                <Paperclip className="h-4 w-4" />
-              </Button>
-            </>
-          )}
-          
-          <Input
-            ref={inputRef}
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={placeholder}
-            disabled={isInputDisabled}
-            className="flex-1"
-          />
-          
-          <Button
-            onClick={handleSend}
-            disabled={isSendDisabled}
-            size="icon"
-            aria-label="Send message"
-          >
-            <Send className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    )
-  }
-)
-
-ChatbotEnhanced.displayName = "ChatbotEnhanced"
-
-export { ChatbotEnhanced }

package/src/FloatingChatbot.tsx

@@ -1,89 +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 * 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
-}