how to pass parameters from <Chatbot>?

[eric-gardyn]

when using mongodb-chatbot-ui as <Chatbot user={{ name: 'eric' }} isExperimental={false} darkMode={false} serverBaseUrl="http://localhost:3000/api/v1"

how can I pass parameters (like userID, or app parameters) to the mongodb-chatbot-server ? I am using middleware to extract parameters, like const conversation = await res.locals.conversations.findById( req.params.conversationId )

but req.params is always empty. how can I add my own property?

I redefined the fetch function to add my own header, but it feels a little "hacky"

[mongodben]

if you're using the UI library, hacking the fetch function like you did is probably the easiest way to go about it. however, to make things less hacky, we already have the following PR up in review that will let you pass fetch options to the chatbot as a prop https://github.com/mongodb/chatbot/pull/308

[nlarew]

Hey Eric!

That's strange that req.params is empty - it should contain a variable for every route segment that starts with a colon, e.g. /conversations/:conversationId.

• Are you testing the middleware on a route like that?
• If you console.log(JSON.stringify(req.params)) what is the output?

Like Ben mentioned we should have a first class way for you to define custom headers and other fetch options in our next UI release. In the meantime, you can also try passing in your properties as query params (e.g. /conversations/65bd1fc7ddda193e3dc25ed8?userId=abc123) which you could then access on the server via req.query.userId.

[eric-gardyn]

Hey Eric!

That's strange that req.params is empty - it should contain a variable for every route segment that starts with a colon, e.g. /conversations/:conversationId.

• Are you testing the middleware on a route like that?
• If you console.log(JSON.stringify(req.params)) what is the output?

Like Ben mentioned we should have a first class way for you to define custom headers and other fetch options in our next UI release. In the meantime, you can also try passing in your properties as query params (e.g. /conversations/65bd1fc7ddda193e3dc25ed8?userId=abc123) which you could then access on the server via req.query.userId.

sorry, I had meant to say that the mongodb-chatbot-ui Chatbot would not let me update the params object (nor header), and could not find an easy way to add query param (?userId=abc123) to the URL in a dynamic way. I tested with my own test UI, and I am able to extract params from mongodb-chatbot-server, using a middleware.

[nlarew]

Gotcha. Are you still having any issues on this? If so, do you think being able to define custom fetchOptions to include with all requests (as implemented in https://github.com/mongodb/chatbot/pull/308) will help?

[eric-gardyn]

I took a look at the PR. I think it should work (wasn't able to pull the entire code locally to test). From a UI point of view, I need to be able to change the conversation ID, on the fly, meaning that it might change throughout the session (to have a history of conversations)

[nlarew]

I need to be able to change the conversation ID on the fly

This is on our roadmap to add soon but unfortunately isn't ready yet. I think you could piece this together using some of the lower level components/hooks we export (e.g. by calling the useConversation hook in your own components) but this is definitely not optimal.

Since this is something we will want eventually I'll see if we can prioritize shipping first-class conversation switching.

[nlarew]

I need to be able to change the conversation ID on the fly

@eric-gardyn we just shipped a new version of the chatbot UI that lets you switch the active conversation without requiring a page reload.

npm install mongodb-chatbot-ui@^0.4.0

Specifically there's now a new method available on the conversation instance you get from the useConversation() or useChatbot() hook (which you can call anywhere inside of the <Chatbot /> provider).

// Get the conversation directly
const conversation = useConversation()
// ... or get it from the chatbot hook
const { conversation } = useChatbot()

// Switch conversations by `id`
await conversation.switchConversation("65cbd564891d8167b8a9586e");

// You can also now start a new conversation which will replace the existing one
await conversation.createConversation();

Note - we don't currently have any built-in support for keeping a list of the user's conversation ids. You'll need to save those somewhere in your code if you want to switch between them later.

I'd also recommend upgrading to the latest version of the server which includes a bug fix for the getConversation route that the switchConversation() method calls under the hood. The older version of the route returns the entire conversation including the system prompt which you probably don't want.

npm install mongodb-chatbot-server@^0.6.0

[nlarew]

Following up on the original request here - we just released a new UI version with support for custom fetch options. This should help you pass custom headers and otherwise customize your requests.

npm install mongodb-chatbot-ui@^0.5.0

function App() {
  return (
    <Chatbot
      name="My Chatbot"
      serverBaseUrl="https://myserver.example.com"
      fetchOptions={{
        headers: new Headers({ "X-User-ID": "<You User ID>" })
      }}
    >
      {/* ... */}
    </Chatbot>
  )
}