🚀 Birinchi vidjet

Bu yo‘riqnomada buyurtma holatini ko‘rsatadigan kichik vidjet tuzamiz, uni agentga ulaymiz va sinov maydonida tekshiramiz. Taxminan 10 daqiqa.

1️⃣ Vidjetlar sahifasini oching

Loyihani tanlang va yon menyudan Konstruktor → Vidjetlar ga o‘ting. Sahifada ikki bo‘lim bor:

• Mening vidjetlarim — saqlangan vidjetlar.
• Vidjet yaratish — tayyor shablonlar galereyasi.

2️⃣ Shablondan boshlang

Vidjet yaratish bo‘limida shablon kartochkasini bosing — dialogda jonli ko‘rinishi va tavsifi chiqadi, so‘ng Shablondan foydalanish tugmasini bosing. Bo‘sh varaqdan boshlash uchun sahifa yuqorisidagi Maxsus vidjet tugmasidan foydalaning.

Tayyor shablonlar: Hotel booking, Order list, Lifecycle, Lead form, Analytics.

3️⃣ Ko‘rinishni yozing (Code)

Code yorlig‘iga JSX yozasiz. O‘ng tarafdagi ko‘rinish har bir tugmachadan keyin yangilanadi:

<Card gap={3}>
  <Row align="center" gap={2}>
    <Title value={order.title} size="lg" />
    <Spacer />
    <Badge label={order.status} color="info" />
  </Row>
  <Text value={order.eta} color="secondary" size="sm" />
  <Button label="Kuzatish" onClickAction={{ functionName: 'track' }} block />
</Card>

4️⃣ Sxemani belgilang (Schema)

Pastki panelning Schema yorlig‘ida agent to‘ldiradigan maydonlarni yozing:

{
  "type": "object",
  "properties": {
    "order": {
      "type": "object",
      "properties": {
        "title":  { "type": "string" },
        "status": { "type": "string" },
        "eta":    { "type": "string" }
      },
      "required": ["title", "status"]
    }
  },
  "required": ["order"]
}

Ma’lumotni avval yozib, keyin Infer from data tugmasini bossangiz, sxema avtomatik tuziladi.

5️⃣ Namuna ma’lumot qo‘shing (Default)

Default yorlig‘i faqat muharrirdagi ko‘rinish uchun:

{
  "order": {
    "title": "Buyurtma #10241",
    "status": "Yo‘lda",
    "eta": "12-avgustda yetkaziladi"
  }
}

+ tugmasi joriy ma’lumotni Example 1 sifatida saqlaydi — turli holatlarni sinash uchun qulay.

6️⃣ Funksiya qo‘shing

Functions yorlig‘ida track nomli funksiya yarating. Eng oddiy variant — send_message: tugma bosilganda suhbatga xabar yuboriladi. API chaqirish uchun call_api ni tanlang.

7️⃣ Saqlang va agentga ulang

• Muharrir yuqorisidagi nomni yozing va Saqlash ni bosing.
• Konstruktor → Funksiyalar ga o‘ting, Funksiya qo‘shish ni bosing.
• Amal maydonida Vidjet ko‘rsatish ni tanlang va vidjetingizni ko‘rsating.
• Funksiya nomi va tavsifini yozing — agent aynan shu tavsifga qarab funksiyani chaqiradi.
• Funksiyani agentga biriktiring.

✅ Tekshirish

Sinov maydoni ga o‘ting va funksiya tavsifiga mos savol yozing (masalan “Buyurtmam qayerda?”). Agent funksiyani chaqiradi va vidjet suhbatda chiziladi. Tugmani bosib, funksiya ishlashini ham tekshiring.

➡️ Keyingi qadam

• Muharrir imkoniyatlari
• Funksiyalar
• Holatlar (States)