134 lines
3.7 KiB
TypeScript
134 lines
3.7 KiB
TypeScript
'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<SuggestionCategory | null>(null)
|
|
|
|
const handleQuestionSelect = (question: string) => {
|
|
onSelect(question)
|
|
setSelectedCategory(null)
|
|
}
|
|
|
|
// Show questions for selected category
|
|
if (selectedCategory) {
|
|
return (
|
|
<div className="px-4 pb-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedCategory(null)}
|
|
className="flex items-center gap-1 text-xs text-slate-500 hover:text-slate-700 mb-2 transition-colors"
|
|
>
|
|
<ChevronLeft className="w-3 h-3" />
|
|
Terug
|
|
</button>
|
|
<div className="flex items-center gap-1.5 mb-2">
|
|
<span className="text-sm">{selectedCategory.icon}</span>
|
|
<span className="text-xs font-medium text-slate-700">{selectedCategory.label}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
{selectedCategory.questions.map((question) => (
|
|
<button
|
|
key={question}
|
|
type="button"
|
|
onClick={() => handleQuestionSelect(question)}
|
|
disabled={disabled}
|
|
className={cn(
|
|
'text-xs px-3 py-2 rounded-lg',
|
|
'bg-slate-100 text-slate-700',
|
|
'hover:bg-amber-100 hover:text-amber-800',
|
|
'transition-colors duration-150',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed',
|
|
'text-left'
|
|
)}
|
|
>
|
|
{question}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Show category selection
|
|
return (
|
|
<div className="px-4 pb-3">
|
|
<p className="text-xs text-slate-500 mb-2">Kies een onderwerp:</p>
|
|
<div className="flex flex-col gap-1.5">
|
|
{SUGGESTION_CATEGORIES.map((category) => (
|
|
<button
|
|
key={category.id}
|
|
type="button"
|
|
onClick={() => setSelectedCategory(category)}
|
|
disabled={disabled}
|
|
className={cn(
|
|
'flex items-center gap-2 px-3 py-2 rounded-lg',
|
|
'bg-slate-100 text-slate-700',
|
|
'hover:bg-amber-100 hover:text-amber-800',
|
|
'transition-colors duration-150',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed',
|
|
'text-left text-sm'
|
|
)}
|
|
>
|
|
<span>{category.icon}</span>
|
|
<span>{category.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|