389 lines
16 KiB
Vue
389 lines
16 KiB
Vue
<script setup>
|
||
import { computed, nextTick, ref } from 'vue'
|
||
import { chatBaustein, createVertiefung, fetchVertiefung, pruefeBaustein } from '../api.js'
|
||
import { renderMarkdown } from '../markdown.js'
|
||
import { useChat, istUnten } from '../composables/useChat.js'
|
||
|
||
const props = defineProps({
|
||
topic: { type: String, required: true },
|
||
baustein: { type: String, required: true },
|
||
section: { type: String, default: '' },
|
||
provider: { type: String, default: 'claude' },
|
||
status: { type: Object, default: null }, // {gute_antworten, absolviert, verstanden, vertiefung}
|
||
tier2: { type: Boolean, default: false }, // Mastery frei (ganzer Guide absolviert)
|
||
})
|
||
|
||
const emit = defineEmits(['statusChanged'])
|
||
|
||
const NOETIG = 3 // absolviert
|
||
const MAX = 10 // verstanden
|
||
const st = computed(() => props.status || { gute_antworten: 0, absolviert: false, verstanden: false, vertiefung: false, deepdive: false })
|
||
|
||
// --- Toggle-Bereich ---
|
||
const activeTab = ref(null) // null | 'vertiefung' | 'deepdive' | 'chat' | 'pruefung'
|
||
|
||
function toggle(tab) {
|
||
activeTab.value = activeTab.value === tab ? null : tab
|
||
if (activeTab.value === 'vertiefung' || activeTab.value === 'deepdive') openText(activeTab.value)
|
||
}
|
||
|
||
// --- Vertiefung (gleicher Stoff, mehr) + Amateur (gleicher Stoff, für Einsteiger), beide persistiert (intern art 'deepdive') ---
|
||
const texte = ref({
|
||
vertiefung: { md: null, loading: false, error: '' },
|
||
deepdive: { md: null, loading: false, error: '' },
|
||
})
|
||
|
||
async function openText(art) {
|
||
const t = texte.value[art]
|
||
if (t.md !== null || t.loading || !st.value[art]) return
|
||
t.loading = true
|
||
t.error = ''
|
||
try {
|
||
t.md = (await fetchVertiefung(props.topic, props.baustein, art)).md
|
||
} catch (e) {
|
||
t.error = e.message
|
||
} finally {
|
||
t.loading = false
|
||
}
|
||
}
|
||
|
||
async function generateText(art) {
|
||
const t = texte.value[art]
|
||
t.loading = true
|
||
t.error = ''
|
||
try {
|
||
t.md = (await createVertiefung({
|
||
topic: props.topic, baustein: props.baustein, section: props.section, art, provider: props.provider,
|
||
})).md
|
||
emit('statusChanged', { ...st.value, [art]: true })
|
||
} catch (e) {
|
||
t.error = e.message
|
||
} finally {
|
||
t.loading = false
|
||
}
|
||
}
|
||
|
||
// --- Bausteinchat (flüchtig) ---
|
||
const chat = useChat((msgs) => chatBaustein({
|
||
topic: props.topic, baustein: props.baustein, section: props.section,
|
||
messages: msgs, provider: props.provider,
|
||
}))
|
||
|
||
// --- Prüfung: gesteuerter Dialog (Verlauf flüchtig, Zähler serverseitig) ---
|
||
// Phasen: 'idle' (Frage anfordern) | 'frage_offen' (antworten/nachfragen) | 'bewertet' (diskutieren/neu bewerten/weiter)
|
||
const pruefMessages = ref([]) // {role, kind: 'frage'|'nachfrage'|'antwort'|'feedback'|'diskussion'|'fehler', content, bewertung?}
|
||
const pruefInput = ref('')
|
||
const pruefPhase = ref('idle')
|
||
const pruefLoading = ref(false)
|
||
const aktuelleFrage = ref('') // ankert Bewertung/Diskussion
|
||
const letztesFeedback = ref('') // Kontext für die Diskussion über eine Bewertung
|
||
const scoreVorFrage = ref(0) // Score, als die aktuelle Frage gestellt wurde → driftfreies (Re-)Bewerten
|
||
const pruefMessagesEl = ref(null)
|
||
const pruefInputEl = ref(null)
|
||
const pruefStick = ref(true) // nur auto-scrollen, wenn der Nutzer (fast) unten ist
|
||
let pruefRun = 0
|
||
|
||
function onPruefScroll() {
|
||
if (pruefMessagesEl.value) pruefStick.value = istUnten(pruefMessagesEl.value)
|
||
}
|
||
|
||
function applyPruefung(res) {
|
||
emit('statusChanged', { ...st.value, gute_antworten: res.gute_antworten, absolviert: res.absolviert, verstanden: res.verstanden })
|
||
}
|
||
|
||
async function pruefScroll() {
|
||
await nextTick()
|
||
if (pruefMessagesEl.value && pruefStick.value) pruefMessagesEl.value.scrollTop = pruefMessagesEl.value.scrollHeight
|
||
}
|
||
|
||
// Nur echte Gesprächs-Turns ans Backend; Feedback bleibt reines UI-Artefakt.
|
||
function pruefDialog() {
|
||
return pruefMessages.value
|
||
.filter((m) => m.kind !== 'feedback' && m.kind !== 'fehler')
|
||
.map((m) => ({ role: m.role, content: m.content }))
|
||
}
|
||
|
||
async function pruefSenden(payload, onOk) {
|
||
const run = ++pruefRun
|
||
pruefStick.value = true // eigene Aktion = ans Ende; Hochscrollen während des Wartens setzt es wieder false
|
||
pruefLoading.value = true
|
||
pruefScroll()
|
||
try {
|
||
const res = await pruefeBaustein({
|
||
topic: props.topic, baustein: props.baustein, section: props.section,
|
||
provider: props.provider, messages: pruefDialog(), ...payload,
|
||
})
|
||
if (run !== pruefRun) return
|
||
onOk(res)
|
||
applyPruefung(res)
|
||
pruefScroll()
|
||
nextTick(() => pruefInputEl.value?.focus())
|
||
} catch {
|
||
if (run === pruefRun) pruefMessages.value.push({ role: 'assistant', kind: 'fehler', content: 'Hat nicht geklappt — bitte erneut.' })
|
||
} finally {
|
||
if (run === pruefRun) pruefLoading.value = false
|
||
}
|
||
}
|
||
|
||
function frageAnfordern() {
|
||
if (pruefLoading.value) return
|
||
pruefSenden({ aktion: 'frage' }, (res) => {
|
||
aktuelleFrage.value = res.frage
|
||
letztesFeedback.value = ''
|
||
scoreVorFrage.value = res.gute_antworten // Basis für (Re-)Bewertung dieser Frage
|
||
pruefMessages.value.push({ role: 'assistant', kind: 'frage', content: res.frage })
|
||
pruefPhase.value = 'frage_offen'
|
||
})
|
||
}
|
||
|
||
function nachfragen() {
|
||
const text = pruefInput.value.trim()
|
||
if (!text || pruefLoading.value) return
|
||
pruefMessages.value.push({ role: 'user', kind: 'nachfrage', content: text })
|
||
pruefInput.value = ''
|
||
pruefSenden(
|
||
{ aktion: 'diskussion', frage: aktuelleFrage.value, letzte_bewertung: letztesFeedback.value },
|
||
(res) => pruefMessages.value.push({ role: 'assistant', kind: 'diskussion', content: res.reply }),
|
||
)
|
||
}
|
||
|
||
function bewerten(res) {
|
||
letztesFeedback.value = res.feedback || ''
|
||
pruefMessages.value.push({ role: 'assistant', kind: 'feedback', content: res.feedback || '', bewertung: res.bewertung })
|
||
pruefPhase.value = 'bewertet'
|
||
}
|
||
|
||
function antwortAbgeben() {
|
||
const text = pruefInput.value.trim()
|
||
if (!text || pruefLoading.value) return
|
||
pruefMessages.value.push({ role: 'user', kind: 'antwort', content: text })
|
||
pruefInput.value = ''
|
||
pruefSenden({ aktion: 'antwort', frage: aktuelleFrage.value, score_vor_frage: scoreVorFrage.value, tier2: props.tier2 }, bewerten)
|
||
}
|
||
|
||
function neuBewerten() {
|
||
if (pruefLoading.value) return
|
||
pruefSenden({ aktion: 'antwort', frage: aktuelleFrage.value, score_vor_frage: scoreVorFrage.value, tier2: props.tier2 }, bewerten)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="bp">
|
||
<div class="bp-toggles">
|
||
<button :class="{ active: activeTab === 'vertiefung' }" @click="toggle('vertiefung')">
|
||
Vertiefung
|
||
</button>
|
||
<button :class="{ active: activeTab === 'deepdive' }" @click="toggle('deepdive')">
|
||
Amateur
|
||
</button>
|
||
<button :class="{ active: activeTab === 'chat' }" @click="toggle('chat')">
|
||
Chat
|
||
</button>
|
||
<button :class="{ active: activeTab === 'pruefung' }" @click="toggle('pruefung')">
|
||
Prüfung
|
||
<span v-if="st.verstanden" class="bp-chip gold" title="Verstanden (10/10)">✓✓</span>
|
||
<span v-else-if="st.absolviert && tier2" class="bp-chip done">✓ {{ st.gute_antworten }}/{{ MAX }}</span>
|
||
<span v-else-if="st.absolviert" class="bp-chip done">✓</span>
|
||
<span v-else-if="st.gute_antworten" class="bp-chip">{{ Math.min(st.gute_antworten, NOETIG) }}/{{ NOETIG }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="activeTab" class="bp-panel">
|
||
<!-- Vertiefung (gleicher Stoff, mehr) / Amateur (gleicher Stoff, für Einsteiger) -->
|
||
<div v-if="activeTab === 'vertiefung' || activeTab === 'deepdive'">
|
||
<p v-if="texte[activeTab].loading" class="bp-hint">{{ texte[activeTab].md === null ? 'Generiere…' : 'Lade…' }}</p>
|
||
<template v-else-if="texte[activeTab].md">
|
||
<div class="markdown" v-html="renderMarkdown(texte[activeTab].md)"></div>
|
||
<button class="bp-action" @click="generateText(activeTab)">Neu generieren</button>
|
||
</template>
|
||
<template v-else>
|
||
<p class="bp-hint">{{ activeTab === 'deepdive' ? 'Noch keine Amateur-Fassung zu diesem Baustein.' : 'Noch keine Vertiefung zu diesem Baustein.' }}</p>
|
||
<button class="bp-action" @click="generateText(activeTab)">
|
||
{{ activeTab === 'deepdive' ? 'Amateur generieren' : 'Vertiefung generieren' }}
|
||
</button>
|
||
</template>
|
||
<p v-if="texte[activeTab].error" class="bp-error">{{ texte[activeTab].error }}</p>
|
||
</div>
|
||
|
||
<!-- Bausteinchat -->
|
||
<div v-else-if="activeTab === 'chat'">
|
||
<div :ref="chat.messagesEl" class="bp-messages" @scroll="chat.onScroll">
|
||
<p v-if="!chat.messages.value.length" class="bp-hint">Frag etwas zu diesem Baustein. Der Verlauf wird nicht gespeichert.</p>
|
||
<template v-for="(m, i) in chat.messages.value" :key="i">
|
||
<div v-if="m.role === 'assistant'" class="bp-msg assistant markdown" v-html="renderMarkdown(m.content)"></div>
|
||
<div v-else class="bp-msg user">{{ m.content }}</div>
|
||
</template>
|
||
<div v-if="chat.loading.value" class="bp-msg assistant bp-typing">Denkt…</div>
|
||
</div>
|
||
<div class="bp-input">
|
||
<textarea
|
||
:ref="chat.inputEl"
|
||
v-model="chat.input.value"
|
||
rows="2"
|
||
placeholder="Frage zum Baustein…"
|
||
@keydown.enter.exact.prevent="chat.send"
|
||
></textarea>
|
||
<button :disabled="!chat.input.value.trim() && !chat.loading.value" :class="{ cancel: chat.loading.value }" @click="chat.send">
|
||
{{ chat.loading.value ? '✕' : '➤' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prüfung: gesteuerter Dialog -->
|
||
<div v-else>
|
||
<p class="bp-hint">
|
||
<template v-if="st.verstanden">✓✓ Verstanden ({{ st.gute_antworten }}/{{ MAX }}) — Gold bleibt dir.</template>
|
||
<template v-else-if="st.absolviert && tier2">Mastery: {{ st.gute_antworten }}/{{ MAX }}. Richtig = +1, falsch = −1 (nicht unter {{ NOETIG }}). Bei {{ MAX }} verstanden.</template>
|
||
<template v-else-if="st.absolviert">✓ Absolviert. Mehr ({{ NOETIG }}→{{ MAX }}) gibt's, sobald der ganze Guide absolviert ist.</template>
|
||
<template v-else>{{ Math.min(st.gute_antworten, NOETIG) }}/{{ NOETIG }} guten Antworten. Frag nach, wenn etwas unklar ist — diskutieren ist erlaubt.</template>
|
||
</p>
|
||
|
||
<div v-if="pruefMessages.length" :ref="pruefMessagesEl" class="bp-messages" @scroll="onPruefScroll">
|
||
<template v-for="(m, i) in pruefMessages" :key="i">
|
||
<div v-if="m.kind === 'feedback'" class="bp-feedback" :class="m.bewertung">{{ m.content }}</div>
|
||
<div v-else-if="m.kind === 'fehler'" class="bp-error">{{ m.content }}</div>
|
||
<div v-else-if="m.role === 'assistant'" class="bp-msg assistant markdown" v-html="renderMarkdown(m.content)"></div>
|
||
<div v-else class="bp-msg user">{{ m.content }}</div>
|
||
</template>
|
||
<div v-if="pruefLoading" class="bp-msg assistant bp-typing">…</div>
|
||
</div>
|
||
|
||
<!-- Phase idle: Frage anfordern -->
|
||
<div v-if="pruefPhase === 'idle'" class="bp-actions">
|
||
<button class="bp-action primary" :disabled="pruefLoading" @click="frageAnfordern">Frage anfordern</button>
|
||
</div>
|
||
|
||
<!-- Phase frage_offen / bewertet: Textfeld + Aktionen -->
|
||
<template v-else>
|
||
<div class="bp-input">
|
||
<textarea
|
||
:ref="pruefInputEl"
|
||
v-model="pruefInput"
|
||
rows="2"
|
||
:placeholder="pruefPhase === 'frage_offen' ? 'Antwort — oder Nachfrage bei Unklarheit…' : 'Nachhaken oder diskutieren…'"
|
||
></textarea>
|
||
</div>
|
||
<div class="bp-actions">
|
||
<template v-if="pruefPhase === 'frage_offen'">
|
||
<button class="bp-action" :disabled="pruefLoading || !pruefInput.trim()" @click="nachfragen">Nachfragen</button>
|
||
<button class="bp-action primary" :disabled="pruefLoading || !pruefInput.trim()" @click="antwortAbgeben">Antwort abgeben</button>
|
||
</template>
|
||
<template v-else>
|
||
<button class="bp-action" :disabled="pruefLoading || !pruefInput.trim()" @click="nachfragen">Nachhaken</button>
|
||
<button class="bp-action" :disabled="pruefLoading" @click="neuBewerten">Neu bewerten</button>
|
||
<button class="bp-action primary" :disabled="pruefLoading" @click="frageAnfordern">Nächste Frage</button>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.bp { margin-top: 0.75rem; }
|
||
|
||
.bp-toggles { display: flex; gap: 0.4rem; }
|
||
.bp-toggles button {
|
||
display: inline-flex; align-items: center; gap: 0.35rem;
|
||
padding: 0.25rem 0.7rem;
|
||
font-size: 0.8rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
background: var(--panel-soft);
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
}
|
||
.bp-toggles button:hover { border-color: var(--border-strong); color: var(--text); }
|
||
.bp-toggles button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
|
||
|
||
.bp-chip {
|
||
font-size: 0.7rem;
|
||
padding: 0 0.35rem;
|
||
border-radius: 999px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-muted);
|
||
}
|
||
.bp-chip.done { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
|
||
.bp-chip.gold { background: color-mix(in srgb, #d4af37 20%, var(--panel)); border-color: #d4af37; color: #8a6d12; }
|
||
|
||
.bp-panel {
|
||
margin-top: 0.6rem;
|
||
padding: 0.75rem 0.9rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--panel-soft);
|
||
}
|
||
|
||
.bp-hint { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.5rem; }
|
||
.bp-error { font-size: 0.85rem; color: var(--danger); margin: 0.5rem 0 0; }
|
||
|
||
.bp-action {
|
||
margin-top: 0.5rem;
|
||
padding: 0.3rem 0.8rem;
|
||
font-size: 0.8rem;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 6px;
|
||
background: var(--panel);
|
||
color: var(--text);
|
||
cursor: pointer;
|
||
}
|
||
.bp-action:hover { border-color: var(--accent); }
|
||
.bp-action:disabled { opacity: 0.5; cursor: default; }
|
||
.bp-action.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
|
||
.bp-action.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
||
|
||
.bp-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
|
||
.bp-actions .bp-action { margin-top: 0; }
|
||
|
||
.bp-messages { display: flex; flex-direction: column; gap: 0.4rem; max-height: 320px; overflow-y: auto; }
|
||
.bp-msg {
|
||
max-width: 88%;
|
||
padding: 0.4rem 0.65rem;
|
||
border-radius: 10px;
|
||
font-size: 0.88rem;
|
||
line-height: 1.45;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.bp-msg.user { align-self: flex-end; background: var(--accent); color: var(--on-accent); white-space: pre-wrap; }
|
||
.bp-msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); }
|
||
.bp-typing { color: var(--text-faint); font-style: italic; }
|
||
|
||
/* Bewertung der letzten Antwort — getrennt über der nächsten Frage */
|
||
.bp-feedback {
|
||
align-self: flex-start;
|
||
max-width: 88%;
|
||
padding: 0.3rem 0.6rem;
|
||
border-radius: 8px;
|
||
font-size: 0.82rem;
|
||
line-height: 1.4;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.bp-feedback.gut { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
|
||
.bp-feedback.schlecht { background: var(--danger-soft, #fee2e2); border-color: var(--danger-border, #f87171); color: var(--danger); }
|
||
|
||
.bp-input { display: flex; gap: 0.4rem; margin-top: 0.55rem; align-items: flex-end; }
|
||
.bp-input textarea {
|
||
flex: 1;
|
||
resize: none;
|
||
padding: 0.45rem 0.6rem;
|
||
font: inherit;
|
||
font-size: 0.88rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--panel);
|
||
color: var(--text);
|
||
}
|
||
.bp-input button {
|
||
padding: 0.45rem 0.7rem;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: var(--accent);
|
||
color: var(--on-accent);
|
||
cursor: pointer;
|
||
}
|
||
.bp-input button:disabled { opacity: 0.5; cursor: default; }
|
||
.bp-input button.cancel { background: var(--danger); }
|
||
</style>
|