Workspace

kai-workspace

Arranges the regions you give it and handles resizing, collapsing, and the mobile drawer.

• Shadow DOM
• 5 slots
• Resize handles
• Per-aside collapse
• Mobile drawer

Preview

<kai-conversations> slotted into start, <kai-chat> in the main region, and the app scripting both parts directly:

When to use

When you want a collapsible rail beside a main surface without hand-rolling resize, collapse, and drawer plumbing. For the conversation surface alone, use <kai-chat>.

Usage

Slot content into the regions, then drive each part as its own element. The shell itself takes only layout props:

<kai-workspace collapse-below="720" drawer-below="640" style="display:block; height:100vh;">
  <kai-conversations slot="start"></kai-conversations>
  <kai-chat></kai-chat>
</kai-workspace>

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

  const ws = document.querySelector('kai-workspace');
  const rail = document.querySelector('kai-conversations');
  const chat = document.querySelector('kai-chat');

  // Chat data lives on the chat parts, not the shell.
  rail.conversations = await api.listConversations();
  chat.messages = [];

  rail.addEventListener('kai-conversation-select', async (e) => {
    rail.activeId = e.detail.id;
    chat.messages = await api.loadThread(e.detail.id);
  });
  chat.addEventListener('kai-submit', (e) => send(e.detail.value));

  // The shell fires layout events only.
  ws.addEventListener('kai-aside-toggle', (e) => console.log(e.detail.side, e.detail.collapsed));
</script>

• Regions are the header, start, main, end, and footer slots; unnamed children land in main. A region renders only when you project content into it, and start/end are logical, so start is the right column on an RTL page.
• Aside widths are CSS custom properties, not props: --kai-workspace-start-width (280px), --kai-workspace-start-min-width (200px), --kai-workspace-start-max-width (480px), and the --kai-workspace-end-* trio (320px / 200px / 480px).
• Collapse is uncontrolled by default. Start collapsed with default-start-collapsed or default-end-collapsed, or control an aside with the startCollapsed / endCollapsed property and update it from kai-aside-toggle. collapse-below auto-collapses both asides past that width.
• Drawer mode: below drawer-below, an expanded aside paints as an overlay above the main region. Escape closes it and returns focus to the opener.

Examples

Sidebar starts collapsed

The rail begins collapsed and the main region takes the full width. Expand it from the shell’s handle, or call expandAside('start'):

<kai-workspace default-start-collapsed style="display:block; height:100vh;">
  <kai-conversations slot="start"></kai-conversations>
  <kai-chat></kai-chat>
</kai-workspace>

An inspector in the end aside

<kai-workspace drawer-below="640" style="display:block; height:100vh;">
  <kai-conversations slot="start"></kai-conversations>
  <kai-chat></kai-chat>
  <kai-artifact slot="end"></kai-artifact>
</kai-workspace>

Migrating from the chat preset?

Before the 2026-08-20 re-cast this element was a chat preset with messages, conversations, and 30 other props. That surface is gone. The prop-by-prop migration table is in Use a workspace.

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
startCollapsed	boolean	—	Controlled collapsed state of the start aside. Omit for uncontrolled (the element manages it).
defaultStartCollapsed	boolean	—	Initial collapsed state of the start aside when uncontrolled (default false). Use the `default-start-collapsed` attribute to start collapsed in plain HTML.
endCollapsed	boolean	—	Controlled collapsed state of the end aside. Omit for uncontrolled (the element manages it).
defaultEndCollapsed	boolean	—	Initial collapsed state of the end aside when uncontrolled (default false). Use the `default-end-collapsed` attribute to start collapsed in plain HTML.
collapseBelow	number	—	Auto-collapse both asides when the shell's own width drops below this many px, and re-expand above it.
drawerBelow	number	—	Below this shell width in px, an expanded aside renders as an overlay drawer over the main region.
compact	boolean	—	Density hint.

Events

Event	Detail	Notes
kai-aside-resize	{ … }	The aside was resized (fires per drag step, keyboard nudge, or a handle double-click reset), width in px.
kai-aside-toggle	{ … }	An aside collapsed or expanded (a method, the breakpoint, the drawer's Escape).

Methods

Method	Signature	Notes
toggleAside	(side: WorkspaceAsideSide): void	Collapse/expand one aside (fires `kai-aside-toggle`).
collapseAside	(side: WorkspaceAsideSide): void	Force one aside collapsed (fires `kai-aside-toggle`).
expandAside	(side: WorkspaceAsideSide): void	Force one aside expanded (fires `kai-aside-toggle`).

Composed from

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

WorkspaceShell

---

Need a hand? Report a bug Ask for help