القائمة
This skill helps create React chat widgets using the ChatKit React library, following best practices for floating chat interfaces with thread persistence and proper configuration.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
This skill provides guidance for implementing secure authentication using Better Auth for Next.js frontend and JWT verification for FastAPI backend.
This skill helps create ChatKit server implementations that integrate with databases and openai-agents, following best practices for conversation management and message persistence.
This skill provides functionality to properly expose a ChatKit server via FastAPI routes. It handles the integration between FastAPI request/response cycle and the ChatKit server, with proper request processing and response handling.
This skill helps create ChatKit store implementations with database integration, following best practices and avoiding common errors we've solved in previous implementations.
Comprehensive DAPR (Distributed Application Runtime) skill for building distributed microservices from hello world to professional production systems. Provides guidance on DAPR setup, building blocks (service invocation, state management, pub/sub, actors, secrets), sidecar configuration, component configuration, and Kubernetes integration for scalable distributed applications.
Comprehensive Docker containerization guidance using multi-stage builds, Docker Hardened Images, and Docker AI Agent (Gordon) for Node.js/Next.js applications. Use when containerizing applications with best practices for security, efficiency, and AI-assisted operations.
| name | chatkit-client-widget-creator |
| description | This skill helps create React chat widgets using the ChatKit React library, following best practices for floating chat interfaces with thread persistence and proper configuration. |
This skill helps create React chat widgets using the ChatKit React library, following best practices for floating chat interfaces with thread persistence and proper configuration.
When a user needs to create a ChatKit client widget, use this skill to generate:
The client connects to the backend in this way:
http://localhost:8000/chatkit)isReady flagimport { ChatKit, useChatKit } from '@openai/chatkit-react'
import { useState, useEffect, Activity } from 'react'
import { MessageCircle, X, RefreshCw } from 'lucide-react'
import { cn } from '@site/src/lib/utils' // Adjust import path as needed
export const ChatWidget = () => {
const [initialThread, setInitialThread] = useState<string | null>(null)
const [isReady, setIsReady] = useState(false)
const [isChatOpen, setIsChatOpen] = useState(false)
// Load saved thread ID on mount
useEffect(() => {
const savedThread = localStorage.getItem('chatkit-thread-id')
setInitialThread(savedThread)
}, [])
const { control } = useChatKit({
api: {
url: 'http://localhost:8000/chatkit', // Update to your backend URL
domainKey: 'localhost', // Update domain as needed
},
initialThread: initialThread,
theme: {
colorScheme: 'dark', // or 'light'
color: {
accent: { primary: 'hsl(174, 72%, 56%)', level: 1 }, // Adjust colors as needed
},
radius: 'round', // or 'sharp' or 'smooth'
},
startScreen: {
greeting: 'Welcome to Your Assistant!',
prompts: [
{ label: 'Hello', prompt: 'Say hello and introduce yourself' },
{ label: 'Help', prompt: 'What can you help me with?' },
// Add more starter prompts as needed
],
},
composer: {
placeholder: 'Ask me anything...', // Customize placeholder text
},
onThreadChange: ({ threadId }) => {
console.log('Thread changed:', threadId)
if (threadId) {
localStorage.setItem('chatkit-thread-id', threadId)
}
},
onError: ({ error }) => {
console.error('ChatKit error:', error)
},
onReady: () => {
console.log('ChatKit is ready!')
},
})
return (<>
{/* Floating Chat Button (bottom-right) */}
{!isChatOpen && (
<button
onClick={() => setIsChatOpen(true)}
className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full bg-linear-to-br from-primary to-secondary flex items-center justify-center shadow-lg shadow-primary/30 transition-all duration-300 ease-out hover:scale-110 hover:shadow-xl hover:shadow-primary/40 animate-pulse-glow cursor-pointer"
aria-label="Open chat"
>
<MessageCircle className="w-6 h-6 text-primary-foreground" />
</button>
)}
{/* Chat Popup */}
<Activity mode={isChatOpen ? "visible" : "hidden"}>
{/* Backdrop */}
<div
onClick={() => setIsChatOpen(false)}
className="fixed inset-0 bg-background/60 backdrop-blur-sm z-999"
/>
{/* Popup Window */}
<div className="fixed bottom-6 right-6 z-1000 w-105 h-150 max-w-[calc(100vw-3rem)] max-h-[calc(100vh-3rem)] bg-card border border-border rounded-2xl shadow-2xl shadow-primary/20 flex flex-col overflow-hidden animate-slide-in-up">
{/* Chat Header */}
<div className="px-4 py-3 bg-muted border-b border-border flex justify-between items-center shrink-0">
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
<span className="text-primary font-semibold text-sm">
Physical AI Assistant
</span>
</div>
<div className="flex gap-2">
<button
onClick={() => {
localStorage.removeItem('chatkit-thread-id')
}}
className="px-3 py-1.5 rounded-lg bg-primary/20 hover:bg-primary/30 text-primary text-xs font-medium flex items-center gap-1.5 transition-colors duration-200"
>
<RefreshCw className="w-3 h-3" />
New Chat
</button>
<button
onClick={() => setIsChatOpen(false)}
className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors duration-200"
aria-label="Close chat"
>
<X className="w-4 h-4" />
</button>
</div>
</div>
{/* Chat Content */}
<div className="flex-1 overflow-hidden chatkit-container">
<Activity mode={isReady ? "hidden" : "visible"}>
<div className="h-full w-full flex items-center justify-center text-muted-foreground text-sm">
Connecting to assistant...
</div>
</Activity>
<ChatKit control={control} ref={ref} className="h-full w-full" />
</div>
</div>
</Activity>
</>);
}
export default ChatWidget