دردشة الذكاء الاصطناعي في SDK جديد
يربط خطاف useChat واجهتك بـ endpoints وكلاء الذكاء الاصطناعي في DYPAI مع البث ورؤية استدعاءات الأدوات وسجل الدردشة وإدارة الجلسات.
يفهم useChat ردود Vercel AI SDK UI Message Stream في DYPAI، بما فيها دلتا النص المتدفقة واستدعاءات الأدوات ونتائج الأدوات والأخطاء أثناء البث. يحتفظ أيضاً باحتياطي قديم للمحركات الأقدم التي ما زالت تُصدر تدفقات نص عادي.
من أين تأتي endpoints الوكيل
«endpoint وكيل ذكاء اصطناعي» هو مجرد endpoint يشغّل عقدة سير العمل agent. تنشئه في بنّاء الـ API. يعمل النموذج خلفه كـ DYPAI Managed (دون مفتاح API، يُفوتر كـ أرصدة الذكاء الاصطناعي، ومقيّد بالخطة في صفحة نماذج الذكاء الاصطناعي للمؤسسة) أو عبر بيانات اعتماد BYOK. راجع وكلاء الذكاء الاصطناعي لعقدة الوكيل والذكاء الاصطناعي المدار لنموذج الفوترة.
البدء السريع
import { useChat } from '@dypai-ai/client-sdk/react'
function ChatBot() {
const { messages, sendMessage, input, setInput, isLoading, status } = useChat('my_agent_endpoint')
return (
<div>
{messages.map(msg => (
<div key={msg.id}>
<strong>{msg.role}:</strong> {msg.content}
</div>
))}
<input value={input} onChange={e => setInput(e.target.value)} />
<button onClick={() => sendMessage()} disabled={isLoading}>
Send
</button>
</div>
)
}
خيارات useChat
| Parameter | Type | Description |
|---|---|---|
endpointrequired | string | اسم endpoint وكيل الذكاء الاصطناعي (يُنشأ في بنّاء الـ API) |
id | string | معرّف جلسة الدردشة. يُولَّد تلقائياً إن لم يُوفَّر |
initialMessages | ChatMessage[] | رسائل تُعرض قبل تحميل السجل |
loadHistory | boolean= true | تحميل الرسائل السابقة من الخادم عند التركيب |
body | object | حقول إضافية تُرسل مع كل رسالة (مثلاً session_id) |
onFinish | function | يُستدعى عندما ينتهي المساعد من الرد |
onError | function | يُستدعى عند الخطأ |
onToolCall | function | يُستدعى عند استلام استدعاء أداة |
ما يُرجعه useChat
| Parameter | Type | Description |
|---|---|---|
messages | ChatMessage[] | كل الرسائل في المحادثة |
status | string | الحالة الحالية: ready و submitted و streaming و error |
input | string | قيمة الإدخال الحالية (متحكَّم بها) |
setInput | function | تعيين قيمة الإدخال |
sendMessage(text?) | async | إرسال رسالة. يستخدم قيمة الإدخال إن لم يُوفَّر نص |
stop() | function | إيقاف الرد المتدفق الحالي |
isLoading | boolean | ما إذا كان المساعد يرد حالياً |
error | Error | null | آخر خطأ |
chatId | string | معرّف الجلسة |
newChat() | function | مسح الرسائل وبدء جلسة جديدة |
تنسيق الرسالة
لكل رسالة:
interface ChatMessage {
id: string
role: 'user' | 'assistant' | 'system' | 'tool'
content: string
parts?: MessagePart[] // Rich content: text, tool-calls, tool-results, images
createdAt?: Date
}
content هو نص المساعد المتراكم. يحتوي parts أحداثاً متدفقة أغنى مثل text و tool-call و tool-result، حتى تبني دردشة نصية بسيطة أو واجهة أغنى تُظهر ما يفعله الوكيل.
استدعاءات الأدوات
عندما يستدعي الوكيل أدوات (endpoints سير عملك)، يمكنك رؤيتها في parts:
{messages.map(msg => (
<div key={msg.id}>
{msg.parts?.map((part, i) => {
if (part.type === 'tool-call') {
return <div key={i}>🔧 Calling {part.toolName}...</div>
}
if (part.type === 'tool-result') {
return <div key={i}>✅ {part.toolName} done</div>
}
if (part.type === 'text') {
return <span key={i}>{part.text}</span>
}
})}
</div>
))}
استئناف محادثة
مرّر id في الخيارات لمتابعة دردشة موجودة (يحمّل سجلها):
const { messages, sendMessage } = useChat('my_agent_endpoint', { id: 'conv-123' })
الخيار هو id (وليس sessionId). على مستوى HTTP الخام حقل جسم الطلب هو session_id.
سجل الدردشة
يأخذ useChatList كائن خيارات ويُرجع مساعدات لإدارة المحادثات السابقة:
import { useChatList } from '@dypai-ai/client-sdk/react'
function ChatSidebar() {
const { chats, isLoading, deleteChat, renameChat, refetch } = useChatList({
endpointId: '<endpoint_id>',
limit: 20,
})
return (
<ul>
{chats?.map(chat => (
<li key={chat.id}>
{chat.title} ({chat.messageCount} messages)
<button onClick={() => renameChat(chat.id, 'Renamed')}>Rename</button>
<button onClick={() => deleteChat(chat.id)}>Delete</button>
</li>
))}
</ul>
)
}
| Parameter | Type | Description |
|---|---|---|
useChatList({ endpointId, limit, enabled }) | Hook | كائن خيارات — يحدّد endpointId نطاق القائمة، ويحدّ limit النتائج، ويبدّل enabled الجلب |
chats | Chat[] | المحادثات السابقة للـ endpoint |
deleteChat(chatId) | async | حذف محادثة (الطريقة الأساسية لمسح دردشة) |
renameChat(chatId, title) | async | إعادة تسمية محادثة |
refetch() | async | إعادة تحميل قائمة المحادثات |
isLoading / error | state | حالة التحميل والخطأ |
مخرج منظَّم
إذا عرّف endpoint الوكيل output_schema، يصل الناتج المنظَّم في حقل object للرسالة (مطابقاً لمخططك)، لا content.
الدوال المساعدة
import { generateChatId, getMessageText, getToolCalls } from '@dypai-ai/client-sdk/react'
// Generate a new chat ID
const id = generateChatId()
// Extract plain text from a message (ignores tool calls)
const text = getMessageText(message)
// Get tool calls from a message
const tools = getToolCalls(message) // [{ toolName: 'list_orders', args: {...} }]