Orama Cloud: Use Create Answer Session with React?

[osseonews]

I was reading your docs on Creating an Answering Session, but this does not seem to be a part of the React SDK: https://docs.orama.com/cloud/integrating-orama-cloud/react-sdk

So how do you create an Answer Session in React? The reason we need to do this is because the Chat Box Component doesn't allow any customization of results or more importantly doesn't allow passing of search parameter, so we can filter and sort to influence the inference. This is critical, when you are using a large dataset. So we thought about using the Create Answer Session in JS to allow us to better fine tune the AI Chat. But, it doesn't seem like you can use in React, or the SDK doesn't include it (only regular search and vector search, seem to be included)

[osseonews]

OK, so what we did is to just put the entire Orama Client in an onSubmit handler in a React component and it seems to work fine. Not sure if this is the correct way to do it or not. pseudo code is below. curious if this is basically the way to do it.

const [newQuery, setNewQuery] = React.useState("");
  const [newMessage, setNewMessage] = React.useState("");
  const [sourcesResearch, setSourcesResearch] = React.useState([]);
async function submitNewMessage() {
    const trimmedMessage = newQuery.trim();
    try {
          const orama = new OramaClient({
            endpoint: "URL",
            api_key: "KEY",
          });
      const answerSession = orama.createAnswerSession({
        // optional
        userContext: "The user",
        // optional
        inferenceType: "documentation",
        // optional
        initialMessages: [],
        // optional
        events: {
          onMessageChange: (messages) => {
            const filterAssistant = messages.filter(item=>item.role === "assistant")
            setNewMessage(filterAssistant[0].content)
          },
          onMessageLoading: (loading) => console.log({ loading }),
          onAnswerAborted: (aborted) => console.log({ aborted }),
          onSourceChange: (sources) => {console.log({ sources })
                                        setSourcesResearch(sources)
          },
          onQueryTranslated: (query) => console.log({ query }),
          onStateChange: (state) => {
            console.log({ state })
          },
          onNewInteractionStarted: (interactionId) => console.log({ interactionId }),
        },
      });

      await answerSession.ask({
        term: trimmedMessage,
      });
    } catch (e) {
      console.log ("error",e)
    }
  }
<>
 <textarea
             className='block w-full max-h-[140px] py-2 px-4 pr-11 bg-white rounded-3xl resize-none placeholder:text-primary-blue placeholder:leading-4 placeholder:-translate-y-1 sm:placeholder:leading-normal sm:placeholder:translate-y-0 focus:outline-none'
             value={newQuery}
             onChange={e => setNewQuery(e.target.value)}
           />
           <button
             className='absolute top-1/2 -translate-y-1/2 right-3 p-1 rounded-md hover:bg-primary-blue/20'
             onClick={submitNewMessage}
           >
             Submit
           </button>
<div>{newMessage}</div>
     {sourcesResearch.map((item, idx) => (
       <div key={idx} className={`flex items-start gap-4 py-4 px-3 rounded-xl`}>
        <a href={`${item.document.url}`}>{item.document.title}</a>
       </div>
))}
</>