Backup #1012

Dateiinhalt

<?php
/**
 * Generating Progress Partial with Live Log (HTMX Polling)
 *
 * @var int $orderId Order ID for polling
 * @var string $log Current log content
 * @var string $step Current step
 */
$log = $log ?? '';
$step = $step ?? '';
?>
<div class="generating-container"
     hx-get="/content/<?= $orderId ?>/generation-status"
     hx-trigger="load delay:1s"
     hx-swap="outerHTML">

    <div class="generating-header">
        <div class="generating-spinner">
            <span class="generating-dot"></span>
            <span class="generating-dot"></span>
            <span class="generating-dot"></span>
        </div>
        <span class="generating-status">
            <?php
            $stepLabels = [
                'init' => 'Initialisierung...',
                'rag' => 'Suche Dokumente...',
                'sources' => 'Quellen gefunden',
                'llm' => 'Generiere Content...',
                'done' => 'Fertig!',
                'error' => 'Fehler',
            ];
            echo $stepLabels[$step] ?? 'Content wird generiert...';
            ?>
        </span>
    </div>

    <?php if ($log): ?>
    <pre class="generating-log"><?= htmlspecialchars($log) ?></pre>
    <?php else: ?>
    <pre class="generating-log">Warte auf Ausgabe...</pre>
    <?php endif; ?>

</div>

<style>
.generating-container {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-md);
    margin: var(--space-md) 0;
}

.generating-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.generating-spinner {
    display: inline-flex;
    gap: 4px;
}

.generating-dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: generating-bounce 1.4s infinite ease-in-out both;
}

.generating-dot:nth-child(1) { animation-delay: -0.32s; }
.generating-dot:nth-child(2) { animation-delay: -0.16s; }
.generating-dot:nth-child(3) { animation-delay: 0s; }

@keyframes generating-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.generating-status {
    font-weight: 500;
    color: var(--color-text);
}

.generating-log {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: var(--space-sm);
    margin: 0;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    color: var(--color-text-muted);
    white-space: pre-wrap;
    word-break: break-word;
}
</style>

Vollständig herunterladen

Aktionen

Andere Versionen dieser Datei

← Zurück zur Übersicht