Hugging Face's logo

Spaces:
joermd
/
index
Running

App Files Community
joermd commited on
Commit
ebbe459
·
verified ·
1 Parent(s): 57974ea

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +597 -19
index.html CHANGED
@@ -1,19 +1,597 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Speedy Chat</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
10
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'IBM Plex Sans Arabic', sans-serif;
14
+ line-height: 1.6;
15
+ letter-spacing: -0.01em;
16
+ transition: background-color 0.3s, color 0.3s;
17
+ }
18
+
19
+ body.light-mode {
20
+ background-color: #fafafa;
21
+ color: #374151;
22
+ }
23
+
24
+ body.dark-mode {
25
+ background-color: #1a1a1a;
26
+ color: #e5e5e5;
27
+ }
28
+
29
+ .dark-mode header {
30
+ background-color: #2d2d2d;
31
+ border-color: #404040;
32
+ }
33
+
34
+ .dark-mode footer {
35
+ background-color: #2d2d2d;
36
+ border-color: #404040;
37
+ }
38
+
39
+ .dark-mode .message-input {
40
+ background-color: #363636;
41
+ border-color: #404040;
42
+ color: #e5e5e5;
43
+ }
44
+
45
+ .dark-mode .style-select {
46
+ background-color: #363636;
47
+ border-color: #404040;
48
+ color: #e5e5e5;
49
+ }
50
+
51
+ .dark-mode .bot-message {
52
+ background-color: #363636;
53
+ color: #e5e5e5;
54
+ }
55
+
56
+ .dark-mode .action-button {
57
+ color: #e5e5e5;
58
+ background-color: #404040;
59
+ }
60
+
61
+ .welcome-text {
62
+ font-family: 'Noto Kufi Arabic', sans-serif;
63
+ font-size: 2rem;
64
+ font-weight: 700;
65
+ text-align: center;
66
+ margin: 1.5rem 0;
67
+ letter-spacing: -0.02em;
68
+ }
69
+
70
+ .message {
71
+ opacity: 0;
72
+ transform: translateY(20px);
73
+ animation: fadeIn 0.3s ease forwards;
74
+ }
75
+
76
+ .toggle-switch {
77
+ width: 32px;
78
+ height: 16px;
79
+ background-color: #e5e7eb;
80
+ border-radius: 999px;
81
+ position: relative;
82
+ cursor: pointer;
83
+ transition: background-color 0.3s;
84
+ }
85
+
86
+ .toggle-switch::after {
87
+ content: '';
88
+ position: absolute;
89
+ top: 2px;
90
+ right: 2px;
91
+ width: 12px;
92
+ height: 12px;
93
+ background-color: white;
94
+ border-radius: 50%;
95
+ transition: transform 0.3s;
96
+ }
97
+
98
+ .toggle-switch.active {
99
+ background-color: #3b82f6;
100
+ }
101
+
102
+ .toggle-switch.active::after {
103
+ transform: translateX(-16px);
104
+ }
105
+
106
+ .action-button {
107
+ padding: 0.25rem 0.5rem;
108
+ border-radius: 0.375rem;
109
+ transition: all 0.2s;
110
+ display: inline-flex;
111
+ align-items: center;
112
+ gap: 0.25rem;
113
+ font-size: 0.75rem;
114
+ color: #6B7280;
115
+ background-color: #F3F4F6;
116
+ }
117
+
118
+ .action-button:hover {
119
+ background-color: #E5E7EB;
120
+ }
121
+
122
+ .header-button {
123
+ color: #6B7280;
124
+ padding: 0.5rem;
125
+ border-radius: 9999px;
126
+ transition: all 0.2s;
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ }
131
+
132
+ .header-button:hover {
133
+ background-color: #F3F4F6;
134
+ }
135
+
136
+ .style-select {
137
+ appearance: none;
138
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
139
+ background-repeat: no-repeat;
140
+ background-position: left 0.5rem center;
141
+ background-size: 1em;
142
+ }
143
+
144
+ .stop-generation {
145
+ background-color: #EF4444 !important;
146
+ color: white !important;
147
+ }
148
+
149
+ .search-toggle.active {
150
+ background-color: #3b82f6;
151
+ color: white;
152
+ }
153
+
154
+ .thinking-steps {
155
+ background-color: #f8fafc;
156
+ border-radius: 0.5rem;
157
+ padding: 1rem;
158
+ margin: 0.5rem 0;
159
+ font-size: 0.9rem;
160
+ color: #64748b;
161
+ }
162
+
163
+ .chat-input {
164
+ max-height: 60px;
165
+ min-height: 32px;
166
+ }
167
+
168
+ @keyframes fadeIn {
169
+ to {
170
+ opacity: 1;
171
+ transform: translateY(0);
172
+ }
173
+ }
174
+
175
+ .message p {
176
+ font-size: 0.875rem;
177
+ line-height: 1.5;
178
+ }
179
+
180
+ .bot-avatar {
181
+ width: 36px;
182
+ height: 36px;
183
+ border-radius: 50%;
184
+ object-fit: cover;
185
+ }
186
+
187
+ .message-input-container {
188
+ padding: 0.5rem !important;
189
+ }
190
+
191
+ .input-actions {
192
+ padding-top: 0.25rem !important;
193
+ }
194
+
195
+ /* Remove footer border */
196
+ footer {
197
+ border-top: none !important;
198
+ }
199
+
200
+ /* Reduce message container padding */
201
+ .bot-message {
202
+ padding: 0.75rem !important;
203
+ }
204
+
205
+ /* Adjust message actions spacing */
206
+ .message-actions {
207
+ margin-top: 0.25rem;
208
+ display: flex;
209
+ gap: 0.25rem;
210
+ }
211
+ </style>
212
+ </head>
213
+ <body class="text-lg light-mode">
214
+ <!-- Rest of the HTML remains exactly the same -->
215
+ <header class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 z-50 shadow-sm">
216
+ <div class="flex items-center px-4 py-2">
217
+ <div class="flex items-center flex-1">
218
+ <span class="text-2xl font-bold text-indigo-600">Speedy</span>
219
+ </div>
220
+ <div class="flex items-center gap-2">
221
+ <a href="/home" class="header-button">
222
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
223
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
224
+ </svg>
225
+ </a>
226
+ <a href="/chats" class="header-button">
227
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
228
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
229
+ </svg>
230
+ </a>
231
+ <a href="/account" class="header-button">
232
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
233
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
234
+ </svg>
235
+ </a>
236
+ <button id="darkModeToggle" class="header-button">
237
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
238
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
239
+ </svg>
240
+ </button>
241
+ <button id="clearChat" class="header-button">
242
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
243
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
244
+ </svg>
245
+ </button>
246
+ </div>
247
+ </div>
248
+ </header>
249
+
250
+ <main class="pt-24 pb-24">
251
+ <div class="max-w-3xl mx-auto px-4">
252
+ <div class="welcome-text">سبيدي هنا لمساعدتك</div>
253
+ <div id="messagesContainer" class="space-y-4"></div>
254
+ </div>
255
+ </main>
256
+
257
+ <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-sm">
258
+ <div class="max-w-3xl mx-auto px-4 py-3">
259
+ <div class="relative bg-white rounded-xl border border-gray-200 p-2 message-input-container">
260
+ <textarea
261
+ id="messageInput"
262
+ class="chat-input w-full text-gray-600 text-lg p-2 rounded-lg resize-none border-none"
263
+ placeholder="اكتب رسالتك هنا..."
264
+ rows="1"
265
+ ></textarea>
266
+
267
+ <div class="flex items-center justify-between mt-2 input-actions">
268
+ <div class="flex gap-3">
269
+ <button class="text-gray-400 hover:text-gray-600" id="attachButton">
270
+ <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
271
+ <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
272
+ </svg>
273
+ </button>
274
+ <a href="https://joermd-test11.static.hf.space" target="_blank" id="micButton" class="text-gray-400 hover:text-gray-600">
275
+ <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
276
+ <path d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
277
+ </svg>
278
+ </a>
279
+ <button id="searchButton" class="text-gray-400 hover:text-gray-600 search-toggle">
280
+ <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
281
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
282
+ </svg>
283
+ </button>
284
+ </div>
285
+
286
+ <div class="flex items-center gap-3">
287
+ <select id="styleSelect" class="style-select bg-gray-50 border border-gray-200 text-gray-600 text-sm rounded-lg pl-8 pr-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200">
288
+ <option value="short">⚡ ردود قصيرة</option>
289
+ <option value="normal" selected>◯ عادي</option>
290
+ <option value="long">↔ ردود مفصلة</option>
291
+ </select>
292
+
293
+ <div class="flex items-center gap-2 bg-gray-50 px-2 py-1 rounded-lg">
294
+ <span class="text-gray-600">ذكاء متقدم</span>
295
+ <div class="toggle-switch" id="aiToggle"></div>
296
+ </div>
297
+
298
+ <button id="sendMessage" class="bg-black text-white px-3 py-1.5 rounded-lg flex items-center gap-2">
299
+ إرسال
300
+ <svg class="w-4 h-4 rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor">
301
+ <path d="M12 19V5M5 12l7-7 7 7"/>
302
+ </svg>
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </footer>
309
+
310
+ <script>
311
+ const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/8000/chat';
312
+ const messagesContainer = document.getElementById('messagesContainer');
313
+ const messageInput = document.getElementById('messageInput');
314
+ const sendButton = document.getElementById('sendMessage');
315
+ const clearButton = document.getElementById('clearChat');
316
+ const styleSelect = document.getElementById('styleSelect');
317
+ const darkModeToggle = document.getElementById('darkModeToggle');
318
+ const aiToggle = document.getElementById('aiToggle');
319
+ const searchButton = document.getElementById('searchButton');
320
+ let chatHistory = [];
321
+ let currentStyle = 'normal';
322
+ let currentController = null;
323
+ let isSearchEnabled = false;
324
+
325
+ // Search button toggle
326
+ searchButton.addEventListener('click', () => {
327
+ isSearchEnabled = !isSearchEnabled;
328
+ searchButton.classList.toggle('active');
329
+ messageInput.placeholder = isSearchEnabled ? "ابحث عن..." : "اكتب رسالتك هنا...";
330
+ });
331
+
332
+ // Dark mode toggle
333
+ darkModeToggle.addEventListener('click', () => {
334
+ document.body.classList.toggle('dark-mode');
335
+ document.body.classList.toggle('light-mode');
336
+ });
337
+
338
+ aiToggle.addEventListener('click', function() {
339
+ this.classList.toggle('active');
340
+ });
341
+
342
+ styleSelect.addEventListener('change', (e) => {
343
+ currentStyle = e.target.value;
344
+ });
345
+
346
+ function createThinkingSteps(messageId) {
347
+ return `
348
+ <div id="${messageId}-thinking" class="thinking-steps">
349
+ <div>1. تحليل السؤال وفهم المطلوب...</div>
350
+ <div>2. جمع المعلومات ذات الصلة...</div>
351
+ <div>3. صياغة إجابة شاملة ودقيقة...</div>
352
+ </div>
353
+ `;
354
+ }
355
+
356
+ function createUserMessage(text) {
357
+ let prefix = '';
358
+ if (currentStyle === 'short') {
359
+ prefix = 'اعطني رد باختصار وسرعة: ';
360
+ } else if (currentStyle === 'long') {
361
+ prefix = 'اعطني رد مفصل وموسع: ';
362
+ }
363
+
364
+ return `
365
+ <div class="message flex justify-end mb-4">
366
+ <div class="max-w-[80%]">
367
+ <div class="bg-black text-white rounded-lg p-3 shadow-sm">
368
+ <p class="text-sm">${text}</p>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ `;
373
+ }
374
+
375
+ function createBotMessage(text, messageId) {
376
+ return `
377
+ <div class="message flex justify-start mb-4">
378
+ <div class="flex-shrink-0 mt-1">
379
+ <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Bot Avatar" class="bot-avatar">
380
+ </div>
381
+ <div class="max-w-[80%] mr-3">
382
+ <div class="bot-message bg-white rounded-lg p-3 shadow-sm">
383
+ <p id="${messageId}" class="text-sm"></p>
384
+ <div class="message-actions">
385
+ <button class="action-button copy-button" data-message-id="${messageId}">
386
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
387
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
388
+ </svg>
389
+ نسخ
390
+ </button>
391
+ <button class="action-button regenerate-button" data-message-id="${messageId}">
392
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
393
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
394
+ </svg>
395
+ إعادة التوليد
396
+ </button>
397
+ <button class="action-button like-button" data-message-id="${messageId}">
398
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
399
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
400
+ </svg>
401
+ أعجبني
402
+ </button>
403
+ <button class="action-button dislike-button" data-message-id="${messageId}">
404
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
405
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018c.163 0 .326.02.485.06L17 4m-7 10v5a2 2 0 002 2h.095c.5 0 .905-.405.905-.905 0-.714.211-1.412.608-2.006L17 13V4m-7 10h2m5 0v2a2 2 0 01-2 2h-2.5"></path>
406
+ </svg>
407
+ لم يعجبني
408
+ </button>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ `;
414
+ }
415
+
416
+ async function typeText(elementId, text) {
417
+ const element = document.getElementById(elementId);
418
+ element.innerHTML = '';
419
+ const words = text.split(' ');
420
+
421
+ for (let i = 0; i < words.length; i++) {
422
+ const span = document.createElement('span');
423
+ span.textContent = words[i] + ' ';
424
+ span.className = 'typing-animation';
425
+ element.appendChild(span);
426
+ await new Promise(resolve => setTimeout(resolve, 50));
427
+ }
428
+ }
429
+
430
+ function toggleSendButton(isGenerating) {
431
+ if (isGenerating) {
432
+ sendButton.classList.add('stop-generation');
433
+ sendButton.innerHTML = `
434
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
435
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
436
+ </svg>
437
+ إيقاف
438
+ `;
439
+ } else {
440
+ sendButton.classList.remove('stop-generation');
441
+ sendButton.innerHTML = `
442
+ إرسال
443
+ <svg class="w-4 h-4 rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor">
444
+ <path d="M12 19V5M5 12l7-7 7 7"/>
445
+ </svg>
446
+ `;
447
+ }
448
+ }
449
+
450
+ async function sendMessage() {
451
+ const message = messageInput.value.trim();
452
+ if (!message) return;
453
+
454
+ if (currentController) {
455
+ currentController.abort();
456
+ currentController = null;
457
+ toggleSendButton(false);
458
+ return;
459
+ }
460
+
461
+ messageInput.value = '';
462
+ adjustTextareaHeight();
463
+
464
+ const messageId = 'msg-' + Date.now();
465
+ let actualMessage = message;
466
+
467
+ if (currentStyle === 'short') {
468
+ actualMessage = 'اعطني رد باختصار وسرعة: ' + message;
469
+ } else if (currentStyle === 'long') {
470
+ actualMessage = 'اعطني رد مفصل وموسع: ' + message;
471
+ }
472
+
473
+ messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message));
474
+ messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId));
475
+
476
+ if (aiToggle.classList.contains('active')) {
477
+ document.getElementById(messageId).insertAdjacentHTML('beforebegin', createThinkingSteps(messageId));
478
+ }
479
+
480
+ scrollToBottom();
481
+
482
+ try {
483
+ currentController = new AbortController();
484
+ toggleSendButton(true);
485
+
486
+ const response = await fetch(API_URL, {
487
+ method: 'POST',
488
+ headers: { 'Content-Type': 'application/json' },
489
+ body: JSON.stringify({
490
+ message: actualMessage,
491
+ history: chatHistory,
492
+ advanced: aiToggle.classList.contains('active'),
493
+ search: isSearchEnabled
494
+ }),
495
+ signal: currentController.signal
496
+ });
497
+
498
+ const data = await response.json();
499
+
500
+ const thinkingSteps = document.getElementById(`${messageId}-thinking`);
501
+ if (thinkingSteps) {
502
+ thinkingSteps.remove();
503
+ }
504
+
505
+ await typeText(messageId, data.response);
506
+
507
+ chatHistory.push({
508
+ human: actualMessage,
509
+ assistant: data.response
510
+ });
511
+ } catch (error) {
512
+ if (error.name === 'AbortError') {
513
+ document.getElementById(messageId).textContent = 'تم إيقاف التوليد.';
514
+ } else {
515
+ document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
516
+ }
517
+ } finally {
518
+ currentController = null;
519
+ toggleSendButton(false);
520
+ }
521
+ scrollToBottom();
522
+ }
523
+
524
+ function adjustTextareaHeight() {
525
+ messageInput.style.height = 'auto';
526
+ messageInput.style.height = Math.min(messageInput.scrollHeight, 60) + 'px';
527
+ }
528
+
529
+ function scrollToBottom() {
530
+ window.scrollTo({
531
+ top: document.documentElement.scrollHeight,
532
+ behavior: 'smooth'
533
+ });
534
+ }
535
+
536
+ // Event Listeners
537
+ document.addEventListener('click', async (e) => {
538
+ if (e.target.closest('.copy-button')) {
539
+ const messageId = e.target.closest('.copy-button').dataset.messageId;
540
+ const text = document.getElementById(messageId).textContent;
541
+ await navigator.clipboard.writeText(text);
542
+ const button = e.target.closest('.copy-button');
543
+ button.innerHTML = `
544
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
545
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
546
+ </svg>
547
+ تم النسخ!
548
+ `;
549
+ setTimeout(() => {
550
+ button.innerHTML = `
551
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
552
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
553
+ </svg>
554
+ نسخ
555
+ `;
556
+ }, 2000);
557
+ }
558
+
559
+ if (e.target.closest('.regenerate-button')) {
560
+ if (chatHistory.length > 0) {
561
+ const lastMessage = chatHistory[chatHistory.length - 1].human;
562
+ messageInput.value = lastMessage;
563
+ sendMessage();
564
+ }
565
+ }
566
+
567
+ if (e.target.closest('.like-button')) {
568
+ const button = e.target.closest('.like-button');
569
+ button.classList.toggle('text-green-500');
570
+ }
571
+
572
+ if (e.target.closest('.dislike-button')) {
573
+ const button = e.target.closest('.dislike-button');
574
+ button.classList.toggle('text-red-500');
575
+ }
576
+ });
577
+
578
+ sendButton.addEventListener('click', sendMessage);
579
+ messageInput.addEventListener('keypress', (e) => {
580
+ if (e.key === 'Enter' && !e.shiftKey) {
581
+ e.preventDefault();
582
+ sendMessage();
583
+ }
584
+ });
585
+ messageInput.addEventListener('input', adjustTextareaHeight);
586
+ clearButton.addEventListener('click', () => {
587
+ messagesContainer.innerHTML = '';
588
+ chatHistory = [];
589
+ });
590
+
591
+ // Initial welcome message
592
+ const initialMessageId = 'msg-initial';
593
+ messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
594
+ typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
595
+ </script>
596
+ </body>
597
+ </html>