Complete chatbot and timeline plugin extraction with renderers and docs

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/components/src/renderers/complex/chatbot.test.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/renderers/complex/index.ts

@@ -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/README.md

@@ -243,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/plugin-chatbot/src/index.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';
 
 /**

…onents/src/renderers/complex/chatbot.tsx packages/plugin-chatbot/src/renderer.tsxpackages/components/src/renderers/complex/chatbot.tsx renamed to packages/plugin-chatbot/src/renderer.tsx packages/components/src/renderers/complex/chatbot.tsx renamed to packages/plugin-chatbot/src/renderer.tsx

@@ -0,0 +1,80 @@
+# @object-ui/plugin-timeline
+
+Timeline component plugin for Object UI with support for vertical, horizontal, and Gantt-style timelines.
+
+## Installation
+
+```bash
+npm install @object-ui/plugin-timeline
+```
+
+## Usage
+
+### Vertical Timeline
+
+```tsx
+import {
+  Timeline,
+  TimelineItem,
+  TimelineMarker,
+  TimelineContent,
+  TimelineTitle,
+  TimelineTime,
+  TimelineDescription
+} from '@object-ui/plugin-timeline';
+
+function App() {
+  return (
+    <Timeline>
+      <TimelineItem>
+        <TimelineMarker variant="success" />
+        <TimelineContent>
+          <TimelineTime>2024-01-15</TimelineTime>
+          <TimelineTitle>Project Started</TimelineTitle>
+          <TimelineDescription>
+            Kickoff meeting and initial planning
+          </TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}
+```
+
+### Gantt Timeline
+
+```tsx
+import {
+  TimelineGantt,
+  TimelineGanttHeader,
+  TimelineGanttRow,
+  TimelineGanttBar
+} from '@object-ui/plugin-timeline';
+
+// See examples in the source code for Gantt usage
+```
+
+## Schema-Driven Usage
+
+This plugin automatically registers with ObjectUI's component registry when imported:
+
+```tsx
+import '@object-ui/plugin-timeline';
+
+const schema = {
+  component: 'timeline',
+  variant: 'vertical',
+  items: [
+    {
+      time: '2024-01-15',
+      title: 'Project Started',
+      description: 'Kickoff meeting',
+      variant: 'success'
+    }
+  ]
+};
+```
+
+## License
+
+MIT © ObjectStack Inc.

packages/plugin-timeline/README.md

@@ -272,3 +272,6 @@ export {
   TimelineGanttBar,
   TimelineGanttBarContent,
 }
+
+// Export renderer to register the component with ObjectUI
+export * from './renderer';

packages/plugin-timeline/src/index.tsx

@@ -26,8 +26,8 @@ import {
   TimelineGanttLabel,
   TimelineGanttBar,
   TimelineGanttBarContent,
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
+} from './index';
+import { renderChildren } from '@object-ui/components';
 
 // Constants
 const MILLISECONDS_PER_WEEK = 7 * 24 * 60 * 60 * 1000;