ChatGPT ilə qarşılıqlı əlaqə: follow‑up‑lar və «vidcet ətrafında dialoqlar»

1. follow‑up-lar ChatGPT App‑də nədir və nə üçün lazımdır

Marketinq yox, «insan» dilində təriflə başlayaq. ChatGPT App kontekstində follow‑up — dialoqun proqramla təşəbbüs edilən növbəti addımıdır. Adətən bu, düymə kimi tərtib olunmuş qısa bir ipucudur: basdıqda o, söhbətdə istifadəçidən gələn yeni mətn mesajına çevrilir və insanla SI arasında ünsiyyət ssenarisinin davamını işə salır.

Modelin baxış bucağından follow‑up — sadəcə daha bir istifadəçi mesajıdır. Heç bir sehr yoxdur: istifadəçi sizin «Daha ucuz variantları göstər» düymənizə klikləyəndə, çat tarixçəsinə «Daha ucuz hədiyyələri göstər»‑ə bənzər bir şey düşür. Model bunu adi istifadəçi ifadəsi kimi görür, system‑promptu və tools təsvirlərini tətbiq edir, hansı aləti çağıracağını qərar verir və ehtimal ki, vidcetinizi yenilənmiş verilənlərlə yenidən render edir.

Bu niyə vacibdir:

• Model mətnlə düşünür. Əgər kliklə birbaşa aləti çağırırsınızsa (mesajsız), sistemin əsas «beynini» yan keçirsiniz və kontekstin bir hissəsini itirirsiniz. Follow‑up söhbətin gedişatını tarixçədə saxlayır və modelə nə baş verdiyini anlamağa kömək edir.
• İstifadəçi tanış çat paradiqmasında qalır: ya mesaj yazır, ya da ipuclarına basır. Follow‑up-lar müasir messencerlərdəki «sürətli cavablar»a (quick replies) bənzəyir.
• Bu, sizin UI ilə ChatGPT‑nin mətn hissəsi arasında əsas körpüdür. Follow‑up-sız vidcet dilsiz bir ada çevrilir: istifadəçi klikləyir, amma sonra nə etməli olduğunu tam anlamır.

Follow‑up-lara sizin tərəfinizdən formalaşdırılmış «SI‑yə növbəti sual» düyməsi kimi baxmaq olar. Aşağıda follow‑up-lara «dəyişiklik üçün daha bir UI‑xüsusiyyəti» kimi yox, vidcet ətrafında dialoqu qurmağın əsas üsulu kimi baxacağıq.

2. «Videt ətrafında dialoq»: conversational sandwich

Follow‑up-ların «vidcet ətrafında dialoq» qurmağa necə kömək etdiyini daha asan görmək üçün dialoqu üç qatlı sendviç kimi təsəvvür etmək faydalıdır:

• yuxarıda vidcetədək ChatGPT mətni (pre‑text),
• ortada sizin vidcetiniz (UI),
• aşağıda follow‑up-lar və sonrakı mesajlar (post‑interaction).

Sxematik olaraq:

sequenceDiagram
    participant U as İstifadəçi
    participant G as ChatGPT
    participant W as Vidcet

    U->>G: "Bacım üçün 100 $-adək hədiyyə seç"
    G->>G: App-ı çağırmağa qərar verir
    G->>U: Pre-text: "İndi GiftGenius-u açıb ideyalar təklif edəcəyəm"
    G->>W: render üçün toolOutput ötürür
    W-->>U: Hədiyyə kartları + follow-up düymələri
    U->>W: "Daha ucuz variantları göstər" klik
    W->>G: sendFollowUpMessage("Daha ucuz hədiyyələri göstər, 50 $-adək")
    G->>G: Modelin yeni gedişi, tools çağırışı
    G->>W: Yeni toolOutput, yenilənmiş vidcet

Pre‑text adətən system‑prompt və kontekstə əsasən modeli tərəfindən tam generasiya olunur: burada o, «indi nə baş verəcəyini» izah edir («İndi hədiyyə seçməyə kömək edən tətbiqi açacağam»). Bu qata nəzarəti daha sonra, təlimatlar modulunda müzakirə edəcəyik.

Vidgets — sizin tanış React komponentinizdir: toolOutput‑u render edir, widgetState istifadə edir, düymələr və seçimlər verir.

