diff --git a/components/docs-chat/chat-suggestions.tsx b/components/docs-chat/chat-suggestions.tsx new file mode 100644 index 0000000..0dcac30 --- /dev/null +++ b/components/docs-chat/chat-suggestions.tsx @@ -0,0 +1,133 @@ +'use client' + +import { useState } from 'react' +import { ChevronLeft } from 'lucide-react' + +import { cn } from '@/lib/utils' + +interface SuggestionCategory { + id: string + label: string + icon: string + questions: string[] +} + +const SUGGESTION_CATEGORIES: SuggestionCategory[] = [ + { + id: 'clienten', + label: 'Cliënten & Dossiers', + icon: '👤', + questions: [ + 'Hoe maak ik een nieuwe cliënt aan?', + 'Hoe zoek ik een bestaande cliënt?', + 'Hoe open ik een cliëntdossier?', + ], + }, + { + id: 'intake', + label: 'Intake & Screening', + icon: '📋', + questions: [ + 'Hoe start ik een intake?', + 'Waar vind ik de screeningresultaten?', + 'Hoe voeg ik notities toe aan een intake?', + ], + }, + { + id: 'spraak', + label: 'Spraak & Rapportage', + icon: '🎤', + questions: [ + 'Hoe werkt de spraakherkenning?', + 'Waarom werkt mijn microfoon niet?', + 'Hoe dicteer ik een rapportage?', + ], + }, +] + +interface ChatSuggestionsProps { + onSelect: (question: string) => void + disabled?: boolean +} + +/** + * Two-step suggestion selector: + * 1. Show categories + * 2. After selecting category, show questions + */ +export function ChatSuggestions({ onSelect, disabled = false }: ChatSuggestionsProps) { + const [selectedCategory, setSelectedCategory] = useState(null) + + const handleQuestionSelect = (question: string) => { + onSelect(question) + setSelectedCategory(null) + } + + // Show questions for selected category + if (selectedCategory) { + return ( +
+ +
+ {selectedCategory.icon} + {selectedCategory.label} +
+
+ {selectedCategory.questions.map((question) => ( + + ))} +
+
+ ) + } + + // Show category selection + return ( +
+

Kies een onderwerp:

+
+ {SUGGESTION_CATEGORIES.map((category) => ( + + ))} +
+
+ ) +} diff --git a/components/docs-chat/docs-chat-widget.tsx b/components/docs-chat/docs-chat-widget.tsx index 3c5be97..bbf930a 100644 --- a/components/docs-chat/docs-chat-widget.tsx +++ b/components/docs-chat/docs-chat-widget.tsx @@ -7,6 +7,7 @@ import { cn } from '@/lib/utils' import { ChatInput } from './chat-input' import { ChatMessages } from './chat-messages' +import { ChatSuggestions } from './chat-suggestions' import { useDocsChat } from './use-docs-chat' /** @@ -105,6 +106,14 @@ export function DocsChatWidget() { {/* Messages */} + {/* Suggestions - show only when just welcome message */} + {messages.length === 1 && messages[0].id === 'welcome' && ( + + )} + {/* Input */}