From 76fd31ef9e3ef282f84f1114dd44a57100f084b9 Mon Sep 17 00:00:00 2001 From: Niel Thiart Date: Tue, 5 Dec 2023 15:38:48 +0200 Subject: [PATCH 1/5] Add typeahead prompt selector with fuzzy search on titles This replaces the prompt dropdown button with a fuzzy search input to filter prompts. Uses [svelte-typeahead](https://metonym.github.io/svelte-typeahead/). --- package-lock.json | 26 ++++++++++++++++++++++++++ package.json | 1 + src/app.scss | 32 ++++++++++++++++++++++++++++++++ src/lib/Prompts.svelte | 40 +++++++++++++++++++--------------------- 4 files changed, 78 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index dcda348..aa72a75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "svelte-markdown": "^0.2.3", "svelte-modals": "^1.2.1", "svelte-spa-router": "^3.3.0", + "svelte-typeahead": "^4.4.1", "svelte-use-click-outside": "^1.0.0", "tslib": "^2.6.2", "typescript": "^5.0.4", @@ -2576,6 +2577,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/fuzzy": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/fuzzy/-/fuzzy-0.1.3.tgz", + "integrity": "sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/get-intrinsic": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz", @@ -4514,6 +4524,12 @@ "node": ">=12" } }, + "node_modules/svelte-search": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/svelte-search/-/svelte-search-1.1.0.tgz", + "integrity": "sha512-e5hci9fZPMXb3fuRZvcYJGqh448M8vV3biY4lN4Nr9fqrG/HBnTjWYstKb399aUe9tsBxRbxRAWgtKicisL23g==", + "dev": true + }, "node_modules/svelte-spa-router": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz", @@ -4526,6 +4542,16 @@ "url": "https://github.com/sponsors/ItalyPaleAle" } }, + "node_modules/svelte-typeahead": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/svelte-typeahead/-/svelte-typeahead-4.4.1.tgz", + "integrity": "sha512-U8EYkCQ1HaDrQq1fnkVCEm8emZrdEfgfHhMulgOdoYnWV5PTvypiwCTNvqqxFHbz9ZGe5juAR9ok5tEcfnP9zw==", + "dev": true, + "dependencies": { + "fuzzy": "0.1.3", + "svelte-search": "^1.1.0" + } + }, "node_modules/svelte-use-click-outside": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/svelte-use-click-outside/-/svelte-use-click-outside-1.0.0.tgz", diff --git a/package.json b/package.json index a1cd1f5..2ec4efb 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "svelte-markdown": "^0.2.3", "svelte-modals": "^1.2.1", "svelte-spa-router": "^3.3.0", + "svelte-typeahead": "^4.4.1", "svelte-use-click-outside": "^1.0.0", "tslib": "^2.6.2", "typescript": "^5.0.4", diff --git a/src/app.scss b/src/app.scss index 5d901c7..a39e108 100644 --- a/src/app.scss +++ b/src/app.scss @@ -264,6 +264,38 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t } } +[data-svelte-typeahead] { + display: flex; + + ul.svelte-typeahead-list { + max-height: calc(60vh); + overflow: auto; + + > li:not(:last-of-type) { + padding: 0; + border-bottom: 0 none; + } + } + + &[aria-expanded="true"] { + z-index: 3; + } + + [data-svelte-search] { + flex: 1; + + input { + @extend .button; + @extend .default-text; + text-align: center; + + &::placeholder { + @extend .default-text; + } + } + } +} + /* Bulma layout hacks */ .chat-option-menu.navbar-item { diff --git a/src/lib/Prompts.svelte b/src/lib/Prompts.svelte index 28d8daf..7fcf9a5 100644 --- a/src/lib/Prompts.svelte +++ b/src/lib/Prompts.svelte @@ -1,39 +1,37 @@ {#if input}
-
- -
{ active = !active }}> - -
- -
+ inputPrompt(detail.original.prompt)} + placeholder="Select a pre-made prompt 👇" + let:result + > + + {@html result.string} + +
From 51aa1f57e70f4264656213c8628278bb38bc1d7a Mon Sep 17 00:00:00 2001 From: Niel Thiart Date: Tue, 5 Dec 2023 15:52:22 +0200 Subject: [PATCH 2/5] Style fix: remove padding from last result in prompt typeahead dropdown --- src/app.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app.scss b/src/app.scss index a39e108..3f45c46 100644 --- a/src/app.scss +++ b/src/app.scss @@ -271,9 +271,11 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t max-height: calc(60vh); overflow: auto; - > li:not(:last-of-type) { + > li { padding: 0; - border-bottom: 0 none; + &:not(:last-of-type) { + border-bottom: 0 none; + } } } From 3e1c6fa83ed8cef90211de44c4e587c78a971400 Mon Sep 17 00:00:00 2001 From: Niel Thiart Date: Tue, 5 Dec 2023 15:59:53 +0200 Subject: [PATCH 3/5] Style fix: remove unnecessary calc --- src/app.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.scss b/src/app.scss index 3f45c46..e9221b6 100644 --- a/src/app.scss +++ b/src/app.scss @@ -268,7 +268,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t display: flex; ul.svelte-typeahead-list { - max-height: calc(60vh); + max-height: 60vh; overflow: auto; > li { From 54aa0d4873aa9860274b13337e74a91ccf8f5b9a Mon Sep 17 00:00:00 2001 From: Niel Thiart Date: Tue, 5 Dec 2023 23:46:30 +0200 Subject: [PATCH 4/5] fix: typeahead dark theme --- src/app.scss | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/app.scss b/src/app.scss index e9221b6..035cb29 100644 --- a/src/app.scss +++ b/src/app.scss @@ -266,21 +266,27 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t [data-svelte-typeahead] { display: flex; - - ul.svelte-typeahead-list { - max-height: 60vh; - overflow: auto; - - > li { - padding: 0; - &:not(:last-of-type) { - border-bottom: 0 none; - } - } - } + background-color: transparent !important; &[aria-expanded="true"] { z-index: 3; + + ul.svelte-typeahead-list { + @extend .dropdown-content; + max-height: 60vh; + overflow: auto; + + > li { + padding: 0; + border-bottom: 0 none; + + &.selected { + @media (prefers-color-scheme: dark) { + background-color: #2a2a2a; + } + } + } + } } [data-svelte-search] { From 0a0dde57278a1baa13e2802c5e5a24707d42332e Mon Sep 17 00:00:00 2001 From: Niel Thiart Date: Thu, 7 Dec 2023 11:11:45 +0200 Subject: [PATCH 5/5] Use DOMPurify to sanitize HTML in typeahead results before rendering --- package-lock.json | 23 +++++++++++++++++++++++ package.json | 2 ++ src/lib/Prompts.svelte | 7 ++++++- tsconfig.json | 3 ++- 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index aa72a75..1fe2d9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,12 +17,14 @@ "@sveltejs/vite-plugin-svelte": "^2.5.2", "@tauri-apps/cli": "^1.5.6", "@tsconfig/svelte": "^5.0.0", + "@types/dompurify": "^3.0.5", "@types/marked": "^6.0.0", "@types/node": "^20.10.3", "bulma": "^0.9.4", "bulma-prefers-dark": "^0.1.0-beta.1", "copy-to-clipboard": "^3.3.3", "dexie": "^4.0.1-beta.1", + "dompurify": "^3.0.6", "eslint-config-standard-with-typescript": "^35.0.0", "eslint-plugin-svelte3": "^4.0.0", "flourite": "^1.2.4", @@ -923,6 +925,15 @@ "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==", "dev": true }, + "node_modules/@types/dompurify": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz", + "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==", + "dev": true, + "dependencies": { + "@types/trusted-types": "*" + } + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -975,6 +986,12 @@ "dev": true, "peer": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "dev": true + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "5.62.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", @@ -1739,6 +1756,12 @@ "node": ">=6.0.0" } }, + "node_modules/dompurify": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz", + "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==", + "dev": true + }, "node_modules/es-abstract": { "version": "1.22.3", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz", diff --git a/package.json b/package.json index 2ec4efb..8517856 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,14 @@ "@sveltejs/vite-plugin-svelte": "^2.5.2", "@tauri-apps/cli": "^1.5.6", "@tsconfig/svelte": "^5.0.0", + "@types/dompurify": "^3.0.5", "@types/marked": "^6.0.0", "@types/node": "^20.10.3", "bulma": "^0.9.4", "bulma-prefers-dark": "^0.1.0-beta.1", "copy-to-clipboard": "^3.3.3", "dexie": "^4.0.1-beta.1", + "dompurify": "^3.0.6", "eslint-config-standard-with-typescript": "^35.0.0", "eslint-plugin-svelte3": "^4.0.0", "flourite": "^1.2.4", diff --git a/src/lib/Prompts.svelte b/src/lib/Prompts.svelte index 7fcf9a5..b9f16a8 100644 --- a/src/lib/Prompts.svelte +++ b/src/lib/Prompts.svelte @@ -1,4 +1,5 @@