nlkitai / nlux

The π—£π—Όπ˜„π—²π—Ώπ—³π˜‚π—Ή Conversational AI JavaScript Library πŸ’¬ β€”Β UI for any LLM, supporting LangChain / HuggingFace / Vercel AI, and more 🧑 React, Next.js, and plain JavaScript ⭐️
https://docs.nlkit.com/nlux
Other
937 stars 48 forks source link

Using `React.memo` with a custom renderer crashes. #76

Closed ScreamZ closed 3 weeks ago

ScreamZ commented 3 weeks ago

As we discussed on Discord https://discord.com/channels/1197831161938980945/1247893613229379645

Given this code

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

function _CustomRenderer<AiMsg = string>(props: StreamResponseComponentProps<AiMsg>) {
  return (
    <div className="flex flex-col">
      <div ref={props.containerRef} />
      <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 CustomRenderer = React.memo(_CustomRenderer);

gives TypeError: c.responseRenderer is not a function

I discovered that while trying to avoid having one log line per item each time i touch a key on my keyboard to debug custom renderer props. I don't get why is that not considered as a simple React component ?

salmenus commented 3 weeks ago

Investigating.

salmenus commented 3 weeks ago

Are you sure it's not an import issue for your local codebase ?

memo with custom renderers seem to work for me.

Example here: https://codesandbox.io/p/sandbox/memo-custom-renderer-8ljrtd

Otherwise, can you please provide a reproducible CodesandBox example?

ScreamZ commented 3 weeks ago

Now working in @nlux/react 2.5.7