https://github.com/ggml-org/llama.cpp/pull/12148

Author: poulphunter

src/components/ChatScreen.tsx

@@ -2,7 +2,7 @@ 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';
-import { classNames, throttle } from '../utils/misc';
+import { classNames, cleanCurrentUrl, throttle } from '../utils/misc';
 import CanvasPyInterpreter from './CanvasPyInterpreter';
 import StorageUtils from '../utils/storage';
 import { useVSCodeContext } from '../utils/llama-vscode';
@@ -19,6 +19,24 @@ export interface MessageDisplay {
   isPending?: boolean;
 }
 
+/**
+ * If the current URL contains "?m=...", prefill the message input with the value.
+ * If the current URL contains "?q=...", prefill and SEND the message.
+ */
+const prefilledMsg = {
+  content() {
+    const url = new URL(window.location.href);
+    return url.searchParams.get('m') ?? url.searchParams.get('q') ?? '';
+  },
+  shouldSend() {
+    const url = new URL(window.location.href);
+    return url.searchParams.has('q');
+  },
+  clear() {
+    cleanCurrentUrl(['m', 'q']);
+  },
+};
+
 function getListMessageDisplay(
   msgs: Readonly<Message[]>,
   leafNodeId: Message['id']
@@ -83,7 +101,7 @@ export default function ChatScreen() {
     settingsSeed,
   } = useAppContext();
   const { t } = useTranslation();
-  const [inputMsg, setInputMsg] = useState('');
+  const [inputMsg, setInputMsg] = useState(prefilledMsg.content());
   const [automaticSend, setAutomaticSend] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const { config } = useAppContext();
@@ -209,6 +227,20 @@ export default function ChatScreen() {
 
   const hasCanvas = !!canvasData;
 
+  useEffect(() => {
+    if (prefilledMsg.shouldSend()) {
+      // send the prefilled message if needed
+      sendNewMessage().then(() => {});
+    } else if (inputRef.current) {
+      // otherwise, focus on the input and move the cursor to the end
+      inputRef.current.focus();
+      inputRef.current.selectionStart = inputRef.current.value.length;
+    }
+    prefilledMsg.clear();
+    // no need to keep track of sendNewMessage
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputRef]);
+
   // due to some timing issues of StorageUtils.appendMsg(), we need to make sure the pendingMsg is not duplicated upon rendering (i.e. appears once in the saved conversation and once in the pendingMsg)
   const pendingMsgDisplay: MessageDisplay[] =
     pendingMsg && messages.at(-1)?.msg.id !== pendingMsg.id

src/utils/misc.ts

@@ -12,6 +12,7 @@ export const isBoolean = (x: any) => x === true || x === false;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isNumeric = (n: any) =>
   !isString(n) && !isNaN(n) && !isBoolean(n) && !Array.isArray(n);
+
 // wrapper for SSE
 export async function* getSSEStreamAsync(fetchResponse: Response) {
   if (!fetchResponse.body) throw new Error('Response body is empty');
@@ -93,6 +94,7 @@ export function classNames(classes: Record<string, boolean>): string {
     .map(([key]) => key)
     .join(' ');
 }
+
 export const throttle = <T extends unknown[]>(
   callback: (...args: T) => void,
   delay: number
@@ -112,3 +114,10 @@ export const throttle = <T extends unknown[]>(
     }, delay);
   };
 };
+export const cleanCurrentUrl = (removeQueryParams: string[]) => {
+  const url = new URL(window.location.href);
+  removeQueryParams.forEach((param) => {
+    url.searchParams.delete(param);
+  });
+  window.history.replaceState({}, '', url.toString());
+};