import React, { useState, useEffect } from 'react'; export default function FAQList() { // CONFIGURABLE CONSTANTS - Customize the widget appearance here const BATCH_SIZE = 10; // Color Constants const PRIMARY_COLOR = 'blue-500'; const PRIMARY_HOVER_COLOR = 'blue-600'; const PRIMARY_RING_COLOR = 'blue-500'; const PRIMARY_BORDER_COLOR = 'blue-500'; // Content Constants const MAIN_TITLE = 'FAQ'; const SEARCH_PLACEHOLDER = 'Search questions...'; const SEARCH_BUTTON_TEXT = 'Search'; const LOAD_MORE_TEXT = 'Load More'; const NO_QUESTIONS_TEXT = 'No questions found. Try adjusting your search or filters.'; const LOADING_TEXT = 'Loading questions...'; const LOADING_MORE_TEXT = 'Loading...'; const ALL_CATEGORIES_TEXT = 'All'; // Error Messages const LOAD_ERROR = 'Failed to load questions. Please try again.'; const [documents, setDocuments] = useState([]); const [categories, setCategories] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [selectedCategory, setSelectedCategory] = useState(null); const [hasMore, setHasMore] = useState(false); const [expandedItems, setExpandedItems] = useState(new Set()); const [offset, setOffset] = useState(0); // Load categories useEffect(() => { loadCategories(); }, []); // Load documents when category changes useEffect(() => { setOffset(0); loadDocuments(0); }, [selectedCategory]); const loadCategories = async () => { try { const data = await API.Docs_GetCategories(); if (data.categories) { setCategories(data.categories); } } catch (error) { console.error('Categories Error:', error); } }; const loadDocuments = async (currentOffset = offset) => { if (loading) return; setLoading(true); setError(null); try { const data = await API.Docs_GetDocumentList({ type: 'QA', includeChildren: true, categoryId: selectedCategory, limit: BATCH_SIZE, startOffset: currentOffset, contentLength: 1000 }); const newDocuments = data.documents || []; if (currentOffset === 0) { setDocuments(newDocuments); } else { setDocuments(prev => [...prev, ...newDocuments]); } setHasMore(currentOffset + newDocuments.length < (data.total || 0)); } catch (error) { console.error('API Error:', error); setError(error.message || LOAD_ERROR); } finally { setLoading(false); } }; const handleSearch = async () => { if (!searchQuery.trim()) { setOffset(0); loadDocuments(0); return; } setLoading(true); setError(null); try { const data = await API.Docs_SearchDocuments({ query: searchQuery.trim(), type: 'QA', categoryId: selectedCategory, limit: 10 }); setDocuments(data.results || []); setHasMore(false); } catch (error) { console.error('Search Error:', error); setError(error.message || LOAD_ERROR); } finally { setLoading(false); } }; const handleCategoryFilter = (categoryId) => { setSelectedCategory(categoryId); setSearchQuery(''); setExpandedItems(new Set()); }; const handleLoadMore = () => { const newOffset = offset + BATCH_SIZE; setOffset(newOffset); loadDocuments(newOffset); }; const toggleItem = (docId) => { const newExpandedItems = new Set(expandedItems); if (newExpandedItems.has(docId)) { newExpandedItems.delete(docId); } else { newExpandedItems.add(docId); } setExpandedItems(newExpandedItems); }; const handleKeyDown = (e) => { if (e.key === 'Enter') { handleSearch(); } }; return (

{MAIN_TITLE}

setSearchQuery(e.target.value)} onKeyDown={handleKeyDown} className={"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-" + PRIMARY_RING_COLOR + " focus:border-" + PRIMARY_BORDER_COLOR} />

{categories.length > 0 && (

{categories.map(category => ( ))}

)}

{loading && documents.length === 0 && (

{LOADING_TEXT}

)} {error && (

{error}

)}

{documents.filter(d => d.content).map((doc) => { const isExpanded = expandedItems.has(doc.id); return (

{isExpanded && (

)}

); })}

{hasMore && (

)} {!loading && documents.length === 0 && !error && (

{NO_QUESTIONS_TEXT}

)}

); }

{MAIN_TITLE}

{doc.title}

Documents

Articles

FAQ