Update sss.html

sss.html

@@ -6,16 +6,20 @@
     <title>Speedy Chat</title>
     <!-- Tailwind CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    <!-- Prism.js for code highlighting -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.js"></script>
-    <!-- TinyMCE for rich text editing -->
+    <!-- Updated Prism.js theme and plugins -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
+    <!-- Enhanced TinyMCE -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.7/tinymce.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
         @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');
         
         body {
             font-family: 'IBM Plex Sans Arabic', sans-serif;
@@ -24,7 +28,7 @@
             transition: background-color 0.3s, color 0.3s;
         }
         
-        /* Light/Dark Mode Styles */
+        /* Enhanced Light/Dark Mode Styles */
         body.light-mode {
             background-color: #fafafa;
             color: #374151;
@@ -67,22 +71,25 @@
             background-color: #404040;
         }
 
-        /* Code Block Styles */
+        /* Enhanced Code Block Styles */
         pre[class*="language-"] {
             direction: ltr;
             text-align: left;
             border-radius: 0.5rem;
             margin: 1rem 0;
             padding: 1rem;
-            font-size: 0.9rem;
+            font-size: 0.95rem;
             line-height: 1.5;
+            font-family: 'Fira Code', monospace;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
 
         .code-block-wrapper {
             position: relative;
-            margin: 1rem 0;
+            margin: 1.5rem 0;
             border-radius: 0.5rem;
             overflow: hidden;
+            border: 1px solid #2d2d2d;
         }
 
         .code-block-header {
@@ -91,33 +98,64 @@
             align-items: center;
             background: #2d2d2d;
             color: white;
-            padding: 0.5rem 1rem;
+            padding: 0.75rem 1rem;
+            font-family: 'Fira Code', monospace;
+            font-size: 0.9rem;
+        }
+
+        .code-block-header .language-label {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .code-block-header .language-icon {
+            width: 16px;
+            height: 16px;
         }
 
-        /* Long Text Styles */
+        /* Enhanced Text Content Styles */
         .long-text-wrapper {
-            max-height: 300px;
+            max-height: 500px;
             overflow-y: auto;
-            padding: 1rem;
+            padding: 1.25rem;
             background: #f8f9fa;
             border-radius: 0.5rem;
             margin: 1rem 0;
+            line-height: 1.7;
+            font-size: 1.1rem;
+        }
+
+        .dark-mode .long-text-wrapper {
+            background: #2d2d2d;
         }
 
-        /* Rich Text Editor Styles */
+        /* Enhanced Editor Styles */
         .editor-wrapper {
             display: none;
             background: white;
             border-radius: 0.5rem;
             margin: 1rem 0;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e5e7eb;
+        }
+
+        .dark-mode .editor-wrapper {
+            background: #2d2d2d;
+            border-color: #404040;
         }
 
         .editor-toolbar {
             display: flex;
-            gap: 0.5rem;
-            padding: 0.5rem;
+            gap: 0.75rem;
+            padding: 0.75rem;
             border-bottom: 1px solid #e5e7eb;
+            background: #f8f9fa;
+        }
+
+        .dark-mode .editor-toolbar {
+            background: #363636;
+            border-color: #404040;
         }
 
         /* Message Input Styles */
@@ -125,30 +163,46 @@
             resize: none;
             min-height: 50px;
             max-height: 200px;
+            transition: all 0.3s ease;
         }
 
         .message-input:focus {
             outline: none;
             box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+            border-color: #6366f1;
         }
 
-        /* Welcome Text Style */
-        .welcome-text {
-            font-family: 'Noto Kufi Arabic', sans-serif;
-            font-size: 2rem;
-            font-weight: 700;
-            text-align: center;
-            margin: 1.5rem 0;
-            letter-spacing: -0.02em;
-        }
-
-        /* Message Animation */
+        /* Enhanced Message Styles */
         .message {
             opacity: 0;
             transform: translateY(20px);
             animation: fadeIn 0.3s ease forwards;
+            margin-bottom: 1.5rem;
+        }
+
+        .message .bot-message,
+        .message .user-message {
+            border-radius: 1rem;
+            padding: 1.25rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .message .bot-message {
+            background: white;
+            border: 1px solid #e5e7eb;
+        }
+
+        .dark-mode .message .bot-message {
+            background: #363636;
+            border-color: #404040;
         }
 
+        .message .user-message {
+            background: #6366f1;
+            color: white;
+        }
+
+        /* Animation Keyframes */
         @keyframes fadeIn {
             to {
                 opacity: 1;
@@ -156,28 +210,31 @@
             }
         }
 
-        /* Utility Classes */
+        /* Enhanced Utility Classes */
         .bot-avatar {
-            width: 40px;
-            height: 40px;
+            width: 44px;
+            height: 44px;
             border-radius: 50%;
             object-fit: cover;
+            border: 2px solid #6366f1;
         }
 
         .action-button {
-            padding: 0.5rem;
-            border-radius: 0.375rem;
+            padding: 0.5rem 0.75rem;
+            border-radius: 0.5rem;
             transition: all 0.2s;
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
-            font-size: 0.875rem;
+            font-size: 0.9rem;
             color: #6B7280;
             background-color: #F3F4F6;
+            border: 1px solid #E5E7EB;
         }
 
         .action-button:hover {
             background-color: #E5E7EB;
+            transform: translateY(-1px);
         }
 
         .style-select {
@@ -186,6 +243,39 @@
             background-repeat: no-repeat;
             background-position: left 0.5rem center;
             background-size: 1em;
+            padding-left: 2.5rem;
+        }
+
+        /* Scrollbar Styles */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #666;
+        }
+
+        .dark-mode ::-webkit-scrollbar-track {
+            background: #2d2d2d;
+        }
+
+        .dark-mode ::-webkit-scrollbar-thumb {
+            background: #666;
+        }
+
+        .dark-mode ::-webkit-scrollbar-thumb:hover {
+            background: #888;
         }
     </style>
 </head>
@@ -232,7 +322,7 @@
                     </button>
                     <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">
                         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <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>
+                            <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 33 0 116 0v6a3 3 0 01-3 3z"></path>
                         </svg>
                     </a>
                     <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">
@@ -257,21 +347,38 @@
         let currentStyle = 'normal';
         let currentController = null;
 
-        // Dark mode toggle
-        darkModeToggle.addEventListener('click', () => {
-            document.body.classList.toggle('dark-mode');
-            document.body.classList.toggle('light-mode');
-        });
+        // Language Icons Map
+        const languageIcons = {
+            javascript: '<svg class="language-icon" viewBox="0 0 24 24"><path fill="#F7DF1E" d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>',
+            python: '<svg class="language-icon" viewBox="0 0 24 24"><path fill="#3776AB" d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09-.33.22zM21.1 6.11l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01.21.03zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08-.33.23z"/></svg>',
+            html: '<svg class="language-icon" viewBox="0 0 24 24"><path fill="#E34F26" d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/></svg>',
+            css: '<svg class="language-icon" viewBox="0 0 24 24"><path fill="#1572B6" d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z"/></svg>'
+        };
 
-        styleSelect.addEventListener('change', (e) => {
-            currentStyle = e.target.value;
-        });
+        function formatCodeBlock(code, language) {
+            const langIcon = languageIcons[language.toLowerCase()] || '';
+            return `
+                <div class="code-block-wrapper">
+                    <div class="code-block-header">
+                        <div class="language-label">
+                            ${langIcon}
+                            <span>${language}</span>
+                        </div>
+                        <button class="copy-code-btn">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <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>
+                            </svg>
+                        </button>
+                    </div>
+                    <pre class="line-numbers"><code class="language-${language}">${code}</code></pre>
+                </div>`;
+        }
 
         function createUserMessage(text) {
             return `
                 <div class="message flex justify-end mb-4">
                     <div class="max-w-[80%]">
-                        <div class="bg-indigo-500 text-white rounded-lg p-4 shadow-sm">
+                        <div class="user-message">
                             <p class="text-lg">${text}</p>
                         </div>
                     </div>
@@ -286,12 +393,12 @@
                         <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Bot Avatar" class="bot-avatar">
                     </div>
                     <div class="max-w-[80%] mr-3">
-                        <div class="bot-message bg-white rounded-lg p-4 shadow-sm">
+                        <div class="bot-message">
                             <p id="${messageId}" class="text-gray-700"></p>
-                            <div class="message-actions">
+                            <div class="message-actions mt-3 flex flex-wrap gap-2">
                                 <button class="action-button copy-button" data-message-id="${messageId}">
                                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <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>
+                                        <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>
                                     </svg>
                                     نسخ
                                 </button>
@@ -314,27 +421,12 @@
             `;
         }
 
-        function formatCodeBlock(code, language) {
-            return `
-                <div class="code-block-wrapper">
-                    <div class="code-block-header">
-                        <span>${language}</span>
-                        <button class="copy-code-btn">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <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>
-                            </svg>
-                        </button>
-                    </div>
-                    <pre class="line-numbers"><code class="language-${language}">${code}</code></pre>
-                </div>`;
-        }
-
         async function typeText(elementId, text) {
             const element = document.getElementById(elementId);
             element.innerHTML = '';
 
-            // Check if text contains code blocks
-            const codeBlockRegex = /```(\w+)\n([\s\S]+?)```/g;
+            // Enhanced code block detection with multiple languages
+            const codeBlockRegex = /```(\w+)?\n([\s\S]+?)```/g;
             let lastIndex = 0;
             let match;
 
@@ -345,9 +437,10 @@
                     await addTextWithEditor(element, beforeText);
                 }
 
-                // Add code block
-                const [, language, code] = match;
-                element.innerHTML += formatCodeBlock(code.trim(), language);
+                // Add code block with proper language
+                const language = match[1] || 'text';
+                const code = match[2].trim();
+                element.innerHTML += formatCodeBlock(code, language);
                 lastIndex = match.index + match[0].length;
             }
 
@@ -357,7 +450,7 @@
                 await addTextWithEditor(element, remainingText);
             }
 
-            // Initialize Prism.js
+            // Initialize Prism.js for all code blocks
             Prism.highlightAllUnder(element);
         }
 
@@ -379,13 +472,13 @@
             element.appendChild(textWrapper);
             element.appendChild(editorWrapper);
 
-            // Initialize TinyMCE for this textarea
+            // Initialize TinyMCE
             tinymce.init({
                 selector: '.tinymce-editor:last',
                 directionality: 'rtl',
                 height: 400,
                 menubar: false,
-                plugins: 'lists link table',
+                 plugins: 'lists link table',
                 toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | link table',
                 content_style: 'body { font-family: "IBM Plex Sans Arabic", sans-serif; }',
                 setup: function(editor) {