Spaces:

abdulhamed
/

AgriBot

Sleeping

File size: 6,861 Bytes

02e4173

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <title>مساعد أجريكاش</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: "Tahoma", "Cairo", sans-serif;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #f4f7f2;
    }

    /* موقع أجريكاش */
    .background-app {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
      z-index: 1;
    }

    /* زر فتح الشات */
    .chat-toggle {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 65px;
      height: 65px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      background: linear-gradient(135deg, #3b7f3b, #6abf4b);
      color: #fff;
      font-size: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
      z-index: 3;
    }

    /* صندوق الشات */
    .chat-container {
      position: fixed;
      bottom: 120px;
      right: 30px;
      width: 420px;
      max-height: 75vh;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 3;
      border: 1px solid #d8e6d2;
      display: none; /* سيتم فتحه تلقائياً من الجافاسكربت */
    }

    /* هيدر الشات */
    .chat-header {
      background: linear-gradient(135deg, #2f6f2f, #4fa953);
      color: #fff;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
    }

    .chat-header-icon {
      font-size: 26px;
    }

    /* الرسائل */
    .chat-messages {
      padding: 14px;
      background: #f4f9f2;
      flex: 1;
      overflow-y: auto;
      font-size: 16px;
    }

    .message-row {
      margin-bottom: 12px;
      display: flex;
    }

    .message-row.user {
      justify-content: flex-end;
    }

    .message-row.bot {
      justify-content: flex-start;
    }

    .message-bubble {
      max-width: 80%;
      padding: 10px 14px;
      border-radius: 14px;
      white-space: pre-wrap;
      line-height: 1.5;
    }

    .message-row.user .message-bubble {
      background: #e6f5da;
      border: 1px solid #cde6bc;
      border-bottom-right-radius: 4px;
    }

    .message-row.bot .message-bubble {
      background: #ffffff;
      border: 1px solid #d9e1d3;
      border-bottom-left-radius: 4px;
    }

    /* حقل الإدخال */
    .chat-input-area {
      border-top: 1px solid #dfe8d8;
      background: #fdfefb;
      padding: 10px;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .chat-input {
      flex: 1;
      border-radius: 999px;
      border: 1px solid #cddac4;
      padding: 10px 16px;
      font-size: 16px;
      outline: none;
    }

    .chat-send-btn {
      border-radius: 999px;
      border: none;
      background: #6abf4b;
      color: #ffffff;
      padding: 10px 14px;
      font-size: 18px;
      cursor: pointer;
    }

    @media (max-width: 480px) {
      .chat-container {
        right: 10px;
        left: 10px;
        width: auto;
        max-height: 75vh;
      }

      .chat-toggle {
        right: 16px;
        bottom: 16px;
      }
    }
  </style>
</head>

<body>

  <!-- موقع أجريكاش -->
  <iframe
    src="https://agricash.app/"
    class="background-app"
    title="Agricash App"
  ></iframe>

  <!-- زر الشات -->
  <button class="chat-toggle" id="chatToggle">💬</button>

  <!-- صندوق الشات -->
  <div class="chat-container" id="chatContainer">
    <div class="chat-header">
      <div class="chat-header-icon">🌱</div>
      <div>مساعد أجريكاش الذكي</div>
    </div>

    <div class="chat-messages" id="chatMessages"></div>

    <div class="chat-input-area">
      <input
        id="chatInput"
        type="text"
        class="chat-input"
        placeholder="اكتب رسالتك هنا..."
      />
      <button class="chat-send-btn" id="chatSendBtn">➤</button>
    </div>
  </div>

  <script>
    const chatToggle = document.getElementById("chatToggle");
    const chatContainer = document.getElementById("chatContainer");
    const chatMessages = document.getElementById("chatMessages");
    const chatInput = document.getElementById("chatInput");
    const chatSendBtn = document.getElementById("chatSendBtn");

    let isOpen = false;
    let isSending = false;

    function toggleChat(forceOpen = false) {
      isOpen = forceOpen ? true : !isOpen;
      chatContainer.style.display = isOpen ? "flex" : "none";
    }

    chatToggle.addEventListener("click", () => toggleChat());

    function appendMessage(role, text) {
      const row = document.createElement("div");
      row.className = "message-row " + role;

      const bubble = document.createElement("div");
      bubble.className = "message-bubble";
      bubble.textContent = text;

      row.appendChild(bubble);
      chatMessages.appendChild(row);
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    async function sendMessage() {
      const text = chatInput.value.trim();
      if (!text || isSending) return;

      appendMessage("user", text);
      chatInput.value = "";
      chatInput.focus();

      isSending = true;
      chatSendBtn.disabled = true;

      // thinking placeholder
      const thinkingRow = document.createElement("div");
      thinkingRow.className = "message-row bot";
      const thinkingBubble = document.createElement("div");
      thinkingBubble.className = "message-bubble";
      thinkingBubble.textContent = "🤖 جاري التفكير...";
      thinkingRow.appendChild(thinkingBubble);
      chatMessages.appendChild(thinkingRow);

      try {
        const res = await fetch("/chat", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ message: text }),
        });

        const data = await res.json();
        thinkingBubble.textContent = data.response || "لا توجد إجابة.";
      } catch (err) {
        thinkingBubble.textContent = "خطأ في الاتصال بالخادم.";
      }

      isSending = false;
      chatSendBtn.disabled = false;
    }

    chatSendBtn.addEventListener("click", sendMessage);

    chatInput.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        sendMessage();
      }
    });

    // ⚡ OPEN CHAT AUTOMATICALLY ON PAGE LOAD
    window.onload = () => {
      toggleChat(true);
    };
  </script>
</body>
</html>