feat: support inline input restore #4345
Conversation
|
/next |
Walkthrough本次 PR 主要涉及三大块调整：首先，在内嵌聊天组件中移除了监听编辑器布局变化以自动处理隐藏状态的代码；其次，在内嵌输入组件中引入了新的 onValueChange 属性以及事件发射器，并对类名和事件逻辑进行了调整；最后，在内嵌输入的控制器中加入了 observables 来管理输入状态及模型变化，同时新增了两个用于管理不同输入场景的 store 类。此外，还对部分 CSS 样式进行了布局优化。 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户 as User
participant Widget as InlineInputWidget
participant Controller as InlineInputController
participant Store as WidgetStore
用户->>Widget: 输入文本
Widget->>Controller: 触发 onValueChange 事件
Controller->>Store: 更新输入状态与存储数据
Store-->>Controller: 通知状态变化
Controller->>Widget: 更新组件显示或隐藏
Possibly related PRs
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
yarn install v1.22.22 ✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts (4)
70-75: 新增核心属性：inputValue、modelChangeObs、inlineInputWidgetStore。
- inputValue 用于追踪输入内容变化。
- modelChangeObs 与编辑器模型变动绑定。
- 使用 Map 存储各模型对应的 widget 状态时，需确保编辑器销毁时正确清理，以免造成内存泄漏。
82-87: 初始化 observable 属性。
通过 observableValue 和 observableFromEvent 来管理输入和模型变更，尽量在组件或控制器销毁时一起 dispose 以防止潜在资源泄漏。
140-159: autorun 监听 modelChangeObs 并根据 storeData 状态显示或隐藏输入。
- autorun 可自动收集依赖，但要确认在 dispose 时也能终止观察。
- storeData 的类型分支处理合理，保证了不同存储类的场景各自对应。
197-197: 通过依赖注入获取 InlineInputWidget 实例。
建议关注依赖注入的对象范围，避免注入过多非必要依赖。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/ai-native/src/browser/widget/inline-chat/inline-content-widget.tsx(0 hunks)packages/ai-native/src/browser/widget/inline-input/inline-input-widget.tsx(4 hunks)packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts(22 hunks)packages/ai-native/src/browser/widget/inline-input/model.ts(2 hunks)packages/core-browser/src/components/ai-native/ai-action/index.module.less(1 hunks)
💤 Files with no reviewable changes (1)
- packages/ai-native/src/browser/widget/inline-chat/inline-content-widget.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: build-windows
- GitHub Check: unittest (macos-latest, 18.x, node)
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (40)
packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts (31)
18-24: 引入可观察对象相关依赖的更新正常。
这些 observable 工具可以帮助管理输入值和模型变更，使用上看不出问题。
38-38: 替换为新的 InlineInputWidget 导入。
单一更改，未发现问题。
41-41: 导入空行与选区两种存储类。
显式区分两种场景，逻辑更清晰。
115-115: 监听 onHidden 事件并隐藏输入。
逻辑简单直接，与业务相符。
172-172: 清除当前模型在 inlineInputWidgetStore 中的记录。
调用 delete 操作前，需要确保 this.monacoEditor.getModel() 不为 null。
188-190: 在空行场景下设置默认值并记录到 Store。
在输入时即可保留用户输入的初始内容，为后续恢复提供便利。
217-217: 设置 inlineInputWidgetIsVisible 上下文键为 true。
展示状态与上下文联动，整体流程正常。
221-224: 在 onDispose 时执行取消操作并清理装饰。
确认与 hideInput() 之间的调用顺序和作用是否会产生重复或冲突。
229-238: onValueChange 同步输入值并存储到空行场景对象。
能实时更新 store 数据，保证状态一致性。
239-273: onResultClick 处理多种结果选项。
针对不同的结果类型实现了重生、接受、丢弃等逻辑，整体完善。
265-266: 在重新生成时再次调用 showInputInEmptyLine。
可连续重试，符合需求。
310-311: onSend 处理输入发送的主逻辑。
流程清晰，无明显缺陷。
320-321: 启动 THINKING 状态。
状态管理明确，后续互斥流程也能稳定继续。
336-336: 异常取消后将状态重置为 READY。
保证组件能重新处理下一次输入。
369-369: 错误时切换到 ERROR 状态。
实现了基础的错误可视化逻辑。
374-374: 结束流式输入后状态为 DONE。
向用户直观地呈现处理已完成。
379-379: 再次结束流式输入后状态为 DONE。
流程的完整度较高，避免多次操作混乱。
388-388: 将 inlineInputWidget 注册到 inputDisposable 中。
及时 dispose 可以防止资源泄露。
397-404: 在选区场景也先确认 model 是否存在。
流程与空行类似，避免模型空引用问题。
423-425: 在选区模式下通过 inlineInputWidget.show() 展示组件。
可见状态被正确更新并存储，用法合理。
430-431: onDispose 中执行取消操作与资源清理。
逻辑与空行模式保持一致，整合较好。
438-446: onValueChange 保存选区场景的值到 store。
保证在选区模式中的输入也能被实时追踪。
448-449: onClose 时隐藏输入。
终止逻辑正常，没有多余操作。
460-461: onSend 处理选区情况下的策略分支。
隐藏输入或继续预览的逻辑清晰。
483-483: 终止预览时重置为 READY 状态。
很好的清理与状态恢复机制。
499-499: 出现错误时切换到 ERROR 状态。
与空行的异常处理保持一致。
503-503: onAbort 后切换为 DONE 状态。
有助于给用户明显的流式结束信号。
507-507: onEnd 时切换为 DONE 状态。
与上一处类似，保证流程彻底结束。
516-517: mount 方法将 inlineInputWidget 挂到 diffPreviewer。
实现可视化差异预览与输入组件的联动。
519-519: 未使用预览策略时恢复 READY。
对无预览策略的场景处理到位。
533-533: 再次显示选区输入实现“再生成”场景。
支持用户在同一选区多次生成输入，很灵活。packages/ai-native/src/browser/widget/inline-input/model.ts (3)
3-3: 更新 import 以包含 IPosition 与 Selection。
满足空行和选区两种输入场景的位置信息需求。
36-54: 新增 InlineInputWidgetStoreInEmptyLine。
该类用来记录空行模式输入的行位置与输入字符串，为后续恢复提供基础。
56-74: 新增 InlineInputWidgetStoreInSelection。
该类用来记录选区模式下的 Selection 与输入值，可精准恢复用户操作。packages/ai-native/src/browser/widget/inline-input/inline-input-widget.tsx (5)
24-24: 为 IInlineInputWidgetRenderProps 新增 onValueChange。
支持对用户输入实时监听，改进可用性。
28-29: 解构并使用 onValueChange 属性。
保持组件参数一致性，增强易读性。
92-93: 重命名并添加 Emitter：_onSend / onSend。
统一了命名方式，语义更明确。
98-100: 新增事件 _onValueChange / onValueChange。
实现对输入中间态的监听，丰富了事件处理能力。
114-130: 在 renderView 中将 onValueChange 与 onSend 绑定到组件。
- onValueChange 调用 _onValueChange.fire(value)，确保外部能实时同步值。
- onSend 调用 _onSend.fire(value) 并切换状态为 THINKING，流程通畅。
packages/core-browser/src/components/ai-native/ai-action/index.module.less (1)
52-55: 新增样式确保居中与溢出隐藏
这部分修改在.logo_container内添加了 overflow: hidden; display: flex; justify-content: center; 和 align-items: center;。这确保了内部元素（例如图标）在容器内能够水平、垂直居中显示，同时隐藏任何意外溢出的内容，有助于提升组件的整体视觉一致性。请确认在不同设备和分辨率下，这些设置不会意外截断应显示的内容，也确保其与内嵌输入恢复功能的其他交互组件在布局上保持协调。
|
🎉 PR Next publish successful! 3.7.1-next-1738917599.0 |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4345 +/- ##
=======================================
Coverage ? 54.15%
=======================================
Files ? 1639
Lines ? 100301
Branches ? 21760
=======================================
Hits ? 54323
Misses ? 38204
Partials ? 7774
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Types
Background or solution
例如切换文件时，可以恢复成上次未关闭时的 inline input
inline_input_restore.mp4
Changelog
inline input 在输入状态下支持恢复
Summary by CodeRabbit