Cannot format LLMChain's output

[martin-dimi]

Hey, I have the following setup:

  const prompt = ChatPromptTemplate.fromPromptMessages([
    SystemMessagePromptTemplate.fromTemplate(`
You work for "{sourceCompany}" as Head of Marketing. You are tasked to improve the website of "{sourceCompany}" to make it very personalised to "{targetCompany}".
For each of the given html elements, please provide a better alternative that is more likely to convert "{targetCompany}".
`),

    HumanMessagePromptTemplate.fromTemplate(elements.map(element => `Website Element: h2\nValue: ${element.value}`).join("\n")),
  ]);


  const chain = new LLMChain({
    prompt: prompt,
    llm: chat,
    outputParser: new CommaSeparatedListOutputParser(),
  });

  const params = { formatInstructions, sourceCompany, targetCompany }
  const res = await chain.call(params)

The HumanMessagePromptTemplate is basically a massive list of

Website Element: H2
Value: <value1>

Website Element: H2
Value: <value2>

...

For each of these entries, I'd like an updated value. I'd like to map the result onto an array that has the same order as the input.
How would I go about doing this? As you can see, I tried using a CommaSeparatedListOutputParser but the response I get back is:

{
  text: [
    'Website Element: h2\n' +
      'Value: How TinyCorp can help Bank of America grow?\n' +
      'Website Element: h2\n' +
      'Value: Faster onboarding for Bank of America customers\n' +
  ]
}

(note, I had to redact the actual old/new values from this post).

The issue is 2 fold:

1. the type of res is ChainValues where I'd expected to be []string (each element being a result)
2. The single string output seems to contain both Website and Value whereas I expect it to be a simple json array of results.

• Slightly separately, I'm currently using ChatPromptTemplate only so that I can have SystemMessagePromptTemplate provide context. Do you think that's necessary?