Extract chatbot and timeline to plugin packages

packages/components/src/__tests__/complex-disclosure-renderers.test.tsx

@@ -101,45 +101,6 @@ describe('Disclosure Renderers - Display Issue Detection', () => {
  * Comprehensive tests for complex renderer components
  */
 describe('Complex Renderers - Display Issue Detection', () => {
-  describe('Timeline Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('timeline');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render timeline with events', () => {
-      const { container } = renderComponent({
-        type: 'timeline',
-        items: [
-          {
-            title: 'Event 1',
-            description: 'Description 1',
-            time: '2024-01-01',
-          },
-          {
-            title: 'Event 2',
-            description: 'Description 2',
-            time: '2024-01-02',
-          },
-        ],
-      });
-
-      expect(container.textContent).toContain('Event 1');
-      expect(container.textContent).toContain('Event 2');
-    });
-
-    it('should handle empty timeline', () => {
-      const { container } = renderComponent({
-        type: 'timeline',
-        items: [],
-      });
-
-      const domCheck = checkDOMStructure(container);
-      // Empty timeline is acceptable
-      expect(domCheck).toBeDefined();
-    });
-  });
-
   describe('Data Table Renderer', () => {
     it('should be properly registered', () => {
       const validation = validateComponentRegistration('data-table');
@@ -188,36 +149,6 @@ describe('Complex Renderers - Display Issue Detection', () => {
     });
   });
 
-  describe('Chatbot Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('chatbot');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render chatbot interface', () => {
-      const { container } = renderComponent({
-        type: 'chatbot',
-        messages: [
-          { role: 'user', content: 'Hello' },
-          { role: 'assistant', content: 'Hi there!' },
-        ],
-      });
-
-      expect(container.textContent).toContain('Hello');
-      expect(container.textContent).toContain('Hi there!');
-    });
-
-    it('should handle empty messages', () => {
-      const { container } = renderComponent({
-        type: 'chatbot',
-        messages: [],
-      });
-
-      const domCheck = checkDOMStructure(container);
-      expect(domCheck).toBeDefined();
-    });
-  });
-
   describe('Carousel Renderer', () => {
     it('should be properly registered', () => {
       const validation = validateComponentRegistration('carousel');

packages/components/src/new-components.test.ts

@@ -70,13 +70,4 @@ describe('New Components Registration', () => {
       expect(component?.label).toBe('Loading');
     });
   });
-
-  describe('Complex Components', () => {
-    it('should register timeline component', () => {
-      const component = ComponentRegistry.getConfig('timeline');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Timeline');
-      expect(component?.category).toBe('data-display');
-    });
-  });
 });

packages/components/src/renderers/complex/index.ts

@@ -12,7 +12,6 @@ import './filter-builder';
 import './scroll-area';
 import './resizable';
 import './table';
-import './chatbot';
 import './data-table';
-import './timeline';
+
 

packages/components/src/ui/index.ts

@@ -19,7 +19,6 @@ export * from './calendar';
 export * from './calendar-view';
 export * from './card';
 export * from './carousel';
-export * from './chatbot';
 export * from './checkbox';
 export * from './collapsible';
 export * from './combobox';
@@ -60,7 +59,6 @@ export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './textarea';
-export * from './timeline';
 export * from './toast';
 export { Toaster as ToastNotifier } from './toaster';
 export * from './toggle-group';

packages/plugin-chatbot/README.md

@@ -0,0 +1,63 @@
+# @object-ui/plugin-chatbot
+
+Chatbot interface plugin for Object UI.
+
+## Installation
+
+```bash
+npm install @object-ui/plugin-chatbot
+```
+
+## Usage
+
+```tsx
+import { Chatbot } from '@object-ui/plugin-chatbot';
+
+function App() {
+  const [messages, setMessages] = useState([
+    {
+      id: '1',
+      role: 'assistant',
+      content: 'Hello! How can I help you today?'
+    }
+  ]);
+
+  const handleSend = (content: string) => {
+    const newMessage = {
+      id: Date.now().toString(),
+      role: 'user',
+      content
+    };
+    setMessages([...messages, newMessage]);
+  };
+
+  return (
+    <Chatbot
+      messages={messages}
+      onSendMessage={handleSend}
+      placeholder="Type your message..."
+    />
+  );
+}
+```
+
+## Schema-Driven Usage
+
+This plugin automatically registers with ObjectUI's component registry when imported:
+
+```tsx
+import '@object-ui/plugin-chatbot';
+
+const schema = {
+  component: 'chatbot',
+  messages: [
+    { id: '1', role: 'assistant', content: 'Hello!' }
+  ],
+  placeholder: 'Type your message...',
+  autoResponse: true
+};
+```
+
+## License
+
+MIT © ObjectStack Inc.

packages/plugin-chatbot/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@object-ui/plugin-chatbot",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Chatbot interface plugin for Object UI",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-chatbot"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@object-ui/components": "workspace:*",
+    "@object-ui/core": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*",
+    "lucide-react": "^0.468.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

packages/components/src/ui/chatbot.tsx → packages/plugin-chatbot/src/index.tsx

@@ -7,11 +7,8 @@
  */
 
 import * as React from "react"
-import { cn } from "../lib/utils"
-import { Button } from "./button"
-import { Input } from "./input"
-import { ScrollArea } from "./scroll-area"
-import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
+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
@@ -246,3 +243,6 @@ const TypingIndicator = React.forwardRef<HTMLDivElement, TypingIndicatorProps>(
 TypingIndicator.displayName = "TypingIndicator"
 
 export { Chatbot, TypingIndicator }
+
+// Export renderer to register the component with ObjectUI
+export * from './renderer';

packages/components/src/renderers/complex/chatbot.tsx → packages/plugin-chatbot/src/renderer.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { ChatbotSchema, ChatMessage } from '@object-ui/types';
-import { Chatbot } from '../../ui';
+import { Chatbot } from './index';
 import { useState } from 'react';
 
 /**
@@ -41,7 +41,7 @@ ComponentRegistry.register('chatbot',
     const handleSendMessage = (content: string) => {
       // Create user message with robust ID generation
       const userMessage: ChatMessage = {
-        id: crypto.randomUUID(),
+        id: crypto?.randomUUID?.() || `msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,
         role: 'user',
         content,
         timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
@@ -59,7 +59,7 @@ ComponentRegistry.register('chatbot',
       if (schema.autoResponse) {
         setTimeout(() => {
           const assistantMessage: ChatMessage = {
-            id: crypto.randomUUID(),
+            id: crypto?.randomUUID?.() || `msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,
             role: 'assistant',
             content: schema.autoResponseText || 'Thank you for your message!',
             timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,

packages/plugin-chatbot/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "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"]
+}