FloatCard(dsh-tendedero):把追問掛在窗口上方的晾衣繩上

前言

在 DSH 裏做完一輪對話後,常見做法是自己在輸入框裏想「接下來還能問什麼」,或者依賴宿主自帶的追問列表。列表往往在主工作區裏,和當前會話的視覺焦點不在同一層,容易忽略。

FloatCard 把後續追問做成窗口頂部的晾衣繩卡片:鼠標移到頂欄一帶繩子垂下來,點一張卡片就把該問題作爲下一條消息發出。交互靈感來自 alejandrobujan/tendedero,由 lark980-web 維護,npm 包名爲 dsh-tendedero,在 DSH 插件目錄中歸類爲「趣味換裝」。

這是什麼

DSH 前端插件:每輪對話結束後,向當前會話模型請求若干條短追問,每條一張浮動卡片,用衣夾掛在窗口上方的一條線上。Agent 的 ask_user_question 卡片也走同一條線;可在卡片上作答,活題再交回編輯器。

倉庫:https://github.com/lark980-web/FloatCard
目錄頁:https://www.skillhub.cn/plugins/lark980-web/FloatCard
許可證:MIT(與原版 tendedero 應用無隸屬關係,在 DSH 上重實現其頂欄交互)。

未上架 npm 前,README 註明需自行把依賴寫進 profile;上架後可從 DSH Plugins 頁安裝。

核心功能

下面行爲均來自項目 README 與 package.json 說明。

  • 每輪結束後,插件用會話當前模型生成最多若干條短追問,一題一卡,各佔一個衣夾。
  • 點擊卡片:將該問作爲你的下一條消息發送;整批卡片向右收走,被點中的那張優先。
  • 指針停在窗口頂部一條帶內(全寬約 48px 深,含標題欄與兩角):晾衣繩垂下;移開則收起。深度常量在 lib/client.js 頂部的 TRIGGER_DEPTH,可按需改源碼。
  • 與 Agent ask_user_question 共用同一根繩;未答完的可在卡上答,進行中的題交回 composer。
  • 批次在刷新或重新進入會話後約 6 分鐘內可恢復;會話再次開始工作、出現真實提問、點 × 或超時後清除。
  • 跟隨明/暗主題,尊重 prefers-reduced-motion。

在線演示(mock 宿主上的真實客戶端包):https://lark980-web.github.io/FloatCard/

安裝與啓用

官方方式是在 profile 的 package.json 里加入依賴並啓用 bundle,再在 profile 目錄執行 pnpm install。首次安裝後需重啓 DSH(bundle 會爲宿主增加 Remote 行)。

// ~/.dsh/profiles/<profile>/package.json
{
  "dependencies": { "dsh-tendedero": "^0.4.2" },
  "dsh": { "profile": { "bundles": ["…", "dsh-tendedero"] } }
}

將 … 換成你 profile 裏已有的 bundle 列表,保留 dsh-tendedero 這一項。資料中未給出 dsh plugin add github:… 形式的安裝命令,勿憑倉庫名自行拼接。

配置

可在 profile 的 cordis.patch.yml 裏覆蓋插件配置:

- id: dsh-tendedero
  name: dsh-tendedero
  config:
    enabled: true        # master switch
    maxQuestions: 3      # cards per batch (1-5)
    provider: null       # pin the generation model; defaults to the session's model
    model: null
    timeoutMs: 45000

maxQuestions 控制每批卡片數量(1–5);provider / model 可固定生成追問的模型,默認跟會話當前模型。

典型用法

  1. 按上一節完成安裝並重啓 DSH,保持 config.enabled 爲 true(默認)。
  2. 正常與 Agent 對話,等一輪結束;頂部隱形觸發帶 hover 一下,應看到三張(或你配置的 maxQuestions 張)追問卡片垂下。
  3. 點其中一張,該文本會作爲你的下一條 prompt 發出,整批卡片被收走。
  4. 若會話裏出現 ask_user_question,同一根繩上會掛對應卡片,可在卡面作答。

想先不看 DSH 只看 UI,可打開 README 中的 Live demo 鏈接,在獨立 harness 裏體驗 hover、點選、收起等動作。

實現要點(便於排錯)

  • 宿主側(lib/index.js、lib/remote.js):tendedero/suggest Remote 方法讀取最近 user/assistant 消息,經共享 ctx.llm 生成追問。
  • 客戶端(lib/client.js):懶加載 CJS 模塊 bundle,無構建步驟、無運行時依賴;監視 userQuestions / inbox 投影與 sessionStatus,用原生 DOM/CSS 畫繩與卡,點選經 session/prompt 送出。
  • 動態掛載的 Remote 命名空間需用 ctx.get() 讀取(Cordis 對 inject 裏未聲明的 key 只允許屬性讀)。

開發時用 index.html 作獨立 harness,對齊宿主 Cordis inject 與 Remote 的 {ok,value} 封裝;README 稱曾用 ego-browser 跑過 31 條狀態斷言(hover 召回、關閉、重載恢復、運行中清掃、重連等)。

適用場景與注意

適合誰: 希望在對話窗口頂部用輕量 UI 接住「接下來問什麼」、又不想每次自己敲追問的 DSH 用戶;能接受偏趣味、偏換裝的交互,而不是樸素列表。

權限與安全: 插件在當前 DSH 進程權限下運行,會調用會話 LLM 生成追問並改寫前端展示。安裝前請自行查看 源碼倉庫 與 MIT 許可證;社區目錄 SkillHub 爲獨立站點,與 DeepSeek / 幻方無官方從屬關係。

版本: 資料中安裝示例爲 dsh-tendedero ^0.4.2;倉庫 package.json 當前版本爲 0.4.3。npm 發佈 README 註明 credentials 待辦,若以 git/path 依賴安裝,以你鎖定的包版本爲準。


FloatCard 把「下一輪可以問什麼」從隱形聯想變成頂欄晾衣繩上的可點卡片,和 DSH「一切皆插件」的思路一致:交互換一層皮,追問生成仍走會話模型與現有 Remote。更多說明見目錄頁 SkillHub · FloatCard 與 GitHub lark980-web/FloatCard。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