Function Calling doesn't seem to be working with Direct Connection

[alexAlchemy]

Hey good folks.

I'm struggling with function calling...

DOM ` <deep-chat id="chat-element" textInput='{"placeholder":{"text": "Welcome to the demo!"}}'

`

      openAI: {
        key: "{redacted}",
        chat: {
          tools: [ `
            {
              type: "function",
              function: {
                name: "setFormFields",
                description:
                  "Sets the form fields with an array of values provided by user",
                parameters: [
                  {
                    name: "formFields",
                    type: "array",
                    description:
                      "An array of objects with field names and values",
                  },
                ],
              },
            },
          ],
          tool_choice: "auto",
          function_handler: (functionsDetails) => {
            return functionsDetails.map((functionDetails) => {
              return {
                response: getCurrentWeather(functionDetails.arguments),
              };
            });
          },
          max_tokens: 2000,
          system_prompt: "system_prompt",
        },
      },
    };

    elementRef.setAttribute(
      "directConnection",
      JSON.stringify(directConnection)
    );

And in the chat I get the following error.

So its saying I'm missing the function_handler but it is on the object.

However the way the direct connection is passed in using JSON stringification is likely to destroy any function on an object so wondering what I'm doing wrong here?

Many thanks for your help.

[OvidijusParsiunas]

Hi @alexAlchemy. The directConnection property is expected to be a JSON object, and when it is passed into an attribute as a string, Deep Chat attempts to parse it using JSON.parse() which unfortunately does not parse the function inside the object correctly, hence the function is not valid.

To get around it, you can simply pass your your directConnection variable as a property as shown here:

elementRef.directConnection = directConnection;

If you are using a framework or not using any framework (Vanilla JS), you can find live examples here.

Let me know if this help you. Thanks!

[alexAlchemy]

@OvidijusParsiunas That did the job thanks very much!