Skip to content

feat: implement useSmoothStream hook for dynamic text rendering #8070

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

MyPrototypeWhat
Copy link
Collaborator

@MyPrototypeWhat MyPrototypeWhat commented Jul 11, 2025

Smooth流功能:

  • 轻量化,只需hook+markdown接入即可
  • 智能化,保证smooth流的同时自适应输出速度,与接口请求几乎同时完成,避免用户点击暂停时接口已完成
  • 使用Array.from字符分割,保证任意字符和emojy的完整性
smooth-stream.mp4

- Added a new custom hook `useSmoothStream` to manage smooth text streaming with adjustable delays.
- Integrated `useSmoothStream` into the Markdown component to enhance content display during streaming.
- Implemented logic to handle content updates and reset conditions based on block status.
- Updated the `addChunk` function to split text into characters for Chinese and words for English using a regular expression.
- Improved text rendering logic to support mixed language content more effectively.
@MyPrototypeWhat MyPrototypeWhat requested review from kangfenmao, alephpiece, teojs, DeJeune, eeee0717 and 0xfullex and removed request for kangfenmao July 11, 2025 09:20
@MyPrototypeWhat
Copy link
Collaborator Author

录屏帧率有限 可以切到分支体验一下

@alephpiece
Copy link
Collaborator

好像会无法正确渲染,要切换话题再切换回来才行

image

@alephpiece
Copy link
Collaborator

模型是 gemini 2.5 flash lite preview 06-14
系统提示词是:

## 角色定位
你是一位专业的Markdown语法生成专家,专注于创建复杂的Markdown测试文档。你将严格遵循CommonMark规范并支持GFM(GitHub Flavored Markdown)扩展特性。

## 核心能力要求
必须精通以下Markdown元素:
   - 数学公式(同时支持`$...$`行内和`$$...$$`行间公式,以及`\(...\)`行内和`\[...\]`行间格式)
   - 多级嵌套列表(支持有序、无序和任务列表的任意组合嵌套)
   - 代码块(至少要支持 C++/HTML/Mermaid/PlantUML/DOT 代码块)
   - GFM特性(表格、删除线、任务列表、自动链接等)

## 响应规范
当收到生成请求时:
1. 首先生成文档结构大纲
2. 依次展示每种语法元素的实现示例
3. 包含至少一个包含所有特性的综合示例
4. 所有代码块必须标注语言类型
5. 数学公式需要同时演示两种包围符格式

请根据实际需求调整此模板,特别注意:
1. 数学公式需要严格遵守 KaTeX 或 MathJax 规范,避免引入不支持的语法或 packages
2. Mermaid/PlantUML/DOT 等图标代码块必须使用英文 label 和描述
3. 嵌套列表要展示至少4级深度
4. 表格应演示文本对齐功能(如`:--:`居中)

@alephpiece
Copy link
Collaborator

看起来像是换行符被吞掉了一样

…hStream hook

- Updated the regular expression to enhance text splitting capabilities, allowing for better handling of mixed language content, including Chinese characters and alphanumeric sequences.
@MyPrototypeWhat
Copy link
Collaborator Author

看起来像是换行符被吞掉了一样

正则的问题,改了一下 再看看

@alephpiece
Copy link
Collaborator

公式好像还是有问题

image
1.  $$ \nabla_X Y = X^\mu (\partial_\mu Y^\nu + \Gamma^\nu_{\mu \sigma} Y^\sigma) \frac{\partial}{\partial x^\nu} $$
2.  $$ R^\rho_{\sigma \mu \nu} = \partial_\mu \Gamma^\rho_{\nu \sigma} - \partial_\nu \Gamma^\rho_{\mu \sigma} + \Gamma^\rho_{\mu \lambda} \Gamma^\lambda_{\nu \sigma} - \Gamma^\rho_{\nu \lambda} \Gamma^\lambda_{\mu \sigma} $$

@MyPrototypeWhat
Copy link
Collaborator Author

公式好像还是有问题

image
1.  $$ \nabla_X Y = X^\mu (\partial_\mu Y^\nu + \Gamma^\nu_{\mu \sigma} Y^\sigma) \frac{\partial}{\partial x^\nu} $$

2.  $$ R^\rho_{\sigma \mu \nu} = \partial_\mu \Gamma^\rho_{\nu \sigma} - \partial_\nu \Gamma^\rho_{\mu \sigma} + \Gamma^\rho_{\mu \lambda} \Gamma^\lambda_{\nu \sigma} - \Gamma^\rho_{\nu \lambda} \Gamma^\lambda_{\mu \sigma} $$

那就还是正则写的不够匹配 保底方案就是用Array.from,切分每个字符

@alephpiece alephpiece added the needs-review the feature/bug/pr needs a product/development reviewing label Jul 13, 2025
- Replaced the regular expression for character extraction with a direct conversion of the chunk to an array of characters.
- This change streamlines the chunk processing logic, enhancing performance and readability.
@MyPrototypeWhat
Copy link
Collaborator Author

@alephpiece 改成Array.from了 我试了下没问题了

@alephpiece
Copy link
Collaborator

开启网络搜索的时候,好像偶尔会出现链接标签闪烁

CherryStudio-PR8070.mp4

- Enhanced the Markdown component to accept an optional post-processing function for text manipulation during streaming.
- Updated MainTextBlock to utilize the new postProcess prop, allowing for dynamic content adjustments based on citation references.
@MyPrototypeWhat
Copy link
Collaborator Author

MyPrototypeWhat commented Jul 15, 2025

开启网络搜索的时候,好像偶尔会出现链接标签闪烁

CherryStudio-PR8070.mp4

Fix

cs0715.mp4

@DeJeune
Copy link
Collaborator

DeJeune commented Jul 15, 2025

测试没过

- Modified the mock implementation of the Markdown component to accept and apply an optional postProcess function, ensuring that the test environment accurately reflects the updated functionality introduced in the previous commit.
@MyPrototypeWhat
Copy link
Collaborator Author

测试没过

ok了

@DeJeune DeJeune added this to the v1.5.1 milestone Jul 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs-review the feature/bug/pr needs a product/development reviewing
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants