🐛 fix(portal): preserve artifacts code scroll while streaming (#13114)

AGENTS.md

@@ -45,7 +45,7 @@ lobehub/
 - New branches should be created from `canary`; PRs should target `canary`
 - Use rebase for git pull
 - Git commit messages should prefix with gitmoji
-- Git branch name format: `username/feat/feature-name`
+- Git branch name format: `feat/feature-name`
 - Use `.github/PULL_REQUEST_TEMPLATE.md` for PR descriptions
 
 ### Package Management

docs/development/basic/contributing-guidelines.mdx

@@ -1,8 +1,8 @@
 ---
 title: Code Style and Contribution Guidelines
 description: >-
-  Learn about LobeHub's code style and contribution process for consistent
-  coding.
+  Learn about LobeHub's code style and contribution process for consistent coding.
+
 tags:
   - Code Style
   - Contribution Guidelines
@@ -95,12 +95,12 @@ Use the following emojis to prefix your commit messages:
 
 | Emoji | Code                     | Type     | Description              | Triggers Release? |
 | ----- | ------------------------ | -------- | ------------------------ | ----------------- |
-| ✨     | `:sparkles:`             | feat     | New feature              | Yes               |
+| ✨    | `:sparkles:`             | feat     | New feature              | Yes               |
 | 🐛    | `:bug:`                  | fix      | Bug fix                  | Yes               |
 | 📝    | `:memo:`                 | docs     | Documentation            | No                |
 | 💄    | `:lipstick:`             | style    | UI/styling changes       | No                |
 | ♻️    | `:recycle:`              | refactor | Code refactoring         | No                |
-| ✅     | `:white_check_mark:`     | test     | Tests                    | No                |
+| ✅    | `:white_check_mark:`     | test     | Tests                    | No                |
 | 🔨    | `:hammer:`               | chore    | Maintenance tasks        | No                |
 | 🚀    | `:rocket:`               | perf     | Performance improvements | No                |
 | 🌐    | `:globe_with_meridians:` | i18n     | Internationalization     | No                |
@@ -116,9 +116,9 @@ Fork [lobehub/lobehub](https://github.com/lobehub/lobehub) on GitHub, then clone
 Use the branch naming format: `username/type/description`
 
 ```bash
-git checkout -b yourname/feat/add-voice-input
-git checkout -b yourname/fix/message-duplication
-git checkout -b yourname/docs/update-api-guide
+git checkout -b feat/add-voice-input
+git checkout -b fix/message-duplication
+git checkout -b docs/update-api-guide
 ```
 
 **3. Make changes**
@@ -142,29 +142,33 @@ git commit -m "📝 docs: update installation guide"
 **5. Open a Pull Request**
 
 <Callout type={'warning'}>
-  Always target the **`canary`** branch — not `main`. `canary` is the active development branch.
-  PRs to `main` will be redirected.
+  Always target the **`canary`** branch — not `main`. `canary` is the active development branch. PRs
+  to `main` will be redirected.
 </Callout>
 
 Fill out the PR template in `.github/PULL_REQUEST_TEMPLATE.md`:
 
 ```markdown
 ## Description
+
 Clear description of what this PR does.
 
 ## Type of Change
+
 - [ ] ✨ New feature
 - [ ] 🐛 Bug fix
 - [ ] 📝 Documentation
 - [ ] ♻️ Refactoring
 
 ## Checklist
+
 - [ ] Code follows project style guidelines
 - [ ] Tests added/updated
 - [ ] Documentation updated
 - [ ] All tests pass
 
 ## Related Issues
+
 Fixes #123
 ```
 

docs/development/basic/contributing-guidelines.zh-CN.mdx

@@ -91,17 +91,17 @@ bunx vitest run --silent='passed-only' '[file-path]'
 
 提交信息请使用以下 emoji 作为前缀：
 
-| Emoji | 代码                       | 类型       | 说明        | 触发发布？ |
-| ----- | ------------------------ | -------- | --------- | ----- |
-| ✨     | `:sparkles:`             | feat     | 新功能       | 是     |
-| 🐛    | `:bug:`                  | fix      | Bug 修复    | 是     |
-| 📝    | `:memo:`                 | docs     | 文档更新      | 否     |
-| 💄    | `:lipstick:`             | style    | UI / 样式更改 | 否     |
-| ♻️    | `:recycle:`              | refactor | 代码重构      | 否     |
-| ✅     | `:white_check_mark:`     | test     | 测试相关      | 否     |
-| 🔨    | `:hammer:`               | chore    | 维护任务      | 否     |
-| 🚀    | `:rocket:`               | perf     | 性能优化      | 否     |
-| 🌐    | `:globe_with_meridians:` | i18n     | 国际化       | 否     |
+| Emoji | 代码                     | 类型     | 说明          | 触发发布？ |
+| ----- | ------------------------ | -------- | ------------- | ---------- |
+| ✨    | `:sparkles:`             | feat     | 新功能        | 是         |
+| 🐛    | `:bug:`                  | fix      | Bug 修复      | 是         |
+| 📝    | `:memo:`                 | docs     | 文档更新      | 否         |
+| 💄    | `:lipstick:`             | style    | UI / 样式更改 | 否         |
+| ♻️    | `:recycle:`              | refactor | 代码重构      | 否         |
+| ✅    | `:white_check_mark:`     | test     | 测试相关      | 否         |
+| 🔨    | `:hammer:`               | chore    | 维护任务      | 否         |
+| 🚀    | `:rocket:`               | perf     | 性能优化      | 否         |
+| 🌐    | `:globe_with_meridians:` | i18n     | 国际化        | 否         |
 
 ### 如何贡献
 
@@ -114,9 +114,9 @@ bunx vitest run --silent='passed-only' '[file-path]'
 使用分支命名格式：`用户名/类型/描述`
 
 ```bash
-git checkout -b yourname/feat/add-voice-input
-git checkout -b yourname/fix/message-duplication
-git checkout -b yourname/docs/update-api-guide
+git checkout -b feat/add-voice-input
+git checkout -b fix/message-duplication
+git checkout -b docs/update-api-guide
 ```
 
 **3. 进行更改**
@@ -140,28 +140,33 @@ git commit -m "📝 docs: 更新安装指南"
 **5. 创建 Pull Request**
 
 <Callout type={'warning'}>
-  PR 的目标分支必须是 **`canary`**，而非 `main`。`canary` 是当前活跃的开发分支，向 `main` 发起的 PR 会被重定向。
+  PR 的目标分支必须是 **`canary`**，而非 `main`。`canary` 是当前活跃的开发分支，向 `main` 发起的 PR
+  会被重定向。
 </Callout>
 
 请使用 `.github/PULL_REQUEST_TEMPLATE.md` 中的 PR 模板：
 
 ```markdown
 ## Description
+
 清晰描述此 PR 的改动内容。
 
 ## Type of Change
+
 - [ ] ✨ 新功能
 - [ ] 🐛 Bug 修复
 - [ ] 📝 文档
 - [ ] ♻️ 重构
 
 ## Checklist
+
 - [ ] 代码符合项目风格指南
 - [ ] 已添加/更新测试
 - [ ] 已更新文档
 - [ ] 所有测试通过
 
 ## Related Issues
+
 Fixes #123
 ```
 

src/features/Portal/Artifacts/Body/index.tsx

@@ -59,14 +59,15 @@ const ArtifactsUI = memo(() => {
     }
   }, [artifactType, artifactCodeLanguage]);
 
-  // make sure the message and id is valid
-  if (!messageId) return;
-
   // show code when the artifact is not closed or the display mode is code or the artifact type is code
   const showCode =
     !isArtifactTagClosed ||
     displayMode === ArtifactDisplayMode.Code ||
     artifactType === ArtifactType.Code;
+  const isStreamingCode = isMessageGenerating && !isArtifactTagClosed;
+
+  // make sure the message and id is valid
+  if (!messageId) return;
 
   return (
     <Flexbox
@@ -78,12 +79,15 @@ const ArtifactsUI = memo(() => {
       style={{ overflow: 'hidden' }}
     >
       {showCode ? (
-        <Highlighter
-          language={language || 'txt'}
-          style={{ fontSize: 12, height: '100%', overflow: 'auto' }}
-        >
-          {artifactContent}
-        </Highlighter>
+        <Flexbox flex={1} style={{ minHeight: 0, overflow: 'auto' }}>
+          <Highlighter
+            animated={isStreamingCode}
+            language={language || 'txt'}
+            style={{ fontSize: 12, minHeight: '100%', overflow: 'visible' }}
+          >
+            {artifactContent}
+          </Highlighter>
+        </Flexbox>
       ) : (
         <Renderer content={artifactContent} type={artifactType} />
       )}