شاد/واجهة المستخدم: أساسيات المحادثة: بناء واجهات محادثة جاهزة للإنتاج بسرعة فائقة

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

أصبح لعالم الواجهات الأمامية مركز جاذبية جديد لواجهات المحادثة، وهو يبدو تمامًا مثل فلسفة التركيب والنسخ واللصق التي اعتدنا الاعتماد عليها. إن إطلاق أساسيات المحادثة المخصصة من شاد/واجهة المستخدم ليس مجرد إضافة مكونات أخرى؛ بل هو استجابة للطلب المتزايد على واجهات الدردشة والوكيل المتماسكة في تطبيقات الويب الحديثة. بالنسبة للمطورين الذين يتصارعون مع تعقيد تدفق الرموز، وإدارة حالات الرسائل، وبناء نوافذ محادثة جميلة وسهلة الوصول، يوفر هذا الإطلاق أساسًا موحدًا وعالي الجودة يبدو بديهيًا مثل كتابة فئات Tailwind.

نشهد حاليًا شيئًا تاريخيًا: عصر "هندسة التمرير" لتطوير واجهات الذكاء الاصطناعي يفسح المجال لهندسة معيارية ومبسطة قائمة على المكونات. كما لاحظ أحد خبراء الصناعة، "إله واجهة المستخدم على الإنترنت، شاد، أصدر للتو مكونات واجهة محادثة جديدة." هذا التحرك يؤدي فعليًا إلى إضفاء الطابع الديمقراطي على أنماط المحادثة المصقولة وعالية الأداء التي كانت تُرى سابقًا فقط في المنتجات الراقية مثل ChatGPT أو Claude، مما يجعلها متاحة لأي مشروع بنسخ ولصق بسيط.

تشريح أساسيات المحادثة من شاد

يكمن جمال هذا الإصدار في تركيزه الجراحي. إنه لا يحاول أن يكون حزمة محادثة متجانسة تحبسك في مزود خلفية أو ذكاء اصطناعي معين. بدلاً من ذلك، يعكس الطبيعة غير الرأسية والقابلة للتركيب لمكتبة شاد/واجهة المستخدم الأساسية، ويقدم أساسيات تتعامل مع الجوانب الصعبة بشكل ملحوظ لواجهة محادثة بينما تترك منطق الأعمال ورموز التصميم بالكامل تحت سيطرتك.

الأساسيات الأساسية لعصر الوكيل

تقدم الحزمة عدة لبنات بناء رئيسية، مصممة بدقة للعمل معًا:

• **إدارة الخيوط والرسائل:**مكونات تتعامل بأناقة مع إنشاء وحذف وتفرع خيوط المحادثة. هذا أمر بالغ الأهمية لتفاعلات الذكاء الاصطناعي الحديثة حيث قد يرغب المستخدمون في تعديل رسالة سابقة وإعادة توليد رد. -**مؤشرات التدفق والكتابة:**ربما يكون عنصر تجربة المستخدم الأكثر أهمية في محادثة الذكاء الاصطناعي. توفر المكتبة دعمًا من الدرجة الأولى لتدفق استجابات Markdown، مع رسوم متحركة ذكية تحاكي أنماط الكتابة الطبيعية بدلاً من العرض الفوري والمفاجئ للكتل. -**تعديل الرسائل وإعادة التوليد:**أساسيات تعرض سير عمل "التعديل وإعادة المحاولة" بشكل أصلي، مما يسمح للمستخدمين بتعديل مطالباتهم وإعادة تشغيل التوليدات دون مغادرة تدفق المحادثة. -مقابض المرفقات والإشارات: لبنات بناء للمرفقات ومعاينات الصور وإمكانيات الإشارة بـ @، وهي ضرورية لأدوات المساعدة البرمجية وأدوات الذكاء الاصطناعي التعاونية.

لاحظ التدفق والجزر المتعمد الشبيه بالبشر في العرض. هذا ليس جماليًا فقط؛ بل يقلل بشكل كبير من زمن الوصول المتصور للمستخدم النهائي، مما يجعل التفاعل يبدو سلسًا وطبيعيًا. تقوم أساسيات شاد بتضمين هذا الفارق السلوكي مباشرة في دورة حياة المكون، لذا لا يتعين عليك تنسيق رسوم CSS المتحركة أو مؤقتات JavaScript يدويًا.

