116 lines
No EOL
5.4 KiB
HTML
116 lines
No EOL
5.4 KiB
HTML
<!-- Improved Workflow Interface with 3-section layout -->
|
|
<div class="workflow-container">
|
|
<!-- HEADER SECTION - Fixed at top -->
|
|
<div class="workflow-header">
|
|
<div class="header-columns">
|
|
<div class="header-left">
|
|
<div class="header-content-wrapper">
|
|
<div class="section-toggle">
|
|
<button id="toggle-header-btn" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
<div class="log-content-container">
|
|
<div id="execution-log" class="execution-log"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="header-right-content">
|
|
<div id="data-statistics" class="data-statistics">
|
|
<span class="stat-item">↑ 0 B</span>
|
|
<span class="stat-item">↓ 0 B</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CHAT SECTION - Fills remaining space -->
|
|
<div class="chat-section">
|
|
<div class="chat-columns">
|
|
<!-- Left column (60%) - Chat history -->
|
|
<div class="chat-left">
|
|
<!-- Empty state when no chat -->
|
|
<div id="empty-chat-state" class="empty-state">
|
|
<div class="empty-state-content">
|
|
<i class="fas fa-comments fa-3x"></i>
|
|
<h4>Noch keine Kommunikation</h4>
|
|
<p>Starten Sie einen Workflow, um den Multi-Agent-Chat zu sehen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scrollable chat messages -->
|
|
<div id="agent-chat-messages" class="agent-chat-messages"></div>
|
|
</div>
|
|
|
|
<!-- Right column (40%) - File preview -->
|
|
<div class="chat-right">
|
|
<div id="file-preview-container" class="file-preview-container">
|
|
<div class="file-preview-header">
|
|
<h4>Dateivorschau</h4>
|
|
<div class="file-preview-actions">
|
|
<button id="download-file-btn" class="btn btn-sm btn-outline-primary" disabled>
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
<button id="copy-file-btn" class="btn btn-sm btn-outline-secondary" disabled>
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
<button id="close-file-preview-btn" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="file-preview-content" class="file-preview-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER SECTION - Fixed at bottom -->
|
|
<div class="workflow-footer">
|
|
<div class="footer-columns">
|
|
<!-- Left column (60%) - Prompt area -->
|
|
<div class="footer-left">
|
|
<div id="user-input-area" class="user-input-area file-dropzone-wrapper">
|
|
<div class="user-input-container">
|
|
<div class="prompt-selection">
|
|
<select id="prompt-select-main" class="form-control">
|
|
<option value="">Prompt-Vorlage wählen</option>
|
|
</select>
|
|
</div>
|
|
<textarea
|
|
id="user-message-input"
|
|
class="form-control"
|
|
placeholder="Beschreiben Sie die Aufgabe für die Agenten..."
|
|
></textarea>
|
|
<div class="user-input-actions">
|
|
<div class="file-actions">
|
|
<button id="upload-additional-file-btn" class="btn btn-outline-secondary">
|
|
<i class="fas fa-paperclip"></i> Dateien
|
|
</button>
|
|
<input type="file" id="additional-file-input" multiple style="display: none;" />
|
|
</div>
|
|
<div class="workflow-controls">
|
|
<button id="stop-workflow-btn" class="btn btn-danger">
|
|
<i class="fas fa-stop"></i>Stop
|
|
</button>
|
|
<button id="reset-btn" class="btn btn-outline-secondary">
|
|
<i class="fas fa-redo"></i>Reset
|
|
</button>
|
|
<button id="send-user-message-btn" class="btn btn-primary">
|
|
<i class="fas fa-play"></i>Start
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right column (40%) - Uploaded files -->
|
|
<div class="footer-right">
|
|
<div id="additional-files-container" class="additional-files-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |