Chat

<div class="c-element c-chat o-layout-grid o-layout-grid--cq c-chat--md" data-js-chat="example-chat" data-component="element">
  <div class="c-element c-chat__message-area" data-js-message-area="1" data-component="element">
    <div class="c-element c-chat__messages" data-js-messages-container="1" data-component="element">
      <!-- Messages will be dynamically inserted here -->
    </div>
  </div>
  <div class="c-element c-chat__input-area" data-component="element">
    <div class="c-element c-chat__input is-empty" data-js-chat-input="1" data-component="element">
      <div class="c-element c-chat__input__editable" contenteditable="true" role="textbox" aria-multiline="true" data-js-chat-editable="1" data-placeholder="" data-component="element">
        <!-- input area -->
      </div>
      <div class="c-element c-chat__input__actions" data-js-chat-actions="1" data-component="element">
        <button class="c-button c-button__filled c-button__filled--primary c-button--md" data-js-chat-send="1" type="button" aria-label="Send" data-component="button"><span class=
        "c-button__label"><span class="c-button__label-text">Send</span></span></button>
      </div>
    </div>
  </div>
  <template class="c-element" data-js-user-message-template="true" data-component="element">
    <div class="c-element c-chat__message c-chat__message--user" data-component="element">
      <!-- This is a message component, it will be used as a template for both user messages and reply messages. -->
      <div class="c-element c-chat__message__message" data-js-chat-message="1" data-component="element">
        <!-- Message content will be dynamically inserted here -->
        <!-- user message -->
      </div>
    </div>
  </template>
  <template class="c-element" data-js-reply-message-template="true" data-component="element">
    <div class="c-element c-chat__message c-chat__message--reply" data-component="element">
      <!-- This is a message component, it will be used as a template for both user messages and reply messages. -->
      <div class="c-element c-chat__message__message" data-js-chat-message="1" data-component="element">
        <!-- Message content will be dynamically inserted here -->
        <!-- reply message -->
      </div>
    </div>
  </template>
</div>

<script>
    const getRandomResponse = () => {
        const responses = [
            "Interesting… tell me more.",
            "I see. What do you mean exactly?",
            "That sounds important.",
            "Can you explain that differently?",
            "Hmm, I'm not sure I understand.",
            "Why do you think that is?",
            "How does that make you feel?",
            "What do you think about that?",
            "That's a good point.",
            "I hadn't thought of it that way before."
        ];

        const index = Math.floor(Math.random() * responses.length);
        return responses[index];
    }

    document.addEventListener('chat:initialized', (e) => {
        const chat = e.detail;
        chat.addMessage("Hello! I'm your friendly chatbot. How can I assist you today?", true);

        chat.getElement().addEventListener('chat:message-added', (e) => {
			const message = e.detail;

			if (message.getIsReply()) {
				return;
			}

            chat.disableSend();
            const pendingMessage = chat.addPendingMessage();
            const responseToCome = getRandomResponse();

            setTimeout(() => {
                chat.editMessage(responseToCome, pendingMessage);
                chat.enableSend();
            }, Math.random() * (2000 - 500) + 500);

		});
    });
</script>

@chat([
    'id' => 'example-chat',
])
@endchat