@clowder-ai/companion 0.1.0-alpha.21 → 0.1.0-alpha.25

package/renderer/conversation-surface.mjs

@@ -0,0 +1,178 @@
+import { explainError } from './errors.mjs';
+import { ConversationHistory } from './conversation-history.mjs';
+import { HostConversationDraft } from './conversation-draft.mjs';
+import { ReplyLetterController } from './reply-letter-controller.mjs';
+import { ReplyLetterView } from './reply-letter-view.mjs';
+
+/** Owns the chat panel's history, durable draft and reply-letter interaction. */
+export class ConversationSurface {
+  constructor({ document, client, controls, bubble, transcript, getCallPhase,
+    onAccepted, retryLegacy, status, scheduleInterval = setInterval,
+    cancelInterval = clearInterval }) {
+    this.$ = id => document.getElementById(id);
+    Object.assign(this, { client, controls, bubble, transcript, getCallPhase,
+      onAccepted, retryLegacy, status });
+    this.scheduleInterval = (...args) => Reflect.apply(scheduleInterval, globalThis, args);
+    this.cancelInterval = (...args) => Reflect.apply(cancelInterval, globalThis, args);
+    this.loading = false;
+    this.bodyReads = new Set();
+    this.replyMode = 'idle';
+    this.controller = new ReplyLetterController({
+      requestContinuation: value => void this.readBody(value.messageId, value.continuation),
+      render: value => this.renderReply(value),
+    });
+    this.view = new ReplyLetterView({
+      document,
+      controller: this.controller,
+      retry: draft => void (draft.submissionRevision === undefined
+        ? this.retryLegacy(draft.text) : this.draft.retry(draft)),
+    });
+    this.lastRenderedDraft = '';
+    this.draft = new HostConversationDraft({
+      client,
+      changed: value => this.renderDraft(value),
+      delivery: value => {
+        this.controller.recordDelivery(value.receipt, value.text, value);
+        void this.readHistory();
+      },
+      invalidated: value => this.controller.invalidateDraft(value),
+    });
+    this.history = new ConversationHistory({ changed: value => this.renderHistory(value) });
+    this.bind();
+  }
+
+  bind() {
+    this.$('message').addEventListener('input', () => this.draft.update(this.$('message').value));
+    this.$('history').onclick = () => void this.client.openConversation().then(result => {
+      if (result.delivery === 'unconfirmed') this.status('打开聊天尚未确认 · 请从 Clowder 查看');
+    }).catch(error => this.status(explainError(error)));
+    this.$('reply-history-open').addEventListener('click', () => {
+      void this.controls.show('chat');
+      void this.readHistory();
+    });
+    this.$('reply-return-latest').addEventListener('click', () => {
+      this.$('chat-transcript').scrollTop = this.$('chat-transcript').scrollHeight;
+    });
+    this.$('chat-transcript').addEventListener('scroll', () => {
+      if (this.controller.mode === 'history' && this.$('chat-transcript').scrollTop < 24) {
+        void this.readOlderHistory();
+      }
+    });
+    this.$('compose').onsubmit = event => this.submit(event);
+  }
+
+  renderReply(value) {
+    const previous = this.replyMode;
+    this.replyMode = value.mode;
+    this.view.render(value);
+    this.controls.remeasure?.();
+    if (value.mode === 'reply' && previous !== 'reply' && this.controls.panel !== 'chat') {
+      void this.controls.show('chat');
+    }
+    if (value.mode === 'idle' && previous === 'reply' && this.controls.panel === 'chat') {
+      void this.controls.show('none');
+    }
+  }
+
+  renderDraft(value) {
+    const input = this.$('message');
+    if (input.value !== this.lastRenderedDraft && input.value !== value.localText) {
+      this.draft.update(input.value);
+      return;
+    }
+    input.value = value.localText;
+    this.lastRenderedDraft = value.localText;
+    this.controller.setDraftNotice(value.status);
+  }
+
+  renderHistory(value) {
+    this.threadTitle = value.threadTitle || this.threadTitle;
+    if (this.threadTitle) this.$('chat-name').textContent = this.threadTitle;
+    this.bubble.load(value.messages);
+    this.transcript.load(value.messages);
+    this.controller.loadHistory(value.messages);
+    this.$('history').textContent = value.hasMoreOlder
+      ? '在 Cat Café 中查看更早聊天 ↗' : '在 Cat Café 中查看完整聊天 ↗';
+  }
+
+  openWrite(callActive) {
+    if (callActive) this.controller.openHistory();
+    else this.controller.openCompose();
+  }
+
+  closeHistory() {
+    if (this.controller.mode === 'history') this.controller.close();
+  }
+
+  openHistory() { this.controller.openHistory(); }
+
+  async submit(event) {
+    event.preventDefault();
+    this.draft.update(this.$('message').value);
+    const receipt = await this.draft.submit();
+    if (receipt?.delivery !== 'accepted') return;
+    this.onAccepted();
+    void this.readHistory();
+  }
+
+  async readHistory({ before, older = false } = {}) {
+    if (this.loading) return;
+    this.loading = true;
+    try {
+      const page = await this.client.readConversationPage(before === undefined ? {} : { before });
+      this.history.loadPage(page, { older });
+      void this.controls.setAmbient(this.getCallPhase() === 'idle' ? 'none' : 'actions');
+      this.$('chat-connection-status').textContent = page.status === 'stale'
+        ? '聊天位置已变化 · 请重新往上翻' : '';
+    } catch (error) {
+      if (error?.code === 'permission_required') {
+        this.history.clearProtected('permission_required');
+        this.controller.clearProtected('permission_required');
+        this.$('chat-connection-status').textContent = '聊天权限已撤销';
+      } else this.$('chat-connection-status').textContent = '聊天记录暂未更新 · 正在说的话仍会显示';
+    } finally { this.loading = false; }
+  }
+
+  async readOlderHistory() {
+    const { hasMoreOlder, olderCursor } = this.history.snapshot();
+    if (!hasMoreOlder || !olderCursor) return;
+    await this.readHistory({ before: olderCursor, older: true });
+  }
+
+  async readBody(messageId, continuation) {
+    if (this.bodyReads.has(continuation) || this.history.bodyContinuation(messageId) !== continuation) return;
+    this.bodyReads.add(continuation);
+    try {
+      const result = await this.client.readConversationBody(continuation);
+      this.history.applyBody(continuation, result);
+      if (result.status === 'stale') {
+        this.controller.releaseContinuation(messageId, continuation);
+        this.$('chat-connection-status').textContent = '回复正文已变化 · 正在重新读取';
+        void this.readHistory();
+      }
+      if (result.status === 'withdrawn') this.controller.withdrawReply(messageId);
+    } catch (error) {
+      if (error?.code === 'permission_required') {
+        this.history.clearProtected('permission_required');
+        this.controller.clearProtected('permission_required');
+        this.$('chat-connection-status').textContent = '聊天权限已撤销';
+      } else {
+        this.controller.releaseContinuation(messageId, continuation);
+        this.$('chat-connection-status').textContent = '完整回复暂未读完 · 稍后重试';
+      }
+    } finally { this.bodyReads.delete(continuation); }
+  }
+
+  start() {
+    void this.readHistory();
+    void this.draft.load();
+    this.historyMonitor = this.scheduleInterval(() => void this.readHistory(), 3000);
+    this.draftMonitor = this.scheduleInterval(() => void this.draft.load(), 3000);
+  }
+
+  close() {
+    this.cancelInterval(this.historyMonitor);
+    this.cancelInterval(this.draftMonitor);
+    this.draft.close();
+  }
+}

