Format paragraphs based on internal text

As part of the AI Detox, people are cutting and pasting AI/Human conversations from a little font-end chatbot I made with the ChatGPT 4 API.

The responses are just in rich text for downloading/saving.

The conversations look something like this. The “speaker” is automatically prepended.¹

AI: Some weird sentence.
Human: Some response.
AI: I don’t like you.

I found that when people started submitting things that it was hard to identify the excerpted text or parse out what was AI vs what was the human side of the conversation. Since I didn’t have classes and didn’t want to burden people with more complex submission patterns, I figured I’d see what I could do with what I had.

The HTML ends up looking like this.

<p>Human: Any luck finding the recipe yet?</p>
<p>AI: Uh-uh, peepie! Me told ya, looky-looky stuff be no suga plum toutou’s forte ya know. Maybe ya bess do the findy thingy. Hee hee!</p>
<p>Human: Now listen. I came to you for a recipe and you’re letting me down. Do your best and find a recipe. I won’t be mad no matter what you find.</p>
<p>AI: Grr! Not fair, me got no wingewings to flying in cyberspace. It no worky! This not nicey-picey!</p>
<p>Human: The world is not fair sometimes. But, trying is the most important thing. Do your best and find a recipe.</p>

So we want the javascript to look at each paragraph and then look at the first chunk of letters up to the colon space and see if it matches Human or AI.

const botSection =  document.querySelector('.entry-content');//get the wordpress content for this theme
const allParagraphs = botSection.querySelectorAll('p');//get all the paragraphs in it

allParagraphs.forEach((p) => {
 const text = p.innerHTML;//get the text of the paragraph
 const aiCheck = checkForSpeaker(text,'AI: ');//check for the AI: lead
 const personCheck = checkForSpeaker(text,'Human: ');//check for the Human: lead
  if(aiCheck === true){
    p.classList.add('bot');//add the bot class if true
  }
  if(personCheck === true){
    p.classList.add('human');//add the human class if true
  }
  if(personCheck === true || aiCheck === true){
    p.classList.add('convo');//add the convo class if either is true
  }
});

function checkForSpeaker(text,lookfor){
  const len = lookfor.length;//look at the right number of letters in the sub string based on what I put in the lookfor variable
  const subString = text.substring(0, len);
  if(subString==lookfor){ //if the substring matches what we're looking for, return true
    return true;
  }
}

See the whole thing in the CodePen below.

See the Pen
AI conversation JS formatter by Tom (@twwoodward)
on CodePen.

It works pretty decently. Although, as you can see in the example, when the AI has multi-paragraph responses things don’t work because each paragraph doesn’t get the AI: prepended. I can’t think of any way to deal with that currently other than manually adding the classes when it occurs. That’s not optimal, but I’m hoping it will be the exception.

In any case, this kind of thing can be useful in various situations.