ds-markdown 0.1.2-beta.2 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +542 -28
- package/README.ja.md +289 -33
- package/README.ko.md +245 -28
- package/README.md +397 -28
- package/dist/cjs/Markdown/index.js +3 -0
- package/dist/cjs/Markdown/index.js.map +1 -1
- package/dist/cjs/MarkdownCMD/index.js +26 -13
- package/dist/cjs/MarkdownCMD/index.js.map +1 -1
- package/dist/cjs/defined.d.ts +15 -6
- package/dist/cjs/hooks/useTypingTask.d.ts +4 -1
- package/dist/cjs/hooks/useTypingTask.js +82 -57
- package/dist/cjs/hooks/useTypingTask.js.map +1 -1
- package/dist/esm/Markdown/index.js +3 -0
- package/dist/esm/Markdown/index.js.map +1 -1
- package/dist/esm/MarkdownCMD/index.js +26 -13
- package/dist/esm/MarkdownCMD/index.js.map +1 -1
- package/dist/esm/defined.d.ts +15 -6
- package/dist/esm/hooks/useTypingTask.d.ts +4 -1
- package/dist/esm/hooks/useTypingTask.js +82 -57
- package/dist/esm/hooks/useTypingTask.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -18,6 +18,57 @@
|
|
|
18
18
|
|
|
19
19
|
---
|
|
20
20
|
|
|
21
|
+
## ❓ 为什么要用 ds-markdown？
|
|
22
|
+
|
|
23
|
+
- **AI 聊天体验极致还原**
|
|
24
|
+
1:1 复刻 DeepSeek 等主流 AI 聊天界面的打字动画和流式响应，带来真实的"AI 正在思考/回答"体验，极大提升用户沉浸感。
|
|
25
|
+
|
|
26
|
+
- **后端流式数据完美适配**
|
|
27
|
+
很多 AI/LLM 后端接口（如 OpenAI、DeepSeek 等）推送的数据 chunk 往往一次包含多个字符，普通打字机实现会出现卡顿、跳字等问题。
|
|
28
|
+
**ds-markdown 会自动将每个 chunk 拆分为单个字符，逐字流畅渲染动画，无论后端一次推送多少字，都能保证每个字都流畅打字。**
|
|
29
|
+
|
|
30
|
+
- **完整 Markdown & 数学公式支持**
|
|
31
|
+
内置 KaTeX，支持所有主流 Markdown 语法和数学公式，适合技术问答、教育、知识库等内容丰富的应用。
|
|
32
|
+
|
|
33
|
+
- **极致开发体验**
|
|
34
|
+
丰富的命令式 API，支持流式数据、异步回调、插件扩展，开发者可灵活控制动画和内容。
|
|
35
|
+
|
|
36
|
+
- **轻量高性能**
|
|
37
|
+
体积小、性能优，适配移动端和桌面端。核心依赖 [react-markdown](https://github.com/remarkjs/react-markdown)（业界主流、成熟的 Markdown 渲染库），无其它重量级依赖，开箱即用。
|
|
38
|
+
|
|
39
|
+
- **多主题与插件化架构**
|
|
40
|
+
支持亮/暗主题切换，兼容 remark/rehype 插件，满足个性化和高级扩展需求。
|
|
41
|
+
|
|
42
|
+
- **适用场景广泛**
|
|
43
|
+
- AI 聊天机器人/助手
|
|
44
|
+
- 实时问答/知识库
|
|
45
|
+
- 教育/数学/编程内容展示
|
|
46
|
+
- 产品演示、交互式文档
|
|
47
|
+
- 任何需要"打字机"动画和流式 Markdown 渲染的场景
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## 📋 目录
|
|
52
|
+
|
|
53
|
+
- [✨ 核心特性](#-核心特性)
|
|
54
|
+
- [📦 快速安装](#-快速安装)
|
|
55
|
+
- [🚀 5分钟上手](#-5分钟上手)
|
|
56
|
+
- [基础用法](#基础用法)
|
|
57
|
+
- [禁用打字动画](#禁用打字动画)
|
|
58
|
+
- [数学公式支持](#数学公式支持)
|
|
59
|
+
- [AI 对话场景](#ai-对话场景)
|
|
60
|
+
- [🎯 高级回调控制](#-高级回调控制)
|
|
61
|
+
- [🔄 重新开始动画演示](#-重新开始动画演示)
|
|
62
|
+
- [▶️ 手动开始动画演示](#️-手动开始动画演示)
|
|
63
|
+
- [📚 完整 API 文档](#-完整-api-文档)
|
|
64
|
+
- [🧮 数学公式使用指南](#-数学公式使用指南)
|
|
65
|
+
- [🔌 插件系统](#-插件系统)
|
|
66
|
+
- [🎛️ 定时器模式详解](#️-定时器模式详解)
|
|
67
|
+
- [💡 实战示例](#-实战示例)
|
|
68
|
+
- [🔧 最佳实践](#-最佳实践)
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
21
72
|
## ✨ 核心特性
|
|
22
73
|
|
|
23
74
|
### 🤖 **AI 对话场景**
|
|
@@ -182,6 +233,227 @@ React 19 带来了许多激动人心的新特性：
|
|
|
182
233
|
}
|
|
183
234
|
```
|
|
184
235
|
|
|
236
|
+
### 🎯 高级回调控制
|
|
237
|
+
|
|
238
|
+
```tsx
|
|
239
|
+
import { useRef, useState } from 'react';
|
|
240
|
+
import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
|
|
241
|
+
|
|
242
|
+
function AdvancedCallbackDemo() {
|
|
243
|
+
const markdownRef = useRef<MarkdownCMDRef>(null);
|
|
244
|
+
const [typingStats, setTypingStats] = useState({ progress: 0, currentChar: '', totalChars: 0 });
|
|
245
|
+
|
|
246
|
+
const handleBeforeTypedChar = async (data) => {
|
|
247
|
+
// 在字符打字前进行异步操作
|
|
248
|
+
console.log('即将打字:', data.currentChar);
|
|
249
|
+
|
|
250
|
+
// 可以在这里进行网络请求、数据验证等异步操作
|
|
251
|
+
if (data.currentChar === '!') {
|
|
252
|
+
await new Promise((resolve) => setTimeout(resolve, 500)); // 模拟延迟
|
|
253
|
+
}
|
|
254
|
+
};
|
|
255
|
+
|
|
256
|
+
const handleTypedChar = (data) => {
|
|
257
|
+
// 更新打字统计信息
|
|
258
|
+
setTypingStats({
|
|
259
|
+
progress: Math.round(data.percent),
|
|
260
|
+
currentChar: data.currentChar,
|
|
261
|
+
totalChars: data.currentIndex + 1,
|
|
262
|
+
});
|
|
263
|
+
|
|
264
|
+
// 可以在这里添加音效、动画等效果
|
|
265
|
+
if (data.currentChar === '.') {
|
|
266
|
+
// 播放句号音效
|
|
267
|
+
console.log('播放句号音效');
|
|
268
|
+
}
|
|
269
|
+
};
|
|
270
|
+
|
|
271
|
+
const handleStart = (data) => {
|
|
272
|
+
console.log('开始打字:', data.currentChar);
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
const handleEnd = (data) => {
|
|
276
|
+
console.log('打字完成:', data.str);
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
const startDemo = () => {
|
|
280
|
+
markdownRef.current?.clear();
|
|
281
|
+
markdownRef.current?.push(
|
|
282
|
+
'# 高级回调演示\n\n' +
|
|
283
|
+
'这个示例展示了如何使用 `onBeforeTypedChar` 和 `onTypedChar` 回调：\n\n' +
|
|
284
|
+
'- 🎯 **打字前回调**：可以在字符显示前进行异步操作\n' +
|
|
285
|
+
'- 📊 **打字后回调**：可以实时更新进度和添加特效\n' +
|
|
286
|
+
'- ⚡ **性能优化**：支持异步操作，不影响打字流畅度\n\n' +
|
|
287
|
+
'当前进度：' +
|
|
288
|
+
typingStats.progress +
|
|
289
|
+
'%\n' +
|
|
290
|
+
'已打字数：' +
|
|
291
|
+
typingStats.totalChars +
|
|
292
|
+
'\n\n' +
|
|
293
|
+
'这是一个非常强大的功能！',
|
|
294
|
+
'answer',
|
|
295
|
+
);
|
|
296
|
+
};
|
|
297
|
+
|
|
298
|
+
return (
|
|
299
|
+
<div>
|
|
300
|
+
<button onClick={startDemo}>🚀 开始高级演示</button>
|
|
301
|
+
|
|
302
|
+
<div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
|
|
303
|
+
<strong>打字统计：</strong> 进度 {typingStats.progress}% | 当前字符: "{typingStats.currentChar}" | 总字符数: {typingStats.totalChars}
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
<MarkdownCMD ref={markdownRef} interval={30} onBeforeTypedChar={handleBeforeTypedChar} onTypedChar={handleTypedChar} onStart={handleStart} onEnd={handleEnd} />
|
|
307
|
+
</div>
|
|
308
|
+
);
|
|
309
|
+
}
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
### 🔄 重新开始动画演示
|
|
313
|
+
|
|
314
|
+
```tsx
|
|
315
|
+
import { useRef, useState } from 'react';
|
|
316
|
+
import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
|
|
317
|
+
|
|
318
|
+
function RestartDemo() {
|
|
319
|
+
const markdownRef = useRef<MarkdownCMDRef>(null);
|
|
320
|
+
const [isPlaying, setIsPlaying] = useState(false);
|
|
321
|
+
const [hasStarted, setHasStarted] = useState(false);
|
|
322
|
+
|
|
323
|
+
const startContent = () => {
|
|
324
|
+
markdownRef.current?.clear();
|
|
325
|
+
markdownRef.current?.push(
|
|
326
|
+
'# 重新开始动画演示\n\n' +
|
|
327
|
+
'这个示例展示了如何使用 `restart()` 方法：\n\n' +
|
|
328
|
+
'- 🔄 **重新开始**：从头开始播放当前内容\n' +
|
|
329
|
+
'- ⏸️ **暂停恢复**：可以随时暂停和恢复\n' +
|
|
330
|
+
'- 🎯 **精确控制**：完全控制动画播放状态\n\n' +
|
|
331
|
+
'当前状态：' +
|
|
332
|
+
(isPlaying ? '播放中' : '已暂停') +
|
|
333
|
+
'\n\n' +
|
|
334
|
+
'这是一个非常实用的功能！',
|
|
335
|
+
'answer',
|
|
336
|
+
);
|
|
337
|
+
setIsPlaying(true);
|
|
338
|
+
};
|
|
339
|
+
|
|
340
|
+
const handleStart = () => {
|
|
341
|
+
if (hasStarted) {
|
|
342
|
+
// 如果已经开始过，则重新开始
|
|
343
|
+
markdownRef.current?.restart();
|
|
344
|
+
} else {
|
|
345
|
+
// 第一次开始
|
|
346
|
+
markdownRef.current?.start();
|
|
347
|
+
setHasStarted(true);
|
|
348
|
+
}
|
|
349
|
+
setIsPlaying(true);
|
|
350
|
+
};
|
|
351
|
+
|
|
352
|
+
const handleStop = () => {
|
|
353
|
+
markdownRef.current?.stop();
|
|
354
|
+
setIsPlaying(false);
|
|
355
|
+
};
|
|
356
|
+
|
|
357
|
+
const handleResume = () => {
|
|
358
|
+
markdownRef.current?.resume();
|
|
359
|
+
setIsPlaying(true);
|
|
360
|
+
};
|
|
361
|
+
|
|
362
|
+
const handleRestart = () => {
|
|
363
|
+
markdownRef.current?.restart();
|
|
364
|
+
setIsPlaying(true);
|
|
365
|
+
};
|
|
366
|
+
|
|
367
|
+
const handleEnd = () => {
|
|
368
|
+
setIsPlaying(false);
|
|
369
|
+
};
|
|
370
|
+
|
|
371
|
+
return (
|
|
372
|
+
<div>
|
|
373
|
+
<div style={{ marginBottom: '10px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
|
374
|
+
<button onClick={startContent}>🚀 开始内容</button>
|
|
375
|
+
<button onClick={handleStart} disabled={isPlaying}>
|
|
376
|
+
{hasStarted ? '🔄 重新开始' : '▶️ 开始'}
|
|
377
|
+
</button>
|
|
378
|
+
<button onClick={handleStop} disabled={!isPlaying}>
|
|
379
|
+
⏸️ 暂停
|
|
380
|
+
</button>
|
|
381
|
+
<button onClick={handleResume} disabled={isPlaying}>
|
|
382
|
+
▶️ 恢复
|
|
383
|
+
</button>
|
|
384
|
+
<button onClick={handleRestart}>🔄 重新开始</button>
|
|
385
|
+
</div>
|
|
386
|
+
|
|
387
|
+
<div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
|
|
388
|
+
<strong>动画状态：</strong> {isPlaying ? '🟢 播放中' : '🔴 已暂停'}
|
|
389
|
+
</div>
|
|
390
|
+
|
|
391
|
+
<MarkdownCMD ref={markdownRef} interval={25} onEnd={handleEnd} />
|
|
392
|
+
</div>
|
|
393
|
+
);
|
|
394
|
+
}
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
### ▶️ 手动开始动画演示
|
|
398
|
+
|
|
399
|
+
```tsx
|
|
400
|
+
import { useRef, useState } from 'react';
|
|
401
|
+
import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
|
|
402
|
+
|
|
403
|
+
function StartDemo() {
|
|
404
|
+
const markdownRef = useRef<MarkdownCMDRef>(null);
|
|
405
|
+
const [isPlaying, setIsPlaying] = useState(false);
|
|
406
|
+
const [hasStarted, setHasStarted] = useState(false);
|
|
407
|
+
|
|
408
|
+
const loadContent = () => {
|
|
409
|
+
markdownRef.current?.clear();
|
|
410
|
+
markdownRef.current?.push(
|
|
411
|
+
'# 手动开始动画演示\n\n' +
|
|
412
|
+
'这个示例展示了如何使用 `start()` 方法：\n\n' +
|
|
413
|
+
'- 🎯 **手动控制**：当 `autoStartTyping=false` 时，需要手动调用 `start()`\n' +
|
|
414
|
+
'- ⏱️ **延迟开始**：可以在用户交互后开始动画\n' +
|
|
415
|
+
'- 🎮 **游戏化**：适合需要用户主动触发的场景\n\n' +
|
|
416
|
+
'点击"开始动画"按钮来手动启动打字效果！',
|
|
417
|
+
'answer',
|
|
418
|
+
);
|
|
419
|
+
setIsPlaying(false);
|
|
420
|
+
};
|
|
421
|
+
|
|
422
|
+
const handleStart = () => {
|
|
423
|
+
if (hasStarted) {
|
|
424
|
+
// 如果已经开始过，则重新开始
|
|
425
|
+
markdownRef.current?.restart();
|
|
426
|
+
} else {
|
|
427
|
+
// 第一次开始
|
|
428
|
+
markdownRef.current?.start();
|
|
429
|
+
setHasStarted(true);
|
|
430
|
+
}
|
|
431
|
+
setIsPlaying(true);
|
|
432
|
+
};
|
|
433
|
+
|
|
434
|
+
const handleEnd = () => {
|
|
435
|
+
setIsPlaying(false);
|
|
436
|
+
};
|
|
437
|
+
|
|
438
|
+
return (
|
|
439
|
+
<div>
|
|
440
|
+
<div style={{ marginBottom: '10px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
|
441
|
+
<button onClick={loadContent}>📝 加载内容</button>
|
|
442
|
+
<button onClick={handleStart} disabled={isPlaying}>
|
|
443
|
+
{hasStarted ? '🔄 重新开始' : '▶️ 开始动画'}
|
|
444
|
+
</button>
|
|
445
|
+
</div>
|
|
446
|
+
|
|
447
|
+
<div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
|
|
448
|
+
<strong>状态：</strong> {isPlaying ? '🟢 动画播放中' : '🔴 等待开始'}
|
|
449
|
+
</div>
|
|
450
|
+
|
|
451
|
+
<MarkdownCMD ref={markdownRef} interval={30} autoStartTyping={false} onEnd={handleEnd} />
|
|
452
|
+
</div>
|
|
453
|
+
);
|
|
454
|
+
}
|
|
455
|
+
```
|
|
456
|
+
|
|
185
457
|
---
|
|
186
458
|
|
|
187
459
|
## 📚 完整 API 文档
|
|
@@ -192,28 +464,43 @@ React 19 带来了许多激动人心的新特性：
|
|
|
192
464
|
import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
|
|
193
465
|
```
|
|
194
466
|
|
|
195
|
-
| 属性
|
|
196
|
-
|
|
|
197
|
-
| `interval`
|
|
198
|
-
| `timerType`
|
|
199
|
-
| `answerType`
|
|
200
|
-
| `theme`
|
|
201
|
-
| `plugins`
|
|
202
|
-
| `math`
|
|
203
|
-
| `onEnd`
|
|
204
|
-
| `onStart`
|
|
205
|
-
| `
|
|
206
|
-
| `
|
|
467
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
468
|
+
| ------------------- | ------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------- |
|
|
469
|
+
| `interval` | `number` | 打字间隔 (毫秒) | `30` |
|
|
470
|
+
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | 定时器类型 | 当前默认值是`setTimeout`，后期会改为`requestAnimationFrame` |
|
|
471
|
+
| `answerType` | `'thinking'` \| `'answer'` | 内容类型 (影响样式主题) | `'answer'` |
|
|
472
|
+
| `theme` | `'light'` \| `'dark'` | 主题类型 | `'light'` |
|
|
473
|
+
| `plugins` | `IMarkdownPlugin[]` | 插件配置 | `[]` |
|
|
474
|
+
| `math` | [IMarkdownMath](#IMarkdownMath) | 数学公式配置 | `{ splitSymbol: 'dollar' }` |
|
|
475
|
+
| `onEnd` | `(data: EndData) => void` | 打字结束回调 | - |
|
|
476
|
+
| `onStart` | `(data: StartData) => void` | 打字开始回调 | - |
|
|
477
|
+
| `onBeforeTypedChar` | `(data: IBeforeTypedChar) => Promise<void>` | 字符打字前的回调，支持异步操作，会阻塞之后的打字 | - |
|
|
478
|
+
| `onTypedChar` | `(data: ITypedChar) => void` | 每字符打字后的回调 | - |
|
|
479
|
+
| `disableTyping` | `boolean` | 禁用打字动画效果 | `false` |
|
|
480
|
+
| `autoStartTyping` | `boolean` | 是否自动开始打字动画，设为 false 时需手动触发 | `true` |
|
|
207
481
|
|
|
208
482
|
> 注意： 如果当在打字中 `disableTyping`从 `true` 变为 `false`，则在下一个打字触发时，会把剩下的所有字一次性显示
|
|
209
483
|
|
|
484
|
+
### IBeforeTypedChar
|
|
485
|
+
|
|
486
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
487
|
+
| -------------- | ------------ | ---------------------------- | ------ |
|
|
488
|
+
| `currentIndex` | `number` | 当前字符在整个字符串中的索引 | `0` |
|
|
489
|
+
| `currentChar` | `string` | 当前即将打字的字符 | - |
|
|
490
|
+
| `answerType` | `AnswerType` | 内容类型 (thinking/answer) | - |
|
|
491
|
+
| `prevStr` | `string` | 当前类型内容的前缀字符串 | - |
|
|
492
|
+
| `percent` | `number` | 打字进度百分比 (0-100) | `0` |
|
|
493
|
+
|
|
210
494
|
### ITypedChar
|
|
211
495
|
|
|
212
|
-
| 属性 | 类型
|
|
213
|
-
| -------------- |
|
|
214
|
-
| `
|
|
215
|
-
| `currentChar` | `string`
|
|
216
|
-
| `
|
|
496
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
497
|
+
| -------------- | ------------ | ---------------------------- | ------ |
|
|
498
|
+
| `currentIndex` | `number` | 当前字符在整个字符串中的索引 | `0` |
|
|
499
|
+
| `currentChar` | `string` | 当前已打字的字符 | - |
|
|
500
|
+
| `answerType` | `AnswerType` | 内容类型 (thinking/answer) | - |
|
|
501
|
+
| `prevStr` | `string` | 当前类型内容的前缀字符串 | - |
|
|
502
|
+
| `currentStr` | `string` | 当前类型内容的完整字符串 | - |
|
|
503
|
+
| `percent` | `number` | 打字进度百分比 (0-100) | `0` |
|
|
217
504
|
|
|
218
505
|
#### IMarkdownMath
|
|
219
506
|
|
|
@@ -239,26 +526,32 @@ import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
|
|
|
239
526
|
|
|
240
527
|
#### 默认导出 DsMarkdown
|
|
241
528
|
|
|
242
|
-
| 方法
|
|
243
|
-
|
|
|
244
|
-
| `
|
|
245
|
-
| `
|
|
529
|
+
| 方法 | 参数 | 说明 |
|
|
530
|
+
| --------- | ---- | -------------------------------------- |
|
|
531
|
+
| `start` | - | 开始打字动画 |
|
|
532
|
+
| `stop` | - | 暂停打字动画 |
|
|
533
|
+
| `resume` | - | 恢复打字动画 |
|
|
534
|
+
| `restart` | - | 重新开始打字动画，从头开始播放当前内容 |
|
|
246
535
|
|
|
247
536
|
#### MarkdownCMD 暴露的方法
|
|
248
537
|
|
|
249
|
-
| 方法 | 参数 | 说明
|
|
250
|
-
| ----------------- | ------------------------------------------- |
|
|
251
|
-
| `push` | `(content: string, answerType: AnswerType)` | 添加内容并开始打字
|
|
252
|
-
| `clear` | - | 清空所有内容和状态
|
|
253
|
-
| `triggerWholeEnd` | - | 手动触发完成回调
|
|
254
|
-
| `
|
|
255
|
-
| `
|
|
538
|
+
| 方法 | 参数 | 说明 |
|
|
539
|
+
| ----------------- | ------------------------------------------- | -------------------------------------- |
|
|
540
|
+
| `push` | `(content: string, answerType: AnswerType)` | 添加内容并开始打字 |
|
|
541
|
+
| `clear` | - | 清空所有内容和状态 |
|
|
542
|
+
| `triggerWholeEnd` | - | 手动触发完成回调 |
|
|
543
|
+
| `start` | - | 开始打字动画 |
|
|
544
|
+
| `stop` | - | 暂停打字动画 |
|
|
545
|
+
| `resume` | - | 恢复打字动画 |
|
|
546
|
+
| `restart` | - | 重新开始打字动画，从头开始播放当前内容 |
|
|
256
547
|
|
|
257
548
|
**用法示例：**
|
|
258
549
|
|
|
259
550
|
```tsx
|
|
551
|
+
markdownRef.current?.start(); // 开始动画
|
|
260
552
|
markdownRef.current?.stop(); // 暂停动画
|
|
261
553
|
markdownRef.current?.resume(); // 恢复动画
|
|
554
|
+
markdownRef.current?.restart(); // 重新开始动画
|
|
262
555
|
```
|
|
263
556
|
|
|
264
557
|
---
|
|
@@ -531,6 +824,82 @@ function MathStreamingDemo() {
|
|
|
531
824
|
}
|
|
532
825
|
```
|
|
533
826
|
|
|
827
|
+
### 🎯 高级回调控制
|
|
828
|
+
|
|
829
|
+
```tsx
|
|
830
|
+
import { useRef, useState } from 'react';
|
|
831
|
+
import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
|
|
832
|
+
|
|
833
|
+
function AdvancedCallbackDemo() {
|
|
834
|
+
const markdownRef = useRef<MarkdownCMDRef>(null);
|
|
835
|
+
const [typingStats, setTypingStats] = useState({ progress: 0, currentChar: '', totalChars: 0 });
|
|
836
|
+
|
|
837
|
+
const handleBeforeTypedChar = async (data) => {
|
|
838
|
+
// 在字符打字前进行异步操作
|
|
839
|
+
console.log('即将打字:', data.currentChar);
|
|
840
|
+
|
|
841
|
+
// 可以在这里进行网络请求、数据验证等异步操作
|
|
842
|
+
if (data.currentChar === '!') {
|
|
843
|
+
await new Promise((resolve) => setTimeout(resolve, 500)); // 模拟延迟
|
|
844
|
+
}
|
|
845
|
+
};
|
|
846
|
+
|
|
847
|
+
const handleTypedChar = (data) => {
|
|
848
|
+
// 更新打字统计信息
|
|
849
|
+
setTypingStats({
|
|
850
|
+
progress: Math.round(data.percent),
|
|
851
|
+
currentChar: data.currentChar,
|
|
852
|
+
totalChars: data.currentIndex + 1,
|
|
853
|
+
});
|
|
854
|
+
|
|
855
|
+
// 可以在这里添加音效、动画等效果
|
|
856
|
+
if (data.currentChar === '.') {
|
|
857
|
+
// 播放句号音效
|
|
858
|
+
console.log('播放句号音效');
|
|
859
|
+
}
|
|
860
|
+
};
|
|
861
|
+
|
|
862
|
+
const handleStart = (data) => {
|
|
863
|
+
console.log('开始打字:', data.currentChar);
|
|
864
|
+
};
|
|
865
|
+
|
|
866
|
+
const handleEnd = (data) => {
|
|
867
|
+
console.log('打字完成:', data.str);
|
|
868
|
+
};
|
|
869
|
+
|
|
870
|
+
const startDemo = () => {
|
|
871
|
+
markdownRef.current?.clear();
|
|
872
|
+
markdownRef.current?.push(
|
|
873
|
+
'# 高级回调演示\n\n' +
|
|
874
|
+
'这个示例展示了如何使用 `onBeforeTypedChar` 和 `onTypedChar` 回调：\n\n' +
|
|
875
|
+
'- 🎯 **打字前回调**：可以在字符显示前进行异步操作\n' +
|
|
876
|
+
'- 📊 **打字后回调**：可以实时更新进度和添加特效\n' +
|
|
877
|
+
'- ⚡ **性能优化**：支持异步操作，不影响打字流畅度\n\n' +
|
|
878
|
+
'当前进度：' +
|
|
879
|
+
typingStats.progress +
|
|
880
|
+
'%\n' +
|
|
881
|
+
'已打字数：' +
|
|
882
|
+
typingStats.totalChars +
|
|
883
|
+
'\n\n' +
|
|
884
|
+
'这是一个非常强大的功能！',
|
|
885
|
+
'answer',
|
|
886
|
+
);
|
|
887
|
+
};
|
|
888
|
+
|
|
889
|
+
return (
|
|
890
|
+
<div>
|
|
891
|
+
<button onClick={startDemo}>🚀 开始高级演示</button>
|
|
892
|
+
|
|
893
|
+
<div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
|
|
894
|
+
<strong>打字统计：</strong> 进度 {typingStats.progress}% | 当前字符: "{typingStats.currentChar}" | 总字符数: {typingStats.totalChars}
|
|
895
|
+
</div>
|
|
896
|
+
|
|
897
|
+
<MarkdownCMD ref={markdownRef} interval={30} onBeforeTypedChar={handleBeforeTypedChar} onTypedChar={handleTypedChar} onStart={handleStart} onEnd={handleEnd} />
|
|
898
|
+
</div>
|
|
899
|
+
);
|
|
900
|
+
}
|
|
901
|
+
```
|
|
902
|
+
|
|
534
903
|
## 🔧 最佳实践
|
|
535
904
|
|
|
536
905
|
### 1. 性能优化
|
|
@@ -48,6 +48,9 @@ const MarkdownInner = ({ children: _children = '', answerType, markdownRef, ...r
|
|
|
48
48
|
start: () => {
|
|
49
49
|
cmdRef.current.start();
|
|
50
50
|
},
|
|
51
|
+
restart: () => {
|
|
52
|
+
cmdRef.current.restart();
|
|
53
|
+
},
|
|
51
54
|
}));
|
|
52
55
|
return (0, jsx_runtime_1.jsx)(index_js_1.default, { ref: cmdRef, ...rest });
|
|
53
56
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Markdown/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAAiG;AACjG,gDAAyC;AAEzC,uEAAkD;AAMlD,MAAM,aAAa,GAAiC,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACrH,MAAM,MAAM,GAAG,IAAA,cAAM,EAAiB,IAAK,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,EAAE,CAAC,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC3B,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;YAClC,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,IAAI,qBAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;QAC1C,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAClC,IAAI,UAAU,GAAG,EAAE,CAAC;YACpB,IAAI,SAAS,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;gBAC7B,UAAU,GAAG,OAAO,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,IAAI,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;oBAC1C,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBACvD,CAAC;qBAAM,CAAC;oBACN,UAAU,GAAG,OAAO,CAAC;oBACrB,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;YACD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YAC5C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,IAAA,2BAAmB,EAAC,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC;QACtC,IAAI,EAAE,GAAG,EAAE;YACT,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC;QACD,MAAM,EAAE,GAAG,EAAE;YACX,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;QAC1B,CAAC;QACD,KAAK,EAAE,GAAG,EAAE;YACV,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACzB,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,OAAO,uBAAC,kBAAW,IAAC,GAAG,EAAE,MAAM,KAAM,IAAI,GAAI,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAA,kBAAU,EAA6B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEvD,IAAI,qBAAO,EAAE,CAAC;QACZ,IAAI,CAAC,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YACjD,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;QAC7D,CAAC;QACD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,OAAO,uBAAC,aAAa,OAAK,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,GAAI,CAAC;AAChF,CAAC,CAAC,CAAC;AAEH,kBAAe,IAAA,YAAI,EAAC,QAAQ,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Markdown/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ const index_js_1 = __importDefault(require("../components/HighReactMarkdown/inde
|
|
|
9
9
|
const classnames_1 = __importDefault(require("classnames"));
|
|
10
10
|
const constant_js_1 = require("../constant.js");
|
|
11
11
|
const useTypingTask_js_1 = require("../hooks/useTypingTask.js");
|
|
12
|
-
const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light', math, plugins, disableTyping = false, autoStartTyping = true }, ref) => {
|
|
12
|
+
const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, onTypedChar, onBeforeTypedChar, timerType = 'setTimeout', theme = 'light', math, plugins, disableTyping = false, autoStartTyping = true }, ref) => {
|
|
13
13
|
/** 是否自动开启打字动画, 后面发生变化将不会生效 */
|
|
14
14
|
const autoStartTypingRef = (0, react_1.useRef)(autoStartTyping);
|
|
15
15
|
/** 是否打过字 */
|
|
@@ -27,10 +27,12 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
27
27
|
thinking: {
|
|
28
28
|
content: '',
|
|
29
29
|
length: 0,
|
|
30
|
+
prevLength: 0,
|
|
30
31
|
},
|
|
31
32
|
answer: {
|
|
32
33
|
content: '',
|
|
33
34
|
length: 0,
|
|
35
|
+
prevLength: 0,
|
|
34
36
|
},
|
|
35
37
|
allLength: 0,
|
|
36
38
|
});
|
|
@@ -55,6 +57,15 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
55
57
|
}
|
|
56
58
|
triggerUpdate();
|
|
57
59
|
};
|
|
60
|
+
const resetWholeContent = () => {
|
|
61
|
+
wholeContentRef.current.thinking.content = '';
|
|
62
|
+
wholeContentRef.current.thinking.length = 0;
|
|
63
|
+
wholeContentRef.current.thinking.prevLength = 0;
|
|
64
|
+
wholeContentRef.current.answer.content = '';
|
|
65
|
+
wholeContentRef.current.answer.length = 0;
|
|
66
|
+
wholeContentRef.current.answer.prevLength = 0;
|
|
67
|
+
wholeContentRef.current.allLength = 0;
|
|
68
|
+
};
|
|
58
69
|
// 使用新的打字任务 hook
|
|
59
70
|
const typingTask = (0, useTypingTask_js_1.useTypingTask)({
|
|
60
71
|
timerType,
|
|
@@ -63,10 +74,12 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
63
74
|
onEnd,
|
|
64
75
|
onStart,
|
|
65
76
|
onTypedChar,
|
|
77
|
+
onBeforeTypedChar,
|
|
66
78
|
processCharDisplay,
|
|
67
79
|
wholeContentRef,
|
|
68
80
|
disableTyping,
|
|
69
81
|
triggerUpdate,
|
|
82
|
+
resetWholeContent,
|
|
70
83
|
});
|
|
71
84
|
/**
|
|
72
85
|
* 内部推送处理逻辑
|
|
@@ -80,7 +93,6 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
80
93
|
const charObj = {
|
|
81
94
|
content: chatStr,
|
|
82
95
|
answerType,
|
|
83
|
-
contentType: 'segment',
|
|
84
96
|
tokenId: 0,
|
|
85
97
|
index,
|
|
86
98
|
};
|
|
@@ -97,11 +109,14 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
97
109
|
};
|
|
98
110
|
const processNoTypingPush = (content, answerType) => {
|
|
99
111
|
wholeContentRef.current[answerType].content += content;
|
|
112
|
+
// 记录打字前的长度
|
|
113
|
+
wholeContentRef.current[answerType].prevLength = wholeContentRef.current[answerType].length;
|
|
100
114
|
wholeContentRef.current[answerType].length += content.length;
|
|
101
115
|
triggerUpdate();
|
|
102
116
|
onEnd?.({
|
|
103
117
|
str: content,
|
|
104
|
-
|
|
118
|
+
answerStr: wholeContentRef.current.answer.content,
|
|
119
|
+
thinkingStr: wholeContentRef.current.thinking.content,
|
|
105
120
|
manual: false,
|
|
106
121
|
});
|
|
107
122
|
};
|
|
@@ -125,11 +140,7 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
125
140
|
typingTask.stop();
|
|
126
141
|
typingTask.typedIsManualStopRef.current = false;
|
|
127
142
|
charsRef.current = [];
|
|
128
|
-
|
|
129
|
-
wholeContentRef.current.thinking.length = 0;
|
|
130
|
-
wholeContentRef.current.answer.content = '';
|
|
131
|
-
wholeContentRef.current.answer.length = 0;
|
|
132
|
-
wholeContentRef.current.allLength = 0;
|
|
143
|
+
resetWholeContent();
|
|
133
144
|
isWholeTypedEndRef.current = false;
|
|
134
145
|
charIndexRef.current = 0;
|
|
135
146
|
isStartedTypingRef.current = false;
|
|
@@ -157,15 +168,17 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
157
168
|
if (!typingTask.isTyping()) {
|
|
158
169
|
// 这里需要手动触发结束回调，因为 hook 中的 triggerOnEnd 不能直接调用
|
|
159
170
|
onEnd?.({
|
|
160
|
-
str:
|
|
161
|
-
|
|
171
|
+
str: wholeContentRef.current.answer.content,
|
|
172
|
+
answerStr: wholeContentRef.current.answer.content,
|
|
173
|
+
thinkingStr: wholeContentRef.current.thinking.content,
|
|
162
174
|
manual: true,
|
|
163
175
|
});
|
|
164
176
|
}
|
|
165
177
|
},
|
|
166
|
-
/**
|
|
167
|
-
|
|
168
|
-
|
|
178
|
+
/** 重新开始打字任务 */
|
|
179
|
+
restart: () => {
|
|
180
|
+
typingTask.restart();
|
|
181
|
+
},
|
|
169
182
|
}));
|
|
170
183
|
const getParagraphs = (answerType) => {
|
|
171
184
|
const content = wholeContentRef.current[answerType].content || '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA0E;AAE1E,wFAAyE;AACzE,4DAAoC;AAEpC,gDAAyC;AACzC,gEAA0D;AAE1D,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,GAAG,YAAY,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,GAAG,KAAK,EAAE,eAAe,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA0E;AAE1E,wFAAyE;AACzE,4DAAoC;AAEpC,gDAAyC;AACzC,gEAA0D;AAE1D,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,GAAG,YAAY,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,GAAG,KAAK,EAAE,eAAe,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAClL,8BAA8B;IAC9B,MAAM,kBAAkB,GAAG,IAAA,cAAM,EAAC,eAAe,CAAC,CAAC;IAEnD,YAAY;IACZ,MAAM,kBAAkB,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAEzC,gBAAgB;IAChB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAU,EAAE,CAAC,CAAC;IAErC;;;OAGG;IACH,MAAM,kBAAkB,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IACzC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAC;IAE/B,aAAa;IACb,MAAM,eAAe,GAAG,IAAA,cAAM,EAAgB;QAC5C,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE;YACX,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,CAAC;SACd;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE;YACX,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,CAAC;SACd;QACD,SAAS,EAAE,CAAC;KACb,CAAC,CAAC;IAEH,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAClC,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,kBAAkB,GAAG,CAAC,IAAW,EAAE,EAAE;QACzC,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC;YAChC,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;QACpC,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE,CAAC;YACnC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;YACzD,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;YACvD,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC;QAC7C,CAAC;QACD,aAAa,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,GAAG,EAAE,CAAC;QAC9C,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAC5C,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC;QAChD,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,GAAG,EAAE,CAAC;QAC5C,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1C,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC;QAC9C,eAAe,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,gBAAgB;IAChB,MAAM,UAAU,GAAG,IAAA,gCAAa,EAAC;QAC/B,SAAS;QACT,QAAQ;QACR,QAAQ;QACR,KAAK;QACL,OAAO;QACP,WAAW;QACX,iBAAiB;QACjB,kBAAkB;QAClB,eAAe;QACf,aAAa;QACb,aAAa;QACb,iBAAiB;KAClB,CAAC,CAAC;IAEH;;OAEG;IACH,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAE,UAAsB,EAAE,EAAE;QACvE,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,QAAQ,CAAC,OAAO,CAAC,IAAI,CACnB,GAAG,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YACnC,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,EAAE,CAAC;YACrC,MAAM,OAAO,GAAU;gBACrB,OAAO,EAAE,OAAO;gBAChB,UAAU;gBACV,OAAO,EAAE,CAAC;gBACV,KAAK;aACN,CAAC;YACF,OAAO,OAAO,CAAC;QACjB,CAAC,CAAC,CACH,CAAC;QAEF,eAAe,CAAC,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC;QAEpD,+BAA+B;QAC/B,IAAI,CAAC,kBAAkB,CAAC,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,OAAe,EAAE,UAAsB,EAAE,EAAE;QACtE,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC;QACvD,WAAW;QACX,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC;QAC5F,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;QAC7D,aAAa,EAAE,CAAC;QAChB,KAAK,EAAE,CAAC;YACN,GAAG,EAAE,OAAO;YACZ,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO;YACjD,WAAW,EAAE,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO;YACrD,MAAM,EAAE,KAAK;SACd,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B;;;;WAIG;QACH,IAAI,EAAE,CAAC,OAAe,EAAE,aAAyB,QAAQ,EAAE,EAAE;YAC3D,IAAI,aAAa,EAAE,CAAC;gBAClB,mBAAmB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;gBACzC,OAAO;YACT,CAAC;YACD,oBAAoB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;QAC5C,CAAC;QACD;;WAEG;QACH,KAAK,EAAE,GAAG,EAAE;YACV,UAAU,CAAC,IAAI,EAAE,CAAC;YAElB,UAAU,CAAC,oBAAoB,CAAC,OAAO,GAAG,KAAK,CAAC;YAChD,QAAQ,CAAC,OAAO,GAAG,EAAE,CAAC;YACtB,iBAAiB,EAAE,CAAC;YACpB,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC;YACnC,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;YACzB,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC;YAEnC,aAAa,EAAE,CAAC;QAClB,CAAC;QACD,yBAAyB;QACzB,KAAK,EAAE,GAAG,EAAE;YACV,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAChC,UAAU,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;QACD,aAAa;QACb,IAAI,EAAE,GAAG,EAAE;YACT,UAAU,CAAC,IAAI,EAAE,CAAC;QACpB,CAAC;QACD,eAAe;QACf,MAAM,EAAE,GAAG,EAAE;YACX,UAAU,CAAC,MAAM,EAAE,CAAC;QACtB,CAAC;QACD;;WAEG;QACH,eAAe,EAAE,GAAG,EAAE;YACpB,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;YAClC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC;gBAC3B,8CAA8C;gBAC9C,KAAK,EAAE,CAAC;oBACN,GAAG,EAAE,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO;oBAC3C,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO;oBACjD,WAAW,EAAE,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO;oBACrD,MAAM,EAAE,IAAI;iBACb,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QACD,eAAe;QACf,OAAO,EAAE,GAAG,EAAE;YACZ,UAAU,CAAC,OAAO,EAAE,CAAC;QACvB,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,aAAa,GAAG,CAAC,UAAsB,EAAE,EAAE;QAC/C,MAAM,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC;QAClE,OAAO,CACL,gCAAK,SAAS,EAAE,kCAAkC,UAAU,EAAE,YAC5D,uBAAC,kBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YAC1D,OAAO,GACU,GAChB,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,iCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,aAAa,EAAE,IAAI;YACnB,KAAK,EAAE,IAAI;YACX,kBAAkB,EAAE,KAAK,KAAK,MAAM;SACrC,CAAC,aAEF,gCAAK,SAAS,EAAC,sBAAsB,YAAE,aAAa,CAAC,UAAU,CAAC,GAAO,EAEvE,gCAAK,SAAS,EAAC,oBAAoB,YAAE,aAAa,CAAC,QAAQ,CAAC,GAAO,IAC/D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,qBAAO,EAAE,CAAC;IACZ,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAC1C,CAAC;AAED,kBAAe,WAAW,CAAC"}
|