إنتقل إلى المحتوى الرئيسي

الدردشة

Kaleidr Chat لوحة محادثة تضيفها إلى صفحة تعرض خريطة بالفعل. يكتب الزائر سؤالًا («أين يمكنني تناول الإفطار بالقرب من متحف تيت مودرن؟»)، فتظهر الإجابة تدريجيًا في اللوحة، وتظهر الأماكن المذكورة فيها كدبابيس على خريطتك أنت بينما تتحرك الكاميرا لإظهارها.

تعمل اللوحة داخل صفحتك لا داخل iframe. تحمّل برنامجًا نصيًا واحدًا، ثم تستدعي Kaleidr.mount مع مفتاحك القابل للنشر وكائن الخريطة النشط، فترتبط اللوحة بخريطتك. وتحتفظ بمكتبة الخرائط والنمط والطبقات وعناصر التحكم الخاصة بك.

ما يختبره الزائر​

  1. يظهر شريط إدخال يحمل عبارة Ask Kaleidr في الزاوية العلوية اليسرى من الخريطة.
  2. يرسل الزائر سؤالًا، فيتوسع الشريط إلى نافذة دردشة وتظهر الإجابة كنص متدفق.
  3. يتحول كل مكان مذكور في الإجابة إلى بطاقة نتائج في الدردشة ودبوس على الخريطة. إذا كان مكانًا واحدًا تنتقل الكاميرا إليه، وإذا كانت أماكن متعددة تضبط مجال الرؤية ليشملها جميعًا.
  4. يؤدي النقر على دبوس أو نتيجة إلى فتح بطاقة مكان تتضمن نبذة وصورًا واتجاهات وحقلًا لسؤال متابعة بشأن المكان.
  5. يؤدي طلب الاتجاهات إلى رسم خط مسار على الخريطة وضبط إطار العرض عليه.
  6. تبقى دبابيس الأسئلة السابقة على الخريطة طوال بقية المحادثة على كل الخرائط المدعومة وعلى عناصر Viewer أو Tile من Kaleidr. ويؤدي إغلاق نافذة الدردشة إلى إنهاء المحادثة وإزالة دبابيسها ومسارها.

عندما يبلغ عرض نافذة العرض 768 px أو أقل، تظهر اللوحة على هيئة ورقة سفلية بدلًا من نافذة عائمة.

ما تفعله بخريطتك​

ما تفعلهما لا تفعله
إضافة دبابيسها الخاصة وإزالتهاقراءة طبقاتك أو مصادرك أو علاماتك أو تغييرها أو إزالتها
تحريك الكاميرا إلى مكان أو ضبطها لاحتواء عدة أماكنإرسال طبقاتك أو علاماتك أو المنطقة المرئية إلى Kaleidr
رسم خط مسار ثم إزالتهاستدعاء كودك عند وقوع حدث
قراءة مستوى التكبير الحالي وإرساله مع كل سؤال. وفي Mapbox GL JS وMapLibre GL JS تقرأ أيضًا الكاميرا وخط تسميات النمط داخل الصفحة فقط لوضع دبابيسها وتسميتهاالسيطرة على أدوات التحكم في خريطتك أو إيماءاتها

يختلف السلوك الدقيق قليلًا حسب مكتبة الخرائط لأن لكل مكتبة وظائف مختلفة للكاميرا والرسم. يعرض الخرائط المدعومة مصفوفة المقارنة، وتسرد الإمكانات والحدود كل طلب تجريه اللوحة والبيانات التي يتضمنها.

المتطلبات​

المتطلبالقيمة
الخطةFree أو أعلى. تستهلك الأسئلة أرصدة الذكاء الاصطناعي الخاصة بمؤسستك.
المفتاحمفتاح قابل للنشر kld_pk_live_… من kaleidr.com/api-keys.
النطاقai، ويتضمنه كل مفتاح جديد افتراضيًا.
الأصل المسموحإذا حدد المفتاح أصولًا مسموحة، فيجب أن يكون أصل الصفحة ضمنها.
مكتبة الخرائطMapbox GL JS أو MapLibre GL JS أو Google Maps JavaScript API أو Leaflet، محمّلة كمتغير عام للصفحة قبل التثبيت.
الصفحةتُقدَّم عبر HTTP أو HTTPS. الملف المفتوح من القرص لا يملك أصلًا صالحًا للاستخدام.
سياسة أمان المحتوىإذا كانت لموقعك سياسة كهذه، فاسمح بالمضيفين الواردين في سياسة أمان المحتوى.

