Implementing a DefaultStreamingRenderer component and remove containerRef

[ScreamZ]

As we discussed on Discord, and on #73 I guess its better to unify both batch and streaming renderer under a common API.

RFC Drafting

Final DX could look like this

type CustomResponseRendererProps<AiMsg = string, ServerResponse = unknown> = {
  /**
   * Unique identifier generated by NLUX for this message.
   */
  uid: string;
  /**
   * - Batch for batch mode or when using `initialConversation` messages
   * - Stream for streaming mode.
   */
  dataTransferMode: "stream" | "batch";

  /**
   * The status of the message, which can be 'streaming' (only if streaming is enabled) or 'complete' (for batch and streaming when fully complete)
   * When an error occurs, the entire message will be removed from the chat area and an error message
   * will be displayed to the user.
   */
  status: "streaming" | "complete";

  /**
   * The content of the message.
   * This is returned as an array, for each parts when using streaming.
   * With batching this is still an array but with only one element.
   */
  content: Array<AiMsg>;

  /**
   * The raw server response without any processing.
   * This is only available with NLUX standard adapters, and only when the status is 'complete'.
   */
  serverResponse?: ServerResponse;
};

We might expose two renderers by default. And an interface (to be defined) so user can create their own.

The default might be able to receive small personalization, like passing custom classes. But not much

• We could also expose the mardown renderer, so the user can just use it if they need to, without implementing their own. (Or we can just say fuck off use your own if you go out of road.) (this is a valid option for me). The most important thing is that it remains coherent across the whole application.

Example implementation

import React from "react";
import { DefaultBatchMessageRenderer, DefaultStreamingMessageRenderer } from "@nlux/react";

function CustomRenderer<AiMsg = string>(props: CustomResponseRendererProps<AiMsg>) {
  return (
    <div className="flex flex-col">
      {props.dataTransferMode === "batch" ? (
        <DefaultBatchMessageRenderer content={props.content} />
      ) : (
        <DefaultStreamingMessageRenderer content={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>
  );
}