refactor: inline diff previewer snapshot

[Ricbet]

Types

Background or solution

• 重构部分代码，将 serialize store 重构为 snapshot model store
• 修复在 inline diff 的预览模式下，切换 tab 时，状态的恢复异常，以及所有编辑操作（如 采纳/弃用、新增行数）等异常的行为
• 切换 tab 之后，允许继续 undo/redo 操作

Kapture.2024-08-09.at.17.53.04.mp4

Changelog

inline diff 新增恢复机制，且切换 tab 时允许继续 undo/redo 操作

Summary by CodeRabbit

• 新功能

  • 引入了新的LivePreview组件，增强了代码编辑器中对部分编辑的管理。
  • 增加了Undo/Redo功能，允许用户在实时预览中便捷地撤销和重做操作。

• 改进

  • 重构了DeltaDecorations和EnhanceDecorationsCollection类，提升了装饰管理的清晰度和可维护性。
  • 更新了BaseInlineDiffPreviewer类，增强了对节点管理和状态处理的灵活性。
  • 改进了InlineDiffHandler类的状态管理，简化了预览器的管理逻辑。

• 清理

  • 移除了多余的代码和接口，优化了结构和可读性。

[railway-app]

This PR was not deployed automatically as @Ricbet does not have access to the Railway project.

In order to get automatic PR deploys, please add @Ricbet to the project inside the project settings page.

[coderabbitai]

Walkthrough

本次更改涉及多个类和组件的重构，旨在提升代码的可读性和可维护性。主要改动包括将相关属性封装至单一对象、简化构造函数、增强装饰管理功能、改进事件处理和错误管理。此外，新增组件提升了用户交互体验，整体优化了资源管理和状态管理流程。

Changes

文件	更改摘要
.../enhanceDecorationsCollection.ts	重构DeltaDecorations和EnhanceDecorationsCollection类，合并构造函数参数为单一的metadata对象，移除serializeState方法，增强装饰管理功能。
.../inline-diff/inline-diff-previewer.ts	重构BaseInlineDiffPreviewer和LiveInlineDiffPreviewer类，改进节点管理，增加错误处理和状态管理的灵活性。
.../inline-diff/inline-diff.handler.ts	精简InlineDiffHandler类，移除多余的存储映射，优化预览器的生命周期管理，简化状态恢复逻辑。
.../inline-stream-diff/live-preview.component.tsx	新增React组件，处理部分编辑的交互，提升用户体验和可用性。
.../inline-stream-diff/live-preview.decoration.tsx	重组多种组件和接口，优化装饰和小部件的管理，提升代码可读性。
.../inline-stream-diff/live-preview-stack.ts	引入LivePreviewUndoRedoStackElement类，管理实时预览装饰的撤销和重做操作，提升用户交互体验。
.../inline-stream-diff/inline-stream-diff.handler.tsx	引入状态快照管理，重构InlineStreamDiffHandler类，优化装饰处理，提升代码结构。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Editor
    participant Previewer

    User->>Editor: 进行代码编辑
    Editor->>Previewer: 显示实时预览
    User->>Previewer: 接受或拒绝更改
    Previewer->>Editor: 更新编辑状态

Loading

sequenceDiagram
    participant User
    participant InlineDiffHandler
    participant DecorationManager

    User->>InlineDiffHandler: 触发差异查看
    InlineDiffHandler->>DecorationManager: 请求装饰状态
    DecorationManager-->>InlineDiffHandler: 返回当前状态
    InlineDiffHandler->>User: 展示差异

Loading

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 4636c8a and 95fba12.

Files selected for processing (9)

• packages/ai-native/src/browser/model/enhanceDecorationsCollection.ts (10 hunks)
• packages/ai-native/src/browser/widget/inline-chat/inline-chat.handler.ts (2 hunks)
• packages/ai-native/src/browser/widget/inline-diff/inline-diff-previewer.ts (6 hunks)
• packages/ai-native/src/browser/widget/inline-diff/inline-diff-widget.tsx (3 hunks)
• packages/ai-native/src/browser/widget/inline-diff/inline-diff.handler.ts (4 hunks)
• packages/ai-native/src/browser/widget/inline-stream-diff/inline-stream-diff.handler.tsx (11 hunks)
• packages/ai-native/src/browser/widget/inline-stream-diff/live-preview-stack.ts (1 hunks)
• packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.component.tsx (1 hunks)
• packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.decoration.tsx (13 hunks)

Files skipped from review as they are similar to previous changes (3)

• packages/ai-native/src/browser/widget/inline-chat/inline-chat.handler.ts
• packages/ai-native/src/browser/widget/inline-stream-diff/live-preview-stack.ts
• packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.component.tsx

Additional context used

Biome

packages/ai-native/src/browser/widget/inline-diff/inline-diff.handler.ts

[error] 64-64: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

Additional comments not posted (16)

packages/ai-native/src/browser/model/enhanceDecorationsCollection.ts (2)

206-208: 引入 createDecorations 方法以增强可维护性。

新方法集中管理装饰的创建，提升了代码的可维护性。

Verification successful

---

createDecorations 方法使用验证成功。

createDecorations 方法在 EnhanceDecorationsCollection 类中的使用是正确的，没有发现任何不一致或问题。其他搜索结果与此验证无关。

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the createDecorations method in EnhanceDecorationsCollection.

# Test: Search for the usage of createDecorations. Expect: Consistent usage across the codebase.
rg --type typescript -A 5 $'createDecorations'

Length of output: 80

---

Script:

#!/bin/bash
# Description: Verify the usage of the createDecorations method in EnhanceDecorationsCollection.

# Test: Search for the usage of createDecorations. Expect: Consistent usage across the codebase.
rg --type ts -A 5 $'createDecorations'

