انتقل إلى المحتوى
Yuvashadcn
Yuva لـ shadcn/uiالقائمة

Yuva لـ shadcn/ui

مكوّنات React للدردشة المباشرة ونقاشات صفحات التوثيق والاشتراك في القوائم البريدية، تُنسخ إلى مشروع shadcn/ui الخاص بك.

سجل Yuva مجموعة من المكوّنات والـ hooks ينسخها shadcn CLI إلى مشروعك. تستخدم سمتك وتتحدث مع Yuva عبر عميل useyuva، وهي ملكك لتعدّلها.

المتطلبات

  • مشروع يستخدم shadcn/ui بالفعل، مع React وTailwind CSS.
  • قناة دردشة في Yuva ومفتاحها العام (yuva_pk_…).

إعداد قناة

  1. في لوحة Yuva افتح الإعدادات ثم صندوق الوارد ثم القنوات، وأضف قناة دردشة.
  2. أضف كل origin سيعرض المكوّنات كأصل مسموح: موقعك وخادم التطوير.
  3. انسخ المفتاح العام للقناة. ليس سرًّا.
  4. للنقاشات، اضبط وضع النقاشات في القناة على moderated أو open. لنموذج الاشتراك، أضف قائمة بريدية عامة.

أعطِ المكوّنات المفتاح وعنوان خادم Yuva، مثلًا في البيئة:

.env.local
NEXT_PUBLIC_YUVA_SERVER=https://support.example.com
NEXT_PUBLIC_YUVA_CHANNEL=yuva_pk_xxxxxxxxxxxxxxxx

أضف عنصرك الأول

ثبّت كتلة الدردشة ثم اعرضها:

Shell
npx shadcn@latest add https://useyuva.com/r/yuva-chat.json
tsx
import { YuvaChat } from "@/components/yuva-chat"

export function Support() {
  return (
    <YuvaChat
      server={process.env.NEXT_PUBLIC_YUVA_SERVER}
      channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
    />
  )
}

العناصر

كل عناصر السجل، مجمّعة كما في الشريط الجانبي.

الكتل

المكوّنات

Hooks

التالي →Yuva chat