Spaces:

Semnykcz
/

Qwen3

Paused

App Files Files Community

Semnykcz commited on Aug 22

Commit

646a901

verified ·

1 Parent(s): df5b56f

Delete app

Browse files

Files changed (3) hide show

app/index.html +0 -156
app/script.js +0 -345
app/styles.css +0 -461

app/index.html DELETED Viewed

@@ -1,156 +0,0 @@
-<!doctype html>
-<html lang="en" class="h-full scroll-smooth">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>Minimal AI Chat — Tailwind</title>
-    <!-- Tailwind Play CDN (compatible with Tailwind v3/v4 classes) -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="styles.css">
-    <!-- Prism.js for syntax highlighting -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
-  </head>
-  <body class="min-h-dvh bg-neutral-50 text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100">
-    <!-- App Shell -->
-    <div class="grid grid-rows-[auto,1fr,auto] min-h-dvh">
-      <!-- Header -->
-      <header class="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-neutral-900/60 bg-white/90 dark:bg-neutral-90/90 border-b border-neutral-200/70 dark:border-neutral-800/70">
-        <div class="mx-auto max-w-3xl px-4 sm:px-6 pt-safe">
-          <div class="flex items-center justify-between pb-3 gap-3">
-            <div class="flex items-center gap-3 min-w-0">
-              <div class="size-7 rounded-xl grid place-items-center bg-neutral-900 text-white dark:bg-white dark:text-neutral-900 shadow-soft">
-                <!-- Dot logo -->
-                <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="7"/></svg>
-              </div>
-              <div class="truncate">
-                <h1 class="text-sm font-medium tracking-tight text-neutral-900 dark:text-neutral-100">Minimal AI Chat</h1>
-                <p class="text-xs text-neutral-500 dark:text-neutral-400 truncate">OriginUI‑inspired · Light / Dark</p>
-              </div>
-            </div>
-            <div class="flex items-center gap-2">
-              <!-- New chat -->
-              <button id="newChatBtn" class="hidden sm:inline-flex items-center gap-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-xs font-medium shadow-soft hover:bg-neutral-50 dark:hover:bg-neutral-800 transition" aria-label="New chat">
-                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
-                New
-              </button>
-              <!-- Theme toggle -->
-              <button id="themeToggle" class="inline-flex items-center justify-center rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 size-9 shadow-soft hover:bg-neutral-50 dark:hover:bg-neutral-800 transition" aria-label="Toggle theme">
-                <svg id="iconSun" class="size-4 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
-                <svg id="iconMoon" class="size-4 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <!-- Messages -->
-      <main id="scrollArea" class="no-scrollbar overflow-y-auto">
-        <div class="mx-auto max-w-3xl w-full px-4 sm:px-6 py-4 sm:py-6 pb-40">
-          <!-- Tip / examples card -->
-          <section class="mb-4 sm:mb-6">
-            <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 backdrop-blur p-4 sm:p-5 shadow-soft">
-              <div class="flex items-start gap-3">
-                <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 dark:bg-neutral-800">
-                  <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
-                </div>
-                <div class="text-sm leading-6 text-neutral-700 dark:text-neutral-300">
-                  <p class="font-medium text-neutral-900 dark:text-neutral-100">Try prompts</p>
-                  <ul class="mt-1 list-disc pl-5 space-y-1">
-                    <li>"Summarize this text in 3 bullet points."</li>
-                    <li>"Explain quantum tunneling like I'm 12."</li>
-                    <li>"Draft a polite email declining a meeting."</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </section>
-          <div id="messages" class="space-y-3 sm:space-y-4">
-            <!-- Assistant message (sample) -->
-            <article class="group">
-              <div class="flex items-start gap-3">
-                <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
-                  <!-- Bot icon -->
-                  <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="8" width="18" height="10" rx="2"/><path d="M8 8V6a4 4 0 1 1 8 0v2"/><circle cx="8" cy="13" r="1"/><circle cx="16" cy="13" r="1"/></svg>
-                </div>
-                <div class="max-w-[80ch] w-full">
-                  <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft">
-                    <p class="text-sm leading-7">Hi! I’m your AI assistant. Ask me anything — your messages will appear here, and I’ll reply below. This UI is built with Tailwind and inspired by OriginUI’s clean, minimal aesthetic.</p>
-                  </div>
-                </div>
-              </div>
-            </article>
-            <!-- User message (sample) -->
-            <article class="group">
-              <div class="flex items-start gap-3 justify-end">
-                <div class="max-w-[80ch] w-full">
-                  <div class="rounded-2xl border border-neutral-200 bg-neutral-900 text-neutral-50 dark:bg-white dark:text-neutral-900 p-4 shadow-soft">
-                    <p class="text-sm leading-7">Give me a short productivity tip.</p>
-                  </div>
-                </div>
-              </div>
-            </article>
-            <!-- Assistant message (sample) -->
-            <article class="group">
-              <div class="flex items-start gap-3">
-                <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
-                  <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="8" width="18" height="10" rx="2"/><path d="M8 8V6a4 4 0 1 1 8 0v2"/><circle cx="8" cy="13" r="1"/><circle cx="16" cy="13" r="1"/></svg>
-                </div>
-                <div class="max-w-[80ch] w-full">
-                  <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft">
-                    <ul class="text-sm leading-7 list-disc pl-5 space-y-1">
-                      <li>Time‑box tasks to 25 minutes.</li>
-                      <li>Mute non‑urgent notifications.</li>
-                      <li>Write the next step before you stop.</li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </article>
-          </div>
-        </div>
-      </main>
-      <!-- Composer -->
-      <footer class="fixed bottom-0 inset-x-0 z-40">
-        <div class="pointer-events-none bg-gradient-to-t from-white/95 to-white/0 dark:from-neutral-950/95 dark:to-neutral-950/0">
-          <div class="mx-auto max-w-3xl px-4 sm:px-6 pb-safe">
-            <form id="composer" class="pointer-events-auto" autocomplete="off">
-              <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-soft p-2 sm:p-2.5">
-                <div class="flex items-end gap-2">
-                  <button type="button" id="attachBtn" class="shrink-0 grid place-items-center size-9 rounded-xl border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition" aria-label="Attach">
-                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.44 11.05l-8.49 8.49a5 5 0 1 1-7.07-7.07l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95l-9.19 9.19a2 2 0 1 1-2.83-2.83l8.49-8.49"/></svg>
-                  </button>
-                  <textarea id="input" rows="1" placeholder="Message…" class="flex-1 resize-none bg-transparent focus:outline-none placeholder:text-neutral-400 text-sm leading-6 max-h-40 p-2"></textarea>
-                  <div class="flex items-center gap-2">
-                    <button type="button" id="queueBtn" class="hidden sm:grid place-items-center size-9 rounded-xl border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition" aria-label="Add to queue">
-                      <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M3 12h12M3 18h6"/></svg>
-                    </button>
-                    <button type="submit" class="grid place-items-center size-9 rounded-xl bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 transition" aria-label="Send">
-                      <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </form>
-            <p class="pointer-events-auto mt-2 text-[11px] text-neutral-500 dark:text-neutral-400 text-center">Tip: Odeslat Cmd/Ctrl + Enter</p>
-          </div>
-        </div>
-      </footer>
-    </div>
-    <script src="script.js"></script>
-  </body>
-</html>

