From 65be99eee5cc948e8ff418501cd80b8bfe06c477 Mon Sep 17 00:00:00 2001 From: Tim Janik Date: Tue, 10 Dec 2024 17:32:40 +0100 Subject: [PATCH] examples/server/webui/src/main.js: populate textarea from query string Allow pre-filling the msg-input textarea with a message supplied via a query parameter ?m=... and auto-focus the textarea. Example: http://localhost:8080/?m=What%20is%20your%20name? Alternatively, allow pre-filling the msg-input textarea via a query parameter ?q=... and automatically start generating a response, e.g.: http://localhost:8080/?q=What%20is%20your%20name? * main.js: fill inputMsg from ?q or ?m * main.js: once the App is mounted, call sendMessage() on ?q * main.js: once the App is mounted, focus(msg-input) on ?m Signed-off-by: Tim Janik --- examples/server/webui/src/main.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/examples/server/webui/src/main.js b/examples/server/webui/src/main.js index 90f4ca368..2216f4223 100644 --- a/examples/server/webui/src/main.js +++ b/examples/server/webui/src/main.js @@ -1,5 +1,5 @@ import './styles.scss'; -import { createApp, defineComponent, shallowRef, computed, h } from 'vue/dist/vue.esm-bundler.js'; +import { createApp, defineComponent, shallowRef, computed, h, nextTick } from 'vue/dist/vue.esm-bundler.js'; import MarkdownIt from 'markdown-it'; import TextLineStream from 'textlinestream'; @@ -373,6 +373,10 @@ async function* sendSSEPostRequest(url, fetchOptions) { } }; +const usp = new URLSearchParams (window.location.search); +const initial_query = usp.get ('q'); +const initial_msg = initial_query || usp.get ('m') || ''; + const mainApp = createApp({ components: { VueMarkdown, @@ -385,7 +389,7 @@ const mainApp = createApp({ /** @type {Array} */ messages: [], viewingConvId: StorageUtils.getNewConvId(), - inputMsg: '', + inputMsg: initial_msg, isGenerating: false, /** @type {Array | null} */ pendingMsg: null, // the on-going message from assistant @@ -660,7 +664,13 @@ const mainApp = createApp({ }); mainApp.config.errorHandler = alert; try { - mainApp.mount('#app'); + const appInstance = mainApp.mount('#app'); + nextTick().then(() => { + if (initial_query) + appInstance.sendMessage(); + else if (initial_msg) + setTimeout(() => document.getElementById('msg-input').focus(), 1); + }); } catch (err) { console.error(err); document.getElementById('app').innerHTML = `