v6.19.0

Chameleon 6.19.0 (2025-08-07)

Category	Change
	[ch-chat] Rename "stop-generating-anwser" button to "stop-response" and rename the generatingResponse property to waitingResponse by @ncamera in #540
	[ch-chat] Add more options to customize the content of the send-container element and add support to replace the send button with the stop-response button by @ncamera in #541

Important changes in the ch-chat component

• The stopGeneratingAnwser button is now called stopResponse button.

• The send button is now replaced with the stop-response button by default.

• Added the sendContainerLayout property to support changing the position of the send and stop-response buttons of the ch-chat's send-container part. There are four positions for distributing elements in the send-container:

  • sendContainerBefore: Before the contents of the send-container part.
  • sendInputBefore: Before the contents of the send-input part.
  • sendInputAfter: After the contents of the send-input part.
  • sendContainerAfter: After the contents of the send-container part.

  At each position you can specify reserved elements, such as the send-button and stop-response-button, but can also be specified non-reserved elements, which will be projected as content slots.

  If the reserved stop-response-button element is not specified anywhere, the send button will be replaced with the stop-response button when waitingResponse = true and the stopResponse callback is specified.

  If the send-button is not specified in any position, it won't be rendered in the ch-chat.

  For example, if you define:

  const sendContainerLayout: ChatSendContainerLayout = {
    sendInputBefore: ["attach-files-button"],
    sendInputAfter: ["send-button"]
  }

  You will have to put slot="attach-files-button" as follows (but not the send-button as this is a reserved element that is rendered internally by the ch-chat):

  <ch-chat
    sendContainerLayout={sendContainerLayout}
  >
    <button slot="attach-files-button" type="button">
      ...
    </button>
  </ch-chat>

  The following diagram shows a visual example of the ch-chat's layout with this new property:

  

• Added the following parts:

  • send-container-before: The container for the elements of the sendContainerLayout.sendContainerBefore position.

  • send-input-before: The container for the elements of the sendContainerLayout.sendInputBefore position.

  • send-input-after: The container for the elements of the sendContainerLayout.sendInputAfter position.

  • send-container-after: The container for the elements of the sendContainerLayout.sendContainerAfter position.

Breaking changes

• [ch-chat] The stopGeneratingAnswer callback has been renamed to stopResponse.

• [ch-chat] The accessibleName.stopGeneratingAnswerButton translation has been renamed to accessibleName.stopResponseButton.

• [ch-chat] The text.stopGeneratingAnswerButton translation has been renamed to text.stopResponseButton.

• [ch-chat] The "stop-generating-answer-button" part has been renamed to "stop-response-button".

• [ch-chat] The generatingResponse property has been renamed to waitingResponse.

• [ch-chat] Removed the send-input-wrapper part.

• [ch-chat] Now, by default the send button is replaced with the stop-response button, if waitingReponse === true and the stopResponse callback is defined. If we want to keep separated those two buttons under the previous conditions, the position for the stop-response-button must be specified in the sendContainerLayout property.

• [ch-chat] Removed the default translation text.stopResponseButton, becase now by default the send button is replaced with the stop-response button, if waitingReponse === true and the stopResponse callback is defined.

• [ch-chat] Removed the showSendInputAdditionalContentBefore and showSendInputAdditionalContentAfter properties. To add custom content in the send-input part, the sendInputBefore and/or sendInputAfter members of the sendContainerLayout property must be specified. This new way to customize the send-input content allow us to have a better control of the DOM order (which is important for the accessibility).

Full Changelog: v6.18.1...v6.19.0