From 525a46d0bfdddd487a9a3e71496453c0a6ee9887 Mon Sep 17 00:00:00 2001 From: JR Boos Date: Thu, 31 Jul 2025 11:40:37 -0400 Subject: [PATCH 1/2] Add basic referenced sources support --- src/app/LightspeedChatbot/hooks/useChatbot.ts | 8 ++++++++ src/app/LightspeedChatbot/types.ts | 5 ++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/app/LightspeedChatbot/hooks/useChatbot.ts b/src/app/LightspeedChatbot/hooks/useChatbot.ts index 2148936..11b4a8c 100644 --- a/src/app/LightspeedChatbot/hooks/useChatbot.ts +++ b/src/app/LightspeedChatbot/hooks/useChatbot.ts @@ -257,6 +257,8 @@ export const useChatbot = () => { setFileError(undefined); }; + + const handleSend = async (message: string | number) => { setIsSendButtonDisabled(true); const messageContent = String(message); @@ -393,6 +395,12 @@ export const useChatbot = () => { share: { onClick: () => {} }, listen: { onClick: () => {} }, }, + sources: endData.referenced_documents && endData.referenced_documents.length > 0 ? { + sources: endData.referenced_documents.map(doc => ({ + title: doc.doc_title, + link: doc.doc_url, + })), + } : undefined, }; } return updatedMessages; diff --git a/src/app/LightspeedChatbot/types.ts b/src/app/LightspeedChatbot/types.ts index 813566c..c1537cf 100644 --- a/src/app/LightspeedChatbot/types.ts +++ b/src/app/LightspeedChatbot/types.ts @@ -57,7 +57,10 @@ export interface StreamTokenData { } export interface StreamEndData { - referenced_documents: any[]; + referenced_documents: Array<{ + doc_url: string; + doc_title: string; + }>; truncated: any; input_tokens: number; output_tokens: number; From c619b1214b176889a5840387e190347f5037943c Mon Sep 17 00:00:00 2001 From: JR Boos Date: Thu, 31 Jul 2025 12:58:09 -0400 Subject: [PATCH 2/2] LCORE-338: Document customization --- src/app/LightspeedChatbot/README.md | 208 +++++++++++++++++++++++++++- 1 file changed, 207 insertions(+), 1 deletion(-) diff --git a/src/app/LightspeedChatbot/README.md b/src/app/LightspeedChatbot/README.md index c05aa98..310db19 100644 --- a/src/app/LightspeedChatbot/README.md +++ b/src/app/LightspeedChatbot/README.md @@ -136,4 +136,210 @@ The component uses PatternFly components and can be styled using: - ✅ **Component Composition**: Smaller, focused components - ✅ **Clear Documentation**: Comprehensive README and comments -This organization makes the codebase much easier to understand, maintain, and extend! \ No newline at end of file +This organization makes the codebase much easier to understand, maintain, and extend! + +## 🎨 Frontend Customization Guide + +### Overview +The Lightspeed Chatbot frontend is highly customizable, allowing you to tailor the experience to match your brand, requirements, and user preferences. This guide covers all available customization options. + +--- + +### 🔧 Configuration Customization + +#### Basic Configuration (`constants.ts`) +Modify the core configuration settings: + +```typescript +// API Configuration +export const API_BASE_URL = 'https://your-api.domain.com'; + +// Avatar Customization +export const USER_AVATAR = 'https://your-domain.com/user-avatar.png'; +export const BOT_AVATAR = 'https://your-domain.com/bot-avatar.png'; + +// Default AI Behavior +export const DEFAULT_SYSTEM_PROMPT = 'You are a specialized assistant for [YOUR USE CASE].'; + +// Footnote Customization +export const FOOTNOTE_PROPS = { + label: 'Your App uses AI. Check for mistakes.', + popover: { + title: 'Custom Title', + description: 'Your custom accuracy disclaimer...', + cta: { + label: 'Understood', + onClick: () => { /* Custom action */ }, + }, + link: { + label: 'Learn more', + url: 'https://your-domain.com/ai-policy', + }, + }, +}; +``` + +#### Welcome Prompts +Customize initial user interaction: + +```typescript +export const INITIAL_WELCOME_PROMPTS: WelcomePrompt[] = [ + { title: 'Quick Start', message: 'Help me get started' }, + { title: 'Documentation', message: 'Show me the documentation' }, + { title: 'Support', message: 'I need technical support' }, +]; +``` + +--- + +### 🎭 Branding & Visual Identity + +#### Logo Customization (`LightspeedChatbot.tsx`) +Replace the default logos with your brand: + +```typescript +// Horizontal logo for fullscreen mode +const horizontalLogo = ( + + Your Brand + +); + +// Icon logo for compact modes +const iconLogo = ( + YB +); +``` + +#### Welcome Message Customization +```typescript + +``` + +--- + +### 🔌 API Integration Customization + +#### Custom Headers & Authentication +Modify `services/api.ts` to add custom headers: + +```typescript +const defaultHeaders = { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAuthToken()}`, + 'X-Custom-Header': 'your-value', +}; + +export const fetchModels = async (): Promise => { + const response = await fetch(`${API_BASE_URL}/v1/models`, { + method: 'GET', + headers: defaultHeaders, + }); + // ... rest of implementation +}; +``` + +#### Custom Error Handling +```typescript +const handleApiError = (error: any, operation: string) => { + console.error(`${operation} failed:`, error); + // Custom error reporting + if (window.errorReporting) { + window.errorReporting.reportError(error, operation); + } + throw new Error(`${operation} failed. Please try again.`); +}; +``` + +#### Response Transformation +```typescript +export const sendStreamingQuery = async ( + request: QueryRequest, + onToken: (token: string, tokenData?: StreamTokenData) => void, + onStart: (conversationId: string) => void, + onEnd: (endData: StreamEndData) => void, +): Promise => { + // Custom request transformation + const transformedRequest = { + ...request, + custom_field: 'your-value', + user_context: getUserContext(), + }; + + // ... rest of implementation with custom processing +}; +``` + +--- + +### 📱 UI/UX Customization + +#### File Attachment Customization +Modify file handling rules: + +```typescript +// Custom file validation +const validateCustomFile = (file: File): string | null => { + const allowedTypes = ['.pdf', '.docx', '.txt', '.md', '.json']; + const maxSize = 50 * 1024 * 1024; // 50MB + + if (!allowedTypes.some(type => file.name.toLowerCase().endsWith(type))) { + return `File type not supported. Allowed: ${allowedTypes.join(', ')}`; + } + + if (file.size > maxSize) { + return 'File too large. Maximum size: 50MB'; + } + + return null; +}; +``` + +--- + +### 🔍 Advanced Features + +#### Custom Tool Execution Display +Enhance the `ToolExecutionCards` component: + +```typescript +// Enhanced tool execution with icons and descriptions +const TOOL_CONFIGS = { + 'web_search': { icon: 'search-icon', description: 'Searching the web...' }, + 'file_analysis': { icon: 'file-icon', description: 'Analyzing document...' }, + 'data_query': { icon: 'database-icon', description: 'Querying database...' }, +}; + +export const EnhancedToolExecutionCards: React.FC = ({ tools }) => { + return ( +
+ {tools.map((tool, index) => { + const config = TOOL_CONFIGS[tool] || { icon: 'default-icon', description: tool }; + return ( + + + {config.description} + + ); + })} +
+ ); +}; +``` + +### 💡 Best Practices + +1. **Gradual Customization**: Start with configuration changes, then move to styling and advanced features +2. **Theme Consistency**: Maintain consistent styling across all components +3. **Accessibility**: Ensure customizations don't break accessibility features +4. **Performance**: Test that customizations don't impact performance +5. **Maintainability**: Document custom changes for future team members +6. **User Testing**: Validate customizations with real users +7. **Responsive Design**: Test customizations across different screen sizes +8. **Error Handling**: Implement robust error handling for custom features + +This comprehensive customization guide provides you with all the tools needed to tailor the Lightspeed Chatbot to your specific requirements while maintaining code quality and user experience standards. \ No newline at end of file