@clowder-ai/companion 0.1.0-alpha.24 → 0.1.0-alpha.26

package/renderer/reply-letter-view.mjs

@@ -0,0 +1,103 @@
+const phaseLabel = phase => ({
+  processing: '正在回复',
+  failed: '回复失败 · 已发送的消息仍在聊天中',
+  interrupted: '回复中断 · 已发送的消息仍在聊天中',
+  canceled: '回复已取消 · 已发送的消息仍在聊天中',
+  withdrawn: '回复已撤回 · 已发送的消息仍在聊天中',
+}[phase] ?? '已发送');
+
+const draftStatus = settlement => ({
+  unconfirmed: '发送结果未确认',
+  scope_changed: '原聊天已变化 · 这条消息没有重发',
+  pending_limit: '待确认消息已达 32 条 · 这条没有发送',
+  draft_changed: '草稿已在别处变化 · 请核对后再发送',
+  unsupported_draft: '当前草稿含附件或过长 · 请回 Cat Café 继续编辑',
+  conflict: '草稿已在别处变化 · 本地输入仍保留',
+  readonly: '当前草稿含附件或过长 · 请回 Cat Café 继续编辑',
+  permission_required: '聊天权限已撤销 · 本地输入仍保留',
+  unavailable: '草稿暂未同步 · 本地输入仍保留',
+}[settlement] ?? '');
+
+/** DOM projection for compose → sent letter → complete reply → retained history. */
+export class ReplyLetterView {
+  constructor({ document, controller, retry, schedule = setTimeout, cancel = clearTimeout }) {
+    this.$ = id => document.getElementById(id);
+    Object.assign(this, { controller, retry });
+    this.schedule = (...args) => Reflect.apply(schedule, globalThis, args);
+    this.cancel = (...args) => Reflect.apply(cancel, globalThis, args);
+    this.bind();
+  }
+
+  bind() {
+    const card = this.$('reply-card');
+    card.addEventListener('pointerenter', () => this.controller.pause('hover'));
+    card.addEventListener('pointerleave', () => this.controller.resume('hover'));
+    card.addEventListener('focusin', () => this.controller.pause('focus'));
+    card.addEventListener('focusout', event => {
+      if (!event.relatedTarget || !card.contains?.(event.relatedTarget)) this.controller.resume('focus');
+    });
+    const pauseScroll = () => {
+      this.controller.pause('scroll');
+      if (this.scrollTimer !== undefined) this.cancel(this.scrollTimer);
+      this.scrollTimer = this.schedule(() => {
+        this.scrollTimer = undefined;
+        this.controller.resume('scroll');
+      }, 500);
+      this.scrollTimer?.unref?.();
+    };
+    card.addEventListener('wheel', pauseScroll);
+    card.addEventListener('scroll', pauseScroll);
+    card.addEventListener('pointerdown', () => this.controller.pause('pointer'));
+    card.addEventListener('pointerup', () => this.controller.resume('pointer'));
+    card.addEventListener('pointercancel', () => this.controller.resume('pointer'));
+    this.$('reply-retain').onclick = () => this.controller.pin();
+    this.$('reply-close').onclick = () => this.controller.close();
+    this.$('reply-history-open').onclick = () => this.controller.openHistory();
+    this.$('reply-return-latest').onclick = () => this.controller.returnLatest();
+    this.$('reply-retry').onclick = () => { if (this.value?.draft) this.retry(this.value.draft); };
+  }
+
+  render(value) {
+    this.value = value;
+    const compose = value.mode === 'compose' || value.mode === 'history';
+    const history = value.mode === 'history';
+    this.$('compose').hidden = !compose;
+    this.$('chat-history-header').hidden = !history;
+    this.$('chat-transcript').hidden = !history;
+    this.$('chat-scope').hidden = !history;
+    this.$('reply-sent').hidden = value.mode !== 'sent';
+    this.$('reply-card').hidden = value.mode !== 'reply';
+    this.$('reply-return-latest').hidden = !history || !value.hasNewer;
+
+    const retrying = value.mode === 'compose' && value.draft?.settlement === 'unconfirmed';
+    this.$('reply-retry').hidden = !retrying;
+    this.$('chat-status').textContent = value.draft ? draftStatus(value.draft.settlement)
+      : value.draftNotice ? draftStatus(value.draftNotice)
+      : value.blockedReason === 'permission_required' ? '聊天权限已撤销' : '';
+    if (value.draft) {
+      const input = this.$('message');
+      if (!input.value || input.value === this.lastRenderedDraft) input.value = value.draft.text;
+      this.lastRenderedDraft = value.draft.text;
+    }
+
+    if (value.letter) {
+      this.$('reply-letter-text').textContent = value.letter.text;
+      this.$('reply-input-text').textContent = value.letter.text;
+      this.$('reply-sent-status').textContent = phaseLabel(value.letter.responsePhase);
+    }
+    if (value.reply) {
+      this.$('reply-body').textContent = value.reply.text;
+      this.$('reply-body-status').textContent = value.reply.complete ? '' : '正在载入完整回复…';
+    } else {
+      this.$('reply-body').textContent = '';
+      this.$('reply-body-status').textContent = '';
+    }
+
+    const canRetain = value.mode === 'reply' && value.reply?.complete === true && !value.retained;
+    this.$('reply-retain').hidden = !canRetain;
+    this.$('reply-close').hidden = value.mode !== 'reply' || !value.retained;
+    this.$('reply-retain').dataset.running = String(canRetain && value.timer.running);
+    this.$('reply-retain').style.setProperty('--reply-visible-ms', `${value.timer.remainingMs}ms`);
+    this.$('chat').dataset.replyMode = value.mode;
+  }
+}

