symbiote-ui 0.3.0-alpha.4

package/chat/ChatMessageItem/ChatMessageItem.js

@@ -0,0 +1,156 @@
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import { escapeHtml, formatMarkdown } from '../../display/markdown-formatter.js';
+import { translate } from '../../locale/index.js';
+import { summarizeToolInput } from '../message-model.js';
+import css from './ChatMessageItem.css.js';
+
+export function stringifyBlock(value) {
+  if (value == null) return '';
+  return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+}
+
+export function truncateResult(value) {
+  let text = stringifyBlock(value);
+  return text.length > 500 ? `${text.slice(0, 500)}\n...` : text;
+}
+
+export class ChatMessageItem extends Symbiote {
+  init$ = {
+    type: '',
+    role: '',
+    text: '',
+    isStreaming: false,
+    isLatestTool: false,
+    name: '',
+    input: null,
+    result: null,
+    done: false,
+    elapsedText: '',
+    status: '',
+    metaHtml: '',
+    workSummaryHtml: '',
+    copyText: '',
+    cardItems: [],
+    messageClass: 'message',
+    bodyHtml: '',
+  };
+
+  renderCallback() {
+    this.sub('type', () => this._renderBody());
+    this.sub('role', () => this._renderBody());
+    this.sub('text', () => this._renderBody());
+    this.sub('isStreaming', () => this._renderBody());
+    this.sub('isLatestTool', () => this._renderBody());
+    this.sub('name', () => this._renderBody());
+    this.sub('input', () => this._renderBody());
+    this.sub('result', () => this._renderBody());
+    this.sub('done', () => this._renderBody());
+    this.sub('elapsedText', () => this._renderBody());
+    this.sub('status', () => this._renderBody());
+    this.sub('metaHtml', () => this._renderBody());
+    this.sub('workSummaryHtml', () => this._renderBody());
+    this.sub('copyText', () => this._renderBody());
+    this.sub('cardItems', () => this._renderBody());
+  }
+
+  _renderBody() {
+    let role = this.$.role || this.$.type;
+    this.$.messageClass = `message ${role || ''}${this.$.isStreaming ? ' streaming' : ''}`.trim();
+
+    if (role === 'tool') {
+      this.$.bodyHtml = this._renderTool();
+    } else if (role === 'board') {
+      this.$.bodyHtml = this._renderBoard();
+    } else if (role === 'thinking') {
+      this.$.bodyHtml = this._renderThinking();
+    } else {
+      this.$.bodyHtml = this._renderTextMessage();
+    }
+  }
+
+  _renderTool() {
+    let icon = this.$.isStreaming ? 'build_circle' : 'build';
+    let spinClass = this.$.isStreaming ? 'spin-icon' : '';
+    let openAttr = this.$.isLatestTool ? ' open' : '';
+    let summary = summarizeToolInput(this.$.input);
+    let summaryHtml = summary
+      ? `<span class="tool-summary" title="${escapeHtml(summary)}">${escapeHtml(summary)}</span>`
+      : '';
+    let htmlStr = `<details class="tool-card"${openAttr}>
+      <summary class="tool-header"><span class="material-symbols-outlined tool-icon ${spinClass}">${icon}</span><span class="tool-name">${escapeHtml(this.$.name || 'tool')}</span>${summaryHtml}</summary>`;
+
+    if (this.$.input) {
+      htmlStr += `<div class="tool-section"><div class="tool-label">${escapeHtml(translate('chat.message.input'))}</div><pre class="tool-code">${escapeHtml(stringifyBlock(this.$.input))}</pre></div>`;
+    }
+
+    if (this.$.result) {
+      htmlStr += `<div class="tool-section"><div class="tool-label">${escapeHtml(translate('chat.message.result'))}</div><pre class="tool-code">${escapeHtml(truncateResult(this.$.result))}</pre></div>`;
+    } else if (this.$.isStreaming) {
+      htmlStr += `<div class="tool-section tool-waiting"><em>${escapeHtml(translate('chat.message.running'))}</em></div>`;
+    }
+
+    return `${htmlStr}</details>`;
+  }
+
+  _renderBoard() {
+    let cardsHtml = (this.$.cardItems || []).map((card) => {
+      let id = String(card?.id || '');
+      let title = card?.title || (id ? `${id.substring(0, 8)}...` : translate('chat.message.item'));
+      let status = card?.status || (this.$.isStreaming ? 'running' : 'idle');
+      let statusIcon = card?.icon || (status === 'running' ? 'pending' : 'schedule');
+      let spinClass = status === 'running' ? 'spin-icon' : '';
+      let statusText = card?.statusText || (status === 'running' ? translate('chat.message.running') : translate('chat.message.queued'));
+      let linkedAttr = card?.linkId ? ` data-link-id="${escapeHtml(card.linkId)}"` : '';
+      return `<div class="status-card" data-card-id="${escapeHtml(id)}"${linkedAttr} data-status="${escapeHtml(status)}">
+        <div class="status-card-header">
+          <span class="material-symbols-outlined ${spinClass}">${escapeHtml(statusIcon)}</span><span class="card-title">${escapeHtml(title)}</span>
+        </div>
+        <div class="status-card-status">${escapeHtml(statusText)}</div>
+        <div class="status-card-events"></div>
+      </div>`;
+    }).join('');
+
+    return `<div class="status-board">${cardsHtml}</div>`;
+  }
+
+  _renderThinking() {
+    let className = this.$.done ? 'work-summary' : 'thinking-block';
+    let openAttr = this.$.done ? '' : ' open';
+    let details = `<details class="${className}"${openAttr}>`;
+
+    if (this.$.done) {
+      details += `<summary><span class="material-symbols-outlined work-summary-icon">check_circle</span>${escapeHtml(translate('chat.message.workedFor', { elapsed: this.$.elapsedText }))}${this._renderCopyButton(this.$.copyText)}</summary>`;
+    } else {
+      let statusHtml = this.$.status ? `<span class="thinking-status">${escapeHtml(this.$.status)}</span>` : '';
+      details += `<summary><span class="material-symbols-outlined thinking-icon spin-icon">pending</span>${escapeHtml(translate('chat.message.thinkingFor', { elapsed: this.$.elapsedText }))}${statusHtml}</summary>`;
+    }
+
+    if (this.$.done && this.$.metaHtml) {
+      details += `<div class="work-body">${this.$.metaHtml}</div>`;
+    }
+
+    details += '</details>';
+
+    if (!this.$.done) return details;
+    return `<div class="work-summary-wrap">${details}</div>`;
+  }
+
+  _renderTextMessage() {
+    let cursor = this.$.isStreaming ? '<span class="streaming-cursor"></span>' : '';
+    let summary = this.$.workSummaryHtml || '';
+    return `<div class="msg-content">${formatMarkdown(this.$.text)}${cursor}</div>${summary}`;
+  }
+
+  _renderCopyButton(copyText) {
+    return copyText
+      ? `<button class="work-copy-btn" type="button" title="${escapeHtml(translate('chat.message.copyResponse'))}" data-copy-text="${escapeHtml(copyText)}"><span class="material-symbols-outlined">content_copy</span></button>`
+      : '';
+  }
+}
+
+ChatMessageItem.template = html`
+<div ${{ className: 'messageClass', innerHTML: 'bodyHtml', onclick: '^onMessageItemClick' }}></div>
+`;
+ChatMessageItem.rootStyles = css;
+
+ChatMessageItem.reg('chat-message-item');