Post‑interaction qatı — bu gün məşğul olduğumuz hissədir. Siz follow‑up-lar və mesaj göndərişi vasitəsilə sonrakı marşrutu aydın edirsiniz: «Daha bahalı göstər», «Büdcəni dəyiş», «Seçimi yenidən başla», «Rəsmiləşdirməyə keç».

Sadələşdirsək, follow‑up — dövrəni bağlayan idarəedici replika deməkdir: UI → mətn → yeni UI.

3. Texniki model: klik follow‑up üzrə necə yeni tool‑call‑a çevrilir

«Kapotun altında» hadisələr zəncirinə diqqətlə baxaq. Buna hibrid qarşılıqlı təsir dövrəsi kimi baxmaq rahatdır: klik → API → tarixçədə mətn → modelin yeni qərarı → alətin yeni çağırışı → yenilənmiş UI.

Təxminən belə ardıcıllıq olur:

1. İstifadəçi vidcetinizdə düyməni basır.
2. Vidcet window.openai.sendFollowUpMessage API‑sini və ya React qatında rahat wrapper hook‑u useSendMessage‑i çağırır (aşağıdakı nümunələrdə məhz hook istifadə edəcəyik). Arqument — adi sətir: sanki istifadəçi tərəfindən yazılmış mətn.
3. ChatGPT bu mesajı tarixçəyə yeni user_message kimi əlavə edir.
4. Model yeni keçidi icra edir: əvvəlki toolOutput daxil olmaqla bütün tarixçəni nəzərə alır və aləti çağırıb‑çağırmamağa, hansını və hansı arqumentlərlə çağıracağına qərar verir.
5. Sizin backend/MCP tool‑call‑ı icra edir və toolOutput qaytarır.
6. ChatGPT yeni cavabı göstərir: bəlkə yenə vidcet (yeni verilənlərlə), bəlkə mətn, bəlkə də kombinasiyası.

Vacibdir ki, demək olar ki, heç vaxt vidcetdən modeli yan keçərək onun çağırdığı eyni aləti birbaşa çağırmaq istəmirsiniz. Əks halda model «addımı itirir»: tarixçədə təkrar çağırışı başladan sorğu olmur. Uzun ssenarilərdə bu, kontekstin dolaşıqlaşması ilə nəticələnir.

Qısa formula belədir:

User Click → useSendMessage("...") → ChatGPT (LLM) → Tool Call → New toolOutput → Widget rerender

4. follow‑up-ların növləri və onları kim fikirləşir

follow‑up klikindən sonra «kapotun altında» nə baş verdiyini anladıq. İndi isə istifadəçiyə hansı follow‑up-ları verməyin mənalı olduğunu və ssenaridə hansı rolları oynaya biləcəyini nəzərdən keçirək.

Real App‑də bir neçə «ailə» follow‑up-ı mövcuddur. Mən onları müxtəlif oxlar üzrə bölürəm: statik vs dinamik, rola görə (drill‑down, pivot, commit və s.).

Praktika üçün cədvəl daha rahatdır.

Mənbə baxımından iki böyük qrup var.

Birincisi, proqramın özü təklif etdiyi follow‑up-lardır. Bunlar UI məntiqinə və verilənlərə bağlı bizim vidcet düymələrimizdir: məsələn, «[Hədiyyə adı] ilə oxşarları göstər» və ya «Yalnız travel marağına görə filtr et». Bu ipuclarını sərt şəkildə kodlaşdıra (static) və ya toolOutput əsasında dinamik formalaşdırmaq (dynamic) olar.

İkincisi, ChatGPT‑nin «natıv» ipuclarıdır — mesajın altında modelin özü uydurduğu kiçik çiplər. Siz onları birbaşa idarə etmirsiniz; onlara etibarlı mexanizm deyil, pulsuz bonus kimi yanaşın. Tətbiqiniz onlarsız da işləməlidir.

Bu mühazirədə bizi daha çox birinci qrup maraqlandırır: React komponentinizdə çəkdiyiniz düymələr və ipucları; kliklə sendFollowUpMessage göndərirsiniz.

5. React‑də follow‑up-ların reallaşdırılması: GiftGenius nümunəsi

