@clowder-ai/companion 0.1.0-alpha.30 → 0.1.0-alpha.32

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.32",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -40,7 +40,7 @@
       "bridgeVersion": "1.6.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-dR1cqLYEPsY28TJ6ureljiV5CP23wubn70G7pePPkNg="
+        "integrity": "sha256-0OpVp+p2y+xDJduVuzWZf48TNLBnWZZfq/TuGe0joyY="
       },
       "presentation": {
         "width": 300,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clowder-ai/companion",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.32",
   "description": "The desktop voice body for your Clowder companion",
   "license": "MIT",
   "type": "module",

package/plugin.yaml

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.32",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -40,7 +40,7 @@
       "bridgeVersion": "1.6.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-dR1cqLYEPsY28TJ6ureljiV5CP23wubn70G7pePPkNg="
+        "integrity": "sha256-0OpVp+p2y+xDJduVuzWZf48TNLBnWZZfq/TuGe0joyY="
       },
       "presentation": {
         "width": 300,

package/renderer/app-assist-controller.mjs

@@ -1,4 +1,5 @@
 const ACTIONS = new Set(['dismiss', 'timeout', 'accept']);
+export const APP_ASSIST_TIMEOUT_MS = 15_000;
 
 /**
  * Renderer projection only. The Host owns offer creation, expiry and clearing;
@@ -12,7 +13,7 @@ export class AppAssistController {
     accepted = () => {},
     scheduleTimeout = setTimeout,
     cancelTimeout = clearTimeout,
-    timeoutMs = 15_000,
+    timeoutMs = APP_ASSIST_TIMEOUT_MS,
   }) {
     this.client = client;
     this.changed = changed;

package/renderer/app-assist-countdown.mjs

@@ -0,0 +1,16 @@
+import { APP_ASSIST_TIMEOUT_MS } from './app-assist-controller.mjs';
+
+/** Projects the existing renderer deadline without owning or extending it. */
+export function bindAppAssistCountdown(element, durationMs = APP_ASSIST_TIMEOUT_MS) {
+  let offerRef = null;
+  element.style.setProperty('--app-assist-duration', `${durationMs}ms`);
+  return offer => {
+    const nextRef = offer?.offerRef ?? null;
+    if (nextRef === offerRef) return;
+    offerRef = nextRef;
+    element.removeAttribute('data-active');
+    if (!nextRef) return;
+    void element.getBoundingClientRect?.();
+    element.setAttribute('data-active', 'true');
+  };
+}

package/renderer/conversation-surface.mjs

@@ -6,11 +6,11 @@ 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,
+  constructor({ document, client, controls, bubble, transcript,
     onAccepted, retryLegacy, status, scheduleInterval = setInterval,
     cancelInterval = clearInterval }) {
     this.$ = id => document.getElementById(id);
-    Object.assign(this, { client, controls, bubble, transcript, getCallPhase,
+    Object.assign(this, { client, controls, bubble, transcript,
       onAccepted, retryLegacy, status });
     this.scheduleInterval = (...args) => Reflect.apply(scheduleInterval, globalThis, args);
     this.cancelInterval = (...args) => Reflect.apply(cancelInterval, globalThis, args);
@@ -140,7 +140,6 @@ export class ConversationSurface {
     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) {

package/renderer/index.html

@@ -48,6 +48,10 @@
       <p id="bubble-first" hidden></p><p id="bubble-second" hidden></p>
     </section>
     <section id="app-assist" class="floating app-assist" aria-label="应用旁的轻提示" data-candidate="true" hidden>
+      <svg id="app-assist-countdown" class="app-assist-countdown" viewBox="0 0 20 20" role="img" aria-label="提示将在约十五秒后自动收起">
+        <circle class="app-assist-countdown-track" cx="10" cy="10" r="7.5" pathLength="1"/>
+        <circle id="app-assist-countdown-progress" cx="10" cy="10" r="7.5" pathLength="1"/>
+      </svg>
       <p>你打开了 <strong id="app-assist-name"></strong>。要我一起看吗？</p>
       <div><button id="app-assist-dismiss" type="button">暂不</button><button id="app-assist-start" class="primary" type="button">打开通话控制</button></div>
     </section>

package/renderer/style.css

@@ -79,10 +79,19 @@ button:disabled { opacity: .45; cursor: default; }
 #bubble p + p { margin-top: 4px; }
 #bubble [data-role="user"] { color: var(--cafe-text-secondary); }
 .app-assist { width: 320px; padding: 12px; }
-.app-assist p { margin: 0; color: var(--desktop-body); font-size: 13px; line-height: 1.5; }
+.app-assist p { margin: 0; padding-right: 22px; color: var(--desktop-body); font-size: 13px; line-height: 1.5; }
 .app-assist p strong { color: var(--desktop-ink); font-weight: 600; }
 .app-assist > div { display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px; }
 .app-assist > div button { min-height: 30px; padding: 5px 10px; font-size: 12px; }
+.app-assist-countdown { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; overflow: visible; transform: rotate(-90deg); }
+.app-assist-countdown circle { fill: none; stroke-width: 2; }
+.app-assist-countdown-track { stroke: var(--desktop-line-strong); }
+#app-assist-countdown-progress { stroke: var(--desktop-muted); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
+.app-assist-countdown[data-active="true"] #app-assist-countdown-progress { animation: app-assist-expiry var(--app-assist-duration) linear forwards; }
+@keyframes app-assist-expiry { to { stroke-dashoffset: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .app-assist-countdown[data-active="true"] #app-assist-countdown-progress { animation-timing-function: steps(15, end); }
+}
 #call-bubble { width: 320px; max-height: 80px; overflow: hidden; padding: 9px 11px; pointer-events: none; }
 #call-bubble:not(:has(p:not([hidden]))) { display: none; }
 #call-bubble p { margin: 0; display: flex; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 1.45; }

package/renderer/surface.mjs

@@ -24,6 +24,7 @@ import { ConversationSurface } from './conversation-surface.mjs';
 import { CallControlsPresentation } from './call-controls-presentation.mjs';
 import { CallDuration } from './call-duration.mjs';
 import { AppAssistController } from './app-assist-controller.mjs';
+import { bindAppAssistCountdown } from './app-assist-countdown.mjs';
 const $ = id => document.getElementById(id);
 const label = (id, text) => { $(id).querySelector('.label').textContent = text; };
 const status = text => {
@@ -61,6 +62,7 @@ let previousControlPanel = 'none';
 const ambientPanel = active => active ? 'actions' : appAssistOffer ? 'app-assist' : 'none';
 const setTexts = (ids, text) => { for (const id of ids) $(id).textContent = text; };
 const setHidden = (ids, hidden) => { for (const id of ids) $(id).hidden = hidden; };
+const renderAppAssistCountdown = bindAppAssistCountdown($('app-assist-countdown'));
 if (!window.clowderCompanion) {
   $('actions').hidden = false; $('status').hidden = false;
   status('请从 Clowder 的聊聊入口打开猫猫球');
@@ -144,6 +146,7 @@ if (!window.clowderCompanion) {
     changed: value => {
       appAssistOffer = value.offer;
       $('app-assist-name').textContent = appAssistOffer?.appName ?? '';
+      renderAppAssistCountdown(appAssistOffer);
       void controls.setAmbient(ambientPanel(previousPhase !== 'idle'));
     },
     accepted: () => {
@@ -301,7 +304,6 @@ if (!window.clowderCompanion) {
   $('app-assist-start').onclick = () => { void appAssist.settle('accept'); };
   conversationSurface = new ConversationSurface({
     document, client, controls, bubble, transcript,
-    getCallPhase: () => conversation.phase,
     onAccepted: () => motion.signal('received'),
     retryLegacy: text => conversation.send(text),
     status,