symbiote-ui 0.3.0-alpha.4

package/chat/ChatSidebarItem/ChatSidebarItem.js

@@ -0,0 +1,304 @@
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import css from './ChatSidebarItem.css.js';
+import { translate } from '../../locale/index.js';
+
+const COMPACT_LABEL_MIN_CH = 6;
+const COMPACT_LABEL_MAX_CH = 32;
+const COMPACT_LABEL_MIN_PX = 72;
+const COMPACT_LABEL_MAX_PX = 320;
+const COMPACT_LABEL_PADDING_PX = 10;
+const COMPACT_LABEL_FONT = '11px Inter, -apple-system, system-ui, sans-serif';
+let compactLabelMeasureContext;
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+export function getCompactChatLabelCh(value = '') {
+  let length = [...String(value || '').trim()].length;
+  return Math.min(COMPACT_LABEL_MAX_CH, Math.max(COMPACT_LABEL_MIN_CH, length));
+}
+
+export function getCompactChatLabelWidthPx(value = '') {
+  let label = String(value || '').trim();
+  if (!label || typeof document === 'undefined' || typeof document.createElement !== 'function') return null;
+  try {
+    compactLabelMeasureContext ||= document.createElement('canvas').getContext('2d');
+    if (!compactLabelMeasureContext) return null;
+    compactLabelMeasureContext.font = COMPACT_LABEL_FONT;
+    let measured = Math.ceil(compactLabelMeasureContext.measureText(label).width + COMPACT_LABEL_PADDING_PX);
+    return Math.min(COMPACT_LABEL_MAX_PX, Math.max(COMPACT_LABEL_MIN_PX, measured));
+  } catch {
+    return null;
+  }
+}
+
+function syncCompactLabelWidth(element, value) {
+  element.style.setProperty('--sn-chat-compact-label-ch', String(getCompactChatLabelCh(value)));
+  let width = getCompactChatLabelWidthPx(value);
+  if (width) {
+    element.style.setProperty('--sn-chat-compact-label-width', `${width}px`);
+  } else {
+    element.style.removeProperty('--sn-chat-compact-label-width');
+  }
+}
+
+export class ChatSidebarItem extends Symbiote {
+  init$ = {
+    id: '',
+    name: '',
+    cleanName: '',
+    adapter: '',
+    icon: 'chat',
+    agentColor: '',
+    metaLabel: '',
+    statusKind: '',
+    statusIcon: '',
+    statusTitle: '',
+    hasChildren: false,
+    isGroup: false,
+    isExpanded: false,
+    isActive: false,
+    subChats: [],
+    deleteTitle: translate('chat.sidebar.delete'),
+    deleteChatLabel: translate('chat.sidebar.deleteChat'),
+    toggleChildrenLabel: translate('chat.sidebar.toggleChildren'),
+
+    onItemClick: (event) => {
+      if (event.target.closest('.chat-item-delete') || event.target.closest('.chat-expand-icon')) return;
+      event.stopPropagation();
+      if (this.$.isGroup) {
+        this.$.isExpanded = !this.$.isExpanded;
+        emit(this, 'chat-sidebar-toggle', {
+          id: this.$.id,
+          expanded: this.$.isExpanded,
+          item: this.$,
+        });
+        return;
+      }
+      if (this.$.id) emit(this, 'chat-sidebar-select', { id: this.$.id, item: this.$ });
+    },
+
+    onExpandToggle: (event) => {
+      event.stopPropagation();
+      if (!this.$.hasChildren) return;
+      this.$.isExpanded = !this.$.isExpanded;
+      emit(this, 'chat-sidebar-toggle', {
+        id: this.$.id,
+        expanded: this.$.isExpanded,
+        item: this.$,
+      });
+    },
+
+    onDelete: (event) => {
+      event.stopPropagation();
+      if (this.$.id) emit(this, 'chat-sidebar-delete', { id: this.$.id, item: this.$ });
+    },
+  };
+
+  renderCallback() {
+    this.sub('isActive', (value) => {
+      this.toggleAttribute('data-active', value);
+      this._syncAutoExpanded();
+    });
+
+    this.sub('isExpanded', (value) => {
+      this.toggleAttribute('data-expanded', value);
+    });
+
+    this.sub('hasChildren', (value) => {
+      this.toggleAttribute('data-has-sub', value);
+      if (!value) this.$.isExpanded = false;
+    });
+    this.sub('isGroup', (value) => {
+      this.toggleAttribute('data-group', value);
+    });
+    this.sub('agentColor', (value) => this._syncAgentColor(value));
+    this.sub('cleanName', (value) => this._syncCompactLabelWidth(value));
+    this.sub('statusKind', () => this._syncStatus());
+    this.sub('statusIcon', () => this._syncStatus());
+    this._syncAgentColor(this.$.agentColor);
+    this._syncCompactLabelWidth(this.$.cleanName || this.$.name);
+    this._syncStatus();
+    this.toggleAttribute('data-group', this.$.isGroup);
+
+    this.sub('subChats', (chats) => {
+      let has = chats && chats.length > 0;
+      this.$.hasChildren = has;
+      this._syncAutoExpanded();
+    });
+  }
+
+  _syncAutoExpanded() {
+    let chats = this.$.subChats || [];
+    let hasActiveChild = chats.some((chat) => chat.isActive);
+    let hasRunningChild = chats.some((chat) => chat.pendingTaskId);
+    if (chats.length && (this.$.isActive || hasActiveChild || hasRunningChild)) {
+      this.$.isExpanded = true;
+    }
+  }
+
+  _syncAgentColor(value) {
+    if (value) {
+      this.style.setProperty('--sn-chat-item-icon-color', value);
+    } else {
+      this.style.removeProperty('--sn-chat-item-icon-color');
+    }
+  }
+
+  _syncCompactLabelWidth(value) {
+    syncCompactLabelWidth(this, value);
+  }
+
+  _syncStatus() {
+    let hasStatus = Boolean(this.$.statusKind && this.$.statusIcon);
+    this.toggleAttribute('data-has-status', hasStatus);
+    if (this.ref.statusIcon) {
+      this.ref.statusIcon.hidden = !hasStatus;
+      if (hasStatus) {
+        this.ref.statusIcon.setAttribute('data-status', this.$.statusKind);
+      } else {
+        this.ref.statusIcon.removeAttribute('data-status');
+      }
+    }
+  }
+}
+
+ChatSidebarItem.template = html`
+<div class="chat-item" ${{ '@data-id': 'id', onclick: 'onItemClick' }}>
+  <span class="chat-item-icon-slot">
+    <span class="material-symbols-outlined chat-icon chat-item-icon" ${{ textContent: 'icon' }}></span>
+    <button class="chat-item-delete" ${{ title: 'deleteTitle', '@aria-label': 'deleteChatLabel', onclick: 'onDelete' }}>
+      <span class="material-symbols-outlined">delete</span>
+    </button>
+  </span>
+  <span class="chat-item-label" ${{ textContent: 'cleanName' }}></span>
+  <span class="material-symbols-outlined chat-status-icon" ref="statusIcon" ${{ textContent: 'statusIcon', title: 'statusTitle' }}></span>
+  <span class="chat-item-adapter" ${{ textContent: 'metaLabel' }}></span>
+  <span class="material-symbols-outlined chat-expand-icon" role="button" tabindex="0" ${{ title: 'toggleChildrenLabel', '@aria-label': 'toggleChildrenLabel', onclick: 'onExpandToggle' }}>chevron_right</span>
+</div>
+<div class="chat-sub-items" itemize="subChats" item-tag="chat-sidebar-sub-item" ${{ '@data-parent': 'id' }}></div>
+`;
+
+export class ChatSidebarSubItem extends Symbiote {
+  init$ = {
+    id: '',
+    name: '',
+    cleanName: '',
+    adapter: '',
+    icon: 'subdirectory_arrow_right',
+    agentColor: '',
+    statusKind: '',
+    statusIcon: '',
+    statusTitle: '',
+    metaLabel: '',
+    hasChildren: false,
+    isExpanded: false,
+    isActive: false,
+    deleteTitle: translate('chat.sidebar.delete'),
+    deleteChatLabel: translate('chat.sidebar.deleteChat'),
+
+    onItemClick: (event) => {
+      if (event.target.closest('.chat-item-delete') || event.target.closest('.chat-expand-icon')) return;
+      event.stopPropagation();
+      if (this.$.id) emit(this, 'chat-sidebar-select', { id: this.$.id, item: this.$ });
+    },
+
+    onExpandToggle: (event) => {
+      event.stopPropagation();
+      if (!this.$.hasChildren) return;
+      this.$.isExpanded = !this.$.isExpanded;
+      emit(this, 'chat-sidebar-toggle', {
+        id: this.$.id,
+        expanded: this.$.isExpanded,
+        item: this.$,
+      });
+    },
+
+    onDelete: (event) => {
+      event.stopPropagation();
+      if (this.$.id) emit(this, 'chat-sidebar-delete', { id: this.$.id, item: this.$ });
+    },
+  };
+
+  renderCallback() {
+    this.sub('isActive', (value) => {
+      this.toggleAttribute('data-active', value);
+      this._syncAutoExpanded();
+    });
+    this.sub('isExpanded', (value) => {
+      this.toggleAttribute('data-expanded', value);
+    });
+    this.sub('hasChildren', (value) => {
+      this.toggleAttribute('data-has-sub', value);
+      if (!value) this.$.isExpanded = false;
+    });
+    this.sub('agentColor', (value) => this._syncAgentColor(value));
+    this.sub('cleanName', (value) => this._syncCompactLabelWidth(value));
+    this.sub('statusKind', () => this._syncStatus());
+    this.sub('statusIcon', () => this._syncStatus());
+    this._syncAgentColor(this.$.agentColor);
+    this._syncCompactLabelWidth(this.$.cleanName || this.$.name);
+    this._syncStatus();
+    this.sub('subChats', (chats) => {
+      let has = chats && chats.length > 0;
+      this.$.hasChildren = has;
+      this._syncAutoExpanded();
+    });
+  }
+
+  _syncAutoExpanded() {
+    let chats = this.$.subChats || [];
+    let hasActiveChild = chats.some((chat) => chat.isActive);
+    let hasRunningChild = chats.some((chat) => chat.pendingTaskId);
+    if (chats.length && (this.$.isActive || hasActiveChild || hasRunningChild)) {
+      this.$.isExpanded = true;
+    }
+  }
+
+  _syncAgentColor(value) {
+    if (value) {
+      this.style.setProperty('--sn-chat-item-icon-color', value);
+    } else {
+      this.style.removeProperty('--sn-chat-item-icon-color');
+    }
+  }
+
+  _syncCompactLabelWidth(value) {
+    syncCompactLabelWidth(this, value);
+  }
+
+  _syncStatus() {
+    let hasStatus = Boolean(this.$.statusKind && this.$.statusIcon);
+    this.toggleAttribute('data-has-status', hasStatus);
+    if (this.ref.statusIcon) {
+      this.ref.statusIcon.hidden = !hasStatus;
+      if (hasStatus) {
+        this.ref.statusIcon.setAttribute('data-status', this.$.statusKind);
+      } else {
+        this.ref.statusIcon.removeAttribute('data-status');
+      }
+    }
+  }
+}
+
+ChatSidebarSubItem.template = html`
+<div class="chat-item-child" ${{ '@data-id': 'id', onclick: 'onItemClick' }}>
+  <span class="chat-item-icon-slot">
+    <span class="material-symbols-outlined chat-icon chat-item-icon" ${{ textContent: 'icon' }}></span>
+    <button class="chat-item-delete" ${{ title: 'deleteTitle', '@aria-label': 'deleteChatLabel', onclick: 'onDelete' }}>
+      <span class="material-symbols-outlined">delete</span>
+    </button>
+  </span>
+  <span class="chat-item-label" ${{ textContent: 'cleanName' }}></span>
+  <span class="chat-item-type" ${{ textContent: 'metaLabel' }}></span>
+  <span class="material-symbols-outlined chat-status-icon" ref="statusIcon" ${{ textContent: 'statusIcon', title: 'statusTitle' }}></span>
+  <span class="material-symbols-outlined chat-expand-icon" role="button" tabindex="0" ${{ title: 'toggleChildrenLabel', '@aria-label': 'toggleChildrenLabel', onclick: 'onExpandToggle' }}>chevron_right</span>
+</div>
+<div class="chat-sub-items" itemize="subChats" item-tag="chat-sidebar-sub-item" ${{ '@data-parent': 'id' }}></div>
+`;
+
+ChatSidebarItem.rootStyles = css;
+ChatSidebarSubItem.rootStyles = css;
+ChatSidebarSubItem.reg('chat-sidebar-sub-item');
+ChatSidebarItem.reg('chat-sidebar-item');

