|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Speedy Chat</title> |
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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; |
|
|
line-height: 1.6; |
|
|
letter-spacing: -0.01em; |
|
|
transition: background-color 0.3s, color 0.3s; |
|
|
} |
|
|
|
|
|
|
|
|
body.light-mode { |
|
|
background-color: #fafafa; |
|
|
color: #374151; |
|
|
} |
|
|
|
|
|
body.dark-mode { |
|
|
background-color: #1a1a1a; |
|
|
color: #e5e5e5; |
|
|
} |
|
|
|
|
|
.dark-mode header { |
|
|
background-color: #2d2d2d; |
|
|
border-color: #404040; |
|
|
} |
|
|
|
|
|
.dark-mode footer { |
|
|
background-color: #2d2d2d; |
|
|
border-color: #404040; |
|
|
} |
|
|
|
|
|
.dark-mode .message-input { |
|
|
background-color: #363636; |
|
|
border-color: #404040; |
|
|
color: #e5e5e5; |
|
|
} |
|
|
|
|
|
.dark-mode .style-select { |
|
|
background-color: #363636; |
|
|
border-color: #404040; |
|
|
color: #e5e5e5; |
|
|
} |
|
|
|
|
|
.dark-mode .bot-message { |
|
|
background-color: #363636; |
|
|
color: #e5e5e5; |
|
|
} |
|
|
|
|
|
.dark-mode .action-button { |
|
|
color: #e5e5e5; |
|
|
background-color: #404040; |
|
|
} |
|
|
|
|
|
|
|
|
pre[class*="language-"] { |
|
|
direction: ltr; |
|
|
text-align: left; |
|
|
border-radius: 0.5rem; |
|
|
margin: 1rem 0; |
|
|
padding: 1rem; |
|
|
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: 1.5rem 0; |
|
|
border-radius: 0.5rem; |
|
|
overflow: hidden; |
|
|
border: 1px solid #2d2d2d; |
|
|
} |
|
|
|
|
|
.code-block-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
background: #2d2d2d; |
|
|
color: white; |
|
|
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-wrapper { |
|
|
max-height: 500px; |
|
|
overflow-y: auto; |
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
.editor-wrapper { |
|
|
display: none; |
|
|
background: white; |
|
|
border-radius: 0.5rem; |
|
|
margin: 1rem 0; |
|
|
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.75rem; |
|
|
padding: 0.75rem; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
background: #f8f9fa; |
|
|
} |
|
|
|
|
|
.dark-mode .editor-toolbar { |
|
|
background: #363636; |
|
|
border-color: #404040; |
|
|
} |
|
|
|
|
|
|
|
|
.message-input { |
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.bot-avatar { |
|
|
width: 44px; |
|
|
height: 44px; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
border: 2px solid #6366f1; |
|
|
} |
|
|
|
|
|
.action-button { |
|
|
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.9rem; |
|
|
color: #6B7280; |
|
|
background-color: #F3F4F6; |
|
|
border: 1px solid #E5E7EB; |
|
|
} |
|
|
|
|
|
.action-button:hover { |
|
|
background-color: #E5E7EB; |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
.style-select { |
|
|
appearance: none; |
|
|
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"); |
|
|
background-repeat: no-repeat; |
|
|
background-position: left 0.5rem center; |
|
|
background-size: 1em; |
|
|
padding-left: 2.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
::-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> |
|
|
<body class="text-lg light-mode"> |
|
|
<header class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 z-50 shadow-sm"> |
|
|
<div class="flex items-center px-4 py-2"> |
|
|
<div class="flex items-center flex-1"> |
|
|
<span class="text-2xl font-bold text-indigo-600">Speedy</span> |
|
|
</div> |
|
|
<button id="darkModeToggle" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2"> |
|
|
<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="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> |
|
|
</svg> |
|
|
</button> |
|
|
<button id="clearChat" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full 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 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> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="pt-24 pb-24"> |
|
|
<div class="max-w-3xl mx-auto px-4"> |
|
|
<div class="welcome-text">ุณุจูุฏู ููุง ูู
ุณุงุนุฏุชู</div> |
|
|
<div id="messagesContainer" class="space-y-4"></div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 shadow-sm"> |
|
|
<div class="max-w-3xl mx-auto px-4 py-4"> |
|
|
<div class="relative"> |
|
|
<textarea |
|
|
id="messageInput" |
|
|
class="message-input w-full border border-gray-200 rounded-lg px-4 py-3 pl-32 pr-4 resize-none text-lg" |
|
|
rows="1" |
|
|
placeholder="ุงูุชุจ ุฑุณุงูุชู ููุง..." |
|
|
></textarea> |
|
|
<div class="absolute bottom-3 left-2 flex items-center space-x-2 rtl:space-x-reverse"> |
|
|
<button id="sendMessage" class="bg-indigo-500 hover:bg-indigo-600 text-white rounded-full p-2 transition-colors"> |
|
|
<svg class="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> |
|
|
</svg> |
|
|
</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 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"> |
|
|
<option value="short">โก ุฑุฏูุฏ ูุตูุฑุฉ</option> |
|
|
<option value="normal" selected>โฏ ุนุงุฏู</option> |
|
|
<option value="long">โ ุฑุฏูุฏ ู
ูุตูุฉ</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
const API_URL = 'https://nvgsxt9jqx730v-7777.proxy.runpod.net/proxy/8000/chat'; |
|
|
const messagesContainer = document.getElementById('messagesContainer'); |
|
|
const messageInput = document.getElementById('messageInput'); |
|
|
const sendButton = document.getElementById('sendMessage'); |
|
|
const clearButton = document.getElementById('clearChat'); |
|
|
const styleSelect = document.getElementById('styleSelect'); |
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
let chatHistory = []; |
|
|
let currentStyle = 'normal'; |
|
|
let currentController = null; |
|
|
|
|
|
// 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>' |
|
|
}; |
|
|
|
|
|
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="user-message"> |
|
|
<p class="text-lg">${text}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
function createBotMessage(text, messageId) { |
|
|
return ` |
|
|
<div class="message flex justify-start mb-4"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<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"> |
|
|
<p id="${messageId}" class="text-gray-700"></p> |
|
|
<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 2"></path> |
|
|
</svg> |
|
|
ูุณุฎ |
|
|
</button> |
|
|
<button class="action-button regenerate-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="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> |
|
|
</svg> |
|
|
ุฅุนุงุฏุฉ ุงูุชูููุฏ |
|
|
</button> |
|
|
<button class="action-button edit-text-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="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> |
|
|
</svg> |
|
|
ุชุญุฑูุฑ ูู
ุณุชูุฏ |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
async function typeText(elementId, text) { |
|
|
const element = document.getElementById(elementId); |
|
|
element.innerHTML = ''; |
|
|
|
|
|
// Enhanced code block detection with multiple languages |
|
|
const codeBlockRegex = /```(\w+)?\n([\s\S]+?)```/g; |
|
|
let lastIndex = 0; |
|
|
let match; |
|
|
|
|
|
while ((match = codeBlockRegex.exec(text)) !== null) { |
|
|
// Add text before code block |
|
|
const beforeText = text.slice(lastIndex, match.index); |
|
|
if (beforeText) { |
|
|
await addTextWithEditor(element, beforeText); |
|
|
} |
|
|
|
|
|
// 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; |
|
|
} |
|
|
|
|
|
// Add remaining text |
|
|
const remainingText = text.slice(lastIndex); |
|
|
if (remainingText) { |
|
|
await addTextWithEditor(element, remainingText); |
|
|
} |
|
|
|
|
|
// Initialize Prism.js for all code blocks |
|
|
Prism.highlightAllUnder(element); |
|
|
} |
|
|
|
|
|
async function addTextWithEditor(element, text) { |
|
|
const textWrapper = document.createElement('div'); |
|
|
textWrapper.className = 'long-text-wrapper'; |
|
|
textWrapper.innerHTML = text; |
|
|
|
|
|
const editorWrapper = document.createElement('div'); |
|
|
editorWrapper.className = 'editor-wrapper'; |
|
|
editorWrapper.innerHTML = ` |
|
|
<div class="editor-toolbar"> |
|
|
<button class="save-btn action-button">ุญูุธ</button> |
|
|
<button class="cancel-btn action-button">ุฅูุบุงุก</button> |
|
|
</div> |
|
|
<textarea class="tinymce-editor"></textarea> |
|
|
`; |
|
|
|
|
|
element.appendChild(textWrapper); |
|
|
element.appendChild(editorWrapper); |
|
|
|
|
|
// Initialize TinyMCE |
|
|
tinymce.init({ |
|
|
selector: '.tinymce-editor:last', |
|
|
directionality: 'rtl', |
|
|
height: 400, |
|
|
menubar: false, |
|
|
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) { |
|
|
editor.on('init', function() { |
|
|
editor.setContent(text); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
async function sendMessage() { |
|
|
const message = messageInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
if (currentController) { |
|
|
currentController.abort(); |
|
|
currentController = null; |
|
|
toggleSendButton(false); |
|
|
return; |
|
|
} |
|
|
|
|
|
messageInput.value = ''; |
|
|
adjustTextareaHeight(); |
|
|
|
|
|
const messageId = 'msg-' + Date.now(); |
|
|
let actualMessage = message; |
|
|
|
|
|
if (currentStyle === 'short') { |
|
|
actualMessage = 'ุงุนุทูู ุฑุฏ ุจุงุฎุชุตุงุฑ ูุณุฑุนุฉ: ' + message; |
|
|
} else if (currentStyle === 'long') { |
|
|
actualMessage = 'ุงุนุทูู ุฑุฏ ู
ูุตู ูู
ูุณุน: ' + message; |
|
|
} |
|
|
|
|
|
messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message)); |
|
|
messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId)); |
|
|
scrollToBottom(); |
|
|
|
|
|
try { |
|
|
currentController = new AbortController(); |
|
|
toggleSendButton(true); |
|
|
|
|
|
const response = await fetch(API_URL, { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ |
|
|
message: actualMessage, |
|
|
history: chatHistory |
|
|
}), |
|
|
signal: currentController.signal |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
await typeText(messageId, data.response); |
|
|
|
|
|
chatHistory.push({ |
|
|
human: actualMessage, |
|
|
assistant: data.response |
|
|
}); |
|
|
} catch (error) { |
|
|
if (error.name === 'AbortError') { |
|
|
document.getElementById(messageId).textContent = 'ุชู
ุฅููุงู ุงูุชูููุฏ.'; |
|
|
} else { |
|
|
document.getElementById(messageId).textContent = 'ุนุฐุฑุงูุ ุญุฏุซ ุฎุทุฃ ูู ุงูู
ุนุงูุฌุฉ.'; |
|
|
} |
|
|
} finally { |
|
|
currentController = null; |
|
|
toggleSendButton(false); |
|
|
} |
|
|
scrollToBottom(); |
|
|
} |
|
|
|
|
|
function toggleSendButton(isGenerating) { |
|
|
const sendButton = document.getElementById('sendMessage'); |
|
|
if (isGenerating) { |
|
|
sendButton.classList.add('stop-generation'); |
|
|
sendButton.innerHTML = ` |
|
|
<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="M6 18L18 6M6 6l12 12"></path> |
|
|
</svg> |
|
|
`; |
|
|
} else { |
|
|
sendButton.classList.remove('stop-generation'); |
|
|
sendButton.innerHTML = ` |
|
|
<svg class="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> |
|
|
</svg> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
function adjustTextareaHeight() { |
|
|
messageInput.style.height = 'auto'; |
|
|
messageInput.style.height = messageInput.scrollHeight + 'px'; |
|
|
} |
|
|
|
|
|
function scrollToBottom() { |
|
|
window.scrollTo({ |
|
|
top: document.documentElement.scrollHeight, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
|
|
|
// Event Listeners |
|
|
document.addEventListener('click', async (e) => { |
|
|
if (e.target.closest('.copy-code-btn')) { |
|
|
const codeBlock = e.target.closest('.code-block-wrapper').querySelector('code'); |
|
|
await navigator.clipboard.writeText(codeBlock.textContent); |
|
|
const btn = e.target.closest('.copy-code-btn'); |
|
|
btn.innerHTML = 'ุชู
ุงููุณุฎ!'; |
|
|
setTimeout(() => { |
|
|
btn.innerHTML = `<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>`; |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
if (e.target.closest('.copy-button')) { |
|
|
const messageId = e.target.closest('.copy-button').dataset.messageId; |
|
|
const text = document.getElementById(messageId).textContent; |
|
|
await navigator.clipboard.writeText(text); |
|
|
const btn = e.target.closest('.copy-button'); |
|
|
btn.textContent = 'ุชู
ุงููุณุฎ!'; |
|
|
setTimeout(() => { |
|
|
btn.innerHTML = ` |
|
|
<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> |
|
|
ูุณุฎ |
|
|
`; |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
if (e.target.closest('.edit-text-btn')) { |
|
|
const messageWrapper = e.target.closest('.bot-message'); |
|
|
const textWrapper = messageWrapper.querySelector('.long-text-wrapper'); |
|
|
const editorWrapper = messageWrapper.querySelector('.editor-wrapper'); |
|
|
|
|
|
if (textWrapper && editorWrapper) { |
|
|
textWrapper.style.display = 'none'; |
|
|
editorWrapper.style.display = 'block'; |
|
|
} |
|
|
} |
|
|
|
|
|
if (e.target.closest('.save-btn')) { |
|
|
const messageWrapper = e.target.closest('.bot-message'); |
|
|
const textWrapper = messageWrapper.querySelector('.long-text-wrapper'); |
|
|
const editorWrapper = messageWrapper.querySelector('.editor-wrapper'); |
|
|
const editor = tinymce.get(editorWrapper.querySelector('.tinymce-editor').id); |
|
|
|
|
|
if (textWrapper && editor) { |
|
|
textWrapper.innerHTML = editor.getContent(); |
|
|
textWrapper.style.display = 'block'; |
|
|
editorWrapper.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
if (e.target.closest('.cancel-btn')) { |
|
|
const messageWrapper = e.target.closest('.bot-message'); |
|
|
const textWrapper = messageWrapper.querySelector('.long-text-wrapper'); |
|
|
const editorWrapper = messageWrapper.querySelector('.editor-wrapper'); |
|
|
|
|
|
if (textWrapper && editorWrapper) { |
|
|
textWrapper.style.display = 'block'; |
|
|
editorWrapper.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
if (e.target.closest('.regenerate-button')) { |
|
|
if (chatHistory.length > 0) { |
|
|
const lastMessage = chatHistory[chatHistory.length - 1].human; |
|
|
messageInput.value = lastMessage; |
|
|
sendMessage(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
sendButton.addEventListener('click', sendMessage); |
|
|
messageInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
messageInput.addEventListener('input', adjustTextareaHeight); |
|
|
clearButton.addEventListener('click', () => { |
|
|
messagesContainer.innerHTML = ''; |
|
|
chatHistory = []; |
|
|
}); |
|
|
|
|
|
// Initial welcome message |
|
|
const initialMessageId = 'msg-initial'; |
|
|
messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId)); |
|
|
typeText(initialMessageId, 'ู
ุฑุญุจุงู! ููู ูู
ูููู ู
ุณุงุนุฏุชู ุงูููู
ุ'); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
