Simplify chat composer and add optional repo context.

Remove the topic selector and separate repo field, put the send button inline with the message input, and persist repo via query param or saved chats for system prompts.

README.md

@@ -27,6 +27,7 @@ Frontend query params (browser-side):
 | --- | --- | --- |
 | `api`   | `http://localhost:8000/v1` | OpenAI-compatible base URL for the inference server. |
 | `model` | `Qwen/Qwen3-0.6B` | Model id sent in the chat completion request. |
+| `repo`  | _(empty)_ | Default Hugging Face repo id for new chats (e.g. `huggingface/transformers`). |
 
 Example:
 

app.py

@@ -164,6 +164,7 @@ async def put_chat(chat_id: str, request: Request, x_user_id: str = Header(...))
             "id": chat_id,
             "title": body.get("title", "Untitled"),
             "topic": body.get("topic"),
+            "repo": body.get("repo"),
             "updated_at": body.get("updated_at"),
         },
     )

index.html

@@ -146,56 +146,35 @@
         background: var(--bg);
       }
       .composer {
+        --composer-pad-x: 2px;
         border: 1px solid var(--border);
         border-radius: 22px;
         background: var(--composer-bg);
-        padding: 14px 16px 10px;
+        padding: 14px 16px;
         display: flex;
-        flex-direction: column;
-        gap: 8px;
+        align-items: flex-end;
+        gap: 10px;
         box-shadow: 0 1px 2px rgba(0,0,0,0.04);
       }
       .composer:focus-within { border-color: #c7c7cc; }
       #input {
-        width: 100%;
+        flex: 1;
+        min-width: 0;
         resize: none;
         font: inherit;
         color: inherit;
         background: transparent;
         border: 0;
         outline: none;
-        padding: 4px 2px;
+        padding: 4px var(--composer-pad-x);
         max-height: 240px;
         min-height: 28px;
         line-height: 1.45;
       }
       #input::placeholder { color: var(--muted); }
-      .toolbar {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-      .toolbar .spacer { flex: 1; }
-
-      .pill {
-        appearance: none;
-        background: transparent;
-        border: 0;
-        color: var(--pill);
-        font: inherit;
-        font-weight: 500;
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 10px;
-        margin-left: -8px;
-        border-radius: 999px;
-        cursor: pointer;
-      }
-      .pill:hover { background: rgba(37,99,235,0.08); }
-      .pill .chev { width: 14px; height: 14px; opacity: 0.85; }
 
       #send {
+        flex-shrink: 0;
         background: var(--send-bg);
         color: var(--send-fg);
         width: 32px;
@@ -211,37 +190,6 @@
       #send:disabled { opacity: 0.45; cursor: not-allowed; }
       #send svg { width: 18px; height: 18px; }
 
-      /* Topic dropdown menu */
-      .menu-wrap { position: relative; }
-      .menu {
-        position: absolute;
-        bottom: calc(100% + 6px);
-        left: 0;
-        min-width: 220px;
-        background: var(--composer-bg);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
-        padding: 6px;
-        display: none;
-        z-index: 10;
-      }
-      .menu.open { display: block; }
-      .menu button {
-        display: block;
-        width: 100%;
-        text-align: left;
-        background: transparent;
-        border: 0;
-        color: inherit;
-        font: inherit;
-        padding: 8px 10px;
-        border-radius: 8px;
-        cursor: pointer;
-      }
-      .menu button:hover { background: rgba(127,127,127,0.12); }
-      .menu button.selected { color: var(--pill); font-weight: 500; }
-
       /* ---- Tabs ---- */
       .tabs {
         display: flex;
@@ -548,22 +496,10 @@
 
         <form id="form">
           <div class="composer">
-            <textarea id="input" rows="1" placeholder="How can I help today?" autofocus></textarea>
-            <div class="toolbar">
-              <div class="menu-wrap">
-                <button type="button" class="pill" id="topic-btn" aria-haspopup="listbox" aria-expanded="false">
-                  <span id="topic-label">Continuous batching</span>
-                  <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
-                </button>
-                <div class="menu" id="topic-menu" role="listbox"></div>
-              </div>
-
-              <div class="spacer"></div>
-
-              <button id="send" type="submit" title="Send">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
-              </button>
-            </div>
+            <textarea id="input" rows="1" placeholder="Pass in a repository (https://github.com/huggingface/transformers)" autofocus></textarea>
+            <button id="send" type="submit" title="Send">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
+            </button>
           </div>
         </form>
       </main>
@@ -574,6 +510,7 @@
       const _params = new URLSearchParams(location.search);
       const BASE_URL = _params.get("api")   || "http://localhost:8000/v1";
       const MODEL    = _params.get("model") || "Qwen/Qwen3-0.6B";
+      const DEFAULT_REPO = _params.get("repo") || "";
 
       // Persistence: anonymous per-browser user id, used as X-User-Id against /api/chats.
       function getUserId() {
@@ -781,9 +718,6 @@
       const form = document.getElementById("form");
       const input = document.getElementById("input");
       const send = document.getElementById("send");
-      const topicBtn = document.getElementById("topic-btn");
-      const topicLabel = document.getElementById("topic-label");
-      const topicMenu = document.getElementById("topic-menu");
       const newChatBtn = document.getElementById("new-chat");
       const chatListEl = document.getElementById("chat-list");
 
@@ -796,8 +730,9 @@
         const chat = {
           id,
           title: "New chat",
-          topic: TOPICS[0].id,
+          topic: "general",
           model: MODEL,
+          repo: DEFAULT_REPO,
           history: [],
         };
         chats.unshift(chat);
@@ -821,15 +756,14 @@
             chat.history = Array.isArray(full.history) ? full.history : [];
             chat.topic   = full.topic || chat.topic;
             chat.title   = full.title || chat.title;
+            chat.repo    = full.repo ?? chat.repo ?? "";
           } else {
             chat.history = [];
           }
         }
-        topicLabel.textContent = (TOPICS.find((t) => t.id === chat.topic) || TOPICS[0]).label;
         log.innerHTML = "";
         for (const m of chat.history) renderMsg(m.role, m.content);
         renderChatList();
-        renderTopicMenu();
         input.focus();
       }
 