package/chat/ChatSidebar/ChatSidebar.css.js

@@ -0,0 +1,150 @@
+export default `
+:host,
+chat-sidebar-shell {
+  display: flex;
+  height: 100%;
+  width: var(--chat-nav-width, 200px);
+  min-width: var(--chat-nav-width, 200px);
+  flex: 0 0 var(--chat-nav-width, 200px);
+  position: relative;
+  z-index: 10;
+  transition: width 0.2s ease, min-width 0.2s ease, flex-basis 0.2s ease;
+}
+
+:host([resizing]),
+chat-sidebar-shell[resizing]  {
+  transition: none;
+}
+
+:host([resizing]) .chat-nav,
+chat-sidebar-shell[resizing] .chat-nav  {
+  transition: none;
+}
+
+.chat-nav {
+  height: 100%;
+  width: var(--chat-nav-width, 200px);
+  min-width: var(--chat-nav-width, 200px);
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-right: none;
+  background: var(--sn-node-bg);
+  overflow: hidden;
+  transition: width 0.2s ease, min-width 0.2s ease;
+  user-select: none;
+}
+
+.chat-nav[collapsed]  {
+  width: var(--chat-nav-width, 48px);
+  min-width: var(--chat-nav-width, 48px);
+  overflow: visible;
+}
+
+.chat-nav[resizing],
+.chat-nav[resizing] + *  {
+  user-select: none;
+}
+
+.chat-nav-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -1px;
+  bottom: 0;
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  z-index: 20;
+  transition: background 0.15s ease;
+}
+
+.chat-nav-resize-handle:hover,
+.chat-nav-resize-handle.dragging,
+.chat-nav[resizing] .chat-nav-resize-handle  {
+  background: var(--sn-layout-resizer-hover-bg);
+}
+
+.chat-nav-header {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 4px;
+  min-height: 28px;
+  background: var(--sn-node-bg);
+  border-bottom: none;
+  flex-shrink: 0;
+}
+
+.chat-nav[collapsed] .chat-nav-header  {
+  flex-direction: column-reverse;
+  justify-content: flex-start;
+  padding: 4px 0;
+  gap: 8px;
+}
+
+.chat-nav-header .nav-spacer {
+  flex: 1;
+}
+
+.chat-nav[collapsed] .nav-spacer  {
+  display: none;
+}
+
+.chat-nav-header .nav-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sn-text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.chat-nav[collapsed] .nav-title  {
+  display: none;
+}
+
+.chat-nav-collapse-icon {
+  transition: transform 0.2s ease;
+}
+
+.chat-nav[collapsed] .chat-nav-collapse-icon  {
+  transform: rotate(180deg);
+}
+
+.nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--sn-text-dim);
+  font-size: 0.75rem;
+  transition: background 0.1s, color 0.1s;
+  flex-shrink: 0;
+}
+
+.nav-btn .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.nav-btn:hover {
+  background: var(--sn-node-hover);
+  color: var(--sn-text);
+}
+
+.chat-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.chat-nav[collapsed] .chat-items  {
+  overflow: visible;
+}
+
+`;

