-
Notifications
You must be signed in to change notification settings - Fork 7
Expand file tree
/
Copy pathindex.html
More file actions
184 lines (168 loc) · 7.5 KB
/
Copy pathindex.html
File metadata and controls
184 lines (168 loc) · 7.5 KB
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aura - Adaptive Reflective Companion</title>
<link rel="stylesheet" href="index.css">
<script defer src="https://unpkg.com/es-module-shims@1.8.3/dist/es-module-shims.min.js"></script>
<!-- Import map shim is used to provide compatibility for browsers that do not yet support native import maps -->
<script type="importmap-shim">
{
"@google/genai": "https://esm.sh/@google/genai@0.8.0",
"marked": "https://esm.sh/marked@^15.0.8"
}
</script>
</head>
<body>
<div id="app-container">
<!-- Enhanced Dynamic Header -->
<header class="aura-enhanced-header" id="aura-header">
<button class="mobile-menu-btn" id="left-menu-btn" aria-label="Toggle Chat History">☰</button>
<div class="header-main-section">
<div class="aura-title-section">
<h1>Aura</h1>
<div class="user-greeting" id="user-greeting">Your AI Companion</div>
</div>
<div class="neural-activity-display" id="neural-display">
<div class="brainwave-indicator" id="brainwave-indicator">
<span class="label">🧠</span>
<span class="value" id="brainwave-value">Alpha</span>
<div class="wave-pattern" id="wave-pattern"></div>
</div>
<div class="neurotransmitter-indicator" id="nt-indicator">
<span class="label">⚡</span>
<span class="value" id="nt-value">Serotonin</span>
<div class="chemical-level" id="chemical-level"></div>
</div>
</div>
</div>
<div id="header-controls">
<div class="user-controls">
<button class="user-settings-btn" id="user-settings-btn" aria-label="User Settings">👤</button>
<div class="user-dropdown" id="user-dropdown">
<div class="username-section">
<label for="username-input">Your Name:</label>
<input type="text" id="username-input" placeholder="Enter your name" maxlength="30">
<button id="save-username">Save</button>
</div>
<div class="current-user" id="current-user">Not set</div>
</div>
</div>
<div id="aura-status-grid">
<div class="status-container emotional-state">
<div class="status-header">
<span class="status-icon" id="emotion-icon">😊</span>
<span class="status-label">Emotional State</span>
</div>
<div class="status-main">
<span class="status-value" id="aura-emotion-status" aria-live="polite">Normal</span>
<span class="intensity-level" id="emotion-intensity">Medium</span>
</div>
<div class="status-details" id="aura-emotion-details">Balanced emotional processing</div>
</div>
<div class="status-container cognitive-state">
<div class="status-header">
<span class="status-icon" id="cognitive-icon">🎯</span>
<span class="status-label">Cognitive Focus</span>
</div>
<div class="status-main">
<span class="status-value" id="aura-cognitive-focus" aria-live="polite">Learning</span>
<span class="focus-energy" id="cognitive-energy">High</span>
</div>
<div class="status-details" id="aura-cognitive-focus-details">Processing information</div>
</div>
<div class="status-container system-health">
<div class="status-header">
<span class="status-icon" id="system-icon">💚</span>
<span class="status-label">System Health</span>
</div>
<div class="status-main">
<span class="status-value" id="system-status">Optimal</span>
<span class="connection-status" id="connection-status">Connected</span>
</div>
<div class="status-details" id="system-details">All systems operational</div>
</div>
</div>
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle Dark Mode">
<span class="theme-toggle-slider"></span>
</button>
</div>
<button class="mobile-menu-btn" id="right-menu-btn" aria-label="Toggle Memory Panel">☰</button>
<!-- Dynamic background effects -->
<div class="neural-background" id="neural-bg"></div>
</header>
<!-- Left Panel - Chat History -->
<aside id="left-panel">
<div class="panel-header">
<h2 class="panel-title">Chat History</h2>
</div>
<button id="new-chat-btn">+ New Chat</button>
<div class="chat-history-container">
<div class="chat-history-list" id="chat-history-list">
<!-- Chat sessions will be dynamically inserted here -->
</div>
</div>
</aside>
<!-- Center Panel - Main Chat -->
<main id="chat-container">
<div id="message-area" class="scrollable-content" aria-live="polite" aria-atomic="false"></div>
<form id="chat-form">
<input type="text" id="message-input" placeholder="Type your message..." aria-label="Message to Aura" autocomplete="off">
<button type="submit" id="send-button" aria-label="Send message">Send</button>
</form>
</main>
<!-- Right Panel - Memory & Insights -->
<aside id="right-panel">
<div class="panel-header">
<h2 class="panel-title">AI Insights</h2>
</div>
<!-- Unified Memory Search -->
<div class="memory-panel">
<h3>🔍 Unified Memory Search</h3>
<div class="memory-search-controls">
<input type="text" id="unified-search-input" placeholder="Search conversations..." />
<div class="search-options">
<label class="search-option">
<input type="checkbox" id="search-active-memory" checked> Active Memory
</label>
<label class="search-option">
<input type="checkbox" id="search-video-archives" checked> Video Archives
</label>
</div>
<button id="unified-search-button">Search All</button>
</div>
<div id="unified-search-error" class="search-error"></div>
<div id="unified-search-results"></div>
<!-- Video Archive Management -->
<div class="video-archive-section video-archive-styles">
<h4>📼 Video Archive Status</h4>
<div id="video-archive-status" class="archive-status">
<div class="status-loading">Loading archive information...</div>
</div>
<button id="manage-archives">
Manage Archives
</button>
</div>
</div>
<!-- Emotional Insights -->
<div class="insights-panel">
<h3>📊 Emotional Insights</h3>
<div class="insights-controls">
<select id="insights-period" aria-label="Select time period for emotional insights">
<option value="hour">Last Hour</option>
<option value="day">Last 24 Hours</option>
<option value="week" selected>Last Week</option>
<option value="month">Last Month</option>
<option value="year">Last Year</option>
<option value="multi-year">Last 5 Years</option>
</select>
<button id="show-insights">View Analysis</button>
</div>
<div id="insights-content"></div>
</div>
</aside>
</div>
<script type="module" src="index.tsx"></script>
</body>
</html>