fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering (#6176) #6214

chensid · 2025-11-29T11:20:30Z

🤔 这个 PR 的性质是？

🔗 相关 Issue

#6176

💡 需求背景和解决方案

TChatContent 组件的 markdown 渲染配置（如 customRenderer）无法通过 props 传递生效，因为 Marked 实例在组件内部硬编码创建，不接受外部配置。

解决方案：

新增 markedOptions prop，支持透传 MarkedExtension 配置
使用工厂函数创建 Marked 实例，在默认渲染器基础上应用用户配置
监听 markedOptions 变化，动态重建实例

用法：

<t-chat-content 
  role="assistant" 
  :content="doc" 
  :marked-options="{
    renderer: {
      code(code, lang, escaped) {
        return `<pre>${code}</pre>`;
      }
    }
  }"
/>

📝 更新日志

本条 PR 不需要纳入 Changelog

tdesign-vue-next

@tdesign-vue-next/chat

fix(ChatContent): 修复 markedOptions 自定义 markdown 渲染配置不生效的问题 #6176

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

文档已补充或无须补充
代码演示已提供或无须提供
TypeScript 定义已补充或无须补充
Changelog 已提供或无须提供

… rendering (Tencent#6176) Co-authored-by: chensid <41440132+chensid@users.noreply.github.com>

Co-authored-by: chensid <41440132+chensid@users.noreply.github.com>

fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering (Tencent#6176)

fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering

tdesign-bot · 2025-11-29T11:22:52Z

TDesign Component Site Preview Open

Component	Preview
tdesign-vue-next
@tdesign-vue-next/chat

Copilot

Pull request overview

This PR fixes a bug where custom markdown rendering options couldn't be passed to the TChatContent component. The solution adds a new markedOptions prop that accepts configuration for the Marked markdown parser, enabling users to customize rendering behavior such as code block formatting.

Key Changes:

Added markedOptions prop to TChatContent component for custom markdown rendering configuration
Refactored Marked instance creation into a factory function that merges default options with user-provided options
Implemented reactivity using ref and watch to handle dynamic markedOptions changes

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
packages/pro-components/chat/type.ts	Added `markedOptions` prop definition to `TdChatContentProps` interface
packages/pro-components/chat/chat-content-props.ts	Added `markedOptions` prop declaration with Object type
packages/pro-components/chat/chat-content.tsx	Refactored Marked instance creation into factory function, added reactivity with watch, and imported MarkedExtension type

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-29T11:24:16Z

packages/pro-components/chat/type.ts

   */
  content?: string;
+  /**
+   * 透传给 Marked 的参数，用于自定义 markdown 渲染


[nitpick] The documentation comment is in Chinese but should also consider adding an English translation or example for broader accessibility. Additionally, the JSDoc could include more details about what options are supported. Consider:

/** * 透传给 Marked 的参数,用于自定义 markdown 渲染 * Options passed to Marked instance for custom markdown rendering * @see https://marked.js.org/using_advanced#extensions */

Suggested change

* 透传给 Marked 的参数，用于自定义 markdown 渲染

* 透传给 Marked 的参数，用于自定义 markdown 渲染

* Options passed to the Marked instance for custom markdown rendering.

* See: https://marked.js.org/using_advanced#extensions

Copilot · 2025-11-29T11:24:16Z

packages/pro-components/chat/chat-content.tsx

+    // Use ref to store marked instance and watch for changes
+    const markedRef = ref(createMarkedInstance(props.markedOptions));
+
+    // Watch for changes in markedOptions and recreate the instance
+    watch(
+      () => props.markedOptions,
+      (newOptions) => {
+        markedRef.value = createMarkedInstance(newOptions);
      },
+      { deep: true },
    );



Consider using a computed property instead of ref + watch for better reactivity and simpler code. The current approach creates a new Marked instance on every change, which could be expensive. A computed property would provide the same functionality more idiomatically:

const markedRef = computed(() => createMarkedInstance(props.markedOptions));

Then update line 111 to:

return markedRef.value.parse(markdown);

This eliminates the need for the watch block (lines 98-105) and ensures the Marked instance is only recreated when markedOptions actually changes, without needing { deep: true }.

Suggested change

// Use ref to store marked instance and watch for changes

const markedRef = ref(createMarkedInstance(props.markedOptions));

// Watch for changes in markedOptions and recreate the instance

watch(

() => props.markedOptions,

(newOptions) => {

markedRef.value = createMarkedInstance(newOptions);

},

{ deep: true },

);

// Use computed to create marked instance based on markedOptions

const markedRef = computed(() => createMarkedInstance(props.markedOptions));

Copilot · 2025-11-29T11:24:17Z

packages/pro-components/chat/chat-content.tsx

-        },
-      }),
-      {
+    // Create marked instance with default options


[nitpick] The comment "Create marked instance with default options" is slightly misleading since the function also accepts and applies user-provided markedOptions. Consider updating it to be more accurate:

// Create marked instance with default renderer and optional user overrides

Suggested change

// Create marked instance with default options

// Create marked instance with default renderer and optional user overrides

Copilot · 2025-11-29T11:24:17Z

packages/pro-components/chat/type.ts

+  /**
+   * 透传给 Marked 的参数，用于自定义 markdown 渲染
+   */
+  markedOptions?: Record<string, any>;


The type Record<string, any> is too loose and bypasses TypeScript's type checking. Since the code imports MarkedExtension from 'marked' in chat-content.tsx, consider using MarkedExtension as the type instead:

markedOptions?: MarkedExtension;

This would provide better type safety and IDE autocomplete for users of the component. You'll need to add import { MarkedExtension } from 'marked'; to this file.

Copilot · 2025-11-29T11:24:17Z

packages/pro-components/chat/chat-content-props.ts

+  markedOptions: {
+    type: Object as PropType<TdChatContentProps['markedOptions']>,


The prop type should use MarkedExtension instead of Record<string, any> for better type safety:

markedOptions: { type: Object as PropType<MarkedExtension>, },

This requires importing MarkedExtension from 'marked'. This change would work together with updating the type definition in type.ts.

Copilot · 2025-11-29T11:24:17Z

packages/pro-components/chat/chat-content.tsx

-      }),
-      {
+    // Create marked instance with default options
+    const createMarkedInstance = (markedOptions?: Record<string, any>) => {


The parameter type annotation markedOptions?: Record<string, any> is inconsistent with the actual usage. Since the function casts it to MarkedExtension on line 89, the parameter should be typed as MarkedExtension for clarity:

const createMarkedInstance = (markedOptions?: MarkedExtension) => {

This removes the need for the type cast on line 89 and provides better type safety.

pkg-pr-new · 2025-11-29T11:24:59Z

tdesign-vue-next-demo

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/auto-import-resolver@6214

npm i https://pkg.pr.new/Tencent/tdesign-vue-next@6214

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@6214

commit: ab5d573

Copilot AI and others added 6 commits November 29, 2025 10:35

Initial plan

f0ace8d

fix(Chat): add markedOptions prop to TChatContent for custom markdown…

b879c00

… rendering (Tencent#6176) Co-authored-by: chensid <41440132+chensid@users.noreply.github.com>

refactor(Chat): use ref for marked instance and improve code structure

779cc6a

Co-authored-by: chensid <41440132+chensid@users.noreply.github.com>

Merge pull request #1 from chensid/copilot/fix-issue-6176

229582f

fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering (Tencent#6176)

Initial plan

ea2f8f6

Merge pull request #2 from chensid/copilot/submit-merge-request

ab5d573

fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering

Copilot AI review requested due to automatic review settings November 29, 2025 11:20

chensid requested review from Cat1007, PengYYYYY, Wesley-0808, chaishi, liweijie0812, uyarn, zhangpaopao0609 and zydemail as code owners November 29, 2025 11:20

Copilot started reviewing on behalf of chensid November 29, 2025 11:20 View session

Copilot finished reviewing on behalf of chensid November 29, 2025 11:23

Copilot AI reviewed Nov 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering (#6176) #6214

fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering (#6176) #6214

Uh oh!

chensid commented Nov 29, 2025

Uh oh!

tdesign-bot commented Nov 29, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 29, 2025

Uh oh!

Copilot AI Nov 29, 2025

Uh oh!

Copilot AI Nov 29, 2025

Uh oh!

Copilot AI Nov 29, 2025

Uh oh!

Copilot AI Nov 29, 2025

Uh oh!

Copilot AI Nov 29, 2025

Uh oh!

pkg-pr-new bot commented Nov 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	// Create marked instance with default options
	// Create marked instance with default renderer and optional user overrides

		markedOptions: {
		type: Object as PropType<TdChatContentProps['markedOptions']>,

fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering (#6176) #6214

Are you sure you want to change the base?

fix(Chat): add markedOptions prop to TChatContent for custom markdown rendering (#6176) #6214

Uh oh!

Conversation

chensid commented Nov 29, 2025

🤔 这个 PR 的性质是？

🔗 相关 Issue

💡 需求背景和解决方案

📝 更新日志

tdesign-vue-next

@tdesign-vue-next/chat

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

Uh oh!

tdesign-bot commented Nov 29, 2025

TDesign Component Site Preview Open

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Nov 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants