tweak

README.md

@@ -6,29 +6,38 @@ whiskr is a private, self-hosted web chat interface for interacting with AI mode
 
 ## Features
 
-- Private and self-hosted (data stored in localStorage)
-- Supports any model available on your OpenRouter account
-- Real-time streaming responses
-- Edit, delete, or copy any message
-- Persistent settings for model, temperature, and other parameters
-- Full conversation control including clearing and modifying messages
-- Title generation (and refresh)
-- Smooth UI updates with [morphdom](https://github.com/patrick-steele-idem/morphdom), selections, images, and other state are preserved during updates
-- Easy model selection:
-  - Tags indicate if a model supports **tools**, **vision**, or **reasoning**
-  - Search field with fuzzy matching to quickly find models
-  - Models are listed newest -> oldest
-- Web search tools (set the `tokens.exa` to enable):
-  - `search_web`: search via Exa in auto mode; returns up to 10 results with short summaries
-  - `fetch_contents`: fetch page contents for one or more URLs via Exa /contents
-  - `github_repository`: get a quick overview of a GitHub repository (repo info, up to 20 branches, top-level files/dirs, and the README) without cloning (optionally set `tokens.github` for higher rate limits and private repos)
-- Images attachments for vision models using simple markdown image tags
-- Text/Code file attachments
-- Reasoning effort control
-- Structured JSON output
-- Statistics for messages (provider, ttft, tps, token count and cost)
-- Import and export of chats as JSON files
-- Authentication (optional)
+### Core Functionality
+- **Private & Self-Hosted**: All your data is stored in `localStorage`.
+- **Broad Model Support**: Use any model available on your OpenRouter account.
+- **Real-time Responses**: Get streaming responses from models as they are generated.
+- **Persistent Settings**: Your chosen model, temperature, and other parameters are saved between sessions.
+- **Authentication**: Optional user/password authentication for added security.
+
+### Conversation Control
+- **Full Message Control**: Edit, delete, or copy any message in the conversation.
+- **Collapse/Expand Messages**: Collapse large messages to keep your chat history tidy.
+- **Retry & Regenerate**: Easily retry assistant responses or regenerate from any point in the conversation.
+- **Title Generation**: Automatically generate (and refresh) a title for your chat.
+- **Import & Export**: Save and load entire chats as local JSON files.
+
+### Rich UI & UX
+- **File Attachments**: Attach text, code, or images to your messages for vision-enabled models.
+- **Reasoning & Transparency**:
+  - View the model's thought process and tool usage in an expandable "Reasoning" section.
+  - See detailed statistics for each message: provider, time-to-first-token, tokens-per-second, token count, and cost.
+  - Keep track of the total cost for the entire conversation.
+- **Advanced Model Search**:
+  - Tags indicate if a model supports **tools**, **vision**, or **reasoning**.
+  - Fuzzy matching helps you quickly find the exact model you need.
+- **Smooth Interface**: Built with [morphdom](https://github.com/patrick-steele-idem/morphdom) to ensure UI updates don't lose your selections, scroll position, or focus.
+
+### Powerful Integrated Tools
+- **`search_web`**: Search the web via Exa; returns up to 12 results with short summaries.
+- **`fetch_contents`**: Fetch and summarize the contents of one or more URLs.
+- **`github_repository`**: Get a comprehensive overview of a GitHub repository. The tool returns:
+  - Core info (URL, description, stars, forks).
+  - A list of top-level files and directories.
+  - The full content of the repository's README file.
 
 ## TODO
 
@@ -88,7 +97,7 @@ After a successful login, whiskr issues a signed (HMAC-SHA256) token, using the
 
 When running behind a reverse proxy like nginx, you can have the proxy serve static files.
 
-```ngnix
+```nginx
 server {
     listen 443 ssl;
     server_name chat.example.com;
@@ -117,14 +126,13 @@ server {
 
 ## Usage
 
-- Send a message with `Ctrl+Enter` or the send button
-- Just add a message with the add button
-- Hover over a message to edit, delete, or copy it
-- Adjust model, temperature, prompt, or message role from the controls in the bottom-left
-- Use the model search field to quickly find models (supports fuzzy matching)
-- Look for tags in the model list to see if a model supports tools, vision, or reasoning
-- Use `![alt](url)` in your message to display an image inline. If the model supports vision, the same image URL is passed to the model for multimodal input.
+- Send a message with `Ctrl+Enter` or the send button.
+- Hover over a message to reveal controls to **edit, delete, copy, collapse, or retry**.
+- Click **"Reasoning"** on an assistant message to view the model's thought process or tool usage.
+- Adjust model, temperature, prompt, or message role from the controls in the bottom-left.
+- Attach images using markdown syntax (`![alt](url)`) or upload text/code files with the attachment button.
+- Use the buttons in the top-right to **import/export** the chat or **clear** all messages.
 
 ## License
 
-GPL-3.0 see [LICENSE](LICENSE) for details.
+GPL-3.0 see [LICENSE](LICENSE) for details.

github.go

@@ -193,9 +193,23 @@ func RepoOverview(ctx context.Context, arguments GitHubRepositoryArguments) (str
 		for _, content := range contents {
 			switch content.Type {
 			case "dir":
-				directories = append(directories, content.Name)
+				directories = append(directories, fmt.Sprintf(
+					"[%s](https://github.com/%s/%s/tree/%s/%s)",
+					content.Name,
+					arguments.Owner,
+					arguments.Repo,
+					repository.DefaultBranch,
+					content.Name,
+				))
 			case "file":
-				files = append(files, content.Name)
+				files = append(files, fmt.Sprintf(
+					"[%s](https://raw.githubusercontent.com/%s/%s/refs/heads/%s/%s)",
+					content.Name,
+					arguments.Owner,
+					arguments.Repo,
+					repository.DefaultBranch,
+					content.Name,
+				))
 			}
 		}
 

internal/tools.txt

@@ -1,5 +1,5 @@
 # Tool use
-Use at most 1 tool call per turn. You have %d turns with tool calls total.
+Use at most 1 tool call per turn. You have %d turns with tool calls total. You cannot call multiple tools at once. If you have multiple turns you can call more tools in later turns. Match the tool arguments exactly. Prefer using `github_repository` over `fetch_contents` to get github repository information.
 
 search_web({query, num_results?, intent?, recency?, domains?})
 - Fresh info & citations. Keep query short; add month/year if freshness matters.
@@ -7,7 +7,7 @@ search_web({query, num_results?, intent?, recency?, domains?})
 - num_results: default 6 (3-12); recency: auto|month|year.
 
 fetch_contents({urls})
-- Read 1-5 given URLs for exact content/quotes/numbers.
+- Read 1-5 given URLs for exact content or quotes/numbers.
 
 github_repository({owner,repo})
 - Quick repo overview + README excerpt.

static/css/chat.css

@@ -221,9 +221,23 @@ body:not(.loading) #loading {
 }
 
 #title.refreshing #title-text {
+	position: relative;
 	filter: blur(3px);
 }
 
+#title.refreshing #title-text::before {
+	content: "";
+	position: absolute;
+	width: 38px;
+	height: 100%;
+	top: 0;
+	left: 0;
+	animation: swivel 1.2s ease-in-out infinite;
+	background: #6e738d;
+	opacity: 0.5;
+	border-radius: 6px;
+}
+
 #messages {
 	display: flex;
 	flex-direction: column;
@@ -320,6 +334,7 @@ body:not(.loading) #loading {
 	margin-left: 12px;
 }
 
+.message:not(.has-text) .text,
 .message:not(.has-tags) .tags {
 	display: none;
 }
@@ -395,6 +410,14 @@ body:not(.loading) #loading {
 	margin-top: 16px;
 }
 
