bstein-dev-home/frontend/src/views/AiView.vue

<template>
  <div class="page">
    <section class="card hero glass">
      <div>
        <p class="eyebrow">Atlas AI</p>
        <h1>Chat</h1>
        <p class="lede">
          Lightweight LLM running on titan-24 (RTX 3080, 8GB). Anyone can chat without auth. Responses are single-turn per
          send; the client sends the on-page history with every request.
        </p>
        <div class="pill mono pill-live">Online</div>
      </div>
      <div class="hero-facts">
        <div class="fact">
          <span class="label mono">Model</span>
          <span class="value mono">phi3:mini (4k)</span>
        </div>
        <div class="fact">
          <span class="label mono">GPU</span>
          <span class="value mono">titan-24 · 3080 (8GB)</span>
        </div>
        <div class="fact">
          <span class="label mono">Endpoint</span>
          <span class="value mono">/api/ai/chat</span>
        </div>
      </div>
    </section>

    <section class="card chat-card">
      <div class="chat-window" ref="chatWindow">
        <div v-for="(msg, idx) in messages" :key="idx" :class="['chat-row', msg.role]">
          <div class="bubble">
            <div class="role mono">{{ msg.role === 'assistant' ? 'ai' : 'you' }}</div>
            <p>{{ msg.content }}</p>
            <div v-if="msg.latency_ms" class="meta mono">{{ msg.latency_ms }} ms</div>
          </div>
        </div>
        <div v-if="error" class="chat-row error">
          <div class="bubble">
            <div class="role mono">error</div>
            <p>{{ error }}</p>
          </div>
        </div>
      </div>
      <form class="chat-form" @submit.prevent="sendMessage">
        <textarea
          v-model="draft"
          placeholder="Ask anything about the lab or general topics..."
          rows="3"
          :disabled="sending"
        />
        <div class="actions">
          <span class="hint mono">Shift+Enter for newline</span>
          <button class="primary" type="submit" :disabled="sending || !draft.trim()">
            {{ sending ? "Sending..." : "Send" }}
          </button>
        </div>
      </form>
    </section>

    <section class="card info-card">
      <h2>Notes</h2>
      <ul>
        <li>Backend proxies requests to Ollama inside the cluster; no external calls are made.</li>
        <li>Short-term context: the chat history in this page is sent each turn. Refresh clears it.</li>
        <li>Future: swap in larger models on the Jetsons, add streaming and rate limits.</li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import { onUpdated, ref } from "vue";

const messages = ref([
  {
    role: "assistant",
    content: "Hi! I'm the Titan Lab assistant running on titan-24. How can I help?",
  },
]);
const draft = ref("");
const sending = ref(false);
const error = ref("");
const chatWindow = ref(null);

onUpdated(() => {
  if (chatWindow.value) {
    chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
  }
});

async function sendMessage() {
  if (!draft.value.trim() || sending.value) return;
  const text = draft.value.trim();
  draft.value = "";
  error.value = "";
  const userEntry = { role: "user", content: text };
  messages.value.push(userEntry);
  sending.value = true;

  try {
    const history = messages.value.map((m) => ({ role: m.role, content: m.content }));
    const resp = await fetch("/api/ai/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: text, history }),
    });
    const data = await resp.json();
    if (!resp.ok || data.error) {
      throw new Error(data.error || "Request failed");
    }
    messages.value.push({
      role: "assistant",
      content: data.reply || "(empty response)",
      latency_ms: data.latency_ms,
    });
  } catch (err) {
    error.value = err.message || "Unexpected error";
  } finally {
    sending.value = false;
  }
}
</script>

<style scoped>
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 22px 72px;
}

.hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

.hero-facts {
  display: grid;
  gap: 10px;
  align-content: start;
}

.fact {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.label {
  color: var(--text-muted);
  font-size: 12px;
}

.value {
  display: block;
  margin-top: 4px;
}

.pill-live {
  display: inline-block;
  margin-top: 8px;
}

.chat-card {
  margin-top: 18px;
}

.chat-window {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px;
  min-height: 320px;
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-row {
  display: flex;
}

.chat-row.user {
  justify-content: flex-end;
}

.bubble {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04);
}

.chat-row.assistant .bubble {
  background: rgba(80, 163, 255, 0.08);
}

.chat-row.user .bubble {
  background: rgba(255, 255, 255, 0.06);
}

.chat-row.error .bubble {
  background: rgba(255, 87, 87, 0.1);
  border-color: rgba(255, 87, 87, 0.5);
}

.role {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 6px;
}

.chat-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  padding: 10px 12px;
  resize: vertical;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hint {
  color: var(--text-muted);
}

button.primary {
  background: linear-gradient(90deg, #4f8bff, #7dd0ff);
  color: #0b1222;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.info-card ul {
  color: var(--text-muted);
  padding-left: 18px;
}
</style>