Spaces:
Sleeping
Sleeping
File size: 6,889 Bytes
6ca2339 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackLogix Assistant</title>
<link rel="stylesheet" href="/static/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-container">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<div class="logo">
<div class="logo-icon">S</div>
<span class="logo-text">StackLogix</span>
</div>
</div>
<div class="sidebar-content">
<button class="new-chat-btn" id="newChatBtn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
New Chat
</button>
<div class="sidebar-section">
<h3 class="section-title">System</h3>
<div class="system-info" id="systemInfo">
<div class="info-item">
<span class="info-label">Status</span>
<span class="info-value status-dot" id="statusDot">Connecting...</span>
</div>
<div class="info-item">
<span class="info-label">Documents</span>
<span class="info-value" id="docsCount">—</span>
</div>
<div class="info-item">
<span class="info-label">Session</span>
<span class="info-value session-id" id="sessionDisplay">—</span>
</div>
</div>
</div>
<div class="sidebar-section">
<h3 class="section-title">Quick Prompts</h3>
<div class="quick-prompts">
<button class="prompt-chip" data-prompt="What is StackLogix?">What is StackLogix?</button>
<button class="prompt-chip" data-prompt="What features does StackLogix offer for jewellery manufacturers?">Jewellery Features</button>
<button class="prompt-chip" data-prompt="Tell me about the AI features in StackLogix">AI Features</button>
<button class="prompt-chip" data-prompt="What reporting and dashboard capabilities are available?">Reports & Dashboards</button>
</div>
</div>
</div>
<div class="sidebar-footer">
<button class="ingest-btn" id="ingestBtn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>
Re-ingest Documents
</button>
</div>
</aside>
<!-- Main Chat Area -->
<main class="chat-main">
<div class="chat-header">
<div class="chat-title">
<h1>StackLogix Assistant</h1>
<p class="subtitle">Intelligent answers from your company knowledge base</p>
</div>
</div>
<div class="messages-container" id="messagesContainer">
<!-- Welcome message -->
<div class="welcome-screen" id="welcomeScreen">
<div class="welcome-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<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>
</div>
<h2>Welcome to StackLogix Assistant</h2>
<p>I can answer questions about StackLogix products, features, and solutions using our internal knowledge base. Ask me anything!</p>
<div class="welcome-suggestions">
<button class="suggestion-card" data-prompt="What solutions does StackLogix offer for the jewellery industry?">
<span class="card-icon">💎</span>
<span>Jewellery Solutions</span>
</button>
<button class="suggestion-card" data-prompt="What are the master tables and how are they used?">
<span class="card-icon">📊</span>
<span>Master Tables</span>
</button>
<button class="suggestion-card" data-prompt="Explain the purchase management features">
<span class="card-icon">🛒</span>
<span>Purchase Management</span>
</button>
<button class="suggestion-card" data-prompt="What ML and AI features are available?">
<span class="card-icon">🤖</span>
<span>ML & AI Features</span>
</button>
</div>
</div>
<div class="messages-list" id="messagesList"></div>
</div>
<!-- Input Area -->
<div class="input-area">
<div class="input-wrapper">
<textarea
id="userInput"
placeholder="Ask me about StackLogix..."
rows="1"
maxlength="2000"
></textarea>
<button class="send-btn" id="sendBtn" disabled>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
<p class="input-hint">Press Enter to send, Shift+Enter for new line</p>
</div>
</main>
</div>
<script src="/static/script.js"></script>
</body>
</html>
|