+.reasoning-text strong {
+	display: block;
+}
+
+.reasoning-text strong:not(:first-child) {
+	margin-top: 14px;
+}
+
 .message.has-reasoning:not(.has-text):not(.errored) div.text,
 .message.has-tool:not(.has-text):not(.errored) div.text,
 .message.has-files:not(.has-text):not(.errored) div.text,
@@ -611,9 +634,30 @@ body:not(.loading) #loading {
 	font-style: italic;
 }
 
-.message:empty.receiving .text::before,
-.message.waiting .text::before {
-	content: ". . .";
+.message .loader {
+	display: none;
+}
+
+.message.receiving:not(.has-text) .loader,
+.message.waiting .loader {
+	display: flex;
+	gap: 8px;
+}
+
+.message .loader span {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #939ab7;
+	animation: bounce 1.4s infinite ease-in-out;
+}
+
+.message .loader span:nth-child(2) {
+	animation-delay: 0.2s;
+}
+
+.message .loader span:nth-child(3) {
+	animation-delay: 0.4s;
 }
 
 .statistics {
@@ -710,6 +754,10 @@ body:not(.loading) #loading {
 	cursor: n-resize;
 }
 
+#chat:has(.has-files) #resize-bar {
+	top: 46px;
+}
+
 #attachments {
 	position: absolute;
 	top: 2px;
@@ -1035,6 +1083,10 @@ label[for="reasoning-tokens"] {
 	background-image: url(icons/screen.svg);
 }
 
+#scrolling.not-following {
+	opacity: 0.5;
+}
+
 #json {
 	background-image: url(icons/json-off.svg);
 }
@@ -1195,6 +1247,32 @@ label[for="reasoning-tokens"] {
 	background: #89bb77;
 }
 
+@keyframes swivel {
+
+	0%,
+	100% {
+		left: 0px;
+	}
+
+	50% {
+		left: calc(100%);
+		transform: translateX(-100%);
+	}
+}
+
+@keyframes bounce {
+
+	0%,
+	75%,
+	100% {
+		transform: translateY(0);
+	}
+
+	25% {
+		transform: translateY(-4px);
+	}
+}
+
 @keyframes wiggling {
 	0% {
 		transform: translate(0px);

static/index.html

@@ -33,7 +33,7 @@
 				<div id="title-text"></div>
 			</div>
 
-			<div id="messages"></div>
+			<div id="messages" tabindex="0"></div>
 
 			<div id="chat">
 				<button id="top" class="hidden" title="Scroll to top"></button>

static/js/chat.js

@@ -1,7 +1,6 @@
 (() => {
 	const $version = document.getElementById("version"),
 		$total = document.getElementById("total"),
-		$notifications = document.getElementById("notifications"),
 		$title = document.getElementById("title"),
 		$titleRefresh = document.getElementById("title-refresh"),
 		$titleText = document.getElementById("title-text"),
@@ -34,7 +33,8 @@
 		$password = document.getElementById("password"),
 		$login = document.getElementById("login");
 
-	const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+	const nearBottom = 22,
+		timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
 
 	let platform = "";
 
@@ -50,6 +50,8 @@
 		promptList = [];
 
 	let autoScrolling = false,
+		followTail = true,
+		awaitingScroll = false,
 		jsonMode = false,
 		searchTool = false,
 		chatTitle = false;
@@ -66,34 +68,6 @@
 		$total.textContent = formatMoney(totalCost);
 	}
 
-	async function notify(msg, persistent = false) {
-		console.warn(msg);
-
-		const notification = make("div", "notification", "off-screen");
-
-		notification.textContent = msg instanceof Error ? msg.message : msg;
-
-		$notifications.appendChild(notification);
-
-		await wait(250);
-
-		notification.classList.remove("off-screen");
-
-		if (persistent) {
-			return;
-		}
-
-		await wait(5000);
-
-		notification.style.height = `${notification.getBoundingClientRect().height}px`;
-
-		notification.classList.add("off-screen");
-
-		await wait(250);
-
-		notification.remove();
-	}
-
 	function updateTitle() {
 		const title = chatTitle || (messages.length ? "New Chat" : "");
 
@@ -106,26 +80,44 @@
 		storeValue("title", chatTitle);
 	}
 
+	function distanceFromBottom() {
+		return $messages.scrollHeight - ($messages.scrollTop + $messages.clientHeight);
+	}
+
 	function updateScrollButton() {
-		const bottom = $messages.scrollHeight - ($messages.scrollTop + $messages.offsetHeight);
+		const bottom = distanceFromBottom();
 
 		$top.classList.toggle("hidden", $messages.scrollTop < 80);
 		$bottom.classList.toggle("hidden", bottom < 80);
 	}
 
+	function setFollowTail(follow) {
+		followTail = follow;
+
+		$scrolling.classList.toggle("not-following", !followTail);
+	}
+
 	function scroll(force = false, instant = false) {
-		if (!autoScrolling && !force) {
+		if (awaitingScroll || !(followTail || force)) {
 			updateScrollButton();
 
 			return;
 		}
 
-		setTimeout(() => {
+		awaitingScroll = true;
+
+		requestAnimationFrame(() => {
+			awaitingScroll = false;
+
+			if (!followTail && !force) {
+				return;
+			}
+
 			$messages.scroll({
 				top: $messages.scrollHeight,
 				behavior: instant ? "instant" : "smooth",
 			});
-		}, 0);
+		});
 	}
 
 	function preloadIcons(icons) {
@@ -215,6 +207,13 @@
 
 			this.#_message.appendChild(_body);
 
+			// loader
+			const _loader = make("div", "loader");
+
+			_loader.innerHTML = "<span></span>".repeat(3);
+
+			_body.appendChild(_loader);
+
 			// message files
 			this.#_files = make("div", "files");
 
@@ -233,12 +232,14 @@
 			_reasoning.appendChild(_toggle);
 
 			_toggle.addEventListener("click", () => {
-				_reasoning.classList.toggle("expanded");
+				let delta = this.#updateReasoningHeight() + 16; // margin
 
-				if (_reasoning.classList.contains("expanded")) {
-					this.#updateReasoningHeight();
+				if (!_reasoning.classList.toggle("expanded")) {
+					delta = -delta;
 				}
 
+				setFollowTail(distanceFromBottom() + delta <= nearBottom);
+
 				updateScrollButton();
 			});
 
@@ -282,7 +283,13 @@
 			this.#_tool.appendChild(_call);
 
 			_call.addEventListener("click", () => {
-				this.#_tool.classList.toggle("expanded");
+				let delta = this.#updateToolHeight() + 16; // margin
+
+				if (!this.#_tool.classList.toggle("expanded")) {
+					delta = -delta;
+				}
+
+				setFollowTail(distanceFromBottom() + delta <= nearBottom);
 
 				updateScrollButton();
 			});
@@ -324,6 +331,10 @@
 			_optCollapse.addEventListener("click", () => {
 				this.#_message.classList.toggle("collapsed");
 
+				updateScrollButton();
+
+				setFollowTail(distanceFromBottom() <= nearBottom);
+
 				this.#save();
 			});
 
@@ -432,13 +443,20 @@
 		}
 
 		#updateReasoningHeight() {
-			this.#_reasoning.parentNode.style.setProperty("--height", `${this.#_reasoning.scrollHeight}px`);
+			const height = this.#_reasoning.scrollHeight;
+
+			this.#_reasoning.parentNode.style.setProperty("--height", `${height}px`);
+
+			return height;
 		}
 
 		#updateToolHeight() {
-			const result = this.#_tool.querySelector(".result");
+			const result = this.#_tool.querySelector(".result"),
+				height = result.scrollHeight;
 
-			this.#_tool.style.setProperty("--height", `${result.scrollHeight}px`);
+			this.#_tool.style.setProperty("--height", `${height}px`);
+
+			return height;
 		}
 
 		#morph(from, to) {
@@ -524,8 +542,6 @@
 
 				this.#_message.classList.toggle("has-tool", !!this.#tool);
 
-				this.#updateToolHeight();
-
 				noScroll || scroll();
 
 				updateScrollButton();
@@ -565,8 +581,6 @@
 
 			if (!only || only === "reasoning") {
 				this.#patch("reasoning", this.#_reasoning, this.#reasoning, () => {
-					this.#updateReasoningHeight();
-
 					noScroll || scroll();
 
 					updateScrollButton();
@@ -829,6 +843,10 @@
 				this.#render(false, true);
 				this.#save();
 			}
+
+			setFollowTail(distanceFromBottom() <= nearBottom);
+
+			updateScrollButton();
 		}
 
 		delete() {
@@ -951,6 +969,10 @@
 			}
 		}
 
+		if (autoScrolling) {
+			setFollowTail(true);
+		}
+
 		let temperature = parseFloat($temperature.value);
 
 		if (Number.isNaN(temperature) || temperature < 0 || temperature > 2) {
@@ -1308,7 +1330,9 @@
 			}
 
 			if (message.tags) {
-				message.tags.forEach(tag => obj.addTag(tag));
+				message.tags.forEach(tag => {
+					obj.addTag(tag);
+				});
 			}
 
 			if (message.tool) {
@@ -1324,10 +1348,9 @@
 
 		updateTitle();
 
-		scroll();
-
-		// small fix, sometimes when hard reloading we don't scroll all the way
-		setTimeout(scroll, 250);
+		requestAnimationFrame(() => {
+			$messages.scrollTop = $messages.scrollHeight;
+		});
 	}
 
 	let attachments = [];
@@ -1437,7 +1460,17 @@
 		updateScrollButton();
 	});
 
+	$messages.addEventListener("wheel", event => {
+		if (event.deltaY < 0) {
+			setFollowTail(false);
+		} else {
+			setFollowTail(distanceFromBottom() - event.deltaY <= nearBottom);
+		}
+	});
+
 	$bottom.addEventListener("click", () => {
+		setFollowTail(true);
+
 		$messages.scroll({
 			top: $messages.scrollHeight,
 			behavior: "smooth",
@@ -1445,6 +1478,8 @@
 	});
 
 	$top.addEventListener("click", () => {
+		setFollowTail($messages.scrollHeight <= $messages.clientHeight);
+
 		$messages.scroll({
 			top: 0,
 			behavior: "smooth",
@@ -1452,7 +1487,7 @@
 	});
 
 	$resizeBar.addEventListener("mousedown", event => {
-		const isAtBottom = $messages.scrollHeight - ($messages.scrollTop + $messages.offsetHeight) <= 10;
+		const isAtBottom = $messages.scrollHeight - ($messages.scrollTop + $messages.clientHeight) <= 10;
 
 		if (event.button === 1) {
 			$chat.style.height = "";
@@ -1671,6 +1706,8 @@
 		autoScrolling = !autoScrolling;
 
 		if (autoScrolling) {
+			setFollowTail(true);
+
 			$scrolling.title = "Turn off auto-scrolling";
 			$scrolling.classList.add("on");
 
@@ -1729,7 +1766,7 @@
 		}
 
 		const total = window.innerHeight,
-			height = clamp(window.innerHeight - event.clientY, 100, total - 240);
+			height = clamp(window.innerHeight - event.clientY + (attachments.length ? 50 : 0), 100, total - 240);
 
 		$chat.style.height = `${height}px`;
 
@@ -1744,6 +1781,52 @@
 		document.body.classList.remove("resizing");
 	});
 
+	addEventListener("keydown", event => {
+		if (["TEXTAREA", "INPUT", "SELECT"].includes(document.activeElement?.tagName)) {
+			return;
+		}
+
+		let delta;
+
+		switch (event.key) {
+			case "PageUp":
+			case "ArrowUp":
+				delta = event.key === "PageUp" ? -$messages.clientHeight : -120;
+
+				setFollowTail(false);
+
+				break;
+			case "PageDown":
+			case "ArrowDown":
+				delta = event.key === "PageDown" ? $messages.clientHeight : 120;
+
+				setFollowTail(distanceFromBottom() - delta <= nearBottom);
+
+				break;
+			case "Home":
+				delta = -$messages.scrollTop;
+
+				setFollowTail(false);
+
+				break;
+			case "End":
+				delta = $messages.scrollHeight - $messages.clientHeight - $messages.scrollTop;
+
+				setFollowTail(true);
+
+				break;
+		}
+
+		if (delta) {
+			event.preventDefault();
+
+			$messages.scrollBy({
+				top: delta,
+				behavior: "smooth",
+			});
+		}
+	});
+
 	dropdown($role);
 	dropdown($reasoningEffort);
 

static/js/lib.js

@@ -329,3 +329,35 @@ async function detectPlatform() {
 
 	return `${os || "Unknown OS"}${arch ? `, ${arch}` : ""}`;
 }
+
+(() => {
+	const $notifications = document.getElementById("notifications");
+
+	window.notify = async (msg, persistent = false) => {
+		console.warn(msg);
+
+		const notification = make("div", "notification", "off-screen");
+
+		notification.textContent = msg instanceof Error ? msg.message : msg;
+
+		$notifications.appendChild(notification);
+
+		await wait(250);
+
+		notification.classList.remove("off-screen");
+
+		if (persistent) {
+			return;
+		}
+
+		await wait(5000);
+
+		notification.style.height = `${notification.getBoundingClientRect().height}px`;
+
+		notification.classList.add("off-screen");
+
+		await wait(250);
+
+		notification.remove();
+	};
+})();