Delete chat.html

chat.html

@@ -1,610 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar" dir="rtl">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Gemma Code Runner</title>
-<style>
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-
-  :root {
-    --bg: #0f0f0f;
-    --surface: #1a1a1a;
-    --surface2: #242424;
-    --border: #2e2e2e;
-    --accent: #7c6df0;
-    --accent2: #5b4fd4;
-    --text: #e8e8e8;
-    --text2: #888;
-    --green: #4ade80;
-    --red: #f87171;
-    --code-bg: #111;
-  }
-
-  body {
-    font-family: 'Segoe UI', system-ui, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  /* ── Header ── */
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 20px;
-    border-bottom: 1px solid var(--border);
-    background: var(--surface);
-    flex-shrink: 0;
-  }
-  .logo { display: flex; align-items: center; gap: 10px; }
-  .logo-dot {
-    width: 10px; height: 10px; border-radius: 50%;
-    background: var(--accent); box-shadow: 0 0 8px var(--accent);
-  }
-  .logo-text { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
-  .status {
-    font-size: 12px; color: var(--text2);
-    display: flex; align-items: center; gap: 6px;
-  }
-  .status-dot {
-    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
-  }
-
-  /* ── Main layout: chat | preview ── */
-  .main {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-  }
-
-  /* ── Chat panel ── */
-  .chat-panel {
-    display: flex;
-    flex-direction: column;
-    width: 45%;
-    min-width: 340px;
-    border-left: 1px solid var(--border);
-    background: var(--bg);
-  }
-
-  .messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 20px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    scroll-behavior: smooth;
-  }
-  .messages::-webkit-scrollbar { width: 4px; }
-  .messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-
-  .msg {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    max-width: 92%;
-  }
-  .msg.user { align-self: flex-start; }
-  .msg.assistant { align-self: flex-end; }
-
-  .msg-label {
-    font-size: 11px; color: var(--text2);
-    padding: 0 4px;
-  }
-  .msg.user .msg-label { text-align: right; }
-
-  .bubble {
-    padding: 10px 14px;
-    border-radius: 12px;
-    font-size: 14px;
-    line-height: 1.6;
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
-  .msg.user .bubble {
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 12px 12px 4px 12px;
-  }
-  .msg.assistant .bubble {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px 12px 12px 4px;
-  }
-
-  /* code blocks inside messages */
-  .bubble pre {
-    background: var(--code-bg);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 12px;
-    overflow-x: auto;
-    margin: 8px 0;
-    font-size: 12px;
-    font-family: 'Cascadia Code', 'Fira Code', monospace;
-    position: relative;
-  }
-  .run-btn {
-    position: absolute;
-    top: 8px;
-    left: 8px;
-    background: var(--accent);
-    color: #fff;
-    border: none;
-    border-radius: 6px;
-    padding: 3px 10px;
-    font-size: 11px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-  .run-btn:hover { background: var(--accent2); }
-
-  /* typing indicator */
-  .typing {
-    display: flex; align-items: center; gap: 5px;
-    padding: 10px 14px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    width: fit-content;
-  }
-  .typing span {
-    width: 6px; height: 6px; border-radius: 50%;
-    background: var(--text2);
-    animation: bounce 1.2s infinite;
-  }
-  .typing span:nth-child(2) { animation-delay: 0.2s; }
-  .typing span:nth-child(3) { animation-delay: 0.4s; }
-  @keyframes bounce {
-    0%, 60%, 100% { transform: translateY(0); }
-    30% { transform: translateY(-5px); }
-  }
-
-  /* ── Input area ── */
-  .input-area {
-    padding: 14px 16px;
-    border-top: 1px solid var(--border);
-    background: var(--surface);
-    display: flex;
-    gap: 10px;
-    align-items: flex-end;
-  }
-  textarea {
-    flex: 1;
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    color: var(--text);
-    font-size: 14px;
-    font-family: inherit;
-    padding: 10px 14px;
-    resize: none;
-    min-height: 42px;
-    max-height: 140px;
-    outline: none;
-    transition: border-color 0.15s;
-    direction: rtl;
-  }
-  textarea:focus { border-color: var(--accent); }
-  textarea::placeholder { color: var(--text2); }
-
-  .send-btn {
-    background: var(--accent);
-    border: none;
-    border-radius: 10px;
-    color: #fff;
-    width: 42px; height: 42px;
-    cursor: pointer;
-    display: flex; align-items: center; justify-content: center;
-    flex-shrink: 0;
-    transition: background 0.15s, transform 0.1s;
-  }
-  .send-btn:hover { background: var(--accent2); }
-  .send-btn:active { transform: scale(0.95); }
-  .send-btn svg { width: 18px; height: 18px; }
-
-  /* ── Preview panel ── */
-  .preview-panel {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background: var(--surface);
-  }
-
-  .preview-header {
-    padding: 10px 16px;
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-  }
-  .preview-title {
-    font-size: 13px; font-weight: 600; color: var(--text2);
-    display: flex; align-items: center; gap: 8px;
-  }
-  .preview-badge {
-    font-size: 10px;
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    padding: 2px 7px;
-    color: var(--text2);
-  }
-  .preview-actions { display: flex; gap: 8px; }
-  .icon-btn {
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 7px;
-    color: var(--text2);
-    padding: 5px 10px;
-    font-size: 12px;
-    cursor: pointer;
-    transition: color 0.15s, border-color 0.15s;
-  }
-  .icon-btn:hover { color: var(--text); border-color: var(--accent); }
-
-  #preview-frame {
-    flex: 1;
-    border: none;
-    background: #fff;
-  }
-
-  .empty-preview {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    color: var(--text2);
-  }
-  .empty-preview svg {
-    width: 48px; height: 48px; opacity: 0.3;
-  }
-  .empty-preview p { font-size: 14px; }
-
-  /* ── Toast ── */
-  #toast {
-    position: fixed;
-    bottom: 24px;
-    left: 50%;
-    transform: translateX(-50%) translateY(60px);
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    padding: 10px 18px;
-    font-size: 13px;
-    transition: transform 0.3s;
-    z-index: 100;
-  }
-  #toast.show { transform: translateX(-50%) translateY(0); }
-</style>
-</head>
-<body>
-
-<header>
-  <div class="logo">
-    <div class="logo-dot"></div>
-    <span class="logo-text">Gemma Code Runner</span>
-  </div>
-  <div class="status">
-    <div class="status-dot" id="status-dot"></div>
-    <span id="status-text">جاري الاتصال...</span>
-  </div>
-</header>
-
-<div class="main">
-
-  <!-- Preview panel (right/left depending on RTL) -->
-  <div class="preview-panel">
-    <div class="preview-header">
-      <div class="preview-title">
-        معاينة الكود
-        <span class="preview-badge" id="preview-badge">فارغ</span>
-      </div>
-      <div class="preview-actions">
-        <button class="icon-btn" onclick="clearPreview()">مسح</button>
-        <button class="icon-btn" onclick="saveProject()">حفظ</button>
-        <button class="icon-btn" onclick="openFullscreen()">تكبير ↗</button>
-      </div>
-    </div>
-
-    <div id="empty-state" class="empty-preview">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
-        <polyline points="16 18 22 12 16 6"></polyline>
-        <polyline points="8 6 2 12 8 18"></polyline>
-      </svg>
-      <p>اطلب من النموذج كتابة كود React أو HTML</p>
-      <p style="font-size:12px">سيظهر هنا تلقائياً</p>
-    </div>
-    <iframe id="preview-frame" style="display:none" sandbox="allow-scripts allow-same-origin"></iframe>
-  </div>
-
-  <!-- Chat panel -->
-  <div class="chat-panel">
-    <div class="messages" id="messages">
-      <div class="msg assistant">
-        <div class="msg-label">Gemma</div>
-        <div class="bubble">مرحباً! اطلب مني كتابة أي مكوّن React أو HTML وسيظهر في المعاينة مباشرةً.
-
-مثال: «اكتب مكوّن عداد بأزرار + و −»</div>
-      </div>
-    </div>
-
-    <div class="input-area">
-      <button class="send-btn" onclick="sendMessage()" title="إرسال">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="22" y1="2" x2="11" y2="13"></line>
-          <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-        </svg>
-      </button>
-      <textarea id="input" placeholder="اكتب طلبك هنا..." rows="1"
-        onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMessage()}"
-        oninput="autoResize(this)"></textarea>
-    </div>
-  </div>
-
-</div>
-
-<div id="toast"></div>
-
-<script>
-const LLAMA_URL = 'http://localhost:7860';
-const SANDBOX_URL = 'http://localhost:5173';
-let conversationHistory = [];
-let currentCode = '';
-
-// ── Check server status ──────────────────────────────────────
-async function checkStatus() {
-  try {
-    const r = await fetch(`${LLAMA_URL}/health`, { signal: AbortSignal.timeout(3000) });
-    if (r.ok) {
-      document.getElementById('status-dot').style.background = '#4ade80';
-      document.getElementById('status-text').textContent = 'متصل';
-    }
-  } catch {
-    document.getElementById('status-dot').style.background = '#f87171';
-    document.getElementById('status-text').textContent = 'غير متصل';
-    setTimeout(checkStatus, 5000);
-  }
-}
-checkStatus();
-
-// ── Auto-resize textarea ─────────────────────────────────────
-function autoResize(el) {
-  el.style.height = 'auto';
-  el.style.height = Math.min(el.scrollHeight, 140) + 'px';
-}
-
-// ── Extract code blocks from markdown ────────────────────────
-function extractCodeBlocks(text) {
-  const blocks = [];
-  const re = /```(jsx?|tsx?|html|javascript|typescript)?\n?([\s\S]*?)```/gi;
-  let m;
-  while ((m = re.exec(text)) !== null) {
-    blocks.push({ lang: (m[1] || 'js').toLowerCase(), code: m[2].trim() });
-  }
-  return blocks;
-}
-
-// ── Render code in preview iframe ────────────────────────────
-function runCodeInPreview(code, lang) {
-  currentCode = code;
-  const frame = document.getElementById('preview-frame');
-  const empty = document.getElementById('empty-state');
-  const badge = document.getElementById('preview-badge');
-
-  let html = '';
-
-  if (lang === 'html') {
-    html = code;
-  } else {
-    // React/JSX → load via CDN Babel + React
-    html = `<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<script src="https://unpkg.com/react@18/umd/react.development.js"><\/script>
-<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"><\/script>
-<script src="https://unpkg.com/@babel/standalone/babel.min.js"><\/script>
-<style>
-  body { font-family: system-ui, sans-serif; margin: 0; padding: 16px; }
-  * { box-sizing: border-box; }
-<\/style>
-</head>
-<body>
-<div id="root"></div>
-<script type="text/babel">
-${code}
-
-// Try to render — works if file exports default or defines App
-try {
-  const root = ReactDOM.createRoot(document.getElementById('root'));
-  const Comp = typeof App !== 'undefined' ? App
-              : typeof exports !== 'undefined' && exports.default ? exports.default
-              : () => <div style={{color:'red'}}>لم أجد مكوّناً باسم App</div>;
-  root.render(<Comp />);
-} catch(e) {
-  document.getElementById('root').innerHTML =
-    '<pre style="color:red;font-size:12px">' + e.message + '<\/pre>';
-}
-<\/script>
-</body>
-</html>`;
-  }
-
-  frame.style.display = 'block';
-  empty.style.display = 'none';
-  badge.textContent = lang.toUpperCase();
-  frame.srcdoc = html;
-  showToast('✅ الكود يعمل في المعاينة');
-}
-
-// ── Render message with code blocks ─────────────────────────
-function renderMessage(text) {
-  const div = document.createElement('div');
-
-  // Split by code fences
-  const parts = text.split(/(```(?:jsx?|tsx?|html|javascript|typescript)?\n?[\s\S]*?```)/gi);
-  parts.forEach(part => {
-    const m = part.match(/```(jsx?|tsx?|html|javascript|typescript)?\n?([\s\S]*?)```/i);
-    if (m) {
-      const lang = (m[1] || 'js').toLowerCase();
-      const code = m[2].trim();
-      const pre = document.createElement('pre');
-      pre.textContent = code;
-
-      const btn = document.createElement('button');
-      btn.className = 'run-btn';
-      btn.textContent = '▶ تشغيل';
-      btn.onclick = () => runCodeInPreview(code, lang);
-      pre.prepend(btn);
-      div.appendChild(pre);
-
-      // Auto-run the first code block
-      runCodeInPreview(code, lang);
-    } else if (part.trim()) {
-      const p = document.createElement('span');
-      p.textContent = part;
-      div.appendChild(p);
-    }
-  });
-
-  return div;
-}
-
-// ── Add message to chat ──────────────────────────────────────
-function addMessage(role, content, isHtml = false) {
-  const container = document.getElementById('messages');
-  const wrap = document.createElement('div');
-  wrap.className = `msg ${role}`;
-
-  const label = document.createElement('div');
-  label.className = 'msg-label';
-  label.textContent = role === 'user' ? 'أنت' : 'Gemma';
-
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble';
-
-  if (role === 'assistant' && !isHtml) {
-    bubble.appendChild(renderMessage(content));
-  } else {
-    bubble.textContent = content;
-  }
-
-  wrap.appendChild(label);
-  wrap.appendChild(bubble);
-  container.appendChild(wrap);
-  container.scrollTop = container.scrollHeight;
-  return bubble;
-}
-
-// ── Show typing indicator ────────────────────────────────────
-function showTyping() {
-  const container = document.getElementById('messages');
-  const wrap = document.createElement('div');
-  wrap.className = 'msg assistant';
-  wrap.id = 'typing-indicator';
-  wrap.innerHTML = `
-    <div class="msg-label">Gemma</div>
-    <div class="typing"><span></span><span></span><span></span></div>`;
-  container.appendChild(wrap);
-  container.scrollTop = container.scrollHeight;
-}
-function removeTyping() {
-  document.getElementById('typing-indicator')?.remove();
-}
-
-// ── Send message ─────────────────────────────────────────────
-async function sendMessage() {
-  const input = document.getElementById('input');
-  const text = input.value.trim();
-  if (!text) return;
-
-  input.value = '';
-  input.style.height = 'auto';
-
-  addMessage('user', text);
-  conversationHistory.push({ role: 'user', content: text });
-
-  showTyping();
-
-  try {
-    const response = await fetch(`${LLAMA_URL}/v1/chat/completions`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        model: 'gemma',
-        messages: [
-          {
-            role: 'system',
-            content: `أنت مساعد برمجي متخصص في React و JavaScript.
-عندما يطلب المستخدم كوداً، اكتبه دائماً داخل \`\`\`jsx أو \`\`\`html.
-اكتب مكوّنات React كاملة مع export default App.
-لا تشرح كثيراً، ركّز على الكود.`
-          },
-          ...conversationHistory
-        ],
-        stream: false,
-        temperature: 0.7,
-        max_tokens: 2048
-      })
-    });
-
-    const data = await response.json();
-    removeTyping();
-
-    const reply = data.choices?.[0]?.message?.content || 'لم أستلم رداً من النموذج.';
-    conversationHistory.push({ role: 'assistant', content: reply });
-    addMessage('assistant', reply);
-
-  } catch (err) {
-    removeTyping();
-    addMessage('assistant', `❌ خطأ في الاتصال: ${err.message}`);
-  }
-}
-
-// ── Preview controls ─────────────────────────────────────────
-function clearPreview() {
-  document.getElementById('preview-frame').style.display = 'none';
-  document.getElementById('empty-state').style.display = 'flex';
-  document.getElementById('preview-badge').textContent = 'فارغ';
-}
-
-function saveProject() {
-  if (!currentCode) { showToast('لا يوجد كود للحفظ'); return; }
-  fetch('/save-project', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ code: currentCode })
-  }).then(() => showToast('✅ محفوظ في /data/projects'))
-    .catch(() => showToast('❌ فشل الحفظ — تحقق من السيرفر'));
-}
-
-function openFullscreen() {
-  const frame = document.getElementById('preview-frame');
-  if (frame.srcdoc) {
-    const w = window.open('', '_blank');
-    w.document.write(frame.srcdoc);
-  }
-}
-
-// ── Toast ────────────────────────────────────────────────────
-function showToast(msg) {
-  const t = document.getElementById('toast');
-  t.textContent = msg;
-  t.classList.add('show');
-  setTimeout(() => t.classList.remove('show'), 2500);
-}
-</script>
-</body>
-</html>