update

frontend/src/components/BausteinPanel.vue

@@ -15,47 +15,50 @@ const props = defineProps({
 const emit = defineEmits(['statusChanged'])
 
 const NOETIG = 3
-const st = computed(() => props.status || { gute_antworten: 0, absolviert: false, vertiefung: false })
+const st = computed(() => props.status || { gute_antworten: 0, absolviert: false, vertiefung: false, deepdive: false })
 
 // --- Toggle-Bereich ---
-const activeTab = ref(null) // null | 'vertiefung' | 'chat' | 'pruefung'
+const activeTab = ref(null) // null | 'vertiefung' | 'deepdive' | 'chat' | 'pruefung'
 
 function toggle(tab) {
   activeTab.value = activeTab.value === tab ? null : tab
-  if (activeTab.value === 'vertiefung') openVertiefung()
+  if (activeTab.value === 'vertiefung' || activeTab.value === 'deepdive') openText(activeTab.value)
   if (activeTab.value === 'pruefung') startPruefung()
 }
 
-// --- Vertiefung (persistiert) ---
-const vert = ref(null)
-const vertLoading = ref(false)
-const vertError = ref('')
+// --- Vertiefung (kurz) + Deep Dive (lang), beide persistiert ---
+const texte = ref({
+  vertiefung: { md: null, loading: false, error: '' },
+  deepdive: { md: null, loading: false, error: '' },
+})
 
-async function openVertiefung() {
-  if (vert.value !== null || vertLoading.value || !st.value.vertiefung) return
-  vertLoading.value = true
-  vertError.value = ''
+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 {
-    vert.value = (await fetchVertiefung(props.topic, props.baustein)).md
+    t.md = (await fetchVertiefung(props.topic, props.baustein, art)).md
   } catch (e) {
-    vertError.value = e.message
+    t.error = e.message
   } finally {
-    vertLoading.value = false
+    t.loading = false
   }
 }
 
-async function generateVertiefung() {
-  vertLoading.value = true
-  vertError.value = ''
+async function generateText(art) {
+  const t = texte.value[art]
+  t.loading = true
+  t.error = ''
   try {
-    vert.value = (await createVertiefung({
-      topic: props.topic, baustein: props.baustein, section: props.section, provider: props.provider,
+    t.md = (await createVertiefung({
+      topic: props.topic, baustein: props.baustein, section: props.section, art, provider: props.provider,
     })).md
-    emit('statusChanged', { ...st.value, vertiefung: true })
+    emit('statusChanged', { ...st.value, [art]: true })
   } catch (e) {
-    vertError.value = e.message
+    t.error = e.message
   } finally {
-    vertLoading.value = false
+    t.loading = false
   }
 }
 
@@ -109,6 +112,9 @@ async function startPruefung() {
       <button :class="{ active: activeTab === 'vertiefung' }" @click="toggle('vertiefung')">
         Vertiefung
       </button>
+      <button :class="{ active: activeTab === 'deepdive' }" @click="toggle('deepdive')">
+        Deep Dive
+      </button>
       <button :class="{ active: activeTab === 'chat' }" @click="toggle('chat')">
         Chat
       </button>
@@ -120,18 +126,20 @@ async function startPruefung() {
     </div>
 
     <div v-if="activeTab" class="bp-panel">
-      <!-- Vertiefung -->
-      <div v-if="activeTab === 'vertiefung'">
-        <p v-if="vertLoading" class="bp-hint">{{ vert === null ? 'Generiere Vertiefung…' : 'Lade…' }}</p>
-        <template v-else-if="vert">
-          <div class="markdown" v-html="renderMarkdown(vert)"></div>
-          <button class="bp-action" @click="generateVertiefung">Neu generieren</button>
+      <!-- Vertiefung (kurz) / Deep Dive (lang) -->
+      <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">Noch keine Vertiefung zu diesem Baustein.</p>
-          <button class="bp-action" @click="generateVertiefung">Vertiefung generieren</button>
+          <p class="bp-hint">{{ activeTab === 'deepdive' ? 'Noch kein Deep Dive zu diesem Baustein.' : 'Noch keine Vertiefung zu diesem Baustein.' }}</p>
+          <button class="bp-action" @click="generateText(activeTab)">
+            {{ activeTab === 'deepdive' ? 'Deep Dive generieren' : 'Vertiefung generieren' }}
+          </button>
         </template>
-        <p v-if="vertError" class="bp-error">{{ vertError }}</p>
+        <p v-if="texte[activeTab].error" class="bp-error">{{ texte[activeTab].error }}</p>
       </div>
 
       <!-- Bausteinchat -->