{"id":5349,"date":"2026-09-02T07:59:02","date_gmt":"2026-09-02T07:59:02","guid":{"rendered":"https:\/\/auto-engines.com\/?page_id=5349"},"modified":"2026-09-03T03:36:17","modified_gmt":"2026-09-03T03:36:17","slug":"ai-chat-test","status":"publish","type":"page","link":"https:\/\/auto-engines.com\/en\/ai-chat-test\/","title":{"rendered":"AI Chat Test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5349\" class=\"elementor elementor-5349\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37d646f e-flex e-con-boxed e-con e-parent\" data-id=\"37d646f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f4e843 elementor-widget elementor-widget-html\" data-id=\"5f4e843\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ae-ai-chat\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"ae-chat-header\">\r\n        <div>\r\n            <div class=\"ae-chat-title\">\r\n                \ud83e\udd16 Auto Engines AI Assistant\r\n            <\/div>\r\n\r\n            <div class=\"ae-chat-subtitle\">\r\n                Find engines from our current product database\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ae-status\">\r\n            <span class=\"ae-status-dot\"><\/span>\r\n            Online\r\n        <\/div>\r\n    <\/div>\r\n\r\n\r\n    <!-- Chat Messages -->\r\n    <div id=\"ae-chat-messages\" class=\"ae-chat-messages\">\r\n\r\n        <!-- Welcome Message -->\r\n        <div class=\"ae-message ae-message-ai\">\r\n\r\n            <div class=\"ae-avatar\">\r\n                AI\r\n            <\/div>\r\n\r\n            <div class=\"ae-message-content\">\r\n\r\n                <div class=\"ae-bubble\">\r\n                    Hello! \ud83d\udc4b\r\n\r\n                    <br><br>\r\n\r\n                    I can help you find engines available on\r\n                    Auto-Engines.com.\r\n\r\n                    <br><br>\r\n\r\n                    Please tell me the engine code, vehicle brand,\r\n                    vehicle model, or production year.\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- Suggested Questions -->\r\n\r\n    <div class=\"ae-suggestions\">\r\n\r\n        <button class=\"ae-suggestion\">\r\n            I need an Isuzu 4HK1 engine\r\n        <\/button>\r\n\r\n        <button class=\"ae-suggestion\">\r\n            Do you have a BMW engine?\r\n        <\/button>\r\n\r\n        <button class=\"ae-suggestion\">\r\n            I need a diesel engine\r\n        <\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- Input Area -->\r\n\r\n    <div class=\"ae-input-area\">\r\n\r\n        <textarea\r\n            id=\"ae-chat-input\"\r\n            placeholder=\"Ask about an engine...\"\r\n            rows=\"1\"\r\n        ><\/textarea>\r\n\r\n\r\n        <button\r\n            id=\"ae-send-button\"\r\n            type=\"button\"\r\n        >\r\n            <span class=\"ae-send-text\">\r\n                Send\r\n            <\/span>\r\n\r\n            <span class=\"ae-send-loading\">\r\n                ...\r\n            <\/span>\r\n\r\n        <\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* ==========================================\r\n   AI CHAT CONTAINER\r\n========================================== *\/\r\n\r\n#ae-ai-chat {\r\n\r\n    width: 100%;\r\n    max-width: 850px;\r\n\r\n    margin: 40px auto;\r\n\r\n    background: #ffffff;\r\n\r\n    border-radius: 16px;\r\n\r\n    overflow: hidden;\r\n\r\n    border: 1px solid #e5e7eb;\r\n\r\n    box-shadow:\r\n        0 10px 30px\r\n        rgba(0,0,0,0.08);\r\n\r\n    font-family:\r\n        Arial,\r\n        sans-serif;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   HEADER\r\n========================================== *\/\r\n\r\n.ae-chat-header {\r\n\r\n    display: flex;\r\n\r\n    justify-content: space-between;\r\n\r\n    align-items: center;\r\n\r\n    padding: 20px 25px;\r\n\r\n    background: #111827;\r\n\r\n    color: #ffffff;\r\n\r\n}\r\n\r\n\r\n.ae-chat-title {\r\n\r\n    font-size: 20px;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n.ae-chat-subtitle {\r\n\r\n    margin-top: 5px;\r\n\r\n    font-size: 13px;\r\n\r\n    color: #9ca3af;\r\n\r\n}\r\n\r\n\r\n.ae-status {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 8px;\r\n\r\n    font-size: 13px;\r\n\r\n    color: #d1d5db;\r\n\r\n}\r\n\r\n\r\n.ae-status-dot {\r\n\r\n    width: 9px;\r\n\r\n    height: 9px;\r\n\r\n    background: #22c55e;\r\n\r\n    border-radius: 50%;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   CHAT AREA\r\n========================================== *\/\r\n\r\n.ae-chat-messages {\r\n\r\n    height: 500px;\r\n\r\n    overflow-y: auto;\r\n\r\n    padding: 25px;\r\n\r\n    background: #f9fafb;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   MESSAGE\r\n========================================== *\/\r\n\r\n.ae-message {\r\n\r\n    display: flex;\r\n\r\n    gap: 12px;\r\n\r\n    margin-bottom: 20px;\r\n\r\n}\r\n\r\n\r\n.ae-message-user {\r\n\r\n    flex-direction: row-reverse;\r\n\r\n}\r\n\r\n\r\n.ae-avatar {\r\n\r\n    width: 38px;\r\n\r\n    height: 38px;\r\n\r\n    min-width: 38px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #111827;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 12px;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n.ae-message-user\r\n.ae-avatar {\r\n\r\n    background: #2563eb;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   MESSAGE CONTENT\r\n========================================== *\/\r\n\r\n.ae-message-content {\r\n\r\n    max-width: 75%;\r\n\r\n}\r\n\r\n\r\n.ae-message-user\r\n.ae-message-content {\r\n\r\n    display: flex;\r\n\r\n    justify-content: flex-end;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   CHAT BUBBLE\r\n========================================== *\/\r\n\r\n.ae-bubble {\r\n\r\n    padding: 14px 17px;\r\n\r\n    border-radius: 14px;\r\n\r\n    background: #ffffff;\r\n\r\n    border: 1px solid #e5e7eb;\r\n\r\n    color: #111827;\r\n\r\n    font-size: 15px;\r\n\r\n    line-height: 1.6;\r\n\r\n    white-space: pre-wrap;\r\n\r\n}\r\n\r\n\r\n.ae-message-user\r\n.ae-bubble {\r\n\r\n    background: #2563eb;\r\n\r\n    color: #ffffff;\r\n\r\n    border-color: #2563eb;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   LOADING\r\n========================================== *\/\r\n\r\n.ae-typing {\r\n\r\n    display: flex;\r\n\r\n    gap: 5px;\r\n\r\n    padding: 15px;\r\n\r\n}\r\n\r\n\r\n.ae-typing span {\r\n\r\n    width: 7px;\r\n\r\n    height: 7px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #9ca3af;\r\n\r\n    animation:\r\n        aeTyping\r\n        1.2s\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n.ae-typing span:nth-child(2) {\r\n\r\n    animation-delay: 0.2s;\r\n\r\n}\r\n\r\n\r\n.ae-typing span:nth-child(3) {\r\n\r\n    animation-delay: 0.4s;\r\n\r\n}\r\n\r\n\r\n@keyframes aeTyping {\r\n\r\n    0% {\r\n\r\n        opacity: 0.3;\r\n\r\n        transform:\r\n            translateY(0);\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        opacity: 1;\r\n\r\n        transform:\r\n            translateY(-4px);\r\n\r\n    }\r\n\r\n    100% {\r\n\r\n        opacity: 0.3;\r\n\r\n        transform:\r\n            translateY(0);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   SUGGESTIONS\r\n========================================== *\/\r\n\r\n.ae-suggestions {\r\n\r\n    display: flex;\r\n\r\n    gap: 10px;\r\n\r\n    flex-wrap: wrap;\r\n\r\n    padding: 15px 20px;\r\n\r\n    background: #ffffff;\r\n\r\n    border-top:\r\n        1px solid\r\n        #e5e7eb;\r\n\r\n}\r\n\r\n\r\n.ae-suggestion {\r\n\r\n    padding: 9px 14px;\r\n\r\n    border-radius: 20px;\r\n\r\n    border:\r\n        1px solid\r\n        #d1d5db;\r\n\r\n    background: #ffffff;\r\n\r\n    color: #374151;\r\n\r\n    font-size: 13px;\r\n\r\n    cursor: pointer;\r\n\r\n    transition: 0.2s;\r\n\r\n}\r\n\r\n\r\n.ae-suggestion:hover {\r\n\r\n    background: #f3f4f6;\r\n\r\n    border-color: #2563eb;\r\n\r\n    color: #2563eb;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   INPUT AREA\r\n========================================== *\/\r\n\r\n.ae-input-area {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 12px;\r\n\r\n    padding: 18px 20px;\r\n\r\n    background: #ffffff;\r\n\r\n    border-top:\r\n        1px solid\r\n        #e5e7eb;\r\n\r\n}\r\n\r\n\r\n#ae-chat-input {\r\n\r\n    flex: 1;\r\n\r\n    resize: none;\r\n\r\n    border:\r\n        1px solid\r\n        #d1d5db;\r\n\r\n    border-radius: 10px;\r\n\r\n    padding: 13px 15px;\r\n\r\n    font-size: 15px;\r\n\r\n    font-family:\r\n        Arial,\r\n        sans-serif;\r\n\r\n    outline: none;\r\n\r\n    transition: 0.2s;\r\n\r\n}\r\n\r\n\r\n#ae-chat-input:focus {\r\n\r\n    border-color:\r\n        #2563eb;\r\n\r\n    box-shadow:\r\n        0 0 0 3px\r\n        rgba(37,99,235,0.1);\r\n\r\n}\r\n\r\n\r\n#ae-send-button {\r\n\r\n    border: none;\r\n\r\n    border-radius: 10px;\r\n\r\n    background: #2563eb;\r\n\r\n    color: #ffffff;\r\n\r\n    padding:\r\n        13px 22px;\r\n\r\n    font-size: 15px;\r\n\r\n    font-weight: 600;\r\n\r\n    cursor: pointer;\r\n\r\n    transition: 0.2s;\r\n\r\n}\r\n\r\n\r\n#ae-send-button:hover {\r\n\r\n    background: #1d4ed8;\r\n\r\n}\r\n\r\n\r\n#ae-send-button:disabled {\r\n\r\n    opacity: 0.6;\r\n\r\n    cursor: not-allowed;\r\n\r\n}\r\n\r\n\r\n.ae-send-loading {\r\n\r\n    display: none;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   PRODUCT CARD\r\n========================================== *\/\r\n\r\n.ae-product-card {\r\n\r\n    margin-top: 12px;\r\n\r\n    padding: 14px;\r\n\r\n    border-radius: 10px;\r\n\r\n    background: #ffffff;\r\n\r\n    border:\r\n        1px solid\r\n        #e5e7eb;\r\n\r\n}\r\n\r\n\r\n.ae-product-image {\r\n\r\n    width: 100%;\r\n\r\n    max-height: 180px;\r\n\r\n    object-fit: cover;\r\n\r\n    border-radius: 8px;\r\n\r\n    margin-bottom: 10px;\r\n\r\n}\r\n\r\n\r\n.ae-product-title {\r\n\r\n    font-size: 16px;\r\n\r\n    font-weight: 700;\r\n\r\n    color: #111827;\r\n\r\n    margin-bottom: 8px;\r\n\r\n}\r\n\r\n\r\n.ae-product-info {\r\n\r\n    font-size: 13px;\r\n\r\n    line-height: 1.7;\r\n\r\n    color: #4b5563;\r\n\r\n}\r\n\r\n\r\n.ae-product-link {\r\n\r\n    display: inline-block;\r\n\r\n    margin-top: 12px;\r\n\r\n    padding: 9px 14px;\r\n\r\n    border-radius: 7px;\r\n\r\n    background: #111827;\r\n\r\n    color: #ffffff;\r\n\r\n    text-decoration: none;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 600;\r\n\r\n}\r\n\r\n\r\n.ae-product-link:hover {\r\n\r\n    background: #374151;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   MOBILE\r\n========================================== *\/\r\n\r\n@media\r\n(max-width: 600px) {\r\n\r\n    #ae-ai-chat {\r\n\r\n        margin: 15px auto;\r\n\r\n        border-radius: 0;\r\n\r\n    }\r\n\r\n\r\n    .ae-chat-messages {\r\n\r\n        height: 450px;\r\n\r\n        padding: 15px;\r\n\r\n    }\r\n\r\n\r\n    .ae-message-content {\r\n\r\n        max-width: 85%;\r\n\r\n    }\r\n\r\n\r\n    .ae-suggestions {\r\n\r\n        overflow-x: auto;\r\n\r\n        flex-wrap: nowrap;\r\n\r\n    }\r\n\r\n\r\n    .ae-suggestion {\r\n\r\n        white-space: nowrap;\r\n\r\n    }\r\n\r\n\r\n    .ae-chat-header {\r\n\r\n        padding: 16px;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n    \"DOMContentLoaded\",\r\n    function() {\r\n\r\n\r\n        \/* ==========================================\r\n           ELEMENTS\r\n        ========================================== *\/\r\n\r\n        const chatMessages =\r\n            document.getElementById(\r\n                \"ae-chat-messages\"\r\n            );\r\n\r\n\r\n        const chatInput =\r\n            document.getElementById(\r\n                \"ae-chat-input\"\r\n            );\r\n\r\n\r\n        const sendButton =\r\n            document.getElementById(\r\n                \"ae-send-button\"\r\n            );\r\n\r\n\r\n        const suggestions =\r\n            document.querySelectorAll(\r\n                \".ae-suggestion\"\r\n            );\r\n\r\n\r\n        \/* ==========================================\r\n           API URL\r\n        ========================================== *\/\r\n\r\n        const API_URL =\r\n            \"\/en\/wp-json\/auto-engines\/v1\/ai-chat\";\r\n\r\n\r\n        \/* ==========================================\r\n           SEND MESSAGE\r\n        ========================================== *\/\r\n\r\n        async function sendMessage() {\r\n\r\n\r\n            const message =\r\n                chatInput.value.trim();\r\n\r\n\r\n            if (!message) {\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            \/* Add User Message *\/\r\n\r\n            addUserMessage(\r\n                message\r\n            );\r\n\r\n\r\n            \/* Clear Input *\/\r\n\r\n            chatInput.value = \"\";\r\n\r\n\r\n            \/* Disable Button *\/\r\n\r\n            setLoading(\r\n                true\r\n            );\r\n\r\n\r\n            \/* Show Typing *\/\r\n\r\n            const typingId =\r\n                showTyping();\r\n\r\n\r\n            try {\r\n\r\n\r\n                const response =\r\n                    await fetch(\r\n\r\n                        API_URL,\r\n\r\n                        {\r\n\r\n                            method:\r\n                                \"POST\",\r\n\r\n\r\n                            headers: {\r\n\r\n                                \"Content-Type\":\r\n                                    \"application\/json\",\r\n\r\n                            },\r\n\r\n\r\n                            body:\r\n\r\n                                JSON.stringify({\r\n\r\n                                    message:\r\n                                        message,\r\n\r\n                                }),\r\n\r\n                        }\r\n\r\n                    );\r\n\r\n\r\n                const data =\r\n                    await response.json();\r\n\r\n\r\n                \/* Remove Typing *\/\r\n\r\n                removeTyping(\r\n                    typingId\r\n                );\r\n\r\n\r\n                \/* API Error *\/\r\n\r\n                if (\r\n\r\n                    !response.ok ||\r\n\r\n                    !data.success\r\n\r\n                ) {\r\n\r\n                    let errorMessage =\r\n                        \"Sorry, something went wrong. Please try again.\";\r\n\r\n\r\n                    if (\r\n                        data.error\r\n                    ) {\r\n\r\n                        errorMessage =\r\n                            typeof data.error === \"string\"\r\n\r\n                            ?\r\n\r\n                            data.error\r\n\r\n                            :\r\n\r\n                            JSON.stringify(\r\n                                data.error\r\n                            );\r\n\r\n                    }\r\n\r\n\r\n                    addAIMessage(\r\n                        errorMessage\r\n                    );\r\n\r\n\r\n                    return;\r\n\r\n                }\r\n\r\n\r\n                \/* Add AI Message *\/\r\n\r\n                addAIMessage(\r\n\r\n                    data.reply ||\r\n\r\n                    \"Sorry, I could not generate a response.\"\r\n\r\n                );\r\n\r\n\r\n                \/* Add Product Cards *\/\r\n\r\n                if (\r\n\r\n                    data.engines &&\r\n\r\n                    data.engines.length > 0\r\n\r\n                ) {\r\n\r\n                    data.engines.forEach(\r\n\r\n                        function(engine) {\r\n\r\n                            addProductCard(\r\n                                engine\r\n                            );\r\n\r\n                        }\r\n\r\n                    );\r\n\r\n                }\r\n\r\n\r\n            }\r\n\r\n            catch (error) {\r\n\r\n\r\n                removeTyping(\r\n                    typingId\r\n                );\r\n\r\n\r\n                console.error(\r\n                    error\r\n                );\r\n\r\n\r\n                addAIMessage(\r\n\r\n                    \"Connection error. Please try again later.\"\r\n\r\n                );\r\n\r\n\r\n            }\r\n\r\n\r\n            finally {\r\n\r\n\r\n                setLoading(\r\n                    false\r\n                );\r\n\r\n\r\n                chatInput.focus();\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           ADD USER MESSAGE\r\n        ========================================== *\/\r\n\r\n        function addUserMessage(\r\n            message\r\n        ) {\r\n\r\n\r\n            const messageHTML = `\r\n\r\n                <div\r\n                    class=\"\r\n                        ae-message\r\n                        ae-message-user\r\n                    \"\r\n                >\r\n\r\n                    <div\r\n                        class=\"ae-avatar\"\r\n                    >\r\n                        You\r\n                    <\/div>\r\n\r\n\r\n                    <div\r\n                        class=\"\r\n                            ae-message-content\r\n                        \"\r\n                    >\r\n\r\n                        <div\r\n                            class=\"ae-bubble\"\r\n                        >\r\n\r\n                            ${escapeHTML(\r\n                                message\r\n                            )}\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            `;\r\n\r\n\r\n            chatMessages.insertAdjacentHTML(\r\n\r\n                \"beforeend\",\r\n\r\n                messageHTML\r\n\r\n            );\r\n\r\n\r\n            scrollToBottom();\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           ADD AI MESSAGE\r\n        ========================================== *\/\r\n\r\n        function addAIMessage(\r\n            message\r\n        ) {\r\n\r\n\r\n            const messageHTML = `\r\n\r\n                <div\r\n                    class=\"\r\n                        ae-message\r\n                        ae-message-ai\r\n                    \"\r\n                >\r\n\r\n                    <div\r\n                        class=\"ae-avatar\"\r\n                    >\r\n                        AI\r\n                    <\/div>\r\n\r\n\r\n                    <div\r\n                        class=\"\r\n                            ae-message-content\r\n                        \"\r\n                    >\r\n\r\n                        <div\r\n                            class=\"ae-bubble\"\r\n                        >\r\n\r\n                            ${formatMessage(\r\n                                message\r\n                            )}\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            `;\r\n\r\n\r\n            chatMessages.insertAdjacentHTML(\r\n\r\n                \"beforeend\",\r\n\r\n                messageHTML\r\n\r\n            );\r\n\r\n\r\n            scrollToBottom();\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           PRODUCT CARD\r\n        ========================================== *\/\r\n\r\n        function addProductCard(\r\n            product\r\n        ) {\r\n\r\n\r\n            const cardHTML = `\r\n\r\n                <div\r\n                    class=\"\r\n                        ae-message\r\n                        ae-message-ai\r\n                    \"\r\n                >\r\n\r\n                    <div\r\n                        class=\"ae-avatar\"\r\n                    >\r\n                        AI\r\n                    <\/div>\r\n\r\n\r\n                    <div\r\n                        class=\"\r\n                            ae-message-content\r\n                        \"\r\n                    >\r\n\r\n                        <div\r\n                            class=\"\r\n                                ae-product-card\r\n                            \"\r\n                        >\r\n\r\n\r\n                            ${\r\n\r\n                                product.image\r\n\r\n                                ?\r\n\r\n                                `\r\n\r\n                                <img decoding=\"async\"\r\n\r\n                                    src=\"\r\n                                        ${escapeHTML(\r\n                                            product.image\r\n                                        )}\r\n                                    \"\r\n\r\n                                    alt=\"\r\n                                        ${escapeHTML(\r\n                                            product.title ||\r\n                                            \"Engine\"\r\n                                        )}\r\n                                    \"\r\n\r\n                                    class=\"\r\n                                        ae-product-image\r\n                                    \"\r\n\r\n                                >\r\n\r\n                                `\r\n\r\n                                :\r\n\r\n                                \"\"\r\n\r\n                            }\r\n\r\n\r\n                            <div\r\n                                class=\"\r\n                                    ae-product-title\r\n                                \"\r\n                            >\r\n\r\n                                ${escapeHTML(\r\n\r\n                                    product.title ||\r\n\r\n                                    \"Engine\"\r\n\r\n                                )}\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div\r\n                                class=\"\r\n                                    ae-product-info\r\n                                \"\r\n                            >\r\n\r\n\r\n                                ${\r\n\r\n                                    product.brand\r\n\r\n                                    ?\r\n\r\n                                    `<strong>Brand:<\/strong>\r\n                                    ${escapeHTML(\r\n                                        product.brand\r\n                                    )}<br>`\r\n\r\n                                    :\r\n\r\n                                    \"\"\r\n\r\n                                }\r\n\r\n\r\n                                ${\r\n\r\n                                    product.engine_model\r\n\r\n                                    ?\r\n\r\n                                    `<strong>Engine Model:<\/strong>\r\n                                    ${escapeHTML(\r\n                                        product.engine_model\r\n                                    )}<br>`\r\n\r\n                                    :\r\n\r\n                                    \"\"\r\n\r\n                                }\r\n\r\n\r\n                                ${\r\n\r\n                                    product.year\r\n\r\n                                    ?\r\n\r\n                                    `<strong>Year:<\/strong>\r\n                                    ${escapeHTML(\r\n                                        product.year\r\n                                    )}<br>`\r\n\r\n                                    :\r\n\r\n                                    \"\"\r\n\r\n                                }\r\n\r\n\r\n                                ${\r\n\r\n                                    product.fuel_type\r\n\r\n                                    ?\r\n\r\n                                    `<strong>Fuel:<\/strong>\r\n                                    ${escapeHTML(\r\n                                        product.fuel_type\r\n                                    )}<br>`\r\n\r\n                                    :\r\n\r\n                                    \"\"\r\n\r\n                                }\r\n\r\n\r\n                                ${\r\n\r\n                                    product.displacement\r\n\r\n                                    ?\r\n\r\n                                    `<strong>Displacement:<\/strong>\r\n                                    ${escapeHTML(\r\n                                        product.displacement\r\n                                    )}<br>`\r\n\r\n                                    :\r\n\r\n                                    \"\"\r\n\r\n                                }\r\n\r\n\r\n                            <\/div>\r\n\r\n\r\n                            ${\r\n\r\n                                product.url\r\n\r\n                                ?\r\n\r\n                                `\r\n\r\n                                <a\r\n\r\n                                    href=\"\r\n                                        ${escapeHTML(\r\n                                            product.url\r\n                                        )}\r\n                                    \"\r\n\r\n                                    class=\"\r\n                                        ae-product-link\r\n                                    \"\r\n\r\n                                    target=\"_blank\"\r\n\r\n                                >\r\n\r\n                                    View Engine \u2192\r\n\r\n                                <\/a>\r\n\r\n                                `\r\n\r\n                                :\r\n\r\n                                \"\"\r\n\r\n                            }\r\n\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            `;\r\n\r\n\r\n            chatMessages.insertAdjacentHTML(\r\n\r\n                \"beforeend\",\r\n\r\n                cardHTML\r\n\r\n            );\r\n\r\n\r\n            scrollToBottom();\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           SHOW TYPING\r\n        ========================================== *\/\r\n\r\n        function showTyping() {\r\n\r\n\r\n            const typingId =\r\n                \"ae-typing-\" +\r\n                Date.now();\r\n\r\n\r\n            const typingHTML = `\r\n\r\n                <div\r\n\r\n                    id=\"${typingId}\"\r\n\r\n                    class=\"\r\n                        ae-message\r\n                        ae-message-ai\r\n                    \"\r\n\r\n                >\r\n\r\n                    <div\r\n                        class=\"ae-avatar\"\r\n                    >\r\n                        AI\r\n                    <\/div>\r\n\r\n\r\n                    <div\r\n                        class=\"\r\n                            ae-message-content\r\n                        \"\r\n                    >\r\n\r\n                        <div\r\n                            class=\"\r\n                                ae-bubble\r\n                                ae-typing\r\n                            \"\r\n                        >\r\n\r\n                            <span><\/span>\r\n\r\n                            <span><\/span>\r\n\r\n                            <span><\/span>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            `;\r\n\r\n\r\n            chatMessages.insertAdjacentHTML(\r\n\r\n                \"beforeend\",\r\n\r\n                typingHTML\r\n\r\n            );\r\n\r\n\r\n            scrollToBottom();\r\n\r\n\r\n            return typingId;\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           REMOVE TYPING\r\n        ========================================== *\/\r\n\r\n        function removeTyping(\r\n            typingId\r\n        ) {\r\n\r\n\r\n            const typingElement =\r\n                document.getElementById(\r\n                    typingId\r\n                );\r\n\r\n\r\n            if (\r\n                typingElement\r\n            ) {\r\n\r\n                typingElement.remove();\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           LOADING BUTTON\r\n        ========================================== *\/\r\n\r\n        function setLoading(\r\n            loading\r\n        ) {\r\n\r\n\r\n            sendButton.disabled =\r\n                loading;\r\n\r\n\r\n            const sendText =\r\n                sendButton.querySelector(\r\n                    \".ae-send-text\"\r\n                );\r\n\r\n\r\n            const loadingText =\r\n                sendButton.querySelector(\r\n                    \".ae-send-loading\"\r\n                );\r\n\r\n\r\n            if (\r\n                loading\r\n            ) {\r\n\r\n\r\n                sendText.style.display =\r\n                    \"none\";\r\n\r\n\r\n                loadingText.style.display =\r\n                    \"inline\";\r\n\r\n\r\n            }\r\n\r\n            else {\r\n\r\n\r\n                sendText.style.display =\r\n                    \"inline\";\r\n\r\n\r\n                loadingText.style.display =\r\n                    \"none\";\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           SCROLL CHAT\r\n        ========================================== *\/\r\n\r\n        function scrollToBottom() {\r\n\r\n\r\n            chatMessages.scrollTop =\r\n\r\n                chatMessages.scrollHeight;\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           FORMAT MESSAGE\r\n        ========================================== *\/\r\n\r\n        function formatMessage(\r\n            message\r\n        ) {\r\n\r\n\r\n            return escapeHTML(\r\n                message\r\n            )\r\n\r\n            .replace(\r\n\r\n                \/\\n\/g,\r\n\r\n                \"<br>\"\r\n\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           ESCAPE HTML\r\n        ========================================== *\/\r\n\r\n        function escapeHTML(\r\n            text\r\n        ) {\r\n\r\n\r\n            if (\r\n                text === null ||\r\n\r\n                text === undefined\r\n            ) {\r\n\r\n                return \"\";\r\n\r\n            }\r\n\r\n\r\n            const div =\r\n                document.createElement(\r\n                    \"div\"\r\n                );\r\n\r\n\r\n            div.textContent =\r\n                text;\r\n\r\n\r\n            return div.innerHTML;\r\n\r\n        }\r\n\r\n\r\n        \/* ==========================================\r\n           SEND BUTTON CLICK\r\n        ========================================== *\/\r\n\r\n        sendButton.addEventListener(\r\n\r\n            \"click\",\r\n\r\n            function() {\r\n\r\n                sendMessage();\r\n\r\n            }\r\n\r\n        );\r\n\r\n\r\n        \/* ==========================================\r\n           ENTER TO SEND\r\n        ========================================== *\/\r\n\r\n        chatInput.addEventListener(\r\n\r\n            \"keydown\",\r\n\r\n            function(event) {\r\n\r\n\r\n                if (\r\n\r\n                    event.key === \"Enter\" &&\r\n\r\n                    !event.shiftKey\r\n\r\n                ) {\r\n\r\n\r\n                    event.preventDefault();\r\n\r\n\r\n                    sendMessage();\r\n\r\n                }\r\n\r\n            }\r\n\r\n        );\r\n\r\n\r\n        \/* ==========================================\r\n           SUGGESTION BUTTONS\r\n        ========================================== *\/\r\n\r\n        suggestions.forEach(\r\n\r\n            function(button) {\r\n\r\n\r\n                button.addEventListener(\r\n\r\n                    \"click\",\r\n\r\n                    function() {\r\n\r\n\r\n                        chatInput.value =\r\n                            button.textContent.trim();\r\n\r\n\r\n                        sendMessage();\r\n\r\n                    }\r\n\r\n                );\r\n\r\n            }\r\n\r\n        );\r\n\r\n\r\n    }\r\n\r\n);\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83e\udd16 Auto Engines AI Assistant Find engines from our current product database Online AI Hello! \ud83d\udc4b I can help you find engines available on Auto-Engines.com. Please tell me the engine code, vehicle brand, vehicle model, or production year. I need an Isuzu 4HK1 engine Do you have a BMW engine? I need a diesel engine [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-5349","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/auto-engines.com\/en\/wp-json\/wp\/v2\/pages\/5349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/auto-engines.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/auto-engines.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/auto-engines.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/auto-engines.com\/en\/wp-json\/wp\/v2\/comments?post=5349"}],"version-history":[{"count":7,"href":"https:\/\/auto-engines.com\/en\/wp-json\/wp\/v2\/pages\/5349\/revisions"}],"predecessor-version":[{"id":5357,"href":"https:\/\/auto-engines.com\/en\/wp-json\/wp\/v2\/pages\/5349\/revisions\/5357"}],"wp:attachment":[{"href":"https:\/\/auto-engines.com\/en\/wp-json\/wp\/v2\/media?parent=5349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}