OvidijusParsiunas / deep-chat

Fully customizable AI chatbot component for your website
https://deepchat.dev
MIT License
1.26k stars 170 forks source link

Programmatically trigger microphone #221

Closed delsoul6104 closed 1 week ago

delsoul6104 commented 1 week ago

Could it be possible to enable the microphone function when the suggestion button is pressed thank you image

OvidijusParsiunas commented 1 week ago

Hi @delsoul6104. This is not a standard use-case, hence we will not be adding explicit support for this. However, I can give you example code to get you started on a workaround. You will need to give your test button a custom class such as microphone-trigger and use htmlClassUtilities property to give it a custom event that would traverse the shadow DOM and programatically trigger the microphone button:

chatElementRef.history = [
  {
    html: `<button class="deep-chat-button microphone-trigger">Test</button>`,
    role: 'ai',
  },
];
chatElementRef.htmlClassUtilities = {
  ['microphone-trigger']: {
    events: {
      click: (event) => {
        const micophoneButton = chatElementRef.shadowRoot.getElementById('microphone-button');
        micophoneButton.click();
      },
    },
  },
};

Because this is issue is an edge case I cannot guarantee that this approach will work in the future Deep Chat releases, but it can be used as a place to start.

Thanks!