UI Embed Skill

Instructions

1. Build component

   • Create React chat panel (ChatbotPanel.tsx) with:
     • Message list
     • Input field
     • Mode toggle (RAG vs Selected Text)
     • Source list display
   • Handle streaming responses (EventSource/fetch reader)
   • Include loading and error UI states

2. API client

   • Create fetch helpers for /query and /query/selected
   • Include page metadata (module/week/title) for logging
   • Debounce/trim inputs; enforce max length

3. Integration

   • Add to src/theme/Layout or dedicated Chat page
   • Optionally show floating button
   • Provide MDX shortcode to drop chat in specific chapters

4. UX and accessibility

   • Basic console logging for failures
   • Friendly fallback messages
   • Focus management, keyboard submit
   • Readable contrast

Examples

// ChatbotPanel.tsx
import React, { useState } from 'react';

export function ChatbotPanel({ apiUrl }: { apiUrl: string }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [mode, setMode] = useState<'rag' | 'selected'>('rag');
  
  // ... implementation
}

{/* In any MDX page */}
import { ChatbotPanel } from '@site/src/components/ChatbotPanel';

<ChatbotPanel apiUrl={process.env.API_URL} />

Definition of Done

• Widget renders in Docusaurus dev build; can query backend
• Selected-text path sends provided text and returns grounded answer
• Error/loading states visible; minimal styling but responsive
• Integration steps documented for future pages