Skip to content

Add fully functional Chatbot component #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
huangyiirene merged 8 commits into from
Jan 14, 2026
Merged

Add fully functional Chatbot component #17

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
488d673
Initial plan
Copilot Jan 13, 2026
1cd4653
Add base Chatbot UI component and renderer
Copilot Jan 13, 2026
4493647
Fix TypeScript types for Chatbot component
Copilot Jan 13, 2026
ac6fcd7
Add ChatbotDemo and update prototype app to showcase the component
Copilot Jan 13, 2026
a33180d
Address code review feedback - fix duplicate type export and onSend cโ€ฆ
Copilot Jan 13, 2026
fd792f0
Address PR review feedback: rename avatar props, improve type safety,โ€ฆ
Copilot Jan 14, 2026
e6f2fc1
Merge main branch - resolve conflicts and integrate new components
Copilot Jan 14, 2026
e02abdc
Merge branch 'main' into copilot/add-complete-chatbot-component
hotlong Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
393 changes: 3 additions & 390 deletions examples/prototype/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,396 +1,9 @@
import { SchemaRenderer } from '@object-ui/react';
import '@object-ui/components';

const schema = {
type: 'sidebar-provider',
body: [
{
type: 'sidebar',
body: [
{
type: 'sidebar-header',
body: [
{
type: 'div',
className: 'px-4 py-4 font-bold text-xl flex items-center gap-2',
body: [
{
type: 'image',
src: '/logo.svg',
className: 'size-8 rounded-lg',
alt: 'Object UI Logo'
},
{
type: 'text',
content: 'Object UI'
}
]
}
]
},
{
type: 'sidebar-content',
body: [
{
type: 'sidebar-group',
label: 'Platform',
body: [
{
type: 'sidebar-menu',
body: [
{
type: 'sidebar-menu-item',
body: {
type: 'sidebar-menu-button',
active: true,
body: [
{ type: 'icon', name: 'SquareTerminal' },
{ type: 'span', body: { type: 'text', content: 'Dashboard' } }
]
}
},
{
type: 'sidebar-menu-item',
body: {
type: 'sidebar-menu-button',
body: [
{ type: 'icon', name: 'Frame' },
{ type: 'span', body: { type: 'text', content: 'Projects' } }
]
}
},
{
type: 'sidebar-menu-item',
body: {
type: 'sidebar-menu-button',
body: [
{ type: 'icon', name: 'Map' },
{ type: 'span', body: { type: 'text', content: 'Tasks' } }
]
}
}
]
}
]
},
{
type: 'sidebar-group',
label: 'Settings',
body: [
{
type: 'sidebar-menu',
body: [
{
type: 'sidebar-menu-item',
body: {
type: 'sidebar-menu-button',
body: [
{ type: 'icon', name: 'User' },
{ type: 'span', body: { type: 'text', content: 'Profile' } }
]
}
},
{
type: 'sidebar-menu-item',
body: {
type: 'sidebar-menu-button',
body: [
{ type: 'icon', name: 'CreditCard' },
{ type: 'span', body: { type: 'text', content: 'Billing' } }
]
}
}
]
}
]
}
]
},
{
type: 'sidebar-footer',
body: {
type: 'sidebar-menu',
body: {
type: 'sidebar-menu-item',
body: {
type: 'sidebar-menu-button',
size: 'lg',
className: 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground',
body: {
type: 'div',
className: 'flex items-center gap-2 text-left leading-tight',
body: [
{
type: 'avatar',
src: 'https://github.com/shadcn.png',
alt: '@shadcn',
fallback: 'SC',
className: 'h-8 w-8 rounded-lg'
},
{
type: 'div',
className: 'grid flex-1 text-left text-sm leading-tight',
body: [
{ type: 'span', className: 'truncate font-semibold', body: {type: 'text', content: 'Troy Su'} },
{ type: 'span', className: 'truncate text-xs', body: {type: 'text', content: 'troy@object-ui.com'} }
]
}
]
}
}
}
}
}
]
},
{
type: 'sidebar-inset',
body: [
{
type: 'header-bar',
className: 'border-b px-6 py-3',
crumbs: [
{ label: 'Platform', href: '#' },
{ label: 'Dashboard' }
]
},
{
type: 'div',
className: 'flex flex-1 flex-col gap-6 p-8 bg-muted/10 min-h-[calc(100vh-4rem)]',
body: [
{
type: 'div',
className: 'flex items-center justify-between',
body: [
{
type: 'div',
className: 'space-y-1',
body: [
{ type: 'div', className: 'text-2xl font-bold tracking-tight', body: { type: 'text', content: 'Dashboard' } },
{ type: 'div', className: 'text-sm text-muted-foreground', body: { type: 'text', content: 'Overview of your project performance and metrics.' } }
]
},
{
type: 'div',
className: 'flex items-center gap-2',
body: [
{ type: 'button', label: 'Download', variant: 'outline', size: 'sm' },
{ type: 'button', label: 'Create New', size: 'sm' }
]
}
]
},
{
type: 'div',
className: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4',
body: [
{
type: 'card',
className: 'shadow-sm hover:shadow-md transition-shadow',
body: [
{
type: 'div',
className: 'p-6 pb-2',
body: { type: 'div', className: 'text-sm font-medium text-muted-foreground', body: { type: 'text', content: 'Total Revenue' } }
},
{
type: 'div',
className: 'p-6 pt-0',
body: [
{ type: 'div', className: 'text-2xl font-bold', body: { type: 'text', content: '$45,231.89' } },
{ type: 'div', className: 'text-xs text-muted-foreground mt-1', body: { type: 'text', content: '+20.1% from last month' } }
]
}
]
},
{
type: 'card',
className: 'shadow-sm hover:shadow-md transition-shadow',
body: [
{
type: 'div',
className: 'p-6 pb-2',
body: { type: 'div', className: 'text-sm font-medium text-muted-foreground', body: { type: 'text', content: 'Subscriptions' } }
},
{
type: 'div',
className: 'p-6 pt-0',
body: [
{ type: 'div', className: 'text-2xl font-bold', body: { type: 'text', content: '+2,350' } },
{ type: 'div', className: 'text-xs text-muted-foreground mt-1', body: { type: 'text', content: '+180.1% from last month' } }
]
}
]
},
{
type: 'card',
className: 'shadow-sm hover:shadow-md transition-shadow',
body: [
{
type: 'div',
className: 'p-6 pb-2',
body: { type: 'div', className: 'text-sm font-medium text-muted-foreground', body: { type: 'text', content: 'Sales' } }
},
{
type: 'div',
className: 'p-6 pt-0',
body: [
{ type: 'div', className: 'text-2xl font-bold', body: { type: 'text', content: '+12,234' } },
{ type: 'div', className: 'text-xs text-muted-foreground mt-1', body: { type: 'text', content: '+19% from last month' } }
]
}
]
},
{
type: 'card',
className: 'shadow-sm hover:shadow-md transition-shadow',
body: [
{
type: 'div',
className: 'p-6 pb-2',
body: { type: 'div', className: 'text-sm font-medium text-muted-foreground', body: { type: 'text', content: 'Active Now' } }
},
{
type: 'div',
className: 'p-6 pt-0',
body: [
{ type: 'div', className: 'text-2xl font-bold', body: { type: 'text', content: '+573' } },
{ type: 'div', className: 'text-xs text-muted-foreground mt-1', body: { type: 'text', content: '+201 since last hour' } }
]
}
]
}
]
},
{
type: 'tabs',
defaultValue: 'overview',
className: 'space-y-6',
items: [
{
value: 'overview',
label: 'Overview',
body: [
{
type: 'div',
className: 'grid gap-6 md:grid-cols-2 lg:grid-cols-7',
body: [
{
type: 'card',
className: 'col-span-4 shadow-sm',
title: 'Interactive Chart',
body: {
type: 'div',
className: 'p-6',
body: {
type: 'chart',
chartType: 'bar',
className: "aspect-auto h-[350px] w-full",
data: [
{ month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
{ month: "March", desktop: 237, mobile: 120 },
{ month: "April", desktop: 73, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "June", desktop: 214, mobile: 140 },
],
config: {
desktop: {
label: "Desktop",
color: "hsl(var(--primary))",
},
mobile: {
label: "Mobile",
color: "hsl(var(--primary)/0.5)",
},
},
xAxisKey: "month",
series: [
{ dataKey: "desktop" },
{ dataKey: "mobile" }
]
}
}
},
{
type: 'card',
className: 'col-span-3 shadow-sm',
title: 'Quick Access',
description: 'Common actions and forms.',
body: [
{
type: 'div',
className: 'p-6 pt-0 space-y-4',
body: [
{
type: 'input',
label: 'Email Address',
id: 'email',
inputType: 'email',
placeholder: 'm@example.com'
},
{
type: 'input',
label: 'Workspace Name',
id: 'workspace',
placeholder: 'Acme Inc.'
},
{
type: 'button',
label: 'Save Preferences',
className: 'w-full mt-2'
}
]
}
]
}
]
},
{
type: 'card',
className: 'shadow-sm mt-6',
title: 'Recent Activity',
description: 'Your recent component usage history.',
body: {
type: 'div',
className: 'p-6 pt-0',
body: [
{ type: 'div', className: 'text-sm', body: { type: 'text', content: 'User updated the schema at 10:42 AM' } },
{ type: 'div', className: 'text-sm text-muted-foreground', body: { type: 'text', content: 'User created a new component at 09:15 AM' } }
]
}
}
]
},
{
value: 'analytics',
label: 'Analytics',
body: { type: 'text', content: 'Analytics Content' }
},
{
value: 'reports',
label: 'Reports',
body: { type: 'text', content: 'Reports Content' }
},
{
value: 'notifications',
label: 'Notifications',
body: { type: 'text', content: 'Notifications Content' }
}
]
}
]
}
]
}
]
};
import ChatbotDemo from './ChatbotDemo';

function App() {
return (
<SchemaRenderer schema={schema} />
)
return <ChatbotDemo />;
}

export default App

export default App;
Loading
Loading