@@ -854,37 +788,14 @@
         newChat();
       });
 
-      // ---- Topic menu ----
-      function renderTopicMenu() {
-        const chat = getChat();
-        topicMenu.innerHTML = "";
-        TOPICS.forEach((t) => {
-          const b = document.createElement("button");
-          b.type = "button";
-          b.textContent = t.label;
-          if (chat && t.id === chat.topic) b.classList.add("selected");
-          b.addEventListener("click", () => {
-            const c = getChat();
-            if (c) {
-              c.topic = t.id;
-              topicLabel.textContent = t.label;
-              if (Array.isArray(c.history) && c.history.length > 0) scheduleSave(c);
-            }
-            closeMenu();
-            renderTopicMenu();
-          });
-          topicMenu.appendChild(b);
-        });
+      function systemContent(chat) {
+        let content = TOPIC_PROMPTS[chat.topic] || TOPIC_PROMPTS.general;
+        const repo = (chat.repo || "").trim();
+        if (repo) {
+          content += `\n\nThe user is working in the Hugging Face repository \`${repo}\`. Ground answers in that repo when relevant (paths, APIs, conventions).`;
+        }
+        return content;
       }
-      function openMenu()  { topicMenu.classList.add("open");    topicBtn.setAttribute("aria-expanded", "true"); }
-      function closeMenu() { topicMenu.classList.remove("open"); topicBtn.setAttribute("aria-expanded", "false"); }
-      topicBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        topicMenu.classList.contains("open") ? closeMenu() : openMenu();
-      });
-      document.addEventListener("click", (e) => {
-        if (!topicMenu.contains(e.target) && e.target !== topicBtn) closeMenu();
-      });
 
       // ---- Messages ----
       function renderMsg(role, text) {
@@ -927,7 +838,7 @@
         const botEl = renderMsg("bot", "");
 
         const messages = [
-          { role: "system", content: TOPIC_PROMPTS[chat.topic] },
+          { role: "system", content: systemContent(chat) },
           ...chat.history,
         ];
 
@@ -1338,7 +1249,8 @@
         chats = idx.map((e) => ({
           id: e.id,
           title: e.title || "Untitled",
-          topic: e.topic || TOPICS[0].id,
+          topic: e.topic || "general",
+          repo: e.repo || DEFAULT_REPO,
           history: null, // lazy-load on switch
         }));
         renderChatList();