واجهة محادثة هي تخصص متميز في هندسة واجهة المستخدم، فهي تجمع بين متطلبات الأنظمة في الوقت الفعلي مع صقل التطبيقات الاستهلاكية. تسد أساسيات المحادثة الجديدة من شاد الفجوة بين بيانات WebSocket الخام وتجربة مستخدم مصقولة، تمامًا كما سدت شاد/واجهة المستخدم الفجوة بين Tailwind ونظام تصميم كامل.

لماذا الآن؟ صعود الأنظمة الوكيلة ومتعددة الوكلاء

توقيت هذا الإطلاق ليس مصادفة. نحن ننتقل من روبوتات المحادثة البسيطة القائمة على الاستجابة للمطالبات إلى أنظمة وكيلة معقدة حيث تتعاون وكلاء ذكاء اصطناعي متعددون في مساحة عمل مشتركة. تشمل الاختراقات الحديثة جلسات Claude Code التي تتواصل مع بعضها البعض، وتمرير الملخصات بدلاً من سياقات التاريخ الخام، والأطر التي تتيح لك "تحديد الجداول والعلاقات والتفرد والقيود... لتطبيقات الويب وتطبيقات الجوال ولوحات الإدارة والأتمتة ووكلاء الذكاء الاصطناعي."

طبقة واجهة المستخدم لمثل هذه التفاعلات أكثر تعقيدًا بشكل كبير. تخيل خيط محادثة واحد مع منطق متفرع حيث يتدخل وكلاء متعددون، ويقوم مستخدم بتعديل قرار وكيل، وتعيد المحادثة بأكملها التدفق. بناء ذلك من الصفر يتطلب حلاً لإدارة الحالة ينافس محررًا تعاونيًا كاملاً مثل Google Docs. تحل أساسيات المحادثة هذه المشكلة عن طريق تجريد حالات الرسائل والمنطق المتفرع إلى هياكل بيانات غير قابلة للتغيير ويمكن التنبؤ بها والتي تتصل بسلاسة بدورة عرض React.

نحن نترك وراءنا عصر المطالبة الواحدة والاستجابة الواحدة. تم تصميم أساسيات شاد الجديدة لمستقبل حيث تتشابك التفاعلات بين الإنسان والآلة والآلة والآلة بشكل غير متزامن.

الغوص الفني العميق: دورة حياة التدفق

دعنا ندخل في الكود. تكمن عبقرية هذا النظام في كيفية تعامله مع الطبيعة غير المتزامنة والمجزأة لاستجابات LLM. يتضمن التكامل النموذجي إنشاء سياق Chat يستهلك واجهة برمجة تطبيقات تدفق، لكن أساسيات شاد توفر واجهة محددة الأنواع وقابلة للتوسع لذلك التدفق.

التعامل مع التدفقات باستخدام useChatStream

بدلاً من ربطك بحزمة ذكاء اصطناعي معينة، تقدم المكتبة خطافًا غير مرتبط بمزود. تقوم بتوفير دالة تجلب تدفقًا، ويعيد الخطاف كائن حالة رسالة موحد، مع حالات التحميل والخطأ، وref للتمرير التلقائي.

import { useChatStream } from "@shadcn/chat"

function MyAgentChat() {
  const { messages, input, setInput, submit, isLoading } = useChatStream({
    streamProvider: async (message) => {
      // Your custom fetch logic to an AI backend, Vercel AI SDK, or LangChain.
      const response = await fetch("/api/agent", {
        method: "POST",
        body: JSON.stringify({ prompt: message }),
      })
      return response.body
    },
  })

  return (
    }
    />
  )
}

هذا الفصل أمر بالغ الأهمية. يعني أنه يمكنك تبديل الخلفية الخاصة بك من OpenAI إلى Gemini إلى نموذج Ollama محلي دون لمس سطر واحد من كود واجهة المستخدم. تتفاعل واجهة المستخدم ببساطة مع تدفق كائنات Message، يحتوي كل منها على سلسلة content، وrole تعداد (user، assistant، system، agent)، وid فريد لدعم التفرع.

عرض Markdown والأمان

يعد تدفق Markdown مصدرًا شائعًا للأخطاء والثغرات الأمنية. تشحن الأساسيات مع عارض Markdown مدمج ومعزز تدريجيًا يدعم تمييز الصياغة عبر Shiki والجداول والحواشي السفلية المضمنة، كل ذلك أثناء تنظيف المخرجات ضد XSS. يتم تجميع العرض بذكاء: تنتظر كتل الكود والجداول المعقدة حتى يتم اكتشاف فاصل إغلاق قبل تحليلها، مما يمنع الوميض والحالات الوسيطة المشوهة التي تصيب العديد من التطبيقات المخصصة.

يسلط هذا المخطط الضوء على ميزة رئيسية: تستخدم أساسيات المحادثة بنية معيارية قابلة للاهتزاز الشجري. تقوم باستيراد المكونات التي تستخدمها فقط، مما يحافظ على حزمة الإنتاج الخاصة بك خفيفة على الرغم من ثراء الميزات. نظرًا لأن شاد/واجهة المستخدم نفسها عبارة عن مجموعة من ملفات المصدر القابلة للنسخ واللصق، فلديك القوة المطلقة لتعديل أو حذف أو تحسين أي أساسية على مستوى الكود.

بناء لوحة تحكم متعددة الوكلاء في دقائق

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

// Integrating a chat primitive into an admin panel
import { ChatPanel, AgentMessage } from "@shadcn/chat"

function AdminDashboard() {
  const { messages, sendMessage } = useAgentConversation({
    agents: ["code-interpreter", "data-analyst", "schema-designer"],
  })

  return (
    <div className="grid grid-cols-4 h-screen">
      
      
      
        {messages.map((msg) => (
          
        ))}
      
    </div>
  )
}

هذه القابلية للتركيب هي ما يجعل الأساسيات قوية جدًا. يتعامل مكون ChatPanel مع التمرير وتغيير الحجم التلقائي والسحب لإعادة ترتيب المحادثات، بينما يوفر AgentMessage عرضًا غنيًا ومنظمًا: صورة رمزية للوكيل، ومكون تفكير خطوة بخطوة، وأقسام عملية فكرية قابلة للطي. يتم عرض كل هذا ضمن سمة Tailwind/Radix الحالية دون تعارض في الأنماط.

أنماط التصميم للويب الوكيل

يتم إطلاق القيمة الحقيقية لهذه العناصر الأولية عند تطبيقها على أنماط التصميم المحددة الناشئة في الأنظمة الوكيلة.

1. خيط التعاون

تفاعل العديد من البشر والوكلاء في خيط واحد مشترك. تقدم العناصر الأولية مكون ThreadBranch الذي يقوم بتداخل المحادثات بصريًا. عندما يقوم المستخدم بتحرير ناتج وكيل ويطلق إعادة التوليد، ينشأ فرع جديد من تلك النقطة، ويمكن للمستخدم التبديل بين الفرع الأصلي والفرع الجديد.

2. لوحة الوكيل المحيطي

واجهة دردشة "زجاجية" تتراكب على مساحة العمل، مثل بيئة تطوير متكاملة (IDE) أو أداة تصميم. يوفر متغير GlassPanel للعناصر الأولية جمالية زجاجية مصقولة مع معالجة ذكية للشفافية للحفاظ على المحتوى الأساسي قابلاً للقراءة ولكن متميزًا بصريًا. هذا أمر بالغ الأهمية لمساحات عمل التصميم بالذكاء الاصطناعي على غرار Replit، حيث "تنشئ بمجرد التحدث إليها".

3. متدرج التدفق

للمهام المعقدة للذكاء الاصطناعي مثل ترحيل قواعد البيانات أو تحويلات البيانات، يدعم النظام عنصرًا أوليًا StepRunner. يقوم هذا بتصور سلسلة من الخطوات المنفصلة التي ينفذها وكيل، مع إظهار الاكتمال والتقدم والأخطاء في شريط جانبي قابل للمسح وغير مزعج.

