update

frontend/src/App.vue

@@ -4,12 +4,14 @@ import { fetchGuides, createGuide as apiCreate, deleteGuide, cancelGuide as apiC
 import TopicSidebar from './components/TopicSidebar.vue'
 import TopicDetail from './components/TopicDetail.vue'
 import BausteineView from './components/BausteineView.vue'
+import HelpChat from './components/HelpChat.vue'
 
 const guides = ref([])
 const manualTopics = ref([])
 const selectedTopic = ref(null)
 const previewGuide = ref(null)
 const showBausteine = ref(false)
+const showHelp = ref(false)
 const bausteineRefreshKey = ref(0)
 const sidebarPinned = ref(localStorage.getItem('sidebarPinned') !== 'false')
 const sidebarSticky = ref(false)
@@ -94,6 +96,7 @@ function selectTopic(topic) {
   selectedTopic.value = topic
   previewGuide.value = null
   showBausteine.value = false
+  showHelp.value = false
   nextTick(autoPreview)
 }
 
@@ -103,6 +106,11 @@ function createTopic(topic) {
   }
   selectedTopic.value = topic
   previewGuide.value = null
+  showHelp.value = false
+}
+
+function onHelpSelect(title) {
+  createTopic(title)
 }
 
 async function handleFormatClick({ format, instructions }) {
@@ -221,9 +229,15 @@ onUnmounted(() => {
       @addBaustein="handleSidebarAddBaustein"
       @togglePin="toggleSidebarPin"
       @sidebarLeave="onSidebarLeave"
+      @openHelp="showHelp = true"
+    />
+    <HelpChat
+      v-if="showHelp"
+      @close="showHelp = false"
+      @selectTopic="onHelpSelect"
     />
     <BausteineView
-      v-if="selectedTopic && showBausteine"
+      v-else-if="selectedTopic && showBausteine"
       :topic="selectedTopic"
       :refreshKey="bausteineRefreshKey"
     />

frontend/src/api.js

@@ -44,6 +44,15 @@ export function htmlUrl(id) {
   return `${BASE}/guides/${id}/html`
 }
 
+export async function suggestTopics(problem) {
+  const res = await fetch(`${BASE}/topic-suggestions`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ problem }),
+  })
+  return res.json()
+}
+
 export async function fetchBausteine(topic) {
   const res = await fetch(`${BASE}/bausteine?topic=${encodeURIComponent(topic)}`)
   return res.json()

frontend/src/components/HelpChat.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { ref } from 'vue'
+import { suggestTopics } from '../api.js'
+
+const emit = defineEmits(['close', 'selectTopic'])
+
+const problem = ref('')
+const loading = ref(false)
+const submitted = ref(false)
+const suggestions = ref([])
+const error = ref(false)
+
+async function submit() {
+  const text = problem.value.trim()
+  if (!text || loading.value) return
+  loading.value = true
+  submitted.value = true
+  error.value = false
+  suggestions.value = []
+  try {
+    const result = await suggestTopics(text)
+    suggestions.value = Array.isArray(result) ? result : []
+  } catch (e) {
+    error.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+function pick(title) {
+  emit('selectTopic', title)
+}
+</script>
+
+<template>
+  <main class="help-chat">
+    <header class="help-header">
+      <h2>Passendes Thema finden</h2>
+      <button class="close-btn" title="Schließen" @click="emit('close')">×</button>
+    </header>
+
+    <div class="help-body">
+      <p class="hint">Beschreibe dein Problem oder Lernziel – die KI schlägt dir passende Themen-Namen vor, zu denen du einen Guide generieren kannst.</p>
+
+      <div class="input-row">
+        <textarea
+          v-model="problem"
+          placeholder="Womit hast du Probleme? Was möchtest du lernen?"
+          :disabled="loading"
+          @keyup.enter.exact.prevent="submit"
+        ></textarea>
+        <button
+          class="send-btn"
+          :disabled="!problem.trim() || loading"
+          @click="submit"
+        >{{ loading ? '…' : 'Themen finden' }}</button>
+      </div>
+
+      <div v-if="loading" class="status">Suche Themen…</div>
+      <div v-else-if="error" class="status error">Fehler bei der Anfrage. Bitte erneut versuchen.</div>
+      <div v-else-if="submitted && !suggestions.length" class="status">Keine Vorschläge gefunden.</div>
+
+      <ul v-else class="suggestions">
+        <li v-for="(s, i) in suggestions" :key="i" class="suggestion" @click="pick(s.title)">
+          <span class="suggestion-title">{{ s.title }}</span>
+          <span class="suggestion-reason" v-if="s.reason">{{ s.reason }}</span>
+        </li>
+      </ul>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.help-chat {
+  flex: 1;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f8f9fb;
+  overflow: hidden;
+}
+
+.help-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background: #fff;
+  border-bottom: 1px solid #e2e5e9;
+}
+
+.help-header h2 {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.close-btn {
+  border: none;
+  background: none;
+  font-size: 1.6rem;
+  line-height: 1;
+  color: #4b5563;
+  cursor: pointer;
+  padding: 0 6px;
+}
+
+.close-btn:hover {
+  color: #6366f1;
+}
+
+.help-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  max-width: 760px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.hint {
+  color: #5a6470;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+}
+
+.input-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.input-row textarea {
+  flex: 1;
+  min-height: 70px;
+  resize: vertical;
+  padding: 8px 10px;
+  border: 1px solid #d8dde3;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-family: inherit;
+  outline: none;
+}
+
+.input-row textarea:focus {
+  border-color: #6366f1;
+}
+
+.input-row textarea:disabled {
+  background: #f3f4f6;
+}
+
+.send-btn {
+  padding: 8px 14px;
+  border: none;
+  background: #6366f1;
+  color: #fff;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.send-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.status {
+  margin-top: 1.25rem;
+  color: #5a6470;
+  font-size: 0.9rem;
+}
+
+.status.error {
+  color: #991b1b;
+}
+
+.suggestions {
+  list-style: none;
+  margin-top: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.suggestion {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 14px;
+  background: #d1fae5;
+  border: 1px solid #34d399;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.suggestion:hover {
+  background: #a7f3d0;
+  border-color: #059669;
+}
+
+.suggestion-title {
+  font-weight: 700;
+  color: #065f46;
+}
+
+.suggestion-reason {
+  font-size: 0.82rem;
+  color: #047857;
+}
+</style>

frontend/src/components/TopicSidebar.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   pinned: { type: Boolean, default: true },
 })
 
-const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'preview', 'rework', 'showBausteine', 'addBaustein', 'togglePin', 'sidebarLeave'])
+const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'preview', 'rework', 'showBausteine', 'addBaustein', 'togglePin', 'sidebarLeave', 'openHelp'])
 
 const quickBausteinTitle = ref('')
 
@@ -140,6 +140,11 @@ function confirmDeleteTopic(topic) {
         :title="pinned ? 'Sidebar ausblenden' : 'Sidebar fixieren'"
         @click="emit('togglePin')"
       >{{ pinned ? '⇤' : '⇥' }}</button>
+      <button
+        class="help-btn"
+        title="Passendes Thema zu deinem Problem finden"
+        @click="emit('openHelp')"
+      >?</button>
       <input
         v-model="newTopic"
         placeholder="Neues Thema…"
@@ -285,6 +290,20 @@ function confirmDeleteTopic(topic) {
   border-color: #a5b4fc;
 }
 
+.new-topic .help-btn {
+  background: #f8f9fb;
+  color: #4b5563;
+  border: 1px solid #d8dde3;
+  font-weight: 700;
+  padding: 6px 9px;
+}
+
+.new-topic .help-btn:hover {
+  background: #ede9fe;
+  color: #4f46e5;
+  border-color: #a5b4fc;
+}
+
 .topic-list {
   list-style: none;
   flex: 1;