Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

ensorrow
Copy link
Contributor

@ensorrow ensorrow commented Mar 11, 2025

Types

  • 🎉 New Features

Background or solution

feat: support chat reasoning
image

Changelog

feat: support chat reasoning

Summary by CodeRabbit

  • 新功能
    • 聊天对话现支持全新的推理反馈类型,为用户提供更深层次的信息展示。
    • 聊天界面新增专用布局和样式,直观呈现推理内容,提升整体阅读体验。
    • 更新本地化字符串“深度思考”,增强用户体验。
  • 修复
    • 移除了聊天回复组件中的停止功能,简化了用户交互流程。

@opensumi opensumi bot added the 🎨 feature feature required label Mar 11, 2025
Copy link
Contributor

coderabbitai bot commented Mar 11, 2025

Walkthrough

本次 PR 在多个模块中增加了对 “reasoning” 内容类型的支持。主要改动包括在聊天模型中引入新的类型 IChatReasoning 并更新类型联合,同时调整了处理 streaming 数据的逻辑以支持 “reasoning” 分块。此外,前端组件也相应更新:在 ChatReply 组件中移除了停止 AI 交互的功能,并新增了用于显示 reasoning 状态的图标,同时更新了相关 CSS 样式。整体上,更新使得系统能正确处理和展示 reasoning 类型的内容。

Changes

文件(s) 描述
packages/ai-native/src/browser/…/chat/chat-model.ts,
packages/ai-native/src/node/base-language-model.ts,
packages/core-common/src/…/ai-native/index.ts
增加 IChatReasoning 类型及其在响应内容联合类型中的支持,更新对应方法逻辑以处理 “reasoning” 类型数据(包括新增、合并响应及流处理逻辑)。
packages/ai-native/src/browser/components/ChatReply.tsx,
packages/ai-native/src/browser/components/components.module.less
移除 ChatReply 组件中的 onStop 函数,新增用于切换 reasoning 项目折叠状态的图标,并更新 .reasoning 样式以调整显示效果。
packages/ai-native/src/browser/components/ChatThinking.tsx 修改 renderContent 函数的条件逻辑,简化渲染判断。
packages/i18n/src/common/en-US.lang.ts,
packages/i18n/src/common/zh-CN.lang.ts
更新本地化字符串以支持 “thinking” 状态的显示。

Sequence Diagram(s)

sequenceDiagram
    participant BLM as BaseLanguageModel
    participant CRM as ChatResponseModel
    participant CR as ChatReply

    BLM->>CRM: 传递“reasoning”文本增量
    CRM->>CRM: 检查最后响应是否为“reasoning”
    CRM-->>CRM: 新增或更新响应部分
    CRM->>CR: 更新响应文本(返回空字符串)
    CR->>CR: 根据“reasoning”类型渲染特定内容
Loading

Possibly related PRs

Suggested reviewers

  • Aaaaash
  • Ricbet

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

yarn install v1.22.22
[1/4] Resolving packages...
warning [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
warning eslint > @humanwhocodes/[email protected]: Use @eslint/config-array instead
warning eslint > @humanwhocodes/config-array > @humanwhocodes/[email protected]: Use @eslint/object-schema instead
warning eslint > file-entry-cache > flat-cache > [email protected]: Rimraf versions prior to v4 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
warning eslint-import-resolver-typescript > [email protected]: Glob versions prior to v9 are no longer supported
error Couldn't find any versions for "@opensumi/ide-dev-tool" that matches "workspace:*"
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 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>, please review it.
    • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @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 using 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 generate docstrings to generate docstrings for this 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.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
packages/ai-native/src/browser/chat/chat-model.ts (2)

137-147: 处理 reasoning 内容的实现需要优化

该实现处理了 'reasoning' 类型的内容,但存在几个潜在问题:

  1. 仅在创建新响应部分时移除 <think> 标签,连接现有内容时没有处理此标签。如果在流式内容中间出现 <think> 标签可能导致不一致。
  2. 缺乏对 progress.content 的类型验证,假设它始终是字符串。

建议修改为:

      } else if (progress.kind === 'reasoning') {
        const lastResponsePart = this.#responseParts[responsePartLength];
        if (!lastResponsePart || lastResponsePart.kind !== 'reasoning') {
          // 去掉开头的 <think> 标签
-         this.#responseParts.push({ content: progress.content.replace(/^<think>/, ''), kind: 'reasoning' });
+         // 确保 content 是字符串并处理标签
+         const content = typeof progress.content === 'string' ? progress.content.replace(/^<think>/, '') : '';
+         this.#responseParts.push({ content, kind: 'reasoning' });
        } else {
          this.#responseParts[responsePartLength] = {
-           content: lastResponsePart.content + progress.content,
+           // 确保 content 是字符串并处理可能出现的标签
+           content: lastResponsePart.content + (typeof progress.content === 'string' ? progress.content.replace(/^<think>/, '') : ''),
            kind: 'reasoning',
          };
        }

