ConversationHistory

[DineshKumar-Engg]

.'@nlux/openai-react' & '@nlux/react'

I designed the AiChat as Bootstrap Pop-Up modal UI. when I click the open chat button, the modal popup opens the Aichat UI and I type the message, store the response in session storage, and close the popup modal. then again I opened the popup modal to show the previous conversation from session storage in the Aichat conversation history, but the message was not shown in the chat system

[salmenus]

Hi @DineshKumar-Engg

• Are you using the conversationHistory option described here: https://nlux.dev/api/ui/ai-chat#conversation-history ?
• Do you keep track of the user and AI answers ( you can do that using events ) then provide them back as conversationHistory inputs ?
• Can you provide an example that re-load the <AiChat /> component with conversation history ?

I do not expect conversation to get erased if you you hide the dialog using CSS (but DOM element still there).
But if you remove the DOM element, you will to properly rehydrate the conversation.

[DineshKumar-Engg]

As per the AiChat docx reference, I wrote code but still does not show the chat history , Check my code and Image

<Offcanvas className='modalChatUi' placement='end' show={modalShow} onHide={handleClose} backdrop={false} > <Offcanvas.Header closeButton> <Offcanvas.Title id="contained-modal-title-vcenter" className='modalImg'> <img src='https://xyz.com/static/media/logo.527ce9569c515d13529371370e18d69f.svg' alt="" /> </Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body> <AiChat adapter={adapter} promptBoxOptions={{ placeholder: 'How can I help you today?', autoFocus: false, }} personaOptions={{ bot: { name: 'GenAI', picture: 'https://www.xyz.com/images/giphy.gif', tagline: 'AI First Mate!', }, user: { name: 'User', picture: 'https://www.xyz.com/images/abc.png' } }} conversationOptions={{ scrollWhenGenerating: true, }} conversationHistory={[ { role: 'User', message: 'Hello AI chatbot! What\'s the capital of Antartica?' }, { role: 'GenAI', message: 'Antarctica, the cool place where penguins rule, doesn\'t have a capital because it\'s too chill for politics!' } ]} layoutOptions={{ maxWidth: '100%', maxHeight: '100%' }} events={{ messageSent: messageSentCallback, messageReceived: messageReceivedCallback, }} /> </Offcanvas.Body> </Offcanvas>

[salmenus]

Hi @DineshKumar-Engg I added a 2 features that should allow you to implement what you want:

1. Access to conversation history: Now NLUX tracks every message typed by the user to send it to the server, and to allow storing it.
2. Pre-Destroy event - Documentation here : This event is called prior to component being destroyed, and it enables users to capture conversation history.

They are available starting from version 0.11.1. The NLUX events documentation page has been updated to mention those features.

Your Example

I created an example below that does what you are trying to achieve:

• We capture conversation history prior to destroying (hiding) the component
• We use that conversation history as "initial conversation" when we want to display the AiChat component example
• Example: https://codesandbox.io/p/sandbox/happy-browser-77csvv?file=%2FApp.tsx

I hope this solves your problem. Let me know if you need further help.

[DineshKumar-Engg]

Thank you for the updates @salmenus

I have another problem.

where I can't able to write the whole systemMessage into the useAdapter, Instead I plan to give systemMessage by PDF URL or local React src file import and process the pdf to text to read and pass into systemMessage for act accordingly.

I tried both, but it did not work out.
Can you help me out with the problem?

Here, I import the local pdf file in the name of "AI" and pass into the getDocument(AI) to convert the pdf file into text