Workspace

kai-workspace

The entire chat application shell as one tag — collapsible drag-resizable sidebar, conversation list, and full message thread, isolated in Shadow DOM and droppable into any framework.

• Shadow DOM
• 11 events
• Drag-resizable sidebar
• Collapsible sidebar
• 26 props

Preview

When to use

Reach for <kai-workspace> when you need the whole app shell — conversation sidebar, history, and collapse included — dropped in as one tag. If you only need the conversation surface (thread, composer, header), use <kai-chat> and add your own controls through its header slots (Custom chat header). In SolidJS, compose ConversationList and ChatThread directly for the finest control.

Usage

Set data in JavaScript and listen for CustomEvents on the element:

<kai-workspace id="workspace" style="display:block; height:100vh;"></kai-workspace>

<script type="module">
  import '@kitn.ai/ui/elements';

  const ws = document.getElementById('workspace');

  ws.conversations = [
    {
      id: '1',
      title: 'Web component architecture',
      scope: { type: 'document' },
      messageCount: 12,
      lastMessageAt: '2026-06-16T10:00:00Z',
      updatedAt: '2026-06-16T10:00:00Z',
    },
  ];
  ws.messages = [
    { id: 'm1', role: 'user', content: 'How do I drop the whole chat app in with one tag?' },
    { id: 'm2', role: 'assistant', content: 'Use <kai-workspace> and set the three core properties.' },
  ];
  ws.models = [{ id: 'claude-4-opus', name: 'Claude 4 Opus', provider: 'Anthropic' }];
  ws.activeId = '1';

  ws.addEventListener('kai-conversation-select', (e) => console.log('selected:', e.detail.id));
  ws.addEventListener('kai-submit', (e) => console.log('user sent:', e.detail.value));
  ws.addEventListener('kai-sidebar-toggle', (e) => console.log('collapsed:', e.detail.collapsed));
</script>

• Properties vs attributes — groups, conversations, messages, models, suggestions, slashCommands, slashActiveIds, and context are arrays and objects, so set them in JavaScript. Scalar props (placeholder, loading, sidebar dimensions, etc.) work as attributes or properties.
• Sidebar — drag-resizable and collapsible. Constrain with sidebarWidth (percent, default 22), sidebarMinWidth, and sidebarMaxWidth. Collapse is uncontrolled by default — the element manages it and fires kai-sidebar-toggle. Start collapsed with the default-sidebar-collapsed attribute, or control it by setting the sidebarCollapsed property and updating it from kai-sidebar-toggle (lets you persist the choice or collapse from outside the header).
• Conversation grouping — pass a flat conversations array and the element auto-buckets by recency, or supply a groups array with groupId on each conversation for custom grouping.

Examples

Default

Code

Loading State

Set loading while an assistant reply is streaming.

Code

Model Switcher

Set the models property to surface a model picker; listen for kai-model-change to update your store.

Code

Starter Suggestions

Set suggestions to show prompt chips on an empty thread. suggestion-mode="submit" fires kai-submit; "fill" populates the input and fires kai-suggestion-click.

Code

Slash Commands

Set slashCommands to enable the / command palette; handle kai-slash-select to receive { command }.

Code

Sidebar Starts Collapsed

A floating reveal button appears at the top-left; kai-sidebar-toggle fires on every change.

Code

Props

Property	Type	Default	Notes
groups	ConversationGroup[]	[]	Pre-bucketed conversation groups for the sidebar. Set as a JS property.
conversations	ConversationSummary[]	[]	Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property.
activeId	string	—	Id of the open conversation, highlighted in the sidebar.
messages	ChatMessage[]	[]	The active conversation's message thread, newest last. Set as a JS property.
value	string	—
placeholder	string	'Send a message...'
loading	boolean	false
suggestions	string[]	—
suggestionMode	"submit" | "fill"	'submit'
proseSize	"xs" | "sm" | "base" | "lg"	'sm'
codeTheme	string	'github-dark-dimmed'
codeHighlight	boolean	true
chatTitle	string	—
models	{ … }[]	—
currentModel	string	—
context	ContextData	—
scrollButton	boolean	true
search	boolean	false
voice	boolean	false
slashCommands	SlashCommandItem[]	—
slashActiveIds	string[]	—
slashCompact	boolean	false
sidebarWidth	number	22	Sidebar default width as a percent of the workspace (default 22).
sidebarMinWidth	number	200	Sidebar min width in px (default 200).
sidebarMaxWidth	number	420	Sidebar max width in px (default 420).
sidebarCollapsed	boolean	—	Controlled collapsed state. Set this as a JS property (`el.sidebarCollapsed = true`) to drive the sidebar from your app, updating it in response to the `kai-sidebar-toggle` event. Omit for uncontrolled (the element manages it).
defaultSidebarCollapsed	boolean	—	Initial collapsed state when uncontrolled (default false). Use the `default-sidebar-collapsed` attribute to start collapsed in plain HTML.

Events

Event	Detail	Notes
kai-conversation-select	{ … }	A conversation was selected in the sidebar.
kai-message-action	{ … }	An action button on a message was clicked.
kai-model-change	{ … }	The header model switcher changed.
kai-new-chat	Record<string, never>	The "New chat" button was clicked.
kai-search	Record<string, never>	The Search button was clicked.
kai-sidebar-toggle	{ … }	The sidebar was collapsed or expanded.
kai-slash-select	{ … }	A slash command was chosen from the palette.
kai-submit	{ … }	User submitted a message.
kai-suggestion-click	{ … }	A suggestion chip was clicked (only in `suggestion-mode="fill"`).
kai-value-change	{ … }	Fired on every input change.
kai-voice	Record<string, never>	The Mic / voice button was clicked.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ChatThreadConversationListResizablePanelGroupResizablePanelResizableHandleButton

---

Need a hand? Report a bug Ask for help