Chat

<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;
        chat.addMessage('Hello, how can i help you?', true);

        chat.subscribeToUserMessages((message) => {
            const pendingMessage = chat.addPendingMessage();
            const responseToCome = getRandomResponse();
            setTimeout(() => {
                chat.editMessage(responseToCome, pendingMessage);
            }, Math.random() * (2000 - 500) + 500);
        })
    });
</script>

    <div class="c-element c-chat o-layout-grid o-layout-grid--cq" data-js-chat="example-chat" data-uid="6a0be803ab191" data-component="element">
        <div class="c-element c-chat__message-area" style="height:unset;" data-js-message-area="1" data-uid="6a0be803aadf5" data-component="element">
        <div class="c-element c-chat__messages" data-js-messages-container="1" data-uid="6a0be803aad86" data-component="element">
        <!-- Messages will be dynamically inserted here -->
    </div>
    </div>
    <div class="c-element c-chat__input-area" data-uid="6a0be803aafd6" data-component="element">
        <div class="c-element c-chat__input is-empty" data-js-chat-input="1" data-uid="6a0be803aafa5" 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-uid="6a0be803aaec1" data-component="element">
        <!-- input area -->
    </div>
        <div class="c-element c-chat__input__actions" data-js-chat-actions="1" data-uid="6a0be803aaf73" 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-uid="6a0be803aaf34" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Send
            </span>
        
    </span> </button>
    </div>
    </div>
    </div>
    <template class="c-element" data-js-user-message-template="true" data-uid="6a0be803ab0d7" data-component="element">
        <div class="c-element c-chat__message c-chat__message--user" data-js-chat-message="1" data-uid="6a0be803ab0a5" data-component="element">
        <!-- This is a message component, it will be used as a template for both user messages and reply messages. -->
    <!-- user message -->
    </div>
    </template>

    <template class="c-element" data-js-reply-message-template="true" data-uid="6a0be803ab163" data-component="element">
        <div class="c-element c-chat__message c-chat__message--reply" data-js-chat-message="1" data-uid="6a0be803ab134" data-component="element">
        <!-- This is a message component, it will be used as a template for both user messages and reply messages. -->
    <!-- reply message -->
    </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;
        chat.addMessage('Hello, how can i help you?', true);

        chat.subscribeToUserMessages((message) => {
            const pendingMessage = chat.addPendingMessage();
            const responseToCome = getRandomResponse();
            setTimeout(() => {
                chat.editMessage(responseToCome, pendingMessage);
            }, Math.random() * (2000 - 500) + 500);
        })
    });
</script>

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