محادثة الذكاء الاصطناعي

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

معاينة مباشرة

دردشة الذكاء الاصطناعي

علامة تبويب جديدة

boardui.com/templates/ai-chat

الكود

12 تغييرًا غير محفوظ+156-23

boardui/app/components/button.tsx +74

جديد

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

محادثة الوكيل

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

57%

12 تغييرًا غير محفوظ+156-23

boardui/app/components/button.tsx +74

جديد

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

التثبيت

دردشة الذكاء الاصطناعي هي قالب من BoardUI Pro، يُباع بشكل منفصل.

الوضع الداكن جاهز - هذا قالب يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

وصول Pro

محادثة الذكاء الاصطناعي هو مكوّن Pro قالب.

ترخيص BoardUI Pro الخاص بك يفتح هذا قالب وجميع ملفاته المصدرية. فعّل ترخيصك مرة واحدة، ثم ثبّته مباشرة في مشروعك باستخدام CLI.

فعّل ترخيصك

استخدم المفتاح من بريد الشراء الإلكتروني الخاص بـ Lemon Squeezy. تحتاج إلى القيام بذلك مرة واحدة فقط لكل جهاز.

npx boardui@latest login YOUR_LICENSE_KEY

تثبيت القالب

تنسخ CLI المصدر وتحلّ جميع تبعيات BoardUI وnpm نيابةً عنك.

npx boardui@latest add template-ai-chat

هذا قالب مضمّن في BoardUI Pro

احصل على BoardUI Pro الآن وثبّته فوراً.

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

ما المتضمَّن

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