Skip to content

feat(tui): optimize image paste UX with compact placeholders and atomic deletion #413

Description

@JS-banana

问题背景 (Problem)

在终端 TUI 交互中,粘贴图片时输入框会直接插入一段超长的绝对文件路径:

Image
用 /var/folders/jf/lx3m0hwn3171fj0_35213jy40000gn/T/orca-paste-1788659693128-8f07443f-e93e-46fd-81d9-db6d416dc87f.png 内容作为你确定...

存在以下明显体验问题:

  1. 视觉割裂:近百字符的临时绝对路径占据多行宽度,打断输入流与提示词可读性;
  2. 删除体验差:想撤销或修改时需逐字退格数十次,且容易误删导致路径断裂失效;
  3. 多图输入体验差:附带多张图片时,输入框充斥大段哈希路径,完全失去可读性。

方案与竞品参考 (Proposed Solution & References)

参考主流 AI CLI(如 Codex CLI、Claude Code)的设计方案,使用紧凑占位符:

Image
> 这是测试内容 [Image #1] 啊啊啊,你好 [Image #2] 呀
  • 紧凑占位符:在 TUI 编辑器中用 [Image #1] 等简洁 Token 替代冗长的绝对路径。
  • 原子化删除 (Atomic Deletion):光标命中占位符退格时支持整块移除,方便快速删除与替换,无需逐字退格。

设计边界 (Design Boundaries)

  1. Pi-Native 契约:与底层多模态 ImageContent 数据模型保持对齐,提交时将占位符对应的图片作为多模态载荷正确传递给模型。
  2. 不影响常规文本:普通代码或文件路径的粘贴与补全保持既有逻辑不受影响。
  3. 临时文件清理:删除占位符或会话重置时,妥善管理并清理相关临时文件。

验收标准 (Acceptance Criteria)

  • TUI 编辑器中粘贴图片时显示为紧凑的 [Image #N] 占位符。
  • 退格删除命中 [Image #N] 时支持原子化整块移除。
  • 支持单条输入内包含多个按序编号的图片占位符(如 [Image #1], [Image #2])。
  • 提交时正确将对应图片作为多模态输入传递给模型。
  • 临时图片资源生命周期正常管理与清理。
  • 既有静态检查与测试套件保持通过。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions