Add system prompt and new chat controls

index.html

@@ -20,10 +20,25 @@
       margin: auto;
     }
     header { padding: 14px 16px; border-bottom: 1px solid #e5e7eb; }
+    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
     h1 { margin: 0; font-size: 15px; font-weight: 600; }
     header p { margin: 4px 0 0; color: #6b7280; font-size: 12px; }
     header a { color: #4f46e5; }
     code { color: #374151; overflow-wrap: anywhere; }
+    details { margin-top: 10px; }
+    summary { color: #6b7280; font-size: 12px; cursor: pointer; }
+    summary:hover { color: #4f46e5; }
+    #system {
+      width: 100%;
+      min-height: 76px;
+      margin-top: 8px;
+      padding: 8px 10px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font: inherit;
+      font-size: 13px;
+      resize: vertical;
+    }
     #chat { padding: 20px 16px; overflow-y: auto; }
     .message {
       max-width: 80%;
@@ -62,10 +77,23 @@
       font: inherit;
       font-weight: 600;
       cursor: pointer;
-      align-self: end;
     }
     button:disabled { opacity: 0.5; cursor: wait; }
-    textarea:focus, button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
+    #new {
+      padding: 6px 12px;
+      color: #4f46e5;
+      background: transparent;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 500;
+    }
+    #new:hover { background: #f3f4f6; }
+    #send { align-self: end; }
+    textarea:focus, button:focus-visible, summary:focus-visible {
+      outline: 2px solid #6366f1;
+      outline-offset: 2px;
+    }
     #status { min-height: 32px; margin: 0; padding: 0 16px 12px; color: #6b7280; font-size: 12px; }
     #status.busy::before {
       content: "";
@@ -84,33 +112,42 @@
       :root { color-scheme: dark; }
       body { color: #f3f4f6; background: #111827; }
       header, form { border-color: #374151; }
-      header p, #status, .pending { color: #9ca3af; }
+      header p, #status, .pending, summary { color: #9ca3af; }
+      summary:hover { color: #818cf8; }
       code { color: #d1d5db; }
+      #system, textarea { color: #f3f4f6; background: #1f2937; border-color: #4b5563; }
       .assistant { background: #1f2937; }
       .error { color: #fecaca; background: #450a0a; }
-      textarea { color: #f3f4f6; background: #1f2937; border-color: #4b5563; }
+      #new { color: #a5b4fc; border-color: #4b5563; }
+      #new:hover { background: #1f2937; }
       #status.busy::before { border-color: #4b5563; border-top-color: #818cf8; }
     }
     @media (max-width: 620px) {
       .message { max-width: 92%; }
       form { grid-template-columns: 1fr; }
-      button { width: 100%; }
+      #send { width: 100%; }
     }
   </style>
 </head>
 <body>
   <main>
     <header>
-      <h1>Qwen3.8-27B Humanlike Chat</h1>
+      <div class="row">
+        <h1>Qwen3.8-27B Humanlike Chat</h1>
+        <button id="new" type="button">New chat</button>
+      </div>
       <p>
         Live demo of the hosted endpoint <code>https://api.lessthanthreeai.com/v1</code>.
         <a href="https://huggingface.co/LessThanThreeAI/Qwen3.8-27B-Humanlike-Chat-GGUF">Model card</a>
       </p>
+      <details>
+        <summary>System prompt</summary>
+        <textarea id="system" aria-label="System prompt"
+          placeholder="Optional. Sets identity, setting, or relationship for the whole conversation."></textarea>
+      </details>
     </header>
 
-    <div id="chat" aria-live="polite">
-      <div class="message assistant">Say something. The first reply can take a couple of minutes while the inference worker starts.</div>
-    </div>
+    <div id="chat" aria-live="polite"></div>
 
     <form id="form">
       <textarea id="prompt" required aria-label="Message" placeholder="Type a message"></textarea>
@@ -123,12 +160,22 @@
   <script>
     const API = "https://api.lessthanthreeai.com/v1";
     const MODEL = "qwen3.8-27b-humanlike-chat";
-    const messages = [];
+    const INTRO = "Say something. The first reply can take a couple of minutes while the inference worker starts.";
+
     const chat = document.querySelector("#chat");
     const form = document.querySelector("#form");
     const prompt = document.querySelector("#prompt");
     const send = document.querySelector("#send");
     const status = document.querySelector("#status");
+    const system = document.querySelector("#system");
+    const newChat = document.querySelector("#new");
+
+    let messages = [];
+
+    system.value = localStorage.getItem("systemPrompt") || "";
+    system.addEventListener("input", () => {
+      localStorage.setItem("systemPrompt", system.value);
+    });
 
     function addMessage(role, text) {
       const element = document.createElement("div");
@@ -139,6 +186,16 @@
       return element;
     }
 
+    function startSession(message) {
+      messages = [];
+      chat.replaceChildren();
+      addMessage("assistant", message);
+      status.textContent = "";
+      status.classList.remove("busy");
+      prompt.value = "";
+      prompt.focus();
+    }
+
     // Server-sent events arrive as "data: {...}" chunks. The endpoint may also send
     // ": status={...}" comment lines while a cold worker starts.
     function applyEvent(line, output) {
@@ -166,6 +223,8 @@
       }
     }
 
+    newChat.addEventListener("click", () => startSession(INTRO));
+
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
       const text = prompt.value.trim();
@@ -182,13 +241,18 @@
       output.classList.add("pending");
       output.textContent = "waiting for the first token";
 
+      const systemPrompt = system.value.trim();
+      const request = systemPrompt
+        ? [{ role: "system", content: systemPrompt }, ...messages]
+        : messages;
+
       try {
         const response = await fetch(`${API}/chat/completions`, {
           method: "POST",
           headers: { "content-type": "application/json" },
           body: JSON.stringify({
             model: MODEL,
-            messages,
+            messages: request,
             stream: true,
             max_tokens: 512,
           }),
@@ -230,6 +294,8 @@
         prompt.focus();
       }
     });
+
+    startSession(INTRO);
   </script>
 </body>
 </html>