package/chat/ChatSidebar/ChatSidebar.js

@@ -0,0 +1,230 @@
+import Symbiote from '@symbiotejs/symbiote';
+import '../ChatSidebarItem/ChatSidebarItem.js';
+import template from './ChatSidebar.tpl.js';
+import css from './ChatSidebar.css.js';
+import { translate } from '../../locale/index.js';
+import {
+  AUTO_COLLAPSE_WIDTH,
+  AUTO_UNCOLLAPSE_WIDTH,
+  COLLAPSE_DRAG_THRESHOLD,
+  COLLAPSED_NAV_WIDTH,
+  DEFAULT_NAV_WIDTH,
+  MAX_NAV_WIDTH,
+  MIN_NAV_WIDTH,
+  clampChatSidebarWidth,
+} from './constants.js';
+
+export {
+  AUTO_COLLAPSE_WIDTH,
+  AUTO_UNCOLLAPSE_WIDTH,
+  COLLAPSE_DRAG_THRESHOLD,
+  COLLAPSED_NAV_WIDTH,
+  DEFAULT_NAV_WIDTH,
+  MAX_NAV_WIDTH,
+  MIN_NAV_WIDTH,
+  clampChatSidebarWidth,
+} from './constants.js';
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+export class ChatSidebarShell extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+    navCollapsed: true,
+    navWidth: DEFAULT_NAV_WIDTH,
+    groupDividers: true,
+    chats: [],
+    title: translate('chat.sidebar.title'),
+    newChatTitle: translate('chat.sidebar.new'),
+    onToggleNav: () => {
+      this._autoCollapsed = false;
+      this.setCollapsed(!this.$.navCollapsed);
+    },
+    onResizeStart: (event) => {
+      this._startResize(event);
+    },
+    onNewChat: () => {
+      emit(this, 'chat-sidebar-new');
+    },
+    onChatClick: (event) => {
+      this._handleChatClick(event);
+    },
+  };
+
+  initCallback() {
+    this.sub('navCollapsed', (value) => {
+      this._applyNavWidth();
+      emit(this, 'chat-sidebar-collapse-change', {
+        collapsed: Boolean(value),
+        auto: Boolean(this._autoCollapsed),
+      });
+    });
+
+    this.sub('navWidth', (value) => {
+      this._applyNavWidth();
+      emit(this, 'chat-sidebar-width-change', {
+        width: clampChatSidebarWidth(Number(value) || DEFAULT_NAV_WIDTH),
+      });
+    });
+
+    this.sub('groupDividers', () => {
+      this._applyGroupDividers();
+    });
+
+    if (typeof ResizeObserver === 'function') {
+      this._resizeObserver = new ResizeObserver(() => this._syncCollapseForAvailableWidth());
+      let shell = this.closest('.chat-shell') || this.parentElement;
+      if (shell) this._resizeObserver.observe(shell);
+    }
+
+    queueMicrotask(() => {
+      this._applyNavWidth();
+      this._applyGroupDividers();
+      this._syncCollapseForAvailableWidth();
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+  }
+
+  setChats(chats = []) {
+    this.$.chats = Array.isArray(chats) ? chats : [];
+    let raf = globalThis.requestAnimationFrame || ((callback) => setTimeout(callback, 0));
+    raf(() => this.syncExpandedChatItems(this.$.chats));
+  }
+
+  setCollapsed(collapsed, { auto = false } = {}) {
+    this._autoCollapsed = auto;
+    this.$.navCollapsed = Boolean(collapsed);
+  }
+
+  setWidth(width) {
+    this.$.navWidth = clampChatSidebarWidth(Number(width) || DEFAULT_NAV_WIDTH);
+  }
+
+  setGroupDividers(enabled) {
+    this.$.groupDividers = Boolean(enabled);
+  }
+
+  _applyNavWidth() {
+    let width = this.$.navCollapsed ? COLLAPSED_NAV_WIDTH : clampChatSidebarWidth(this.$.navWidth);
+    this.style.setProperty('--chat-nav-width', `${width}px`);
+    let nav = this.querySelector('.chat-nav');
+    if (nav) nav.toggleAttribute('collapsed', this.$.navCollapsed);
+    this.toggleAttribute('collapsed', this.$.navCollapsed);
+  }
+
+  _applyGroupDividers() {
+    let nav = this.querySelector('.chat-nav');
+    if (nav) nav.toggleAttribute('data-group-dividers', Boolean(this.$.groupDividers));
+  }
+
+  _syncCollapseForAvailableWidth() {
+    if (this._isResizing) return;
+    let shell = this.closest('.chat-shell') || this.parentElement;
+    if (!shell) return;
+    let width = shell.getBoundingClientRect().width;
+    if (width <= AUTO_COLLAPSE_WIDTH && !this.$.navCollapsed) {
+      this.setCollapsed(true, { auto: true });
+    } else if (width >= AUTO_UNCOLLAPSE_WIDTH && this.$.navCollapsed && this._autoCollapsed) {
+      this.setCollapsed(false, { auto: false });
+    }
+  }
+
+  _startResize(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    let nav = this.querySelector('.chat-nav');
+    let handle = this.querySelector('.chat-nav-resize-handle');
+    if (!nav) return;
+
+    let startX = event.clientX;
+    let startWidth = this.$.navCollapsed ? COLLAPSED_NAV_WIDTH : nav.getBoundingClientRect().width;
+    let wasCollapsed = this.$.navCollapsed;
+    this._isResizing = true;
+    this.setAttribute('resizing', '');
+    handle?.classList.add('dragging');
+    nav.setAttribute('resizing', '');
+
+    let onMove = (moveEvent) => {
+      let rawWidth = startWidth + (moveEvent.clientX - startX);
+      if (wasCollapsed && rawWidth > COLLAPSE_DRAG_THRESHOLD) {
+        this.setCollapsed(false);
+        wasCollapsed = false;
+        startX = moveEvent.clientX;
+        startWidth = MIN_NAV_WIDTH;
+        this.setWidth(startWidth);
+        return;
+      }
+
+      if (!wasCollapsed && rawWidth < COLLAPSE_DRAG_THRESHOLD) {
+        this.setCollapsed(true);
+        return;
+      }
+
+      if (!this.$.navCollapsed) {
+        this.setWidth(rawWidth);
+      }
+    };
+
+    let onUp = () => {
+      handle?.classList.remove('dragging');
+      nav.removeAttribute('resizing');
+      this.removeAttribute('resizing');
+      this._isResizing = false;
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      this._autoCollapsed = false;
+    };
+
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+  }
+
+  _handleChatClick(event) {
+    let btnDelete = event.target.closest('.chat-item-delete');
+    let item = event.target.closest('.chat-item, .chat-item-child');
+    if (!item) return;
+
+    let chatId = item.dataset.id;
+    if (btnDelete) {
+      event.stopPropagation();
+      emit(this, 'chat-sidebar-delete', { id: chatId });
+      return;
+    }
+
+    let expandIcon = event.target.closest('.chat-expand-icon');
+    if (expandIcon) {
+      event.stopPropagation();
+      let subContainer = this.querySelector(`.chat-sub-items[data-parent="${chatId}"]`);
+      if (!subContainer) return;
+      let isExpanded = subContainer.hasAttribute('expanded');
+      subContainer.toggleAttribute('expanded', !isExpanded);
+      item.classList.toggle('chat-item-expanded', !isExpanded);
+      emit(this, 'chat-sidebar-toggle', { id: chatId, expanded: !isExpanded });
+      return;
+    }
+
+    if (chatId) {
+      emit(this, 'chat-sidebar-select', { id: chatId });
+    }
+  }
+
+  syncExpandedChatItems(chats = this.$.chats) {
+    for (let chat of chats || []) {
+      let item = [...this.querySelectorAll('chat-sidebar-item')].find((el) => el.$?.id === chat.id);
+      if (!item) continue;
+      item.$.isExpanded = Boolean(chat.isExpanded);
+    }
+  }
+}
+
+ChatSidebarShell.template = template;
+ChatSidebarShell.rootStyles = css;
+ChatSidebarShell.reg('chat-sidebar-shell');

package/chat/ChatSidebar/ChatSidebar.tpl.js

@@ -0,0 +1,18 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<div class="chat-nav" ${{ onclick: 'onChatClick' }}>
+  <div class="chat-nav-header">
+    <button class="nav-btn nav-btn-add" ${{ onclick: 'onNewChat', title: 'newChatTitle' }}>
+      <span class="material-symbols-outlined">add</span>
+    </button>
+    <span class="nav-title" ${{ textContent: 'title' }}></span>
+    <div class="nav-spacer"></div>
+    <button class="nav-btn" ${{ onclick: 'onToggleNav' }}>
+      <span class="material-symbols-outlined chat-nav-collapse-icon">chevron_left</span>
+    </button>
+  </div>
+  <div class="chat-items" itemize="chats" item-tag="chat-sidebar-item"></div>
+  <div class="chat-nav-resize-handle" ${{ onpointerdown: 'onResizeStart' }}></div>
+</div>
+`;

package/chat/ChatSidebar/constants.js

@@ -0,0 +1,11 @@
+export const DEFAULT_NAV_WIDTH = 200;
+export const MIN_NAV_WIDTH = 120;
+export const MAX_NAV_WIDTH = 420;
+export const COLLAPSED_NAV_WIDTH = 48;
+export const COLLAPSE_DRAG_THRESHOLD = 72;
+export const AUTO_COLLAPSE_WIDTH = 560;
+export const AUTO_UNCOLLAPSE_WIDTH = 660;
+
+export function clampChatSidebarWidth(width) {
+  return Math.max(MIN_NAV_WIDTH, Math.min(MAX_NAV_WIDTH, Math.round(width)));
+}