feat(onboarding): add conversational ChatOnboarding component

2026-02-28 22:06:15 +01:00
parent 04bab32e26
commit e40b486ae5
8 changed files with 870 additions and 3 deletions
@@ -0,0 +1,18 @@
+export default function CoachMessage({ text, typing = false }) {
+  return (
+    <div className={`chat-message coach ${typing ? 'typing' : ''}`}>
+      <div className="chat-avatar">C</div>
+      <div className="chat-bubble">
+        {typing ? (
+          <div className="typing-indicator" aria-label="Coach skriver">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        ) : (
+          text
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,19 @@
+export default function QuickReplies({ options = [], onSelect, disabled = false }) {
+  if (!options.length) return null
+
+  return (
+    <div className="quick-replies">
+      {options.map((option) => (
+        <button
+          key={`${option.label}-${option.value}`}
+          type="button"
+          className={`quick-reply ${option.variant || ''}`.trim()}
+          onClick={() => onSelect(option)}
+          disabled={disabled || option.disabled}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,9 @@
+export default function UserMessage({ text }) {
+  return (
+    <div className="chat-message user">
+      <div className="chat-bubble">
+        {text}
+      </div>
+    </div>
+  )
+}