Skip to content

feat: improve chat layout and terminal scrollback - #20

Draft
LetItBe12345 wants to merge 2 commits into
mainfrom
agent/chat-ui-native-scrollback
Draft

feat: improve chat layout and terminal scrollback#20
LetItBe12345 wants to merge 2 commits into
mainfrom
agent/chat-ui-native-scrollback

Conversation

@LetItBe12345

@LetItBe12345 LetItBe12345 commented Jul 16, 2026

Copy link
Copy Markdown
Owner

变更

  • 将当前用户消息放到右侧,其他用户和 Agent 保持左侧
  • 右侧消息按整块缩进,正文内部继续左对齐
  • 删除 Ctrl+PageUp/PageDown 和单屏 timeline.slice() 分页
  • 返回完整时间线,交给 Pi TUI 和终端 scrollback 处理
  • 将频繁变化的连接、成员和权限状态移到底部,减少修改历史顶部内容
  • 用户消息最大宽度为 70%,Agent 消息最大宽度为 85%,窄屏统一为 94%
  • 合并两分钟内同一发送者的连续消息标题
  • 继续复用 Pi 的 wrapTextWithAnsi() 处理中文、Emoji、长 URL 和长单词

原因

原实现存在三个直接问题:

  1. 自己的消息在左侧,其他成员在右侧,与常见聊天软件相反。
  2. 右侧消息逐行右对齐,多行正文左边缘不一致。
  3. 自定义单屏分页只向终端输出当前视口,鼠标滚轮无法查看完整历史。

影响

群聊界面更接近常见聊天软件,同时保留终端长文本和 Agent 回复的可读性。旧消息可以通过终端原生滚动查看。

验证

  • TypeScript 语法转译检查通过
  • chat-view.ts 使用接口桩完成严格类型检查
  • 新增 TUI 测试:左右布局、多行块对齐、连续消息合并、完整时间线、中文/Emoji/长 URL 宽度
  • GitHub Actions CI #43:通过

注意

Pi TUI 在窗口宽高变化或修改可视区域上方内容时仍可能执行完整重绘并清空 scrollback。这是 Pi TUI 当前行为,不由本 PR 自行重写。

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant