# Workspace

A full chat shell as a single web component — resizable sidebar, conversation list, and message thread, all isolated in Shadow DOM.

<p class="kai-tag-sub">kai-workspace</p>

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.

## Preview

> **tip:** 
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>`](/components/chat/) and add your own controls through its header slots ([Custom chat header](/patterns/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:

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

<script type="module">

  await customElements.whenDefined('kai-workspace');

  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', parts: [{ type: 'text', text: 'How do I drop the whole chat app in with one tag?' }] },
    { id: 'm2', role: 'assistant', parts: [{ type: 'text', text: '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`, `triggers`, `kindIcons`, 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` (a percent of the workspace, default `26`), `sidebarMinWidth` and `sidebarMaxWidth` (both px, default `240` / `420`). 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** — `groups` supplies the section headers, `conversations` supplies the rows, and each row lands in the group whose `id` matches its `groupId`. Leave `groups` off and the whole list renders in one **Ungrouped** section.

## Examples

### Default

### Loading State

Set `loading` while an assistant reply is streaming.

### Model Switcher

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

### 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`.

### Entity Pills

Set `triggers` so `/` inserts a skill pill and `@` opens a sectioned menu of agents and plugins. `kai-submit` carries the structured `doc` + `entities`.

### Sidebar Starts Collapsed

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

## Props

## Events

## Methods

## Composed from