feat(chat): support render empty prompt (#575)

* feat(chat): support render empty prompt

* test(useTyping): add unit test

Author: mortalYoung

src/chat/__tests__/__snapshots__/markdown.test.tsx.snap

@@ -23,13 +23,13 @@ exports[`Test Chat Markdown Match Snapshots: typing 1`] = `
   <div
     class="dtc__aigc__markdown dtc__aigc__markdown--blink test"
   >
-    <p>
+    <div>
       <code
         class="dtc__aigc__markdown__inlineCode"
       >
         inline code test 
       </code>
-    </p>
+    </div>
     
 
     <div

src/chat/__tests__/__snapshots__/prompt.test.tsx.snap

@@ -24,22 +24,6 @@ exports[`Test Chat Prompt Match Snapshots: default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Test Chat Prompt Match Snapshots: empty 1`] = `
-<DocumentFragment>
-  <section
-    class="dtc__prompt__container"
-  >
-    <div
-      class="dtc__prompt__wrapper"
-    >
-      <div
-        class="dtc__prompt__content"
-      >
-        <div
-          class="dtc__aigc__markdown"
-        />
-      </div>
-    </div>
-  </section>
-</DocumentFragment>
-`;
+exports[`Test Chat Prompt Match Snapshots: empty 1`] = `<DocumentFragment />`;
+
+exports[`Test Chat Prompt Match Snapshots: empty title 1`] = `<DocumentFragment />`;

src/chat/__tests__/prompt.test.tsx

@@ -26,6 +26,11 @@ describe('Test Chat Prompt', () => {
         expect(
             render(<Prompt className="test" data={generatePrompt()} />).asFragment()
         ).toMatchSnapshot('default');
+        const _empty = generatePrompt();
+        _empty.title = '';
+        expect(render(<Prompt className="test" data={_empty} />).asFragment()).toMatchSnapshot(
+            'empty title'
+        );
     });
 
     it('Should support components', () => {

src/chat/markdown/index.tsx

@@ -48,8 +48,17 @@ export default memo(
                     hr() {
                         return <hr color="#ebecf0" className="dtc__aigc__markdown__hr" />;
                     },
+                    p: (data) => {
+                        // avoid validateDOMNesting error for div as a descendant of p
+                        if (data.node.children.every((child) => child.type === 'text')) {
+                            return <p>{data.children}</p>;
+                        } else {
+                            return <div>{data.children}</div>;
+                        }
+                    },
                     ...components,
                 }}
+                includeElementIndex
                 {...rest}
             >
                 {children}

src/chat/prompt/index.tsx

@@ -28,6 +28,8 @@ export default function Prompt({ data, className }: IPromptProps) {
         }, {});
     }, [components, data?.id]);
 
+    if (!data?.title) return null;
+
     return (
         <section className={classNames('dtc__prompt__container', className)}>
             <div className="dtc__prompt__wrapper">

src/useTyping/__tests__/useTyping.test.ts

@@ -63,6 +63,46 @@ describe('Test useTyping hook', () => {
         expect(result.current.isTyping).toBe(false);
     });
 
+    it('Should typing whole tag', () => {
+        const { result, rerender } = renderHook((props: any) => {
+            const [text, setText] = useState('');
+            const ref = useRef(0);
+            const typing = useTyping({
+                onTyping(post) {
+                    setText(post);
+                },
+            });
+
+            useEffect(() => {
+                if (props?.start) {
+                    typing.start();
+                    let p = 0;
+                    typing.push('<step type="1">');
+                    ref.current = window.setInterval(() => {
+                        typing.push(testText[p]);
+                        p++;
+                        if (p >= testText.length) {
+                            typing.close();
+                            window.clearInterval(ref.current);
+                        }
+                    }, 50);
+                }
+
+                return () => {
+                    window.clearInterval(ref.current);
+                };
+            }, [props?.start]);
+
+            return { text, isTyping: typing.isTyping };
+        });
+
+        // 开启打字机效果
+        rerender({ start: true });
+
+        jest.advanceTimersByTime(50);
+        expect(result.current.text).toBe('<step type="1">');
+    });
+
     it('Should waiting for new text', () => {
         const { result } = renderHook(() => {
             const [text, setText] = useState('');

src/useTyping/index.ts

@@ -35,13 +35,29 @@ export default function useTyping({ onTyping }: { onTyping: (post: string) => vo
         typingCountOnTime.current = Math.ceil(remainWordsLength / typingTimes);
     }
 
+    function getNextChunkPosition() {
+        const rest = queue.current.slice(beginIndex.current);
+        const chunk = rest.slice(0, typingCountOnTime.current);
+        const validHTMLTagRegex = /<[a-zA-Z]{0,4}\s[^<]*>/;
+        // 确保在 typing 的过程中，HTML 标签不被分割
+        if (validHTMLTagRegex.test(rest) && !validHTMLTagRegex.test(chunk)) {
+            const match = rest.match(validHTMLTagRegex)!;
+            const tag = match[0];
+            const index = rest.indexOf(tag);
+            return beginIndex.current + index + tag.length;
+        }
+        return beginIndex.current + typingCountOnTime.current;
+    }
+
     function startTyping() {
         if (interval.current) return;
         interval.current = window.setInterval(() => {
             if (beginIndex.current < queue.current.length) {
                 const str = queue.current;
-                onTyping(str.slice(0, beginIndex.current + typingCountOnTime.current));
-                beginIndex.current += typingCountOnTime.current;
+                const idx = getNextChunkPosition();
+                const next = str.slice(0, idx);
+                onTyping(next);
+                beginIndex.current = next.length;
             } else if (!isStart.current) {
                 // 如果发送了全部的消息且信号关闭，则清空队列
                 window.clearInterval(interval.current);