Please help me assign a click event on each html element.

[Ankur-2002]

Hey members, I am getting an issue while applying the onclick event on each html element in the react. Please check the code that I am using and give me better solution.

Here is the code:

<DeepChat style={{ width: "100%", flex: 1, height: "100%", }} ref={chatElementRef} key={params.chatId + "chat" + params.threadId} demo={true} initialMessages={[ { text: "Hello", type: "text", role: "bot", timestamp: new Date(), html: "

Hello

", }, ...history.map((message) => ({ text: message.text, type: "text", role: message.role, timestamp: message.timestamp, html: message.role === "user" && ` <button class="view_logs" style="color: #0377FB; display: flex; background-color: #fff; border: none; cursor: pointer;"

               > View Logs </button>
                                      `,
          })),
        ]}
        request={{
          handler: async (query, signal) => {
            console.log(query, "from request handler");
            try {
              const response = await handleSubmitQuery(query);
              const botData = response[1];
              return signal.onResponse({
                text: botData.content,
              });
            } catch (err) {
              return signal.onResponse({
                error: err.message,
              });
            }
          },
        }}
        submitUserMessage={(message) => {
          console.log(message);
        }}
        messageStyles={{
          html: { shared: { bubble: { backgroundColor: "unset" } } },
        }}
      />

I am using this as a component in the react and it is working fine but the button in the html element should trigger an onclick. Could you please help me with this problem?

[OvidijusParsiunas]

Hi @Ankur-2002.

To apply events to your custom html elements, you will have to use the htmlClassUtilities property. As an example, referring to your project - you can use the following to help get you started:

htmlClassUtilities={{
  'view_logs': {
    events: {
      click: () => {
        console.log('view logs')
      },
    }
  }
}}

[OvidijusParsiunas]

I will be closing this issue as there has been no further activity.