package/renderer/style.css

@@ -187,17 +187,47 @@ button:disabled { opacity: .45; cursor: default; }
 .work-overview-row span { color: var(--desktop-muted); font-size: 10px; }
 #work-notice { margin: 0; padding: 3px 11px 7px; color: var(--desktop-muted); font-size: 10px; }
 #chat { width: 400px; max-height: 500px; display: flex; flex-direction: column; overflow: hidden; }
-#chat header { padding: 7px 9px 7px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cafe-border-subtle); }
-#chat header button { font-size: 12px; color: var(--cafe-text-secondary); }
+#chat[data-reply-mode="compose"] { width: 340px; }
+#chat[data-reply-mode="sent"] { width: 210px; background: transparent; box-shadow: none; }
+#chat[data-reply-mode="reply"] { width: 370px; }
+#chat-history-header { padding: 7px 9px 7px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cafe-border-subtle); }
+#chat-history-header button { font-size: 12px; color: var(--cafe-text-secondary); }
 #chat-transcript { height: 230px; overflow: auto; padding: 14px; line-height: 1.7; font-size: 13px; }
 #chat-transcript p { margin: 0 0 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
 #chat-transcript p:not(.empty) { width: fit-content; max-width: 92%; padding: 7px 10px; border-radius: 9px; }
 #chat-transcript p.user { margin-left: auto; background: var(--desktop-rail); }
 #chat-transcript p.assistant { margin-right: auto; background: var(--desktop-work); border: 1px solid var(--desktop-line); }
 .empty { color: var(--cafe-text-muted); font-size: 13px; }
