refactor: inline chat & input and support config #4339
Conversation
Ricbet
force-pushed
the
feat/improve-inline-chat
branch
2 times, most recently
from
015357e to
39a42b8
Compare
Ricbet
force-pushed
the
feat/improve-inline-chat
branch
from
39a42b8 to
af886a0
Compare
Ricbet
changed the title
输出过程的样式感觉可以优化一下只留一个 loading 就行了，另外这里好像重复展示 Hover 和 Input 组件了 |
done |
Walkthrough此次 PR 主要针对 AI 原生模块的多个组件和服务进行重构和扩展，涉及内联聊天与输入功能的逻辑调整。具体改动包括新增上下文键、服务类重命名、方法签名更新、新命令与事件的添加，以及样式和配置项的更新。此外，对 diff 预览、内联提示、内联输入组件及其模型进行了重构，为内联输入的流式处理和交互管理提供了新的实现路径，同时调整了相关导入和依赖。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant IC as InlineInputController
participant IS as InlineInputService
participant LPS as LanguageParserService
participant E as 编辑器
U->>IC: 触发内联输入（点击/选中）
IC->>IS: 调用 showInputInEmptyLine/Selection 方法
IS->>LPS: 查找最近代码块 (visibleByNearestCodeBlock)
LPS-->>IS: 返回代码块信息
IS->>IC: 触发 onInteractiveInputVisibleInSelection 事件
IC->>E: 更新内联输入显示状态
sequenceDiagram
participant U as 用户操作
participant ICE as InlineChatEditorController
participant CT as ContextKey 服务
U->>ICE: 触发 mount 事件
ICE->>CT: 检查 inlineInputWidgetIsVisible 与 inlineInputWidgetIsStreaming
alt 存在活动的内联输入
CT-->>ICE: 返回 true
ICE->>ICE: 阻止内联聊天显示
else 无内联输入活动
CT-->>ICE: 返回 false
ICE->>ICE: 展示内联聊天
end
Possibly related PRs
Suggested labels
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 Tip 🌐 Web search-backed reviews and chat
✨ 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: 4
🧹 Nitpick comments (10)
packages/ai-native/src/browser/widget/inline-diff/inline-diff-previewer.ts (2)
257-270: 建议避免使用非空断言运算符 '!'在
SideBySideInlineDiffWidget类的onData方法中，使用了this.node?.getModifiedModel()!。为了提高代码的健壮性，建议避免使用非空断言运算符，改为添加适当的空值检查，确保modifiedModel不为undefined，以防止潜在的运行时错误。
395-397: 建议在 onData 方法中增加节点存在性检查在
LiveInlineDiffPreviewer类的onData方法中，调用了this.node?.addLinesToDiff(...)。虽然使用了可选链操作符，但为了代码的可读性和可靠性，建议显式检查this.node是否存在，或者确保在调用前this.node已被正确初始化。packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts (1)
247-339: 建议：提取公共逻辑，减少代码重复
showInputInEmptyLine和showInputInSelection方法中存在大量相似的代码，尤其是在处理inlineInputChatWidget的事件监听和inputDisposable的管理上。建议将这些重复的代码提取到一个私有方法中，以提高代码的可维护性和可读性。Also applies to: 374-453
packages/ai-native/src/browser/widget/inline-input/model.ts (1)
23-25: 建议添加参数类型检查在
setStrategyHandler方法中，建议添加参数非空检查以提高代码健壮性。public setStrategyHandler(fn: TRunStrategyFn): void { + if (!fn) { + throw new Error('Strategy handler cannot be undefined'); + } this._strategyHandler = fn; }packages/core-browser/src/components/ai-native/ai-action/index.tsx (1)
96-108: Logo 渲染逻辑优化新增的 Logo 渲染逻辑具有良好的扩展性，支持多种类型的 logo 配置：
- 字符串类型的图片 URL
- React 元素
- 函数组件
建议添加类型验证以提高代码健壮性。
const Logo = useMemo(() => { const InlineChatLogo = aiNativeConfigService.inlineChat.logo; + if (!InlineChatLogo) { + return null; + } if (typeof InlineChatLogo === 'string') { return <img src={InlineChatLogo} className={styles.ai_action_icon} />; } else if (React.isValidElement(InlineChatLogo)) { return InlineChatLogo; } else if (typeof InlineChatLogo === 'function') { return <InlineChatLogo />; } return null; }, [aiNativeConfigService.inlineChat.logo]);packages/core-common/src/types/ai-native/index.ts (1)
69-82: 新增内联聊天配置接口
IAINativeInlineChatConfig接口设计合理，提供了完整的类型定义：
inputWidth: 控制输入框宽度inputKeybinding: 自定义快捷键logo: 支持多种类型的 logo 配置建议为
inputWidth添加单位说明。export interface IAINativeInlineChatConfig { /** - * inline chat 的 input 默认宽度 + * inline chat 的 input 默认宽度（单位：像素） */ inputWidth?: number; /** * 唤起 input 的默认快捷键 */ inputKeybinding?: string; /** * inline chat 的 logo，支持图片和 react 组件 */ logo?: string | React.ReactNode | React.ComponentType<any>; }packages/core-browser/src/components/ai-native/ai-action/index.module.less (1)
13-37: 建议优化 loading 状态的样式实现当前的实现方式可以改进：
- loading_mask 使用绝对定位可能导致在某些场景下的定位问题
- 硬编码的左边距（18px）不够灵活
建议如下改进：
.loading_mask { cursor: not-allowed; position: absolute; z-index: 1; - left: 18px; + left: var(--loading-mask-offset, 18px); right: 0; height: 100%; background-color: var(--kt-input-disableBackground); + display: flex; + align-items: center; }packages/ai-native/src/browser/widget/inline-chat/inline-content-widget.tsx (3)
24-25: 服务解耦和重命名改进了架构设计！将
AIInlineChatService重命名为InlineChatService并引入独立的InlineInputService，体现了更好的关注点分离，使得内联聊天和输入功能各司其职。Also applies to: 29-29
115-115: 优化 renderContent 的依赖数组
renderContent回调函数的依赖数组中使用了status，但函数内部使用的是通过status计算的isError和isDone。建议修改依赖数组以匹配实际使用的变量。- }, [operationList, moreOperation, onResultClick, status]); + }, [operationList, moreOperation, onResultClick, isError, isDone, isLoading, handleClickActions, handleClose]);
176-182: 建议添加方法文档说明交互逻辑
clickActionId方法在处理InteractiveInputModel.ID时的行为（隐藏当前widget并显示input widget）值得添加详细的文档说明。+ /** + * 处理动作点击事件 + * @param actionId 动作ID + * @param source 事件来源 + * + * 特殊处理： + * - 当 actionId 为 InteractiveInputModel.ID 时，会隐藏当前的 inline chat widget + * 并通过 inlineInputService 显示 inline input widget + */ public clickActionId(actionId: string, source: string): void {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
packages/ai-native/src/browser/ai-core.contextkeys.ts(3 hunks)packages/ai-native/src/browser/ai-core.contribution.ts(10 hunks)packages/ai-native/src/browser/index.ts(2 hunks)packages/ai-native/src/browser/widget/inline-chat/inline-chat-editor.controller.ts(7 hunks)packages/ai-native/src/browser/widget/inline-chat/inline-chat.feature.registry.ts(4 hunks)packages/ai-native/src/browser/widget/inline-chat/inline-chat.service.ts(1 hunks)packages/ai-native/src/browser/widget/inline-chat/inline-content-widget.tsx(4 hunks)packages/ai-native/src/browser/widget/inline-diff/inline-diff-previewer.ts(9 hunks)packages/ai-native/src/browser/widget/inline-hint/inline-hint.controller.ts(1 hunks)packages/ai-native/src/browser/widget/inline-input/inline-input-widget.tsx(5 hunks)packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts(2 hunks)packages/ai-native/src/browser/widget/inline-input/inline-input.service.ts(1 hunks)packages/ai-native/src/browser/widget/inline-input/model.ts(1 hunks)packages/core-browser/src/ai-native/ai-config.service.ts(4 hunks)packages/core-browser/src/ai-native/command.ts(1 hunks)packages/core-browser/src/components/ai-native/ai-action/index.module.less(3 hunks)packages/core-browser/src/components/ai-native/ai-action/index.tsx(5 hunks)packages/core-browser/src/components/ai-native/interactive-input/index.tsx(1 hunks)packages/core-browser/src/contextkey/ai-native.ts(1 hunks)packages/core-common/src/types/ai-native/index.ts(1 hunks)packages/i18n/src/common/en-US.lang.ts(1 hunks)packages/i18n/src/common/zh-CN.lang.ts(1 hunks)packages/overlay/src/browser/message.service.tsx(0 hunks)packages/startup/entry/web/render-app.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- packages/overlay/src/browser/message.service.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: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: unittest (macos-latest, 18.x, node)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: ubuntu-latest, Node.js 20.x
- GitHub Check: build-windows
🔇 Additional comments (28)
packages/ai-native/src/browser/widget/inline-chat/inline-chat.feature.registry.ts (1)
114-142: 代码重构清晰，职责划分明确
registerInteractiveInput方法的重构通过使用InlineInputService，使代码结构更加清晰，职责划分更为明确。这符合模块化设计的最佳实践，增强了代码的可维护性和可扩展性。packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts (1)
128-131: 确认取消流式操作后的状态一致性在
cancelToken方法中，除了设置inlineInputWidgetIsStreaming为false，还需要确保其他与流式操作相关的状态也被正确重置。例如，检查是否需要重置界面上的加载状态或进度指示器。packages/ai-native/src/browser/widget/inline-chat/inline-chat.service.ts (1)
8-18: 代码重构合理，命名清晰将
AIInlineChatService重命名为InlineChatService，并相应地调整了事件和方法，符合模块职责分离的原则，代码命名更加清晰明确。packages/core-browser/src/contextkey/ai-native.ts (1)
9-11: 新增上下文键定义规范添加了新的上下文键
InlineInputWidgetIsStreaming，用于表示内联输入控件的流式状态。定义规范，符合上下文键的命名和使用规范。packages/core-browser/src/ai-native/command.ts (1)
9-11: 命令常量定义正确！新增的取消命令常量遵循了现有的命名规范，并且与其他内联聊天相关命令保持一致。
packages/core-browser/src/ai-native/ai-config.service.ts (1)
25-29: 默认配置设置合理！默认的内联聊天配置包含了必要的参数，并且使用了合理的默认值：
- 输入框宽度设置为 320px 适合大多数使用场景
- 快捷键组合 'ctrlcmd+k' 符合用户习惯
- 默认 logo 组件的使用保持了界面一致性
packages/ai-native/src/browser/ai-core.contextkeys.ts (1)
26-26: 上下文键集成完善！新增的
inlineInputWidgetIsStreaming上下文键：
- 正确集成到了现有的上下文键系统中
- 遵循了统一的初始化模式
- 为流式处理状态提供了必要的追踪能力
Also applies to: 39-39
packages/ai-native/src/browser/widget/inline-hint/inline-hint.controller.ts (1)
1-119: 代码重构改进了关注点分离移除
inlineInputChatService的依赖使得内联提示控制器的职责更加清晰，这与 PR 的重构目标保持一致。packages/ai-native/src/browser/widget/inline-input/inline-input-widget.tsx (3)
17-24: 接口扩展支持默认值配置通过
defaultValue属性的添加，提高了组件的可配置性和灵活性。
89-94: 事件处理机制的改进新增的事件发射器
_onInteractiveInputValue和_onClose使组件能够更好地与外部系统进行交互。
75-75: 使用配置服务优化维护性从硬编码宽度值切换到使用
aiNativeConfigService.inlineChat.inputWidth提高了代码的可维护性。packages/startup/entry/web/render-app.tsx (1)
100-102: AI 聊天图标集成到菜单栏将
AI_CHAT_LOGO_AVATAR_ID添加到DESIGN_MENU_BAR_RIGHT模块数组中，合理地集成了 AI 聊天功能的视觉元素。packages/ai-native/src/browser/index.ts (1)
92-94: 服务重命名提升代码清晰度将
AIInlineChatService重命名为InlineChatService使命名更加简洁，同时保持了依赖注入的正确配置。packages/core-browser/src/components/ai-native/ai-action/index.tsx (2)
86-86: 依赖注入优化使用
useInjectable注入AINativeConfigService服务，符合依赖注入最佳实践。
158-158: 条件渲染优化合理使用条件渲染 Logo 和分隔线，提高了组件的灵活性。
packages/core-browser/src/components/ai-native/interactive-input/index.tsx (2)
48-48: 新增默认值属性在
IInteractiveInputProps接口中添加defaultValue属性，增强了组件的可配置性。
55-55: 状态管理优化使用
defaultValue || props.value || ''的优先级顺序初始化内部状态，符合 React 受控组件的最佳实践。packages/core-common/src/types/ai-native/index.ts (1)
86-89: 废弃提示优化使用
@deprecated标记废弃属性，并提供明确的替代方案，有助于代码维护。packages/ai-native/src/browser/widget/inline-chat/inline-chat-editor.controller.ts (3)
55-57: 服务类型更改提升了模块化程度将
aiInlineChatService的类型从AIInlineChatService更改为InlineChatService有助于更好地分离关注点。
203-212: 方法可见性修改增强了灵活性将
disposeAllWidget从私有方法改为公共方法使其可以被外部组件调用，提高了代码的可重用性。
230-240: 新增内联输入可见性检查增强了用户体验添加了对
inlineInputWidgetIsVisible和inlineInputWidgetIsStreaming的检查，避免了内联聊天和输入组件的冲突。packages/ai-native/src/browser/ai-core.contribution.ts (2)
427-461: 命令执行逻辑优化提升了用户体验内联输入显示命令的执行逻辑得到了增强：
- 先隐藏内联聊天，避免界面冲突
- 基于编辑器状态和光标位置智能决定显示位置
- 支持空行和选中文本的不同处理逻辑
463-470: 新增取消命令增强了用户控制添加了
AI_INLINE_CHAT_INTERACTIVE_INPUT_CANCEL命令，使用户可以随时取消正在进行的内联输入操作。packages/i18n/src/common/zh-CN.lang.ts (1)
1228-1235: 新增本地化字符串完善了用户界面反馈添加了以下中文本地化字符串：
- 内联聊天操作标题
- 输入占位符提示
- 生成取消提示
这些字符串使用户界面更加友好和完整。
packages/i18n/src/common/en-US.lang.ts (1)
1460-1467: 新增的内联聊天本地化字符串看起来不错！这些字符串提供了良好的用户体验，特别是：
- 使用参数化的标题格式
Chat({0})，支持动态内容- 清晰的操作取消提示信息
packages/core-browser/src/components/ai-native/ai-action/index.module.less (2)
49-57: logo_container 的样式实现看起来不错！良好的实践：
- 使用固定尺寸（16x16）确保一致的显示效果
- 使用 object-fit: cover 确保图片正确填充容器
- 使用 inherit 继承宽度保持灵活性
80-85: operate_item 的样式设计合理！良好的实践：
- 使用统一的高度和行高（24px）
- 适当的内边距（6px）和圆角（4px）提供了良好的视觉效果
- 样式与整体设计语言保持一致
packages/ai-native/src/browser/widget/inline-chat/inline-content-widget.tsx (1)
127-128: 依赖注入使用得当！使用
@Autowired装饰器注入InlineInputService符合依赖注入的最佳实践。
packages/ai-native/src/browser/widget/inline-input/inline-input.service.ts
Show resolved
Hide resolved
packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts
Show resolved
Hide resolved
packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts
Show resolved
Hide resolved
|
/next |
|
🎉 PR Next publish successful! 3.7.1-next-1738824147.0 |
Types
Background or solution
improve_inline_input.mp4
Changelog
重构 inline input 与 inline chat 的代码
Summary by CodeRabbit
新功能
界面与样式更新
配置与本地化