app/script.js DELETED Viewed

@@ -1,345 +0,0 @@
-// ---- Theme: auto + toggle ----
-const root = document.documentElement;
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-const savedTheme = localStorage.getItem('theme');
-const isDark = () => root.classList.contains('dark');
-function applyTheme(theme) {
-  if (theme === 'dark' || (theme === 'auto' && prefersDark.matches)) {
-    root.classList.add('dark');
-  } else {
-    root.classList.remove('dark');
-  }
-  updateThemeIcon();
-}
-function updateThemeIcon () {
-  const sun = document.getElementById('iconSun');
-  const moon = document.getElementById('iconMoon');
-  if (isDark()) { moon.classList.add('hidden'); sun.classList.remove('hidden'); }
-  else { sun.classList.add('hidden'); moon.classList.remove('hidden'); }
-}
-applyTheme(savedTheme || 'auto');
-prefersDark.addEventListener('change', () => applyTheme(localStorage.getItem('theme') || 'auto'));
-document.getElementById('themeToggle').addEventListener('click', () => {
-  const next = isDark() ? 'light' : 'dark';
-  localStorage.setItem('theme', next);
-  applyTheme(next);
-});
-// ---- Chat wiring ----
-const form = document.getElementById('composer');
-const input = document.getElementById('input');
-const messages = document.getElementById('messages');
-const scrollArea = document.getElementById('scrollArea');
-const history = []; // {role, content}
-function autoResizeTextarea(el) {
-  el.style.height = 'auto';
-  const h = Math.min(el.scrollHeight, 320);
-  el.style.height = h + 'px';
-}
-input.addEventListener('input', () => autoResizeTextarea(input));
-input.addEventListener('keydown', (e) => {
-  if (e.key === 'Enter' && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
-    setTimeout(() => autoResizeTextarea(input), 0);
-  }
-});
-autoResizeTextarea(input);
-function scrollToBottom() {
-  requestAnimationFrame(() => scrollArea.scrollTo({ top: scrollArea.scrollHeight, behavior: 'smooth' }));
-}
-function processCodeBlocks(content) {
-  // Replace markdown code blocks with Prism-compatible HTML
-  return content.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, language, code) => {
-    const lang = language || 'javascript';
-    const escapedCode = code.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    return `<pre><code class="language-${lang}">${escapedCode}</code></pre>`;
-  }).replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
-}
-function bubble({ role, html }) {
-  const wrapper = document.createElement('article');
-  wrapper.className = 'group';
-  // Process code blocks for syntax highlighting in assistant messages
-  if (role === 'assistant') {
-    html = processCodeBlocks(html);
-  }
-  if (role === 'user') {
-    wrapper.innerHTML = `
-      <div class="flex items-start gap-3 justify-end">
-        <div class="max-w-[80ch] w-full">
-          <div class="rounded-2xl border border-neutral-200 bg-neutral-900 text-neutral-50 dark:bg-white dark:text-neutral-900 p-4 shadow-soft">
-            <div class="text-sm leading-7">${html}</div>
-          </div>
-        </div>
-      </div>
-    `;
-  } else {
-    wrapper.innerHTML = `
-      <div class="flex items-start gap-3">
-        <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
-          <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="8" width="18" height="10" rx="2"/><path d="M8 8V6a4 4 0 1 1 8 0v2"/><circle cx="8" cy="13" r="1"/><circle cx="16" cy="13" r="1"/></svg>
-        </div>
-        <div class="max-w-[80ch] w-full">
-          <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft">
-            <div class="text-sm leading-7">${html}</div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  // Apply syntax highlighting to new code blocks
-  if (role === 'assistant' && typeof Prism !== 'undefined') {
-    setTimeout(() => Prism.highlightAllUnder(wrapper), 0);
-  }
-  return wrapper;
-}
-function assistantLiveBubble() {
-  const wrapper = document.createElement('article');
-  wrapper.className = 'group';
-  wrapper.innerHTML = `
-    <div class="flex items-start gap-3">
-      <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
-        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="8" width="18" height="10" rx="2"/><path d="M8 8V6a4 4 0 1 1 8 0v2"/><circle cx="8" cy="13" r="1"/><circle cx="16" cy="13" r="1"/></svg>
-      </div>
-      <div class="max-w-[80ch] w-full">
-        <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft">
-          <div class="text-[11px] leading-6 text-neutral-500 dark:text-neutral-400 mb-1" id="status">Thinking…</div>
-          <div class="text-sm leading-7" id="content"></div>
-        </div>
-      </div>
-    </div>
-  `;
-  const statusEl = wrapper.querySelector('#status');
-  const contentEl = wrapper.querySelector('#content');
-  return {
-    node: wrapper,
-    setStatus: (text) => { statusEl.textContent = text; },
-    appendText: (t) => { contentEl.textContent += t; },
-    setHTML: (h) => { contentEl.innerHTML = h; },
-  };
-}
-async function sendToBackend(history) {
-  // Try streaming first
-  try {
-    const res = await fetch('/v1/chat/completions', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        model: undefined, // server default
-        messages: history,
-        temperature: 0.2,
-        top_p: 0.95,
-        max_tokens: 512,
-        stream: true,
-      })
-    });
-    const ct = res.headers.get('content-type') || '';
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    if (ct.includes('text/event-stream')) {
-      return streamSSE(res.body);
-    }
-    // Fallback: non-stream JSON
-    const data = await res.json();
-    async function* single() { yield { type: 'final', text: data.choices?.[0]?.message?.content || '' }; }
-    return single();
-  } catch (err) {
-    console.error(err);
-    async function* errGen() { throw err; }
-    return errGen();
-  }
-}
-async function* streamSSE(readable) {
-  const reader = readable.getReader();
-  const decoder = new TextDecoder();
-  let buffer = '';
-  while (true) {
-    const { value, done } = await reader.read();
-    if (done) break;
-    buffer += decoder.decode(value, { stream: true });
-    const parts = buffer.split('\n\n');
-    buffer = parts.pop() || '';
-    for (const part of parts) {
-      const lines = part.split('\n');
-      for (const line of lines) {
-        if (!line.startsWith('data:')) continue;
-        const data = line.slice(5).trim();
-        if (data === '[DONE]') { yield { type: 'done' }; return; }
-        try {
-          const json = JSON.parse(data);
-          const choice = json.choices?.[0];
-          const piece = choice?.delta?.content;
-          const finish = choice?.finish_reason;
-          if (piece) yield { type: 'token', text: piece };
-          if (finish === 'stop') yield { type: 'final' };
-        } catch (e) {
-          // ignore parse errors for keep-alives
-        }
-      }
-    }
-  }
-}
-let typingIndicatorElement = null;
-let currentAbortController = null;
-let stopButton = null;
-function showTypingIndicator() {
-    if (typingIndicatorElement) return;
-    typingIndicatorElement = document.createElement('div');
-    typingIndicatorElement.className = 'typing-indicator';
-    typingIndicatorElement.innerHTML = `
-        <span>AI píše</span>
-        <div class="typing-dots">
-            <div class="typing-dot"></div>
-            <div class="typing-dot"></div>
-            <div class="typing-dot"></div>
-        </div>
-    `;
-    messages.appendChild(typingIndicatorElement);
-    scrollToBottom();
-}
-function hideTypingIndicator() {
-    if (typingIndicatorElement) {
-        typingIndicatorElement.remove();
-        typingIndicatorElement = null;
-    }
-}
-function showStopButton() {
-    if (stopButton) return;
-    stopButton = document.createElement('button');
-    stopButton.className = 'stop-generation-btn';
-    stopButton.innerHTML = `
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="6" y="6" width="12" height="12" rx="2"/>
-        </svg>
-        Zastavit
-    `;
-    stopButton.onclick = () => {
-        if (currentAbortController) {
-            currentAbortController.abort();
-            hideStopButton();
-            hideTypingIndicator();
-        }
-    };
-    // Insert stop button after the input container
-    const inputContainer = document.querySelector('.input-container') || document.querySelector('form');
-    if (inputContainer && inputContainer.parentNode) {
-        inputContainer.parentNode.insertBefore(stopButton, inputContainer.nextSibling);
-    }
-}
-function hideStopButton() {
-    if (stopButton) {
-        stopButton.remove();
-        stopButton = null;
-    }
-}
-form.addEventListener('submit', async (e) => {
-  e.preventDefault();
-  const text = input.value.trim();
-  if (!text) return;
-  // Remove example messages on first user interaction
-  if (history.length === 0) {
-    const items = [...messages.querySelectorAll('article')];
-    items.slice(0, 3).forEach(n => n.remove());
-  }
-  // User bubble
-  messages.appendChild(bubble({ role: 'user', html: text.replace(/</g,'<') }));
-  scrollToBottom();
-  // Push to history and clear input
-  history.push({ role: 'user', content: text });
-  input.value = '';
-  autoResizeTextarea(input);
-  // Show typing indicator and stop button
-  showTypingIndicator();
-  showStopButton();
-  // Create abort controller for this request
-  currentAbortController = new AbortController();
-  // Assistant live bubble
-  const asst = assistantLiveBubble();
-  messages.appendChild(asst.node);
-  scrollToBottom();
-  try {
-    const stream = await sendToBackend(history);
-    let gotFirst = false;
-    let collected = '';
-    for await (const evt of stream) {
-      if (evt.type === 'token') {
-        if (!gotFirst) {
-          hideTypingIndicator();
-          asst.setStatus('Writing…');
-          gotFirst = true;
-        }
-        asst.appendText(evt.text);
-        collected += evt.text;
-        scrollToBottom();
-      } else if (evt.type === 'final') {
-        // finalize
-      } else if (evt.type === 'done') {
-        break;
-      }
-    }
-    if (collected) history.push({ role: 'assistant', content: collected });
-  } catch (err) {
-    console.error('Chat error', err);
-    hideTypingIndicator();
-    if (err.name === 'AbortError') {
-      asst.setStatus('Stopped');
-      asst.setHTML('<span class="text-yellow-600 dark:text-yellow-400">Generation stopped by user.</span>');
-    } else {
-      asst.setStatus('Error');
-      asst.setHTML('<span class="text-red-600 dark:text-red-400">Unable to get response.</span>');
-    }
-  } finally {
-    // Clean up
-    hideStopButton();
-    currentAbortController = null;
-  }
-});
-// Keyboard shortcut: Cmd/Ctrl+Enter to send
-input.addEventListener('keydown', (e) => {
-  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-    form.requestSubmit();
-  }
-});
-// New chat clears messages (keeps tips)
-document.getElementById('newChatBtn')?.addEventListener('click', () => {
-  const items = [...messages.querySelectorAll('article')];
-  items.slice(3).forEach(n => n.remove());
-  history.length = 0;
-  scrollArea.scrollTo({ top: 0, behavior: 'smooth' });
-});

app/styles.css DELETED Viewed

@@ -1,461 +0,0 @@
-/* Respect iOS notch / safe-area on mobile */
-.pb-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
-.pt-safe { padding-top: max(0.75rem, env(safe-area-inset-top)); }
-/* Hide scrollbar on WebKit (messages list looks cleaner) */
-.no-scrollbar::-webkit-scrollbar { display: none; }
-.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-/* Smooth textarea autoresize transitions */
-textarea { transition: height 120ms ease; }
-/* Mobile Optimizations */
-@media (max-width: 768px) {
-  /* Touch-friendly button sizing */
-  button, .btn {
-    min-height: 44px;
-    min-width: 44px;
-    padding: 12px 16px;
-  }
-  /* Improved text readability on mobile */
-  body {
-    font-size: 16px;
-    line-height: 1.5;
-  }
-  /* Better input field sizing */
-  input, textarea {
-    font-size: 16px; /* Prevents zoom on iOS */
-    padding: 12px;
-    border-radius: 8px;
-  }
-  /* Responsive container spacing */
-  .container {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-  /* Chat message optimizations */
-  .message {
-    margin-bottom: 12px;
-    padding: 12px;
-    max-width: 85%;
-  }
-  /* Improved scrolling on mobile */
-  .chat-container {
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-  }
-  pre {
-    font-size: 0.75rem;
-    padding: 0.75rem;
-    margin: 0.5rem 0;
-  }
-  .inline-code {
-    font-size: 0.8em;
-    padding: 0.1rem 0.25rem;
-  }
-}
-@media (max-width: 480px) {
-  /* Extra small screens */
-  .container {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-  .message {
-    max-width: 90%;
-    font-size: 14px;
-  }
-  /* Compact header on small screens */
-  .header {
-    padding: 8px 12px;
-  }
-  pre {
-    font-size: 0.7rem;
-    padding: 0.5rem;
-    margin: 0.375rem 0;
-    overflow-x: auto;
-  }
-  .inline-code {
-    font-size: 0.75em;
-    padding: 0.075rem 0.2rem;
-  }
-}
-/* Touch gesture improvements */
-.touch-action-manipulation {
-  touch-action: manipulation;
-}
-/* Prevent text selection on UI elements */
-.no-select {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-/* Smooth animations for mobile */
-@media (prefers-reduced-motion: no-preference) {
-  .animate-smooth {
-    transition: all 0.2s ease-in-out;
-  }
-}
-/* Code blocks and syntax highlighting */
-pre {
-  background: var(--code-bg) !important;
-  border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 0.75rem 0;
-  overflow-x: auto;
-  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-pre code {
-  background: none !important;
-  padding: 0 !important;
-  border: none !important;
-  border-radius: 0 !important;
-  font-size: inherit;
-}
-.inline-code {
-  background: var(--code-bg);
-  color: var(--code-text);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-  font-size: 0.875em;
-  border: 1px solid var(--border-color);
-}
-/* Override Prism theme colors for dark mode */
-[data-theme="dark"] .token.comment,
-[data-theme="dark"] .token.prolog,
-[data-theme="dark"] .token.doctype,
-[data-theme="dark"] .token.cdata {
-  color: #6a737d;
-}
-[data-theme="dark"] .token.punctuation {
-  color: #f8f8f2;
-}
-[data-theme="dark"] .token.property,
-[data-theme="dark"] .token.tag,
-[data-theme="dark"] .token.boolean,
-[data-theme="dark"] .token.number,
-[data-theme="dark"] .token.constant,
-[data-theme="dark"] .token.symbol,
-[data-theme="dark"] .token.deleted {
-  color: #ff79c6;
-}
-[data-theme="dark"] .token.selector,
-[data-theme="dark"] .token.attr-name,
-[data-theme="dark"] .token.string,
-[data-theme="dark"] .token.char,
-[data-theme="dark"] .token.builtin,
-[data-theme="dark"] .token.inserted {
-  color: #50fa7b;
-}
-[data-theme="dark"] .token.operator,
-[data-theme="dark"] .token.entity,
-[data-theme="dark"] .token.url,
-[data-theme="dark"] .language-css .token.string,
-[data-theme="dark"] .style .token.string {
-  color: #f8f8f2;
-}
-[data-theme="dark"] .token.atrule,
-[data-theme="dark"] .token.attr-value,
-[data-theme="dark"] .token.keyword {
-  color: #8be9fd;
-}
-[data-theme="dark"] .token.function,
-[data-theme="dark"] .token.class-name {
-  color: #ffb86c;
-}
-[data-theme="dark"] .token.regex,
-[data-theme="dark"] .token.important,
-[data-theme="dark"] .token.variable {
-  color: #bd93f9;
-}
-/* Typing indicator animation */
-.typing-indicator {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  margin: 0.5rem 0;
-  background: var(--input-bg);
-  border-radius: 1rem;
-  border: 1px solid var(--border-color);
-  max-width: fit-content;
-}
-.typing-indicator span {
-  color: var(--text-color);
-  margin-right: 0.5rem;
-  font-size: 0.9rem;
-}
-.typing-dots {
-  display: flex;
-  gap: 0.25rem;
-}
-.typing-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  background: var(--accent);
-  border-radius: 50%;
-  animation: typing-bounce 1.4s infinite ease-in-out;
-}
-.typing-dot:nth-child(1) {
-  animation-delay: -0.32s;
-}
-.typing-dot:nth-child(2) {
-  animation-delay: -0.16s;
-}
-@keyframes typing-bounce {
-  0%, 80%, 100% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-/* Stop generation button */
-.stop-generation-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  margin: 0.5rem auto;
-  background: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: var(--shadow);
-  max-width: fit-content;
-}
-.stop-generation-btn:hover {
-  background: #c82333;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
-}
-.stop-generation-btn:active {
-  transform: translateY(0);
-}
-.stop-generation-btn svg {
-  flex-shrink: 0;
-}
-/* Dark/Light Theme Variables */
-:root {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8f9fa;
-  --text-primary: #212529;
-  --text-secondary: #6c757d;
-  --border-color: #dee2e6;
-  --accent-color: #007bff;
-  --accent-hover: #0056b3;
-  --shadow: rgba(0, 0, 0, 0.1);
-  --code-bg: #f8f9fa;
-  --code-text: #212529;
-}
-[data-theme="dark"] {
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #2d2d2d;
-  --text-primary: #ffffff;
-  --text-secondary: #b0b0b0;
-  --border-color: #404040;
-  --accent-color: #4dabf7;
-  --accent-hover: #339af0;
-  --shadow: rgba(0, 0, 0, 0.3);
-  --code-bg: #282a36;
-  --code-text: #f8f8f2;
-}
-/* Apply theme variables */
-body {
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-.container {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-}
-.message {
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 4px var(--shadow);
-}
-button {
-  background-color: var(--accent-color);
-  color: white;
-  border: none;
-  transition: background-color 0.2s ease;
-}
-button:hover {
-  background-color: var(--accent-hover);
-}
-input, textarea {
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-}
-/* Theme Toggle Button */
-.theme-toggle {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background-color: var(--bg-secondary);
-  border: 2px solid var(--border-color);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  transition: all 0.3s ease;
-  z-index: 1000;
-  box-shadow: 0 4px 8px var(--shadow);
-}
-.theme-toggle:hover {
-  transform: scale(1.1);
-  box-shadow: 0 6px 12px var(--shadow);
-}
-@media (max-width: 768px) {
-  .theme-toggle {
-    top: 15px;
-    right: 15px;
-    width: 45px;
-    height: 45px;
-    font-size: 18px;
-  }
-}
-/* Mobile Optimizations */
-@media (max-width: 768px) {
-  /* Touch-friendly button sizing */
-  button, .btn {
-    min-height: 44px;
-    min-width: 44px;
-    padding: 12px 16px;
-  }
-  /* Improved text readability on mobile */
-  body {
-    font-size: 16px;
-    line-height: 1.5;
-  }
-  /* Better input field sizing */
-  input, textarea {
-    font-size: 16px; /* Prevents zoom on iOS */
-    padding: 12px;
-    border-radius: 8px;
-  }
-  /* Responsive container spacing */
-  .container {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-  /* Chat message optimizations */
-  .message {
-    margin-bottom: 12px;
-    padding: 12px;
-    max-width: 85%;
-  }
-  /* Improved scrolling on mobile */
-  .chat-container {
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-  }
-}
-@media (max-width: 480px) {
-  /* Extra small screens */
-  .container {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-  .message {
-    max-width: 90%;
-    font-size: 14px;
-  }
-  /* Compact header on small screens */
-  .header {
-    padding: 8px 12px;
-  }
-}
-/* Touch gesture improvements */
-.touch-action-manipulation {
-  touch-action: manipulation;
-}
-/* Prevent text selection on UI elements */
-.no-select {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-/* Smooth animations for mobile */
-@media (prefers-reduced-motion: no-preference) {
-  .animate-smooth {
-    transition: all 0.2s ease-in-out;
-  }
-}