Webui: Enable communication with parent html (if webui is in iframe):

- Listens for "setText" command from parent with "text" and "context" fields. "text" is set in inputMsg, "context" is used as hidden context on the following requests to the llama.cpp server
- On pressing na Escape button sends command "escapePressed" to the parent

Example handling from the parent html side:
- Send command "setText" from parent html to webui in iframe:
const iframe = document.getElementById('askAiIframe');
if (iframe) {
	iframe.contentWindow.postMessage({ command: 'setText', text: text, context: context }, '*');
}

- Listen for Escape key from webui on parent html:
// Listen for escape key event in the iframe
window.addEventListener('keydown', (event) => {
	if (event.key === 'Escape') {
		// Process case when Escape is pressed inside webui
	}
});

Author: igardev

examples/server/webui/src/components/ChatScreen.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import { CallbackGeneratedChunk, useAppContext } from '../utils/app.context';
 import ChatMessage from './ChatMessage';
 import { CanvasType, Message, PendingMessage } from '../utils/types';
@@ -81,6 +81,33 @@ export default function ChatScreen() {
     replaceMessageAndGenerate,
   } = useAppContext();
   const [inputMsg, setInputMsg] = useState('');
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Accept setText message from a parent window and set inputMsg and extraContext
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.command === 'setText') {
+        setInputMsg(event.data?.text);
+        StorageUtils.setExtraContext(event.data?.context)
+        inputRef.current?.focus();
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  // Add a keydown listener that sends the "escapePressed" message to the parent window
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+          window.parent.postMessage({ command: 'escapePressed' }, '*');
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
 
   // keep track of leaf node for rendering
   const [currNodeId, setCurrNodeId] = useState<number>(-1);
@@ -203,6 +230,7 @@ export default function ChatScreen() {
           <textarea
             className="textarea textarea-bordered w-full"
             placeholder="Type a message (Shift+Enter to add a new line)"
+            ref={inputRef}
             value={inputMsg}
             onChange={(e) => setInputMsg(e.target.value)}
             onKeyDown={(e) => {

examples/server/webui/src/utils/app.context.tsx

@@ -174,6 +174,11 @@ export const AppContextProvider = ({
           : [{ role: 'system', content: config.systemMessage } as APIMessage]),
         ...normalizeMsgsForAPI(currMessages),
       ];
+      let extraContext:string = await StorageUtils.getExtraContext()
+      if (extraContext && extraContext != ""){
+        // insert extra context just after the systemMessage
+        messages.splice(config.systemMessage.length === 0 ? 0 : 1, 0, { role: 'user', content:extraContext } as APIMessage)
+      }
       if (config.excludeThoughtOnReq) {
         messages = filterThoughtFromMsgs(messages);
       }

examples/server/webui/src/utils/storage.ts

@@ -21,6 +21,7 @@ const dispatchConversationChange = (convId: string) => {
 const db = new Dexie('LlamacppWebui') as Dexie & {
   conversations: Table<Conversation>;
   messages: Table<Message>;
+  extraContext: string;
 };
 
 // https://dexie.org/docs/Version/Version.stores()
@@ -116,6 +117,12 @@ const StorageUtils = {
     });
     return conv;
   },
+  async setExtraContext(extraContext: string): Promise<void> {
+    db.extraContext = extraContext
+  },
+  async getExtraContext(): Promise<string> {
+    return db.extraContext;
+  },
   /**
    * if convId does not exist, throw an error
    */