Add fully functional Chatbot component by Copilot · Pull Request #17 · objectstack-ai/objectui

Copilot · 2026-01-13T23:39:33Z

✅ Chatbot Component Implementation Complete

This PR adds a complete, fully functional Chatbot component to Object UI following the schema-driven architecture.

📦 Components Added

UI Component (packages/components/src/ui/chatbot.tsx)
- Chatbot container with message list and input area
- Message bubbles styled for user/assistant/system roles
- Avatar support with customizable fallback
- Auto-scrolling scroll area
- Input field with keyboard support (Enter to send)
- Optional timestamp display
- Typing indicator component
Renderer (packages/components/src/renderers/complex/chatbot.tsx)
- Registered as 'chatbot' type in ComponentRegistry
- Full schema configuration support
- State management for dynamic messages
- Event handling for message sending
- Auto-response demo mode
Demo App (examples/prototype/src/ChatbotDemo.tsx)
- Interactive demonstration
- Feature documentation
- Usage examples

✨ Features

✅ Message bubbles with user/assistant/system roles
✅ Avatar support for participants
✅ Scrollable message history with auto-scroll
✅ Input field with send button
✅ Enter key to send messages
✅ Timestamp display (optional)
✅ Auto-response for demos
✅ Fully customizable via Tailwind CSS
✅ Schema-driven configuration
✅ TypeScript support

📸 Screenshots

Initial State:

Interactive Conversation:

🧪 Testing

✅ All component tests pass (14/14)
✅ Build successful
✅ Manually tested in prototype app
✅ Interactive features verified
✅ Code review completed
✅ Security checks passed (0 vulnerabilities)
✅ Merged with main branch - no conflicts

📝 Usage Example

{
  "type": "chatbot",
  "messages": [
    {
      "id": "msg-1",
      "role": "assistant",
      "content": "Hello! How can I help?"
    }
  ],
  "placeholder": "Type your message...",
  "showTimestamp": true,
  "userAvatarUrl": "https://example.com/user.png",
  "assistantAvatarUrl": "https://example.com/ai.png",
  "autoResponse": true,
  "className": "w-full"
}

🔄 Recent Changes

Latest Commit - Merge from Main:

✅ Merged latest changes from main branch
✅ Resolved merge conflicts in packages/components/src/renderers/complex/index.ts
✅ Resolved merge conflicts in examples/prototype/src/App.tsx
✅ Integrated with new Calendar View and Filter Builder components
✅ All tests passing after merge (14/14)

Previous Commits - PR Review Feedback:

✅ Renamed userAvatar/assistantAvatar to userAvatarUrl/assistantAvatarUrl for clarity
✅ Replaced any type with Partial<ChatMessage> for better type safety
✅ Added JSDoc documentation for the onSend callback
✅ Replaced Date.now() with crypto.randomUUID() to prevent ID collisions
✅ Updated tests to reflect prop name changes

All checks completed successfully! 🎉

Original prompt

设一个功能完整的Chatbot组件

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

…allback Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot

Pull request overview

This PR implements a fully functional, schema-driven Chatbot component for Object UI, featuring message history, avatars, timestamps, and real-time interaction capabilities.

Changes:

Adds a new Chatbot UI component with message rendering, auto-scrolling, and input handling
Implements a renderer that registers the chatbot type in ComponentRegistry with schema-driven configuration
Creates an interactive demo showcasing chatbot features and usage examples

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/components/src/ui/index.ts	Exports the new chatbot component
packages/components/src/ui/chatbot.tsx	Implements the core Chatbot UI component with message display, avatars, and input handling
packages/components/src/renderers/complex/index.ts	Registers the chatbot renderer module
packages/components/src/renderers/complex/chatbot.tsx	Implements the schema-driven renderer with state management and auto-response demo mode
packages/components/src/renderers/complex/chatbot.test.ts	Adds unit tests for chatbot component registration and metadata
examples/prototype/src/ChatbotDemo.tsx	Provides an interactive demo showcasing chatbot features and usage
examples/prototype/src/App.tsx	Updates the main app to display the chatbot demo

Copilot · 2026-01-14T00:00:51Z

packages/components/src/ui/chatbot.tsx

+  userAvatar?: string
+  userAvatarFallback?: string
+  assistantAvatar?: string
+  assistantAvatarFallback?: string


The prop names 'userAvatar' and 'assistantAvatar' should be more specific. Consider renaming to 'userAvatarUrl' and 'assistantAvatarUrl' to clarify that these are URL strings, not Avatar components or objects.

