Submit Button Style Changes Affect Stop and Loading Icons' SVGs Too

[buzhou9]

When modifying the submit button SVG icon through "submitButtonStyles", it will overwrite the SVG icons of the stop and loading buttons.

Reproduction process

Modify component parameters in the preview HTML file in the repository.

// component/index.html
<deep-chat submitButtonStyles='{"submit": {"svg":{"content":"test"}}}' id="chat-element" demo="true" textInput='{"placeholder":{"html": "Welcome to the demo!"}}'></deep-chat>

The problem should be here.

// component/src/views/chat/input/buttons/submit/submitButton.ts
private createInnerElements() {
// this
    const {submit, loading, stop} = CustomButtonInnerElements.create<Styles>(
      this.elementRef, ['submit', 'loading', 'stop'], this._customStyles);
    const submitElement = submit || SubmitButton.createSubmitIconElement();
    return {
      submit: submitElement,
      loading: loading || SubmitButton.createLoadingIconElement(),
      stop: stop || SubmitButton.createStopIconElement(),
      disabled: this.createDisabledIconElement(submitElement),
    };
  }

It can be fixed like this. I hope you can fix this issue, thank you.

private createInnerElements() {
    const states: (keyof Styles)[] = []
    if (this._customStyles?.submit && Object.keys(this._customStyles.submit).length !== 0) {
      states.push('submit')
    }
    if (this._customStyles?.loading && Object.keys(this._customStyles.loading).length !== 0) {
      states.push('loading')
    }
    if (this._customStyles?.stop && Object.keys(this._customStyles.stop).length !== 0) {
      states.push('stop')
    }
    const {submit, loading, stop} = CustomButtonInnerElements.create<Styles>(
      this.elementRef, states, this._customStyles);
    const submitElement = submit || SubmitButton.createSubmitIconElement();
    return {
      submit: submitElement,
      loading: loading || SubmitButton.createLoadingIconElement(),
      stop: stop || SubmitButton.createStopIconElement(),
      disabled: this.createDisabledIconElement(submitElement),
    };
  }

[OvidijusParsiunas]

Hi @buzhou9.

Thankyou very much for raising this PR. The issue seems very interesting and your code looks like a great improvement. The reason why the custom button content styling carried on throughout all of the states was because it was otherwise causing a bug when moving between other states such as disabled etc.

I don't seem to be able to re-create that bug so your code looks very promising. However, I unfortunately ran out of time today to test out all of the use-cases. Please leave it with me and I'll give it some more rigorous tests tomorrow to make your code doesn't break anything (should probably have unit tests but it is something we plan to implement in the later future). I'll update you on all of the progress.

Thankyou again!

[OvidijusParsiunas]

Hey @buzhou9.

I had a busy weekend and it is going to be a national holiday where I live (UK) in the coming few days, so it may be a little hard for me to get time to look at your code. I wanted to assure you that I am committed to analyzing your code and will give you feedback or merge it as soon as I can. Thank you for your efforts and please wait a couple of days. Thank you!!!!

[buzhou9]

Hey @buzhou9.

I had a busy weekend and it is going to be a national holiday where I live (UK) in the coming few days, so it may be a little hard for me to get time to look at your code. I wanted to assure you that I am committed to analyzing your code and will give you feedback or merge it as soon as I can. Thank you for your efforts and please wait a couple of days. Thank you!!!!

[buzhou9]

嘿@buzhou9。 我度过了一个忙碌的周末，接下来的几天将是我居住的地方（英国）的国定假日，所以对我来说可能有点难以抽出时间查看您的代码。我想向您保证，我致力于分析您的代码，并将尽快向您提供反馈或合并它。感谢您的努力，请稍等几天。谢谢你！！！！

Thank you and have a pleasant vacation

[OvidijusParsiunas]

The PR has now been merged. The changes will be available in the next Deep Chat release. Thankyou!

[buzhou9]

The PR has now been merged. The changes will be available in the next Deep Chat release. Thankyou!

Thank you, I tested it on the latest code and it's fantastic.