symbiote-ui 0.3.0-alpha.4

package/chat/ChatComposer/ChatComposer.js

@@ -0,0 +1,304 @@
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import '../../control/Button/Button.js';
+import { translate } from '../../locale/index.js';
+import css from './ChatComposer.css.js';
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+export class ChatComposer extends Symbiote {
+  init$ = {
+    value: '',
+    disabled: false,
+    placeholder: translate('chat.composer.placeholder'),
+    voiceCommandToggleOffTitle: translate('chat.composer.voiceCommandToggleOff', { command: translate('chat.composer.voiceCommandDefault') }),
+    voiceCommandToggleOnTitle: translate('chat.composer.voiceCommandToggleOn', { command: translate('chat.composer.voiceCommandDefault') }),
+    voiceCommandToggleLabel: translate('chat.composer.voiceCommandToggleLabel', { command: translate('chat.composer.voiceCommandDefault') }),
+    attachedContext: [],
+    footerHtml: '',
+    isSending: false,
+
+    onInput: (event) => {
+      let input = event.target;
+      this.$.value = input.value;
+      this.resizeInput();
+      emit(this, 'chat-composer-input', {
+        value: input.value,
+        selectionStart: input.selectionStart,
+      });
+    },
+
+    onKeyDown: (event) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        emit(this, 'chat-composer-submit');
+        return;
+      }
+      if (event.key === 'Escape' || event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Tab') {
+        emit(this, 'chat-composer-key', { key: event.key, event });
+      }
+    },
+
+    onSend: () => {
+      emit(this, 'chat-composer-send');
+    },
+
+    onVoiceApprove: () => {
+      emit(this, 'chat-composer-voice-approve');
+    },
+
+    onVoiceCancel: () => {
+      emit(this, 'chat-composer-voice-cancel');
+    },
+
+    onVoiceSend: () => {
+      emit(this, 'chat-composer-voice-send');
+    },
+
+    onVoiceCommandToggle: () => {
+      emit(this, 'chat-composer-voice-command-toggle');
+    },
+
+    onParamChange: (event) => {
+      let el = event.target;
+      if (!el || (!el.classList.contains('composer-footer-select') && !el.classList.contains('composer-footer-checkbox'))) return;
+      emit(this, 'chat-composer-param-change', {
+        id: el.dataset.param,
+        value: el.type === 'checkbox' ? el.checked : el.value,
+        inputType: el.type,
+      });
+    },
+
+    onRemoveContext: (event) => {
+      emit(this, 'chat-composer-context-remove', {
+        key: event.currentTarget?.dataset?.key,
+      });
+    },
+
+    onDragOver: (event) => {
+      event.preventDefault();
+      this.classList.add('drag-over');
+    },
+
+    onDragLeave: () => {
+      this.classList.remove('drag-over');
+    },
+
+    onDrop: (event) => {
+      event.preventDefault();
+      this.classList.remove('drag-over');
+      let path = event.dataTransfer?.getData('text/plain');
+      if (path && path.trim()) {
+        emit(this, 'chat-composer-context-drop', { path: path.trim() });
+      }
+    },
+  };
+
+  renderCallback() {
+    this.sub('value', (value) => {
+      let input = this.getInputElement();
+      if (input && input.value !== value) {
+        input.value = value || '';
+        this.resizeInput();
+      }
+    });
+    this.sub('isSending', () => this._syncSendingState());
+    this.sub('disabled', () => this._syncDisabledState());
+    queueMicrotask(() => {
+      this._syncSendingState();
+      this._syncDisabledState();
+    });
+  }
+
+  getInputElement() {
+    return this.ref.chatInput || null;
+  }
+
+  getAutocompleteElement() {
+    return this.ref.autocompletePopup || null;
+  }
+
+  getParamControls() {
+    return [...(this.ref.footer?.querySelectorAll('.composer-footer-select, .composer-footer-checkbox') || [])];
+  }
+
+  getVoicePreviewElement() {
+    return this.ref.voicePreview || null;
+  }
+
+  getVoicePreviewBody() {
+    return this.ref.voicePreviewBody || null;
+  }
+
+  setValue(value) {
+    this.$.value = value || '';
+  }
+
+  setAttachedContext(items) {
+    this.$.attachedContext = Array.isArray(items) ? items : [];
+  }
+
+  setFooterHtml(htmlStr) {
+    this.$.footerHtml = htmlStr || '';
+  }
+
+  setDisabled(disabled) {
+    this.$.disabled = Boolean(disabled);
+  }
+
+  setPlaceholder(placeholder) {
+    this.$.placeholder = placeholder || '';
+  }
+
+  setSending(active) {
+    this.$.isSending = Boolean(active);
+  }
+
+  setVoicePreview({ mode = 'recording', text = '', status = '', elapsed = false, editable = false, commandMode = false, commandPhrase = '' } = {}) {
+    let preview = this.ref.voicePreview;
+    let statusEl = this.ref.voicePreviewStatus;
+    let body = this.ref.voicePreviewBody;
+    if (!preview || !body || !statusEl) return;
+
+    preview.hidden = false;
+    preview.className = `composer-body voice-preview ${mode}`;
+    statusEl.textContent = status || '';
+    statusEl.hidden = !status;
+    statusEl.classList.toggle('voice-preview-elapsed', Boolean(elapsed));
+    body.textContent = text || '';
+    body.hidden = !text && mode === 'recording';
+    if (editable) {
+      body.contentEditable = 'true';
+      body.spellcheck = false;
+    } else {
+      body.removeAttribute('contenteditable');
+      body.removeAttribute('spellcheck');
+    }
+
+    if (this.ref.voiceApproveBtn) this.ref.voiceApproveBtn.hidden = mode !== 'recording';
+    if (this.ref.voiceCancelBtn) this.ref.voiceCancelBtn.hidden = false;
+    if (this.ref.voiceSendBtn) this.ref.voiceSendBtn.hidden = mode !== 'result';
+    if (this.ref.voiceCommandToggleBtn) {
+      let active = Boolean(commandMode);
+      let command = commandPhrase || translate('chat.composer.voiceCommandDefault');
+      let title = active
+        ? translate('chat.composer.voiceCommandToggleOn', { command })
+        : translate('chat.composer.voiceCommandToggleOff', { command });
+      let label = translate('chat.composer.voiceCommandToggleLabel', { command });
+      this.ref.voiceCommandToggleBtn.hidden = mode !== 'recording';
+      this.ref.voiceCommandToggleBtn.classList.toggle('active', active);
+      this.ref.voiceCommandToggleBtn.setAttribute('aria-pressed', active ? 'true' : 'false');
+      this.ref.voiceCommandToggleBtn.setAttribute('aria-label', title);
+      this.ref.voiceCommandToggleBtn.title = title;
+      let icon = this.ref.voiceCommandToggleBtn.querySelector('.material-symbols-outlined');
+      if (icon) icon.textContent = active ? 'toggle_on' : 'toggle_off';
+      if (this.ref.voiceCommandToggleText) this.ref.voiceCommandToggleText.textContent = label;
+    }
+  }
+
+  clearVoicePreview() {
+    let preview = this.ref.voicePreview;
+    let statusEl = this.ref.voicePreviewStatus;
+    let body = this.ref.voicePreviewBody;
+    if (!preview || !body || !statusEl) return;
+    preview.hidden = true;
+    preview.className = 'composer-body voice-preview';
+    statusEl.textContent = '';
+    statusEl.hidden = true;
+    statusEl.classList.remove('voice-preview-elapsed');
+    body.textContent = '';
+    body.hidden = false;
+    body.removeAttribute('contenteditable');
+    body.removeAttribute('spellcheck');
+    if (this.ref.voiceCommandToggleBtn) {
+      this.ref.voiceCommandToggleBtn.hidden = true;
+      this.ref.voiceCommandToggleBtn.classList.remove('active');
+      this.ref.voiceCommandToggleBtn.setAttribute('aria-pressed', 'false');
+      this.ref.voiceCommandToggleBtn.setAttribute('aria-label', this.$.voiceCommandToggleOffTitle);
+      this.ref.voiceCommandToggleBtn.title = this.$.voiceCommandToggleOffTitle;
+      let icon = this.ref.voiceCommandToggleBtn.querySelector('.material-symbols-outlined');
+      if (icon) icon.textContent = 'toggle_off';
+      if (this.ref.voiceCommandToggleText) this.ref.voiceCommandToggleText.textContent = this.$.voiceCommandToggleLabel;
+    }
+  }
+
+  resizeInput() {
+    let input = this.getInputElement();
+    if (!input) return;
+    input.style.height = 'auto';
+    input.style.height = `${Math.min(input.scrollHeight, 200)}px`;
+  }
+
+  resetInputHeight() {
+    let input = this.getInputElement();
+    if (input) input.style.height = 'auto';
+  }
+
+  _syncSendingState() {
+    let btn = this.ref.btnSend;
+    let icon = this.ref.sendIcon;
+    if (!btn || !icon) return;
+    if (this.$.isSending) {
+      btn.classList.add('btn-stop');
+      icon.textContent = 'stop';
+    } else {
+      btn.classList.remove('btn-stop');
+      icon.textContent = 'arrow_upward';
+    }
+  }
+
+  _syncDisabledState() {
+    let input = this.getInputElement();
+    if (input) input.disabled = Boolean(this.$.disabled);
+    if (this.ref.btnSend) this.ref.btnSend.disabled = Boolean(this.$.disabled);
+  }
+}
+
+ChatComposer.template = html`
+<div ${{ ondragover: 'onDragOver', ondragleave: 'onDragLeave', ondrop: 'onDrop' }}>
+  <div class="chat-context-bar" itemize="attachedContext">
+    <div class="context-chip" title="{{title}}">
+      <span class="material-symbols-outlined icon-sm">{{icon}}</span>
+      <span class="context-path">{{name}}</span>
+      <sn-button class="context-remove" variant="icon" ${{ '@data-key': 'key', onclick: '^onRemoveContext' }}>
+        <span class="material-symbols-outlined">close</span>
+      </sn-button>
+    </div>
+  </div>
+  <div class="composer-body voice-preview" ref="voicePreview" hidden>
+    <div class="voice-preview-content">
+      <div class="voice-preview-status voice-preview-elapsed" ref="voicePreviewStatus" hidden></div>
+      <div class="voice-preview-body" ref="voicePreviewBody"></div>
+    </div>
+    <div class="voice-preview-actions">
+      <sn-button class="voice-preview-btn command-toggle" ref="voiceCommandToggleBtn" aria-pressed="false" ${{ title: 'voiceCommandToggleOffTitle', '@aria-label': 'voiceCommandToggleOffTitle', onclick: 'onVoiceCommandToggle' }}>
+        <span class="material-symbols-outlined">toggle_off</span>
+        <span class="voice-command-toggle-text" ref="voiceCommandToggleText" ${{ textContent: 'voiceCommandToggleLabel' }}></span>
+      </sn-button>
+      <sn-button class="voice-preview-btn cancel" ref="voiceCancelBtn" variant="danger" title="Cancel" ${{ onclick: 'onVoiceCancel' }}>
+        <span class="material-symbols-outlined">close</span>
+      </sn-button>
+      <sn-button class="voice-preview-btn approve" ref="voiceApproveBtn" variant="success" title="Approve and send" ${{ onclick: 'onVoiceApprove' }}>
+        <span class="material-symbols-outlined">check</span>
+      </sn-button>
+      <sn-button class="voice-preview-btn send" ref="voiceSendBtn" variant="success" title="Send" ${{ onclick: 'onVoiceSend' }}>
+        <span class="material-symbols-outlined">send</span>
+      </sn-button>
+    </div>
+  </div>
+  <div class="composer-body">
+    <textarea ref="chatInput" rows="1"
+      ${{ value: 'value', disabled: 'disabled', placeholder: 'placeholder',
+          oninput: 'onInput', onkeydown: 'onKeyDown' }}></textarea>
+    <sn-button class="btn-send" ref="btnSend" variant="icon" ${{ onclick: 'onSend' }}>
+      <span class="material-symbols-outlined" ref="sendIcon">arrow_upward</span>
+    </sn-button>
+  </div>
+  <div class="composer-footer" ref="footer" ${{ innerHTML: 'footerHtml', onchange: 'onParamChange' }}></div>
+  <div class="autocomplete-popup" ref="autocompletePopup"></div>
+</div>
+`;
+
+ChatComposer.rootStyles = css;
+ChatComposer.reg('chat-composer');