Hədiyyələr seçən şərti GiftGenius App‑ımıza davam edək. get_gift_ideas aləti çağırıldıqdan sonra vidcet siyahı ilə toolOutput alır. Keçən mövzularda kartlar şəbəkəsini artıq hazırlamışdıq. İndi isə follow‑up bölməsi əlavə edək.

Tutaq ki, SDK‑da useWidgetProps və useSendMessage hook‑larımız var. Adlar şərtidir, amma konsepsiya istinad reallaşdırması ilə eynidir:

import { useWidgetProps, useSendMessage } from '@/openai-apps';

export const GiftSuggestions: React.FC = () => {
  const { toolOutput } = useWidgetProps();
  const sendMessage = useSendMessage();

  const gifts = toolOutput?.data?.gifts ?? [];

  if (gifts.length === 0) {
    return <div>Hədiyyə tapılmadı. Sorğunu dəyişməyə çalışın.</div>;
  }

  const handleCheaper = () => {
    sendMessage('Daha ucuz hədiyyələri göstər, 50 $-adək');
  };

  const handleDigital = () => {
    sendMessage('Yalnız rəqəmsal hədiyyələri göstər: sertifikatlar, abunələr və s.');
  };

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-2 gap-2">
        {gifts.map((gift: any) => (
          <GiftCard key={gift.id} item={gift} />
        ))}
      </div>

      <div className="border-t pt-3 text-sm">
        <div className="text-xs text-gray-500 mb-2">Daha nə etmək olar?</div>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={handleCheaper}
            className="px-3 py-1 rounded-full bg-gray-100 hover:bg-gray-200"
          >
            Daha ucuz
          </button>
          <button
            onClick={handleDigital}
            className="px-3 py-1 rounded-full bg-gray-100 hover:bg-gray-200"
          >
            Yalnız rəqəmsal
          </button>
        </div>
      </div>
    </div>
  );
};

Burada bir neçə məqam vacibdir.

Birincisi, sendMessage sətir alır — bu mətn söhbətdə sanki istifadəçi tərəfindən daxil edilibmiş kimi görünəcək. App‑ınız «daxili» sistem protokolunu təqlid etməməlidir; cümlələri modelin anlayacağı təbii dildə formalaşdırın.

İkincisi, follow‑up bölməsi vizual olaraq ayrılıb (yuxarı sərhəd, xırda «Daha nə etmək olar?» mətni) ki, istifadəçi başa düşsün: bunlar daha çox dialoqun davamıdır, nəinki kartın öz elementləri.

Üçüncüsü, düymələrin sayı azdır — ikidir. UX tövsiyələri təxminən iki‑dörd variant arasında qalmağı məsləhət görür: kömək üçün yetər, amma yükləməz.

Verilənlərə əsaslanan dinamik follow‑up

Tutaq ki, istifadəçiyə konkret hədiyyəyə doğru dərinləşmə imkanı vermək istəyirsiniz: «Bununla oxşarları göstər». O zaman follow‑up mətni lazımi obyektə istinad etməlidir və siz mətni yerində generasiya edə bilərsiniz.

const handleShowSimilar = (giftTitle: string) => {
  sendMessage(
    `«${giftTitle}» ilə oxşar hədiyyələri göstər, eyni büdcədə və ya bir az daha bahalı ola bilər`
  );
};

Kartda isə:

<button
  onClick={() => handleShowSimilar(gift.title)}
  className="mt-2 text-xs text-blue-600 underline"
>
  Oxşarlarını göstər
</button>

Beləliklə, follow‑up-u toolOutput‑dakı konkret verilənlərə bağlayan dinamik yanaşmanı reallaşdırırsınız. Məhz belə düymələr dialoqu «ağıllı» edir, sadəcə «İrəli / Geri» universallığından çıxarır.

6. Niyə mətn göndəririk, aləti birbaşa çağırmırıq

Tipik front‑end düşüncəsi: «Məndə useCallTool var ikən, niyə mətn göndərim? Elə get_gift_ideas‑ı başqa parametrlərlə birbaşa çağıra bilərəm». Bəzən həqiqətən buna ehtiyac olur (vidcetdən alətlərin birbaşa çağırılması haqqında ayrıca modulda danışacağıq), amma defolt olaraq mətni follow‑up kimi göndərmək daha yaxşıdır. Səbəblər praktikdir.

