Typing animation persists across multiple lines when finished

[mgaussie]

Hi, and I think ideally @patrick due to your replies here:

Adding Typing Animation

You can add an animated typing effect to your pages, using the Typed Component in Wappler. It can be added as a prefix or suffix in your headings, links or paragraphs. We are going to add it as a suffix to a heading on our page. First, select the heading: [Screenshot_1] Scroll down the properties panel and you will see the Typed component. Click the add button: [Screenshot_2] Its properties appear as soon as you add it: [Screenshot_3] Select a position - prefix or suffix: [Screenshot…

I have variable length text coming from an API (ChatGPT chat specifically). I'd like to use the type animation (rather than using ChatGPT streams).

When I try to use dmx-typed e.g.

<div class="d-flex"> <p><span is="dmx-typed" speed="5" dmx-bind:strings="{{aiMsg}}" hidecursor="true"></span></p></div>

When I render this, it looks to be working well reasonably well however I have two issues:

1. When there is enough text requiring it to be displayed on multiple lines dmx-typed will often type out the first line, and then replace this single line with the next line of text instead of typing out 2/3/4 lines of text.
2. When it does complete the type animation for the full text content it then starts reversing. I don't want the text to loop or go back but I don't seem to be able to disable this even when removing references to this in the code, trying 0 on delay etc. etc.

Any guidance here on how I can essentially output a chat-like type effect using dmx-typed (just like the experience you get when ChatGPT replied).

Thanks!