141-141: 代码注释应使用英文

// 去掉开头的 <think> 标签

建议将中文注释改为英文,以保持代码库的一致性和可读性。

-        // 去掉开头的 <think> 标签
+        // Remove the <think> tag from the beginning
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 76ef79f and d4eaec1.

📒 Files selected for processing (5)
  • packages/ai-native/src/browser/chat/chat-model.ts (5 hunks)
  • packages/ai-native/src/browser/components/ChatReply.tsx (2 hunks)
  • packages/ai-native/src/browser/components/components.module.less (1 hunks)
  • packages/ai-native/src/node/base-language-model.ts (1 hunks)
  • packages/core-common/src/types/ai-native/index.ts (1 hunks)
⏰ 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: ubuntu-latest, Node.js 20.x
  • GitHub Check: build (macos-latest, 20.x)
  • GitHub Check: unittest (macos-latest, 18.x, node)
🔇 Additional comments (11)
packages/ai-native/src/browser/components/components.module.less (1)

545-549: 新增的样式类符合设计需求

新增的 .reasoning 样式类设计合理,用于显示推理内容。使用左侧边框和适当的内边距可以直观地区分推理内容与其他内容类型。代码使用了 CSS 变量 var(--design-text-foreground) 来保持颜色的一致性和主题兼容性。

样式简洁明了,符合整体的设计风格。

packages/ai-native/src/node/base-language-model.ts (1)

188-192: 新增对 reasoning 类型的处理逻辑

handleStreamingRequest 方法中增加了对 reasoning 类型的处理。实现方式与其他类型处理保持一致,将 reasoning 类型的内容通过 chatReadableStream.emitData 方法发送给客户端。

代码实现简洁有效,遵循了已有的代码模式,使系统能够正确处理推理内容流。

packages/ai-native/src/browser/components/ChatReply.tsx (2)

1-1: 导入 classnames 库

添加了 classnames 库的导入,用于条件性地应用 CSS 类。这是一个常用且实用的工具库,可以简化多个 CSS 类的条件组合。


317-322: 实现 reasoning 类型内容的渲染逻辑

ChatReply 组件添加了针对 reasoning 类型的条件分支,使用 classnames 库(作为 cls 导入)条件性地应用样式。当响应完成时,会添加 collapse 类,可能用于折叠或改变显示方式。

渲染结构简洁明了,与其他内容类型的处理方式一致,提供了良好的用户体验。

packages/core-common/src/types/ai-native/index.ts (2)

404-407: 定义 IChatReasoning 接口

新增的 IChatReasoning 接口定义了推理内容的数据结构,包含 content 字符串属性和固定为 'reasoning'kind 属性。接口定义清晰,符合现有的接口设计模式。


409-416: 扩展 IChatProgress 联合类型

将新增的 IChatReasoning 类型添加到 IChatProgress 联合类型中,使其成为可以在聊天进度中使用的有效内容类型。这种方式保持了类型系统的一致性,确保了新功能与现有系统的无缝集成。

packages/ai-native/src/browser/chat/chat-model.ts (5)

9-9: 添加了新的接口导入

新增的 IChatReasoning 接口导入正确,这是支持聊天推理功能的基础类型。


37-38: 类型联合正确扩展

IChatReasoning 添加到 IChatProgressResponseContent 类型联合中,正确地扩展了系统支持的内容类型。


198-200: 正确处理 reasoning 类型的文本显示