package/chat/ChatTranscript/ChatTranscript.css.js

@@ -0,0 +1,90 @@
+export default `
+:host,
+chat-transcript {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  background: var(--sn-chat-bg);
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sn-chat-transcript-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sn-chat-gap);
+  position: relative;
+  z-index: 1;
+}
+
+chat-message-item {
+  display: contents;
+}
+
+.scroll-bottom-btn {
+  position: absolute;
+  left: 50%;
+  bottom: var(--sn-chat-scroll-bottom);
+  z-index: 30;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: var(--sn-node-bg);
+  color: var(--sn-text-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%) translateY(4px);
+  box-shadow: var(--sn-shadow-lg);
+  transition: opacity 0.15s ease, transform 0.15s ease, background 0.12s ease, color 0.12s ease;
+}
+
+.scroll-bottom-btn.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(-50%) translateY(0);
+}
+
+.scroll-bottom-btn:hover {
+  background: var(--sn-node-hover);
+  color: var(--sn-text);
+}
+
+.scroll-bottom-btn .material-symbols-outlined {
+  font-size: 18px;
+}
+
+.live-status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--sn-text-dim);
+  animation: status-fade-in 0.2s ease;
+}
+
+.live-status-indicator .material-symbols-outlined {
+  font-size: var(--sn-chat-live-icon-size);
+  color: var(--sn-cat-server);
+}
+
+.status-card-header .material-symbols-outlined[data-status="done"] {
+  color: var(--sn-success-color);
+}
+
+.status-card-header .material-symbols-outlined[data-status="error"] {
+  color: var(--sn-danger-color);
+}
+
+@keyframes status-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`;

