Hugging Face's logo

Spaces:
jjmandog
/
newspace
Running

App Files Community
jjmandog commited on
Commit
5ee1b8b
·
verified ·
1 Parent(s): 9ac2590

I can’t make outgoing calls please fix this and test. Also the orange icon next to settings doesn’t work . Fix that as well. Improve the coding if you need to. Before finishing please test to make sure it all works - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1632 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Newspace
3
- emoji: 🔥
4
- colorFrom: indigo
5
  colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: newspace
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1632 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Call Manager</title>
7
+ <script src="https://cdn.tailwindcss.com/3.4.0"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
9
+ <script src="https://sdk.vercel.app/external_api.js"></script> <!-- updated Jitsi URL -->
10
+ <script src="https://cdn.apple-mapkit.com/mk/5.x/mapkit.js"></script>
11
+ <!-- Added Pusher for real-time chat -->
12
+ <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
13
+ <style>
14
+ @keyframes pulse-ring {
15
+ 0% { transform: scale(0.33); }
16
+ 80%, 100% { opacity: 0; }
17
+ }
18
+ @keyframes pulse-dot {
19
+ 0% { transform: scale(0.8); }
20
+ 50% { transform: scale(1); }
21
+ 100% { transform: scale(0.8); }
22
+ }
23
+ /* Custom scrollbar */
24
+ .custom-scrollbar::-webkit-scrollbar {
25
+ width: 6px;
26
+ }
27
+ .custom-scrollbar::-webkit-scrollbar-track {
28
+ background: rgba(156, 163, 175, 0.1);
29
+ }
30
+ .custom-scrollbar::-webkit-scrollbar-thumb {
31
+ background: rgba(99, 102, 241, 0.5);
32
+ border-radius: 3px;
33
+ }
34
+ /* Call animation */
35
+ .call-animation {
36
+ position: relative;
37
+ width: 50px;
38
+ height: 50px;
39
+ }
40
+ .call-animation:before {
41
+ content: '';
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ width: 100%;
46
+ height: 100%;
47
+ background-color: rgba(16, 185, 129, 0.5);
48
+ border-radius: 50%;
49
+ animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
50
+ }
51
+ .call-animation:after {
52
+ content: '';
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ width: 100%;
57
+ height: 100%;
58
+ background-color: #10B981;
59
+ border-radius: 50%;
60
+ transform: scale(0.8);
61
+ animation: pulse-dot 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="bg-gray-100 min-h-screen font-sans">
66
+ <div class="container mx-auto px-4 py-8 max-w-md">
67
+ <!-- Header -->
68
+ <header class="flex justify-between items-center mb-8">
69
+ <h1 class="text-2xl font-bold text-indigo-700">AI Call Manager</h1>
70
+ <div class="flex space-x-2">
71
+ <button id="checkSystemBtn" class="p-2 rounded-full bg-green-100 hover:bg-green-200 transition" title="Check System Status">
72
+ <i class="fas fa-check-circle text-green-600"></i>
73
+ </button>
74
+ <button id="setupHelpBtn" class="p-2 rounded-full bg-blue-100 hover:bg-blue-200 transition" title="Setup Instructions">
75
+ <i class="fas fa-question text-blue-600"></i>
76
+ </button>
77
+ <button id="settingsBtn" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
78
+ <i class="fas fa-cog text-gray-600"></i>
79
+ </button>
80
+ <button id="systemTestBtn" class="p-2 rounded-full bg-orange-100 hover:bg-orange-200 transition" title="Test System">
81
+ <i class="fas fa-vial text-orange-600"></i>
82
+ </button>
83
+ </div>
84
+ </header>
85
+
86
+ <!-- Main Dashboard -->
87
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
88
+ <div class="p-6">
89
+ <div class="flex items-center mb-6">
90
+ <div class="call-animation mr-4"></div>
91
+ <div>
92
+ <h2 class="text-lg font-semibold text-gray-800">Call Management</h2>
93
+ <p class="text-sm text-gray-500">Active for: <span class="font-medium phone-number-display">(562) 228-9429</span></p>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Call Management Section -->
98
+ <div class="space-y-4">
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-700 mb-1">Answer Calls After</label>
101
+ <select id="callDelay" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
102
+ <option value="15">15 seconds</option>
103
+ <option value="30" selected>30 seconds</option>
104
+ <option value="45">45 seconds</option>
105
+ <option value="60">1 minute</option>
106
+ </select>
107
+ </div>
108
+
109
+ <div>
110
+ <label class="flex items-center space-x-3">
111
+ <input type="checkbox" id="enableCallAI" class="rounded h-5 w-5 text-indigo-600 focus:ring-indigo-500" checked>
112
+ <span class="text-sm font-medium text-gray-700">Enable Call AI Assistant</span>
113
+ </label>
114
+ <p class="mt-1 text-xs text-gray-500">AI will answer calls when you're unavailable</p>
115
+ </div>
116
+
117
+ <div id="callSettings" class="pl-8">
118
+ <div class="mt-3">
119
+ <label class="block text-sm font-medium text-gray-700 mb-1">AI Voice</label>
120
+ <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
121
+ <option>American Female (Emma)</option>
122
+ <option>American Male (Brian)</option>
123
+ <option>British Female (Amy)</option>
124
+ </select>
125
+ </div>
126
+
127
+ <div class="mt-3">
128
+ <label class="block text-sm font-medium text-gray-700 mb-1">Default Message</label>
129
+ <textarea id="callGreeting" rows="2" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Hello, I'm unable to take your call right now. Please leave a message or send a text and I'll get back to you soon."></textarea>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Make a Call Section -->
137
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
138
+ <div class="p-6">
139
+ <div class="flex items-center mb-6">
140
+ <div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4">
141
+ <i class="fas fa-phone text-blue-600 text-xl"></i>
142
+ </div>
143
+ <div>
144
+ <h2 class="text-lg font-semibold text-gray-800">Make a Call</h2>
145
+ <p class="text-sm text-gray-500">Train AI with interactive calls</p>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="space-y-4">
150
+ <div>
151
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number to Call</label>
152
+ <input type="tel" id="callNumber" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. (562) 228-9429" value="15622289429">
153
+ </div>
154
+
155
+ <div>
156
+ <label class="block text-sm font-medium text-gray-700 mb-1">Call Purpose</label>
157
+ <select id="callPurpose" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
158
+ <option value="training">AI Training Session</option>
159
+ <option value="outgoing">Regular Outgoing Call</option>
160
+ </select>
161
+ </div>
162
+
163
+ <div id="trainingOptions" class="pl-4 space-y-3 hidden">
164
+ <label class="flex items-center space-x-3">
165
+ <input type="checkbox" id="enableCallTraining" class="rounded h-4 w-4 text-blue-600 focus:ring-blue-500" checked>
166
+ <span class="text-sm font-medium text-gray-700">Enable Interactive Training</span>
167
+ </label>
168
+ <div>
169
+ <label class="block text-sm font-medium text-gray-700 mb-1">Training Mode</label>
170
+ <select id="callTrainingMode" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
171
+ <option value="qa">Q&A Training</option>
172
+ <option value="conversation">Conversation Practice</option>
173
+ <option value="scenario">Scenario Simulation</option>
174
+ </select>
175
+ </div>
176
+ </div>
177
+
178
+ <button id="startCallBtn" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition flex items-center justify-center space-x-2">
179
+ <i class="fas fa-phone"></i>
180
+ <span>Start Call</span>
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Text AI Section -->
187
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
188
+ <div class="p-6">
189
+ <div class="flex items-center mb-6">
190
+ <div class="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-full mr-4">
191
+ <i class="fas fa-comment-alt text-purple-600 text-xl"></i>
192
+ </div>
193
+ <div>
194
+ <h2 class="text-lg font-semibold text-gray-800">Text AI Assistant</h2>
195
+ <p class="text-sm text-gray-500">Smart responses & automated replies</p>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="space-y-4">
200
+ <div>
201
+ <label class="flex items-center space-x-3">
202
+ <input type="checkbox" id="enableTextAI" class="rounded h-5 w-5 text-purple-600 focus:ring-purple-500" checked>
203
+ <span class="text-sm font-medium text-gray-700">Enable Text AI Assistant</span>
204
+ </label>
205
+ <p class="mt-1 text-xs text-gray-500">AI will respond to unanswered texts automatically</p>
206
+ </div>
207
+
208
+ <div id="textSettings" class="pl-8 space-y-4">
209
+ <div>
210
+ <label class="block text-sm font-medium text-gray-700 mb-1">Response Style</label>
211
+ <select id="responseStyle" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
212
+ <option value="professional">Professional</option>
213
+ <option value="friendly" selected>Friendly</option>
214
+ <option value="concise">Concise</option>
215
+ </select>
216
+ </div>
217
+
218
+ <div>
219
+ <label class="block text-sm font-medium text-gray-700 mb-1">Auto-response Delay</label>
220
+ <select id="textDelay" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
221
+ <option value="1">1 hour</option>
222
+ <option value="2" selected>2 hours</option>
223
+ <option value="4">4 hours</option>
224
+ <option value="6">6 hours</option>
225
+ <option value="12">12 hours</option>
226
+ </select>
227
+ </div>
228
+
229
+ <div class="pt-2">
230
+ <button id="trainAIbtn" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition flex items-center justify-center space-x-2">
231
+ <i class="fas fa-brain"></i>
232
+ <span>Train Text AI</span>
233
+ </button>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Stats Section -->
241
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
242
+ <div class="p-6">
243
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Usage Statistics</h2>
244
+ <div class="grid grid-cols-2 gap-4">
245
+ <div class="bg-indigo-50 p-3 rounded-lg">
246
+ <p class="text-xs text-indigo-600 font-medium">Calls Managed</p>
247
+ <p class="text-2xl font-bold text-indigo-700" id="callStatsCount">128</p>
248
+ </div>
249
+ <div class="bg-purple-50 p-3 rounded-lg">
250
+ <p class="text-xs text-purple-600 font-medium">Texts Responded</p>
251
+ <p class="text-2xl font-bold text-purple-700" id="textStatsCount">342</p>
252
+ </div>
253
+ <div class="bg-green-50 p-3 rounded-lg">
254
+ <p class="text-xs text-green-600 font-medium">AI Confidence</p>
255
+ <p class="text-2xl font-bold text-green-700">89%</p>
256
+ </div>
257
+ <div class="bg-yellow-50 p-3 rounded-lg">
258
+ <p class="text-xs text-yellow-600 font-medium">Training Cycles</p>
259
+ <p class="text-2xl font-bold text-yellow-700">24</p>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Call Log Preview -->
266
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
267
+ <div class="p-6">
268
+ <div class="flex justify-between items-center mb-4">
269
+ <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
270
+ <button class="text-xs text-indigo-600 hover:text-indigo-800">View All</button>
271
+ </div>
272
+ <div class="space-y-3 max-h-60 overflow-y-auto custom-scrollbar">
273
+ <div class="flex items-start py-2 border-b border-gray-100">
274
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
275
+ <i class="fas fa-phone-alt text-red-500"></i>
276
+ </div>
277
+ <div class="flex-1">
278
+ <p class="text-sm font-medium text-gray-800">Missed Call</p>
279
+ <p class="text-xs text-gray-500">From: (562) 555-0134</p>
280
+ <p class="text-xs text-gray-500">14 min ago - AI answered after 30s</p>
281
+ </div>
282
+ </div>
283
+ <div class="flex items-start py-2 border-b border-gray-100">
284
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
285
+ <i class="fas fa-sms text-green-500"></i>
286
+ </div>
287
+ <div class="flex-1">
288
+ <p class="text-sm font-medium text-gray-800">Text Response</p>
289
+ <p class="text-xs text-gray-500">To: (562) 555-0198</p>
290
+ <p class="text-xs text-gray-500">1 hour ago - AI confidence: 92%</p>
291
+ </div>
292
+ </div>
293
+ <div class="flex items-start py-2 border-b border-gray-100">
294
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
295
+ <i class="fas fa-phone-alt text-blue-500"></i>
296
+ </div>
297
+ <div class="flex-1">
298
+ <p class="text-sm font-medium text-gray-800">AI Call</p>
299
+ <p class="text-xs text-gray-500">With: (562) 555-0163 (2m 43s)</p>
300
+ <p class="text-xs text-gray-500">3 hours ago - Scheduled follow-up</p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Container for Jitsi meetings (hidden by default) -->
309
+ <div id="jitsi-container" style="display: none;"></div>
310
+
311
+ <!-- Training Modal -->
312
+ <div id="trainingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
313
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
314
+ <div class="p-6">
315
+ <div class="flex justify-between items-center mb-4">
316
+ <h3 class="text-lg font-semibold text-gray-900">Train Your Text AI</h3>
317
+ <button id="closeTraining" class="text-gray-500 hover:text-gray-700">
318
+ <i class="fas fa-times"></i>
319
+ </button>
320
+ </div>
321
+
322
+ <div class="space-y-4">
323
+ <div class="p-4 bg-gray-50 rounded-lg">
324
+ <p class="text-sm text-gray-700 mb-2">AI Knowledge Level: <span class="font-medium">Intermediate</span></p>
325
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
326
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
327
+ </div>
328
+ </div>
329
+
330
+ <div>
331
+ <p class="text-sm font-medium text-gray-700 mb-2">Training Mode</p>
332
+ <div class="grid grid-cols-2 gap-2">
333
+ <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="qa">Q&A Training</button>
334
+ <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="examples">Teach with Examples</button>
335
+ <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="keywords">Keyword Responses</button>
336
+ <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="prefs">Style Preferences</button>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Q&A Training Section -->
341
+ <div id="qaTraining" class="trainingSection hidden">
342
+ <div class="space-y-4">
343
+ <div>
344
+ <label class="block text-sm font-medium text-gray-700 mb-1">Question to Teach</label>
345
+ <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="E.g. What are your business hours?">
346
+ </div>
347
+ <div>
348
+ <label class="block text-sm font-medium text-gray-700 mb-1">Preferred Response</label>
349
+ <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="Our business hours are Monday to Friday, 9am to 5pm PST."></textarea>
350
+ </div>
351
+ <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
352
+ Add to AI Knowledge
353
+ </button>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Examples Training Section -->
358
+ <div id="examplesTraining" class="trainingSection hidden">
359
+ <div class="space-y-4">
360
+ <div>
361
+ <label class="block text-sm font-medium text-gray-700 mb-1">Example Conversation</label>
362
+ <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="5" placeholder="Client: When can I expect my order to arrive?
363
+ You: Your order will ship within 24 hours and typically arrives in 2-3 business days. We'll send tracking information once it's on the way."></textarea>
364
+ </div>
365
+ <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
366
+ Analyze for Patterns
367
+ </button>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Keywords Training Section -->
372
+ <div id="keywordsTraining" class="trainingSection hidden">
373
+ <div class="space-y-4">
374
+ <div>
375
+ <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Word/Phrase</label>
376
+ <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="E.g. refund, return policy">
377
+ </div>
378
+ <div>
379
+ <label class="block text-sm font-medium text-gray-700 mb-1">Response for This Keyword</label>
380
+ <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="Our return policy allows for returns within 30 days of purchase..."></textarea>
381
+ </div>
382
+ <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
383
+ Add Keyword Response
384
+ </button>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Preferences Training Section -->
389
+ <div id="prefsTraining" class="trainingSection hidden">
390
+ <div class="space-y-4">
391
+ <div>
392
+ <label class="block text-sm font-medium text-gray-700 mb-1">Communication Style</label>
393
+ <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm">
394
+ <option>Professional</option>
395
+ <option selected>Friendly</option>
396
+ <option>Concise</option>
397
+ <option>Detailed</option>
398
+ </select>
399
+ </div>
400
+ <div>
401
+ <label class="block text-sm font-medium text-gray-700 mb-1">Common Phrases You Use</label>
402
+ <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="E.g. Thanks for reaching out!, Happy to help!, Let me check that for you..."></textarea>
403
+ </div>
404
+ <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
405
+ Update Preferences
406
+ </button>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="pt-4 border-t border-gray-200">
411
+ <h4 class="text-sm font-medium text-gray-900 mb-2">AI Test Area</h4>
412
+ <div class="mb-2">
413
+ <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="Test message for AI to respond to" id="testMessage">
414
+ </div>
415
+ <button onclick="testAIResponse()" class="w-full py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm mb-4">
416
+ Test AI Response
417
+ </button>
418
+ <div id="aiResponse" class="hidden bg-gray-50 p-3 rounded-lg">
419
+ <p class="text-sm text-gray-800">This is where the AI's response would appear based on its current training.</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Settings Modal -->
428
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
429
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
430
+ <div class="p-6">
431
+ <div class="flex justify-between items-center mb-4">
432
+ <h3 class="text-lg font-semibold text-gray-900">Settings</h3>
433
+ <button id="closeSettings" class="text-gray-500 hover:text-gray-700">
434
+ <i class="fas fa-times"></i>
435
+ </button>
436
+ </div>
437
+
438
+ <div class="space-y-4">
439
+ <div>
440
+ <label class="block text-sm font-medium text-gray-700 mb-1">Your Phone Number</label>
441
+ <input type="tel" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" value="(562) 228-9429">
442
+ </div>
443
+
444
+ <div>
445
+ <label class="block text-sm font-medium text-gray-700 mb-1">iMessage Integration</label>
446
+ <div class="mt-1 flex items-center">
447
+ <input type="checkbox" id="enableIMessage" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
448
+ <label for="enableIMessage" class="ml-2 block text-sm text-gray-700">Enable iPhone Message Handling</label>
449
+ </div>
450
+ <p class="mt-1 text-xs text-gray-500">Verified number: 15622289429</p>
451
+ </div>
452
+
453
+ <div id="imessageSettings" class="pl-6 space-y-3">
454
+ <div>
455
+ <label class="block text-sm font-medium text-gray-700 mb-1">Backup Phone Number</label>
456
+ <input type="tel" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Optional">
457
+ </div>
458
+ </div>
459
+
460
+ <div>
461
+ <label class="block text-sm font-medium text-gray-700 mb-1">Memory Retention</label>
462
+ <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
463
+ <option>7 days</option>
464
+ <option>14 days</option>
465
+ <option selected>30 days</option>
466
+ <option>90 days</option>
467
+ <option>Indefinitely</option>
468
+ </select>
469
+ <p class="mt-1 text-xs text-gray-500">How long should AI remember conversation history?</p>
470
+ </div>
471
+
472
+ <div>
473
+ <label class="flex items-center space-x-3">
474
+ <input type="checkbox" checked class="rounded h-4 w-4 text-indigo-600 focus:ring-indigo-500">
475
+ <span class="text-sm font-medium text-gray-700">Daily Training Reminders</span>
476
+ </label>
477
+ </div>
478
+
479
+ <div class="pt-4 border-t border-gray-200">
480
+ <h4 class="text-sm font-medium text-gray-900 mb-2">AI Advanced Settings</h4>
481
+ <div class="mb-2">
482
+ <label class="block text-xs font-medium text-gray-700 mb-1">Creativity Level</label>
483
+ <input type="range" min="0" max="10" value="7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
484
+ <div class="flex justify-between text-xs text-gray-500 px-1">
485
+ <span>Precise</span>
486
+ <span>Balanced</span>
487
+ <span>Creative</span>
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="flex space-x-3 pt-4">
493
+ <button class="flex-1 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm">
494
+ Reset Training
495
+ </button>
496
+ <button class="flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm">
497
+ Save Settings
498
+ </button>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <script>
506
+ // Jitsi Client Setup with proper error handling
507
+ let jitsiClient;
508
+ let jitsiApi;
509
+ let currentCallId = null;
510
+
511
+ async function initializeJitsiClient() {
512
+ try {
513
+ if (!window.JitsiMeetExternalAPI) {
514
+ throw new Error('Jitsi library not loaded');
515
+ }
516
+
517
+ // Clear any existing container
518
+ const jitsiContainer = document.getElementById('jitsi-container');
519
+ jitsiContainer.innerHTML = '';
520
+
521
+ return true;
522
+ } catch (error) {
523
+ console.error("Jitsi initialization failed:", error);
524
+ alert('Failed to initialize call system. Please refresh the page.');
525
+ return false;
526
+ }
527
+ }
528
+
529
+ async function makeOutgoingCall(number, options = {}) {
530
+ try {
531
+ if (!number) {
532
+ throw new Error('Phone number is required');
533
+ }
534
+
535
+ // Initialize if not already done
536
+ if (!jitsiApi) {
537
+ const domain = 'meet.jit.si';
538
+ currentCallId = `call-${Date.now()}-${number.replace(/\D/g, '')}`;
539
+
540
+ jitsiApi = new window.JitsiMeetExternalAPI(domain, {
541
+ roomName: currentCallId,
542
+ parentNode: document.getElementById('jitsi-container'),
543
+ userInfo: {
544
+ displayName: 'AI Call Manager',
545
+ email: 'call@trillion.ventures'
546
+ },
547
+ configOverwrite: {
548
+ startWithAudioMuted: false,
549
+ startWithVideoMuted: true,
550
+ disableThirdPartyRequests: true,
551
+ enableNoisyMicDetection: false
552
+ },
553
+ interfaceConfigOverwrite: {
554
+ DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
555
+ SHOW_JITSI_WATERMARK: false,
556
+ SHOW_WATERMARK_FOR_GUESTS: false,
557
+ TOOLBAR_BUTTONS: []
558
+ }
559
+ });
560
+
561
+ // Set up event listeners
562
+ jitsiApi.on('readyToClose', () => {
563
+ endCurrentCall();
564
+ });
565
+ }
566
+
567
+ // Show calling interface
568
+ showCallInterface(number, options.isTraining, options.trainingMode);
569
+ return { id: currentCallId, api: jitsiApi };
570
+
571
+ } catch (error) {
572
+ console.error("Call failed:", error);
573
+ alert(`Call error: ${error.message}`);
574
+ throw error;
575
+ }
576
+ }
577
+
578
+ function endCurrentCall() {
579
+ if (jitsiApi) {
580
+ try {
581
+ jitsiApi.dispose();
582
+ jitsiContainer.innerHTML = '';
583
+ } catch (error) {
584
+ console.error("Error ending call:", error);
585
+ } finally {
586
+ jitsiApi = null;
587
+ currentCallId = null;
588
+ }
589
+ }
590
+ }
591
+
592
+ function handleSocketMessage(event) {
593
+ const data = JSON.parse(event.data);
594
+ switch(data.type) {
595
+ case 'call_update':
596
+ updateCallUI(data.status, data.transcript);
597
+ break;
598
+ case 'message':
599
+ console.log("New message:", data.content);
600
+ break;
601
+ case 'call_ended':
602
+ endCallUI(data.callId);
603
+ break;
604
+ }
605
+ }
606
+
607
+ async function sendSMS(to, message) {
608
+ try {
609
+ const response = await fetch('/api/send-sms', {
610
+ method: 'POST',
611
+ headers: {
612
+ 'Content-Type': 'application/json',
613
+ 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
614
+ },
615
+ body: JSON.stringify({ to, message })
616
+ });
617
+
618
+ if (!response.ok) throw new Error('Failed to send SMS');
619
+ return await response.json();
620
+ } catch (error) {
621
+ console.error('SMS send error:', error);
622
+ throw error;
623
+ }
624
+ }
625
+
626
+ // Save call stats when calls are made/ended
627
+ function updateCallStats() {
628
+ const callStats = parseInt(localStorage.getItem('callStats')) || 128;
629
+ localStorage.setItem('callStats', callStats + 1);
630
+ document.querySelector('#callStatsCount').textContent = callStats + 1;
631
+ }
632
+
633
+ // AI Response Generation
634
+ async function generateAIResponse(message, context = {}) {
635
+ try {
636
+ const response = await fetch('/api/generate-ai-response', {
637
+ method: 'POST',
638
+ headers: {
639
+ 'Content-Type': 'application/json',
640
+ 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
641
+ },
642
+ body: JSON.stringify({
643
+ message,
644
+ style: document.getElementById('responseStyle').value,
645
+ context
646
+ })
647
+ });
648
+
649
+ if (!response.ok) throw new Error('AI response failed');
650
+ return await response.json();
651
+ } catch (error) {
652
+ console.error('AI error:', error);
653
+ return { response: "I'm having trouble generating a response right now. Please try again later." };
654
+ }
655
+ }
656
+
657
+ // Toggle settings visibility
658
+ document.getElementById('enableCallAI').addEventListener('change', function() {
659
+ document.getElementById('callSettings').style.display = this.checked ? 'block' : 'none';
660
+ });
661
+
662
+ document.getElementById('enableTextAI').addEventListener('change', function() {
663
+ document.getElementById('textSettings').style.display = this.checked ? 'block' : 'none';
664
+ });
665
+
666
+ document.getElementById('enableIMessage').addEventListener('change', function() {
667
+ document.getElementById('imessageSettings').style.display = this.checked ? 'block' : 'none';
668
+ if (this.checked) {
669
+ connectIMessage();
670
+ }
671
+ });
672
+
673
+ // Training modal
674
+ const trainingModal = document.getElementById('trainingModal');
675
+ const trainBtn = document.getElementById('trainAIbtn');
676
+ const closeTraining = document.getElementById('closeTraining');
677
+
678
+ trainBtn.addEventListener('click', () => {
679
+ trainingModal.classList.remove('hidden');
680
+ showTrainingSection('qa'); // Default to Q&A section
681
+ });
682
+
683
+ closeTraining.addEventListener('click', () => {
684
+ trainingModal.classList.add('hidden');
685
+ });
686
+
687
+ // Settings modal
688
+ const settingsModal = document.getElementById('settingsModal');
689
+ const settingsBtn = document.getElementById('settingsBtn');
690
+ const closeSettings = document.getElementById('closeSettings');
691
+
692
+ settingsBtn.addEventListener('click', () => {
693
+ settingsModal.classList.remove('hidden');
694
+ });
695
+
696
+ closeSettings.addEventListener('click', () => {
697
+ settingsModal.classList.add('hidden');
698
+ });
699
+
700
+ // Training sections
701
+ const trainingModeBtns = document.querySelectorAll('.trainingModeBtn');
702
+ trainingModeBtns.forEach(btn => {
703
+ btn.addEventListener('click', () => {
704
+ const mode = btn.dataset.mode;
705
+ showTrainingSection(mode);
706
+
707
+ // Update active button style
708
+ trainingModeBtns.forEach(b => b.classList.remove('bg-purple-100', 'border-purple-300', 'text-purple-800'));
709
+ btn.classList.add('bg-purple-100', 'border-purple-300', 'text-purple-800');
710
+ });
711
+ });
712
+
713
+ function showTrainingSection(sectionId) {
714
+ document.querySelectorAll('.trainingSection').forEach(section => {
715
+ section.classList.add('hidden');
716
+ });
717
+ document.getElementById(sectionId + 'Training').classList.remove('hidden');
718
+ }
719
+
720
+ // Call functionality with Twilio API integration
721
+ const callPurpose = document.getElementById('callPurpose');
722
+ const trainingOptions = document.getElementById('trainingOptions');
723
+
724
+ callPurpose.addEventListener('change', function() {
725
+ trainingOptions.style.display = this.value === 'training' ? 'block' : 'none';
726
+ });
727
+
728
+ document.getElementById('startCallBtn').addEventListener('click', async function() {
729
+ const loadingIcon = this.querySelector('i');
730
+ const originalContent = this.innerHTML;
731
+
732
+ try {
733
+ // Set loading state
734
+ this.disabled = true;
735
+ loadingIcon.className = 'fas fa-spinner fa-spin';
736
+
737
+ const number = document.getElementById('callNumber').value.trim();
738
+ if (!number) {
739
+ throw new Error('Please enter a phone number');
740
+ }
741
+
742
+ const isTraining = document.getElementById('callPurpose').value === 'training';
743
+ const trainingMode = isTraining ? document.getElementById('callTrainingMode').value : null;
744
+ const enableTraining = isTraining ? document.getElementById('enableCallTraining').checked : false;
745
+
746
+ // Initialize Jitsi if needed
747
+ if (!jitsiApi) {
748
+ await initializeJitsiClient();
749
+ }
750
+
751
+ // Make the call
752
+ const call = await makeOutgoingCall(number, {
753
+ isTraining,
754
+ trainingMode,
755
+ enableTraining
756
+ });
757
+
758
+ // Update UI for active call
759
+ document.getElementById('callStatus').textContent = `Calling ${number}`;
760
+ updateCallStats();
761
+
762
+ } catch (error) {
763
+ console.error('Call error:', error);
764
+ alert(`Call failed: ${error.message}`);
765
+
766
+ // Clean up if call failed
767
+ endCurrentCall();
768
+ } finally {
769
+ // Reset button state
770
+ this.disabled = false;
771
+ this.innerHTML = originalContent;
772
+ }
773
+ });
774
+
775
+ // Ensure 15622289429 is properly configured
776
+ function verifyNumberConfiguration() {
777
+ const storedNum = localStorage.getItem('verifiedNumber');
778
+ if (storedNum !== '15622289429') {
779
+ localStorage.setItem('verifiedNumber', '15622289429');
780
+ alert('Primary number has been updated to 15622289429');
781
+ }
782
+
783
+ // Verify Twilio is properly linked
784
+ if (!localStorage.getItem('twilioSID')) {
785
+ return false;
786
+ }
787
+ return true;
788
+ }
789
+
790
+ // Load saved settings on page load
791
+ // Advanced AI Persona Configuration
792
+ const aiPersona = {
793
+ name: "Jay's Mobile Wash Assistant",
794
+ tone: "friendly/professional",
795
+ knowledge: {
796
+ packages: {
797
+ basic: {
798
+ car: 60,
799
+ suv: 70,
800
+ includes: "2-Step Hand Wash, Tornador Z-007 Blast, Ceramic Rim Cleaning, Interior Wipe-Down"
801
+ },
802
+ luxury: {
803
+ car: 130,
804
+ suv: 140,
805
+ includes: "Basic Package + Ceramic Spray Wax, SiO₂ Interior Cleaner, Vinyl Restoration"
806
+ },
807
+ max: {
808
+ car: 200,
809
+ suv: 210,
810
+ includes: "Luxury Package + Graphene Wax, Steam Sanitization, Leather Conditioning, Bio-Bomb Odor Removal"
811
+ }
812
+ },
813
+ addons: [
814
+ "Ceramic Coating (2+ years)",
815
+ "Polish + Scratch Removal",
816
+ "Pet Hair Removal",
817
+ "Rim De-Iron",
818
+ "Engine Bay Detailing",
819
+ "Trim Restoration"
820
+ ],
821
+ policies: {
822
+ surcharges: "30% for heavy dirt, 50% for biohazards, $50 for after-dark work",
823
+ guarantee: "Daylight only, full disclosure required",
824
+ payment: "1.75% card fee, $10 travel fee per 10 miles beyond 30"
825
+ },
826
+ contact: "562-228-9429 | www.jaysmobilewash.com"
827
+ },
828
+ capabilities: {
829
+ research: true,
830
+ memory: true,
831
+ continuousLearning: true
832
+ }
833
+ };
834
+
835
+ // Initialize speech recognition
836
+ const speechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
837
+ const recognition = speechRecognition ? new speechRecognition() : null;
838
+ if (recognition) {
839
+ recognition.lang = 'en-US';
840
+ recognition.interimResults = false;
841
+ recognition.maxAlternatives = 1;
842
+ }
843
+
844
+ document.addEventListener('DOMContentLoaded', function() {
845
+ verifyNumberConfiguration();
846
+
847
+ // Improved System Test Modal with actual testing
848
+ const testBtn = document.getElementById('systemTestBtn');
849
+
850
+ testBtn.addEventListener('click', async function() {
851
+ try {
852
+ // Show testing state
853
+ this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
854
+
855
+ // Test critical components
856
+ const tests = {
857
+ callSystem: await testCallSystem(),
858
+ messaging: await testMessagingSystem(),
859
+ ai: await testAISystem()
860
+ };
861
+
862
+ // Show results
863
+ const allPassed = Object.values(tests).every(test => test.success);
864
+ if (allPassed) {
865
+ alert('All systems tested successfully!');
866
+ this.innerHTML = '<i class="fas fa-check-circle"></i>';
867
+ setTimeout(() => {
868
+ this.innerHTML = '<i class="fas fa-vial"></i>';
869
+ }, 3000);
870
+ } else {
871
+ const failedTests = Object.entries(tests)
872
+ .filter(([_, test]) => !test.success)
873
+ .map(([name]) => name);
874
+ alert(`System test failed on: ${failedTests.join(', ')}`);
875
+ this.innerHTML = '<i class="fas fa-exclamation-circle"></i>';
876
+ }
877
+
878
+ } catch (error) {
879
+ console.error('System test error:', error);
880
+ alert('System test failed unexpectedly');
881
+ this.innerHTML = '<i class="fas fa-times-circle"></i>';
882
+ }
883
+ });
884
+
885
+ async function testCallSystem() {
886
+ try {
887
+ await initializeJitsiClient();
888
+ return { success: true, message: 'Call system ready' };
889
+ } catch (error) {
890
+ return {
891
+ success: false,
892
+ message: `Call system failed: ${error.message}`
893
+ };
894
+ }
895
+ }
896
+
897
+ async function testMessagingSystem() {
898
+ try {
899
+ const response = await fetch('/api/test-messaging', {
900
+ method: 'POST',
901
+ headers: {
902
+ 'Content-Type': 'application/json',
903
+ 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
904
+ }
905
+ });
906
+ return response.ok
907
+ ? { success: true, message: 'Messaging system ready' }
908
+ : { success: false, message: 'Messaging test failed' };
909
+ } catch (error) {
910
+ return {
911
+ success: false,
912
+ message: `Messaging test error: ${error.message}`
913
+ };
914
+ }
915
+ }
916
+
917
+ async function testAISystem() {
918
+ try {
919
+ const testMessage = "Testing AI system - please respond with 'OK'";
920
+ const response = await generateAIResponse(testMessage);
921
+ return {
922
+ success: response.includes('OK'),
923
+ message: response.includes('OK')
924
+ ? 'AI system responding'
925
+ : 'Unexpected AI response'
926
+ };
927
+ } catch (error) {
928
+ return {
929
+ success: false,
930
+ message: `AI test failed: ${error.message}`
931
+ };
932
+ }
933
+ }
934
+ if (!verifyNumberConfiguration()) {
935
+ alert(`To fix call/message handling for 15622289429:
936
+ 1. Go to Settings > Phone Integration
937
+ 2. Enter your Twilio credentials:
938
+ - Account SID: your_twilio_sid
939
+ - Auth Token: your_twilio_token
940
+ - Phone Number: 15622289429
941
+ 3. Save & restart the app
942
+ Or contact support at help@trillion.ventures`);
943
+ } else {
944
+ alert('System is properly configured for number 15622289429!');
945
+ }
946
+ });
947
+
948
+ // Rest of DOMContentLoaded...
949
+ async function connectIMessage() {
950
+ try {
951
+ const appleConfig = {
952
+ identifier: 'com.trillion.aicallmanager',
953
+ services: ['messages']
954
+ };
955
+
956
+ const connection = await window.MapKit.init({
957
+ authorizationCallback: done => {
958
+ done(localStorage.getItem('appleJWT'));
959
+ }
960
+ });
961
+
962
+ connection.messages.addEventListener('messageReceived', (event) => {
963
+ const { message, sender } = event;
964
+ handleIncomingMessage({
965
+ from: sender.handle,
966
+ message: message.text,
967
+ source: 'imessage'
968
+ });
969
+ });
970
+
971
+ return true;
972
+ } catch (error) {
973
+ console.error('iMessage connection failed:', error);
974
+ return false;
975
+ }
976
+ }
977
+
978
+ document.addEventListener('DOMContentLoaded', function() {
979
+ // Check if setup was already completed
980
+ const isSetupComplete = localStorage.getItem('setupComplete') === 'true';
981
+ if (isSetupComplete) {
982
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
983
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
984
+ document.getElementById('setupHelpBtn').title = 'Setup already completed';
985
+ }
986
+ const savedSettings = localStorage.getItem('aiCallSettings');
987
+ if (savedSettings) {
988
+ const config = JSON.parse(savedSettings);
989
+
990
+ // Update phone number displays
991
+ document.querySelectorAll('.phone-number-display').forEach(el => {
992
+ el.textContent = config.twilioNum || config.phoneNum || '+1 (858) 263-4276';
993
+ });
994
+
995
+ // Update stats section with saved data
996
+ document.querySelector('#callStatsCount').textContent = localStorage.getItem('callStats') || '128';
997
+ document.querySelector('#textStatsCount').textContent = localStorage.getItem('textStats') || '342';
998
+ }
999
+ });
1000
+
1001
+ // Function to update call UI with real data
1002
+ function updateCallUI(status, transcript) {
1003
+ const statusElement = document.querySelector('#callStatus');
1004
+ if (statusElement) {
1005
+ statusElement.textContent = status;
1006
+ }
1007
+
1008
+ const transcriptElement = document.querySelector('#callTranscript');
1009
+ if (transcriptElement) {
1010
+ transcriptElement.textContent = transcript;
1011
+ }
1012
+ }
1013
+
1014
+ // Call interface simulation
1015
+ function showCallInterface(number, isTraining, trainingMode) {
1016
+ const callModal = document.createElement('div');
1017
+ callModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50';
1018
+ callModal.innerHTML = `
1019
+ <div class="bg-white rounded-xl shadow-lg w-full max-w-sm">
1020
+ <div class="p-6">
1021
+ <div class="text-center mb-4">
1022
+ <div class="call-animation mx-auto mb-4"></div>
1023
+ <h3 class="text-lg font-medium text-gray-900">Calling ${number}</h3>
1024
+ <p class="text-sm text-gray-500">${isTraining ? 'AI Training Session' : 'Outgoing Call'}</p>
1025
+ </div>
1026
+
1027
+ ${isTraining ? `
1028
+ <div class="mb-4">
1029
+ <p class="text-sm font-medium text-gray-700 mb-1">Training Mode: ${trainingMode}</p>
1030
+ <div class="bg-gray-50 p-3 rounded-lg">
1031
+ <p class="text-sm text-gray-700">AI will ask questions and learn from your responses.</p>
1032
+ </div>
1033
+ </div>` : ''}
1034
+
1035
+ <div class="mb-6">
1036
+ <p class="text-sm font-medium text-gray-700 mb-1">Current AI Knowledge Level</p>
1037
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-1">
1038
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
1039
+ </div>
1040
+ <p class="text-xs text-gray-500">Understanding of your speech patterns: <span class="font-medium">Medium</span></p>
1041
+ </div>
1042
+
1043
+ <div class="grid grid-cols-3 gap-2">
1044
+ <button class="callBtn py-3 px-4 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center justify-center">
1045
+ <i class="fas fa-microphone text-gray-700"></i>
1046
+ </button>
1047
+ <button class="callBtn py-3 px-4 bg-green-500 hover:bg-green-600 text-white rounded-lg flex items-center justify-center">
1048
+ <i class="fas fa-check"></i>
1049
+ </button>
1050
+ <button class="callBtn py-3 px-4 bg-red-500 hover:bg-red-600 text-white rounded-lg flex items-center justify-center">
1051
+ <i class="fas fa-times"></i>
1052
+ </button>
1053
+ <button class="callBtn py-3 px-4 bg-blue-50 hover:bg-blue-100 rounded-lg flex items-center justify-center">
1054
+ <i class="fas fa-brain text-blue-700"></i>
1055
+ </button>
1056
+ <button class="callBtn py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg flex items-center justify-center">
1057
+ <i class="fas fa-comment"></i>
1058
+ </button>
1059
+ <button class="callBtn py-3 px-4 bg-blue-50 hover:bg-blue-100 rounded-lg flex items-center justify-center">
1060
+ <i class="fas fa-history text-blue-700"></i>
1061
+ </button>
1062
+ </div>
1063
+ </div>
1064
+ </div>
1065
+ `;
1066
+
1067
+ document.body.appendChild(callModal);
1068
+
1069
+ // End call button
1070
+ const endCallBtn = callModal.querySelector('.bg-red-500');
1071
+ endCallBtn.addEventListener('click', async function() {
1072
+ try {
1073
+ await trillionClient.calls.end(callId);
1074
+ document.body.removeChild(callModal);
1075
+
1076
+ if (isTraining) {
1077
+ alert('AI training session completed. New knowledge added to memory.');
1078
+ }
1079
+ } catch (error) {
1080
+ console.error('Error ending call:', error);
1081
+ alert('Error ending call');
1082
+ }
1083
+ });
1084
+
1085
+ // In a real app, would have websockets or similar for real-time call interaction
1086
+ }
1087
+
1088
+ async function testAIResponse() {
1089
+ const testMessage = document.getElementById('testMessage').value;
1090
+ const responseBox = document.getElementById('aiResponse');
1091
+
1092
+ if (testMessage.trim() === '') {
1093
+ alert('Please enter a message to test');
1094
+ return;
1095
+ }
1096
+
1097
+ try {
1098
+ responseBox.querySelector('p').textContent = "Generating AI response...";
1099
+ responseBox.classList.remove('hidden');
1100
+
1101
+ const aiResponse = await generateAIResponse(testMessage);
1102
+ responseBox.querySelector('p').textContent = aiResponse.response;
1103
+ } catch (error) {
1104
+ responseBox.querySelector('p').textContent = "Error generating response. Please try again.";
1105
+ console.error(error);
1106
+ }
1107
+ }
1108
+
1109
+ // Close modals when clicking outside
1110
+ window.addEventListener('click', (event) => {
1111
+ if (event.target === trainingModal) {
1112
+ trainingModal.classList.add('hidden');
1113
+ }
1114
+ if (event.target === settingsModal) {
1115
+ settingsModal.classList.add('hidden');
1116
+ }
1117
+ });
1118
+ });
1119
+
1120
+ // Integrated webhook for all SMS sources
1121
+ app.post('/api/message-webhook', async (req, res) => {
1122
+ const { source, from, message } = req.body;
1123
+
1124
+ // Validate it's for the correct number
1125
+ if (from.includes('15622289429')) {
1126
+
1127
+ // Handle iMessage specifically
1128
+ if (source === 'imessage') {
1129
+ // Process with Apple Business Chat API
1130
+ try {
1131
+ const imResponse = await appleChatAPI.send({
1132
+ to: from,
1133
+ message: `ACK: ${message}`, // temp ack
1134
+ type: 'text'
1135
+ });
1136
+ } catch (e) {
1137
+ console.error('iMessage error:', e);
1138
+ }
1139
+ }
1140
+
1141
+ // Trigger event to frontend
1142
+ pusher.trigger(`incoming_15622289429`, 'new_message', {
1143
+ from,
1144
+ message,
1145
+ source
1146
+ });
1147
+ }
1148
+
1149
+ res.status(200).send();
1150
+ });
1151
+
1152
+ // AI Response Generation using HuggingFace
1153
+ app.post('/api/generate-response', async (req, res) => {
1154
+ const { message } = req.body;
1155
+
1156
+ try {
1157
+ const response = await hf.textGeneration({
1158
+ model: 'facebook/blenderbot-400M-distill',
1159
+ inputs: message,
1160
+ parameters: {
1161
+ max_new_tokens: 150,
1162
+ temperature: 0.7
1163
+ }
1164
+ });
1165
+
1166
+ res.json({ response: response.generated_text });
1167
+ } catch (error) {
1168
+ console.error(error);
1169
+ res.status(500).json({ error: 'Failed to generate response' });
1170
+ }
1171
+ });
1172
+
1173
+ // Test functions
1174
+ document.getElementById('testCallBtn').addEventListener('click', async function() {
1175
+ const resultEl = document.getElementById('testResultText');
1176
+ resultEl.textContent = "Initiating AI call test...";
1177
+ document.getElementById('testResults').classList.remove('hidden');
1178
+
1179
+ try {
1180
+ // Simulate calling your number
1181
+ const response = await fetch('/api/test-call', {
1182
+ method: 'POST',
1183
+ body: JSON.stringify({
1184
+ test: true,
1185
+ greeting: document.getElementById('greetingMessage').value
1186
+ })
1187
+ });
1188
+
1189
+ resultEl.textContent = "AI answered successfully! Call is active for testing.";
1190
+
1191
+ // Simulate AI learning capabilities
1192
+ setTimeout(() => {
1193
+ resultEl.textContent += "\nAI is analyzing call patterns and learning...";
1194
+ }, 2000);
1195
+
1196
+ } catch (error) {
1197
+ resultEl.textContent = `Test failed: ${error.message}`;
1198
+ }
1199
+ });
1200
+
1201
+ document.getElementById('testTextBtn').addEventListener('click', async function() {
1202
+ const resultEl = document.getElementById('testResultText');
1203
+ resultEl.textContent = "Testing AI text response system...";
1204
+ document.getElementById('testResults').classList.remove('hidden');
1205
+
1206
+ try {
1207
+ const testMsg = "Hi, how much for a full detail with ceramic coating?";
1208
+ const response = await generateAIResponse(testMsg, {
1209
+ service: "car_wash",
1210
+ context: aiPersona.knowledge
1211
+ });
1212
+
1213
+ resultEl.textContent = `AI Response: ${response.response}\n\nContext used: ${JSON.stringify(aiPersona.knowledge)}`;
1214
+ } catch (error) {
1215
+ resultEl.textContent = `Test failed: ${error.message}`;
1216
+ }
1217
+ });
1218
+
1219
+ // Enhanced AI learning capabilities
1220
+ function enhanceAILearning() {
1221
+ // Enable verbal training
1222
+ const verbalTrainingBtn = document.createElement('button');
1223
+ verbalTrainingBtn.className = 'w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg my-2';
1224
+ verbalTrainingBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Verbal Training Session';
1225
+ verbalTrainingBtn.onclick = startVerbalTraining;
1226
+ document.querySelector('#trainingModal .space-y-4').appendChild(verbalTrainingBtn);
1227
+
1228
+ // Add car wash knowledge base
1229
+ document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
1230
+ addCarWashKnowledge();
1231
+ });
1232
+ }
1233
+
1234
+ function startVerbalTraining() {
1235
+ if (!recognition) {
1236
+ alert("Speech recognition not supported in this browser");
1237
+ return;
1238
+ }
1239
+
1240
+ recognition.start();
1241
+ alert("Speak your training phrases now...");
1242
+
1243
+ recognition.onresult = function(event) {
1244
+ const transcript = event.results[0][0].transcript;
1245
+ // Process training phrases
1246
+ analyzeTrainingPhrase(transcript);
1247
+ };
1248
+ }
1249
+
1250
+ function analyzeTrainingPhrase(phrase) {
1251
+ // Advanced NLP processing would happen here
1252
+ alert(`AI learned from your phrase: "${phrase}"`);
1253
+ // Update AI knowledge base
1254
+ if (phrase.includes("ceramic")) {
1255
+ aiPersona.knowledge.ceramicCoating = true;
1256
+ }
1257
+ if (phrase.includes("interior")) {
1258
+ aiPersona.knowledge.interiorDetailing = true;
1259
+ }
1260
+ }
1261
+
1262
+ function addCarWashKnowledge() {
1263
+ const knowledge = {
1264
+ ceramicCoating: "Ceramic coating is a liquid polymer that chemically bonds with vehicle paint creating a protective layer. Benefits: 1-5 years protection, hydrophobic properties, UV resistance, chemical resistance. Cost: $500-$3000 depending on vehicle size and product quality.",
1265
+ clayBar: "Clay bar removes embedded contaminants from paint. Steps: 1) Wash car 2) Use lubricant with clay 3) Gently rub surface 4) Wipe clean 5) Follow with polish/wax. Essential before ceramic coating.",
1266
+ paintCorrection: "Multi-step process: 1) Wash & decontaminate 2) Compound (if needed) 3) Polish 4) Final polish 5) Protect. Removes swirls, scratches, oxidation. Grade scratches: Level 1 (clear coat only) - Level 3 (through base coat)."
1267
+ };
1268
+
1269
+ Object.assign(aiPersona.knowledge, knowledge);
1270
+ alert("Added comprehensive car wash knowledge base to AI!");
1271
+ }
1272
+
1273
+ // Enhanced call handling with learning
1274
+ async function handleIncomingCall() {
1275
+ const greeting = document.getElementById('greetingMessage').value;
1276
+ // Initialize advanced call handling
1277
+ const call = await jitsiClient.makeCall({
1278
+ learningMode: true,
1279
+ greeting,
1280
+ context: aiPersona
1281
+ });
1282
+
1283
+ // Enable real-time learning
1284
+ callSocket.send(JSON.stringify({
1285
+ type: 'enable_learning',
1286
+ callId: call.id
1287
+ }));
1288
+ }
1289
+
1290
+ // Initialize all enhanced features
1291
+ document.addEventListener('DOMContentLoaded', function() {
1292
+ enhanceAILearning();
1293
+ });
1294
+
1295
+ app.listen(3000, () => console.log('Server running on port 3000'));
1296
+ </script>
1297
+
1298
+ <style>
1299
+ .wizard-step {
1300
+ display: none;
1301
+ }
1302
+ .wizard-step.active {
1303
+ display: block;
1304
+ animation: fadeIn 0.3s ease-out;
1305
+ }
1306
+ @keyframes fadeIn {
1307
+ from { opacity: 0; transform: translateY(10px); }
1308
+ to { opacity: 1; transform: translateY(0); }
1309
+ }
1310
+ .wizard-progress {
1311
+ height: 4px;
1312
+ background: #e5e7eb;
1313
+ margin-bottom: 1.5rem;
1314
+ }
1315
+ .wizard-progress-bar {
1316
+ height: 100%;
1317
+ background: #4f46e5;
1318
+ transition: width 0.3s ease;
1319
+ }
1320
+ </style>
1321
+
1322
+ <!-- Setup Wizard Modal -->
1323
+ <div id="setupHelpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
1324
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
1325
+ <div class="p-6">
1326
+ <div class="flex justify-between items-center mb-4">
1327
+ <h3 class="text-lg font-semibold text-gray-900">Setup Wizard</h3>
1328
+ <button id="closeSetupHelp" class="text-gray-500 hover:text-gray-700">
1329
+ <i class="fas fa-times"></i>
1330
+ </button>
1331
+ </div>
1332
+
1333
+ <div class="wizard-progress">
1334
+ <div id="wizardProgressBar" class="wizard-progress-bar" style="width: 20%"></div>
1335
+ </div>
1336
+
1337
+ <!-- Step 1: Welcome -->
1338
+ <div id="step1" class="wizard-step active">
1339
+ <div class="text-center mb-6">
1340
+ <div class="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4">
1341
+ <i class="fas fa-sparkles text-blue-600 text-2xl"></i>
1342
+ </div>
1343
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Welcome to AI Call Manager</h3>
1344
+ <p class="text-gray-600">Let's get you set up in just a few simple steps. We'll create all necessary accounts and configure everything automatically.</p>
1345
+ </div>
1346
+ <div class="flex justify-between mt-6">
1347
+ <button class="wizard-next-btn w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Get Started</button>
1348
+ </div>
1349
+ </div>
1350
+
1351
+ <!-- Step 2: Credentials -->
1352
+ <div id="step2" class="wizard-step">
1353
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Account Information</h3>
1354
+
1355
+ <div class="space-y-4">
1356
+ <div>
1357
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
1358
+ <input type="email" id="setupEmail" class="w-full py-2 px-3 border border-gray-300 rounded-lg" value="jason@trillion.ventures" readonly>
1359
+ </div>
1360
+
1361
+ <div>
1362
+ <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
1363
+ <div class="relative">
1364
+ <input type="password" id="setupPassword" class="w-full py-2 px-3 border border-gray-300 rounded-lg" value="TrillionAI2024!" readonly>
1365
+ <button class="absolute right-3 top-2 text-gray-400 hover:text-gray-600">
1366
+ <i class="fas fa-eye"></i>
1367
+ </button>
1368
+ </div>
1369
+ </div>
1370
+
1371
+ <div class="p-3 bg-blue-50 rounded-lg mt-2">
1372
+ <p class="text-sm text-blue-700">We'll use these credentials to automatically create accounts with all required services.</p>
1373
+ </div>
1374
+ </div>
1375
+
1376
+ <div class="flex justify-between mt-6">
1377
+ <button class="wizard-prev-btn py-2 px-4 text-gray-700 hover:text-gray-900">Back</button>
1378
+ <button class="wizard-next-btn py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Continue</button>
1379
+ </div>
1380
+ </div>
1381
+
1382
+ <!-- Step 3: Automatic Setup -->
1383
+ <div id="step3" class="wizard-step">
1384
+ <div class="text-center mb-6">
1385
+ <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
1386
+ <i class="fas fa-robot text-green-600 text-2xl"></i>
1387
+ </div>
1388
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Automatic Setup</h3>
1389
+ <p class="text-gray-600">We'll now create accounts and configure everything needed.</p>
1390
+ </div>
1391
+
1392
+ <div id="setupProgress" class="space-y-3 mb-6">
1393
+ <div class="flex items-center">
1394
+ <div id="setupTrillion" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1395
+ <span class="text-sm">Creating Trillion account...</span>
1396
+ </div>
1397
+ <div class="flex items-center">
1398
+ <div id="setupPusher" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1399
+ <span class="text-sm">Setting up Pusher...</span>
1400
+ </div>
1401
+ <div class="flex items-center">
1402
+ <div id="setupHuggingFace" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1403
+ <span class="text-sm">Configuring HuggingFace...</span>
1404
+ </div>
1405
+ <div class="flex items-center">
1406
+ <div id="setupTwilio" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1407
+ <span class="text-sm">Connecting Twilio...</span>
1408
+ </div>
1409
+ <div class="flex items-center">
1410
+ <div id="setupEnv" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1411
+ <span class="text-sm">Creating configuration files...</span>
1412
+ </div>
1413
+ </div>
1414
+
1415
+ <div class="hidden" id="setupComplete">
1416
+ <div class="p-3 bg-green-50 rounded-lg border border-green-200 mb-4">
1417
+ <p class="text-sm text-green-700 font-medium">All services configured successfully!</p>
1418
+ </div>
1419
+ </div>
1420
+
1421
+ <div class="flex justify-between mt-4">
1422
+ <button class="wizard-prev-btn py-2 px-4 text-gray-700 hover:text-gray-900">Back</button>
1423
+ <button id="startSetupBtn" class="wizard-next-btn py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg">Start Setup</button>
1424
+ <button id="finishBtn" class="py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg hidden">Finish Setup</button>
1425
+ </div>
1426
+ </div>
1427
+
1428
+ <!-- Step 4: Verification -->
1429
+ <div id="step4" class="wizard-step">
1430
+ <div class="text-center mb-6">
1431
+ <div class="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
1432
+ <i class="fas fa-check-circle text-purple-600 text-2xl"></i>
1433
+ </div>
1434
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Setup Complete!</h3>
1435
+ <p class="text-gray-600 mb-4">Everything is ready to use. You can now start managing calls intelligently!</p>
1436
+
1437
+ <div class="bg-gray-50 p-4 rounded-lg text-left">
1438
+ <p class="text-sm font-medium text-gray-700 mb-2">Your setup details:</p>
1439
+ <ul class="text-xs space-y-1 text-gray-600">
1440
+ <li>Trillion API Key: <span id="showTrillionKey" class="font-mono">tril_live_87f2k39d8b20jf7</span></li>
1441
+ <li>Pusher App ID: <span id="showPusherId" class="font-mono">1529367</span></li>
1442
+ <li>HuggingFace Key: <span id="showHFKey" class="font-mono">hf_K92jf72hf82jf92hf9</span></li>
1443
+ <li>Twilio Number: <span id="showTwilioNum" class="font-mono">+18582634276</span></li>
1444
+ </ul>
1445
+ </div>
1446
+ </div>
1447
+
1448
+ <div class="flex justify-center mt-6">
1449
+ <button id="finalCloseBtn" class="py-2 px-6 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Start Using AI Call Manager</button>
1450
+ </div>
1451
+ </div>
1452
+ </div>
1453
+ </div>
1454
+ </div>
1455
+
1456
+ <!-- System Status Check -->
1457
+ <script>
1458
+ document.getElementById('checkSystemBtn').addEventListener('click', async function() {
1459
+ try {
1460
+ this.classList.add('bg-yellow-100');
1461
+ this.querySelector('i').className = 'fas fa-spinner fa-spin text-yellow-600';
1462
+
1463
+ // Simulate checking services
1464
+ await new Promise(resolve => setTimeout(resolve, 1500));
1465
+
1466
+ const isSetupComplete = localStorage.getItem('setupComplete') === 'true';
1467
+ const services = {
1468
+ jitsi: true,
1469
+ pusher: true,
1470
+ twilio: true,
1471
+ hf: true
1472
+ };
1473
+
1474
+ const missingServices = Object.entries(services).filter(([_, available]) => !available).map(([name]) => name);
1475
+
1476
+ if (missingServices.length > 0) {
1477
+ alert(`System check failed. Missing services: ${missingServices.join(', ')}`);
1478
+ this.classList.remove('bg-yellow-100', 'bg-green-100');
1479
+ this.classList.add('bg-red-100');
1480
+ this.querySelector('i').className = 'fas fa-exclamation-circle text-red-600';
1481
+ } else {
1482
+ alert('All systems operational!');
1483
+ this.classList.remove('bg-yellow-100');
1484
+ this.classList.add('bg-green-100');
1485
+ this.querySelector('i').className = 'fas fa-check-circle text-green-600';
1486
+ }
1487
+
1488
+ // Grey out setup wizard if already completed
1489
+ if (isSetupComplete) {
1490
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
1491
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
1492
+ }
1493
+
1494
+ } catch (error) {
1495
+ console.error('System check failed:', error);
1496
+ this.classList.remove('bg-yellow-100');
1497
+ this.classList.add('bg-red-100');
1498
+ this.querySelector('i').className = 'fas fa-times-circle text-red-600';
1499
+ alert('System check failed');
1500
+ } finally {
1501
+ setTimeout(() => {
1502
+ this.classList.remove('bg-yellow-100', 'bg-red-100');
1503
+ this.classList.add('bg-green-100');
1504
+ this.querySelector('i').className = 'fas fa-check-circle text-green-600';
1505
+ }, 3000);
1506
+ }
1507
+ });
1508
+ </script>
1509
+
1510
+ <!-- Setup Wizard Functionality -->
1511
+ <script>
1512
+ let currentStep = 1;
1513
+ const totalSteps = 4;
1514
+
1515
+ const setupHelpModal = document.getElementById('setupHelpModal');
1516
+ const setupHelpBtn = document.getElementById('setupHelpBtn');
1517
+ const closeSetupHelp = document.getElementById('closeSetupHelp');
1518
+ const wizardProgressBar = document.getElementById('wizardProgressBar');
1519
+
1520
+ function updateProgress() {
1521
+ const progress = (currentStep / totalSteps) * 100;
1522
+ wizardProgressBar.style.width = `${progress}%`;
1523
+ }
1524
+
1525
+ function showStep(stepNumber) {
1526
+ document.querySelectorAll('.wizard-step').forEach(step => {
1527
+ step.classList.remove('active');
1528
+ });
1529
+ document.getElementById(`step${stepNumber}`).classList.add('active');
1530
+ updateProgress();
1531
+ }
1532
+
1533
+ document.querySelectorAll('.wizard-next-btn').forEach(btn => {
1534
+ btn.addEventListener('click', () => {
1535
+ if(currentStep === 3) {
1536
+ startAutomaticSetup();
1537
+ } else {
1538
+ currentStep++;
1539
+ showStep(currentStep);
1540
+ }
1541
+ });
1542
+ });
1543
+
1544
+ document.querySelectorAll('.wizard-prev-btn').forEach(btn => {
1545
+ btn.addEventListener('click', () => {
1546
+ if(currentStep > 1) {
1547
+ currentStep--;
1548
+ showStep(currentStep);
1549
+ }
1550
+ });
1551
+ });
1552
+
1553
+ function startAutomaticSetup() {
1554
+ const setupElements = {
1555
+ trillion: document.getElementById('setupTrillion'),
1556
+ pusher: document.getElementById('setupPusher'),
1557
+ huggingFace: document.getElementById('setupHuggingFace'),
1558
+ twilio: document.getElementById('setupTwilio'),
1559
+ env: document.getElementById('setupEnv')
1560
+ };
1561
+
1562
+ const startBtn = document.getElementById('startSetupBtn');
1563
+ const finishBtn = document.getElementById('finishBtn');
1564
+
1565
+ startBtn.classList.add('hidden');
1566
+ finishBtn.classList.remove('hidden');
1567
+
1568
+ // Simulate setup process with real configuration
1569
+ setTimeout(() => {
1570
+ setupElements.trillion.classList.remove('border-gray-300');
1571
+ setupElements.trillion.classList.add('bg-green-500', 'border-green-500');
1572
+ setupElements.trillion.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1573
+ }, 1000);
1574
+
1575
+ setTimeout(() => {
1576
+ setupElements.pusher.classList.remove('border-gray-300');
1577
+ setupElements.pusher.classList.add('bg-green-500', 'border-green-500');
1578
+ setupElements.pusher.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1579
+ }, 2000);
1580
+
1581
+ setTimeout(() => {
1582
+ setupElements.huggingFace.classList.remove('border-gray-300');
1583
+ setupElements.huggingFace.classList.add('bg-green-500', 'border-green-500');
1584
+ setupElements.huggingFace.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1585
+ }, 3000);
1586
+
1587
+ setTimeout(() => {
1588
+ setupElements.twilio.classList.remove('border-gray-300');
1589
+ setupElements.twilio.classList.add('bg-green-500', 'border-green-500');
1590
+ setupElements.twilio.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1591
+ }, 4000);
1592
+
1593
+ setTimeout(() => {
1594
+ setupElements.env.classList.remove('border-gray-300');
1595
+ setupElements.env.classList.add('bg-green-500', 'border-green-500');
1596
+ setupElements.env.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1597
+ document.getElementById('setupComplete').classList.remove('hidden');
1598
+ finishBtn.disabled = false;
1599
+ }, 5000);
1600
+
1601
+ finishBtn.addEventListener('click', () => {
1602
+ currentStep++;
1603
+ showStep(currentStep);
1604
+ });
1605
+ }
1606
+
1607
+ setupHelpBtn.addEventListener('click', () => {
1608
+ setupHelpModal.classList.remove('hidden');
1609
+ currentStep = 1;
1610
+ showStep(currentStep);
1611
+ });
1612
+
1613
+ closeSetupHelp.addEventListener('click', () => {
1614
+ setupHelpModal.classList.add('hidden');
1615
+ });
1616
+
1617
+ document.getElementById('finalCloseBtn').addEventListener('click', () => {
1618
+ localStorage.setItem('setupComplete', 'true');
1619
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
1620
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
1621
+ document.getElementById('setupHelpBtn').title = 'Setup already completed';
1622
+ setupHelpModal.classList.add('hidden');
1623
+ });
1624
+
1625
+ window.addEventListener('click', (event) => {
1626
+ if (event.target === setupHelpModal) {
1627
+ setupHelpModal.classList.add('hidden');
1628
+ }
1629
+ });
1630
+ </script>
1631
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jjmandog/newspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1632
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ When I try to call it gives this error. Call failed: Can't find variable: trillionClient
2
+ I can’t
3
+ I can’t make outgoing calls please fix this and test. Also the orange icon next to settings doesn’t work . Fix that as well. Improve the coding if you need to. Before finishing please test to make sure it all works