feat: show verbose info

package-lock.json

@@ -11,13 +11,13 @@
 				"@sveltejs/adapter-node": "^1.3.1",
 				"file-saver": "^2.0.5",
 				"highlight.js": "^11.9.0",
-				"hint.css": "^3.0.0",
 				"http-server": "^14.1.1",
 				"idb": "^7.1.1",
 				"js-sha256": "^0.10.1",
 				"katex": "^0.16.9",
 				"marked": "^9.1.0",
 				"svelte-french-toast": "^1.2.0",
+				"tippy.js": "^6.3.7",
 				"uuid": "^9.0.1"
 			},
 			"devDependencies": {
@@ -585,6 +585,15 @@
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
 			"integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg=="
 		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.8",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
 		"node_modules/@rollup/plugin-commonjs": {
 			"version": "25.0.5",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.5.tgz",
@@ -2301,11 +2310,6 @@
 				"node": ">=12.0.0"
 			}
 		},
-		"node_modules/hint.css": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/hint.css/-/hint.css-3.0.0.tgz",
-			"integrity": "sha512-UoJ+yLO2kEcfsm/XMU1suAIR0sxCq4HO22pw4okJQo5TQDlA2BrJ57Eaxh4eT+9PDInIDTRm9TVzzbHHWEqASQ=="
-		},
 		"node_modules/html-encoding-sniffer": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -4000,6 +4004,14 @@
 				"globrex": "^0.1.2"
 			}
 		},
+		"node_modules/tippy.js": {
+			"version": "6.3.7",
+			"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+			"integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+			"dependencies": {
+				"@popperjs/core": "^2.9.0"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4576,6 +4588,11 @@
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
 			"integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg=="
 		},
+		"@popperjs/core": {
+			"version": "2.11.8",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+		},
 		"@rollup/plugin-commonjs": {
 			"version": "25.0.5",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.5.tgz",
@@ -5752,11 +5769,6 @@
 			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
 			"integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw=="
 		},
-		"hint.css": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/hint.css/-/hint.css-3.0.0.tgz",
-			"integrity": "sha512-UoJ+yLO2kEcfsm/XMU1suAIR0sxCq4HO22pw4okJQo5TQDlA2BrJ57Eaxh4eT+9PDInIDTRm9TVzzbHHWEqASQ=="
-		},
 		"html-encoding-sniffer": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -6896,6 +6908,14 @@
 				"globrex": "^0.1.2"
 			}
 		},
+		"tippy.js": {
+			"version": "6.3.7",
+			"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+			"integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+			"requires": {
+				"@popperjs/core": "^2.9.0"
+			}
+		},
 		"to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -42,13 +42,13 @@
 		"@sveltejs/adapter-node": "^1.3.1",
 		"file-saver": "^2.0.5",
 		"highlight.js": "^11.9.0",
-		"hint.css": "^3.0.0",
 		"http-server": "^14.1.1",
 		"idb": "^7.1.1",
 		"js-sha256": "^0.10.1",
 		"katex": "^0.16.9",
 		"marked": "^9.1.0",
 		"svelte-french-toast": "^1.2.0",
+		"tippy.js": "^6.3.7",
 		"uuid": "^9.0.1"
 	}
 }

src/lib/components/chat/Messages.svelte

@@ -2,6 +2,7 @@
 	import { marked } from 'marked';
 
 	import { v4 as uuidv4 } from 'uuid';
+	import tippy from 'tippy.js';
 	import hljs from 'highlight.js';
 	import 'highlight.js/styles/github-dark.min.css';
 	import auto_render from 'katex/dist/contrib/auto-render.mjs';
@@ -29,6 +30,24 @@
 			renderLatex();
 			hljs.highlightAll();
 			createCopyCodeBlockButton();
+
+			for (const message of messages) {
+				if (message.info) {
+					tippy(`#info-${message.id}`, {
+						content: `<span class="text-xs">total_duration: ${
+							message.info.total_duration ?? 'N/A'
+						}<br/>
+						load_duration: ${message.info.load_duration ?? 'N/A'}<br/>
+						sample_count: ${message.info.sample_count ?? 'N/A'}<br/>
+						sample_duration: ${message.info.sample_duration ?? 'N/A'}<br/>
+						prompt_eval_count: ${message.info.prompt_eval_count ?? 'N/A'}<br/>
+						prompt_eval_duration: ${message.info.prompt_eval_duration ?? 'N/A'}<br/>
+						eval_count: ${message.info.eval_count ?? 'N/A'}<br/>
+						eval_duration: ${message.info.eval_duration ?? 'N/A'}</span>`,
+						allowHTML: true
+					});
+				}
+			}
 		})();
 	}
 
@@ -861,6 +880,33 @@
 															</svg>
 														</button>
 
+														{#if message.info}
+															<button
+																class=" {messageIdx + 1 === messages.length
+																	? 'visible'
+																	: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition whitespace-pre-wrap"
+																on:click={() => {
+																	console.log(message);
+																}}
+																id="info-{message.id}"
+															>
+																<svg
+																	xmlns="http://www.w3.org/2000/svg"
+																	fill="none"
+																	viewBox="0 0 24 24"
+																	stroke-width="1.5"
+																	stroke="currentColor"
+																	class="w-4 h-4"
+																>
+																	<path
+																		stroke-linecap="round"
+																		stroke-linejoin="round"
+																		d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+																	/>
+																</svg>
+															</button>
+														{/if}
+
 														{#if messageIdx + 1 === messages.length}
 															<button
 																type="button"

src/routes/(app)/+page.svelte

@@ -213,6 +213,9 @@
 								responseMessage.context = data.context ?? null;
 								responseMessage.info = {
 									total_duration: data.total_duration,
+									load_duration: data.load_duration,
+									sample_count: data.sample_count,
+									sample_duration: data.sample_duration,
 									prompt_eval_count: data.prompt_eval_count,
 									prompt_eval_duration: data.prompt_eval_duration,
 									eval_count: data.eval_count,

src/routes/(app)/c/[id]/+page.svelte

@@ -225,6 +225,9 @@
 								responseMessage.context = data.context ?? null;
 								responseMessage.info = {
 									total_duration: data.total_duration,
+									load_duration: data.load_duration,
+									sample_count: data.sample_count,
+									sample_duration: data.sample_duration,
 									prompt_eval_count: data.prompt_eval_count,
 									prompt_eval_duration: data.prompt_eval_duration,
 									eval_count: data.eval_count,

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 
 	import '../app.css';
 	import '../tailwind.css';
-
+	import 'tippy.js/dist/tippy.css';
 	let loaded = false;
 
 	onMount(async () => {