对于 'reasoning' 类型的内容返回空字符串是合理的,这表明推理内容不应该作为常规响应文本的一部分,而可能在 UI 中有特殊的展示方式。


407-407: 扩展了可处理的内容类型

将 'reasoning' 添加到 basicKind 数组中,使 acceptResponseProgress 方法能够正确处理这种新的内容类型。


5-13:

✅ Verification successful

验证 IChatReasoning 接口的定义和实现

根据 AI 摘要,IChatReasoning 接口在 packages/core-common/src/types/ai-native/index.ts 中定义,包含 content (字符串类型) 和 kind (值为 'reasoning') 属性。建议确认该接口的完整定义与这里的使用方式一致。


🏁 Script executed:

#!/bin/bash
# 检查 IChatReasoning 接口定义
cat packages/core-common/src/types/ai-native/index.ts | grep -A 10 "export interface IChatReasoning"

Length of output: 308


接口定义验证通过,无需额外修改

检查显示 IChatReasoning 接口在 packages/core-common/src/types/ai-native/index.ts 中正确定义为包含 content: stringkind: 'reasoning' 两个属性,与在 chat-model.ts 中的使用一致,无需进一步调整。

Copy link

codecov bot commented Mar 11, 2025

Codecov Report

Attention: Patch coverage is 33.33333% with 8 lines in your changes missing coverage. Please review.

Project coverage is 53.23%. Comparing base (76ef79f) to head (c9e5319).
Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
packages/ai-native/src/browser/chat/chat-model.ts 40.00% 5 Missing and 1 partial ⚠️
packages/ai-native/src/node/base-language-model.ts 0.00% 1 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4470      +/-   ##
==========================================
- Coverage   53.24%   53.23%   -0.01%     
==========================================
  Files        1663     1663              
  Lines      102608   102619      +11     
  Branches    22196    22209      +13     
==========================================
+ Hits        54631    54632       +1     
- Misses      39918    39926       +8     
- Partials     8059     8061       +2     
Flag Coverage Δ
jsdom 48.72% <33.33%> (-0.01%) ⬇️
node 12.20% <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.

🚀 New features to boost your workflow:
  • Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/ai-native/src/browser/components/ChatThinking.tsx (1)

35-45: 条件逻辑简化很好,但有一个小问题

您已经简化了条件逻辑,不再检查 message 的内容,仅检查 children 是否存在。然而在 useCallback 的依赖数组中,message 仍被列为依赖项,尽管它不再在函数体中使用。

建议从依赖数组中移除 message

  const renderContent = useCallback(() => {
    if (!children) {
      if (CustomThinkingRender) {
        return <CustomThinkingRender thinkingText={thinkingText} />;
      }

      return <span className={styles.thinking_text}>{thinkingText || 'Thinking...'}</span>;
    }

    return children;
- }, [message, children, thinkingText, CustomThinkingRender]);
+ }, [children, thinkingText, CustomThinkingRender]);
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d4eaec1 and a681cb2.

📒 Files selected for processing (8)
  • packages/ai-native/src/browser/components/ChatReply.tsx (2 hunks)
  • packages/ai-native/src/browser/components/components.module.less (1 hunks)
  • packages/ai-native/src/browser/components/ChatReply.tsx (3 hunks)
  • packages/ai-native/src/browser/components/ChatThinking.tsx (1 hunks)
  • packages/ai-native/src/browser/components/components.module.less (1 hunks)
  • packages/i18n/src/common/en-US.lang.ts (1 hunks)
  • packages/i18n/src/common/zh-CN.lang.ts (1 hunks)
  • packages/ai-native/src/browser/components/ChatReply.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ai-native/src/browser/components/ChatReply.tsx
  • packages/ai-native/src/browser/components/components.module.less
  • packages/ai-native/src/browser/components/ChatReply.tsx
  • packages/ai-native/src/browser/components/components.module.less
  • packages/ai-native/src/browser/components/ChatReply.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
  • GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
  • GitHub Check: build (ubuntu-latest, 20.x)
  • GitHub Check: unittest (ubuntu-latest, 18.x, node)
  • GitHub Check: unittest (macos-latest, 18.x, jsdom)
  • GitHub Check: build (macos-latest, 20.x)
  • GitHub Check: build-windows
  • GitHub Check: unittest (macos-latest, 18.x, node)
  • GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (2)
