Clear Messages Button?

[elfar]

Hi, first of all congrats on excellent project, big fan!

I was just wondering, along the lines of the buttons "images" or "microphone" etc. Is there a way to place a "cleanup | reset | empty history" type of a button in the same location as the other buttons you support? Or is the current solution only to place the reset button outside of the deep-chat element and have it call clearMessages?

[quietdreamr]

Hi @elfar,

I managed to add a clear button through a somewhat hacky way:

clearChat() {
    deepchat.clearMessages();
}

injectClearButton() {
    const clearButtonEl = new clearButton()
    clearButtonEl.addEventListener("click", clearChat.bind(this))
    clearButtonEl.setAttribute("disabled", "true")

    const shadowRoot = this.deepChatEl?.shadowRoot
    const targetElement = shadowRoot?.querySelector("#text-input-container")
    targetElement?.prepend(clearButtonEl)
}

It's of course not ideal, but gets the job done in my case. I hope it does so for you too.

[elfar]

Looks better than the one I placed on the outside of the box, thanks for sharing 🙏

[tistocks]

Hi @elfar,

I managed to add a clear button through a somewhat hacky way:

clearChat() {
    deepchat.clearMessages();
}

injectClearButton() {
    const clearButtonEl = new clearButton()
    clearButtonEl.addEventListener("click", clearChat.bind(this))
    clearButtonEl.setAttribute("disabled", "true")

    const shadowRoot = this.deepChatEl?.shadowRoot
    const targetElement = shadowRoot?.querySelector("#text-input-container")
    targetElement?.prepend(clearButtonEl)
}

It's of course not ideal, but gets the job done in my case. I hope it does so for you too.

I admit, I'm probably going to try to use a similar approach however, I think the real issue is, there should be an intrinsic method to do this built into the system. Moreover, the list of buttons a developer consuming the library can add should not be limited to a small subset, but the developer should be capable of providing an image (icon) and a handler and be allowed to customize the buttons based on the needs of the application.

I would be interested to understand how difficult of a feature this would be to integrate into the core user interface rather than needing to perform a "somewhat hacky" approach to adding the button or having to place one "on the outside of the box".

Can we have the community of core contributors consider this for a candidate feature? I would be willing to work with the team to help execute it if someone more experienced could help by discussing the recommended approach to introduce such a feature.

@OvidijusParsiunas I would be interested to hear your thoughts.

[OvidijusParsiunas]

Hi @elfar. Ability to add custom buttons with unique handlers is on my TO-DO list. I have quite a few features lined up before I can get to it, but rest assured I will do it as this is not the first time this feature was requested.

The feature itself is a little complicated as there is internal state management that needs to be carefully maintained when implementing a unified solution that would cover many custom button use-cases. Nevertheless, if you need something immediate I would recommend simply cloning/forking this repo and editing the project yourself. The starter instructions are very simple and you should be able to get something going quickly.

I will keep this issue open until I implement a custom button solution.

Thanks!

[OvidijusParsiunas]

This is now available in deep-chat and deep-chat-react version 2.2.0. See customButtons for more information.