Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PolicyWise - Chat</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='chat.css') }}"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='chat-enhanced.css') }}"> | |
| </head> | |
| <body> | |
| <div class="chat-container" role="application" aria-label="PolicyWise Chat Interface"> | |
| <header class="chat-header"> | |
| <div class="header-content"> | |
| <h1>PolicyWise</h1> | |
| <p class="subtitle">Your Intelligent Policy Assistant</p> | |
| </div> | |
| <div class="header-controls"> | |
| <button id="conversationHistoryBtn" class="icon-button" title="Conversation History" | |
| aria-label="Open conversation history" aria-haspopup="dialog"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> | |
| <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path> | |
| </svg> | |
| </button> | |
| <div class="status-indicator" id="statusIndicator" role="status" aria-live="polite"> | |
| <span class="status-dot" aria-hidden="true"></span> | |
| <span class="status-text">Ready</span> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="chat-main"> | |
| <div class="messages-container" id="messagesContainer" role="log" aria-label="Chat messages" aria-live="polite"> | |
| <div class="welcome-message"> | |
| <div class="welcome-icon" aria-hidden="true">🤖</div> | |
| <h2>Welcome to PolicyWise!</h2> | |
| <p>I'm here to help you find information about company policies and procedures. Ask me anything about:</p> | |
| <div class="policy-topics" role="group" aria-label="Suggested policy topics"> | |
| <button class="policy-suggestion-btn" data-topic="Remote work policies">Remote work policies</button> | |
| <button class="policy-suggestion-btn" data-topic="PTO and leave policies">PTO and leave policies</button> | |
| <button class="policy-suggestion-btn" data-topic="Expense reimbursement">Expense reimbursement</button> | |
| <button class="policy-suggestion-btn" data-topic="Information security">Information security</button> | |
| <button class="policy-suggestion-btn" data-topic="Employee benefits">Employee benefits</button> | |
| <button class="policy-suggestion-btn" data-topic="And much more...">And much more...</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="input-container"> | |
| <form id="chatForm" class="chat-form" aria-label="Chat message form"> | |
| <div class="input-wrapper"> | |
| <textarea | |
| id="messageInput" | |
| placeholder="Ask about company policies..." | |
| rows="1" | |
| maxlength="1000" | |
| required | |
| aria-label="Message input" | |
| aria-describedby="charCount"></textarea> | |
| <button type="submit" id="sendButton" class="send-button" disabled aria-label="Send message"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> | |
| <line x1="22" y1="2" x2="11" y2="13"></line> | |
| <polygon points="22,2 15,22 11,13 2,9"></polygon> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="input-options"> | |
| <label class="checkbox-label" for="includeSources"> | |
| <input type="checkbox" id="includeSources" checked> | |
| <span class="checkmark" aria-hidden="true"></span> | |
| Include source citations | |
| </label> | |
| <span class="char-counter" role="status"> | |
| <span id="charCount">0</span>/1000 | |
| </span> | |
| </div> | |
| </form> | |
| </div> | |
| </main> | |
| <footer class="chat-footer"> | |
| <p>© 2025 MSSE AI Engineering Project | <a href="/health">System Status</a></p> | |
| </footer> | |
| </div> | |
| <!-- Loading overlay --> | |
| <div id="loadingOverlay" class="loading-overlay hidden"> | |
| <div class="loading-spinner"></div> | |
| <p>Analyzing policies...</p> | |
| </div> | |
| <!-- Conversation history panel --> | |
| <div id="conversationHistoryPanel" class="side-panel" role="dialog" aria-labelledby="conversationHistoryHeader" aria-hidden="true"> | |
| <div class="panel-header"> | |
| <h3 id="conversationHistoryHeader">Conversation History</h3> | |
| <button id="closeConversationsBtn" class="icon-button" aria-label="Close conversation history"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> | |
| <line x1="18" y1="6" x2="6" y2="18"></line> | |
| <line x1="6" y1="6" x2="18" y2="18"></line> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="panel-actions"> | |
| <button id="newConversationBtn" class="primary-button" aria-label="Start new conversation"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> | |
| <line x1="12" y1="5" x2="12" y2="19"></line> | |
| <line x1="5" y1="12" x2="19" y2="12"></line> | |
| </svg> | |
| New Conversation | |
| </button> | |
| <div class="export-import-buttons"> | |
| <button id="exportConversationsBtn" class="file-upload-label" aria-label="Export conversations"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="7 10 12 15 17 10"></polyline> | |
| <line x1="12" y1="15" x2="12" y2="3"></line> | |
| </svg> | |
| Export | |
| </button> | |
| <label for="importConversations" class="file-upload-label" aria-label="Import conversations"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="17 8 12 3 7 8"></polyline> | |
| <line x1="12" y1="3" x2="12" y2="15"></line> | |
| </svg> | |
| Import | |
| </label> | |
| <input type="file" id="importConversations" class="file-upload" accept=".json" aria-label="Import conversations from file"> | |
| </div> | |
| </div> | |
| <div class="search-conversations"> | |
| <input type="text" id="searchConversations" class="search-input" placeholder="Search conversations..." aria-label="Search conversations"> | |
| </div> | |
| <div class="conversation-list" id="conversationList" role="list" aria-label="Your conversations"> | |
| <!-- Conversations will be added here dynamically --> | |
| <div class="empty-state"> | |
| <p>No conversation history found.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Swipe indicator for mobile --> | |
| <div class="swipe-indicator" id="swipeIndicator" aria-hidden="true"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M9 18l6-6-6-6"></path> | |
| </svg> | |
| </div> | |
| <script src="{{ url_for('static', filename='js/chat.js') }}"></script> | |
| </body> | |
| </html> | |