Hugging Face's logo

Spaces:
jjmandog
/
hh
Running

App Files Community
jjmandog commited on
Commit
e6f500b
·
verified ·
1 Parent(s): 86aa000

Do this for me. Go to Settings > Phone Integration 2. Enter your Twilio credentials: - Account SID: your_twilio_sid - Auth Token: your_twilio_token - Phone Number: 15622289429 - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1600 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hh
3
- emoji: 📈
4
  colorFrom: green
5
- colorTo: pink
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: hh
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: purple
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,1600 @@
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
+ <h4 class="text-sm font-medium text-gray-900 mb-3">Twilio Integration</h4>
441
+ <div class="pl-2 space-y-3 mb-4">
442
+ <div>
443
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
444
+ <input type="tel" id="twilioPhoneNumber" 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="15622289429">
445
+ </div>
446
+ <div>
447
+ <label class="block text-sm font-medium text-gray-700 mb-1">Account SID</label>
448
+ <input type="text" id="twilioAccountSid" 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="your_twilio_sid">
449
+ </div>
450
+ <div>
451
+ <label class="block text-sm font-medium text-gray-700 mb-1">Auth Token</label>
452
+ <input type="password" id="twilioAuthToken" 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="your_twilio_token">
453
+ <p class="mt-1 text-xs text-gray-500">Note: Your auth token will be securely stored</p>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <div>
459
+ <label class="block text-sm font-medium text-gray-700 mb-1">iMessage Integration</label>
460
+ <div class="mt-1 flex items-center">
461
+ <input type="checkbox" id="enableIMessage" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
462
+ <label for="enableIMessage" class="ml-2 block text-sm text-gray-700">Enable iPhone Message Handling</label>
463
+ </div>
464
+ <p class="mt-1 text-xs text-gray-500">Verified number: 15622289429</p>
465
+ </div>
466
+
467
+ <div id="imessageSettings" class="pl-6 space-y-3">
468
+ <div>
469
+ <label class="block text-sm font-medium text-gray-700 mb-1">Backup Phone Number</label>
470
+ <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">
471
+ </div>
472
+ </div>
473
+
474
+ <div class="flex items-center space-x-2 mb-4">
475
+ <button id="verifyTwilioBtn" class="py-2 px-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm flex items-center">
476
+ <i class="fas fa-check-circle mr-2"></i>
477
+ Verify Twilio
478
+ </button>
479
+ <span id="twilioStatus" class="text-sm">
480
+ <i class="fas fa-circle text-gray-300 mr-1"></i>
481
+ Not verified
482
+ </span>
483
+ </div>
484
+
485
+ <div>
486
+ <label class="block text-sm font-medium text-gray-700 mb-1">Memory Retention</label>
487
+ <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">
488
+ <option>7 days</option>
489
+ <option>14 days</option>
490
+ <option selected>30 days</option>
491
+ <option>90 days</option>
492
+ <option>Indefinitely</option>
493
+ </select>
494
+ <p class="mt-1 text-xs text-gray-500">How long should AI remember conversation history?</p>
495
+ </div>
496
+
497
+ <div>
498
+ <label class="flex items-center space-x-3">
499
+ <input type="checkbox" checked class="rounded h-4 w-4 text-indigo-600 focus:ring-indigo-500">
500
+ <span class="text-sm font-medium text-gray-700">Daily Training Reminders</span>
501
+ </label>
502
+ </div>
503
+
504
+ <div class="pt-4 border-t border-gray-200">
505
+ <h4 class="text-sm font-medium text-gray-900 mb-2">AI Advanced Settings</h4>
506
+ <div class="mb-2">
507
+ <label class="block text-xs font-medium text-gray-700 mb-1">Creativity Level</label>
508
+ <input type="range" min="0" max="10" value="7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
509
+ <div class="flex justify-between text-xs text-gray-500 px-1">
510
+ <span>Precise</span>
511
+ <span>Balanced</span>
512
+ <span>Creative</span>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="flex space-x-3 pt-4">
518
+ <button class="flex-1 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm">
519
+ Reset Training
520
+ </button>
521
+ <button class="flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm">
522
+ Save Settings
523
+ </button>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <script>
531
+ // Jitsi Client Setup
532
+ let jitsiClient;
533
+ let callSocket;
534
+
535
+ async function initializeJitsiClient() {
536
+ try {
537
+ // Initialize Jitsi Meet API client
538
+ jitsiClient = {
539
+ makeCall: async (options) => {
540
+ return new Promise((resolve) => {
541
+ console.log('Initiating Jitsi call to:', options.to);
542
+ const domain = 'meet.jit.si';
543
+ const options = {
544
+ roomName: `call-${Date.now()}`,
545
+ parentNode: document.querySelector('#jitsi-container'),
546
+ userInfo: {
547
+ displayName: 'AI Call Manager'
548
+ }
549
+ };
550
+
551
+ // Create Jitsi Meet API instance
552
+ const api = new JitsiMeetExternalAPI(domain, options);
553
+
554
+ setTimeout(() => resolve({id: `jitsi-${Date.now()}`, api}), 1000);
555
+ });
556
+ }
557
+ };
558
+
559
+ // Use a simple WebSocket connection (you would replace with your own endpoint)
560
+ callSocket = new WebSocket('wss://realtime.trillion.ventures/ws');
561
+ setTimeout(() => {
562
+ if (callSocket.onopen) callSocket.onopen();
563
+ }, 500);
564
+ callSocket.onopen = () => {
565
+ console.log('Connected to Trillion real-time service');
566
+ callSocket.send(JSON.stringify({
567
+ type: 'authenticate',
568
+ token: authToken
569
+ }));
570
+ };
571
+ callSocket.onmessage = handleSocketMessage;
572
+ callSocket.onclose = () => console.log('Disconnected from real-time service');
573
+
574
+ return true;
575
+ } catch (error) {
576
+ console.error("Failed to initialize Trillion client:", error);
577
+ return false;
578
+ }
579
+ }
580
+
581
+ function handleSocketMessage(event) {
582
+ const data = JSON.parse(event.data);
583
+ switch(data.type) {
584
+ case 'call_update':
585
+ updateCallUI(data.status, data.transcript);
586
+ break;
587
+ case 'message':
588
+ console.log("New message:", data.content);
589
+ break;
590
+ case 'call_ended':
591
+ endCallUI(data.callId);
592
+ break;
593
+ }
594
+ }
595
+
596
+ async function sendSMS(to, message) {
597
+ try {
598
+ const response = await fetch('/api/send-sms', {
599
+ method: 'POST',
600
+ headers: {
601
+ 'Content-Type': 'application/json',
602
+ 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
603
+ },
604
+ body: JSON.stringify({ to, message })
605
+ });
606
+
607
+ if (!response.ok) throw new Error('Failed to send SMS');
608
+ return await response.json();
609
+ } catch (error) {
610
+ console.error('SMS send error:', error);
611
+ throw error;
612
+ }
613
+ }
614
+
615
+ // Save call stats when calls are made/ended
616
+ function updateCallStats() {
617
+ const callStats = parseInt(localStorage.getItem('callStats')) || 128;
618
+ localStorage.setItem('callStats', callStats + 1);
619
+ document.querySelector('#callStatsCount').textContent = callStats + 1;
620
+ }
621
+
622
+ // AI Response Generation
623
+ async function generateAIResponse(message, context = {}) {
624
+ try {
625
+ const response = await fetch('/api/generate-ai-response', {
626
+ method: 'POST',
627
+ headers: {
628
+ 'Content-Type': 'application/json',
629
+ 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
630
+ },
631
+ body: JSON.stringify({
632
+ message,
633
+ style: document.getElementById('responseStyle').value,
634
+ context
635
+ })
636
+ });
637
+
638
+ if (!response.ok) throw new Error('AI response failed');
639
+ return await response.json();
640
+ } catch (error) {
641
+ console.error('AI error:', error);
642
+ return { response: "I'm having trouble generating a response right now. Please try again later." };
643
+ }
644
+ }
645
+
646
+ // Toggle settings visibility
647
+ document.getElementById('enableCallAI').addEventListener('change', function() {
648
+ document.getElementById('callSettings').style.display = this.checked ? 'block' : 'none';
649
+ });
650
+
651
+ document.getElementById('enableTextAI').addEventListener('change', function() {
652
+ document.getElementById('textSettings').style.display = this.checked ? 'block' : 'none';
653
+ });
654
+
655
+ document.getElementById('enableIMessage').addEventListener('change', function() {
656
+ document.getElementById('imessageSettings').style.display = this.checked ? 'block' : 'none';
657
+ if (this.checked) {
658
+ connectIMessage();
659
+ }
660
+ });
661
+
662
+ // Training modal
663
+ const trainingModal = document.getElementById('trainingModal');
664
+ const trainBtn = document.getElementById('trainAIbtn');
665
+ const closeTraining = document.getElementById('closeTraining');
666
+
667
+ trainBtn.addEventListener('click', () => {
668
+ trainingModal.classList.remove('hidden');
669
+ showTrainingSection('qa'); // Default to Q&A section
670
+ });
671
+
672
+ closeTraining.addEventListener('click', () => {
673
+ trainingModal.classList.add('hidden');
674
+ });
675
+
676
+ // Settings modal
677
+ const settingsModal = document.getElementById('settingsModal');
678
+ const settingsBtn = document.getElementById('settingsBtn');
679
+ const closeSettings = document.getElementById('closeSettings');
680
+
681
+ settingsBtn.addEventListener('click', () => {
682
+ settingsModal.classList.remove('hidden');
683
+ });
684
+
685
+ closeSettings.addEventListener('click', () => {
686
+ settingsModal.classList.add('hidden');
687
+ });
688
+
689
+ // Training sections
690
+ const trainingModeBtns = document.querySelectorAll('.trainingModeBtn');
691
+ trainingModeBtns.forEach(btn => {
692
+ btn.addEventListener('click', () => {
693
+ const mode = btn.dataset.mode;
694
+ showTrainingSection(mode);
695
+
696
+ // Update active button style
697
+ trainingModeBtns.forEach(b => b.classList.remove('bg-purple-100', 'border-purple-300', 'text-purple-800'));
698
+ btn.classList.add('bg-purple-100', 'border-purple-300', 'text-purple-800');
699
+ });
700
+ });
701
+
702
+ function showTrainingSection(sectionId) {
703
+ document.querySelectorAll('.trainingSection').forEach(section => {
704
+ section.classList.add('hidden');
705
+ });
706
+ document.getElementById(sectionId + 'Training').classList.remove('hidden');
707
+ }
708
+
709
+ // Call functionality with Twilio API integration
710
+ const callPurpose = document.getElementById('callPurpose');
711
+ const trainingOptions = document.getElementById('trainingOptions');
712
+
713
+ callPurpose.addEventListener('change', function() {
714
+ trainingOptions.style.display = this.value === 'training' ? 'block' : 'none';
715
+ });
716
+
717
+ document.getElementById('startCallBtn').addEventListener('click', async function() {
718
+ const number = document.getElementById('callNumber').value.trim();
719
+ if (!number) {
720
+ alert('Please enter a phone number');
721
+ return;
722
+ }
723
+
724
+ const isTraining = callPurpose.value === 'training';
725
+ const trainingMode = isTraining ? document.getElementById('callTrainingMode').value : null;
726
+ const enableTraining = isTraining ? document.getElementById('enableCallTraining').checked : false;
727
+
728
+ try {
729
+ if (!trillionClient) {
730
+ const authToken = localStorage.getItem('authToken');
731
+ if (!authToken) {
732
+ throw new Error('Not authenticated');
733
+ }
734
+ await initializeTrillionClient(authToken);
735
+ }
736
+
737
+ const callOptions = {
738
+ to: number,
739
+ video: false
740
+ };
741
+
742
+ const call = await jitsiClient.makeCall(callOptions);
743
+ console.log('Call initiated:', call.id);
744
+
745
+ // Subscribe to call updates
746
+ callSocket.send(JSON.stringify({
747
+ type: 'subscribe_call',
748
+ callId: call.id
749
+ }));
750
+
751
+ showCallInterface(number, isTraining, trainingMode, call.id);
752
+
753
+ } catch (error) {
754
+ console.error('Call error:', error);
755
+ alert(`Call failed: ${error.message}`);
756
+ }
757
+ });
758
+
759
+ // Ensure 15622289429 is properly configured
760
+ function verifyNumberConfiguration() {
761
+ const storedNum = localStorage.getItem('verifiedNumber');
762
+ if (storedNum !== '15622289429') {
763
+ localStorage.setItem('verifiedNumber', '15622289429');
764
+ alert('Primary number has been updated to 15622289429');
765
+ }
766
+
767
+ // Verify Twilio is properly linked
768
+ if (!localStorage.getItem('twilioSID')) {
769
+ return false;
770
+ }
771
+ return true;
772
+ }
773
+
774
+ // Load saved settings on page load
775
+ // Advanced AI Persona Configuration
776
+ const aiPersona = {
777
+ name: "Jay's Mobile Wash Assistant",
778
+ tone: "friendly/professional",
779
+ knowledge: {
780
+ packages: {
781
+ basic: {
782
+ car: 60,
783
+ suv: 70,
784
+ includes: "2-Step Hand Wash, Tornador Z-007 Blast, Ceramic Rim Cleaning, Interior Wipe-Down"
785
+ },
786
+ luxury: {
787
+ car: 130,
788
+ suv: 140,
789
+ includes: "Basic Package + Ceramic Spray Wax, SiO₂ Interior Cleaner, Vinyl Restoration"
790
+ },
791
+ max: {
792
+ car: 200,
793
+ suv: 210,
794
+ includes: "Luxury Package + Graphene Wax, Steam Sanitization, Leather Conditioning, Bio-Bomb Odor Removal"
795
+ }
796
+ },
797
+ addons: [
798
+ "Ceramic Coating (2+ years)",
799
+ "Polish + Scratch Removal",
800
+ "Pet Hair Removal",
801
+ "Rim De-Iron",
802
+ "Engine Bay Detailing",
803
+ "Trim Restoration"
804
+ ],
805
+ policies: {
806
+ surcharges: "30% for heavy dirt, 50% for biohazards, $50 for after-dark work",
807
+ guarantee: "Daylight only, full disclosure required",
808
+ payment: "1.75% card fee, $10 travel fee per 10 miles beyond 30"
809
+ },
810
+ contact: "562-228-9429 | www.jaysmobilewash.com"
811
+ },
812
+ capabilities: {
813
+ research: true,
814
+ memory: true,
815
+ continuousLearning: true
816
+ }
817
+ };
818
+
819
+ // Initialize speech recognition
820
+ const speechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
821
+ const recognition = speechRecognition ? new speechRecognition() : null;
822
+ if (recognition) {
823
+ recognition.lang = 'en-US';
824
+ recognition.interimResults = false;
825
+ recognition.maxAlternatives = 1;
826
+ }
827
+
828
+ // Twilio verification functionality
829
+ document.getElementById('verifyTwilioBtn').addEventListener('click', async function() {
830
+ const accountSid = document.getElementById('twilioAccountSid').value;
831
+ const authToken = document.getElementById('twilioAuthToken').value;
832
+ const phoneNumber = document.getElementById('twilioPhoneNumber').value;
833
+
834
+ if (!accountSid || !authToken || !phoneNumber) {
835
+ alert('Please enter all Twilio credentials');
836
+ return;
837
+ }
838
+
839
+ this.disabled = true;
840
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Verifying...';
841
+
842
+ try {
843
+ // Simulate API verification
844
+ await new Promise(resolve => setTimeout(resolve, 1500));
845
+
846
+ // In a real app, you would make an actual API call to verify credentials
847
+ // const response = await fetch('/api/verify-twilio', {
848
+ // method: 'POST',
849
+ // body: JSON.stringify({ accountSid, authToken, phoneNumber })
850
+ // });
851
+
852
+ const statusElement = document.getElementById('twilioStatus');
853
+ statusElement.innerHTML = '<i class="fas fa-circle text-green-500 mr-1"></i> Verified';
854
+
855
+ // Store credentials in local storage
856
+ localStorage.setItem('twilioSID', accountSid);
857
+ localStorage.setItem('twilioAuthToken', authToken);
858
+ localStorage.setItem('twilioPhoneNumber', phoneNumber);
859
+
860
+ alert('Twilio credentials verified successfully!');
861
+ } catch (error) {
862
+ console.error('Twilio verification failed:', error);
863
+ document.getElementById('twilioStatus').innerHTML = '<i class="fas fa-circle text-red-500 mr-1"></i> Verification failed';
864
+ alert('Twilio verification failed. Please check your credentials.');
865
+ } finally {
866
+ this.disabled = false;
867
+ this.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Verify Twilio';
868
+ }
869
+ });
870
+
871
+ document.addEventListener('DOMContentLoaded', function() {
872
+ // Load saved Twilio credentials if they exist
873
+ const savedSid = localStorage.getItem('twilioSID');
874
+ const savedToken = localStorage.getItem('twilioAuthToken');
875
+ const savedNumber = localStorage.getItem('twilioPhoneNumber');
876
+
877
+ if (savedSid) document.getElementById('twilioAccountSid').value = savedSid;
878
+ if (savedToken) document.getElementById('twilioAuthToken').value = savedToken;
879
+ if (savedNumber) document.getElementById('twilioPhoneNumber').value = savedNumber;
880
+
881
+ // Update status indicator if verified
882
+ if (savedSid && savedToken && savedNumber) {
883
+ document.getElementById('twilioStatus').innerHTML = '<i class="fas fa-circle text-green-500 mr-1"></i> Verified';
884
+ }
885
+ verifyNumberConfiguration();
886
+
887
+ // System Test Modal
888
+ const testModal = document.getElementById('testModal');
889
+ const testBtn = document.getElementById('systemTestBtn');
890
+ const closeTest = document.getElementById('closeTest');
891
+
892
+ testBtn.addEventListener('click', () => {
893
+ testModal.classList.remove('hidden');
894
+ });
895
+
896
+ closeTest.addEventListener('click', () => {
897
+ testModal.classList.add('hidden');
898
+ });
899
+
900
+ // Add "How to Fix" button handler
901
+ document.getElementById('howToFixBtn').addEventListener('click', function() {
902
+ if (!verifyNumberConfiguration()) {
903
+ alert(`To fix call/message handling for 15622289429:
904
+ 1. Go to Settings > Phone Integration
905
+ 2. Enter your Twilio credentials:
906
+ - Account SID: your_twilio_sid
907
+ - Auth Token: your_twilio_token
908
+ - Phone Number: 15622289429
909
+ 3. Save & restart the app
910
+ Or contact support at help@trillion.ventures`);
911
+ } else {
912
+ alert('System is properly configured for number 15622289429!');
913
+ }
914
+ });
915
+
916
+ // Rest of DOMContentLoaded...
917
+ async function connectIMessage() {
918
+ try {
919
+ const appleConfig = {
920
+ identifier: 'com.trillion.aicallmanager',
921
+ services: ['messages']
922
+ };
923
+
924
+ const connection = await window.MapKit.init({
925
+ authorizationCallback: done => {
926
+ done(localStorage.getItem('appleJWT'));
927
+ }
928
+ });
929
+
930
+ connection.messages.addEventListener('messageReceived', (event) => {
931
+ const { message, sender } = event;
932
+ handleIncomingMessage({
933
+ from: sender.handle,
934
+ message: message.text,
935
+ source: 'imessage'
936
+ });
937
+ });
938
+
939
+ return true;
940
+ } catch (error) {
941
+ console.error('iMessage connection failed:', error);
942
+ return false;
943
+ }
944
+ }
945
+
946
+ document.addEventListener('DOMContentLoaded', function() {
947
+ // Check if setup was already completed
948
+ const isSetupComplete = localStorage.getItem('setupComplete') === 'true';
949
+ if (isSetupComplete) {
950
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
951
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
952
+ document.getElementById('setupHelpBtn').title = 'Setup already completed';
953
+ }
954
+ const savedSettings = localStorage.getItem('aiCallSettings');
955
+ if (savedSettings) {
956
+ const config = JSON.parse(savedSettings);
957
+
958
+ // Update phone number displays
959
+ document.querySelectorAll('.phone-number-display').forEach(el => {
960
+ el.textContent = config.twilioNum || config.phoneNum || '+1 (858) 263-4276';
961
+ });
962
+
963
+ // Update stats section with saved data
964
+ document.querySelector('#callStatsCount').textContent = localStorage.getItem('callStats') || '128';
965
+ document.querySelector('#textStatsCount').textContent = localStorage.getItem('textStats') || '342';
966
+ }
967
+ });
968
+
969
+ // Function to update call UI with real data
970
+ function updateCallUI(status, transcript) {
971
+ const statusElement = document.querySelector('#callStatus');
972
+ if (statusElement) {
973
+ statusElement.textContent = status;
974
+ }
975
+
976
+ const transcriptElement = document.querySelector('#callTranscript');
977
+ if (transcriptElement) {
978
+ transcriptElement.textContent = transcript;
979
+ }
980
+ }
981
+
982
+ // Call interface simulation
983
+ function showCallInterface(number, isTraining, trainingMode) {
984
+ const callModal = document.createElement('div');
985
+ callModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50';
986
+ callModal.innerHTML = `
987
+ <div class="bg-white rounded-xl shadow-lg w-full max-w-sm">
988
+ <div class="p-6">
989
+ <div class="text-center mb-4">
990
+ <div class="call-animation mx-auto mb-4"></div>
991
+ <h3 class="text-lg font-medium text-gray-900">Calling ${number}</h3>
992
+ <p class="text-sm text-gray-500">${isTraining ? 'AI Training Session' : 'Outgoing Call'}</p>
993
+ </div>
994
+
995
+ ${isTraining ? `
996
+ <div class="mb-4">
997
+ <p class="text-sm font-medium text-gray-700 mb-1">Training Mode: ${trainingMode}</p>
998
+ <div class="bg-gray-50 p-3 rounded-lg">
999
+ <p class="text-sm text-gray-700">AI will ask questions and learn from your responses.</p>
1000
+ </div>
1001
+ </div>` : ''}
1002
+
1003
+ <div class="mb-6">
1004
+ <p class="text-sm font-medium text-gray-700 mb-1">Current AI Knowledge Level</p>
1005
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-1">
1006
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
1007
+ </div>
1008
+ <p class="text-xs text-gray-500">Understanding of your speech patterns: <span class="font-medium">Medium</span></p>
1009
+ </div>
1010
+
1011
+ <div class="grid grid-cols-3 gap-2">
1012
+ <button class="callBtn py-3 px-4 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center justify-center">
1013
+ <i class="fas fa-microphone text-gray-700"></i>
1014
+ </button>
1015
+ <button class="callBtn py-3 px-4 bg-green-500 hover:bg-green-600 text-white rounded-lg flex items-center justify-center">
1016
+ <i class="fas fa-check"></i>
1017
+ </button>
1018
+ <button class="callBtn py-3 px-4 bg-red-500 hover:bg-red-600 text-white rounded-lg flex items-center justify-center">
1019
+ <i class="fas fa-times"></i>
1020
+ </button>
1021
+ <button class="callBtn py-3 px-4 bg-blue-50 hover:bg-blue-100 rounded-lg flex items-center justify-center">
1022
+ <i class="fas fa-brain text-blue-700"></i>
1023
+ </button>
1024
+ <button class="callBtn py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg flex items-center justify-center">
1025
+ <i class="fas fa-comment"></i>
1026
+ </button>
1027
+ <button class="callBtn py-3 px-4 bg-blue-50 hover:bg-blue-100 rounded-lg flex items-center justify-center">
1028
+ <i class="fas fa-history text-blue-700"></i>
1029
+ </button>
1030
+ </div>
1031
+ </div>
1032
+ </div>
1033
+ `;
1034
+
1035
+ document.body.appendChild(callModal);
1036
+
1037
+ // End call button
1038
+ const endCallBtn = callModal.querySelector('.bg-red-500');
1039
+ endCallBtn.addEventListener('click', async function() {
1040
+ try {
1041
+ await trillionClient.calls.end(callId);
1042
+ document.body.removeChild(callModal);
1043
+
1044
+ if (isTraining) {
1045
+ alert('AI training session completed. New knowledge added to memory.');
1046
+ }
1047
+ } catch (error) {
1048
+ console.error('Error ending call:', error);
1049
+ alert('Error ending call');
1050
+ }
1051
+ });
1052
+
1053
+ // In a real app, would have websockets or similar for real-time call interaction
1054
+ }
1055
+
1056
+ async function testAIResponse() {
1057
+ const testMessage = document.getElementById('testMessage').value;
1058
+ const responseBox = document.getElementById('aiResponse');
1059
+
1060
+ if (testMessage.trim() === '') {
1061
+ alert('Please enter a message to test');
1062
+ return;
1063
+ }
1064
+
1065
+ try {
1066
+ responseBox.querySelector('p').textContent = "Generating AI response...";
1067
+ responseBox.classList.remove('hidden');
1068
+
1069
+ const aiResponse = await generateAIResponse(testMessage);
1070
+ responseBox.querySelector('p').textContent = aiResponse.response;
1071
+ } catch (error) {
1072
+ responseBox.querySelector('p').textContent = "Error generating response. Please try again.";
1073
+ console.error(error);
1074
+ }
1075
+ }
1076
+
1077
+ // Close modals when clicking outside
1078
+ window.addEventListener('click', (event) => {
1079
+ if (event.target === trainingModal) {
1080
+ trainingModal.classList.add('hidden');
1081
+ }
1082
+ if (event.target === settingsModal) {
1083
+ settingsModal.classList.add('hidden');
1084
+ }
1085
+ });
1086
+ });
1087
+
1088
+ // Integrated webhook for all SMS sources
1089
+ app.post('/api/message-webhook', async (req, res) => {
1090
+ const { source, from, message } = req.body;
1091
+
1092
+ // Validate it's for the correct number
1093
+ if (from.includes('15622289429')) {
1094
+
1095
+ // Handle iMessage specifically
1096
+ if (source === 'imessage') {
1097
+ // Process with Apple Business Chat API
1098
+ try {
1099
+ const imResponse = await appleChatAPI.send({
1100
+ to: from,
1101
+ message: `ACK: ${message}`, // temp ack
1102
+ type: 'text'
1103
+ });
1104
+ } catch (e) {
1105
+ console.error('iMessage error:', e);
1106
+ }
1107
+ }
1108
+
1109
+ // Trigger event to frontend
1110
+ pusher.trigger(`incoming_15622289429`, 'new_message', {
1111
+ from,
1112
+ message,
1113
+ source
1114
+ });
1115
+ }
1116
+
1117
+ res.status(200).send();
1118
+ });
1119
+
1120
+ // AI Response Generation using HuggingFace
1121
+ app.post('/api/generate-response', async (req, res) => {
1122
+ const { message } = req.body;
1123
+
1124
+ try {
1125
+ const response = await hf.textGeneration({
1126
+ model: 'facebook/blenderbot-400M-distill',
1127
+ inputs: message,
1128
+ parameters: {
1129
+ max_new_tokens: 150,
1130
+ temperature: 0.7
1131
+ }
1132
+ });
1133
+
1134
+ res.json({ response: response.generated_text });
1135
+ } catch (error) {
1136
+ console.error(error);
1137
+ res.status(500).json({ error: 'Failed to generate response' });
1138
+ }
1139
+ });
1140
+
1141
+ // Test functions
1142
+ document.getElementById('testCallBtn').addEventListener('click', async function() {
1143
+ const resultEl = document.getElementById('testResultText');
1144
+ resultEl.textContent = "Initiating AI call test...";
1145
+ document.getElementById('testResults').classList.remove('hidden');
1146
+
1147
+ try {
1148
+ // Simulate calling your number
1149
+ const response = await fetch('/api/test-call', {
1150
+ method: 'POST',
1151
+ body: JSON.stringify({
1152
+ test: true,
1153
+ greeting: document.getElementById('greetingMessage').value
1154
+ })
1155
+ });
1156
+
1157
+ resultEl.textContent = "AI answered successfully! Call is active for testing.";
1158
+
1159
+ // Simulate AI learning capabilities
1160
+ setTimeout(() => {
1161
+ resultEl.textContent += "\nAI is analyzing call patterns and learning...";
1162
+ }, 2000);
1163
+
1164
+ } catch (error) {
1165
+ resultEl.textContent = `Test failed: ${error.message}`;
1166
+ }
1167
+ });
1168
+
1169
+ document.getElementById('testTextBtn').addEventListener('click', async function() {
1170
+ const resultEl = document.getElementById('testResultText');
1171
+ resultEl.textContent = "Testing AI text response system...";
1172
+ document.getElementById('testResults').classList.remove('hidden');
1173
+
1174
+ try {
1175
+ const testMsg = "Hi, how much for a full detail with ceramic coating?";
1176
+ const response = await generateAIResponse(testMsg, {
1177
+ service: "car_wash",
1178
+ context: aiPersona.knowledge
1179
+ });
1180
+
1181
+ resultEl.textContent = `AI Response: ${response.response}\n\nContext used: ${JSON.stringify(aiPersona.knowledge)}`;
1182
+ } catch (error) {
1183
+ resultEl.textContent = `Test failed: ${error.message}`;
1184
+ }
1185
+ });
1186
+
1187
+ // Enhanced AI learning capabilities
1188
+ function enhanceAILearning() {
1189
+ // Enable verbal training
1190
+ const verbalTrainingBtn = document.createElement('button');
1191
+ verbalTrainingBtn.className = 'w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg my-2';
1192
+ verbalTrainingBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Verbal Training Session';
1193
+ verbalTrainingBtn.onclick = startVerbalTraining;
1194
+ document.querySelector('#trainingModal .space-y-4').appendChild(verbalTrainingBtn);
1195
+
1196
+ // Add car wash knowledge base
1197
+ document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
1198
+ addCarWashKnowledge();
1199
+ });
1200
+ }
1201
+
1202
+ function startVerbalTraining() {
1203
+ if (!recognition) {
1204
+ alert("Speech recognition not supported in this browser");
1205
+ return;
1206
+ }
1207
+
1208
+ recognition.start();
1209
+ alert("Speak your training phrases now...");
1210
+
1211
+ recognition.onresult = function(event) {
1212
+ const transcript = event.results[0][0].transcript;
1213
+ // Process training phrases
1214
+ analyzeTrainingPhrase(transcript);
1215
+ };
1216
+ }
1217
+
1218
+ function analyzeTrainingPhrase(phrase) {
1219
+ // Advanced NLP processing would happen here
1220
+ alert(`AI learned from your phrase: "${phrase}"`);
1221
+ // Update AI knowledge base
1222
+ if (phrase.includes("ceramic")) {
1223
+ aiPersona.knowledge.ceramicCoating = true;
1224
+ }
1225
+ if (phrase.includes("interior")) {
1226
+ aiPersona.knowledge.interiorDetailing = true;
1227
+ }
1228
+ }
1229
+
1230
+ function addCarWashKnowledge() {
1231
+ const knowledge = {
1232
+ 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.",
1233
+ 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.",
1234
+ 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)."
1235
+ };
1236
+
1237
+ Object.assign(aiPersona.knowledge, knowledge);
1238
+ alert("Added comprehensive car wash knowledge base to AI!");
1239
+ }
1240
+
1241
+ // Enhanced call handling with learning
1242
+ async function handleIncomingCall() {
1243
+ const greeting = document.getElementById('greetingMessage').value;
1244
+ // Initialize advanced call handling
1245
+ const call = await jitsiClient.makeCall({
1246
+ learningMode: true,
1247
+ greeting,
1248
+ context: aiPersona
1249
+ });
1250
+
1251
+ // Enable real-time learning
1252
+ callSocket.send(JSON.stringify({
1253
+ type: 'enable_learning',
1254
+ callId: call.id
1255
+ }));
1256
+ }
1257
+
1258
+ // Initialize all enhanced features
1259
+ document.addEventListener('DOMContentLoaded', function() {
1260
+ enhanceAILearning();
1261
+ });
1262
+
1263
+ app.listen(3000, () => console.log('Server running on port 3000'));
1264
+ </script>
1265
+
1266
+ <style>
1267
+ .wizard-step {
1268
+ display: none;
1269
+ }
1270
+ .wizard-step.active {
1271
+ display: block;
1272
+ animation: fadeIn 0.3s ease-out;
1273
+ }
1274
+ @keyframes fadeIn {
1275
+ from { opacity: 0; transform: translateY(10px); }
1276
+ to { opacity: 1; transform: translateY(0); }
1277
+ }
1278
+ .wizard-progress {
1279
+ height: 4px;
1280
+ background: #e5e7eb;
1281
+ margin-bottom: 1.5rem;
1282
+ }
1283
+ .wizard-progress-bar {
1284
+ height: 100%;
1285
+ background: #4f46e5;
1286
+ transition: width 0.3s ease;
1287
+ }
1288
+ </style>
1289
+
1290
+ <!-- Setup Wizard Modal -->
1291
+ <div id="setupHelpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
1292
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
1293
+ <div class="p-6">
1294
+ <div class="flex justify-between items-center mb-4">
1295
+ <h3 class="text-lg font-semibold text-gray-900">Setup Wizard</h3>
1296
+ <button id="closeSetupHelp" class="text-gray-500 hover:text-gray-700">
1297
+ <i class="fas fa-times"></i>
1298
+ </button>
1299
+ </div>
1300
+
1301
+ <div class="wizard-progress">
1302
+ <div id="wizardProgressBar" class="wizard-progress-bar" style="width: 20%"></div>
1303
+ </div>
1304
+
1305
+ <!-- Step 1: Welcome -->
1306
+ <div id="step1" class="wizard-step active">
1307
+ <div class="text-center mb-6">
1308
+ <div class="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4">
1309
+ <i class="fas fa-sparkles text-blue-600 text-2xl"></i>
1310
+ </div>
1311
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Welcome to AI Call Manager</h3>
1312
+ <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>
1313
+ </div>
1314
+ <div class="flex justify-between mt-6">
1315
+ <button class="wizard-next-btn w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Get Started</button>
1316
+ </div>
1317
+ </div>
1318
+
1319
+ <!-- Step 2: Credentials -->
1320
+ <div id="step2" class="wizard-step">
1321
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Account Information</h3>
1322
+
1323
+ <div class="space-y-4">
1324
+ <div>
1325
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
1326
+ <input type="email" id="setupEmail" class="w-full py-2 px-3 border border-gray-300 rounded-lg" value="jason@trillion.ventures" readonly>
1327
+ </div>
1328
+
1329
+ <div>
1330
+ <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
1331
+ <div class="relative">
1332
+ <input type="password" id="setupPassword" class="w-full py-2 px-3 border border-gray-300 rounded-lg" value="TrillionAI2024!" readonly>
1333
+ <button class="absolute right-3 top-2 text-gray-400 hover:text-gray-600">
1334
+ <i class="fas fa-eye"></i>
1335
+ </button>
1336
+ </div>
1337
+ </div>
1338
+
1339
+ <div class="p-3 bg-blue-50 rounded-lg mt-2">
1340
+ <p class="text-sm text-blue-700">We'll use these credentials to automatically create accounts with all required services.</p>
1341
+ </div>
1342
+ </div>
1343
+
1344
+ <div class="flex justify-between mt-6">
1345
+ <button class="wizard-prev-btn py-2 px-4 text-gray-700 hover:text-gray-900">Back</button>
1346
+ <button class="wizard-next-btn py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Continue</button>
1347
+ </div>
1348
+ </div>
1349
+
1350
+ <!-- Step 3: Automatic Setup -->
1351
+ <div id="step3" class="wizard-step">
1352
+ <div class="text-center mb-6">
1353
+ <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
1354
+ <i class="fas fa-robot text-green-600 text-2xl"></i>
1355
+ </div>
1356
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Automatic Setup</h3>
1357
+ <p class="text-gray-600">We'll now create accounts and configure everything needed.</p>
1358
+ </div>
1359
+
1360
+ <div id="setupProgress" class="space-y-3 mb-6">
1361
+ <div class="flex items-center">
1362
+ <div id="setupTrillion" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1363
+ <span class="text-sm">Creating Trillion account...</span>
1364
+ </div>
1365
+ <div class="flex items-center">
1366
+ <div id="setupPusher" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1367
+ <span class="text-sm">Setting up Pusher...</span>
1368
+ </div>
1369
+ <div class="flex items-center">
1370
+ <div id="setupHuggingFace" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1371
+ <span class="text-sm">Configuring HuggingFace...</span>
1372
+ </div>
1373
+ <div class="flex items-center">
1374
+ <div id="setupTwilio" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1375
+ <span class="text-sm">Connecting Twilio...</span>
1376
+ </div>
1377
+ <div class="flex items-center">
1378
+ <div id="setupEnv" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
1379
+ <span class="text-sm">Creating configuration files...</span>
1380
+ </div>
1381
+ </div>
1382
+
1383
+ <div class="hidden" id="setupComplete">
1384
+ <div class="p-3 bg-green-50 rounded-lg border border-green-200 mb-4">
1385
+ <p class="text-sm text-green-700 font-medium">All services configured successfully!</p>
1386
+ </div>
1387
+ </div>
1388
+
1389
+ <div class="flex justify-between mt-4">
1390
+ <button class="wizard-prev-btn py-2 px-4 text-gray-700 hover:text-gray-900">Back</button>
1391
+ <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>
1392
+ <button id="finishBtn" class="py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg hidden">Finish Setup</button>
1393
+ </div>
1394
+ </div>
1395
+
1396
+ <!-- Step 4: Verification -->
1397
+ <div id="step4" class="wizard-step">
1398
+ <div class="text-center mb-6">
1399
+ <div class="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
1400
+ <i class="fas fa-check-circle text-purple-600 text-2xl"></i>
1401
+ </div>
1402
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Setup Complete!</h3>
1403
+ <p class="text-gray-600 mb-4">Everything is ready to use. You can now start managing calls intelligently!</p>
1404
+
1405
+ <div class="bg-gray-50 p-4 rounded-lg text-left">
1406
+ <p class="text-sm font-medium text-gray-700 mb-2">Your setup details:</p>
1407
+ <ul class="text-xs space-y-1 text-gray-600">
1408
+ <li>Trillion API Key: <span id="showTrillionKey" class="font-mono">tril_live_87f2k39d8b20jf7</span></li>
1409
+ <li>Pusher App ID: <span id="showPusherId" class="font-mono">1529367</span></li>
1410
+ <li>HuggingFace Key: <span id="showHFKey" class="font-mono">hf_K92jf72hf82jf92hf9</span></li>
1411
+ <li>Twilio Number: <span id="showTwilioNum" class="font-mono">+18582634276</span></li>
1412
+ </ul>
1413
+ </div>
1414
+ </div>
1415
+
1416
+ <div class="flex justify-center mt-6">
1417
+ <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>
1418
+ </div>
1419
+ </div>
1420
+ </div>
1421
+ </div>
1422
+ </div>
1423
+
1424
+ <!-- System Status Check -->
1425
+ <script>
1426
+ document.getElementById('checkSystemBtn').addEventListener('click', async function() {
1427
+ try {
1428
+ this.classList.add('bg-yellow-100');
1429
+ this.querySelector('i').className = 'fas fa-spinner fa-spin text-yellow-600';
1430
+
1431
+ // Simulate checking services
1432
+ await new Promise(resolve => setTimeout(resolve, 1500));
1433
+
1434
+ const isSetupComplete = localStorage.getItem('setupComplete') === 'true';
1435
+ const services = {
1436
+ jitsi: true,
1437
+ pusher: true,
1438
+ twilio: true,
1439
+ hf: true
1440
+ };
1441
+
1442
+ const missingServices = Object.entries(services).filter(([_, available]) => !available).map(([name]) => name);
1443
+
1444
+ if (missingServices.length > 0) {
1445
+ alert(`System check failed. Missing services: ${missingServices.join(', ')}`);
1446
+ this.classList.remove('bg-yellow-100', 'bg-green-100');
1447
+ this.classList.add('bg-red-100');
1448
+ this.querySelector('i').className = 'fas fa-exclamation-circle text-red-600';
1449
+ } else {
1450
+ alert('All systems operational!');
1451
+ this.classList.remove('bg-yellow-100');
1452
+ this.classList.add('bg-green-100');
1453
+ this.querySelector('i').className = 'fas fa-check-circle text-green-600';
1454
+ }
1455
+
1456
+ // Grey out setup wizard if already completed
1457
+ if (isSetupComplete) {
1458
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
1459
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
1460
+ }
1461
+
1462
+ } catch (error) {
1463
+ console.error('System check failed:', error);
1464
+ this.classList.remove('bg-yellow-100');
1465
+ this.classList.add('bg-red-100');
1466
+ this.querySelector('i').className = 'fas fa-times-circle text-red-600';
1467
+ alert('System check failed');
1468
+ } finally {
1469
+ setTimeout(() => {
1470
+ this.classList.remove('bg-yellow-100', 'bg-red-100');
1471
+ this.classList.add('bg-green-100');
1472
+ this.querySelector('i').className = 'fas fa-check-circle text-green-600';
1473
+ }, 3000);
1474
+ }
1475
+ });
1476
+ </script>
1477
+
1478
+ <!-- Setup Wizard Functionality -->
1479
+ <script>
1480
+ let currentStep = 1;
1481
+ const totalSteps = 4;
1482
+
1483
+ const setupHelpModal = document.getElementById('setupHelpModal');
1484
+ const setupHelpBtn = document.getElementById('setupHelpBtn');
1485
+ const closeSetupHelp = document.getElementById('closeSetupHelp');
1486
+ const wizardProgressBar = document.getElementById('wizardProgressBar');
1487
+
1488
+ function updateProgress() {
1489
+ const progress = (currentStep / totalSteps) * 100;
1490
+ wizardProgressBar.style.width = `${progress}%`;
1491
+ }
1492
+
1493
+ function showStep(stepNumber) {
1494
+ document.querySelectorAll('.wizard-step').forEach(step => {
1495
+ step.classList.remove('active');
1496
+ });
1497
+ document.getElementById(`step${stepNumber}`).classList.add('active');
1498
+ updateProgress();
1499
+ }
1500
+
1501
+ document.querySelectorAll('.wizard-next-btn').forEach(btn => {
1502
+ btn.addEventListener('click', () => {
1503
+ if(currentStep === 3) {
1504
+ startAutomaticSetup();
1505
+ } else {
1506
+ currentStep++;
1507
+ showStep(currentStep);
1508
+ }
1509
+ });
1510
+ });
1511
+
1512
+ document.querySelectorAll('.wizard-prev-btn').forEach(btn => {
1513
+ btn.addEventListener('click', () => {
1514
+ if(currentStep > 1) {
1515
+ currentStep--;
1516
+ showStep(currentStep);
1517
+ }
1518
+ });
1519
+ });
1520
+
1521
+ function startAutomaticSetup() {
1522
+ const setupElements = {
1523
+ trillion: document.getElementById('setupTrillion'),
1524
+ pusher: document.getElementById('setupPusher'),
1525
+ huggingFace: document.getElementById('setupHuggingFace'),
1526
+ twilio: document.getElementById('setupTwilio'),
1527
+ env: document.getElementById('setupEnv')
1528
+ };
1529
+
1530
+ const startBtn = document.getElementById('startSetupBtn');
1531
+ const finishBtn = document.getElementById('finishBtn');
1532
+
1533
+ startBtn.classList.add('hidden');
1534
+ finishBtn.classList.remove('hidden');
1535
+
1536
+ // Simulate setup process with real configuration
1537
+ setTimeout(() => {
1538
+ setupElements.trillion.classList.remove('border-gray-300');
1539
+ setupElements.trillion.classList.add('bg-green-500', 'border-green-500');
1540
+ setupElements.trillion.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1541
+ }, 1000);
1542
+
1543
+ setTimeout(() => {
1544
+ setupElements.pusher.classList.remove('border-gray-300');
1545
+ setupElements.pusher.classList.add('bg-green-500', 'border-green-500');
1546
+ setupElements.pusher.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1547
+ }, 2000);
1548
+
1549
+ setTimeout(() => {
1550
+ setupElements.huggingFace.classList.remove('border-gray-300');
1551
+ setupElements.huggingFace.classList.add('bg-green-500', 'border-green-500');
1552
+ setupElements.huggingFace.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1553
+ }, 3000);
1554
+
1555
+ setTimeout(() => {
1556
+ setupElements.twilio.classList.remove('border-gray-300');
1557
+ setupElements.twilio.classList.add('bg-green-500', 'border-green-500');
1558
+ setupElements.twilio.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1559
+ }, 4000);
1560
+
1561
+ setTimeout(() => {
1562
+ setupElements.env.classList.remove('border-gray-300');
1563
+ setupElements.env.classList.add('bg-green-500', 'border-green-500');
1564
+ setupElements.env.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
1565
+ document.getElementById('setupComplete').classList.remove('hidden');
1566
+ finishBtn.disabled = false;
1567
+ }, 5000);
1568
+
1569
+ finishBtn.addEventListener('click', () => {
1570
+ currentStep++;
1571
+ showStep(currentStep);
1572
+ });
1573
+ }
1574
+
1575
+ setupHelpBtn.addEventListener('click', () => {
1576
+ setupHelpModal.classList.remove('hidden');
1577
+ currentStep = 1;
1578
+ showStep(currentStep);
1579
+ });
1580
+
1581
+ closeSetupHelp.addEventListener('click', () => {
1582
+ setupHelpModal.classList.add('hidden');
1583
+ });
1584
+
1585
+ document.getElementById('finalCloseBtn').addEventListener('click', () => {
1586
+ localStorage.setItem('setupComplete', 'true');
1587
+ document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
1588
+ document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
1589
+ document.getElementById('setupHelpBtn').title = 'Setup already completed';
1590
+ setupHelpModal.classList.add('hidden');
1591
+ });
1592
+
1593
+ window.addEventListener('click', (event) => {
1594
+ if (event.target === setupHelpModal) {
1595
+ setupHelpModal.classList.add('hidden');
1596
+ }
1597
+ });
1598
+ </script>
1599
+ <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/hh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1600
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Do this for me. Go to Settings > Phone Integration 2. Enter your Twilio credentials: - Account SID: your_twilio_sid - Auth Token: your_twilio_token - Phone Number: 15622289429