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, click(msg-send) on ?q
* main.js: once the App is mounted, focus(msg-input) on ?m
* examples/server/webui/index.html: assign id="msg-send" to the "Send" button

Signed-off-by: Tim Janik <[email protected]>

Author: tim-janik

examples/server/webui/index.html

@@ -153,7 +153,7 @@ <h2 class="font-bold ml-4">Conversations</h2>
             :disabled="isGenerating"
             id="msg-input"
           ></textarea>
-          <button v-if="!isGenerating" class="btn btn-primary ml-2" @click="sendMessage" :disabled="inputMsg.length === 0">Send</button>
+          <button v-if="!isGenerating" class="btn btn-primary ml-2" @click="sendMessage" :disabled="inputMsg.length === 0" id="msg-send">Send</button>
           <button v-else class="btn btn-neutral ml-2" @click="stopGeneration">Stop</button>
         </div>
       </div>

examples/server/webui/src/main.js

@@ -1,5 +1,6 @@
 import './styles.scss';
 import { createApp, defineComponent, shallowRef, computed, h } from 'vue/dist/vue.esm-bundler.js';
+import { nextTick } from 'vue/dist/vue.esm-bundler.js';
 import MarkdownIt from 'markdown-it';
 import TextLineStream from 'textlinestream';
 
@@ -313,6 +314,9 @@ async function* sendSSEPostRequest(url, fetchOptions) {
   }
 };
 
+const usp = new URLSearchParams (window.location.search);
+const initial_query = usp.get ('q'), initial_msg = initial_query || usp.get ('m') || '';
+
 const mainApp = createApp({
   components: {
     VueMarkdown,
@@ -324,7 +328,7 @@ const mainApp = createApp({
       conversations: StorageUtils.getAllConversations(),
       messages: [], // { id: number, role: 'user' | 'assistant', content: string }
       viewingConvId: StorageUtils.getNewConvId(),
-      inputMsg: '',
+      inputMsg: initial_msg, // '',
       isGenerating: false,
       pendingMsg: null, // the on-going message from assistant
       stopGeneration: () => {},
@@ -590,6 +594,12 @@ const mainApp = createApp({
 mainApp.config.errorHandler = alert;
 try {
   mainApp.mount('#app');
+  nextTick().then (() => {
+    if (initial_query)
+      document.getElementById('msg-send').click();
+    else if (initial_msg)
+      setTimeout(() => document.getElementById('msg-input').focus(), 1);
+  });
 } catch (err) {
   console.error(err);
   document.getElementById('app').innerHTML = `<div style="margin:2em auto">