چت‌بات‌های عمومی — مانند آن‌هایی که فقط جواب «سلام» و «ممنون» می‌دهند — دیگر کافی نیستند. کاربران امروز انتظار دارند که دستیار مجازی شما از محتوای سایت شما بداند: از قیمت محصولات گرفته تا مراحل ثبت‌نام در آزمون‌ها، از آدرس دفتر گرفته تا زمان‌بندی دوره‌های آموزشی. در این مقاله، گام‌به‌گام نحوه‌ی ساخت یک چت‌بات هوشمند و شخصی‌سازی‌شده را آموزش می‌دهم که:

• به‌صورت خودکار از تمام محتوای سایت جوملا یاد می‌گیرد
• با هوش مصنوعی فارسی‌زبان (مثل Talkbot.ir) ادغام می‌شود
• تمام داده‌ها در همان سرور سایت ذخیره می‌شوند (امنیت بالا)
• رابط کاربری آن با Tailwind CSS و AJAX ساخته می‌شود — بدون رفرش صفحه

گام ۱: طراحی معماری سیستم — سه لایه‌ی هوشمند

چت‌بات ما بر سه لایه استوار است:

1. لایه‌ی جمع‌آوری دانش: اسکن خودکار محتوای سایت (مقالات، صفحات، محصولات)
2. لایه‌ی پردازش هوشمند: ادغام با API هوش مصنوعی برای درک سؤالات
3. لایه‌ی رابط کاربری: چت‌بات واکنش‌گرا در گوشه‌ی سایت

گام ۲: ایجاد جدول دانش (#__site_knowledge)

تمام دانش سایت را در یک جدول ساده ذخیره کنید:

CREATE TABLE `#__site_knowledge` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `question` varchar(255) NOT NULL,
  `answer` text NOT NULL,
  `source_url` varchar(255) DEFAULT NULL,
  `category` varchar(50) DEFAULT 'general',
  PRIMARY KEY (`id`),
  FULLTEXT KEY `ft_question` (`question`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci;

گام ۳: جمع‌آوری خودکار دانش از محتوای جوملا

یک کامپوننت یا ماژول بنویسید که هنگام نصب یا با دستور دستی، محتوا را اسکن کند:

<?php
$db = \Joomla\CMS\Factory::getDbo();

// اسکن مقالات
$articles = $db->setQuery(
    $db->getQuery(true)
        ->select('id, title, introtext, alias')
        ->from('#__content')
        ->where('state = 1')
)->loadObjectList();

foreach ($articles as $article) {
    $questions = [
        "مقاله {$article->title} چیست؟",
        "درباره {$article->title} بگو",
        "{$article->title}"
    ];
    
    foreach ($questions as $q) {
        $db->setQuery(
            $db->getQuery(true)
                ->insert('#__site_knowledge')
                ->columns('question, answer, source_url, category')
                ->values(
                    $db->quote($q) . ', ' .
                    $db->quote($article->introtext) . ', ' .
                    $db->quote('/article/' . $article->alias) . ', ' .
                    $db->quote('article')
                )
        )->execute();
    }
}

این فرآیند را برای صفحات سایت، محصولات (در صورت استفاده از کامپوننت فروشگاهی) و سؤالات متداول نیز تکرار کنید.

گام ۴: ادغام با هوش مصنوعی فارسی (Talkbot.ir)

در سرور، یک سرویس هوشمند برای پردازش سؤالات ایجاد کنید:

<?php
class ChatbotService
{
    public function getResponse($userQuestion)
    {
        // ابتدا در دانش داخلی جستجو کن
        $internal = $this->searchInternal($userQuestion);
        if ($internal) return $internal;

        // اگر پیدا نشد، از هوش مصنوعی کمک بگیر
        return $this->askAI($userQuestion);
    }

    private function searchInternal($question)
    {
        $db = \Joomla\CMS\Factory::getDbo();
        $query = $db->getQuery(true)
            ->select('answer, source_url')
            ->from('#__site_knowledge')
            ->where("MATCH(question) AGAINST (" . $db->quote($question) . " IN NATURAL LANGUAGE MODE)")
            ->setLimit(1);
        $result = $db->setQuery($query)->loadObject();
        
        if ($result) {
            return $result->answer . ' [منبع]';
        }
        return false;
    }

    private function askAI($question)
    {
        $apiKey = 'YOUR_TALKBOT_API_KEY';
        $url = 'https://api.talkbot.ir/v1/chat';
        $data = json_encode(['message' => $question, 'context' => 'فقط درباره سایت balvardi.ir پاسخ بده']);

        $curl = curl_init();
        curl_setopt_array($curl, [
            CURLOPT_URL => $url,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_HTTPHEADER => [
                'Content-Type: application/json',
                'Authorization: Bearer ' . $apiKey
            ],
            CURLOPT_POST => true,
            CURLOPT_POSTFIELDS => $data
        ]);
        $response = curl_exec($curl);
        curl_close($curl);

        $result = json_decode($response, true);
        return $result['response'] ?? 'متأسفم، نمی‌توانم به این سؤال پاسخ دهم.';
    }
}

گام ۵: رابط کاربری چت‌بات با Tailwind CSS و AJAX

یک ماژول ساده برای نمایش چت‌بات در همه‌ی صفحات ایجاد کنید:

<div id="chatbot-container" class="fixed bottom-6 left-6 z-50">
  <button id="chatbot-toggle" class="bg-blue-600 text-white rounded-full w-14 h-14 shadow-lg hover:bg-blue-700 transition">
    💬
  </button>

  <div id="chatbot-window" class="hidden mt-2 w-80 bg-white rounded-xl shadow-xl overflow-hidden">
    <div class="bg-blue-600 text-white p-3 font-bold">دستیار هوشمند</div>
    <div id="chat-messages" class="h-64 overflow-y-auto p-3 bg-gray-50"></div>
    <div class="p-3 border-t">
      <input type="text" id="chat-input" class="w-full px-3 py-2 border rounded-lg" placeholder="سوال خود را بپرسید..." />
      <button id="chat-send" class="mt-2 w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">ارسال</button>
    </div>
  </div>
</div>

<script>
document.getElementById('chatbot-toggle').addEventListener('click', function() {
  const win = document.getElementById('chatbot-window');
  win.classList.toggle('hidden');
});

document.getElementById('chat-send').addEventListener('click', sendMessage);
document.getElementById('chat-input').addEventListener('keypress', function(e) {
  if (e.key === 'Enter') sendMessage();
});

function sendMessage() {
  const input = document.getElementById('chat-input');
  const question = input.value.trim();
  if (!question) return;

  // نمایش سؤال کاربر
  addMessage(question, 'user');
  input.value = '';

  // ارسال به سرور
  fetch('index.php?option=com_chatbot&task=ask&format=json', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ question: question })
  })
  .then(res => res.json())
  .then(data => {
    addMessage(data.response, 'bot');
  });
}