Birincisi, çat tarixçəsi bütöv qalır. Çöldən hər şey elə görünür ki, sanki istifadəçi özü yazıb: «Daha ucuz hədiyyələri göstər». Bir həftə sonra tarixçəni açanda nə baş verdiyini anlayacaq. Əgər hər şeyi birbaşa alət çağırışları ilə etmisinizsə, istifadəçi mesajları arasında səbəbi görünməyən müxtəlif vidcetlər peyda olacaq.

İkincisi, model əlavə qərarlar verə bilər. Məsələn, eyni aləti təkrar çağırmaq əvəzinə əvvəlcə büdcəni dəqiqləşdirməyin daha düzgün olduğunu başa düşə bilər: «Büdcəni 5 $‑a endirmək istədiyinizə əminsiniz? Bəlkə ən azı 20 $ qalsın?» Əgər «klik → eyni alət başqa arqumentlərlə» ssenarisini sərt kodlaşdırırsınızsa, bu kimi çevik ssenarilər mümkün olmur.

Üçüncüsü, model tamamilə başqa bir aləti çağırmaq qərarına gələ bilər. Tutaq ki, istifadəçi «Dəstək ilə əlaqə» düyməsini basdı, sizin system‑prompt isə belə hallarda create_support_ticket çağırmağı, yoxsa get_gift_ideas deyil, öyrədir. Mətn kimi follow‑up modelə başqa alətə keçmək azadlığı verir.

Ona görə 3‑cü modulun praktik qaydası: UI‑də klik zamanı əksər hallarda mətn follow‑up göndəririk, aləti birbaşa çağırmırıq. Birbaşa alət çağırışlarını isə yalnız tarixçəyə yeni istifadəçi addımı lazım olmayan spesifik hallara saxlayırıq.

7. follow‑up-ların və vəziyyətlərin (state) bağlanması: UI və mətni desinxron etməmək

Maraqlı problem: UI «öz həyatı ilə» yaşayır, çat mətni isə öz. Tutaq ki, kliklə vidcet daxilində filtri dəyişirsiniz və eyni vaxtda follow‑up göndərirsiniz. Əgər yalnız UI‑ni yeniləmisinizsə, amma yeni vəziyyəti widgetState vasitəsilə sabitləməmisinizsə, növbəti renderdə ChatGPT köhnə widgetState‑i bərpa edəcək. Nəticədə vidcet yenə köhnə filtrləri göstərəcək, halbuki çat tarixçəsində artıq «daha ucuz» addımı var. Bu, qəribə təcrübədir.

Yaxşı nümunəvi həll: follow‑up klikində eyni vaxtda

1. widgetState‑i yeniləmək,
2. follow‑up mesajı göndərmək.

Nümunə:

import { useWidgetState, useSendMessage } from '@/openai-apps';

type GiftWidgetState = {
  priceFilter?: 'any' | 'cheap' | 'premium';
};

export const GiftFollowups: React.FC = () => {
  const [widgetState, setWidgetState] = useWidgetState<GiftWidgetState>();
  const sendMessage = useSendMessage();

  const handleCheaper = () => {
    setWidgetState({ ...widgetState, priceFilter: 'cheap' });
    sendMessage('Təxminən 50 $-adək daha ucuz hədiyyələri göstər');
  };

  // ...
};

Beləcə həm ChatGPT, həm də UI‑niz filtrin dəyişdiyini bilir. Model sonradan vidceti yenidən yığsa, yenilənmiş widgetState‑i görəcək və məsələn, «Büdcəsi daha münasib olan ideyalar» tipli yeni pre‑text formalaşdıra biləcək.

8. Yaxşı follow‑up-ların layihələndirilməsi

Yaxşı follow‑up — UX uğurunun yarısıdır. O təkcə «gözəl» deyil, istifadəçinin düşünmə enerjisinə qənaət edir.

Monitorunuzun üstünə asmağa dəyən bir neçə praktik prinsip var.