package/chat/ChatList/ChatList.css.js

@@ -0,0 +1,102 @@
+export default /*css*/ `
+:host,
+chat-list {
+  display: block;
+}
+
+.chat-list {
+  width: 100%;
+  border-right: none;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--sn-node-bg);
+  color: var(--sn-text);
+  overflow: hidden;
+}
+
+.chat-list-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--sn-node-border);
+  flex-shrink: 0;
+}
+
+.chat-list-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--sn-text);
+}
+
+.chat-list-content {
+  min-height: 0;
+  overflow: auto;
+}
+
+.chat-list-icon {
+  font-size: 16px;
+}
+
+.chat-list-empty-icon {
+  display: block;
+  margin-block-end: 8px;
+  font-size: 32px;
+  opacity: 0.3;
+}
+
+.chat-list-title {
+  flex: none;
+}
+
+.chat-list-new-btn {
+  margin-left: auto;
+}
+
+.chat-list-new-btn-icon {
+  font-size: 14px;
+}
+
+.chat-list-items {
+  padding: 4px 0;
+}
+
+.chat-list-filter-bar {
+  display: flex;
+  gap: 4px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--sn-node-border);
+  flex-shrink: 0;
+}
+
+.chat-list-filter-btn {
+  --sn-button-bg: transparent;
+  --sn-button-border: transparent;
+  --sn-button-color: var(--sn-text-dim);
+  --sn-button-hover-bg: transparent;
+  --sn-button-hover-border: transparent;
+  --sn-button-padding: 3px 8px;
+  --sn-button-radius: 4px;
+  --sn-button-min-height: 24px;
+  --sn-button-font-size: 11px;
+  --sn-button-font-weight: 500;
+  color: var(--sn-text-dim);
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+.chat-list-filter-btn:hover {
+  color: var(--sn-text);
+}
+
+.chat-list-filter-btn[active] {
+  --sn-button-bg: var(--sn-node-bg);
+  --sn-button-border: var(--sn-node-border);
+  color: var(--sn-text);
+}
+`;