package/chat/ChatTranscript/ChatTranscript.js

@@ -0,0 +1,244 @@
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import '../ChatMessageItem/ChatMessageItem.js';
+import css from './ChatTranscript.css.js';
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+export class ChatTranscript extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+    messageItems: [],
+    onScroll: () => {
+      this.updateScrollBottomButton();
+      emit(this, 'chat-transcript-scroll', this.getScrollState());
+    },
+    onScrollToBottom: () => {
+      this.scrollToBottom({ smooth: true });
+      emit(this, 'chat-transcript-scroll-bottom');
+    },
+    onMessageItemClick: (event) => {
+      this._handleMessageItemClick(event);
+    },
+  };
+
+  setMessageItems(items = []) {
+    this.$.messageItems = Array.isArray(items) ? items : [];
+  }
+
+  getScrollContainer() {
+    return this.ref.chatMessages || this.querySelector('.chat-messages');
+  }
+
+  isAtBottom(tolerance = 10) {
+    let container = this.getScrollContainer();
+    if (!container) return true;
+    return container.scrollHeight - container.scrollTop <= container.clientHeight + tolerance;
+  }
+
+  getScrollState() {
+    let container = this.getScrollContainer();
+    if (!container) return { hasOverflow: false, isAtBottom: true };
+    return {
+      hasOverflow: container.scrollHeight > container.clientHeight + 12,
+      isAtBottom: container.scrollHeight - container.scrollTop <= container.clientHeight + 32,
+    };
+  }
+
+  scrollToBottom({ smooth = false } = {}) {
+    let container = this.getScrollContainer();
+    if (!container) return;
+    if (smooth && typeof container.scrollTo === 'function') {
+      container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+    } else {
+      container.scrollTop = container.scrollHeight;
+    }
+    this.updateScrollBottomButton();
+  }
+
+  updateScrollBottomButton() {
+    let btn = this.ref.scrollBottomBtn;
+    if (!btn) return;
+    let state = this.getScrollState();
+    btn.classList.toggle('visible', state.hasOverflow && !state.isAtBottom);
+  }
+
+  findStatusBoard(cardIds = []) {
+    let container = this.getScrollContainer();
+    if (!container || !cardIds?.length) return null;
+    let firstCard = container.querySelector(`[data-card-id="${this._cssEscape(cardIds[0])}"]`);
+    return firstCard?.closest('.status-board') || null;
+  }
+
+  updateStatusCard(cardId, cardData = {}, options = {}) {
+    let root = options.board || this.getScrollContainer();
+    if (!root || !cardId) return null;
+    let card = root.querySelector(`[data-card-id="${this._cssEscape(cardId)}"]`);
+    if (!card) return null;
+
+    let status = cardData.status || 'running';
+    let isDone = status === 'done' || status === 'error' || status === 'cancelled' || status === 'lost';
+    card.dataset.status = isDone ? status : 'running';
+
+    let iconEl = card.querySelector('.status-card-header .material-symbols-outlined');
+    if (iconEl) {
+      iconEl.className = `material-symbols-outlined ${isDone ? '' : 'spin-icon'}`.trim();
+      iconEl.textContent = isDone ? (status === 'done' ? 'check_circle' : 'error') : 'pending';
+      iconEl.dataset.status = isDone ? status : 'running';
+    }
+
+    let statusEl = card.querySelector('.status-card-status');
+    if (statusEl) {
+      if (isDone) {
+        statusEl.textContent = status === 'done' ? 'Completed' : status === 'error' ? 'Failed' : 'Cancelled';
+      } else {
+        let elapsed = this._formatElapsed(cardData.startedAt || cardData.updatedAt);
+        statusEl.textContent = `Running${elapsed ? ' - ' + elapsed : ''}`;
+      }
+    }
+
+    if (cardData.linkId && !card.dataset.linkId) {
+      card.dataset.linkId = cardData.linkId;
+      card.classList.add('status-card-linked');
+    }
+
+    let titleEl = card.querySelector('.card-title');
+    if (titleEl && cardData.title) {
+      titleEl.textContent = cardData.title;
+    }
+
+    return card;
+  }
+
+  renderLiveStatus(meta) {
+    let container = this.getScrollContainer();
+    if (!container) return;
+    let existing = container.querySelector('.live-status-indicator');
+    if (existing) existing.remove();
+    if (!meta) return;
+
+    let icon = 'pending';
+    let text = 'Processing...';
+    let spinClass = 'spin-icon';
+
+    if (meta.phase === 'thinking') {
+      text = meta.thinkingStatus || 'Thinking...';
+    } else if (meta.phase === 'tool') {
+      icon = 'build_circle';
+      text = `Running: ${meta.lastToolName || 'tool'}`;
+    } else if (meta.phase === 'responding') {
+      icon = 'edit_note';
+      text = 'Writing response...';
+      spinClass = '';
+    }
+
+    let indicator = document.createElement('div');
+    indicator.className = 'live-status-indicator';
+    let iconEl = document.createElement('span');
+    iconEl.className = `material-symbols-outlined ${spinClass}`.trim();
+    iconEl.textContent = icon;
+    let textEl = document.createElement('span');
+    textEl.textContent = text;
+    indicator.append(iconEl, ' ', textEl);
+    container.appendChild(indicator);
+    requestAnimationFrame(() => this.scrollToBottom());
+  }
+
+  _handleMessageItemClick(event) {
+    let copyBtn = event.target.closest('.work-copy-btn');
+    if (copyBtn) {
+      event.preventDefault();
+      event.stopPropagation();
+      this._copyMessageText(copyBtn.dataset.copyText || '', copyBtn);
+      return;
+    }
+
+    let card = event.target.closest('.status-card');
+    if (card) {
+      emit(this, 'status-card-open', {
+        id: card.dataset.cardId || '',
+        linkId: card.dataset.linkId || '',
+        card,
+      });
+    }
+  }
+
+  _cssEscape(value) {
+    let str = String(value || '');
+    return globalThis.CSS?.escape ? CSS.escape(str) : str.replace(/["\\]/g, '\\$&');
+  }
+
+  _formatElapsed(timestamp) {
+    if (!timestamp) return '';
+    let seconds = Math.max(0, Math.round((Date.now() - timestamp) / 1000));
+    if (seconds < 60) return `${seconds}s`;
+    let minutes = Math.floor(seconds / 60);
+    let remainingSeconds = seconds % 60;
+    if (minutes < 60) return `${minutes}m ${remainingSeconds}s`;
+    let hours = Math.floor(minutes / 60);
+    let remainingMinutes = minutes % 60;
+    return `${hours}h ${remainingMinutes}m`;
+  }
+
+  async _copyMessageText(text, btn) {
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        this._copyTextFallback(text);
+      }
+      this._flashCopyButton(btn, 'check');
+      emit(this, 'message-copy', { text, ok: true });
+    } catch {
+      if (this._copyTextFallback(text)) {
+        this._flashCopyButton(btn, 'check');
+        emit(this, 'message-copy', { text, ok: true });
+      } else {
+        this._flashCopyButton(btn, 'error');
+        emit(this, 'message-copy', { text, ok: false });
+      }
+    }
+  }
+
+  _copyTextFallback(text) {
+    let ta = document.createElement('textarea');
+    ta.value = text;
+    ta.setAttribute('readonly', '');
+    ta.style.position = 'fixed';
+    ta.style.left = '-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand('copy');
+    } catch {
+      ok = false;
+    }
+    ta.remove();
+    return ok;
+  }
+
+  _flashCopyButton(btn, iconName) {
+    if (!btn) return;
+    let icon = btn.querySelector('.material-symbols-outlined');
+    let original = icon?.textContent || 'content_copy';
+    btn.classList.add(iconName === 'check' ? 'copied' : 'copy-error');
+    if (icon) icon.textContent = iconName;
+    setTimeout(() => {
+      btn.classList.remove('copied', 'copy-error');
+      if (icon) icon.textContent = original;
+    }, 1200);
+  }
+}
+
+ChatTranscript.template = html`
+<div ref="chatMessages" class="chat-messages" ${{ itemize: 'messageItems', 'item-tag': 'chat-message-item', onscroll: 'onScroll' }}></div>
+<button class="scroll-bottom-btn" ref="scrollBottomBtn" title="Scroll to bottom" ${{ onclick: 'onScrollToBottom' }}>
+  <span class="material-symbols-outlined">arrow_downward</span>
+</button>
+`;
+
+ChatTranscript.rootStyles = css;
+ChatTranscript.reg('chat-transcript');