Birincisi, qısalıq. Follow‑up — poema yeri deyil. UI kontekstsiz də anlaşılan bir qısa ifadə adətən idealdır: «Daha ucuz», «Yalnız premium», «Alıcını dəyiş». Əgər daha uzunu lazımdırsa, bəlkə də bu, düymə deyil, adi GPT mətni olmalıdır.

İkincisi, fəaliyyət yönümlülük. Nə baş verəcəyinin aydın olacağı kimi formalaşdırın. «Daha çox ideya» — normaldır. «2‑ci bənd barədə ətraflı» — bunu «İkinci variant barədə daha ətraflı danış» ilə əvəzləmək daha yaxşıdır (belə model UI‑siz də nəyi nəzərdə tutduğunuzu anlayacaq).

Üçüncüsü, ssenarinin davamı, təkrarı deyil. «Hədiyyəni yenidən seç» yerinə «Büdcəni dəyiş» və ya «Alıcının hobbisini dəyiş». Follow‑up istifadəçini irəliyə və ya yana aparmalıdır, səbəbsizcə başlanğıc nöqtəyə qaytarmamalıdır.

Dördüncüsü, məhdud say. Vidcetin aşağısında iki‑dörd düymə demək olar ki, həmişə yetərlidir. On seçimlik panel psixoloji «buffet» effektinə çevrilir: istifadəçi çaşır və heç nəyə basmır.

Nəhayət, tonallığı nəzərə alın. Tətbiq bütövlükdə səmimi ünsiyyət qurursa, «SİFARİŞİ TƏSDİQ ET» kimi caps‑lock düyməsi qəribə görünər. Follow‑up modelin mətni ilə eyni dialoqun bir hissəsidir; stil uyğun olmalıdır.

9. Ümumilikdə «vidcet ətrafında dialoqlar»: kim nəyə cavabdehdir

Vidgetsə «baş qəhrəman», ChatGPT‑yə isə «onun ətrafında çərçivə» kimi baxmayın. Əksinə: dialoqu model aparır, vidcet isə məlumatı göstərməyin və korrektə etməyin yollarından yalnız biridir.

GiftGenius üçün tipik ssenari belədir:

1. İstifadəçi: «IT sahəsində işləyən bacım üçün 100 $‑adək hədiyyə lazımdır».
2. Model: mətndən giriş (pre‑text) — indi GiftGenius‑u açacağını və nə etdiyini izah edir.
3. Vidgets: ideyalar seçimini göstərir, follow‑up-lar verir.
4. İstifadəçi: ya özü mesaj yazır, ya da follow‑up düyməsinə basır (məsələn, «Yalnız rəqəmsal hədiyyələri göstər»).
5. Model: bunu mətn kimi şərh edir, lazım olan tool‑u çağırır, gərəkərsə nəticəni (post‑text) şərh edir və ya vidceti yenidən göstərir.
6. Və beləliklə dövrə davam edir — seçim təsdiqinədək, sifarişədək və s.

Burada follow‑up-lar dövrənin hər döngəsini birləşdirən yapışqandır. Onlarsız istifadəçi vidcetdən sonra havada qalır: hər şey gözəldir, amma «sonra nə» — aydın deyil.

Daha mürəkkəb ssenarilərdə (workflows, agentlər) follow‑up-lar çoxmərhələli huniləri modelləşdirməyə kömək edir: «Əvvəlcə alıcını seç», «İndi büdcəni dəqiqləşdir», «İndi seçimi təsdiqləyək». Amma bu modulda sadəcə bunu görmək vacibdir: hətta ən sadə bir mərhələli App belə, bir‑iki düşünülmüş ipucu ilə xeyli qazanır.

10. Praktika: indi nə etmək olar

Yaxşı möhkəmləndirmə məşqi — mövcud tədris vidcetinizi təkmilləşdirməkdir.

Əgər artıq nəticələr siyahınız varsa (məsələn, hədiyyələr, otellər və ya sənədlər), onun altına kiçik «Sonra nə?» bloku əlavə edin; iki‑üç düymə ilə. Bu düymələrin yuxarıdakı cədvəldəki tiplərə uyğun olmasına çalışın: biri dəqiqləşdirən (drill‑down, məsələn, «Daha ucuz»), biri yön dəyişdirən (pivot, «Alıcını dəyiş»), üçüncüsü isə ehtiyac varsa naviqasiya (navigation, «Rəsmiləşdirməyə keç»).

