salmenus
commented
4 months ago Thanks @Laurian for raising this, and for the well detailed suggestion.
It is indeed something that I've been thinking about - as that message rendering component is quite important and responsible for a big part of the interaction with the LLM.
I like your suggestion of a custom component to wrap the message. The message rendering is a bit complex as that's where we handle rendering markdown as it's being generated. But we can probably have a custom message renderer in React as following:
<AiChat messageRenderer={MyCustomMessageRenderer} />With MyCustomMessageRenderer defined as following:
import {useChatResponseRenderer} from '@nlux/react';
const CustomMessageRenderer = (observer: IObserver<DataType>, extras: OtherMessageRelatedInfo): ReactElement => {
const [ResponseRenderer, status] = useChatRenderer(observer);
return (
<div>
<div>Some custom stuff!</div>
<ResponseRenderer />
{(status === 'loading') && <div>Stuff to show when loading!</div>}
{(status === 'complete') && <div>Stuff to show when message is rendered!</div>}
</div>
);
}- The
ChatResponseRenderercomponent will be aware of what's being generate and will render it as it should expected, use the appropriate rendering config. - The
statusproperty allows developers to device what other content to render based on status.
What do you think?
I'm moving this feature request into the Features Roadmap and I'll be prioritising it.
TechWithTy
nehal7-ml
chip-davis
Several chat UIs out there have extra widgets along a message like thumbs up / down, share, report, etc.
It would be handy to have a way to decorate the message box with interactive components. I think there are 3 ways to approach this:
custom components to render messages
custom component to wrap the message (keep current rendering)
injecting a widget/markup in the current
nluxc-text-message-contentdivelementIn Discord @salmenus mentioned something along passing a custom rendered:
<AiChat messageRenderer={MyCustomMessageRenderer} />type CustomMessageRenderer = (message: string, extras: OtherMessageRelatedInfo): ReactElementBut I guess this won't work in stream mode, I mean it will work as in fetch mode unless we make the component also deal with the streaming adapter.
Alternatively a wrapper would just decorate the message which is rendered by the original core component (
<AiChat />renders<MyCustomMessageWrapper message={message} extras={extras}>{children}</Myβ¦>) where{children}is the original core component that does handle streaming, markdown, etc. And I guess while streaming themessageandextrasprops will get updated, maybe acompleteprop (fed from the streaming adapter observer?) would be needed too to know that now I can interact with my decorations?Like 2, let's keep the original rendering but instead of wrapping it just add some custom component in React or markup in js:
<AiChat messageHeader={MyCustomMessageHeader} messageFooter={MyCustomMessageFooter} />But even injecting plain markup would be enough with React, having
messageHeader={<div className="header"></div>}would allow me to render what I need inside withcreatePortal.It would be nice if the customisation could be done in a way to works at core component level, such that could be used in both js and react.