Length of output: 8754

---

41-45: 使用元数据对象改进封装性。

构造函数现在使用一个元数据对象，这提高了封装性和代码可读性。

Verification successful

---

元数据结构的使用已验证。

在 enhanceDecorationsCollection.ts 文件中，DeltaDecorations 使用 metaData 对象进行实例化，确认了元数据结构的正确使用。

• 确认位置: packages/ai-native/src/browser/model/enhanceDecorationsCollection.ts

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the new metadata structure in DeltaDecorations.

# Test: Search for the instantiation of DeltaDecorations. Expect: Usage of the new metadata structure.
rg --type typescript -A 5 $'new DeltaDecorations'

Length of output: 85

---

Script:

#!/bin/bash
# Description: Verify the usage of the new metadata structure in DeltaDecorations.

# Test: Search for the instantiation of DeltaDecorations. Expect: Usage of the new metadata structure.
rg --type ts -A 5 $'new DeltaDecorations'

Length of output: 640

packages/ai-native/src/browser/widget/inline-diff/inline-diff.handler.ts (5)

76-84: 简化 storeState 方法。

通过直接引用 previewer，简化了状态存储逻辑。

---

89-99: 优化 tryRestoreState 方法。

通过直接从 _previewerNodeStore 获取节点，简化了状态恢复过程。

---

102-113: 调整 restoreState 方法以适应新策略。

方法现在接受 InlineStreamDiffHandler 节点，符合新的状态管理策略。

---

215-231: 改进 createDiffPreviewer 方法以管理单一实例。

方法根据 diff 模式初始化并显示 previewer，确保只管理一个实例。

---

257-261: 简化 destroyPreviewer 方法。

通过直接处理 previewer，简化了销毁过程。

packages/ai-native/src/browser/widget/inline-diff/inline-diff-widget.tsx (1)

Line range hint 127-146:
增强 InlineDiffWidget 类的功能和封装性。

类现在实现了 IInlineDiffPreviewerNode 接口，并添加了新的属性和方法。

packages/ai-native/src/browser/widget/inline-diff/inline-diff-previewer.ts (3)

71-74: node 属性的可选性处理

node 属性现在可能为 undefined，在调用相关方法时使用可选链操作符（如 this.node?.method()）是个不错的做法，确保在 node 未初始化时不会抛出运行时错误。

---

256-265: attachNode 方法的引入

attachNode 方法用于处理 node 的生命周期，确保在分配新节点时正确处理旧节点的清理工作。这种方法提高了节点管理的灵活性。

---

268-278: 改进的快照创建

createNodeSnapshot 方法现在支持创建新实例并恢复快照数据，这种改进增强了状态管理的能力，使得快照恢复更为高效。

packages/ai-native/src/browser/widget/inline-stream-diff/inline-stream-diff.handler.tsx (3)

44-50: 新增的快照数据接口

IInlineStreamDiffSnapshotData 接口为快照状态提供了结构化的管理方式，这种改进有助于更好地组织和管理处理程序中的状态。

---

122-140: 快照恢复方法

restoreSnapshot 方法通过使用新的接口来恢复状态，增强了状态管理的有效性和清晰度。这种方法确保了状态的一致性。

---

285-285: 状态类型的更改

states 类型从 IRemovedWidgetSerializedState[] 改为 IRemovedWidgetState[]，表明在处理已移除的 widget 状态时有了新的处理方式。

packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.decoration.tsx (2)

39-44: 新增的快照数据接口

ILivePreviewDiffDecorationSnapshotData 接口为装饰和 widget 状态的保存与恢复提供了结构化的管理方式，这种改进有助于更好地管理 UI 状态。

---

75-75: 构造函数简化

LivePreviewDiffDecorationModel 的构造函数现在只接受 monacoEditor 参数，这种简化提高了代码的可读性和维护性。

---

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?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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 as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 178 lines in your changes missing coverage. Please review.

Project coverage is 54.81%. Comparing base (83e2186) to head (95fba12).

Files	Patch %	Lines
...rowser/widget/inline-diff/inline-diff-previewer.ts	0.00%	40 Missing and 27 partials ⚠️
.../browser/widget/inline-diff/inline-diff.handler.ts	0.00%	46 Missing and 13 partials ⚠️
.../src/browser/model/enhanceDecorationsCollection.ts	0.00%	26 Missing and 2 partials ⚠️
...er/widget/inline-stream-diff/live-preview-stack.ts	0.00%	20 Missing and 2 partials ⚠️
.../browser/widget/inline-chat/inline-chat.handler.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3919      +/-   ##
==========================================
- Coverage   54.83%   54.81%   -0.03%     
==========================================
  Files        1560     1561       +1     
  Lines       95211    95260      +49     
  Branches    19504    19525      +21     
==========================================
+ Hits        52210    52214       +4     
- Misses      35716    35733      +17     
- Partials     7285     7313      +28     

Flag	Coverage Δ
jsdom	50.25% <0.00%> (-0.03%)	⬇️
node	15.53% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[coderabbitai]

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (1)

packages/ai-native/src/browser/model/enhanceDecorationsCollection.ts (1)

107-108: 建议为 setGroup 方法的参数添加类型注释。

方法的功能简单且正确，但缺少 group 参数的类型注释。建议如下：

setGroup(group: UndoRedoGroup): void {
  this._group = group;
}

[coderabbitai]

Actionable comments posted: 1

Outside diff range, codebase verification and nitpick comments (1)

packages/ai-native/src/browser/widget/inline-diff/inline-diff-previewer.ts (1)

35-35: 属性初始化改动

selection 属性被移到了 create 方法中，这样的改动提高了初始化的灵活性，但确保在调用其他依赖该属性的方法前已经正确初始化。