دیگ

طراحی تجربهٔ AI

دستیار و ایجنت در محصول فقط یک کادر چت نیست. این راهنما شش لحظهٔ هر تعامل با AI را مرور می‌کند و برای هرکدام اصل، کار درست و نادرست، و کامپوننت آمادهٔ دیگ را می‌دهد. ایجنتی که صفحهٔ چت یا دستیار می‌سازد همین قاعده‌ها را از get_page_patterns در MCP دیگ می‌گیرد.

۱. ورودی: کاربر بداند چه می‌تواند بخواهد

کادر خالیِ چت سخت‌ترین نقطهٔ شروع است. توانایی‌های دستیار را همان‌جا نشان بده: ابزارهای قابل‌انتخاب، پیوست، ضبط صدا و چند پیشنهاد آماده.

انجام بده

  • ابزارها و حالت‌ها کنار کادر دیده شوند، نه در منوی پنهان.
  • Enter ارسال کند و Shift+Enter خط تازه بزند؛ در حین پاسخ، دکمهٔ ارسال به «توقف» تبدیل شود.

انجام نده

  • کادرِ بی‌راهنما با فقط «پیام خود را بنویسید».
  • غیرفعال‌کردنِ کادر در تمام مدتِ پاسخ؛ کاربر باید بتواند پیام بعدی را آماده کند.

کامپوننت‌ها: Prompt Input، Voice Recorder

۲. در حال کار: سکوت ممنوع

هر کاری بیش از یک ثانیه طول بکشد باید دیده شود: چه فکر می‌کند، کدام ابزار را صدا زده و چند قدم مانده. شفافیت اعتماد می‌سازد و انتظار را کوتاه‌تر نشان می‌دهد.

انجام بده

  • Thinking برای فکرکردن، Tool Chips برای هر فراخوانی ابزار با وضعیت (در حال اجرا، انجام، خطا).
  • کار چندمرحله‌ای با Task Rows؛ قدمِ جاری مشخص و قدم‌های انجام‌شده تیک‌خورده.

انجام نده

  • اسپینرِ بی‌متن برای کاری که ده ثانیه طول می‌کشد.
  • لاگِ خامِ طولانی؛ جزئیات را پشتِ کلیک ببر.
در حال جستجوی مستندات API پرداخت
بررسی نمونه‌کد اتصال به درگاه
جمع‌بندی و آماده‌سازی پاسخ
خواندنِ قرارداد.pdf
ساختنِ گزارش
ساختِ فهرستِ سفارشِ مجدد۷ کالا

کامپوننت‌ها: Thinking، Tool Chips، Task Rows، Loading State

۳. پاسخ: تدریجی، قابل‌توقف، خوانا

پاسخ را همان‌طور که ساخته می‌شود نشان بده تا کاربر زودتر بخواند و اگر مسیر اشتباه است زود متوقفش کند. پیام‌های کاربر و دستیار باید در یک نگاه از هم جدا باشند.

انجام بده

  • متن با Streaming Text بیاید و دکمهٔ توقف تا پایان در دسترس باشد.
  • کنار هر پاسخ: کپی، تلاش دوباره و بازخورد.

انجام نده

  • نمایشِ کلِ پاسخ یک‌جا بعد از انتظارِ طولانی.
  • حبابِ هم‌رنگ برای کاربر و دستیار.
چطور می‌تونم توی Next.js یه API route برای آپلود فایل بسازم؟
د
یک Route Handler در app/api/upload/route.ts بسازید و request.formData() را بخوانید؛ فایل را از آن استخراج و در دیسک یا یک سرویس ذخیره‌سازی بنویسید.

کامپوننت‌ها: Streaming Text، Chat Message

۴. منبع: بگو از کجا آمده

وقتی پاسخ از اسناد یا داده‌های کاربر ساخته می‌شود، منبعش را کنار پاسخ نشان بده تا کاربر بتواند درستی‌اش را خودش بسنجد. پاسخِ بی‌منبع در کارِ جدی پذیرفته نمی‌شود.

انجام بده

  • هر منبع با نام فایل یا صفحه، نوع و تکه‌ای از متن.
  • تعداد کل منبع‌ها، حتی اگر فقط چندتا نمایش داده شود.

انجام نده

  • ادعای قطعی بدون هیچ ارجاع.
  • لینکِ خامِ طولانی به‌جای کارتِ خوانا.
همهٔ قطعه‌ها۱۲
بند ۷ قرارداد: تمدید خودکار۴۲۰ نویسه

قرارداد پس از پایان دوره، در صورت عدم اعلام کتبی تا ۳۰ روز قبل، برای یک سال دیگر تمدید می‌شود.

قرارداد پشتیبانی ۱۴۰۵.pdf
پرداخت‌های مهر۹۶۰ نویسه

سه پرداخت معوق به مبلغ کل ۱۸٬۴۰۰٬۰۰۰ تومان، قدیمی‌ترین مربوط به ۱۲ مهر.

تراکنش‌های مهر.csv

کامپوننت‌ها: Context Cards

۵. کنترل انسانی: پیش از کار برگشت‌ناپذیر بپرس

ایجنت می‌تواند کار کند، ولی تصمیمِ پرهزینه با انسان است. پیش از پرداخت، حذف، ارسال یا تغییر داده، دقیقاً نشان بده چه چیزی عوض می‌شود و تأیید بگیر.

انجام بده

  • Approval Card با گزینه‌های مشخص و فعل‌محور، نه «بله/خیر».
  • تغییرِ داده با Diff Table: قبل و بعد کنار هم، پیش از اعمال.

انجام نده

  • اجرای کارِ مخرب بی‌پرسش.
  • تأییدِ کلی برای چند کارِ متفاوت در یک کلیک.

چند طعم برای فصل جدید عرضه کنیم؟

۱ / ۳
پسته
وانیل

کامپوننت‌ها: Approval Card، Diff Table، Records Table

۶. پیشنهاد: با دلیل و جایگزین

پیشنهادِ دستیار وقتی پذیرفتنی است که دلیلش گفته شود و راه دیگری هم کنارش باشد. کاربر باید بتواند رد کند بی‌آنکه کارش گیر کند.

انجام بده

  • یک پیشنهادِ اصلی، دلیلِ کوتاه و یک جایگزین.
  • دکمه‌های «اعمال» و «نه، ممنون» هم‌وزن نباشند ولی هر دو دیده شوند.

انجام نده

  • فهرستِ بلندِ پیشنهادهای هم‌وزن.
  • پیشنهادی که بدون اجازه اعمال می‌شود.

می‌خواهی این سفارش را ثبت کنم؟

میزانِ اطمینان۳۸٪
سفارشِ ۵۰ عددی از تامین‌کنندهٔ فعلی.
تامین‌کنندهٔ جایگزین با قیمتِ کمترنیازِ به بررسی

کامپوننت‌ها: Recommendation Card