Custom renderer `content` prop is defined as an Array but is a string

[ScreamZ]

Following what we exchanged on #73 and in the vibe of #74

[!note] Suggestion: It should be an Array all time with one (batch/streaming) or more elements (streaming).

Currently we have

type StreamResponseComponentProps<AiMsg> = {
    uid: string;
    dataTransferMode: 'stream';
    status: 'streaming' | 'complete';
    content?: AiMsg[];
    serverResponse?: unknown[];
    containerRef: RefObject<never>;
};

And if we look at the payload it's a string

[salmenus]

Investigating. Thanks for reporting @ScreamZ

[salmenus]

Fixed in 2.5

Just published

Content is now an array, all the time

[salmenus]

[ScreamZ]

My current Hybrid renderer:

 <div className="flex flex-col">
      {props.containerRef ? <div ref={props.containerRef} /> : props.content}
      <div className="grid grid-cols-3">
        <button onClick={() => console.log("I like it!")}>👍</button>
        <button onClick={() => console.log("I love it!")}>❤️</button>
        <button onClick={() => console.log("I hate it!")}>😵</button>
      </div>
    </div>

But we might need to access the markdown parser from nlux, or i could use my own. But we need to mutualize it somewhere. Maybe could be nice to have something, just like we have htmlSanitizer.

I concede I can also just rely on props.content and implement my own logic. Maybe will do something like this along with framer motion.

[!TIP] You can also do this

import { StreamResponseComponentProps } from "@nlux/react";
import React from "react";
import Markdown from "react-markdown";

function _ResponseRenderer(props: StreamResponseComponentProps<string>) {
  return (
    <div className="flex w-full flex-col">
      <Markdown
        components={{
          h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
          // ...
        }}
      >
        {props.content?.join("")}
      </Markdown>
      <div className="grid grid-cols-3">
        <button onClick={() => console.log("I like it!")}>👍</button>
        <button onClick={() => console.log("I love it!")}>❤️</button>
        <button onClick={() => console.log("I hate it!")}>😵</button>
      </div>
    </div>
  );
}

export const ResponseRenderer = React.memo(_ResponseRenderer);

[salmenus]

Alright — With <Markdown> ... </Markdown> primitive delivered, now we can consider all the requirements related to content satisfied:

• props.content is an array that's up to date as content/chunks are being generated. ✅
• It's possible to render stream of content as markdown stream, as it's being generated.
• For initial conversation messages and content: We have <Markdown> primitive to cover that case.

I'm closing this issue, unless you still have further requirements @ScreamZ