package/chat/ChatList/ChatList.js

@@ -0,0 +1,99 @@
+import Symbiote from '@symbiotejs/symbiote';
+import '../ChatListItem/ChatListItem.js';
+import '../../control/Button/Button.js';
+import '../../display/EmptyState/EmptyState.js';
+import template from './ChatList.tpl.js';
+import css from './ChatList.css.js';
+import { translate } from '../../locale/index.js';
+
+export class ChatList extends Symbiote {
+  init$ = {
+    filter: 'all',
+    chatItems: [],
+    title: translate('chat.list.title'),
+    newLabel: translate('chat.list.new'),
+    emptyMessage: translate('chat.list.empty'),
+    filterAllLabel: translate('chat.list.filter.all'),
+    filterProjectLabel: translate('chat.list.filter.project'),
+    filterActiveLabel: translate('chat.list.filter.active'),
+    onFilterClick: (event) => {
+      this.setFilter(event.currentTarget?.dataset?.filter || 'all');
+    },
+    onNewChat: () => {
+      this.dispatchEvent(new CustomEvent('chat-list-new', { bubbles: true, composed: true }));
+    },
+    onChatSelect: (event) => {
+      let item = this.getChatItemHost(event);
+      if (!item?.$.id) return;
+      this.dispatchEvent(new CustomEvent('chat-list-select', {
+        bubbles: true,
+        composed: true,
+        detail: { id: item.$.id, item },
+      }));
+    },
+    onChatDelete: (event) => {
+      event.stopPropagation();
+      let item = this.getChatItemHost(event);
+      if (!item?.$.id) return;
+      this.dispatchEvent(new CustomEvent('chat-list-delete', {
+        bubbles: true,
+        composed: true,
+        detail: { id: item.$.id, item },
+      }));
+    },
+  };
+
+  renderCallback() {
+    this.sub('filter', () => this.syncFilterButtons());
+    this.syncFilterButtons();
+  }
+
+  setItems(items = []) {
+    this.$.chatItems = Array.isArray(items) ? items : [];
+    this.renderEmptyState();
+  }
+
+  setEmptyMessage(message) {
+    this.$.emptyMessage = message || '';
+    this.renderEmptyState();
+  }
+
+  setFilter(filter = 'all') {
+    this.$.filter = filter || 'all';
+    this.dispatchEvent(new CustomEvent('chat-list-filter', {
+      bubbles: true,
+      composed: true,
+      detail: { filter: this.$.filter },
+    }));
+  }
+
+  getChatItemHost(event) {
+    return event.composedPath?.().find((el) => el?.tagName?.toLowerCase() === 'chat-list-item')
+      || event.target?.closest?.('chat-list-item')
+      || event.target?.getRootNode?.().host;
+  }
+
+  renderEmptyState() {
+    let container = this.ref.items;
+    if (!container || this.$.chatItems.length > 0) return;
+    let empty = document.createElement('sn-empty-state');
+    let icon = document.createElement('span');
+    icon.className = 'material-symbols-outlined chat-list-empty-icon';
+    icon.textContent = 'chat_bubble_outline';
+    empty.appendChild(icon);
+    empty.append(this.$.emptyMessage);
+    container.replaceChildren(empty);
+  }
+
+  syncFilterButtons() {
+    this.querySelectorAll('.chat-list-filter-btn').forEach((button) => {
+      button.toggleAttribute('active', button.dataset.filter === this.$.filter);
+    });
+  }
+}
+
+ChatList.template = template;
+ChatList.rootStyles = css;
+ChatList.reg('chat-list');
+
+export default ChatList;