function addMessage(text, sender) {
  const box = document.getElementById('chat-messages');
  const div = document.createElement('div');
  div.className = sender === 'user' ? 'text-right mb-2' : 'text-left mb-2';
  div.innerHTML = `
    <div class="${sender === 'user' ? 'bg-blue-100 text-gray-800' : 'bg-gray-200'} inline-block px-3 py-1 rounded-lg max-w-xs">
      ${text}
    </div>
  `;
  box.appendChild(div);
  box.scrollTop = box.scrollHeight;
}
</script>

گام ۶: امنیت و محدودیت‌های لازم

برای جلوگیری از سوءاستفاده:

• در سرور، تعداد درخواست‌ها را محدود کنید (مثلاً ۱۰ پیام در دقیقه)
• خروجی‌های هوش مصنوعی را با htmlspecialchars فیلتر کنید
• در صورت نیاز، گزینه‌ی «ارتباط با ادمین» را اضافه کنید:

  <button onclick="contactAdmin()">با مدیر سایت صحبت کنید</button>

تجربه‌ی شخصی: چت‌بات برای سایت آموزش خوشنویسی

در سایت شخصی‌ام (balvardi.ir)، چت‌باتی راه‌اندازی کردم که به سؤالاتی مثل «چگونه خط ثلث بنویسم؟» یا «دوره‌های آموزشی چه زمانی شروع می‌شوند؟» پاسخ می‌دهد. این چت‌بات نه‌تنها ترافیک تماس‌های تلفنی را ۶۰٪ کاهش داد، بلکه زمان پاسخ‌دهی به کاربران را به‌صورت نامحدود افزایش داد — حتی در نیمه‌های شب!

جمع‌بندی

یک چت‌بات هوشمند، فقط یک جعبه‌ی چت نیست؛ نماینده‌ی دیجیتالی هوش و دانش سایت شماست. با این روش، شما دیگر نیازی به افزونه‌های گران‌قیمت یا سرویس‌های خارجی ندارید. بلکه چت‌باتی می‌سازید که:

• کاملاً متعلق به شماست
• فقط از سایت شما می‌داند
• با زبان فارسی و فرهنگ ایرانی هماهنگ است
• در هاست‌های ایرانی به‌راحتی اجرا می‌شود

چرا که بهترین دستیار، کسی است که از کارش سردرآورد — و کار شما، همین سایت است.