Klik emalçıları daxilində useSendMessage‑i mənalı, təbii dildə mətnlə çağırın, lazım gələrsə widgetState‑i yeniləməyi unutmayın. Sonra ssenarini ChatGPT‑də yenidən işə salın və dialoq necə görünür — vidcetdən sonra nə etmək lazım gəldiyi nə dərəcədə aydınlaşıb — baxın.

Həm də qəsdən pis follow‑up-lar hazırlamağa çalışın: uzun, məchul, onlarla variantla — və hissləri müqayisə edin. Fərqi üzərinizdə tez duymağın sürətli yoludur.

11. follow‑up-larla işləyərkən tipik səhvlər

Səhv №1: «Səssiz» vidcet.
Tərtibatçı əla UI hazırlayır, amma heç bir follow‑up vermir. İstifadəçi kartları görür, «yaxşıdır» düşünür, sonra isə məsələn «Daha ucuz göstər» və ya «Alıcını dəyiş» demək olar, bunu özü anlamağa məcbur qalır. İnsanların çoxu bunu anlamır və çıxıb gedir. Vidcetin altında «sonra nə» üçün ən azı bir‑iki ipucu bu problemi həll edir.

Səhv №2: Həddən artıq çox düymə.
Əks hədd — istifadəçini onlarla variantla spam etmək: «Büdcəni dəyiş», «Maraqları dəyiş», «Valyutanı dəyiş», «Seçimi yadda saxla», «Dostunla paylaş», «Oxşarları göstər», «Dəstəyə yaz» və s. Psixoloji «buffet» yaranır, seçim etmək çətinləşir. İki‑üç ən çox istifadə olunan hərəkətlə başlamaq daha yaxşıdır, qalanını isə modelə və adi mətnə buraxın.

Səhv №3: Dialoq məntiqi yalnız front‑end‑də.
Bəzən «optimallaşdırmağa» çalışaraq follow‑up‑u useSendMessage (və ya aşağı səviyyəli sendFollowUpMessage) vasitəsilə göndərmək əvəzinə eyni aləti vidcetdən birbaşa çağırıb yalnız UI‑ni yeniləyirlər. Çat tarixçəsində isə baş verənlərlə bağlı bir söz olmur. Bir neçə addımdan sonra model qarışır, siz də onunla birgə. Düzgün yol: dialoq məntiqini mətn və alətlər səviyyəsində saxlamaq, vidceti isə nazik UI qatı kimi istifadə etməkdir.

Səhv №4: Qeyri‑aydın və ya iki mənalı formulyar.
Kontekstsiz «Daha» düyməsi istənilən şeyi ifadə edə bilər: daha çox hədiyyə, daha çox mətn, daha çox pul? Eyni şəkildə «Yenidən hesabla» və ya «Yenidən yığ» kimi formulyarlar model və istifadəçi üçün aydın deyil. Ən yaxşı follow‑up-lar konkretdir: «Bu büdcədə daha çox variant göstər», «Yalnız rəqəmsal hədiyyələri göstər».

Səhv №5: Desinxron UI və mətn.
Klassika: «Daha ucuz» düyməsinə kliklə UI‑də filtri yeniləmisiniz, amma çata follow‑up göndərməmisiniz və ya widgetState‑i yeniləməmisiniz. Nəticədə tarixçədə büdcə dəyişikliyi addımı yoxdur, növbəti renderdə filtr «geri qayıdır». «Sınmış» interfeys hissi yaranır. Mətnlə UI‑nin addımlamasını uyğun saxlamaq üçün setWidgetState + sendMessage kombinasiya­sından istifadə edin.

Səhv №6: ChatGPT‑nin «natıv» ipuclarına nəzarət etmə cəhdi.
Bəzən tərtibatçılar, guya ChatGPT mesajın altında lazım olan follow‑up çiplərini özü generasiya edəcək deyə, öz ipuclarını əlavə etmirlər. Amma bu ipucları nə zəmanətlidir, nə də tətbiq tərəfindən idarə olunur. Onlara xoş bonus kimi baxın, amma həmişə vidcetdə öz, kritik əhəmiyyətli follow‑up düymələrinizi verin.