package/chat/ChatList/ChatList.tpl.js

@@ -0,0 +1,20 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<div class="chat-list-shell chat-list">
+  <div class="chat-list-header">
+    <span class="material-symbols-outlined chat-list-icon">forum</span>
+    <span class="chat-list-title" ${{ textContent: 'title' }}></span>
+    <sn-button class="chat-list-new-btn" ${{ onclick: 'onNewChat' }}>
+      <span class="material-symbols-outlined chat-list-new-btn-icon">add</span>
+      <span ${{ textContent: 'newLabel' }}></span>
+    </sn-button>
+  </div>
+  <div class="chat-list-filter-bar">
+    <sn-button class="chat-list-filter-btn" active data-filter="all" ${{ onclick: 'onFilterClick', textContent: 'filterAllLabel' }}></sn-button>
+    <sn-button class="chat-list-filter-btn" data-filter="project" ${{ onclick: 'onFilterClick', textContent: 'filterProjectLabel' }}></sn-button>
+    <sn-button class="chat-list-filter-btn" data-filter="active" ${{ onclick: 'onFilterClick', textContent: 'filterActiveLabel' }}></sn-button>
+  </div>
+  <div class="chat-list-content chat-list-items" ref="items" ${{ itemize: 'chatItems', 'item-tag': 'chat-list-item' }}></div>
+</div>
+`;

package/chat/ChatListItem/ChatListItem.css.js

@@ -0,0 +1,117 @@
+export default /*css*/ `
+:host,
+chat-list-item {
+  display: block;
+}
+
+.chat-list-item {
+  padding: 10px 14px;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-bottom: 1px solid var(--sn-node-hover);
+  transition: background 0.15s;
+}
+
+.chat-list-item:hover {
+  background: var(--sn-node-hover);
+}
+
+:host([active]) .chat-list-item,
+chat-list-item[active] .chat-list-item {
+  background: var(--sn-node-bg);
+  border-left: 3px solid var(--sn-node-selected);
+  padding-left: 11px;
+}
+
+.chat-item-top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+:host([nested]) .chat-list-item,
+chat-list-item[nested] .chat-list-item {
+  margin-left: 16px;
+  border-left: 2px solid var(--sn-node-border);
+  position: relative;
+}
+
+:host([nested]) .chat-list-item::before,
+chat-list-item[nested] .chat-list-item::before {
+  content: '';
+  position: absolute;
+  top: 14px;
+  left: -2px;
+  width: 10px;
+  height: 2px;
+  background: var(--sn-node-border);
+}
+
+.chat-project-badge {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--sn-node-selected) 18%, transparent);
+  color: var(--sn-node-selected);
+  text-transform: uppercase;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+.chat-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sn-text);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-adapter {
+  font-size: 10px;
+  color: var(--sn-text-dim);
+  font-family: var(--sn-font-mono, monospace);
+}
+
+.chat-preview {
+  font-size: 11px;
+  color: var(--sn-text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.chat-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  color: var(--sn-text-dim);
+}
+
+.chat-delete {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--sn-text-dim);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 2px;
+  margin-left: auto;
+  transition: color 0.15s;
+}
+
+.chat-list-item:hover .chat-delete {
+  display: inline;
+}
+
+.chat-delete:hover {
+  color: var(--sn-danger-color);
+}
+`;

package/chat/ChatListItem/ChatListItem.js

@@ -0,0 +1,32 @@
+import Symbiote from '@symbiotejs/symbiote';
+import template from './ChatListItem.tpl.js';
+import css from './ChatListItem.css.js';
+
+export class ChatListItem extends Symbiote {
+  init$ = {
+    id: '',
+    name: '',
+    project: '',
+    adapter: '',
+    status: '',
+    time: '',
+    lastMessage: '',
+    depth: 0,
+    isActive: false,
+  };
+
+  renderCallback() {
+    this.sub('isActive', (isActive) => {
+      this.toggleAttribute('active', Boolean(isActive));
+    });
+    this.sub('depth', (depth) => {
+      this.toggleAttribute('nested', Number(depth) > 0);
+    });
+  }
+}
+
+ChatListItem.template = template;
+ChatListItem.rootStyles = css;
+ChatListItem.reg('chat-list-item');
+
+export default ChatListItem;

package/chat/ChatListItem/ChatListItem.tpl.js

@@ -0,0 +1,17 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<div class="chat-list-item" ref="item" ${{ onclick: '^onChatSelect' }}>
+  <div class="chat-item-top">
+    <span class="chat-project-badge" ${{ textContent: 'project', hidden: '!project' }}></span>
+    <span class="chat-name" ${{ textContent: 'name' }}></span>
+    <span class="chat-adapter" ${{ textContent: 'adapter' }}></span>
+    <button class="chat-delete" title="Delete" ${{ onclick: '^onChatDelete' }}>×</button>
+  </div>
+  <div class="chat-preview" ${{ textContent: 'lastMessage', hidden: '!lastMessage' }}></div>
+  <div class="chat-meta">
+    <span ${{ textContent: 'status' }}></span>
+    <span ${{ textContent: 'time' }}></span>
+  </div>
+</div>
+`;