cf187d46b3
- Refactor all UI rendering logic into a single `ui` module - Centralize static assets serving to `/static` directory - Redesign Heroprompt page with Bootstrap 5 components - Enhance workspace management and file tree interactions - Add Bootstrap modal support for UI dialogs
200 lines
6.9 KiB
HTML
200 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{.title}} - Chat</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="{{.css_colors_url}}">
|
|
<link rel="stylesheet" href="{{.css_main_url}}">
|
|
<link rel="stylesheet" href="{{.css_chat_url}}">
|
|
<meta name="color-scheme" content="light dark">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-dark bg-dark fixed-top header px-2">
|
|
<div class="d-flex w-100 align-items-center justify-content-between">
|
|
<div class="text-white fw-bold">{{.title}}</div>
|
|
<div class="text-white-50">Chat</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<aside class="sidebar">
|
|
<div class="p-2">
|
|
<div class="menu-section">Navigation</div>
|
|
<div class="list-group list-group-flush">
|
|
{{.menu_html}}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<div class="container-fluid h-100">
|
|
<!-- Chat Section -->
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
<h5 class="mb-0">AI Chat Assistant</h5>
|
|
<div class="chat-controls">
|
|
<button class="btn btn-sm btn-outline-secondary" id="clearChat">
|
|
<i class="bi bi-trash"></i> Clear
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" id="voiceToggle">
|
|
<i class="bi bi-mic"></i> Voice
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-messages" id="chatMessages">
|
|
<div class="message assistant">
|
|
<div class="message-avatar">
|
|
<i class="bi bi-robot"></i>
|
|
</div>
|
|
<div class="message-content">
|
|
<div class="message-text">Hello! I'm your AI assistant. How can I help you today?</div>
|
|
<div class="message-time">Just now</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-input-container">
|
|
<div class="chat-input-wrapper">
|
|
<textarea class="form-control chat-input" id="chatInput" placeholder="Type your message here..." rows="1"></textarea>
|
|
<div class="chat-input-actions">
|
|
<button class="btn btn-outline-secondary btn-sm" id="attachFile" title="Attach file">
|
|
<i class="bi bi-paperclip"></i>
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm" id="voiceInput" title="Voice input">
|
|
<i class="bi bi-mic"></i>
|
|
</button>
|
|
<button class="btn btn-primary btn-sm" id="sendMessage" title="Send message">
|
|
<i class="bi bi-send"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="chat-status" id="chatStatus"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recorder Section -->
|
|
<div class="recorder-container">
|
|
<div class="recorder-header">
|
|
<h6 class="mb-0">Voice Recorder</h6>
|
|
<div class="recorder-controls">
|
|
<button class="btn btn-sm btn-danger" id="recordBtn">
|
|
<i class="bi bi-record-circle"></i> Record
|
|
</button>
|
|
<button class="btn btn-sm btn-secondary" id="stopBtn" disabled>
|
|
<i class="bi bi-stop-circle"></i> Stop
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" id="playBtn" disabled>
|
|
<i class="bi bi-play-circle"></i> Play
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recording-status" id="recordingStatus">
|
|
<div class="recording-indicator">
|
|
<span class="recording-dot"></span>
|
|
<span class="recording-time">00:00</span>
|
|
</div>
|
|
<div class="recording-level">
|
|
<div class="level-bar" id="levelBar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recordings-explorer">
|
|
<div class="explorer-header">
|
|
<h6 class="mb-2">Recordings</h6>
|
|
<div class="explorer-actions">
|
|
<button class="btn btn-sm btn-outline-secondary" id="newFolderBtn">
|
|
<i class="bi bi-folder-plus"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" id="refreshBtn">
|
|
<i class="bi bi-arrow-clockwise"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explorer-tree" id="explorerTree">
|
|
<div class="tree-item folder expanded" data-path="/">
|
|
<div class="tree-item-content">
|
|
<i class="bi bi-folder-open"></i>
|
|
<span class="tree-item-name">Recordings</span>
|
|
</div>
|
|
<div class="tree-item-children">
|
|
<div class="tree-item file" data-path="/sample1.mp3">
|
|
<div class="tree-item-content">
|
|
<i class="bi bi-file-earmark-music"></i>
|
|
<span class="tree-item-name">sample1.mp3</span>
|
|
<span class="tree-item-size">2.1 MB</span>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item file" data-path="/sample2.wav">
|
|
<div class="tree-item-content">
|
|
<i class="bi bi-file-earmark-music"></i>
|
|
<span class="tree-item-name">sample2.wav</span>
|
|
<span class="tree-item-size">5.3 MB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Context Menu -->
|
|
<div class="context-menu" id="contextMenu">
|
|
<div class="context-menu-item" data-action="transcribe">
|
|
<i class="bi bi-file-text"></i> Transcribe
|
|
</div>
|
|
<div class="context-menu-item" data-action="translate">
|
|
<i class="bi bi-translate"></i> Translate
|
|
</div>
|
|
<div class="context-menu-item" data-action="open">
|
|
<i class="bi bi-folder-open"></i> Open
|
|
</div>
|
|
<div class="context-menu-item" data-action="move">
|
|
<i class="bi bi-arrow-right"></i> Move
|
|
</div>
|
|
<div class="context-menu-item" data-action="rename">
|
|
<i class="bi bi-pencil"></i> Rename
|
|
</div>
|
|
<div class="context-menu-divider"></div>
|
|
<div class="context-menu-item" data-action="export">
|
|
<i class="bi bi-download"></i> Export
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Upload Modal -->
|
|
<div class="modal fade" id="fileUploadModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Upload File</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="fileInput" class="form-label">Choose file</label>
|
|
<input class="form-control" type="file" id="fileInput" accept=".txt,.pdf,.doc,.docx,.md">
|
|
</div>
|
|
<div class="upload-progress" id="uploadProgress" style="display: none;">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="uploadBtn">Upload</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
|
<script src="{{.js_theme_url}}"></script>
|
|
<script src="{{.js_chat_url}}"></script>
|
|
</body>
|
|
</html> |