{"id":12,"date":"2026-09-28T06:51:39","date_gmt":"2026-09-28T06:51:39","guid":{"rendered":"https:\/\/alfaresai.com\/?page_id=12"},"modified":"2026-09-28T10:31:16","modified_gmt":"2026-09-28T10:31:16","slug":"home","status":"publish","type":"page","link":"https:\/\/alfaresai.com\/ar\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2267031 e-con e-atomic-element e-flexbox-base e-default-div e-111d9a7 \" data-id=\"2267031\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2267031\">\n    <div class=\"elementor-element elementor-element-e9223db e-con e-atomic-element e-flexbox-base e-default-div e-e9223db-7d346c0 \" data-id=\"e9223db\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e9223db\">\n    \t\t\t<h4 data-interaction-id=\"8fec672\" class=\"e-8fec672-10308ad e-heading-base e-default-h4\"><strong>A JOURNEY THROUGH THE PAGES OF&nbsp;<\/strong><\/h4>\n\t\t\t\t\t<h1 data-interaction-id=\"945998f\" class=\"e-945998f-5fd10f3 e-heading-base e-default-h1\">AL FARES<\/h1>\n\t\t\t\t\t\n<hr class=\"e-8ff21f9-78f2640 e-divider-base\" data-interaction-id=\"8ff21f9\"   \/>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ade3f3 elementor-widget elementor-widget-text-editor\" data-id=\"6ade3f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Discover the book&#8217;s content and ask the intelligent assistant about the people, events, and topics featured within it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5b0eaa8 e-con e-atomic-element e-flexbox-base e-default-div e-5b0eaa8-83c0cdc \" data-id=\"5b0eaa8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5b0eaa8\">\n    \t\t\t<button class=\"e-df8dcca-4ab2d24 e-button-base e-default-button\" data-interaction-id=\"df8dcca\">\n\tStart Asking\n<\/button>\n\t\t\t\t\t<button class=\"e-e31ef12-9109517 e-button-base e-default-button\" data-interaction-id=\"e31ef12\">\n\tAbout the Book\n<\/button>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-3b33c89 e-con e-atomic-element e-flexbox-base e-default-div e-3b33c89-c305c84 \" data-id=\"3b33c89\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3b33c89\">\n    \t\t\t<img fetchpriority=\"high\" decoding=\"async\" class=\"e-image-base e-default-img e-845fece-f50288e\" data-interaction-id=\"845fece\" id=\"130\" src=\"https:\/\/alfaresai.com\/wp-content\/uploads\/2026\/09\/book.png\" width=\"1000\" height=\"1500\" srcset=\"https:\/\/alfaresai.com\/wp-content\/uploads\/2026\/09\/book.png 1000w, https:\/\/alfaresai.com\/wp-content\/uploads\/2026\/09\/book-200x300.png 200w, https:\/\/alfaresai.com\/wp-content\/uploads\/2026\/09\/book-683x1024.png 683w, https:\/\/alfaresai.com\/wp-content\/uploads\/2026\/09\/book-768x1152.png 768w\" alt=\"\"\/>\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d7ab050 e-con e-atomic-element e-flexbox-base e-default-div e-d7ab050-a5e9cd8 \" data-id=\"d7ab050\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d7ab050\">\n    \t\t<div class=\"elementor-element elementor-element-874795e elementor-widget elementor-widget-html\" data-id=\"874795e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\n     AL FARES AI CHAT\n     PRODUCTION VERSION\n     Elementor + TranslatePress + FastAPI\n========================================= -->\n\n<div class=\"alfares-chat\">\n\n    <!-- HEADER -->\n    <div class=\"alfares-chat-header\">\n\n        <div class=\"alfares-assistant\">\n\n            <div class=\"alfares-ai-icon\">\n                <img decoding=\"async\"\n                    src=\"\/wp-content\/uploads\/2026\/09\/al-fares-logo.png\"\n                    alt=\"Al Fares\"\n                >\n            <\/div>\n\n            <div class=\"alfares-ai-info\">\n\n                <div class=\"alfares-ai-name\">\n                    AL FARES AI\n                <\/div>\n\n                <div class=\"alfares-ai-subtitle\">\n                    Book Assistant\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"alfares-status\">\n\n            <span class=\"alfares-status-dot\"><\/span>\n\n            <span class=\"alfares-status-text\">\n                Online\n            <\/span>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =========================================\n         MESSAGES\n    ========================================== -->\n\n    <div\n        class=\"alfares-messages\"\n        id=\"alfares-messages\"\n    >\n\n        <!-- WELCOME MESSAGE -->\n\n        <div class=\"alfares-message-row assistant-message\">\n\n            <div class=\"message-icon\">\n\n                <img decoding=\"async\"\n                    src=\"\/wp-content\/uploads\/2026\/09\/al-fares-logo.png\"\n                    alt=\"Al Fares\"\n                >\n\n            <\/div>\n\n\n            <div class=\"message-content\">\n\n                <div class=\"message-name\">\n                    AL FARES AI\n                <\/div>\n\n                <div class=\"message-bubble\">\n                    Hello! I'm your Al Fares AI assistant. Ask me anything about the people, events, stories and topics featured in the book.\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =========================================\n             SUGGESTED QUESTIONS\n             TranslatePress can translate these\n        ========================================== -->\n\n        <div class=\"alfares-suggestions\">\n\n            <div class=\"suggestion-title\">\n                Proposed Questions\n            <\/div>\n\n\n            <!-- QUESTION 1 -->\n\n            <button\n                class=\"suggestion\"\n                type=\"button\"\n                onclick=\"setAlFaresQuestionFromButton(this)\"\n            >\n\n                <span class=\"suggestion-arrow\">\n                    \u2192\n                <\/span>\n\n                <span class=\"suggestion-text\">\n                    Give me the chapters of the book\n                <\/span>\n\n            <\/button>\n\n\n            <!-- QUESTION 2 -->\n\n            <button\n                class=\"suggestion\"\n                type=\"button\"\n                onclick=\"setAlFaresQuestionFromButton(this)\"\n            >\n\n                <span class=\"suggestion-arrow\">\n                    \u2192\n                <\/span>\n\n                <span class=\"suggestion-text\">\n                    Who is Sheikh Mansoor?\n                <\/span>\n\n            <\/button>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =========================================\n         INPUT\n    ========================================== -->\n\n    <div class=\"alfares-input-area\">\n\n        <div class=\"alfares-input-wrapper\">\n\n            <input\n                id=\"alfares-question\"\n                type=\"text\"\n                placeholder=\"Ask about the book...\"\n                autocomplete=\"off\"\n            >\n\n\n            <button\n                id=\"alfares-send\"\n                type=\"button\"\n                aria-label=\"Send question\"\n            >\n\n                <img decoding=\"async\"\n                    src=\"\/wp-content\/uploads\/2026\/09\/al-fares-logo.png\"\n                    alt=\"\"\n                >\n\n            <\/button>\n\n        <\/div>\n\n\n        <div class=\"alfares-disclaimer\">\n            Answers are based on the content of Al Fares.\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================\n   CHAT CARD\n========================================= *\/\n\n.alfares-chat {\n\n    width: 100%;\n    max-width: 430px;\n    height: 580px;\n\n    margin: 0 auto;\n\n    background: rgba(255,255,255,0.96);\n\n    border:\n        1px solid rgba(168,139,80,0.18);\n\n    border-radius: 22px;\n\n    box-shadow:\n        0 20px 60px rgba(50,40,20,0.12);\n\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    color: #1c1915;\n\n}\n\n\n\/* =========================================\n   HEADER\n========================================= *\/\n\n.alfares-chat-header {\n\n    min-height: 82px;\n\n    padding: 16px 20px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    border-bottom:\n        1px solid #eee8dc;\n\n    background:\n        rgba(255,255,255,0.92);\n\n}\n\n\n.alfares-assistant {\n\n    display: flex;\n    align-items: center;\n\n    gap: 12px;\n\n}\n\n\n\/* =========================================\n   MAIN LOGO\n========================================= *\/\n\n.alfares-ai-icon {\n\n    width: 52px;\n    height: 52px;\n\n    min-width: 52px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background: #191714;\n\n    border-radius: 50%;\n\n    overflow: hidden;\n\n}\n\n\n.alfares-ai-icon img {\n\n    width: 41px;\n    height: 41px;\n\n    object-fit: contain;\n\n    filter: invert(1);\n\n    opacity: 0.95;\n\n}\n\n\n.alfares-ai-name {\n\n    font-size: 14px;\n\n    font-weight: 700;\n\n    letter-spacing: 0.8px;\n\n    color: #1c1915;\n\n}\n\n\n.alfares-ai-subtitle {\n\n    margin-top: 3px;\n\n    font-size: 11px;\n\n    color: #8a8479;\n\n}\n\n\n\/* =========================================\n   ONLINE STATUS\n========================================= *\/\n\n.alfares-status {\n\n    display: flex;\n    align-items: center;\n\n    gap: 6px;\n\n    font-size: 11px;\n\n    color: #777168;\n\n}\n\n\n.alfares-status-dot {\n\n    width: 7px;\n    height: 7px;\n\n    flex-shrink: 0;\n\n    border-radius: 50%;\n\n    background: #5fa66a;\n\n    box-shadow:\n        0 0 0 3px\n        rgba(95,166,106,0.10);\n\n}\n\n\n\/* =========================================\n   MESSAGES AREA\n========================================= *\/\n\n.alfares-messages {\n\n    flex: 1;\n\n    padding: 24px 20px;\n\n    overflow-y: auto;\n\n    scroll-behavior: smooth;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(250,248,242,0.45),\n            rgba(255,255,255,0)\n        );\n\n}\n\n\n\/* =========================================\n   AI MESSAGE\n========================================= *\/\n\n.alfares-message-row {\n\n    display: flex;\n\n    align-items: flex-start;\n\n    gap: 10px;\n\n    margin-bottom: 18px;\n\n}\n\n\n.message-icon {\n\n    width: 32px;\n    height: 32px;\n\n    min-width: 32px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background: #191714;\n\n    border-radius: 50%;\n\n    overflow: hidden;\n\n}\n\n\n.message-icon img {\n\n    width: 25px;\n    height: 25px;\n\n    object-fit: contain;\n\n    filter: invert(1);\n\n    opacity: 0.95;\n\n}\n\n\n.message-content {\n\n    max-width: 85%;\n\n}\n\n\n.message-name {\n\n    margin-bottom: 6px;\n\n    font-size: 10px;\n\n    font-weight: 700;\n\n    letter-spacing: 0.7px;\n\n    color: #9a7b43;\n\n}\n\n\n.message-bubble {\n\n    padding: 13px 15px;\n\n    background: #f4f0e7;\n\n    border-radius:\n        4px 14px 14px 14px;\n\n    font-size: 13px;\n\n    line-height: 1.65;\n\n    color: #4c4740;\n\n    word-break: break-word;\n\n}\n\n\n\/* =========================================\n   USER MESSAGE\n========================================= *\/\n\n.alfares-user-message-row {\n\n    display: flex;\n\n    justify-content: flex-end;\n\n    margin-top: 8px;\n    margin-bottom: 18px;\n\n}\n\n\n.alfares-user-bubble {\n\n    max-width: 80%;\n\n    padding: 12px 15px;\n\n    background: #191714;\n\n    color: #ffffff;\n\n    border-radius:\n        14px 4px 14px 14px;\n\n    font-size: 13px;\n\n    line-height: 1.6;\n\n    word-break: break-word;\n\n}\n\n\n\/* =========================================\n   PROPOSED QUESTIONS\n========================================= *\/\n\n.alfares-suggestions {\n\n    margin-top: 10px;\n\n    padding-left: 42px;\n\n}\n\n\n.suggestion-title {\n\n    margin-bottom: 10px;\n\n    font-size: 11px;\n\n    font-weight: 600;\n\n    text-transform: uppercase;\n\n    letter-spacing: 0.8px;\n\n    color: #8c857b;\n\n}\n\n\n.suggestion {\n\n    width: 100%;\n\n    margin-bottom: 9px;\n\n    padding: 12px 14px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    text-align: left;\n\n    border:\n        1px solid #e5ded0;\n\n    border-radius: 11px;\n\n    background: #ffffff;\n\n    color: #59534b;\n\n    font-family: inherit;\n\n    font-size: 12px;\n\n    line-height: 1.4;\n\n    cursor: pointer;\n\n    transition:\n        background 0.2s ease,\n        border-color 0.2s ease,\n        transform 0.2s ease;\n\n}\n\n\n.suggestion-arrow {\n\n    flex-shrink: 0;\n\n    color: #a7894e;\n\n    font-size: 15px;\n\n    transition:\n        transform 0.2s ease;\n\n}\n\n\n.suggestion:hover {\n\n    background: #f5f0e5;\n\n    border-color: #b99a5d;\n\n    transform:\n        translateY(-1px);\n\n}\n\n\n.suggestion:hover\n.suggestion-arrow {\n\n    transform:\n        translateX(3px);\n\n}\n\n\n\/* =========================================\n   THINKING ANIMATION\n========================================= *\/\n\n.alfares-thinking {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 5px;\n\n    width: fit-content;\n\n    min-width: 55px;\n\n    padding:\n        15px 17px;\n\n}\n\n\n.alfares-thinking span {\n\n    width: 6px;\n    height: 6px;\n\n    background: #a7894e;\n\n    border-radius: 50%;\n\n    animation:\n        alfaresThinking\n        1.2s\n        infinite\n        ease-in-out;\n\n}\n\n\n.alfares-thinking span:nth-child(2) {\n\n    animation-delay: 0.15s;\n\n}\n\n\n.alfares-thinking span:nth-child(3) {\n\n    animation-delay: 0.30s;\n\n}\n\n\n@keyframes alfaresThinking {\n\n    0%,\n    60%,\n    100% {\n\n        transform:\n            translateY(0);\n\n        opacity: 0.35;\n\n    }\n\n\n    30% {\n\n        transform:\n            translateY(-4px);\n\n        opacity: 1;\n\n    }\n\n}\n\n\n\/* =========================================\n   INPUT AREA\n========================================= *\/\n\n.alfares-input-area {\n\n    padding: 14px 18px 13px;\n\n    border-top:\n        1px solid #eee8dc;\n\n    background: #ffffff;\n\n}\n\n\n.alfares-input-wrapper {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 8px;\n\n    padding:\n        6px 6px 6px 15px;\n\n    background: #f5f2eb;\n\n    border:\n        1px solid #e4ddd0;\n\n    border-radius: 30px;\n\n    transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n}\n\n\n.alfares-input-wrapper:focus-within {\n\n    border-color: #b99a5d;\n\n    box-shadow:\n        0 0 0 3px\n        rgba(185,154,93,0.08);\n\n}\n\n\n\/* =========================================\n   INPUT FIELD\n========================================= *\/\n\n#alfares-question {\n\n    flex: 1;\n\n    min-width: 0;\n\n    padding: 8px 0;\n\n    border: none;\n\n    outline: none;\n\n    background: transparent;\n\n    color: #28241f;\n\n    font-family: inherit;\n\n    font-size: 13px;\n\n}\n\n\n#alfares-question::placeholder {\n\n    color: #9c968d;\n\n}\n\n\n#alfares-question:disabled {\n\n    opacity: 0.7;\n\n}\n\n\n\/* =========================================\n   SEND BUTTON\n========================================= *\/\n\n#alfares-send {\n\n    width: 44px;\n    height: 44px;\n\n    min-width: 44px;\n\n    padding: 6px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: none;\n\n    border-radius: 50%;\n\n    background: #191714;\n\n    cursor: pointer;\n\n    overflow: hidden;\n\n    transition:\n        background 0.2s ease,\n        transform 0.2s ease,\n        opacity 0.2s ease;\n\n}\n\n\n#alfares-send img {\n\n    width: 30px;\n    height: 30px;\n\n    object-fit: contain;\n\n    filter: invert(1);\n\n    opacity: 0.95;\n\n    pointer-events: none;\n\n}\n\n\n#alfares-send:hover:not(:disabled) {\n\n    background: #a7894e;\n\n    transform:\n        scale(1.05);\n\n}\n\n\n#alfares-send:active:not(:disabled) {\n\n    transform:\n        scale(0.94);\n\n}\n\n\n#alfares-send:disabled {\n\n    opacity: 0.50;\n\n    cursor: not-allowed;\n\n    transform: none;\n\n}\n\n\n\/* =========================================\n   DISCLAIMER\n========================================= *\/\n\n.alfares-disclaimer {\n\n    margin-top: 8px;\n\n    text-align: center;\n\n    font-size: 9px;\n\n    color: #aaa399;\n\n}\n\n\n\/* =========================================\n   SCROLLBAR\n========================================= *\/\n\n.alfares-messages::-webkit-scrollbar {\n\n    width: 4px;\n\n}\n\n\n.alfares-messages::-webkit-scrollbar-track {\n\n    background: transparent;\n\n}\n\n\n.alfares-messages::-webkit-scrollbar-thumb {\n\n    background: #d5cbbb;\n\n    border-radius: 20px;\n\n}\n\n\n\/* =========================================\n   ARABIC \/ RTL\n   TranslatePress\n========================================= *\/\n\nhtml[lang^=\"ar\"]\n.alfares-chat {\n\n    direction: rtl;\n\n    text-align: right;\n\n    font-family:\n        Tahoma,\n        Arial,\n        sans-serif;\n\n}\n\n\nhtml[lang^=\"ar\"]\n.alfares-message-row {\n\n    flex-direction: row;\n\n}\n\n\nhtml[lang^=\"ar\"]\n.message-bubble {\n\n    direction: rtl;\n\n    text-align: right;\n\n    border-radius:\n        14px 4px 14px 14px;\n\n}\n\n\nhtml[lang^=\"ar\"]\n.message-name {\n\n    text-align: right;\n\n}\n\n\nhtml[lang^=\"ar\"]\n.alfares-suggestions {\n\n    padding-left: 0;\n\n    padding-right: 42px;\n\n}\n\n\nhtml[lang^=\"ar\"]\n.suggestion {\n\n    text-align: right;\n\n}\n\n\nhtml[lang^=\"ar\"]\n.suggestion-arrow {\n\n    transform:\n        rotate(180deg);\n\n}\n\n\nhtml[lang^=\"ar\"]\n.suggestion:hover\n.suggestion-arrow {\n\n    transform:\n        rotate(180deg)\n        translateX(3px);\n\n}\n\n\nhtml[lang^=\"ar\"]\n.alfares-input-wrapper {\n\n    padding:\n        6px 15px 6px 6px;\n\n}\n\n\nhtml[lang^=\"ar\"]\n#alfares-question {\n\n    direction: rtl;\n\n    text-align: right;\n\n}\n\n\nhtml[lang^=\"ar\"]\n.alfares-user-message-row {\n\n    justify-content: flex-start;\n\n}\n\n\nhtml[lang^=\"ar\"]\n.alfares-user-bubble {\n\n    direction: rtl;\n\n    text-align: right;\n\n    border-radius:\n        4px 14px 14px 14px;\n\n}\n\n\n\/* =========================================\n   TABLET\n========================================= *\/\n\n@media\n(min-width: 768px)\nand\n(max-width: 1024px) {\n\n    .alfares-chat {\n\n        max-width: 500px;\n\n    }\n\n}\n\n\n\/* =========================================\n   MOBILE\n========================================= *\/\n\n@media\n(max-width: 767px) {\n\n    .alfares-chat {\n\n        max-width: 100%;\n\n        height: 550px;\n\n        border-radius: 16px;\n\n    }\n\n\n    .alfares-chat-header {\n\n        padding:\n            14px 15px;\n\n    }\n\n\n    .alfares-messages {\n\n        padding:\n            20px 15px;\n\n    }\n\n\n    .alfares-suggestions {\n\n        padding-left: 0;\n\n    }\n\n\n    html[lang^=\"ar\"]\n    .alfares-suggestions {\n\n        padding-right: 0;\n\n    }\n\n\n    .alfares-ai-icon {\n\n        width: 46px;\n        height: 46px;\n\n        min-width: 46px;\n\n    }\n\n\n    .alfares-ai-icon img {\n\n        width: 36px;\n        height: 36px;\n\n    }\n\n\n    #alfares-send {\n\n        width: 42px;\n        height: 42px;\n\n        min-width: 42px;\n\n    }\n\n\n    #alfares-send img {\n\n        width: 28px;\n        height: 28px;\n\n    }\n\n\n    .message-content {\n\n        max-width: 88%;\n\n    }\n\n\n    .alfares-user-bubble {\n\n        max-width: 88%;\n\n    }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n\/* =========================================\n   AL FARES PRODUCTION API\n========================================= *\/\n\nconst ALFARES_API =\n    \"https:\/\/api.alfaresai.com\";\n\n\nconst messagesContainer =\n    document.getElementById(\n        \"alfares-messages\"\n    );\n\n\nconst input =\n    document.getElementById(\n        \"alfares-question\"\n    );\n\n\nconst sendButton =\n    document.getElementById(\n        \"alfares-send\"\n    );\n\n\nlet isSending = false;\n\n\n\/* =========================================\n   SESSION ID\n\n   Each visitor\/browser receives a persistent\n   chat session ID.\n\n   The same ID is sent with future questions.\n========================================= *\/\n\nfunction getAlFaresSessionId() {\n\n    let sessionId =\n        localStorage.getItem(\n            \"alfares_session_id\"\n        );\n\n\n    if (!sessionId) {\n\n        if (\n            window.crypto &&\n            typeof window.crypto.randomUUID\n                === \"function\"\n        ) {\n\n            sessionId =\n                \"website-\" +\n                window.crypto.randomUUID();\n\n        }\n\n        else {\n\n            sessionId =\n                \"website-\" +\n                Date.now() +\n                \"-\" +\n                Math.random()\n                    .toString(36)\n                    .substring(2);\n\n        }\n\n\n        localStorage.setItem(\n            \"alfares_session_id\",\n            sessionId\n        );\n\n    }\n\n\n    return sessionId;\n\n}\n\n\nconst sessionId =\n    getAlFaresSessionId();\n\n\n\/* =========================================\n   LANGUAGE DETECTION\n========================================= *\/\n\nfunction isArabicPage() {\n\n    const language =\n        document\n            .documentElement\n            .lang\n            .toLowerCase();\n\n\n    return language.startsWith(\"ar\");\n\n}\n\n\n\/* =========================================\n   TRANSLATEPRESS SUGGESTED QUESTIONS\n\n   IMPORTANT:\n\n   We read the VISIBLE translated text.\n\n   English visitor:\n   \"Who is Sheikh Mansoor?\"\n\n   Arabic visitor:\n   \"\u0645\u0646 \u0647\u0648 \u0627\u0644\u0634\u064a\u062e \u0645\u0646\u0635\u0648\u0631 \u0628\u0646 \u0632\u0627\u064a\u062f\u061f\"\n\n   Therefore the correct language gets sent\n   to FastAPI.\n========================================= *\/\n\nfunction setAlFaresQuestionFromButton(\n    button\n) {\n\n    const questionElement =\n        button.querySelector(\n            \".suggestion-text\"\n        );\n\n\n    if (!questionElement) {\n\n        return;\n\n    }\n\n\n    const question =\n        questionElement\n            .textContent\n            .trim();\n\n\n    input.value =\n        question;\n\n\n    input.focus();\n\n}\n\n\n\/* =========================================\n   SAFE HTML\n========================================= *\/\n\nfunction escapeAlFaresHTML(text) {\n\n    const div =\n        document.createElement(\n            \"div\"\n        );\n\n\n    div.textContent =\n        String(text);\n\n\n    return div.innerHTML;\n\n}\n\n\n\/* =========================================\n   FORMAT AI ANSWER\n========================================= *\/\n\nfunction formatAlFaresAnswer(text) {\n\n    const safeText =\n        escapeAlFaresHTML(text);\n\n\n    return safeText\n        .replace(\n            \/\\n\\n\/g,\n            \"<br><br>\"\n        )\n        .replace(\n            \/\\n\/g,\n            \"<br>\"\n        );\n\n}\n\n\n\/* =========================================\n   USER MESSAGE\n========================================= *\/\n\nfunction addUserMessage(question) {\n\n    const row =\n        document.createElement(\n            \"div\"\n        );\n\n\n    row.className =\n        \"alfares-user-message-row\";\n\n\n    row.innerHTML = `\n\n        <div class=\"alfares-user-bubble\">\n            ${escapeAlFaresHTML(question)}\n        <\/div>\n\n    `;\n\n\n    messagesContainer\n        .appendChild(row);\n\n\n    scrollAlFaresChat();\n\n}\n\n\n\/* =========================================\n   THINKING MESSAGE\n========================================= *\/\n\nfunction addThinkingMessage() {\n\n    const row =\n        document.createElement(\n            \"div\"\n        );\n\n\n    row.className =\n        \"alfares-message-row assistant-message alfares-thinking-row\";\n\n\n    row.innerHTML = `\n\n        <div class=\"message-icon\">\n\n            <img decoding=\"async\"\n                src=\"\/wp-content\/uploads\/2026\/09\/al-fares-logo.png\"\n                alt=\"Al Fares\"\n            >\n\n        <\/div>\n\n\n        <div class=\"message-content\">\n\n            <div class=\"message-name\">\n                AL FARES AI\n            <\/div>\n\n\n            <div class=\"message-bubble alfares-thinking\">\n\n                <span><\/span>\n\n                <span><\/span>\n\n                <span><\/span>\n\n            <\/div>\n\n        <\/div>\n\n    `;\n\n\n    messagesContainer\n        .appendChild(row);\n\n\n    scrollAlFaresChat();\n\n\n    return row;\n\n}\n\n\n\/* =========================================\n   AI MESSAGE\n========================================= *\/\n\nfunction addAIMessage(answer) {\n\n    const row =\n        document.createElement(\n            \"div\"\n        );\n\n\n    row.className =\n        \"alfares-message-row assistant-message\";\n\n\n    row.innerHTML = `\n\n        <div class=\"message-icon\">\n\n            <img decoding=\"async\"\n                src=\"\/wp-content\/uploads\/2026\/09\/al-fares-logo.png\"\n                alt=\"Al Fares\"\n            >\n\n        <\/div>\n\n\n        <div class=\"message-content\">\n\n            <div class=\"message-name\">\n                AL FARES AI\n            <\/div>\n\n\n            <div class=\"message-bubble\">\n                ${formatAlFaresAnswer(answer)}\n            <\/div>\n\n        <\/div>\n\n    `;\n\n\n    messagesContainer\n        .appendChild(row);\n\n\n    scrollAlFaresChat();\n\n}\n\n\n\/* =========================================\n   ERROR MESSAGE\n========================================= *\/\n\nfunction addErrorMessage() {\n\n    let message;\n\n\n    if (isArabicPage()) {\n\n        message =\n            \"\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0645\u0633\u0627\u0639\u062f. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.\";\n\n    }\n\n    else {\n\n        message =\n            \"Something went wrong while contacting the assistant. Please try again.\";\n\n    }\n\n\n    addAIMessage(message);\n\n}\n\n\n\/* =========================================\n   SCROLL TO LATEST MESSAGE\n========================================= *\/\n\nfunction scrollAlFaresChat() {\n\n    requestAnimationFrame(\n        function () {\n\n            messagesContainer.scrollTop =\n                messagesContainer.scrollHeight;\n\n        }\n    );\n\n}\n\n\n\/* =========================================\n   HIDE SUGGESTED QUESTIONS\n========================================= *\/\n\nfunction hideSuggestions() {\n\n    const suggestions =\n        document.querySelector(\n            \".alfares-suggestions\"\n        );\n\n\n    if (suggestions) {\n\n        suggestions.style.display =\n            \"none\";\n\n    }\n\n}\n\n\n\/* =========================================\n   SEND QUESTION TO FASTAPI\n========================================= *\/\n\nasync function sendAlFaresQuestion() {\n\n    \/* Prevent duplicate requests *\/\n\n    if (isSending) {\n\n        return;\n\n    }\n\n\n    const question =\n        input\n            .value\n            .trim();\n\n\n    \/* Empty question *\/\n\n    if (!question) {\n\n        input.focus();\n\n        return;\n\n    }\n\n\n    isSending = true;\n\n\n    \/* Clear input *\/\n\n    input.value = \"\";\n\n\n    \/* Disable while waiting *\/\n\n    input.disabled = true;\n\n    sendButton.disabled = true;\n\n\n    \/* Remove proposed questions *\/\n\n    hideSuggestions();\n\n\n    \/* Show visitor message *\/\n\n    addUserMessage(\n        question\n    );\n\n\n    \/* Show thinking dots *\/\n\n    const thinkingRow =\n        addThinkingMessage();\n\n\n    try {\n\n        \/* =================================\n           CALL PRODUCTION RAG API\n        ================================= *\/\n\n        const response =\n            await fetch(\n\n                ALFARES_API + \"\/ask\",\n\n                {\n\n                    method:\n                        \"POST\",\n\n\n                    headers: {\n\n                        \"Content-Type\":\n                            \"application\/json\"\n\n                    },\n\n\n                    body:\n                        JSON.stringify({\n\n                            question:\n                                question,\n\n                            session_id:\n                                sessionId\n\n                        })\n\n                }\n\n            );\n\n\n        \/* =================================\n           HTTP ERROR\n        ================================= *\/\n\n        if (!response.ok) {\n\n            throw new Error(\n                \"API returned HTTP \" +\n                response.status\n            );\n\n        }\n\n\n        \/* =================================\n           READ RESPONSE\n        ================================= *\/\n\n        const data =\n            await response.json();\n\n\n        \/* Remove thinking *\/\n\n        if (\n            thinkingRow &&\n            thinkingRow.parentNode\n        ) {\n\n            thinkingRow.remove();\n\n        }\n\n\n        \/* =================================\n           VALIDATE ANSWER\n        ================================= *\/\n\n        if (\n            !data ||\n            !data.answer\n        ) {\n\n            throw new Error(\n                \"The API returned no answer.\"\n            );\n\n        }\n\n\n        \/* =================================\n           DISPLAY RAG ANSWER\n        ================================= *\/\n\n        addAIMessage(\n            data.answer\n        );\n\n    }\n\n\n    catch (error) {\n\n        console.error(\n            \"Al Fares AI error:\",\n            error\n        );\n\n\n        \/* Remove thinking *\/\n\n        if (\n            thinkingRow &&\n            thinkingRow.parentNode\n        ) {\n\n            thinkingRow.remove();\n\n        }\n\n\n        \/* Show friendly error *\/\n\n        addErrorMessage();\n\n    }\n\n\n    finally {\n\n        isSending = false;\n\n\n        input.disabled =\n            false;\n\n\n        sendButton.disabled =\n            false;\n\n\n        input.focus();\n\n    }\n\n}\n\n\n\/* =========================================\n   SEND BUTTON CLICK\n========================================= *\/\n\nsendButton.addEventListener(\n\n    \"click\",\n\n    function () {\n\n        sendAlFaresQuestion();\n\n    }\n\n);\n\n\n\/* =========================================\n   ENTER TO SEND\n========================================= *\/\n\ninput.addEventListener(\n\n    \"keydown\",\n\n    function (event) {\n\n        if (\n            event.key === \"Enter\" &&\n            !event.shiftKey\n        ) {\n\n            event.preventDefault();\n\n\n            sendAlFaresQuestion();\n\n        }\n\n    }\n\n);\n\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>A JOURNEY THROUGH THE PAGES OF&nbsp; AL FARES Discover the book&#8217;s content and ask the intelligent assistant about the people, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","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":"disabled","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":"default","ast-page-background-enabled":"default","ast-page-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":"","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-4)","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-4)","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-4)","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":""}},"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/alfaresai.com\/ar\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alfaresai.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alfaresai.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alfaresai.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alfaresai.com\/ar\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":178,"href":"https:\/\/alfaresai.com\/ar\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/alfaresai.com\/ar\/wp-json\/wp\/v2\/pages\/12\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/alfaresai.com\/ar\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}