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,557 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+import CoachMessage from '../components/CoachMessage'
+import UserMessage from '../components/UserMessage'
+import QuickReplies from '../components/QuickReplies'
+
+const API = '/api'
+
+const initialData = {
+  name: '',
+  gender: '',
+  age: '',
+  height_cm: '',
+  weight: '',
+  neck_cm: '',
+  waist_cm: '',
+  hip_cm: '',
+  experience_level: '',
+  bench_1rm: '',
+  squat_1rm: '',
+  deadlift_1rm: '',
+  goal: '',
+  workouts_per_week: ''
+}
+
+const calcBodyFat = (gender, waist, neck, hip, height) => {
+  if (!waist || !neck || !height) return null
+  if (gender === 'female' && !hip) return null
+  if (gender === 'male') {
+    return Math.max(
+      0,
+      495 / (1.0324 - 0.19077 * Math.log10(waist - neck) + 0.15456 * Math.log10(height)) - 450
+    ).toFixed(1)
+  }
+  return Math.max(
+    0,
+    495 / (1.29579 - 0.35004 * Math.log10(waist + hip - neck) + 0.221 * Math.log10(height)) - 450
+  ).toFixed(1)
+}
+
+const toNumberOrNull = (value) => {
+  if (value === '' || value === null || value === undefined) return null
+  const numberValue = Number(value)
+  return Number.isNaN(numberValue) ? null : numberValue
+}
+
+export default function ChatOnboarding() {
+  const { token, updateProfile, refreshProfile } = useAuth()
+  const navigate = useNavigate()
+  const [data, setData] = useState(initialData)
+  const [messages, setMessages] = useState([])
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [answers, setAnswers] = useState([])
+  const [inputValue, setInputValue] = useState('')
+  const [error, setError] = useState('')
+  const [isTyping, setIsTyping] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const endRef = useRef(null)
+  const messageIdRef = useRef(0)
+  const typingTimeoutRef = useRef(null)
+
+  const questions = useMemo(() => {
+    return [
+      {
+        id: 'name',
+        field: 'name',
+        type: 'text',
+        prompt: 'Hej! Jag är din coach. Vad heter du?',
+        placeholder: 'Ditt namn',
+        inputType: 'text'
+      },
+      {
+        id: 'goal',
+        field: 'goal',
+        type: 'options',
+        prompt: values => `Kul att träffas${values.name ? ` ${values.name}` : ''}! Vad är ditt största mål?`,
+        options: [
+          { label: 'Bygga muskler', value: 'muscle' },
+          { label: 'Styrka', value: 'strength' },
+          { label: 'Gå ner i vikt', value: 'fat_loss' },
+          { label: 'Hälsa', value: 'general' }
+        ]
+      },
+      {
+        id: 'experience_level',
+        field: 'experience_level',
+        type: 'options',
+        prompt: 'Hur länge har du tränat?',
+        options: [
+          { label: 'Ny', value: 'beginner' },
+          { label: '< 1 år', value: 'beginner' },
+          { label: '1-3 år', value: 'intermediate' },
+          { label: '3+ år', value: 'advanced' }
+        ]
+      },
+      {
+        id: 'workouts_per_week',
+        field: 'workouts_per_week',
+        type: 'options',
+        prompt: 'Hur många pass kan du köra per vecka?',
+        options: [2, 3, 4, 5, 6].map(n => ({ label: `${n}`, value: n }))
+      },
+      {
+        id: 'gender',
+        field: 'gender',
+        type: 'options',
+        prompt: 'Super! Vi tar några snabba basfrågor. Vilket kön identifierar du dig som?',
+        options: [
+          { label: 'Man', value: 'male' },
+          { label: 'Kvinna', value: 'female' }
+        ]
+      },
+      {
+        id: 'age',
+        field: 'age',
+        type: 'text',
+        prompt: 'Hur gammal är du?',
+        placeholder: 'Ålder',
+        inputType: 'number',
+        validate: value => (value > 0 && value < 120 ? '' : 'Skriv in en giltig ålder.')
+      },
+      {
+        id: 'height_cm',
+        field: 'height_cm',
+        type: 'text',
+        prompt: 'Hur lång är du? (cm)',
+        placeholder: '175',
+        inputType: 'number',
+        unit: 'cm',
+        validate: value => (value > 50 && value < 260 ? '' : 'Skriv in din längd i cm.')
+      },
+      {
+        id: 'weight',
+        field: 'weight',
+        type: 'text',
+        prompt: 'Vad väger du just nu? (kg)',
+        placeholder: '75',
+        inputType: 'number',
+        unit: 'kg',
+        validate: value => (value > 20 && value < 300 ? '' : 'Skriv in din vikt i kg.')
+      },
+      {
+        id: 'neck_cm',
+        field: 'neck_cm',
+        type: 'text',
+        prompt: 'Om du vet: halsmått i cm?',
+        placeholder: '38',
+        inputType: 'number',
+        unit: 'cm',
+        optional: true
+      },
+      {
+        id: 'waist_cm',
+        field: 'waist_cm',
+        type: 'text',
+        prompt: 'Midjemått i cm?',
+        placeholder: '85',
+        inputType: 'number',
+        unit: 'cm',
+        optional: true
+      },
+      {
+        id: 'hip_cm',
+        field: 'hip_cm',
+        type: 'text',
+        prompt: 'Höftmått i cm?',
+        placeholder: '95',
+        inputType: 'number',
+        unit: 'cm',
+        optional: true,
+        shouldAsk: values => values.gender === 'female'
+      },
+      {
+        id: 'bench_1rm',
+        field: 'bench_1rm',
+        type: 'text',
+        prompt: 'Har du en uppskattad 1RM i bänkpress? (valfritt, kg)',
+        placeholder: '100',
+        inputType: 'number',
+        unit: 'kg',
+        optional: true,
+        shouldAsk: values => values.experience_level && values.experience_level !== 'beginner'
+      },
+      {
+        id: 'squat_1rm',
+        field: 'squat_1rm',
+        type: 'text',
+        prompt: '1RM i knäböj? (valfritt, kg)',
+        placeholder: '140',
+        inputType: 'number',
+        unit: 'kg',
+        optional: true,
+        shouldAsk: values => values.experience_level && values.experience_level !== 'beginner'
+      },
+      {
+        id: 'deadlift_1rm',
+        field: 'deadlift_1rm',
+        type: 'text',
+        prompt: '1RM i marklyft? (valfritt, kg)',
+        placeholder: '160',
+        inputType: 'number',
+        unit: 'kg',
+        optional: true,
+        shouldAsk: values => values.experience_level && values.experience_level !== 'beginner'
+      }
+    ]
+  }, [])
+
+  const currentQuestion = questions[currentIndex]
+
+  const addMessage = (message) => {
+    messageIdRef.current += 1
+    setMessages(prev => [...prev, { id: messageIdRef.current, ...message }])
+  }
+
+  const scrollToBottom = () => {
+    if (endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' })
+    }
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages, isTyping])
+
+  const getPrompt = (question, values) => {
+    if (!question) return ''
+    return typeof question.prompt === 'function' ? question.prompt(values) : question.prompt
+  }
+
+  useEffect(() => {
+    if (messages.length === 0 && currentQuestion) {
+      addMessage({ sender: 'coach', text: getPrompt(currentQuestion, data), questionIndex: currentIndex })
+    }
+    return () => {
+      if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current)
+    }
+  }, [messages.length, currentQuestion, currentIndex, data])
+
+  const applyAnswer = (values, question, value) => {
+    if (!question.field) return values
+    return { ...values, [question.field]: value }
+  }
+
+  const rebuildDataFromAnswers = (updatedAnswers) => {
+    return updatedAnswers.reduce((acc, answer) => {
+      const question = questions[answer.questionIndex]
+      if (!question) return acc
+      return applyAnswer(acc, question, answer.value)
+    }, { ...initialData })
+  }
+
+  const findNextIndex = (startIndex, nextData) => {
+    for (let i = startIndex + 1; i < questions.length; i += 1) {
+      const question = questions[i]
+      if (!question?.shouldAsk || question.shouldAsk(nextData)) return i
+    }
+    return null
+  }
+
+  const isMeasurementQuestion = (questionId) => ['weight', 'neck_cm', 'waist_cm', 'hip_cm'].includes(questionId)
+  const isStrengthQuestion = (questionId) => ['bench_1rm', 'squat_1rm', 'deadlift_1rm'].includes(questionId)
+  const isProfileQuestion = (questionId) => ['gender', 'age', 'height_cm', 'experience_level', 'goal', 'workouts_per_week'].includes(questionId)
+
+  const saveProfile = async (values, complete = false) => {
+    const payload = {
+      gender: values.gender || null,
+      age: toNumberOrNull(values.age),
+      height_cm: toNumberOrNull(values.height_cm),
+      experience_level: values.experience_level || null,
+      goal: values.goal || null,
+      workouts_per_week: toNumberOrNull(values.workouts_per_week),
+      onboarding_complete: complete
+    }
+    await updateProfile(payload)
+  }
+
+  const saveMeasurements = async (values) => {
+    const bodyFat = calcBodyFat(
+      values.gender,
+      toNumberOrNull(values.waist_cm),
+      toNumberOrNull(values.neck_cm),
+      toNumberOrNull(values.hip_cm),
+      toNumberOrNull(values.height_cm)
+    )
+
+    if (!values.weight && !values.neck_cm && !values.waist_cm && !values.hip_cm) return
+
+    await fetch(`${API}/user/measurements`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+      body: JSON.stringify({
+        weight: toNumberOrNull(values.weight),
+        neck_cm: toNumberOrNull(values.neck_cm),
+        waist_cm: toNumberOrNull(values.waist_cm),
+        hip_cm: toNumberOrNull(values.hip_cm),
+        body_fat_pct: bodyFat
+      })
+    })
+  }
+
+  const saveStrength = async (values) => {
+    if (!values.bench_1rm && !values.squat_1rm && !values.deadlift_1rm) return
+
+    await fetch(`${API}/user/strength`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+      body: JSON.stringify({
+        bench_1rm: toNumberOrNull(values.bench_1rm),
+        squat_1rm: toNumberOrNull(values.squat_1rm),
+        deadlift_1rm: toNumberOrNull(values.deadlift_1rm)
+      })
+    })
+  }
+
+  const maybeAutoSave = async (questionId, nextData, nextIndex) => {
+    if (isProfileQuestion(questionId)) {
+      await saveProfile(nextData, false)
+    }
+
+    if (isMeasurementQuestion(questionId)) {
+      const nextQuestion = nextIndex !== null ? questions[nextIndex] : null
+      if (!nextQuestion || !isMeasurementQuestion(nextQuestion.id)) {
+        await saveMeasurements(nextData)
+      }
+    }
+
+    if (isStrengthQuestion(questionId)) {
+      const nextQuestion = nextIndex !== null ? questions[nextIndex] : null
+      if (!nextQuestion || !isStrengthQuestion(nextQuestion.id)) {
+        await saveStrength(nextData)
+      }
+    }
+  }
+
+  const handleAnswer = async (answerValue, answerLabel = null) => {
+    if (!currentQuestion) return
+    const label = answerLabel ?? `${answerValue}`
+
+    setError('')
+
+    const nextData = applyAnswer(data, currentQuestion, answerValue)
+    const nextIndex = findNextIndex(currentIndex, nextData)
+
+    addMessage({ sender: 'user', text: label, questionIndex: currentIndex })
+    setAnswers(prev => [...prev, { questionIndex: currentIndex, value: answerValue, label }])
+    setData(nextData)
+    setInputValue('')
+
+    try {
+      await maybeAutoSave(currentQuestion.id, nextData, nextIndex)
+    } catch (err) {
+      console.error('Autosave error:', err)
+    }
+
+    if (nextIndex === null) {
+      setIsTyping(true)
+      typingTimeoutRef.current = setTimeout(async () => {
+        addMessage({
+          sender: 'coach',
+          text: 'Perfekt! Jag har allt jag behöver. Låt mig bygga ditt program...',
+          questionIndex: currentIndex + 1
+        })
+        setIsTyping(false)
+        await finishOnboarding(nextData)
+      }, 700)
+      return
+    }
+
+    setIsTyping(true)
+    typingTimeoutRef.current = setTimeout(() => {
+      addMessage({ sender: 'coach', text: getPrompt(questions[nextIndex], nextData), questionIndex: nextIndex })
+      setCurrentIndex(nextIndex)
+      setIsTyping(false)
+    }, 600)
+  }
+
+  const finishOnboarding = async (values) => {
+    setIsSaving(true)
+    try {
+      await saveProfile(values, true)
+      await saveMeasurements(values)
+      await saveStrength(values)
+      if (refreshProfile) await refreshProfile()
+      navigate('/')
+    } catch (err) {
+      console.error('Onboarding error:', err)
+      setIsSaving(false)
+    }
+  }
+
+  const handleTextSubmit = () => {
+    if (!currentQuestion) return
+    const raw = inputValue.trim()
+    if (!raw && !currentQuestion.optional) {
+      setError('Skriv ett svar för att gå vidare.')
+      return
+    }
+
+    let numericValue = raw
+    if (currentQuestion.inputType === 'number' && raw) {
+      const parsed = Number(raw)
+      if (Number.isNaN(parsed)) {
+        setError('Skriv ett giltigt nummer.')
+        return
+      }
+      const validationMessage = currentQuestion.validate ? currentQuestion.validate(parsed) : ''
+      if (validationMessage) {
+        setError(validationMessage)
+        return
+      }
+      numericValue = parsed
+    }
+
+    if (!raw && currentQuestion.optional) {
+      handleAnswer('', 'Hoppar')
+      return
+    }
+
+    const label = currentQuestion.unit ? `${raw} ${currentQuestion.unit}` : raw
+    handleAnswer(numericValue, label)
+  }
+
+  const handleQuickReply = (option) => {
+    if (option.action === 'back') {
+      handleBack()
+      return
+    }
+    if (option.action === 'skip') {
+      handleAnswer('', 'Hoppar')
+      return
+    }
+    handleAnswer(option.value, option.label)
+  }
+
+  const handleBack = () => {
+    if (!answers.length) return
+    const lastAnswer = answers[answers.length - 1]
+    const targetIndex = lastAnswer.questionIndex
+    const trimmedMessages = [...messages]
+    const lastCoachIndex = trimmedMessages
+      .map((msg, idx) => (msg.sender === 'coach' && msg.questionIndex === targetIndex ? idx : -1))
+      .filter(idx => idx !== -1)
+      .pop()
+
+    if (lastCoachIndex !== undefined) {
+      trimmedMessages.splice(lastCoachIndex + 1)
+    }
+
+    const updatedAnswers = answers.slice(0, -1)
+    setAnswers(updatedAnswers)
+    setMessages(trimmedMessages)
+    setCurrentIndex(targetIndex)
+    setData(rebuildDataFromAnswers(updatedAnswers))
+    setIsTyping(false)
+    setInputValue('')
+    setError('')
+  }
+
+  const renderInputArea = () => {
+    if (!currentQuestion) return null
+
+    if (currentQuestion.type === 'options') {
+      const options = [...currentQuestion.options]
+      const actionOptions = []
+      if (currentQuestion.optional) {
+        actionOptions.push({ label: 'Hoppa över', action: 'skip', variant: 'ghost' })
+      }
+      if (answers.length) {
+        actionOptions.push({ label: 'Ändra senaste', action: 'back', variant: 'ghost' })
+      }
+
+      return (
+        <>
+          <QuickReplies
+            options={[...options, ...actionOptions]}
+            onSelect={handleQuickReply}
+            disabled={isTyping || isSaving}
+          />
+        </>
+      )
+    }
+
+    const actionOptions = []
+    if (currentQuestion.optional) {
+      actionOptions.push({ label: 'Hoppa över', action: 'skip', variant: 'ghost' })
+    }
+    if (answers.length) {
+      actionOptions.push({ label: 'Ändra senaste', action: 'back', variant: 'ghost' })
+    }
+
+    return (
+      <div className="chat-input-area">
+        <div className="chat-input-row">
+          <input
+            type={currentQuestion.inputType || 'text'}
+            inputMode={currentQuestion.inputType === 'number' ? 'numeric' : 'text'}
+            placeholder={currentQuestion.placeholder}
+            value={inputValue}
+            onChange={event => setInputValue(event.target.value)}
+            onKeyDown={event => {
+              if (event.key === 'Enter') handleTextSubmit()
+            }}
+            disabled={isTyping || isSaving}
+          />
+          <button
+            type="button"
+            className="send-btn"
+            onClick={handleTextSubmit}
+            disabled={isTyping || isSaving}
+          >
+            Skicka
+          </button>
+        </div>
+        {error && <div className="chat-error">{error}</div>}
+        <QuickReplies
+          options={actionOptions}
+          onSelect={handleQuickReply}
+          disabled={isTyping || isSaving}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="chat-onboarding">
+      <div className="chat-shell">
+        <header className="chat-header">
+          <div>
+            <p className="chat-subtitle">Coach</p>
+            <h1>Personlig onboarding</h1>
+          </div>
+          <span className={`chat-status ${isSaving ? 'saving' : ''}`}>
+            {isSaving ? 'Sparar...' : 'Redo'}
+          </span>
+        </header>
+
+        <div className="chat-messages">
+          {messages.map(message => (
+            message.sender === 'coach' ? (
+              <CoachMessage key={message.id} text={message.text} />
+            ) : (
+              <UserMessage key={message.id} text={message.text} />
+            )
+          ))}
+          {isTyping && <CoachMessage typing />}
+          <div ref={endRef}></div>
+        </div>
+
+        <div className="chat-actions">
+          {renderInputArea()}
+        </div>
+      </div>
+    </div>
+  )
+}