Hugging Face's logo

Spaces:
joermd
/
index
Running

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

Create sss.html

Browse files
Files changed (1) hide show
  1. sss.html +584 -0
sss.html ADDED
@@ -0,0 +1,584 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <!-- Tailwind CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9
+ <!-- Prism.js for code highlighting -->
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet">
11
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.js"></script>
14
+ <!-- TinyMCE for rich text editing -->
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.7/tinymce.min.js"></script>
16
+ <style>
17
+ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
18
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');
19
+
20
+ body {
21
+ font-family: 'IBM Plex Sans Arabic', sans-serif;
22
+ line-height: 1.6;
23
+ letter-spacing: -0.01em;
24
+ transition: background-color 0.3s, color 0.3s;
25
+ }
26
+
27
+ /* Light/Dark Mode Styles */
28
+ body.light-mode {
29
+ background-color: #fafafa;
30
+ color: #374151;
31
+ }
32
+
33
+ body.dark-mode {
34
+ background-color: #1a1a1a;
35
+ color: #e5e5e5;
36
+ }
37
+
38
+ .dark-mode header {
39
+ background-color: #2d2d2d;
40
+ border-color: #404040;
41
+ }
42
+
43
+ .dark-mode footer {
44
+ background-color: #2d2d2d;
45
+ border-color: #404040;
46
+ }
47
+
48
+ .dark-mode .message-input {
49
+ background-color: #363636;
50
+ border-color: #404040;
51
+ color: #e5e5e5;
52
+ }
53
+
54
+ .dark-mode .style-select {
55
+ background-color: #363636;
56
+ border-color: #404040;
57
+ color: #e5e5e5;
58
+ }
59
+
60
+ .dark-mode .bot-message {
61
+ background-color: #363636;
62
+ color: #e5e5e5;
63
+ }
64
+
65
+ .dark-mode .action-button {
66
+ color: #e5e5e5;
67
+ background-color: #404040;
68
+ }
69
+
70
+ /* Code Block Styles */
71
+ pre[class*="language-"] {
72
+ direction: ltr;
73
+ text-align: left;
74
+ border-radius: 0.5rem;
75
+ margin: 1rem 0;
76
+ padding: 1rem;
77
+ font-size: 0.9rem;
78
+ line-height: 1.5;
79
+ }
80
+
81
+ .code-block-wrapper {
82
+ position: relative;
83
+ margin: 1rem 0;
84
+ border-radius: 0.5rem;
85
+ overflow: hidden;
86
+ }
87
+
88
+ .code-block-header {
89
+ display: flex;
90
+ justify-content: space-between;
91
+ align-items: center;
92
+ background: #2d2d2d;
93
+ color: white;
94
+ padding: 0.5rem 1rem;
95
+ }
96
+
97
+ /* Long Text Styles */
98
+ .long-text-wrapper {
99
+ max-height: 300px;
100
+ overflow-y: auto;
101
+ padding: 1rem;
102
+ background: #f8f9fa;
103
+ border-radius: 0.5rem;
104
+ margin: 1rem 0;
105
+ }
106
+
107
+ /* Rich Text Editor Styles */
108
+ .editor-wrapper {
109
+ display: none;
110
+ background: white;
111
+ border-radius: 0.5rem;
112
+ margin: 1rem 0;
113
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
114
+ }
115
+
116
+ .editor-toolbar {
117
+ display: flex;
118
+ gap: 0.5rem;
119
+ padding: 0.5rem;
120
+ border-bottom: 1px solid #e5e7eb;
121
+ }
122
+
123
+ /* Message Input Styles */
124
+ .message-input {
125
+ resize: none;
126
+ min-height: 50px;
127
+ max-height: 200px;
128
+ }
129
+
130
+ .message-input:focus {
131
+ outline: none;
132
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
133
+ }
134
+
135
+ /* Welcome Text Style */
136
+ .welcome-text {
137
+ font-family: 'Noto Kufi Arabic', sans-serif;
138
+ font-size: 2rem;
139
+ font-weight: 700;
140
+ text-align: center;
141
+ margin: 1.5rem 0;
142
+ letter-spacing: -0.02em;
143
+ }
144
+
145
+ /* Message Animation */
146
+ .message {
147
+ opacity: 0;
148
+ transform: translateY(20px);
149
+ animation: fadeIn 0.3s ease forwards;
150
+ }
151
+
152
+ @keyframes fadeIn {
153
+ to {
154
+ opacity: 1;
155
+ transform: translateY(0);
156
+ }
157
+ }
158
+
159
+ /* Utility Classes */
160
+ .bot-avatar {
161
+ width: 40px;
162
+ height: 40px;
163
+ border-radius: 50%;
164
+ object-fit: cover;
165
+ }
166
+
167
+ .action-button {
168
+ padding: 0.5rem;
169
+ border-radius: 0.375rem;
170
+ transition: all 0.2s;
171
+ display: inline-flex;
172
+ align-items: center;
173
+ gap: 0.5rem;
174
+ font-size: 0.875rem;
175
+ color: #6B7280;
176
+ background-color: #F3F4F6;
177
+ }
178
+
179
+ .action-button:hover {
180
+ background-color: #E5E7EB;
181
+ }
182
+
183
+ .style-select {
184
+ appearance: none;
185
+ 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");
186
+ background-repeat: no-repeat;
187
+ background-position: left 0.5rem center;
188
+ background-size: 1em;
189
+ }
190
+ </style>
191
+ </head>
192
+ <body class="text-lg light-mode">
193
+ <header class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 z-50 shadow-sm">
194
+ <div class="flex items-center px-4 py-2">
195
+ <div class="flex items-center flex-1">
196
+ <span class="text-2xl font-bold text-indigo-600">Speedy</span>
197
+ </div>
198
+ <button id="darkModeToggle" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2">
199
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
200
+ <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>
201
+ </svg>
202
+ </button>
203
+ <button id="clearChat" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors">
204
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
205
+ <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>
206
+ </svg>
207
+ </button>
208
+ </div>
209
+ </header>
210
+
211
+ <main class="pt-24 pb-24">
212
+ <div class="max-w-3xl mx-auto px-4">
213
+ <div class="welcome-text">سبيدي هنا لمساعدتك</div>
214
+ <div id="messagesContainer" class="space-y-4"></div>
215
+ </div>
216
+ </main>
217
+
218
+ <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 shadow-sm">
219
+ <div class="max-w-3xl mx-auto px-4 py-4">
220
+ <div class="relative">
221
+ <textarea
222
+ id="messageInput"
223
+ class="message-input w-full border border-gray-200 rounded-lg px-4 py-3 pl-32 pr-4 resize-none text-lg"
224
+ rows="1"
225
+ placeholder="اكتب رسالتك هنا..."
226
+ ></textarea>
227
+ <div class="absolute bottom-3 left-2 flex items-center space-x-2 rtl:space-x-reverse">
228
+ <button id="sendMessage" class="bg-indigo-500 hover:bg-indigo-600 text-white rounded-full p-2 transition-colors">
229
+ <svg class="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
230
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
231
+ </svg>
232
+ </button>
233
+ <a href="https://joermd-test11.static.hf.space" target="_blank" id="micButton" class="bg-green-500 hover:bg-green-600 text-white rounded-full p-2 transition-colors">
234
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
235
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
236
+ </svg>
237
+ </a>
238
+ <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">
239
+ <option value="short">⚡ ردود قصيرة</option>
240
+ <option value="normal" selected>◯ عادي</option>
241
+ <option value="long">↔ ردود مفصلة</option>
242
+ </select>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </footer>
247
+
248
+ <script>
249
+ const API_URL = 'https://6xcf3eufsiktmf-7777.proxy.runpod.net/proxy/8000/chat';
250
+ const messagesContainer = document.getElementById('messagesContainer');
251
+ const messageInput = document.getElementById('messageInput');
252
+ const sendButton = document.getElementById('sendMessage');
253
+ const clearButton = document.getElementById('clearChat');
254
+ const styleSelect = document.getElementById('styleSelect');
255
+ const darkModeToggle = document.getElementById('darkModeToggle');
256
+ let chatHistory = [];
257
+ let currentStyle = 'normal';
258
+ let currentController = null;
259
+
260
+ // Dark mode toggle
261
+ darkModeToggle.addEventListener('click', () => {
262
+ document.body.classList.toggle('dark-mode');
263
+ document.body.classList.toggle('light-mode');
264
+ });
265
+
266
+ styleSelect.addEventListener('change', (e) => {
267
+ currentStyle = e.target.value;
268
+ });
269
+
270
+ function createUserMessage(text) {
271
+ return `
272
+ <div class="message flex justify-end mb-4">
273
+ <div class="max-w-[80%]">
274
+ <div class="bg-indigo-500 text-white rounded-lg p-4 shadow-sm">
275
+ <p class="text-lg">${text}</p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ `;
280
+ }
281
+
282
+ function createBotMessage(text, messageId) {
283
+ return `
284
+ <div class="message flex justify-start mb-4">
285
+ <div class="flex-shrink-0 mt-1">
286
+ <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Bot Avatar" class="bot-avatar">
287
+ </div>
288
+ <div class="max-w-[80%] mr-3">
289
+ <div class="bot-message bg-white rounded-lg p-4 shadow-sm">
290
+ <p id="${messageId}" class="text-gray-700"></p>
291
+ <div class="message-actions">
292
+ <button class="action-button copy-button" data-message-id="${messageId}">
293
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
294
+ <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>
295
+ </svg>
296
+ نسخ
297
+ </button>
298
+ <button class="action-button regenerate-button" data-message-id="${messageId}">
299
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
300
+ <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>
301
+ </svg>
302
+ إعادة التوليد
303
+ </button>
304
+ <button class="action-button edit-text-btn">
305
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
306
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
307
+ </svg>
308
+ تحرير كمستند
309
+ </button>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ `;
315
+ }
316
+
317
+ function formatCodeBlock(code, language) {
318
+ return `
319
+ <div class="code-block-wrapper">
320
+ <div class="code-block-header">
321
+ <span>${language}</span>
322
+ <button class="copy-code-btn">
323
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
324
+ <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 2"></path>
325
+ </svg>
326
+ </button>
327
+ </div>
328
+ <pre class="line-numbers"><code class="language-${language}">${code}</code></pre>
329
+ </div>`;
330
+ }
331
+
332
+ async function typeText(elementId, text) {
333
+ const element = document.getElementById(elementId);
334
+ element.innerHTML = '';
335
+
336
+ // Check if text contains code blocks
337
+ const codeBlockRegex = /```(\w+)\n([\s\S]+?)```/g;
338
+ let lastIndex = 0;
339
+ let match;
340
+
341
+ while ((match = codeBlockRegex.exec(text)) !== null) {
342
+ // Add text before code block
343
+ const beforeText = text.slice(lastIndex, match.index);
344
+ if (beforeText) {
345
+ await addTextWithEditor(element, beforeText);
346
+ }
347
+
348
+ // Add code block
349
+ const [, language, code] = match;
350
+ element.innerHTML += formatCodeBlock(code.trim(), language);
351
+ lastIndex = match.index + match[0].length;
352
+ }
353
+
354
+ // Add remaining text
355
+ const remainingText = text.slice(lastIndex);
356
+ if (remainingText) {
357
+ await addTextWithEditor(element, remainingText);
358
+ }
359
+
360
+ // Initialize Prism.js
361
+ Prism.highlightAllUnder(element);
362
+ }
363
+
364
+ async function addTextWithEditor(element, text) {
365
+ const textWrapper = document.createElement('div');
366
+ textWrapper.className = 'long-text-wrapper';
367
+ textWrapper.innerHTML = text;
368
+
369
+ const editorWrapper = document.createElement('div');
370
+ editorWrapper.className = 'editor-wrapper';
371
+ editorWrapper.innerHTML = `
372
+ <div class="editor-toolbar">
373
+ <button class="save-btn action-button">حفظ</button>
374
+ <button class="cancel-btn action-button">إلغاء</button>
375
+ </div>
376
+ <textarea class="tinymce-editor"></textarea>
377
+ `;
378
+
379
+ element.appendChild(textWrapper);
380
+ element.appendChild(editorWrapper);
381
+
382
+ // Initialize TinyMCE for this textarea
383
+ tinymce.init({
384
+ selector: '.tinymce-editor:last',
385
+ directionality: 'rtl',
386
+ height: 400,
387
+ menubar: false,
388
+ plugins: 'lists link table',
389
+ toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | link table',
390
+ content_style: 'body { font-family: "IBM Plex Sans Arabic", sans-serif; }',
391
+ setup: function(editor) {
392
+ editor.on('init', function() {
393
+ editor.setContent(text);
394
+ });
395
+ }
396
+ });
397
+ }
398
+
399
+ async function sendMessage() {
400
+ const message = messageInput.value.trim();
401
+ if (!message) return;
402
+
403
+ if (currentController) {
404
+ currentController.abort();
405
+ currentController = null;
406
+ toggleSendButton(false);
407
+ return;
408
+ }
409
+
410
+ messageInput.value = '';
411
+ adjustTextareaHeight();
412
+
413
+ const messageId = 'msg-' + Date.now();
414
+ let actualMessage = message;
415
+
416
+ if (currentStyle === 'short') {
417
+ actualMessage = 'اعطني رد باختصار وسرعة: ' + message;
418
+ } else if (currentStyle === 'long') {
419
+ actualMessage = 'اعطني رد مفصل وموسع: ' + message;
420
+ }
421
+
422
+ messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message));
423
+ messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId));
424
+ scrollToBottom();
425
+
426
+ try {
427
+ currentController = new AbortController();
428
+ toggleSendButton(true);
429
+
430
+ const response = await fetch(API_URL, {
431
+ method: 'POST',
432
+ headers: { 'Content-Type': 'application/json' },
433
+ body: JSON.stringify({
434
+ message: actualMessage,
435
+ history: chatHistory
436
+ }),
437
+ signal: currentController.signal
438
+ });
439
+
440
+ const data = await response.json();
441
+ await typeText(messageId, data.response);
442
+
443
+ chatHistory.push({
444
+ human: actualMessage,
445
+ assistant: data.response
446
+ });
447
+ } catch (error) {
448
+ if (error.name === 'AbortError') {
449
+ document.getElementById(messageId).textContent = 'تم إيقاف التوليد.';
450
+ } else {
451
+ document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
452
+ }
453
+ } finally {
454
+ currentController = null;
455
+ toggleSendButton(false);
456
+ }
457
+ scrollToBottom();
458
+ }
459
+
460
+ function toggleSendButton(isGenerating) {
461
+ const sendButton = document.getElementById('sendMessage');
462
+ if (isGenerating) {
463
+ sendButton.classList.add('stop-generation');
464
+ sendButton.innerHTML = `
465
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
466
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
467
+ </svg>
468
+ `;
469
+ } else {
470
+ sendButton.classList.remove('stop-generation');
471
+ sendButton.innerHTML = `
472
+ <svg class="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
473
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
474
+ </svg>
475
+ `;
476
+ }
477
+ }
478
+
479
+ function adjustTextareaHeight() {
480
+ messageInput.style.height = 'auto';
481
+ messageInput.style.height = messageInput.scrollHeight + 'px';
482
+ }
483
+
484
+ function scrollToBottom() {
485
+ window.scrollTo({
486
+ top: document.documentElement.scrollHeight,
487
+ behavior: 'smooth'
488
+ });
489
+ }
490
+
491
+ // Event Listeners
492
+ document.addEventListener('click', async (e) => {
493
+ if (e.target.closest('.copy-code-btn')) {
494
+ const codeBlock = e.target.closest('.code-block-wrapper').querySelector('code');
495
+ await navigator.clipboard.writeText(codeBlock.textContent);
496
+ const btn = e.target.closest('.copy-code-btn');
497
+ btn.innerHTML = 'تم النسخ!';
498
+ setTimeout(() => {
499
+ btn.innerHTML = `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
500
+ <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 2"></path>
501
+ </svg>`;
502
+ }, 2000);
503
+ }
504
+
505
+ if (e.target.closest('.copy-button')) {
506
+ const messageId = e.target.closest('.copy-button').dataset.messageId;
507
+ const text = document.getElementById(messageId).textContent;
508
+ await navigator.clipboard.writeText(text);
509
+ const btn = e.target.closest('.copy-button');
510
+ btn.textContent = 'تم النسخ!';
511
+ setTimeout(() => {
512
+ btn.innerHTML = `
513
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
514
+ <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 2"></path>
515
+ </svg>
516
+ نسخ
517
+ `;
518
+ }, 2000);
519
+ }
520
+
521
+ if (e.target.closest('.edit-text-btn')) {
522
+ const messageWrapper = e.target.closest('.bot-message');
523
+ const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
524
+ const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
525
+
526
+ if (textWrapper && editorWrapper) {
527
+ textWrapper.style.display = 'none';
528
+ editorWrapper.style.display = 'block';
529
+ }
530
+ }
531
+
532
+ if (e.target.closest('.save-btn')) {
533
+ const messageWrapper = e.target.closest('.bot-message');
534
+ const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
535
+ const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
536
+ const editor = tinymce.get(editorWrapper.querySelector('.tinymce-editor').id);
537
+
538
+ if (textWrapper && editor) {
539
+ textWrapper.innerHTML = editor.getContent();
540
+ textWrapper.style.display = 'block';
541
+ editorWrapper.style.display = 'none';
542
+ }
543
+ }
544
+
545
+ if (e.target.closest('.cancel-btn')) {
546
+ const messageWrapper = e.target.closest('.bot-message');
547
+ const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
548
+ const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
549
+
550
+ if (textWrapper && editorWrapper) {
551
+ textWrapper.style.display = 'block';
552
+ editorWrapper.style.display = 'none';
553
+ }
554
+ }
555
+
556
+ if (e.target.closest('.regenerate-button')) {
557
+ if (chatHistory.length > 0) {
558
+ const lastMessage = chatHistory[chatHistory.length - 1].human;
559
+ messageInput.value = lastMessage;
560
+ sendMessage();
561
+ }
562
+ }
563
+ });
564
+
565
+ sendButton.addEventListener('click', sendMessage);
566
+ messageInput.addEventListener('keypress', (e) => {
567
+ if (e.key === 'Enter' && !e.shiftKey) {
568
+ e.preventDefault();
569
+ sendMessage();
570
+ }
571
+ });
572
+ messageInput.addEventListener('input', adjustTextareaHeight);
573
+ clearButton.addEventListener('click', () => {
574
+ messagesContainer.innerHTML = '';
575
+ chatHistory = [];
576
+ });
577
+
578
+ // Initial welcome message
579
+ const initialMessageId = 'msg-initial';
580
+ messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
581
+ typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
582
+ </script>
583
+ </body>
584
+ </html>