إن وعد العناصر الأولية للمحادثة من shadcn ليس مجرد واجهة دردشة أسرع، بل هو لغة بصرية متسقة لسير العمل الوكيل بأكمله، من المطالبة إلى النتيجة إلى التحرير وإعادة النشر.

الأداء ووهم السرعة

أحد أكثر الجوانب التي يتم الاحتفاء بها لهذه العناصر الأولية هو تركيزها على الأداء الإدراكي. كما هو موضح في مخطط نمط التدفق السابق، تستخدم المكونات خوارزمية عرض "الانفجار والتوقف". تظهر الرموز الأولية بتأخير طفيف لمحاكاة الفكر البشري، ثم تتسارع، وأخيرًا تتباطأ مع اقتراب الاكتمال. يتم تحقيق ذلك من خلال فئة StreamingTokenBuffer التي تقوم بترتيب الأجزاء الواردة وإطلاقها بناءً على وظيفة إيقاع قابلة للتكوين، يتم تعديلها حسب نوع الرمز (نص، كود، قائمة).

النتيجة هي أنه حتى على خادم LLM بطيء، تشعر واجهة المستخدم بالحيوية والذكاء، مما يحسن بشكل كبير درجات رضا المستخدم (CSAT) لميزات الذكاء الاصطناعي.

فلسفة التخصيص: أنت تملك الكود

التمييز الحاسم بين هذا وبين حزمة npm تقليدية هو نموذج الملكية. مثل shadcn/ui، تقوم بتثبيتها ككود مصدري في دليل /components الخاص بك. هذا يعني أن فريقك يمكنه تحرير العناصر الأولية للمحادثة مباشرةً لمطابقة صوت علامتك التجارية ونموذج التفاعل بالضبط. هل تحتاج إلى أداة تصور موجات صوتية مخصصة للإدخال الصوتي؟ أضفها إلى مصدر مكون InputBar. هل تريد دمج استدعاء تحليلات محدد عند إرسال الرسالة؟ افتح خطاف useChatStream وأدخل منطق التتبع الخاص بك.

هذا النهج يلغي مشكلة "الصندوق الأسود" التي يكرهها مطورو الواجهة الأمامية. أنت لا تقاتل رأي مكتبة أبدًا؛ تبدأ برأي مصمم جيدًا ثم تطوره بحرية إلى التوقيع الفريد لمشروعك. كما يثبت shadcn/ui نفسه، فإن النسخ واللصق هو قوة خارقة عندما يكون الكود جميلًا وسهل الوصول وبسيطًا.

مستقبل هندسة الواجهة الأمامية هو المحادثة

نشهد نضجًا سريعًا لمكدس واجهة المستخدم للذكاء الاصطناعي. من الأيام الأولى لاستجابات JSON الخام إلى SDKs التي تدير الحالة، والآن إلى أنظمة التصميم التي تعامل المحادثة كعنصر أولي أساسي، المسار واضح. لا تساعدك العناصر الأولية للمحادثة من shadcn فقط في بناء نافذة دردشة؛ بل تمنحك إطارًا للتفكير في التفاعل بين الإنسان والحاسوب كوسيلة مكانية ومتفرعة ومستمرة.

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

عندما تجمع بين هذه العناصر الأولية مع أدوات تسمح لك بالتقاط أنماط واجهة المستخدم من الويب على الفور، مثل قدرة DivMagic على تحويل أي موقع ويب حي إلى مكونات Tailwind قابلة لإعادة الاستخدام، فإنك تجهز نفسك بميزة غير عادلة تقريبًا. يمكنك دراسة أفضل واجهات المحادثة في الإنتاج، والتقاطها، وتحسينها باستخدام مصدر shadcn القوي، ونشر واجهة الوكيل الفريدة والمتطورة الخاصة بك بحلول وقت الغداء. لقد انتهى عصر التمرير الهندسي. لقد بدأ عصر البناء.