chat suggestions

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<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>
+  )
+}