marek/creator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
team3
2026-06-30 00:14:18 +02:00
parent 3e3559aa8f
commit c794fcaccf
152 changed files with 9485 additions and 9583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/elements/ElementChatTab.vue
View File

@@ -13,7 +13,7 @@ const emit = defineEmits(['changes'])
const chat = useChat((msgs) => chatElement(props.element.id, msgs, props.provider))
const { messages, input, loading, messagesEl, inputEl, onScroll } = chat
// Anderes Element gewählt → Verlauf verwerfen
// Different element selected → discard history
watch(() => props.element.id, () => chat.reset())
async function send() {
@@ -25,23 +25,23 @@ async function send() {
<template>
<div class="el-chat">
<div ref="messagesEl" class="chat-messages" @scroll="onScroll">
<p v-if="!messages.length" class="chat-hint">Schreib, was am Element geändert werden soll.</p>
<p v-if="!messages.length" class="chat-hint">Write what should be changed on the element.</p>
<template v-for="(m, i) in messages" :key="i">
<div :class="['chat-msg', m.role]">{{ m.content }}</div>
</template>
<div v-if="loading" class="chat-msg assistant chat-typing">Passt an…</div>
<div v-if="loading" class="chat-msg assistant chat-typing">Adjusting…</div>
</div>
<div class="chat-input">
<textarea
ref="inputEl"
v-model="input"
placeholder="Element anpassen…"
placeholder="Adjust element…"
@keydown.enter.exact.prevent="send"
></textarea>
<button
:disabled="!input.trim() && !loading"
:class="{ cancel: loading }"
:title="loading ? 'Abbrechen' : 'Senden'"
:title="loading ? 'Cancel' : 'Send'"
@click="send"
>{{ loading ? '✕' : '➤' }}</button>
</div>

99
frontend/src/components/elements/ElementDetail.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import { ref, watch } from 'vue'
import { updateElement, checkElement, styleElement, refineSuggestion } from '../../api.js'
import { renderMarkdown } from '../../markdown.js'
import { renderMarkdown, plainText } from '../../markdown.js'
import ElementSuggestion from './ElementSuggestion.vue'
import ElementChatTab from './ElementChatTab.vue'
import ElementEditTab from './ElementEditTab.vue'
@@ -16,18 +16,15 @@ const emit = defineEmits(['back', 'close', 'updated', 'changed'])
const tab = ref('overview') // 'overview' | 'chat' | 'edit'
const savingEdit = ref(false)
// Markdown-Zeichen aus dem Header-Titel entfernen
function plain(text) {
return (text || '').replace(/```[a-z]*\n?/g, '').replace(/[`*_#]/g, '')
}
// Strip Markdown characters from the header title
// Anderes Element gewählt → Prüf-Zustand und Tab zurücksetzen
// Different element selected → reset exam state and tab
watch(() => props.element.id, () => {
tab.value = 'overview'
resetCheck()
})
// --- KI-Prüfung auf fehlende Infos (Ergebnisse landen als Inline-Vorschläge) ---
// --- AI exam for missing info (results land as inline suggestions) ---
const checking = ref(false)
const statusMsg = ref(null)
@@ -37,10 +34,10 @@ function resetCheck() {
resetStyle()
}
let checkRun = 0 // laufende Prüfung identifizieren; Abbruch ignoriert ihr Ergebnis
let checkRun = 0 // identify the running exam; cancellation ignores its result
async function runCheck() {
if (checking.value) { // zweiter Klick = abbrechen
if (checking.value) { // second click = cancel
checkRun++
checking.value = false
return
@@ -50,23 +47,23 @@ async function runCheck() {
statusMsg.value = null
try {
const res = await checkElement(props.element.id, props.provider)
if (run !== checkRun) return // abgebrochen oder neue Prüfung gestartet
if (run !== checkRun) return // cancelled or a new exam started
const mapped = res.suggestions.map((s) => ({
text: s.text, action: 'hinzufuegen', target: s.target, index: null, content: s.content,
text: s.text, action: 'add', target: s.target, index: null, content: s.content,
}))
if (mapped.length) styleChanges.value = [...(styleChanges.value || []), ...mapped]
else statusMsg.value = 'Keine wichtigen Lücken gefunden.'
else statusMsg.value = 'No important gaps found.'
} catch (e) {
if (run !== checkRun) return
console.error('Prüfung fehlgeschlagen:', e)
statusMsg.value = 'Prüfung fehlgeschlagen — bitte erneut versuchen.'
console.error('Exam failed:', e)
statusMsg.value = 'Exam failed — please try again.'
} finally {
if (run === checkRun) checking.value = false
}
}
// --- Stil-Prüfung: KI schlägt Änderungen vor, Nutzer bestätigt ---
const styleChanges = ref(null) // null = noch nicht geprüft
// --- Style exam: AI proposes changes, user confirms ---
const styleChanges = ref(null) // null = not yet examined
const styling = ref(false)
const applyingStyle = ref(false)
const refiningIdx = ref(null)
@@ -83,7 +80,7 @@ function suggBusy(i) {
return applyingStyle.value || refiningIdx.value === i
}
// Einzelnen Vorschlag per Anweisung überarbeiten (Stift-Icon)
// Refine a single suggestion via instruction (pencil icon)
async function refineChange(i, instruction) {
if (refiningIdx.value !== null || applyingStyle.value) return
refiningIdx.value = i
@@ -93,15 +90,15 @@ async function refineChange(i, instruction) {
next[i] = res.change
styleChanges.value = next
} catch (e) {
console.error('Überarbeitung fehlgeschlagen:', e)
statusMsg.value = 'Überarbeitung fehlgeschlagen — bitte erneut versuchen.'
console.error('Refinement failed:', e)
statusMsg.value = 'Refinement failed — please try again.'
} finally {
refiningIdx.value = null
}
}
async function runStyle() {
if (styling.value) { // zweiter Klick = abbrechen
if (styling.value) { // second click = cancel
styleRun++
styling.value = false
return
@@ -113,35 +110,35 @@ async function runStyle() {
const res = await styleElement(props.element.id, props.provider)
if (run !== styleRun) return
if (res.changes.length) styleChanges.value = [...(styleChanges.value || []), ...res.changes]
else statusMsg.value = 'Stil passt bereits.'
else statusMsg.value = 'Style already fits.'
} catch (e) {
if (run !== styleRun) return
console.error('Stil-Prüfung fehlgeschlagen:', e)
statusMsg.value = 'Stil-Prüfung fehlgeschlagen — bitte erneut versuchen.'
console.error('Style exam failed:', e)
statusMsg.value = 'Style exam failed — please try again.'
} finally {
if (run === styleRun) styling.value = false
}
}
// Chat-Vorschläge landen ebenfalls als Inline-Vorschläge in der Übersicht
// Chat suggestions also land as inline suggestions in the overview
function onChatChanges(changes) {
styleChanges.value = [...(styleChanges.value || []), ...changes]
}
// Vorschläge am Ziel-Ort anzeigen: anpassen/entfernen beim betroffenen Eintrag …
// Show suggestions at the target location: adjust/remove at the affected entry …
function styleAt(target, index = null) {
if (!styleChanges.value) return []
return styleChanges.value
.map((c, i) => [i, c])
.filter(([, c]) => c.target === target && c.index === index && c.action !== 'hinzufuegen')
.filter(([, c]) => c.target === target && c.index === index && c.action !== 'add')
}
// … Ergänzungen am Ende der jeweiligen Sektion
// … additions at the end of the respective section
function styleAdds(target) {
if (!styleChanges.value) return []
return styleChanges.value
.map((c, i) => [i, c])
.filter(([, c]) => c.target === target && c.action === 'hinzufuegen')
.filter(([, c]) => c.target === target && c.action === 'add')
}
function dismissStyleChange(i) {
@@ -160,8 +157,8 @@ async function applyStyleChange(i) {
examples: [...props.element.examples],
hints: [...props.element.hints],
}
if (c.action === 'entfernen') fields[c.target].splice(c.index, 1)
else if (c.action === 'hinzufuegen') {
if (c.action === 'remove') fields[c.target].splice(c.index, 1)
else if (c.action === 'add') {
if (c.target === 'title') fields.title = c.content
else if (c.target === 'description')
fields[c.target] = fields[c.target] ? fields[c.target] + '\n\n' + c.content : c.content
@@ -172,22 +169,22 @@ async function applyStyleChange(i) {
const updated = await updateElement(props.element.id, fields)
emit('updated', updated)
// Rest-Vorschläge behalten; Indizes hinter einer Entfernung rücken auf
// Keep remaining suggestions; indices after a removal shift up
const rest = styleChanges.value.filter((_, j) => j !== i)
if (c.action === 'entfernen') {
if (c.action === 'remove') {
for (const r of rest) {
if (r.target === c.target && r.index !== null && r.index > c.index) r.index--
}
}
styleChanges.value = rest
} catch (e) {
console.error('Übernehmen fehlgeschlagen:', e)
console.error('Apply failed:', e)
} finally {
applyingStyle.value = false
}
}
// --- Bearbeiten-Tab: Felder direkt speichern ---
// --- Edit tab: save fields directly ---
async function saveEdit(fields) {
if (savingEdit.value) return
savingEdit.value = true
@@ -196,7 +193,7 @@ async function saveEdit(fields) {
emit('updated', updated)
tab.value = 'overview'
} catch (e) {
console.error('Speichern fehlgeschlagen:', e)
console.error('Save failed:', e)
} finally {
savingEdit.value = false
}
@@ -205,26 +202,26 @@ async function saveEdit(fields) {
<template>
<header class="el-header">
<button class="el-back" title="Zur Liste" @click="emit('back')">←</button>
<span class="el-title">{{ plain(element.title) }}</span>
<button class="el-back" title="Back to list" @click="emit('back')">←</button>
<span class="el-title">{{ plainText(element.title) }}</span>
<button
class="el-tool" :class="{ busy: checking }"
:title="checking ? 'Prüfung abbrechen' : 'Auf fehlende Infos prüfen'" @click="runCheck"
:title="checking ? 'Cancel exam' : 'Check for missing info'" @click="runCheck"
>🔍</button>
<button
class="el-tool" :class="{ busy: styling }"
:title="styling ? 'Prüfung abbrechen' : 'Stil prüfen & anpassen'" @click="runStyle"
:title="styling ? 'Cancel exam' : 'Check & adjust style'" @click="runStyle"
>✨</button>
<button class="el-close" title="Schließen" @click="emit('close')">×</button>
<button class="el-close" title="Close" @click="emit('close')">×</button>
</header>
<nav class="el-tabs">
<button :class="{ active: tab === 'overview' }" @click="tab = 'overview'">Übersicht</button>
<button :class="{ active: tab === 'overview' }" @click="tab = 'overview'">Overview</button>
<button :class="{ active: tab === 'chat' }" @click="tab = 'chat'">Chat</button>
<button :class="{ active: tab === 'edit' }" @click="tab = 'edit'">Bearbeiten</button>
<button :class="{ active: tab === 'edit' }" @click="tab = 'edit'">Edit</button>
</nav>
<!-- Übersicht: untrennbar mit styleChanges/Apply verzahnt → bleibt hier -->
<!-- Overview: inseparably intertwined with styleChanges/apply → stays here -->
<div v-show="tab === 'overview'" class="el-detail">
<div v-if="element.description" class="el-desc markdown" v-html="renderMarkdown(element.description)"></div>
<ElementSuggestion
@@ -246,7 +243,7 @@ async function saveEdit(fields) {
@apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
/>
<div v-if="element.hints.length || styleAdds('hints').length" class="el-hints-block">
<h4>Hinweise</h4>
<h4>Hints</h4>
<ul class="el-hints">
<li v-for="(h, i) in element.hints" :key="i">
<span class="markdown" v-html="renderMarkdown(h)"></span>
@@ -265,13 +262,13 @@ async function saveEdit(fields) {
</div>
<div v-if="checking || styling || statusMsg" class="el-check">
<p v-if="checking" class="check-empty busy-text">Prüft auf fehlende Infos…</p>
<p v-if="styling" class="check-empty busy-text">Prüft den Stil…</p>
<p v-if="checking" class="check-empty busy-text">Checking for missing info…</p>
<p v-if="styling" class="check-empty busy-text">Checking the style…</p>
<p v-if="statusMsg && !checking && !styling" class="check-empty">{{ statusMsg }}</p>
</div>
</div>
<!-- v-show erhält den Chat-Verlauf beim Tab-Wechsel -->
<!-- v-show preserves the chat history when switching tabs -->
<ElementChatTab
v-show="tab === 'chat'"
:element="element"
@@ -279,7 +276,7 @@ async function saveEdit(fields) {
@changes="onChatChanges"
/>
<!-- v-if lädt die Edit-Felder bei jedem Öffnen frisch -->
<!-- v-if loads the edit fields fresh on every open -->
<ElementEditTab
v-if="tab === 'edit'"
:element="element"
@@ -427,7 +424,7 @@ async function saveEdit(fields) {
margin-bottom: 0.25rem;
}
/* Hinweis-Text inline neben dem Bullet halten (p ist sonst block) */
/* Keep hint text inline next to the bullet (p is block otherwise) */
.el-hints li > .markdown {
display: inline;
}
@@ -437,12 +434,12 @@ async function saveEdit(fields) {
margin: 0;
}
/* Markdown: Basis global (assets/markdown.css); schmale Sidebar → kompaktere Code-Blöcke */
/* Markdown: base is global (assets/markdown.css); narrow sidebar → more compact code blocks */
.markdown :deep(pre) {
padding: 8px 10px;
}
/* --- KI-Prüfung --- */
/* --- AI exam --- */
.el-check {
margin-top: 1rem;
padding-top: 0.8rem;

26
frontend/src/components/elements/ElementEditTab.vue
View File

@@ -35,28 +35,28 @@ function save() {
<template>
<div class="el-edit">
<button class="edit-save" :disabled="saving" @click="save">
{{ saving ? 'Speichert…' : 'Speichern' }}
{{ saving ? 'Saving…' : 'Save' }}
</button>
<label>Titel</label>
<input v-model="edit.title" placeholder="Titel" />
<label>Title</label>
<input v-model="edit.title" placeholder="Title" />
<label>Beschreibung</label>
<textarea v-model="edit.description" placeholder="Beschreibung"></textarea>
<label>Description</label>
<textarea v-model="edit.description" placeholder="Description"></textarea>
<label>Beispiele</label>
<label>Examples</label>
<div v-for="(ex, i) in edit.examples" :key="'ex' + i" class="edit-row">
<textarea v-model="edit.examples[i]" placeholder="Beispiel"></textarea>
<button class="edit-del" title="Entfernen" @click="edit.examples.splice(i, 1)">×</button>
<textarea v-model="edit.examples[i]" placeholder="Example"></textarea>
<button class="edit-del" title="Remove" @click="edit.examples.splice(i, 1)">×</button>
</div>
<button class="edit-add" @click="edit.examples.push('')">+ Beispiel</button>
<button class="edit-add" @click="edit.examples.push('')">+ Example</button>
<label>Hinweise</label>
<label>Hints</label>
<div v-for="(h, i) in edit.hints" :key="'hi' + i" class="edit-row">
<textarea v-model="edit.hints[i]" placeholder="Hinweis"></textarea>
<button class="edit-del" title="Entfernen" @click="edit.hints.splice(i, 1)">×</button>
<textarea v-model="edit.hints[i]" placeholder="Hint"></textarea>
<button class="edit-del" title="Remove" @click="edit.hints.splice(i, 1)">×</button>
</div>
<button class="edit-add" @click="edit.hints.push('')">+ Hinweis</button>
<button class="edit-add" @click="edit.hints.push('')">+ Hint</button>
</div>
</template>

24
frontend/src/components/elements/ElementList.vue
View File

@@ -1,6 +1,7 @@
<script setup>
import { ref, computed } from 'vue'
import { useConfirm } from '../../composables/useConfirm.js'
import { plainText } from '../../markdown.js'
const props = defineProps({
elements: { type: Array, required: true },
@@ -12,10 +13,7 @@ const emit = defineEmits(['select', 'create', 'remove'])
const query = ref('')
const { isArmed, armOrRun } = useConfirm()
// Markdown-Zeichen für Titel und Listen-Vorschau entfernen
function plain(text) {
return (text || '').replace(/```[a-z]*\n?/g, '').replace(/[`*_#]/g, '')
}
// Strip Markdown characters for title and list preview
const filtered = computed(() => {
const q = query.value.trim().toLowerCase()
@@ -31,7 +29,7 @@ function add() {
query.value = ''
}
// Inline-Bestätigung: erster Klick „Sicher?", zweiter löscht
// Inline confirmation: first click "Sure?", second deletes
function confirmDelete(el) {
armOrRun('el-' + el.id, () => emit('remove', el))
}
@@ -41,28 +39,28 @@ function confirmDelete(el) {
<div class="el-new">
<input
v-model="query"
placeholder="Suchen oder Stichwort…"
placeholder="Search or keyword…"
:disabled="creating"
@keyup.enter="add"
/>
<button :disabled="creating" title="Element per KI erstellen" @click="add">+</button>
<button :disabled="creating" title="Create element via AI" @click="add">+</button>
</div>
<div v-if="creating" class="el-creating">KI erstellt Element…</div>
<div v-if="creating" class="el-creating">AI is creating element…</div>
<ul class="el-list">
<li v-for="el in filtered" :key="el.id" @click="emit('select', el)">
<div class="el-item-main">
<span class="el-item-title">{{ plain(el.title) }}</span>
<span class="el-item-desc">{{ plain(el.description) }}</span>
<span class="el-item-title">{{ plainText(el.title) }}</span>
<span class="el-item-desc">{{ plainText(el.description) }}</span>
</div>
<button
class="el-delete"
:class="{ armed: isArmed('el-' + el.id) }"
title="Element löschen"
title="Delete element"
@click.stop="confirmDelete(el)"
>{{ isArmed('el-' + el.id) ? 'Sicher?' : '×' }}</button>
>{{ isArmed('el-' + el.id) ? 'Sure?' : '×' }}</button>
</li>
<li v-if="!filtered.length && !creating" class="el-empty">
{{ elements.length ? 'Keine Treffer.' : 'Noch keine Elemente. Stichwort eingeben und + klicken.' }}
{{ elements.length ? 'No matches.' : 'No elements yet. Enter a keyword and click +.' }}
</li>
</ul>
</template>

12
frontend/src/components/elements/ElementSuggestion.vue
View File

@@ -9,7 +9,7 @@ const props = defineProps({
const emit = defineEmits(['apply', 'dismiss', 'refine'])
const ACTION_LABELS = { entfernen: 'Entfernen:', anpassen: 'Anpassen:', hinzufuegen: 'Hinzufügen:' }
const ACTION_LABELS = { remove: 'Remove:', adjust: 'Adjust:', add: 'Add:' }
const editing = ref(false)
const instruction = ref('')
@@ -34,15 +34,15 @@ function submit() {
<div class="style-sugg-text"><strong>{{ ACTION_LABELS[change.action] }}</strong> {{ change.text }}</div>
<div v-if="change.content" class="style-sugg-preview markdown" v-html="renderMarkdown(change.content)"></div>
<div class="style-sugg-actions">
<button class="sugg-ok" :disabled="busy" @click="emit('apply')">Bestätigen</button>
<button class="sugg-no" :disabled="busy" @click="emit('dismiss')">Ablehnen</button>
<button class="sugg-edit" :disabled="busy" title="Vorschlag per Anweisung anpassen" @click="toggleEdit">✏️</button>
<button class="sugg-ok" :disabled="busy" @click="emit('apply')">Confirm</button>
<button class="sugg-no" :disabled="busy" @click="emit('dismiss')">Reject</button>
<button class="sugg-edit" :disabled="busy" title="Adjust suggestion via instruction" @click="toggleEdit">✏️</button>
</div>
<div v-if="editing" class="sugg-edit-row">
<input
ref="inputEl"
v-model="instruction"
placeholder="Anweisung zum Vorschlag…"
placeholder="Instruction for the suggestion…"
@keyup.enter="submit"
/>
<button :disabled="!instruction.trim() || busy" @click="submit">➤</button>
@@ -175,7 +175,7 @@ function submit() {
cursor: not-allowed;
}
/* Markdown: Basis global (assets/markdown.css); kompakte Vorschau-Code-Blöcke */
/* Markdown: base is global (assets/markdown.css); compact preview code blocks */
.markdown :deep(pre) {
padding: 6px 8px;
border-radius: 6px;

22
frontend/src/components/elements/ElementsSidebar.vue
View File

@@ -7,8 +7,8 @@ import ElementDetail from './ElementDetail.vue'
const props = defineProps({
topic: { type: String, required: true },
provider: { type: String, default: 'claude' },
openId: { type: String, default: null }, // Element-ID, die geöffnet werden soll
openTick: { type: Number, default: 0 }, // Erhöhung = openId (erneut) öffnen
openId: { type: String, default: null }, // Element ID that should be opened
openTick: { type: Number, default: 0 }, // increment = (re)open openId
})
const emit = defineEmits(['close', 'changed'])
@@ -24,12 +24,12 @@ async function load() {
try {
elements.value = await fetchElements(props.topic)
} catch (e) {
console.error('Fehler beim Laden der Elemente:', e)
console.error('Failed to load elements:', e)
}
openFromProp()
}
// Aus der Übersicht im Hauptbereich angeklicktes Element öffnen
// Open the element clicked in the overview of the main area
watch(() => props.openTick, openFromProp)
function openFromProp() {
@@ -46,7 +46,7 @@ async function create(hint) {
elements.value.unshift(el)
emit('changed')
} catch (e) {
console.error('Fehler beim Erstellen des Elements:', e)
console.error('Failed to create element:', e)
} finally {
creating.value = false
}
@@ -59,7 +59,7 @@ async function remove(el) {
emit('changed')
}
// Bearbeitetes Element in Liste und Auswahl synchron halten
// Keep the edited element in sync within the list and selection
function onUpdated(el) {
selected.value = el
const idx = elements.value.findIndex((e) => e.id === el.id)
@@ -81,8 +81,8 @@ function onUpdated(el) {
/>
<template v-else>
<header class="el-header">
<span class="el-title">Elemente</span>
<button class="el-close" title="Schließen" @click="emit('close')">×</button>
<span class="el-title">Elements</span>
<button class="el-close" title="Close" @click="emit('close')">×</button>
</header>
<ElementList
:elements="elements"
@@ -104,13 +104,13 @@ function onUpdated(el) {
flex-direction: column;
background: var(--panel);
border-left: 1px solid var(--border);
/* Über dem Guide-Chat (FAB/Panel: z-index 20) */
/* Above the guide chat (FAB/panel: z-index 20) */
position: relative;
z-index: 30;
}
/* Mobil/schmal: als Overlay über den Hauptinhalt legen, statt ihn
im Flex-Fluss einzuquetschen. */
/* Mobile/narrow: lay it as an overlay over the main content instead of
squeezing it into the flex flow. */
@media (max-width: 768px) {
.elements-sidebar {
position: fixed;