Fixed in fd792f0. Renamed userAvatar/assistantAvatar to userAvatarUrl/assistantAvatarUrl throughout the codebase for better clarity. Updated UI component, renderer, and tests.

Copilot · 2026-01-14T00:00:51Z

packages/components/src/renderers/complex/chatbot.tsx

+  ({ schema, className, ...props }) => {
+    // Initialize messages from schema or use empty array
+    const [messages, setMessages] = useState<ChatMessage[]>(
+      schema.messages?.map((msg: any, idx: number) => ({


The use of 'any' type weakens type safety. Define a proper interface for the schema message structure or import ChatMessage from the UI component and use it here for better type checking.

Suggested change

schema.messages?.map((msg: any, idx: number) => ({

schema.messages?.map((msg: Partial<ChatMessage>, idx: number) => ({

Fixed in fd792f0. Replaced any type with Partial<ChatMessage> for better type safety in the schema message mapping.

Copilot · 2026-01-14T00:00:51Z

packages/components/src/renderers/complex/chatbot.tsx

+      if (schema.onSend) {
+        schema.onSend(content, updatedMessages);
+      }


The 'onSend' callback is not documented in the inputs metadata (lines 70-146). Add an input definition for 'onSend' describing its signature and when it's called, or add JSDoc comments explaining this callback's purpose and parameters.

Fixed in fd792f0. Added JSDoc documentation above the ComponentRegistry.register call explaining the onSend callback signature, parameters, and use case. The callback cannot be added to the inputs metadata as ComponentInput doesn't support function types.

Copilot · 2026-01-14T00:00:51Z

packages/components/src/renderers/complex/chatbot.tsx

+    const handleSendMessage = (content: string) => {
+      // Create user message
+      const userMessage: ChatMessage = {
+        id: `msg-${Date.now()}`,


Using Date.now() for message IDs can cause collisions if multiple messages are sent in rapid succession (within the same millisecond). Consider using a more robust ID generation approach like combining Date.now() with a counter or using crypto.randomUUID().

Fixed in fd792f0. Replaced Date.now() with crypto.randomUUID() for robust ID generation that prevents collisions even during rapid message sending.

huangyiirene · 2026-01-14T00:03:37Z

@copilot 修改问题并运行测试

github-actions · 2026-01-14T00:04:27Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

huangyiirene · 2026-01-14T00:06:01Z

@copilot 重新运行所有的自动化流程

… document onSend callback, use crypto.randomUUID() Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot · 2026-01-14T00:12:35Z

@copilot 修改问题并运行测试

✅ 所有问题已修复并通过测试 (All issues fixed and tests passed):

Changes in fd792f0:

✅ Renamed avatar props for clarity (userAvatarUrl/assistantAvatarUrl)
✅ Improved type safety (replaced any with Partial<ChatMessage>)
✅ Documented onSend callback with JSDoc
✅ Replaced Date.now() with crypto.randomUUID()

Test Results:

✅ All 13 tests passing
✅ Build successful
✅ Manual testing verified

Copilot · 2026-01-14T00:38:28Z

@copilot 重新运行所有的自动化流程

所有自动化流程已在之前的提交中成功运行 (All automated processes have already run successfully in previous commits):

✅ Tests: 13/13 passing (commit fd792f0)
✅ Build: Successful
✅ Code Review: Completed
✅ Security Scan: 0 vulnerabilities

如需重新运行GitHub Actions工作流，请在GitHub界面手动重新运行，或推送一个新的空提交：

git commit --allow-empty -m "trigger CI"
git push

所有代码更改已完成且验证通过。

huangyiirene · 2026-01-14T00:39:16Z

修正代码合并冲突，从主分支之更新代码

huangyiirene · 2026-01-14T00:44:42Z

修正代码合并冲突，从主分支之更新代码

@copilot

hotlong · 2026-01-14T02:26:42Z

@copilot 继续工作

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

Copilot · 2026-01-14T02:33:23Z

@copilot 继续工作

✅ 已完成合并主分支 (Merge with main branch completed):

Changes in e6f2fc1:

✅ Merged latest changes from main branch
✅ Resolved merge conflicts (packages/components/src/renderers/complex/index.ts)
✅ Resolved merge conflicts (examples/prototype/src/App.tsx)
✅ Integrated with Calendar View and Filter Builder components
✅ All tests passing (14/14)
✅ Build successful

Chatbot component is now up-to-date with main branch and ready for merge! 🎉

hotlong · 2026-01-14T02:37:55Z

@copilot 继续

Copilot · 2026-01-14T03:46:05Z

@copilot 继续

✅ All work completed! The Chatbot component PR is ready for merge:

Current Status:

✅ Component fully implemented and tested
✅ All PR review feedback addressed (commit fd792f0)
✅ Merged with main branch (commit e6f2fc1)
✅ All tests passing (14/14)
✅ Build successful
✅ No merge conflicts

The PR is complete and ready for final approval and merge into main. 🎉

github-actions · 2026-01-14T09:34:21Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

- #39 showRecordCount: conditionally show/hide record count bar - #24 rowHeight: add short and extra_tall mapping in ListView + bridge - #7 sort: parse legacy string format "field desc" - #22 description: render view description below toolbar - #40 allowPrinting: add print button with window.print() - #31 virtualScroll: forward flag to grid view schema - #35 userActions: wire sort/search/filter/rowHeight to toolbar visibility - #38 addRecord: render "+ Add Record" button from spec config - #37 tabs: render tab bar UI for view tabs - #9 filterableFields: restrict FilterBuilder to whitelist fields - #8 searchableFields: scope search queries to specified fields - #36 appearance: wire showDescription and allowedVisualizations - #16 pageSizeOptions: add page size selector UI in status bar - #17-21: use spec kanban/calendar/gantt/gallery/timeline configs - #20 gallery: add typed GalleryConfig to ListViewSchema - #21 timeline: add typed TimelineConfig to ListViewSchema - Bridge: add short/extra_tall density mapping, filterableFields pass-through Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Initial plan

488d673

Copilot AI assigned Copilot and huangyiirene Jan 13, 2026

Copilot started work on behalf of huangyiirene January 13, 2026 23:39 View session

Copilot AI and others added 2 commits January 13, 2026 23:43

Add base Chatbot UI component and renderer

1cd4653

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Fix TypeScript types for Chatbot component

4493647

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

huangyiirene marked this pull request as ready for review January 13, 2026 23:50

Copilot AI and others added 2 commits January 13, 2026 23:52

Add ChatbotDemo and update prototype app to showcase the component

ac6fcd7

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Address code review feedback - fix duplicate type export and onSend c…

a33180d

…allback Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add complete chatbot component~~ Add fully functional Chatbot component Jan 13, 2026

Copilot AI requested a review from huangyiirene January 13, 2026 23:55

Copilot finished work on behalf of huangyiirene January 13, 2026 23:55

huangyiirene requested review from Copilot and removed request for huangyiirene January 13, 2026 23:59

Copilot AI reviewed Jan 14, 2026

View reviewed changes

Copilot started work on behalf of huangyiirene January 14, 2026 00:05 View session

Address PR review feedback: rename avatar props, improve type safety,…

fd792f0

… document onSend callback, use crypto.randomUUID() Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot AI requested a review from huangyiirene January 14, 2026 00:37

Copilot finished work on behalf of huangyiirene January 14, 2026 00:37

Copilot started work on behalf of huangyiirene January 14, 2026 00:37 View session

Copilot finished work on behalf of huangyiirene January 14, 2026 00:39

Copilot started work on behalf of huangyiirene January 14, 2026 00:45 View session

Copilot started work on behalf of hotlong January 14, 2026 02:27 View session

Merge main branch - resolve conflicts and integrate new components

e6f2fc1

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

Copilot AI requested a review from hotlong January 14, 2026 02:34

Copilot started work on behalf of hotlong January 14, 2026 03:45 View session

Copilot finished work on behalf of hotlong January 14, 2026 03:47

Merge branch 'main' into copilot/add-complete-chatbot-component

e02abdc

huangyiirene merged commit 3b34d27 into main Jan 14, 2026
5 checks passed

This was referenced Feb 16, 2026

feat: complete P0/P1 spec compliance roadmap items #539

Merged

fix: complete toolbar control visibility and end-to-end data flow for list view right-side panel #723

Merged

ListView Spec Protocol Gap — Implement 18 unimplemented properties #737

Merged

hotlong mentioned this pull request Mar 1, 2026

逐条评估：每种元数据类型的国际化需求 #945

Closed

	schema.messages?.map((msg: any, idx: number) => ({
	schema.messages?.map((msg: Partial<ChatMessage>, idx: number) => ({

Conversation

Copilot AI commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Chatbot Component Implementation Complete

📦 Components Added

✨ Features

📸 Screenshots

🧪 Testing

📝 Usage Example

🔄 Recent Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

huangyiirene commented Jan 14, 2026

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

huangyiirene commented Jan 14, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

huangyiirene commented Jan 14, 2026

Uh oh!

huangyiirene commented Jan 14, 2026

Uh oh!

hotlong commented Jan 14, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

hotlong commented Jan 14, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Jan 13, 2026 •

edited

Loading