package/renderer/conversation.mjs

@@ -2,8 +2,9 @@ import { explainError } from './errors.mjs';
 
 /** Local controls only. Durable messages, identity and preferences belong to the Host. */
 export class CompanionConversation {
-  constructor({ client, createPeer, render, transcript, stopScreen, uuid = () => crypto.randomUUID() }) {
-    Object.assign(this, { client, createPeer, render, transcript, stopScreen, uuid });
+  constructor({ client, createPeer, render, transcript, delivery = () => {}, stopScreen,
+    uuid = () => crypto.randomUUID() }) {
+    Object.assign(this, { client, createPeer, render, transcript, delivery, stopScreen, uuid });
     this.active = false;
     this.generation = 0;
     this.phase = 'idle';
@@ -219,10 +220,15 @@ export class CompanionConversation {
     try {
       const receipt = await this.client.text(input.text, input.id);
       if (receipt?.delivery !== 'accepted') {
+        this.reportDelivery(input, receipt ?? {
+          kind: 'delivery', delivery: 'unconfirmed', clientMessageId: input.id,
+          messageId: null, callId: null,
+        });
         if (generation === this.generation) this.show(explainError({ code: 'unconfirmed' }));
         return false;
       }
       if (this.pendingText === input) this.pendingText = undefined;
+      this.reportDelivery(input, receipt);
       // Voice may have ended; an accepted message still retires this draft.
       // Keep the newer voice status rather than announcing that we are listening.
       if (generation !== this.generation) return true;
@@ -230,10 +236,18 @@ export class CompanionConversation {
       this.show(this.active ? this.listening() : '已发送 · 回答会留在同一段聊天中');
       return true;
     } catch (error) {
+      if (error?.code === 'unconfirmed') this.reportDelivery(input, {
+        kind: 'delivery', delivery: 'unconfirmed', clientMessageId: input.id,
+        messageId: null, callId: null,
+      });
       if (generation === this.generation) this.show(explainError(error));
       return false;
     } finally { this.sending = false; }
   }
+  reportDelivery(input, receipt) {
+    try { this.delivery({ text: input.text, receipt }); }
+    catch { /* Presentation failures cannot change Host delivery truth. */ }
+  }
   muteMic() {
     if (this.audioMode === 'receive_only') return;
     this.muted = !this.muted; this.peer?.muteMic(this.muted);

package/renderer/index.html

@@ -49,6 +49,7 @@
     </section>
     <section id="actions" class="floating call-bar" aria-label="当前通话" hidden>
       <div class="call-status-line"><span class="status-dot" aria-hidden="true"></span><strong id="call-state">通话中</strong><span id="call-mic-state">麦克风已开启</span></div>
+      <p id="call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="call-meeting-label" class="meeting-label"></span><span id="call-meeting-source" class="meeting-source" hidden></span></p>
       <p id="call-work" class="call-work" hidden></p>
       <div id="call-share-context" class="call-share-context" hidden><svg class="icon" aria-hidden="true"><use href="#i-screen"/></svg><span><strong id="call-share-target"></strong><small>仅共享此窗口</small></span></div>
       <div class="call-recent" aria-label="最新消息">
@@ -67,6 +68,7 @@
     <section id="menu" class="floating name-card" aria-label="猫猫名片" hidden>
       <div id="menu-call-context" class="call-context" hidden>
         <span class="status-dot" aria-hidden="true"></span><strong id="menu-call-state"></strong><span id="menu-call-mic-state"></span>
+        <small id="menu-call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="menu-call-meeting-label" class="meeting-label"></span><span id="menu-call-meeting-source" class="meeting-source" hidden></span></small>
         <small id="menu-call-work" hidden></small>
         <div id="menu-call-actions" class="call-context-actions menu-call-actions">
           <button id="menu-mic" data-action="mute" aria-label="静音"><svg class="icon" aria-hidden="true"><use id="menu-mic-icon" href="#i-mic"/></svg></button>
@@ -111,19 +113,38 @@
     <section id="chat" class="floating" aria-label="和猫猫写几句" hidden>
       <div id="chat-call-context" class="call-context" hidden>
         <span class="status-dot" aria-hidden="true"></span><strong id="chat-call-state"></strong><span id="chat-call-mic-state"></span>
+        <small id="chat-call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="chat-call-meeting-label" class="meeting-label"></span><span id="chat-call-meeting-source" class="meeting-source" hidden></span></small>
         <small id="chat-call-work" hidden></small>
-        <div class="call-context-actions"><button id="chat-mic" data-action="mute">静音</button><button id="chat-share" data-action="share"><span class="label">共享画面</span></button><button data-action="stop" class="destructive compact">挂断</button></div>
+        <div class="call-context-actions call-context-inline-actions"><button id="chat-mic" data-action="mute">静音</button><button id="chat-share" data-action="share"><span class="label">共享画面</span></button><button data-action="stop" class="destructive compact">挂断</button></div>
         <div id="chat-share-context" class="call-share-line" hidden><svg class="icon" aria-hidden="true"><use href="#i-screen"/></svg><span><strong id="chat-share-target"></strong><small>仅共享此窗口</small></span></div>
       </div>
-      <header><strong id="chat-name">和猫猫写几句</strong><button data-action="dismiss" aria-label="收起文字">收起</button></header>
+      <header id="chat-history-header"><strong id="chat-name">和猫猫写几句</strong><button data-action="dismiss" aria-label="收起文字">收起</button></header>
       <div id="chat-transcript" role="log" aria-live="polite"><p class="empty">想说什么，就写在这里。</p></div>
-      <form id="compose"><textarea id="message" aria-label="给猫猫输入消息" placeholder="输入消息…" rows="2" maxlength="8000"></textarea><button type="submit" class="primary">发送</button></form>
-      <small id="chat-status" role="status"></small>
-      <small><span id="connection-scope">语音与文字共用同一段聊天</span> <button id="history">在 Cat Café 中查看完整聊天 ↗</button></small>
+      <button id="reply-return-latest" class="reply-return-latest" type="button" hidden>回到最新 ↓</button>
+      <div id="reply-sent" class="reply-sent" tabindex="-1" hidden>
+        <svg viewBox="0 0 36 27" aria-hidden="true"><rect x="1" y="1" width="34" height="25" rx="4"/><path d="M2.5 3.5 18 15 33.5 3.5"/></svg>
+        <span><strong id="reply-sent-status">已发送</strong><small id="reply-letter-text"></small></span>
+      </div>
+      <article id="reply-card" class="reply-card" hidden tabindex="-1">
+        <div class="reply-head"><span id="reply-input-text" class="reply-input-text"></span>
+          <button id="reply-retain" class="reply-ring" type="button" aria-label="留住回复" title="留住回复">
+            <svg viewBox="0 0 16 16" aria-hidden="true"><circle class="reply-ring-track" cx="8" cy="8" r="6.5"/><circle class="reply-ring-progress" cx="8" cy="8" r="6.5"/></svg>
+          </button>
+          <button id="reply-close" class="reply-close" type="button" aria-label="关闭回复" title="关闭回复" hidden>×</button>
+        </div>
+        <div id="reply-body" class="reply-body"></div>
+        <small id="reply-body-status" class="reply-body-status" role="status"></small>
+        <button id="reply-history-open" class="reply-history-open" type="button">往上翻聊天记录</button>
+      </article>
+      <form id="compose"><textarea id="message" aria-label="给猫猫输入消息" placeholder="输入消息…" rows="1" maxlength="8000"></textarea><button type="submit" class="primary">发送</button></form>
+      <div class="chat-feedback"><small id="chat-status" role="status"></small><button id="reply-retry" type="button" hidden>↻ 重试</button></div>
+      <small id="chat-connection-status" role="status"></small>
+      <small id="chat-scope"><span id="connection-scope">语音与文字共用同一段聊天</span> <button id="history">在 Cat Café 中查看完整聊天 ↗</button></small>
     </section>
     <section id="transcript" class="floating call-transcript" data-expanded="false" aria-label="这次通话的字幕" hidden>
       <div id="transcript-call-context" class="call-context transcript-call-context">
         <span class="status-dot" aria-hidden="true"></span><strong id="transcript-call-state"></strong><span id="transcript-call-mic-state"></span>
+        <small id="transcript-call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="transcript-call-meeting-label" class="meeting-label"></span><span id="transcript-call-meeting-source" class="meeting-source" hidden></span></small>
         <small id="transcript-call-work" hidden></small>
         <div class="call-context-actions">
           <button id="transcript-return" class="transcript-return" type="button" data-action="transcript-return"><span aria-hidden="true">‹</span><span>返回通话</span></button>
@@ -142,8 +163,9 @@
     <section id="settings" class="floating settings-panel" aria-label="猫猫球设置" hidden>
       <div id="settings-call-context" class="call-context" hidden>
         <span class="status-dot" aria-hidden="true"></span><strong id="settings-call-state"></strong><span id="settings-call-mic-state"></span>
+        <small id="settings-call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="settings-call-meeting-label" class="meeting-label"></span><span id="settings-call-meeting-source" class="meeting-source" hidden></span></small>
         <small id="settings-call-work" hidden></small>
-        <div class="call-context-actions"><button id="settings-mic" data-action="mute">静音</button><button id="settings-share" data-action="share"><span class="label">共享画面</span></button><button data-action="stop" class="destructive compact">挂断</button></div>
+        <div class="call-context-actions call-context-inline-actions"><button id="settings-mic" data-action="mute">静音</button><button id="settings-share" data-action="share"><span class="label">共享画面</span></button><button data-action="stop" class="destructive compact">挂断</button></div>
         <div id="settings-share-context" class="call-share-line" hidden><svg class="icon" aria-hidden="true"><use href="#i-screen"/></svg><span><strong id="settings-share-target"></strong><small>仅共享此窗口</small></span></div>
       </div>
       <header class="settings-head"><button id="settings-back" type="button" aria-label="返回名片">‹</button><strong id="settings-title">设置</strong></header>

package/renderer/meeting-state.mjs

@@ -0,0 +1,55 @@
+export function meetingPresentation(meeting) {
+  if (!meeting || meeting.kind === 'idle') return null;
+  if (meeting.kind === 'running') {
+    if (meeting.paused) return { label: '会议记录已暂停', sourceLabel: meeting.sourceLabel, tone: 'quiet' };
+    return meeting.sharing
+      ? { label: '听会中', sourceLabel: meeting.sourceLabel, tone: 'active' }
+      : { label: '会议记录中 · 未接入通话', sourceLabel: meeting.sourceLabel, tone: 'active' };
+  }
+  if (meeting.kind === 'stopped') return { label: '会议记录已停止', sourceLabel: null, tone: 'quiet' };
+  if (meeting.kind === 'unconfirmed') return { label: '会议记录状态未确认', sourceLabel: null, tone: 'warning' };
+  if (meeting.kind === 'needs_source') return { label: '需要确认会议所在的 App', sourceLabel: null, tone: 'warning' };
+  return null;
+}
+
+const meetingPrefixes = ['call', 'menu-call', 'chat-call', 'transcript-call', 'settings-call'];
+export function renderMeetingStatus(document, presentation) {
+  for (const prefix of meetingPrefixes) {
+    const row = document.getElementById(`${prefix}-meeting`);
+    const source = document.getElementById(`${prefix}-meeting-source`);
+    row.hidden = presentation === null;
+    row.dataset.tone = presentation?.tone ?? '';
+    document.getElementById(`${prefix}-meeting-label`).textContent = presentation?.label ?? '';
+    source.textContent = presentation?.sourceLabel ? ` · ${presentation.sourceLabel}` : '';
+    source.hidden = !presentation?.sourceLabel;
+  }
+}
+
+/** Keeps the stopped acknowledgement transient without hiding uncertain or active capture truth. */
+export class MeetingStatus {
+  constructor({ now = () => Date.now() } = {}) {
+    this.now = now;
+    this.previousKind = null;
+    this.stoppedUntil = 0;
+  }
+
+  update(meeting) {
+    const kind = meeting?.kind ?? 'idle';
+    if (kind === 'idle') {
+      this.previousKind = 'idle';
+      this.stoppedUntil = 0;
+      return null;
+    }
+    if (kind === 'stopped') {
+      if (this.previousKind !== 'stopped') {
+        this.stoppedUntil = this.previousKind !== null && this.previousKind !== 'idle'
+          ? this.now() + 10_000 : 0;
+      }
+      this.previousKind = 'stopped';
+      return this.now() < this.stoppedUntil ? meetingPresentation(meeting) : null;
+    }
+    this.previousKind = kind;
+    this.stoppedUntil = 0;
+    return meetingPresentation(meeting);
+  }
+}

package/renderer/pet-controls.mjs

@@ -35,7 +35,13 @@ export function bindPetControls(client, { action, error, changed, moved = () =>
       $('anchor').style.left = `${placed.pet.x}px`; $('anchor').style.top = `${placed.pet.y}px`;
       if (node) { node.style.left = `${placed.panel.x}px`; node.style.top = `${placed.panel.y}px`; node.style.maxHeight = `${placed.panel.height}px`; }
       if (previousPanel !== next) {
-        if (next === 'chat') $('message').focus({ preventScroll: true });
+        if (next === 'chat') {
+          const mode = $('chat').dataset.replyMode;
+          const target = mode === 'reply'
+            ? ($('reply-close')?.hidden === false ? $('reply-close') : $('reply-retain'))
+            : mode === 'sent' ? $('reply-sent') : $('message');
+          target?.focus?.({ preventScroll: true });
+        }
         if (next === 'transcript') $('call-message').focus({ preventScroll: true });
         if (next === 'settings') $('settings-back').focus({ preventScroll: true });
         if (next === 'decisions') $('decision-reload').focus({ preventScroll: true });
@@ -98,7 +104,7 @@ export function bindPetControls(client, { action, error, changed, moved = () =>
   });
   document.querySelectorAll('[data-action]').forEach(button => button.onclick = () => {
     const kind = button.dataset.action;
-    if (kind === 'write' || kind === 'history') { void show('chat'); return; }
+    if (kind === 'write' || kind === 'history') { action(kind); void show('chat'); return; }
     if (kind === 'transcript') { void show('transcript'); return; }
     if (kind === 'settings') { void show('settings'); return; }
     if (kind === 'decisions') { void show('decisions'); return; }

package/renderer/recent-bubble.mjs

@@ -1,9 +1,16 @@
 /** A compact projection of Host history plus the current unsaved voice caption. */
+function referenceKey(reference) {
+  if (reference?.kind === 'message') return `message:${reference.messageId}`;
+  if (reference?.kind === 'native-item') return `native-item:${reference.nativeItemId}`;
+  return null;
+}
+
 export class RecentBubble {
   constructor(rows) {
     this.rows = rows;
     this.history = [];
     this.live = new Map();
+    this.rowReferences = new WeakMap();
   }
   load(messages) {
     this.history = messages.slice(-2);
@@ -14,13 +21,16 @@ export class RecentBubble {
       role: row.role,
       text: row.text,
       name: row.source?.kind === 'typed' ? '你' : row.role === 'assistant' ? companionName : '语音',
+      reference: { kind: 'message', messageId: row.messageId },
     })));
   }
-  append(role, text, name = role === 'user' ? '你' : '猫猫') {
+  append(role, text, name = role === 'user' ? '你' : '猫猫', reference) {
     if (!['user', 'assistant'].includes(role) || typeof text !== 'string') return;
     const previous = this.live.get(role);
-    this.live.set(role, { name, text: `${previous?.text ?? ''}${text}`.slice(-240) });
+    this.live.set(role, { name, text: `${previous?.text ?? ''}${text}`.slice(-240),
+      reference: reference ?? previous?.reference });
     this.render();
+    return reference ? this.rowsForReference(reference)[0] : this.rows.find(row => row.dataset?.role === role);
   }
   finish(role) {
     this.live.delete(role);
@@ -38,6 +48,10 @@ export class RecentBubble {
   hasContent() {
     return this.history.length > 0 || this.live.size > 0;
   }
+  rowsForReference(reference) {
+    const key = referenceKey(reference);
+    return key ? this.rows.filter(row => this.rowReferences.get(row) === key) : [];
+  }
   render() {
     const live = [...this.live].map(([role, value]) => ({ role, ...value }));
     const entries = [...this.history.slice(-Math.max(0, 2 - live.length)), ...live].slice(-2);
@@ -69,6 +83,9 @@ export class RecentBubble {
       }
       row.dataset ??= {};
       row.dataset.role = entry?.role ?? '';
+      const key = referenceKey(entry?.reference);
+      if (key) this.rowReferences.set(row, key);
+      else this.rowReferences.delete(row);
     }
   }
 }