@alifd/chat 0.3.28-beta.5 → 0.3.28-beta.6

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.
Files changed (5) hide show
  1. package/es/index.js +1 -1
  2. package/es/markdown/index.js +37 -64
  3. package/lib/index.js +1 -1
  4. package/lib/markdown/index.js +37 -64
  5. package/package.json +1 -1
package/es/index.js CHANGED
@@ -31,4 +31,4 @@ export { default as RadioGroup } from './radio-group';
31
31
  export { default as CheckboxGroup } from './checkbox-group';
32
32
  export { default as Select } from './select';
33
33
  export { default as Flip } from './flip';
34
- export const version = '0.3.28-beta.5';
34
+ export const version = '0.3.28-beta.6';
package/es/markdown/index.js CHANGED
@@ -27,96 +27,69 @@ const Markdown = forwardRef((_a, ref) => {
27
27
  const [displayedContent, setDisplayedContent] = useState(() => (others === null || others === void 0 ? void 0 : others.typewriterEffect) ? '' : content);
28
28
  const [contentQueue, setContentQueue] = useState(() => (others === null || others === void 0 ? void 0 : others.typewriterEffect) ? content.split('') : []);
29
29
  const typeTimeoutRef = useRef(null);
30
- const [typing, setTyping] = useState(false);
31
- const previousContentRef = useRef(content);
32
- const typewriterContent = useMemo(() => {
33
- if (!(others === null || others === void 0 ? void 0 : others.typewriterEffect)) {
34
- return content;
30
+ // 清理定时器函数
31
+ const clearTypeTimer = () => {
32
+ if (typeTimeoutRef.current) {
33
+ clearTimeout(typeTimeoutRef.current);
34
+ typeTimeoutRef.current = null;
35
35
  }
36
- return displayedContent;
37
- }, [content, displayedContent, others === null || others === void 0 ? void 0 : others.typewriterEffect]);
38
- // 消息队列更新
36
+ };
37
+ // 消息队列更新 - 仅在content或typewriterEffect变化时执行
39
38
  useEffect(() => {
39
+ // 清除任何现有的定时器
40
+ clearTypeTimer();
41
+ // 如果没有启用打字机效果，直接显示全部内容
40
42
  if (!(others === null || others === void 0 ? void 0 : others.typewriterEffect)) {
41
43
  setDisplayedContent(content);
44
+ setContentQueue([]);
42
45
  return;
43
46
  }
44
- if (content === previousContentRef.current) {
45
- return; // 如果内容没有变化，不做处理
46
- }
47
- // 记录新的内容
48
- previousContentRef.current = content;
49
- // 清除任何现有的定时器
50
- if (typeTimeoutRef.current) {
51
- clearTimeout(typeTimeoutRef.current);
52
- typeTimeoutRef.current = null;
53
- }
54
47
  // 将内容分成两部分：直接显示部分和打字效果部分
55
48
  if (content.length <= 20) {
56
- // 如果内容不超过20个字符，全部使用打字效果
49
+ // 内容不超过20个字符，全部使用打字效果
57
50
  setDisplayedContent('');
58
51
  setContentQueue(content.split(''));
59
52
  }
60
53
  else {
61
- // 如果内容超过20个字符，前面部分直接显示，后20个字符用于打字效果
54
+ // 内容超过20个字符，前面直接显示，后20字符用打字效果
62
55
  const displayPart = content.slice(0, content.length - 20);
63
56
  const typingPart = content.slice(content.length - 20);
64
57
  setDisplayedContent(displayPart);
65
58
  setContentQueue(typingPart.split(''));
66
59
  }
67
- // 启动打字机效果
68
- setTyping(true);
69
60
  }, [content, others === null || others === void 0 ? void 0 : others.typewriterEffect]);
70
- // 执行打字机效果
61
+ // 执行打字机效果 - 仅负责处理contentQueue中的字符
71
62
  useEffect(() => {
72
- if (!(others === null || others === void 0 ? void 0 : others.typewriterEffect) || contentQueue.length === 0 || !typing) {
63
+ // 如果没有启用打字机效果或没有内容需要打字
64
+ if (!(others === null || others === void 0 ? void 0 : others.typewriterEffect) || contentQueue.length === 0) {
65
+ clearTypeTimer();
73
66
  return;
74
67
  }
75
- // 清除任何现有的定时器，确保不会有并发定时器
76
- if (typeTimeoutRef.current) {
77
- clearTimeout(typeTimeoutRef.current);
78
- typeTimeoutRef.current = null;
79
- }
80
68
  // 固定打字速度为50ms一个字
81
69
  const timePerChar = 50;
82
70
  const processNextChar = () => {
83
- if (contentQueue.length === 0) {
84
- if (typeTimeoutRef.current) {
85
- clearTimeout(typeTimeoutRef.current);
86
- typeTimeoutRef.current = null;
71
+ // 使用函数式更新避免依赖项问题
72
+ setContentQueue(prevQueue => {
73
+ if (prevQueue.length === 0) {
74
+ return prevQueue;
87
75
  }
88
- setTyping(false);
89
- return;
90
- }
91
- // 获取并移除队列中的第一个字符
92
- const nextChar = contentQueue[0];
93
- const newQueue = contentQueue.slice(1);
94
- // 更新状态
95
- setDisplayedContent(displayedContent + nextChar);
96
- setContentQueue(newQueue);
97
- // 如果队列还有字符，继续处理下一个
98
- if (newQueue.length > 0) {
99
- typeTimeoutRef.current = setTimeout(processNextChar, timePerChar);
100
- }
101
- else {
102
- setTyping(false);
103
- }
76
+ // 获取并移除队列中的第一个字符
77
+ const nextChar = prevQueue[0];
78
+ const newQueue = prevQueue.slice(1);
79
+ // 更新显示内容
80
+ setDisplayedContent(prev => prev + nextChar);
81
+ // 如果队列还有字符，继续处理下一个
82
+ if (newQueue.length > 0) {
83
+ typeTimeoutRef.current = setTimeout(processNextChar, timePerChar);
84
+ }
85
+ return newQueue;
86
+ });
104
87
  };
105
88
  // 开始处理第一个字符
89
+ clearTypeTimer(); // 确保没有并发定时器
106
90
  typeTimeoutRef.current = setTimeout(processNextChar, timePerChar);
107
- return () => {
108
- if (typeTimeoutRef.current) {
109
- clearTimeout(typeTimeoutRef.current);
110
- typeTimeoutRef.current = null;
111
- }
112
- };
113
- }, [others === null || others === void 0 ? void 0 : others.typewriterEffect, typing, contentQueue.length]); // 增加依赖项，确保typing状态变化时会触发
114
- // 当 typing 状态或 contentQueue 改变时重新启动打字效果
115
- useEffect(() => {
116
- if ((others === null || others === void 0 ? void 0 : others.typewriterEffect) && contentQueue.length > 0 && !typing && !typeTimeoutRef.current) {
117
- setTyping(true);
118
- }
119
- }, [contentQueue.length, others === null || others === void 0 ? void 0 : others.typewriterEffect, typing]);
91
+ return clearTypeTimer;
92
+ }, [contentQueue.length, others === null || others === void 0 ? void 0 : others.typewriterEffect]); // 仅依赖队列长度和打字机效果开关
120
93
  // 处理 HTML 标签
121
94
  const processedContent = useMemo(() => {
122
95
  // 使用 Record 类型来定义映射关系
@@ -132,7 +105,7 @@ const Markdown = forwardRef((_a, ref) => {
132
105
  common_footnote_text_style__font_size: 'span'
133
106
  };
134
107
  const regex = /<font\s+([^>]+)>([^<]+)<\/font>/g;
135
- return typewriterContent.replace(regex, (match, attributes, text) => {
108
+ return displayedContent.replace(regex, (match, attributes, text) => {
136
109
  let sizeToken = '';
137
110
  let colorTokenV2 = '';
138
111
  // 提取属性
@@ -163,7 +136,7 @@ const Markdown = forwardRef((_a, ref) => {
163
136
  return `<${tag} style="${style}" class="markdownFont">${text}</${tag}>`;
164
137
  // return `<span style="${style}">${text}</span>`;
165
138
  });
166
- }, [typewriterContent]);
139
+ }, [displayedContent]);
167
140
  // 转换表情符号
168
141
  let transformedContent = useMemo(() => {
169
142
  // 这个函数的执行会导致类似于 // 这样的符号被 转成 &#x2F; 这样的符号
package/lib/index.js CHANGED
@@ -68,4 +68,4 @@ var select_1 = require("./select");
68
68
  Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return tslib_1.__importDefault(select_1).default; } });
69
69
  var flip_1 = require("./flip");
70
70
  Object.defineProperty(exports, "Flip", { enumerable: true, get: function () { return tslib_1.__importDefault(flip_1).default; } });
71
- exports.version = '0.3.28-beta.5';
71
+ exports.version = '0.3.28-beta.6';
package/lib/markdown/index.js CHANGED
@@ -29,96 +29,69 @@ const Markdown = (0, react_1.forwardRef)((_a, ref) => {
29
29
  const [displayedContent, setDisplayedContent] = (0, react_1.useState)(() => (others === null || others === void 0 ? void 0 : others.typewriterEffect) ? '' : content);
30
30
  const [contentQueue, setContentQueue] = (0, react_1.useState)(() => (others === null || others === void 0 ? void 0 : others.typewriterEffect) ? content.split('') : []);
31
31
  const typeTimeoutRef = (0, react_1.useRef)(null);
32
- const [typing, setTyping] = (0, react_1.useState)(false);
33
- const previousContentRef = (0, react_1.useRef)(content);
34
- const typewriterContent = (0, react_1.useMemo)(() => {
35
- if (!(others === null || others === void 0 ? void 0 : others.typewriterEffect)) {
36
- return content;
32
+ // 清理定时器函数
33
+ const clearTypeTimer = () => {
34
+ if (typeTimeoutRef.current) {
35
+ clearTimeout(typeTimeoutRef.current);
36
+ typeTimeoutRef.current = null;
37
37
  }
38
- return displayedContent;
39
- }, [content, displayedContent, others === null || others === void 0 ? void 0 : others.typewriterEffect]);
40
- // 消息队列更新
38
+ };
39
+ // 消息队列更新 - 仅在content或typewriterEffect变化时执行
41
40
  (0, react_1.useEffect)(() => {
41
+ // 清除任何现有的定时器
42
+ clearTypeTimer();
43
+ // 如果没有启用打字机效果，直接显示全部内容
42
44
  if (!(others === null || others === void 0 ? void 0 : others.typewriterEffect)) {
43
45
  setDisplayedContent(content);
46
+ setContentQueue([]);
44
47
  return;
45
48
  }
46
- if (content === previousContentRef.current) {
47
- return; // 如果内容没有变化，不做处理
48
- }
49
- // 记录新的内容
50
- previousContentRef.current = content;
51
- // 清除任何现有的定时器
52
- if (typeTimeoutRef.current) {
53
- clearTimeout(typeTimeoutRef.current);
54
- typeTimeoutRef.current = null;
55
- }
56
49
  // 将内容分成两部分：直接显示部分和打字效果部分
57
50
  if (content.length <= 20) {
58
- // 如果内容不超过20个字符，全部使用打字效果
51
+ // 内容不超过20个字符，全部使用打字效果
59
52
  setDisplayedContent('');
60
53
  setContentQueue(content.split(''));
61
54
  }
62
55
  else {
63
- // 如果内容超过20个字符，前面部分直接显示，后20个字符用于打字效果
56
+ // 内容超过20个字符，前面直接显示，后20字符用打字效果
64
57
  const displayPart = content.slice(0, content.length - 20);
65
58
  const typingPart = content.slice(content.length - 20);
66
59
  setDisplayedContent(displayPart);
67
60
  setContentQueue(typingPart.split(''));
68
61
  }
69
- // 启动打字机效果
70
- setTyping(true);
71
62
  }, [content, others === null || others === void 0 ? void 0 : others.typewriterEffect]);
72
- // 执行打字机效果
63
+ // 执行打字机效果 - 仅负责处理contentQueue中的字符
73
64
  (0, react_1.useEffect)(() => {
74
- if (!(others === null || others === void 0 ? void 0 : others.typewriterEffect) || contentQueue.length === 0 || !typing) {
65
+ // 如果没有启用打字机效果或没有内容需要打字
66
+ if (!(others === null || others === void 0 ? void 0 : others.typewriterEffect) || contentQueue.length === 0) {
67
+ clearTypeTimer();
75
68
  return;
76
69
  }
77
- // 清除任何现有的定时器，确保不会有并发定时器
78
- if (typeTimeoutRef.current) {
79
- clearTimeout(typeTimeoutRef.current);
80
- typeTimeoutRef.current = null;
81
- }
82
70
  // 固定打字速度为50ms一个字
83
71
  const timePerChar = 50;
84
72
  const processNextChar = () => {
85
- if (contentQueue.length === 0) {
86
- if (typeTimeoutRef.current) {
87
- clearTimeout(typeTimeoutRef.current);
88
- typeTimeoutRef.current = null;
73
+ // 使用函数式更新避免依赖项问题
74
+ setContentQueue(prevQueue => {
75
+ if (prevQueue.length === 0) {
76
+ return prevQueue;
89
77
  }
90
- setTyping(false);
91
- return;
92
- }
93
- // 获取并移除队列中的第一个字符
94
- const nextChar = contentQueue[0];
95
- const newQueue = contentQueue.slice(1);
96
- // 更新状态
97
- setDisplayedContent(displayedContent + nextChar);
98
- setContentQueue(newQueue);
99
- // 如果队列还有字符，继续处理下一个
100
- if (newQueue.length > 0) {
101
- typeTimeoutRef.current = setTimeout(processNextChar, timePerChar);
102
- }
103
- else {
104
- setTyping(false);
105
- }
78
+ // 获取并移除队列中的第一个字符
79
+ const nextChar = prevQueue[0];
80
+ const newQueue = prevQueue.slice(1);
81
+ // 更新显示内容
82
+ setDisplayedContent(prev => prev + nextChar);
83
+ // 如果队列还有字符，继续处理下一个
84
+ if (newQueue.length > 0) {
85
+ typeTimeoutRef.current = setTimeout(processNextChar, timePerChar);
86
+ }
87
+ return newQueue;
88
+ });
106
89
  };
107
90
  // 开始处理第一个字符
91
+ clearTypeTimer(); // 确保没有并发定时器
108
92
  typeTimeoutRef.current = setTimeout(processNextChar, timePerChar);
109
- return () => {
110
- if (typeTimeoutRef.current) {
111
- clearTimeout(typeTimeoutRef.current);
112
- typeTimeoutRef.current = null;
113
- }
114
- };
115
- }, [others === null || others === void 0 ? void 0 : others.typewriterEffect, typing, contentQueue.length]); // 增加依赖项，确保typing状态变化时会触发
116
- // 当 typing 状态或 contentQueue 改变时重新启动打字效果
117
- (0, react_1.useEffect)(() => {
118
- if ((others === null || others === void 0 ? void 0 : others.typewriterEffect) && contentQueue.length > 0 && !typing && !typeTimeoutRef.current) {
119
- setTyping(true);
120
- }
121
- }, [contentQueue.length, others === null || others === void 0 ? void 0 : others.typewriterEffect, typing]);
93
+ return clearTypeTimer;
94
+ }, [contentQueue.length, others === null || others === void 0 ? void 0 : others.typewriterEffect]); // 仅依赖队列长度和打字机效果开关
122
95
  // 处理 HTML 标签
123
96
  const processedContent = (0, react_1.useMemo)(() => {
124
97
  // 使用 Record 类型来定义映射关系
@@ -134,7 +107,7 @@ const Markdown = (0, react_1.forwardRef)((_a, ref) => {
134
107
  common_footnote_text_style__font_size: 'span'
135
108
  };
136
109
  const regex = /<font\s+([^>]+)>([^<]+)<\/font>/g;
137
- return typewriterContent.replace(regex, (match, attributes, text) => {
110
+ return displayedContent.replace(regex, (match, attributes, text) => {
138
111
  let sizeToken = '';
139
112
  let colorTokenV2 = '';
140
113
  // 提取属性
@@ -165,7 +138,7 @@ const Markdown = (0, react_1.forwardRef)((_a, ref) => {
165
138
  return `<${tag} style="${style}" class="markdownFont">${text}</${tag}>`;
166
139
  // return `<span style="${style}">${text}</span>`;
167
140
  });
168
- }, [typewriterContent]);
141
+ }, [displayedContent]);
169
142
  // 转换表情符号
170
143
  let transformedContent = (0, react_1.useMemo)(() => {
171
144
  // 这个函数的执行会导致类似于 // 这样的符号被 转成 &#x2F; 这样的符号
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alifd/chat",
3
- "version": "0.3.28-beta.5",
3
+ "version": "0.3.28-beta.6",
4
4
  "description": "A configurable component library for chat built on React.",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",