-#compose { display: flex; align-items: flex-end; padding: 10px; gap: 8px; border-top: 1px solid var(--cafe-border-subtle); }
-#message { resize: none; border: 0; min-width: 0; flex: 1; background: transparent; padding: 5px; color: inherit; line-height: 1.5; }
-#chat small { color: var(--cafe-text-muted); font-size: 10px; padding: 0 14px 10px; }
+#compose { display: flex; align-items: center; padding: 10px; gap: 8px; border-top: 1px solid var(--cafe-border-subtle); }
+#chat[data-reply-mode="compose"] #compose { border: 0; }
+#message { resize: none; border: 1px solid var(--desktop-line-strong); border-radius: 8px; min-width: 0; height: 34px; flex: 1; background: var(--desktop-paper); padding: 6px 9px; color: inherit; line-height: 1.5; }
+.chat-feedback { min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; color: #8f4730; }
+.chat-feedback small { flex: 1; font-size: 11px; }
+.chat-feedback button { color: #8f4730; font-size: 11px; }
+#chat-connection-status, #chat-scope { color: var(--cafe-text-muted); font-size: 10px; padding: 0 14px 10px; }
+.reply-sent { align-items: center; gap: 9px; border-radius: 10px; background: var(--desktop-paper); box-shadow: 0 8px 24px #18171524; padding: 9px 11px; }
+.reply-sent:not([hidden]) { display: flex; }
+.reply-sent > svg { width: 36px; height: 27px; flex: none; overflow: visible; }
+.reply-sent > svg rect { fill: var(--desktop-paper); stroke: var(--desktop-ink); stroke-width: 1.5; }
+.reply-sent > svg path { fill: none; stroke: var(--desktop-ink); stroke-width: 1.5; stroke-linejoin: round; }
+.reply-sent > span { min-width: 0; display: grid; gap: 2px; }
+.reply-sent strong { font-size: 12px; font-weight: 600; }
+.reply-sent small { overflow: hidden; color: var(--desktop-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.reply-card { position: relative; max-height: 500px; overflow-y: auto; padding: 12px 14px 10px; }
+.reply-head { display: flex; align-items: flex-start; gap: 8px; }
+.reply-input-text { min-width: 0; flex: 1; color: var(--desktop-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
+.reply-ring, .reply-close { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; color: var(--desktop-muted); }
+.reply-ring svg { width: 18px; height: 18px; transform: rotate(-90deg); }
+.reply-ring circle { fill: none; stroke-width: 1.5; }
+.reply-ring-track { stroke: var(--desktop-line-strong); }
+.reply-ring-progress { stroke: var(--desktop-ink); stroke-linecap: round; stroke-dasharray: 40.84; stroke-dashoffset: 0; }
+.reply-ring[data-running="true"] .reply-ring-progress { animation: reply-countdown var(--reply-visible-ms) linear forwards; }
+.reply-close { font-size: 20px; line-height: 1; }
+.reply-body { margin-top: 7px; color: var(--desktop-ink); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
+.reply-body-status { display: block; margin-top: 6px; color: var(--desktop-muted); font-size: 11px; }
+.reply-history-open { margin-top: 8px; padding: 3px 0; color: var(--desktop-muted); font-size: 11px; }
+.reply-return-latest { position: absolute; right: 12px; bottom: 59px; z-index: 1; border: 1px solid var(--desktop-line) !important; background: var(--desktop-paper) !important; box-shadow: 0 2px 8px #1817151a; color: #8f4730; font-size: 11px; }
+@keyframes reply-countdown { to { stroke-dashoffset: 40.84; } }
 .call-transcript { width: 420px; height: 210px; display: flex; flex-direction: column; overflow: hidden; }
 .call-transcript[data-expanded="true"] { height: 500px; }
 .transcript-call-context { flex: none; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; padding: 7px 8px; }
@@ -275,7 +305,7 @@ button:disabled { opacity: .45; cursor: default; }
 .settings-empty { padding: 16px; }
 .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
 @media (prefers-reduced-motion: reduce) {
-  #pet, #indicators button, [data-connection-state] .status-dot::after, #living-sit [data-layer], #pet[data-action="idle"] #living-sit [data-layer] { animation: none; }
+  #pet, #indicators button, [data-connection-state] .status-dot::after, .reply-ring[data-running="true"] .reply-ring-progress, #living-sit [data-layer], #pet[data-action="idle"] #living-sit [data-layer] { animation: none; }
   #living-sit [data-layer="closed"] { opacity: 0; }
 }
 #pet[data-skin="yanyan-codex"] { background-image: url("./skins/yanyan-codex.webp"); }

package/renderer/surface.mjs

@@ -20,12 +20,12 @@ import { COMPACT_BALL_SIZE, compactSizeAction } from './compact-size.mjs';
 import { WorkOverviewView } from './work-overview.mjs';
 import { MeetingStatus, renderMeetingStatus } from './meeting-state.mjs';
 import { VisibleTextPresentation } from './visible-text-receipt.mjs';
+import { ConversationSurface } from './conversation-surface.mjs';
 const $ = id => document.getElementById(id);
 const label = (id, text) => { $(id).querySelector('.label').textContent = text; };
 const status = text => {
   $('status').textContent = text;
   $('menu-status').textContent = text;
-  $('chat-status').textContent = text;
   $('announcement').textContent = text;
 };
 const transcript = new TranscriptView($('chat-transcript'));
@@ -49,8 +49,8 @@ const nativeTravel = new NativeWindowTravel({
   readPosition: () => ({ x: window.screenX, y: window.screenY }),
   changed: value => motion.syncTravel(value),
 });
-let sharing = false, pendingScreen = false, loading = false, transcriptLoading = false, latestHistory, previousPhase = 'idle';
-let didMove = false, threadTitle, settingsView, settingsValues, decisionPanel, workView;
+let sharing = false, pendingScreen = false, transcriptLoading = false, previousPhase = 'idle';
+let didMove = false, settingsView, settingsValues, decisionPanel, workView;
 let previousControlPanel = 'none';
 // F229 stays quiet: a history ID change has no provenance for proactive text.
 const ambientPanel = active => active ? 'actions' : 'none';
@@ -63,6 +63,7 @@ if (!window.clowderCompanion) {
 } else {
   nativeTravel.start();
   const client = createCompanionClient(window.clowderCompanion);
+  let conversationSurface;
   const visibleText = new VisibleTextPresentation({
     document,
     report: observation => client.observePresentation(observation),
@@ -81,16 +82,22 @@ if (!window.clowderCompanion) {
     },
     changed: panel => {
       visibleText.retry();
+      if (previousControlPanel === 'chat' && panel !== 'chat') conversationSurface.closeHistory();
+      if (panel === 'chat' && conversationSurface.controller.mode === 'idle') conversationSurface.openHistory();
       if (panel === 'chat') foldedChatUnread.open();
       else if (previousControlPanel === 'chat' && conversation?.active) foldedChatUnread.fold();
       previousControlPanel = panel;
-      if (panel === 'chat') void readHistory();
+      if (panel === 'chat') void conversationSurface.readHistory();
       if (panel === 'transcript') void readCallTranscript();
       if (panel === 'decisions') void decisionPanel?.read();
       if (panel === 'settings') void settingsView?.open();
       if (panel === 'menu') void workView?.load();
     },
     action(kind) {
+      if (kind === 'write') {
+        conversationSurface.openWrite(conversation.active);
+      }
+      if (kind === 'history') conversationSurface.openHistory();
       if (kind === 'begin') { transcript.reset(); callTranscript.reset(); bubble.reset(); callBubble.clear(); void conversation.begin(); void controls.show('none'); }
       if (kind === 'listen') { transcript.reset(); callTranscript.reset(); bubble.reset(); callBubble.clear(); void conversation.begin('receive_only'); void controls.show('none'); }
       if (kind === 'stop') void conversation.end();
@@ -146,13 +153,14 @@ if (!window.clowderCompanion) {
   }
   const conversation = new CompanionConversation({
     client, createPeer: callback => new VoicePeer(callback, client), stopScreen: () => screen.stop(),
+    delivery: ({ text, receipt }) => conversationSurface.controller.recordDelivery(receipt, text),
     transcript: event => {
       if (event.type === 'turn-done') {
         transcript.finish(event); callTranscript.finish(event); bubble.finish(event.role); callBubble.finish(event.role);
-        void readHistory(); void readCallTranscript();
+        void conversationSurface.readHistory(); void readCallTranscript();
       } else if (event.type === 'typed') {
         callTranscript.appendTyped(event);
-        void readHistory(); void readCallTranscript();
+        void conversationSurface.readHistory(); void readCallTranscript();
       } else {
         const speaker = event.role === 'assistant' ? conversation.identity?.displayName ?? '猫猫' : '语音';
         visibleText.appendLive(event, speaker);
@@ -163,7 +171,7 @@ if (!window.clowderCompanion) {
       const showFailure = value.failed && previousPhase !== 'idle' && value.phase === 'idle';
       const justConnected = previousPhase !== 'talking' && value.phase === 'talking';
       if (previousPhase !== 'idle' && value.phase === 'idle') {
-        transcript.reset(); callTranscript.reset(); bubble.reset(); callBubble.clear(); void readHistory();
+        transcript.reset(); callTranscript.reset(); bubble.reset(); callBubble.clear(); void conversationSurface.readHistory();
         foldedChatUnread.reset();
         if (controls.panel === 'transcript') void controls.show('menu');
       }
@@ -238,7 +246,8 @@ if (!window.clowderCompanion) {
         $('menu-play').hidden = identity.skin !== 'xianxian-codex';
         const companionLabel = companionIdentity
           ? `${companionIdentity.title} · ${companionIdentity.partnerLabel}` : identity.displayName;
-        $('chat-name').textContent = threadTitle ?? companionLabel; $('menu-name').textContent = companionLabel;
+        $('chat-name').textContent = conversationSurface?.threadTitle ?? companionLabel; $('menu-name').textContent = companionLabel;
+        $('message').placeholder = `发消息给${identity.displayName}…`;
         $('call-message').placeholder = `发消息给${identity.displayName}…`;
         $('pet').setAttribute('aria-label', `${companionLabel}：点击或右键打开名片，拖动移动`);
         $('documents').querySelector('.menu-status').textContent = identity.documentsAllowed ? '开启' : '暂停';
@@ -256,6 +265,15 @@ if (!window.clowderCompanion) {
       if (showFailure) void controls.show('menu');
     },
   });
+  conversationSurface = new ConversationSurface({
+    document, client, controls, bubble, transcript,
+    getCallPhase: () => conversation.phase,
+    onAccepted: () => motion.signal('received'),
+    retryLegacy: text => conversation.send(text),
+    status,
+    scheduleInterval: setInterval,
+    cancelInterval: clearInterval,
+  });
   settingsView = new SettingsView({
     document,
     client,
@@ -289,21 +307,6 @@ if (!window.clowderCompanion) {
     motion,
     proactivePolicy: () => settingsValues?.proactivePolicy,
   });
-  async function readHistory() {
-    if (loading) return;
-    loading = true;
-    try {
-      const history = await client.readConversation();
-      $('history').textContent = history.hasMore ? '在 Cat Café 中查看更早聊天 ↗' : '在 Cat Café 中查看完整聊天 ↗';
-      threadTitle = history.threadTitle;
-      $('chat-name').textContent = threadTitle;
-      bubble.load(history.messages);
-      void controls.setAmbient(ambientPanel(conversation.phase !== 'idle'));
-      const serialized = JSON.stringify(history.messages);
-      if (serialized !== latestHistory) { latestHistory = serialized; transcript.load(history.messages); }
-    } catch { $('chat-status').textContent = '聊天记录暂未更新 · 正在说的话仍会显示'; }
-    finally { loading = false; }
-  }
   async function readCallTranscript() {
     if (transcriptLoading || !conversation.active || !conversation.callId) return;
     transcriptLoading = true;
@@ -319,32 +322,28 @@ if (!window.clowderCompanion) {
     } finally { transcriptLoading = false; }
   }
   $('share-badge').onclick = toggleScreen;
-  $('history').onclick = () => void client.openConversation().then(result => {
-    if (result.delivery === 'unconfirmed') status('打开聊天尚未确认 · 请从 Clowder 查看');
-  }).catch(error => status(explainError(error)));
-  async function submitMessage(event, inputId) {
-    event.preventDefault(); const input = $(inputId); const text = input.value;
+  async function submitCallMessage(event) {
+    event.preventDefault(); const input = $('call-message'); const text = input.value;
     if (await conversation.send(text)) {
       motion.signal('received');
       if (input.value === text) input.value = '';
-      latestHistory = undefined; void readHistory();
+      void conversationSurface.readHistory();
     }
   }
-  $('compose').onsubmit = event => submitMessage(event, 'message');
-  $('call-compose').onsubmit = event => submitMessage(event, 'call-message');
+  $('call-compose').onsubmit = submitCallMessage;
   $('call-unread').onclick = () => callTranscript.scrollToBottom();
   const unsubscribe = client.subscribe(event => {
     if (event.kind === 'media-stopped') void conversation.hostStopped(event.reason);
     if (event.kind === 'view-dismiss') controls.dismiss();
   });
   const statusMonitor = setInterval(() => void conversation.refresh(), 1000);
-  const historyMonitor = setInterval(() => void readHistory(), 3000);
   const transcriptMonitor = setInterval(() => void readCallTranscript(), 1000);
   const decisionMonitor = setInterval(() => { if (controls.panel !== 'decisions') void decisionPanel.read(); }, 15000);
   const workMonitor = setInterval(() => { if (controls.panel === 'menu') void workView.load(); }, 15000);
-  void conversation.refresh(); void readHistory(); void decisionPanel.read(); void settingsView.controller.load(); void controls.show('none');
+  void conversation.refresh(); conversationSurface.start(); void decisionPanel.read(); void settingsView.controller.load(); void controls.show('none');
   window.addEventListener('beforeunload', () => {
-    clearInterval(statusMonitor); clearInterval(historyMonitor); clearInterval(transcriptMonitor); clearInterval(decisionMonitor); clearInterval(workMonitor);
+    clearInterval(statusMonitor); clearInterval(transcriptMonitor); clearInterval(decisionMonitor); clearInterval(workMonitor);
+    conversationSurface.close();
     unsubscribe(); visibleText.close(); nativeTravel.close(); motion.close(); void conversation.end();
   });
 }