packages/i18n/src/common/zh-CN.lang.ts (1)

1230-1230: 添加的本地化字符串看起来很好!

这个新增的本地化字符串 'aiNative.chat.thinking': '深度思考中' 与 PR 描述中提到的"支持聊天推理"功能保持一致,并且遵循了现有的命名模式。这将为用户提供更好的交互体验,让他们知道 AI 正在进行深度思考过程。

packages/i18n/src/common/en-US.lang.ts (1)

1462-1462: 新增的本地化字符串看起来很好!

这个添加支持了新的 reasoning 内容类型,为用户提供了更好的体验提示。

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🔭 Outside diff range comments (1)
packages/ai-native/src/browser/components/ChatReply.tsx (1)

239-249: ⚠️ Potential issue

疑似遗留代码块无法正常生效。
这段 useEffect 中使用了 disposableCollection,但没有显式调用或处理 setCollapseThinkingIndexSet,代码逻辑似乎不完整,很可能是合并冲突后遗留的重复/无用片段。应尽快删除或完善,以避免维护成本与潜在Bug。

您可考虑类似以下修正(若无逻辑需求,可直接移除该段):

- useEffect(() => {
-   const disposableCollection = new DisposableCollection();
-
-       new Set(
-         request.response.responseContents...
-       ),
-     );
- }, [request.response.isComplete]);
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a681cb2 and c9e5319.

📒 Files selected for processing (11)
  • packages/ai-native/src/browser/components/ChatReply.tsx (2 hunks)
  • packages/ai-native/src/browser/components/components.module.less (1 hunks)
  • packages/ai-native/src/browser/components/ChatReply.tsx (3 hunks)
  • packages/ai-native/src/browser/components/components.module.less (1 hunks)
  • packages/i18n/src/common/en-US.lang.ts (1 hunks)
  • packages/i18n/src/common/zh-CN.lang.ts (1 hunks)
  • packages/ai-native/src/browser/components/ChatReply.tsx (1 hunks)
  • packages/ai-native/src/browser/components/ChatReply.tsx (1 hunks)
  • packages/ai-native/src/browser/components/components.module.less (1 hunks)
  • packages/i18n/src/common/en-US.lang.ts (1 hunks)
  • packages/i18n/src/common/zh-CN.lang.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (10)
  • packages/ai-native/src/browser/components/components.module.less
  • packages/ai-native/src/browser/components/ChatReply.tsx
  • packages/ai-native/src/browser/components/ChatReply.tsx
  • packages/i18n/src/common/en-US.lang.ts
  • packages/i18n/src/common/en-US.lang.ts
  • packages/i18n/src/common/zh-CN.lang.ts
  • packages/ai-native/src/browser/components/ChatReply.tsx
  • packages/ai-native/src/browser/components/components.module.less
  • packages/i18n/src/common/zh-CN.lang.ts
  • packages/ai-native/src/browser/components/components.module.less
⏰ 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: ubuntu-latest, Node.js 20.x
  • GitHub Check: build (ubuntu-latest, 20.x)
  • GitHub Check: build (macos-latest, 20.x)
  • GitHub Check: build-windows
🔇 Additional comments (3)
packages/ai-native/src/browser/components/ChatReply.tsx (3)

44-44: 引入本地化函数,便于国际化。
此处新增了 localize 的导入,在后续用到 localize('aiNative.chat.thinking'),有助于界面文本的多语言支持。


229-237: 使用 Set 管理 reasoning 折叠状态的逻辑明确。
当请求未完成时默认不折叠;完成后对所有 reasoning 项进行折叠的策略看起来符合预期。如果后续要改变默认的折叠行为,可在这里加以调整。


368-368: 在依赖数组中加入折叠状态,确保组件及时刷新。
collapseThinkingIndexSet 加入依赖,能让 toggle 操作立刻触发重渲染,逻辑正确。

@life2015 life2015 merged commit 36f67c8 into main Mar 11, 2025
13 checks passed
@life2015 life2015 deleted the feat/chat-reasoning branch March 11, 2025 11:08
@erha19 erha19 mentioned this pull request May 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎨 feature feature required
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants