Add max autocomplete suggestions

web/js/autocompleter.js

@@ -466,6 +466,29 @@ app.registerExtension({
 								),
 							]
 						),
+						$el(
+							"label",
+							{
+								textContent: "Max suggestions: ",
+								style: {
+									display: "block",
+								},
+							},
+							[
+								$el("input", {
+									type: "number",
+									value: +TextAreaAutoComplete.suggestionCount,
+									style: {
+										width: "80px"
+									},
+									onchange: (event) => {
+										const value = +event.target.value;
+										TextAreaAutoComplete.suggestionCount = value;;
+										localStorage.setItem(id + ".SuggestionCount", TextAreaAutoComplete.suggestionCount);
+									},
+								}),
+							]
+						),
 						$el("button", {
 							textContent: "Manage Custom Words",
 							onclick: () => {
@@ -488,6 +511,7 @@ app.registerExtension({
 		TextAreaAutoComplete.insertOnTab = localStorage.getItem(id + ".InsertOnTab") !== "false";
 		TextAreaAutoComplete.insertOnEnter = localStorage.getItem(id + ".InsertOnEnter") !== "false";
 		TextAreaAutoComplete.lorasEnabled = localStorage.getItem(id + ".ShowLoras") === "true";
+		TextAreaAutoComplete.suggestionCount = +localStorage.getItem(id + ".SuggestionCount");
 	},
 	setup() {
 		async function addEmbeddings() {

web/js/common/autocomplete.css

@@ -5,6 +5,7 @@
 	font-family: sans-serif;
 	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
 	z-index: 9999;
+	overflow: auto;
 }
 
 .pysssss-autocomplete-item {

web/js/common/autocomplete.js

@@ -355,6 +355,7 @@ export class TextAreaAutoComplete {
 	static insertOnEnter = true;
 	static replacer = undefined;
 	static lorasEnabled = false;
+	static suggestionCount = 20;
 
 	/** @type {Record<string, Record<string, AutoCompleteEntry>>} */
 	static groups = {};
@@ -529,7 +530,7 @@ export class TextAreaAutoComplete {
 		);
 
 		const top = priorityMatches.length * 0.2;
-		return priorityMatches.slice(0, top).concat(prefixMatches, priorityMatches.slice(top), includesMatches).slice(0, 20);
+		return priorityMatches.slice(0, top).concat(prefixMatches, priorityMatches.slice(top), includesMatches).slice(0, TextAreaAutoComplete.suggestionCount);
 	}
 
 	#update() {
@@ -649,6 +650,7 @@ export class TextAreaAutoComplete {
 		const position = this.helper.getCursorOffset();
 		this.dropdown.style.left = (position.left ?? 0) + "px";
 		this.dropdown.style.top = (position.top ?? 0) + "px";
+		this.dropdown.style.maxHeight = (window.innerHeight - position.top) + "px";
 	}
 
 	#hide() {