يشرح الحصول على مفتاح API إنشاء المفتاح وضبط الأصول المسموحة له.

ثلاث طرق لتشغيله​

ما لديكما تمررهالنتيجة
خريطتك الخاصة من Mapbox أو MapLibre أو Google أو LeafletpublishableKey وmapتتحكم اللوحة في خريطتك. وهذه الحالة الأكثر شيوعًا.
خريطة منشورة من Kaleidr Studioلا شيء: ضمّن الخريطة مع تفعيل Control Tower في لوحة Kaleidr AI الخاصة بهاتحمل الخريطة اللوحة، ويتحمل مالك الخريطة تكلفة الأسئلة. راجع Kaleidr AI على خريطة منشورة.
لا توجد خريطةpublishableKey فقطلوحة دردشة فقط: إجابات وبطاقات أماكن بلا دبابيس ولا تحركات للكاميرا.

أبسط صفحة تعمل​

تعرض هذه الصفحة خريطة MapLibre مع لوحة دردشة مثبتة داخلها. استبدل المفتاح واحفظ الملف وقدّمه من أصل يسمح به المفتاح، مثل http://localhost:8080.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Kaleidr Chat on MapLibre</title>
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.css" />
  </head>
  <body>
    <div id="mapHost" style="position:relative; height:520px">
      <div id="map" style="position:absolute; inset:0; z-index:0"></div>
      <div id="chat" style="position:absolute; inset:0; z-index:1; pointer-events:none"></div>
    </div>

    <script src="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.js"></script>
    <script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
    <script>
      const map = new maplibregl.Map({
        container: 'map',
        style: 'https://demotiles.maplibre.org/style.json',
        center: [-0.12, 51.5],
        zoom: 11,
      });

      Kaleidr.mount('#chat', {
        product: 'chat',
        publishableKey: 'kld_pk_live_…',
        map,
        contained: true,
      });
    </script>
  </body>
</html>

يثبّت contained: true اللوحة داخل #chat. وبدونه تظهر اللوحة كنافذة ثابتة أعلى يسار نافذة المتصفح، بغض النظر عن موضع الخريطة في الصفحة. يشرح المظهر والتخطيط كلا التخطيطين.

ما لا تفعله​

اشرح هذه الحدود لفريقك قبل البناء على اللوحة:

  • لا توجد استدعاءات راجعة أو أحداث. لن يتلقى كودك إشعارًا عندما يسأل زائر أو تصل إجابة أو يُنقر دبوس.
  • لا يمكن تمرير سياقك الخاص. لا يمكنك تزويد المساعد بتعليمات النظام أو شخصية أو قائمة متاجرك أو محتويات الطبقات عبر اللوحة. الإجابة باستخدام بيانات مؤسستك المرفوعة ميزة منفصلة مرتبطة بالخطة؛ راجع بياناتك.
  • لا يوجد SDK أصلي للجوال. اللوحة مخصصة لصفحات الويب.

يمكنك ضبط لغة الإجابات وعنوان ترويسة اللوحة ونص العنصر النائب في حقل الإدخال باستخدام الخيارات lang وtitle وplaceholder. وإذا لم تحدد lang تستخدم اللوحة <html lang> الخاص بصفحتك. راجع مرجع الدردشة.

توجد القائمة الكاملة في الإمكانات والحدود. وإذا احتجت إلى تحكم كامل في المحادثة والواجهة، فاتصل بواجهة HTTP API من خادمك الخلفي بدلًا من ذلك: راجع البدء السريع للخادم.

الخطوات التالية​