diff --git a/public/chat.html b/public/chat.html
index 4ec5e70..8e93c49 100644
--- a/public/chat.html
+++ b/public/chat.html
@@ -11,7 +11,7 @@
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
-
+
@@ -46,7 +46,7 @@
diff --git a/public/css/style.css b/public/css/style.css
index 5acdf2b..29145a4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -424,7 +424,9 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.chat-header-actions { display: flex; align-items: center; }
.overflow-trigger { min-height: 38px; padding: 8px 12px; border-radius: 999px; font-size: .8rem; }
-.messages-wrap { min-height: 0; position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
+.messages-wrap { min-height: 0; position: relative; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); }
+.messages-wrap > .messages-panel { grid-row: 4; }
+.conversation-search-toggle { display: none; }
.conversation-search { padding: 8px max(16px, calc((100% - 940px) / 2)); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.conversation-search label { flex: 0 0 auto; color: var(--text-soft); font-size: .76rem; font-weight: 700; }
.conversation-search input { min-width: 0; width: min(280px, 100%); min-height: 34px; }
@@ -451,6 +453,7 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.msg.user { align-self: flex-end; padding: 10px 13px; color: var(--message-user-text); background: var(--message-user); border-radius: 17px 17px 5px 17px; }
.msg.bot, .msg.loading { width: fit-content; min-width: min(280px, 80%); align-self: flex-start; padding: 12px 14px; background: var(--message-bot); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.msg-header { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: .72rem; }
+.msg-web-badge { margin-left: 12px; color: var(--brand-strong); font-weight: 700; white-space: nowrap; }
.msg-content { min-width: 0; overflow-wrap: anywhere; }
.msg-content > :last-child { margin-bottom: 0; }
.msg-content pre { max-width: 100%; padding: 14px; overflow: auto; background: var(--canvas); border-radius: var(--radius-sm); }
@@ -506,6 +509,8 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.composer-hint { margin: 0; color: var(--text-muted); font-size: .72rem; }
.input-container { padding: 7px; display: grid; grid-template-columns: 44px 44px 44px minmax(0, 1fr) 44px 58px; grid-template-areas: "attach search reasoning message send stop"; gap: 7px; align-items: end; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-sm); }
.input-container:not(:has(#stopGeneration:not([hidden]))) { grid-template-columns: 44px 44px 44px minmax(0, 1fr) 44px; grid-template-areas: "attach search reasoning message send"; }
+.input-container:not(:has(#reasoning:not([hidden]))) { grid-template-columns: 44px 44px minmax(0, 1fr) 44px 58px; grid-template-areas: "attach search message send stop"; }
+.input-container:not(:has(#reasoning:not([hidden]))):not(:has(#stopGeneration:not([hidden]))) { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; grid-template-areas: "attach search message send"; }
.input-container [hidden] { display: none !important; }
.composer-tool-label { display: none; }
#attachImage { grid-area: attach; }
@@ -695,14 +700,20 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.messages-empty-actions { display: grid; }
.chat-drawer-action-list { grid-template-columns: 1fr; }
.chat-drawer-action-list > * { grid-column: auto; }
+ .conversation-search-toggle { display: block; justify-self: start; min-height: 32px; margin: 4px 10px; padding: 4px 10px; font-size: .75rem; }
+ .conversation-search:not(.is-open) { display: none; }
.conversation-search { padding: 6px 10px; flex-wrap: wrap; gap: 5px; }
.conversation-search label { width: 100%; }
.conversation-search input { flex: 1 1 110px; }
.conversation-search span { min-width: 55px; }
- .input-container { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px 58px; grid-template-areas: "message message message send stop" "attach search reasoning . ."; gap: 4px; }
- .input-container:not(:has(#stopGeneration:not([hidden]))) { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; grid-template-areas: "message message message send" "attach search reasoning ."; }
- #attachImage, #webSearch, #reasoning { width: 100%; height: 49px; min-height: 49px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; }
- .composer-tool-label { display: inline; font-size: .63rem; line-height: 1; }
+ .input-container, .input-container:not(:has(#stopGeneration:not([hidden]))) { grid-template-columns: 40px 40px 40px minmax(0, 1fr) 44px; grid-template-areas: "attach search reasoning message send"; gap: 4px; }
+ .input-container:not(:has(#reasoning:not([hidden]))), .input-container:not(:has(#reasoning:not([hidden]))):not(:has(#stopGeneration:not([hidden]))) { grid-template-columns: 40px 40px minmax(0, 1fr) 44px; grid-template-areas: "attach search message send"; }
+ .input-container:has(#stopGeneration:not([hidden])) #send { display: none; }
+ .input-container:has(#stopGeneration:not([hidden])) { grid-template-areas: "attach search reasoning message stop"; }
+ .input-container:not(:has(#reasoning:not([hidden]))):has(#stopGeneration:not([hidden])) { grid-template-areas: "attach search message stop"; }
+ #attachImage, #webSearch, #reasoning { width: 40px; height: 44px; min-height: 44px; }
+ #stopGeneration { width: 44px; font-size: .7rem; }
+ .composer-tool-label { display: none; }
}
@media (hover: none) { .msg-actions { opacity: 1; } }
diff --git a/public/js/chatTitle.js b/public/js/chatTitle.js
new file mode 100644
index 0000000..7e28cd5
--- /dev/null
+++ b/public/js/chatTitle.js
@@ -0,0 +1,17 @@
+export function titleFromFirstMessage(message) {
+ const firstLine = String(message || "").split(/\r?\n/).find(line => line.trim()) || "";
+ let subject = firstLine.replace(/^\s*(?:[-*#]+\s*)?/, "").replace(/\s+/g, " ").trim();
+ subject = subject.replace(/^(?:can|could|would) you (?:please )?(?:help me )?/i, "")
+ .replace(/^(?:please )?(?:help me (?:with |understand )?|tell me about |explain |describe |summarize |compare |write about |create |make )/i, "")
+ .replace(/^what (?:is|are|was|were) (?:the |a |an )?/i, "")
+ .replace(/^how (?:do|does|can) (?:i|we) /i, "")
+ .replace(/^[\s:,-]+|[\s.!?,;:]+$/g, "");
+ const sentence = subject.split(/(?<=[.!?])\s+/)[0].replace(/[.!?]$/, "");
+ if (sentence) subject = sentence;
+ if (subject.length > 68) {
+ const words = subject.slice(0, 69).split(" ");
+ subject = words.length > 1 ? words.slice(0, -1).join(" ") : subject.slice(0, 68);
+ }
+ subject = subject.replace(/[\s,;:.-]+$/g, "");
+ return subject ? subject[0].toLocaleUpperCase() + subject.slice(1) : "New chat";
+}
diff --git a/public/js/composerController.js b/public/js/composerController.js
index a383446..5a92161 100644
--- a/public/js/composerController.js
+++ b/public/js/composerController.js
@@ -2,6 +2,7 @@
import * as defaultApi from "./api.js";
import {updateReasoning, finishReasoning} from "./reasoning.js";
import {createStreamRenderer} from "./streamRenderer.js";
+import {titleFromFirstMessage} from "./chatTitle.js";
export function createComposerController({
state, elements, attachmentComposer, webSearchButton, reasoningToggle, webSearchToggle,
@@ -98,7 +99,7 @@ export function createComposerController({
}
const currentChat = getChatById(chatId);
if (currentChat && !currentChat.assistant_persona_id && currentChat.title === "New chat") {
- const title = message.length > 40 ? `${message.slice(0, 40)}...` : message;
+ const title = titleFromFirstMessage(message);
const renamed = await api.put(`/chats/${chatId}`, {title}, {signal});
signal.throwIfAborted();
if (renamed.error) throw new Error(renamed.error);
@@ -150,6 +151,12 @@ export function createComposerController({
}, {signal});
rendering.flush();
rendering.dispose();
+ const updatedChat = getChatById(chatId);
+ if (updatedChat && completedReply !== null) {
+ updatedChat.last_message_preview = completedReply.slice(0, 180);
+ updatedChat.updated_at = new Date().toISOString();
+ renderChatList();
+ }
// Keep a completed answer in both state and the DOM until history replaces it.
if (visible()) {
const reply = {role: "bot", content: completedReply, modelName: model,
diff --git a/public/js/messageRenderer.js b/public/js/messageRenderer.js
index 6e0aa04..b72ec98 100644
--- a/public/js/messageRenderer.js
+++ b/public/js/messageRenderer.js
@@ -23,10 +23,19 @@ export function createMessageRenderer({
}) {
const jumpToLatest = document.getElementById("jumpToLatest");
const searchInput = document.getElementById("conversationSearch");
+ const searchToggle = document.getElementById("conversationSearchToggle");
+ const searchBar = document.getElementById("conversationSearchBar");
const searchCount = document.getElementById("conversationSearchCount");
const previousMatch = document.getElementById("conversationSearchPrevious");
const nextMatch = document.getElementById("conversationSearchNext");
const replyAnnouncement = document.getElementById("replyAnnouncement");
+ searchToggle?.addEventListener("click", () => {
+ const expanded = searchToggle.getAttribute("aria-expanded") !== "true";
+ searchToggle.setAttribute("aria-expanded", String(expanded));
+ searchBar.classList.toggle("is-open", expanded);
+ if (expanded) searchInput.focus();
+ else searchToggle.focus();
+ });
let scrollFrame = null;
@@ -232,6 +241,12 @@ export function createMessageRenderer({
actions.setAttribute("aria-label", "Message actions");
const activeChat = getChatById(state.activeChatId);
header.textContent = isMessageUser ? "You" : (activeChat?.assistant_persona_name || "Assistant");
+ if (!isMessageUser && Array.isArray(message.sources) && message.sources.length) {
+ const webBadge = document.createElement("span");
+ webBadge.className = "msg-web-badge";
+ webBadge.textContent = "Used web results";
+ header.append(webBadge);
+ }
setMessageContent(body, message.content);
const copyBtn = document.createElement("button");
diff --git a/public/js/reasoning.js b/public/js/reasoning.js
index b948f08..683e4e7 100644
--- a/public/js/reasoning.js
+++ b/public/js/reasoning.js
@@ -8,6 +8,7 @@ export function createReasoningToggle(button) {
let supported = false;
let busy = false;
const render = () => {
+ button.hidden = !supported;
button.disabled = !supported || busy;
button.setAttribute("aria-pressed", String(reasoningEnabled));
button.title = !supported ? "This model does not support reasoning"
diff --git a/public/js/script.js b/public/js/script.js
index d2c309c..4d3cd3a 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -120,6 +120,7 @@ let workspaceMode = localStorage.getItem("krishd-workspace-mode") || "basic";
let onboardingStep = 1, onboardingIntent = "ask";
let chatLoadingDepth = 0;
let chatActivityDepth = 0;
+let noticeTimer = null;
let availableModelsById = new Map();
const personalitySelect = document.getElementById("personalitySelect");
@@ -234,7 +235,15 @@ const branchExplorer = createBranchExplorer({state: conversation, setActiveChat,
function setNotice(message = "", state = "") {
const notice = document.getElementById("workspaceNotice");
- if (notice) { notice.textContent = state === "error" ? message : ""; notice.classList.toggle("hidden", state !== "error"); }
+ clearTimeout(noticeTimer);
+ if (notice) {
+ const visible = state === "error" || state === "success";
+ notice.textContent = visible ? message : "";
+ notice.classList.toggle("hidden", !visible);
+ notice.classList.toggle("error", state === "error");
+ notice.classList.toggle("success", state === "success");
+ if (state === "success") noticeTimer = setTimeout(() => setNotice(), 3500);
+ }
return { message, state };
}
@@ -603,6 +612,18 @@ function openModelSettings() {
requestAnimationFrame(() => modelSelect?.focus());
}
+function formatChatActivity(value) {
+ if (!value) return "";
+ const date = new Date(value.includes("T") ? value : `${value.replace(" ", "T")}Z`);
+ if (Number.isNaN(date.getTime())) return "";
+ const today = new Date();
+ const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+ if (sameDay(date, today)) return new Intl.DateTimeFormat(undefined, {hour: "numeric", minute: "2-digit"}).format(date);
+ const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1);
+ if (sameDay(date, yesterday)) return "Yesterday";
+ return new Intl.DateTimeFormat(undefined, {month: "short", day: "numeric", ...(date.getFullYear() === today.getFullYear() ? {} : {year: "numeric"})}).format(date);
+}
+
function renderChatList() {
const query = chatSearchInput.value.trim().toLowerCase();
const source = query ? (conversation.chatSearchResults ?? []) : conversation.chatSessions;
@@ -657,7 +678,8 @@ function renderChatList() {
const chatType = chat.assistant_persona_id
? `Roleplay${chat.user_persona_name ? ` · ${chat.user_persona_name}` : ""}`
: "Assistant chat";
- meta.textContent = chat.source_chat_id ? `Branch · ${chatType}` : chatType;
+ const activity = formatChatActivity(chat.updated_at);
+ meta.textContent = [chat.source_chat_id ? `Branch · ${chatType}` : chatType, activity].filter(Boolean).join(" · ");
remove.type = "button";
remove.className = "chat-item-delete";
remove.textContent = "Delete";
@@ -668,10 +690,11 @@ function renderChatList() {
await deleteChat(chat.id);
});
content.append(title, meta);
- if (query && chat.matched_content) {
+ const preview = query && chat.matched_content ? chat.matched_content : chat.last_message_preview;
+ if (preview) {
const excerpt = document.createElement("small");
- const normalized = chat.matched_content.replace(/\s+/g, " ");
- const matchAt = normalized.toLowerCase().indexOf(query);
+ const normalized = preview.replace(/\s+/g, " ").trim();
+ const matchAt = query ? normalized.toLowerCase().indexOf(query) : -1;
const start = Math.max(0, matchAt - 35);
excerpt.className = "chat-item-excerpt";
excerpt.textContent = `${start ? "…" : ""}${normalized.slice(start, start + 110)}${normalized.length > start + 110 ? "…" : ""}`;
@@ -778,7 +801,7 @@ async function updateChatOrganization(id, changes) {
const res = await put(`/chats/${id}/organization`, payload);
if (res.error) return setNotice(res.error, "error");
const index = conversation.chatSessions.findIndex((item) => item.id === id);
- if (index >= 0) conversation.chatSessions[index] = res.chat;
+ if (index >= 0) conversation.chatSessions[index] = {...conversation.chatSessions[index], ...res.chat};
updateWorkspaceCopy();
renderChatList();
updateChatActionState();
@@ -799,7 +822,9 @@ async function clearChat(id) {
if (res.error) return setNotice(res.error, "error");
conversation.messageRetryState = new Map();
conversation.historyPage = null;
- conversation.currentMessages = []; renderMessages(); await loadSummary(); setNotice("Chat cleared.", "success");
+ chat.last_message_preview = null;
+ chat.updated_at = new Date().toISOString();
+ conversation.currentMessages = []; renderMessages(); renderChatList(); await loadSummary(); setNotice("Chat cleared.", "success");
}
const personaStateFields = [
diff --git a/public/js/webSearch.js b/public/js/webSearch.js
index 6995d44..fd85ac6 100644
--- a/public/js/webSearch.js
+++ b/public/js/webSearch.js
@@ -5,15 +5,19 @@
/** @typedef {{message: string, model: string, chatId: number, webSearch?: boolean, reasoning?: boolean}} ChatRequest */
/** @typedef {{role: string, content: string, thinking?: string, sources?: WebSource[]}} ChatMessage */
-export function createWebSearchToggle(button) {
+export function createWebSearchToggle(button, storage = globalThis.localStorage) {
+ const key = "krishd-web-search-enabled";
let enabled = true;
+ try { enabled = storage?.getItem(key) !== "false"; } catch { /* Storage may be unavailable. */ }
const render = () => {
button.setAttribute("aria-pressed", String(enabled));
- button.title = enabled ? "Automatic web search on - click to disable" : "Web search off - click to enable";
+ button.title = enabled ? "Web search allowed. The assistant searches when useful. Click to turn off."
+ : "Web search off. Click to allow the assistant to search when useful.";
button.setAttribute("aria-label", button.title);
};
button.addEventListener("click", () => {
enabled = !enabled;
+ try { storage?.setItem(key, String(enabled)); } catch { /* Keep this session's choice. */ }
render();
});
render();
@@ -28,7 +32,7 @@ export function appendSources(container, sources) {
section.setAttribute("aria-label", "Sources");
const heading = document.createElement("div");
heading.className = "msg-sources-heading";
- heading.textContent = "Sources";
+ heading.textContent = "Used web results · Sources";
section.appendChild(heading);
sources.slice(0, 5).forEach((source, index) => {
let url;
diff --git a/src/db/chatRepository.js b/src/db/chatRepository.js
index d909cf4..0f6b0f5 100644
--- a/src/db/chatRepository.js
+++ b/src/db/chatRepository.js
@@ -31,7 +31,10 @@ export function createChatStatements(db) {
cs.response_length,
cs.system_instruction,
cs.created_at,
- cs.updated_at
+ cs.updated_at,
+ (SELECT substr(m.content, 1, 180) FROM chat_messages m
+ WHERE m.chat_id = cs.id AND m.content <> ''
+ ORDER BY m.id DESC LIMIT 1) AS last_message_preview
FROM chat_sessions cs
LEFT JOIN personas p ON p.id = cs.assistant_persona_id
LEFT JOIN personas up ON up.id = cs.user_persona_id
@@ -350,6 +353,9 @@ export function createChatStatements(db) {
cs.system_instruction,
cs.created_at,
cs.updated_at,
+ (SELECT substr(m.content, 1, 180) FROM chat_messages m
+ WHERE m.chat_id = cs.id AND m.content <> ''
+ ORDER BY m.id DESC LIMIT 1) AS last_message_preview,
cm.id AS matched_message_id,
cm.content AS matched_content
FROM chat_sessions cs
diff --git a/test/chatUsability.test.js b/test/chatUsability.test.js
new file mode 100644
index 0000000..47a2e0f
--- /dev/null
+++ b/test/chatUsability.test.js
@@ -0,0 +1,47 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import Database from "better-sqlite3";
+import {initializeSchema, runMigrations} from "../src/db/schema.js";
+import {createChatStatements} from "../src/db/chatRepository.js";
+import {titleFromFirstMessage} from "../public/js/chatTitle.js";
+import {createWebSearchToggle} from "../public/js/webSearch.js";
+
+test("first messages produce short subject titles at word boundaries", () => {
+ assert.equal(titleFromFirstMessage("Can you help me plan a weekend trip to Lucerne? I prefer trains."), "Plan a weekend trip to Lucerne");
+ assert.equal(titleFromFirstMessage("What are the best hiking routes near Zurich?"), "Best hiking routes near Zurich");
+ const title = titleFromFirstMessage("Please explain the differences between local browser storage and server-side sessions for returning visitors");
+ assert.ok(title.length <= 68);
+ assert.ok(!title.endsWith("-"));
+ assert.equal(titleFromFirstMessage(" "), "New chat");
+});
+
+test("web search preference survives a fresh toggle", () => {
+ const values = new Map();
+ const storage = {getItem: key => values.get(key), setItem: (key, value) => values.set(key, value)};
+ const button = () => ({attributes: {}, setAttribute(key, value) { this.attributes[key] = value; }, addEventListener(_event, listener) { this.click = listener; }});
+ const first = button();
+ assert.equal(createWebSearchToggle(first, storage).enabled, true);
+ first.click();
+ const second = button();
+ assert.equal(createWebSearchToggle(second, storage).enabled, false);
+ assert.equal(second.attributes["aria-pressed"], "false");
+ second.click();
+ assert.equal(createWebSearchToggle(button(), storage).enabled, true);
+});
+
+test("chat list query returns a bounded latest message preview and activity time", () => {
+ const db = new Database(":memory:");
+ try {
+ initializeSchema(db);
+ runMigrations(db);
+ db.prepare("INSERT INTO chat_sessions (username, title) VALUES (?, ?)").run("owner", "Trip plans");
+ const chatId = db.prepare("SELECT id FROM chat_sessions").get().id;
+ db.prepare("INSERT INTO chat_messages (chat_id, role, content) VALUES (?, ?, ?)").run(chatId, "user", "First question");
+ db.prepare("INSERT INTO chat_messages (chat_id, role, content) VALUES (?, ?, ?)").run(chatId, "bot", "x".repeat(250));
+ const statements = createChatStatements(db);
+ const chat = statements.listChatSessions.get("owner");
+ assert.equal(chat.last_message_preview, "x".repeat(180));
+ assert.ok(chat.updated_at);
+ assert.equal(statements.searchChats.get("%Trip%", "owner", "%Trip%").last_message_preview, "x".repeat(180));
+ } finally { db.close(); }
+});
diff --git a/test/webSearch.test.js b/test/webSearch.test.js
index 95f0fd7..1e08e62 100644
--- a/test/webSearch.test.js
+++ b/test/webSearch.test.js
@@ -442,7 +442,7 @@ test("composer search defaults on and source renderer supports old messages and
const toggle = createWebSearchToggle(button);
assert.equal(toggle.enabled, true);
assert.equal(button.attributes["aria-pressed"], "true");
- assert.match(button.title, /Automatic web search on/);
+ assert.match(button.title, /Web search allowed/);
button.listeners.click();
assert.equal(toggle.enabled, false);
assert.equal(button.attributes["aria-pressed"], "false");