How to deal with dynamic strings

[okboy5555]

Description

I am implementing an AI dialogue function, strings，i need to dynamically change the value of strings，since my data is being streamed, it may need to change while typing. After 2 days of trying，I found that it seems that such a function cannot be achieved.

const typed = new Typed(dialogueContentRef.current, {
      strings: dialogueContentRef.current.strings,
      typeSpeed: 50,
      showCursor: false,
    });
    dialogueContentRef.current.typed = typed;

when i try to change strings value

dialogueContentRef.current.strings.push(messageValue)  // it can't work
dialogueContentRef.current.strings = ['test']  // it can work

Now, not providing a way to continue typing, I have to reset， like this

dialogueContentRef.current..reset()

The problem with this is that all the text is printed from scratch, which doesn't satisfy my expectations. I hope that when I receive new text, I can continue to print like this

this demo shows print 'test1', after xxx s, print 'test2'

print('test1');
settimeOut(xxx);
print('test2');
settimeOut(xxx);
print('test3');
.
.
.

Do you have any good suggestions, because currently it seems that strings cannot be accepted with a state

[mattboldt]

Right now, I don't think this is possible with Typed.js without resetting. I started a draft PR playing around with some options: https://github.com/mattboldt/typed.js/pull/596

The main hurdle here is that Typed.js assumes it should backspace every sentence it types before moving into the next one. This doesn't work when streaming new data in, like ChatGPT. I'll need to come up with a better way to append without deleting the previous text.

However, if you do want to backspace the previous text, and just begin typing the newly appended sentence, that's a much easier lift, and I could get that in a branch fairly quickly. I just wasn't sure if that's a real use-case.

[livingemoji]

changing the text being typed without resetting the entire animation, you'll need to update the strings array of the Typed instance. but you can try creating a function that updates the strings array and then destroys the current Typed instance and creates a new one with the updated strings

[chris-moon]

Unfortunately, destroying the instance will cause it to start typing from scratch again. If you don't destroy it, it will keep typing with the new data, but unfortunately, you get a bunch of cursors for each time it re-renders.

[BoBoooooo]

I have the same scene with ChatGPT stream output . Hope typed js can support this scene. thanks

[costea93]

@BoBoooooo did you manage to do it? I am wondering how do you make it to render DOM elements not just simple texts?

[perrocochino666]

Please @mattboldt add this feature, It would be a great step for typed.js, I have this site: www.progreferon.com where songs and albums info load dynamically, I did everything and came to the same conclusions that are mentioned here, please!