mirror of
https://github.com/ggml-org/llama.cpp.git
synced 2025-10-30 08:42:00 +00:00
b58934c183
* 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
}
});
* Move the extraContext from storage to app.context.
* Fix formatting.
* add Message.extra
* format + build
* MessageExtraContext
* build
* fix display
* rm console.log
---------
Co-authored-by: igardev <ivailo.gardev@akros.ch>
Co-authored-by: Xuan Son Nguyen <son@huggingface.co>
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { MessageExtraContext } from './types';
|
|
|
|
// Extra context when using llama.cpp WebUI from llama-vscode, inside an iframe
|
|
// Ref: https://github.com/ggml-org/llama.cpp/pull/11940
|
|
|
|
interface SetTextEvData {
|
|
text: string;
|
|
context: string;
|
|
}
|
|
|
|
/**
|
|
* To test it:
|
|
* window.postMessage({ command: 'setText', text: 'Spot the syntax error', context: 'def test()\n return 123' }, '*');
|
|
*/
|
|
|
|
export const useVSCodeContext = (
|
|
inputRef: React.RefObject<HTMLTextAreaElement>,
|
|
setInputMsg: (text: string) => void
|
|
) => {
|
|
const [extraContext, setExtraContext] = useState<MessageExtraContext | null>(
|
|
null
|
|
);
|
|
|
|
// Accept setText message from a parent window and set inputMsg and extraContext
|
|
useEffect(() => {
|
|
const handleMessage = (event: MessageEvent) => {
|
|
if (event.data?.command === 'setText') {
|
|
const data: SetTextEvData = event.data;
|
|
setInputMsg(data?.text);
|
|
if (data?.context && data.context.length > 0) {
|
|
setExtraContext({
|
|
type: 'context',
|
|
content: 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);
|
|
}, []);
|
|
|
|
return {
|
|
extraContext,
|
|
// call once the user message is sent, to clear the extra context
|
|
clearExtraContext: () => setExtraContext(null),
|
|
};
|
|
};
|