الدور: هندسة مكدس كامل (إنشاء النظام بأكمله من الصفر بما في ذلك البنية، واجهات برمجة التطبيقات الخلفية، إدارة الحالة، واجهة المستخدم وتجربة المستخدم، والدمج الصوتي)
الملخص: نظام دردشة مدمج بعمق (V2) لمحفظة: السايبربانك، مبني كتطور هائل عن الروبوت الأصلي V1 (محفظة: زجاج). يحاكي محطة ذكاء اصطناعي مستقلة باسم "Oz" تتميز بالدبلجة الحية، تنفيذ أدوات MCP الديناميكية عبر مؤشرات ToolBadge، أوامر النظام، وإدارة دقيقة لحدود السياق النشط. يعمل كوكيل مستقل بالكامل يمثل فرانتس.
المشكلة
التحدي: تطلبت محفظة السايبربانك روبوت دردشة يبدو وكأنه محطة مدمجة أو مساعد ذكاء اصطناعي بدلاً من كونه مجرد أداة إضافية. على عكس الروبوت السابق V1 الذي كان واجهة محادثة قياسية، احتاج هذا الإصدار لمعالجة أوامر متعددة على مستوى النظام، وعرض طلبات أدوات الذكاء الاصطناعي (مثل التنقل أو تشغيل الموسيقى) بشكل مرئي، وتشغيل الدبلجة المتزامنة دون تداخل صوتي، والتعامل مع نوافذ السياق بكفاءة.
الجمهور: مسؤولو التوظيف التقنيين، المطورون، والزوار الذين يستكشفون المحفظة.
القيود: إدارة حالة معقدة تتضمن تشغيل الصوت، التغيرات في التخطيط، كتابة المستخدم، تقديم طلبات أدوات غير متزامنة، وقيود واجهة برمجة التطبيقات (معالجة حدود الرموز) تطلبت تخطيطاً معمارياً دقيقاً دون المساس بالرسوم المتحركة بسلاسة 60 إطارًا في الثانية.
النهج والقرارات
البنية: تم فصل المكونات إلى ميزات نموذجية: ChatHeader, ChatInput, ChatMessage, ChatHistory, DubPopup, و ToolBadge. تم استخدام useChatbotAudio لتنسيق الأصوات بأمان لتجنب الإزعاج.
القرارات الرئيسية:
تنفيذ الأوامر (ToolBadge): لجعل إجراءات الذكاء الاصطناعي مرئية وشفافة، قمت بإنشاء مكون ToolBadge. عندما ينفذ الذكاء الاصطناعي أداة MCP (مثل تبديل الموسيقى، تنزيل السيرة الذاتية، تغيير السمة، أو ترجمة الموقع)، تسقط شارة محطة متحركة أنيقة في الدردشة لتفصيل الإجراء. هذا يفصل أساسًا النص العادي عن عمليات النظام.
الهوية والسلوك المستقل: يعمل الذكاء الاصطناعي تحت شخصية "Oz"، كمساعد ذكاء اصطناعي محترف. يعالج عمليات سير العمل المعقدة ديناميكيًا مثل استعلامات التسعير (عرض جداول التسعير الداخلية المخفية) وتوجيه نموذج الاتصال (حيث يقوم Oz بصياغة رسائل البريد الإلكتروني للمستخدمين ولكنه يجبرهم على المرور عبر حلقة مراجعة واعتماد صارمة في واجهة المستخدم).
محرك LLM والبنية الاحتياطية: تم بناء سلسلة احتياطية قوية للواجهة الخلفية. يعالج ما يصل إلى مليون رمز سياقي أصليًا ببنية اهتمام هجينة لدعم الاحتفاظ بالسياق الطويل. تتدرج الاستعلامات بمرونة من النماذج السريعة الأولية إلى الشبكات الثانوية القوية إذا حدثت قيود على المعدل أو انقطاعات مؤقتة.
إدارة RAG والسياق: يستخدم RAG (query_portfolio_data) لجلب دراسات حالة MDX بأكملها عندما يطرح المستخدمون أسئلة فنية عميقة. تسقط نافذة التمرير التكيفية أقدم الرسائل عند الوصول إلى 90-98% من سعة السياق.
تأمين الإشراف: تم تنفيذ نظام lockdown آلي حيث يمكن لـ Oz حظر المستخدمين مؤقتًا (فترات قصيرة أو متوسطة أو طويلة) بسبب اللغة المسيئة أو البريد العشوائي، وهو متزامن بالكامل مع ملفات تعريف الارتباط من جانب الخادم.
التنازلات: بدلاً من استخدام Redux لإدارة الحالة المعقدة، اعتمدت على React Context و useSyncExternalStore لإدارة الحالة الموضعية، مما أدى إلى تحسين حجم الحزمة ولكنه تطلب تصميمًا دقيقًا للخطافات (hooks) لمنع عمليات إعادة التصيير (re-renders) غير الضرورية.
النتائج الرئيسية والأثر
النتيجة: مساعد مذهل وعالي الأداء يعزز قصة السايبربانك بينما يقدم فائدة حقيقية (مثل الإجابة على الأسئلة، التحكم في الموسيقى، وعرض المهارات).
الأثر: يعرض أنماط Next.js المتقدمة، ودمج النظام عبر MCP، والخطافات المخصصة، والتنسيق الدقيق بين الصوت والصورة.
المقياس
النتيجة
الأداء
مُحسّن عبر التحميل الكسول والمراجع (refs) الصارمة
التفاعل
الصوت، تنفيذ الأدوات، أوامر المحطة
المرونة
تتبع حجم السياق الحي والكشف عن تراجع أداء واجهة برمجة التطبيقات
غوص تقني أعمق
تفاصيل بارزة:
يتتبع التشخيصات الحية (وقت الاستجابة ذهابًا وإيابًا، النماذج النشطة، الرموز) مباشرة في واجهة المستخدم.
مؤشر الأدوات: يتم تشغيل مكون ToolBadge.tsx في كل مرة يعيد فيها الذكاء الاصطناعي كائن action بدلاً من مجرد نص. يقوم بتحليل معلمات الأداة (مثل { type: "toggle_theme", theme: "dark" }) ويعرض شارة مستقبلية متوهجة تلخص المهمة المنفذة داخل موجز الدردشة.
TypewriterMarkdown مخصص لعرض Markdown بأمان مع تأثير آلة كاتبة يشبه الهاكرز.
يعكس متخيل DubPopup حالات "تحدث الذكاء الاصطناعي" بشكل غير متزامن بناءً على إجراءات واجهة برمجة التطبيقات (API).
التحقق: تم بناء قيود قوية (حالات الحظر، وحماية البريد العشوائي) للتعامل بأمان مع الاستخدام المسيء أو تحديد المعدل، مما يعكس تكوينات الخادم مباشرة في واجهة المستخدم.
جودة الكود: استخدام مكثف لواجهات TypeScript مثل ToolDetail و ChatSession، وفحوصات صارمة للمراجع والتفاعلات المرئية.
انعكاسات
بشكل مختلف: ربما كنت سأفصل محرك مشغل الصوت في عامل عام (worker) للتخلص تمامًا من أي تقطعات في السلسلة الرئيسية (main thread) عند فك تشفير الملفات الصوتية الطويلة على الأجهزة المحمولة.
النجاحات: ربط سياق useMusicPlayer بسلاسة مع أوامر الذكاء الاصطناعي حتى يتمكن المساعد حقًا من "العمل" داخل الموقع، متجاوزًا الحدود بين الدردشة وتصفح الموقع.
الدروس: تتطلب الموازنة بين تأثيرات السايبربانك "الرائعة" (الآلة الكاتبة، الأدوات المشوشة) وسهولة الوصول اختبارًا مستمرًا. يعتمد تصميم نوافذ الدردشة العائمة المتوافقة مع الأجهزة المحمولة مع تحديد المواقع الثابتة وقفل التمرير بشكل كبير على سلوكيات المتصفحات المختلفة.
مساهماتي
هندسة النظام: تصميم محرك حالة الدردشة، ومنطق الاستعلام للتشخيصات الحية، وتاريخ تخزين الجلسة.
الهندسة الصوتية: برمجة خطافات الدبلجة المستندة إلى التسلسل والمؤثرات الصوتية (useChatbotAudio).
واجهة المستخدم وتجربة المستخدم: تنسيق المكونات (ChatSettings, ChatInput) باستخدام Tailwind و Framer Motion للحصول على مظهر محطة حقيقي.
الدمج: تعيين مخرجات الذكاء الاصطناعي إلى أدوات قابلة للتنفيذ (ToolBadge) تؤثر على التطبيق الأوسع (مثل تغيير اللغة، تنزيل السيرة الذاتية، تبديل السمة).
بنية المشروع
يقوم دليل components/chatbot/ بتنسيق منطق المساعد:
المحرك الأساسي: يعمل Chatbot.tsx كوحدة تحكم رئيسية.
