remove uri parameters to use hashes

Author: poulphunter

README.md

@@ -17,6 +17,8 @@ trying to be more accessible for non-it people, more intuitive and easier to mai
 - Mobile, medium devices and desktop UI/UX
 - HTML code preview
 - SVG image preview
+- Change API URL from URL parameter (#h=https://127.0.0.1:1234)
+- Pre-input, pre-send message from URL (#m=message, #q=sendMessage)
 - Markdown / Math render (from legacy project)
 - Languages code highlight (from legacy project)
 - [Experimental] Python interpreter (from legacy project)

src/Config.ts

@@ -8,9 +8,27 @@ export const isDev = import.meta.env.MODE === 'development';
 // ex, if the app is located at : http://localhost:5173
 // this url : http://localhost:5173/?h=https%3A%2F%2Ftest.example.com%3A8080%2Fapi
 // will configure BASE_URL as https://test.example.com:8080/api
-export const BASE_URL =
-  new URL(window.location.href).searchParams.get('h') ??
+function parseHashParams(hash: string): Record<string, string> {
+  const parameters:Record<string, string> = {};
+  hash.replace(/^#?/, '').split('&').forEach((param) => {
+    const [key, value] = param.split('=');
+    parameters[key] = decodeURIComponent(value || '');
+  });
+  return parameters;
+}
+
+export const BASE_URL:string =
+  parseHashParams(window.location.hash)['h'] ??
+  parseHashParams(window.location.hash)['host'] ??
   new URL('.', document.baseURI).href.toString().replace(/\/$/, '');
+export const INIT_MESSAGE:string =
+  parseHashParams(window.location.hash)['m'] ??
+  parseHashParams(window.location.hash)['message'] ??
+  '';
+export const INIT_QUERY:string =
+  parseHashParams(window.location.hash)['q'] ??
+  parseHashParams(window.location.hash)['query'] ??
+  '';
 
 export type CONFIG_DEFAULT_KEY = string | boolean | number | string[];
 export const CONFIG_DEFAULT = {

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, cleanCurrentUrl, throttle } from '../utils/misc';
+import { classNames, throttle } from '../utils/misc';
 import CanvasPyInterpreter from './CanvasPyInterpreter';
 import StorageUtils from '../utils/storage';
 import { useVSCodeContext } from '../utils/llama-vscode';
@@ -20,20 +20,21 @@ export interface MessageDisplay {
 }
 
 /**
- * If the current URL contains "?m=...", prefill the message input with the value.
- * If the current URL contains "?q=...", prefill and SEND the message.
+ * If the current URL contains "#m=...", prefill the message input with the value.
+ * If the current URL contains "#q=...", prefill and SEND the message.
  */
+let init_message_done:boolean=false;
+let init_query_done:boolean=false;
 const prefilledMsg = {
-  content() {
-    const url = new URL(window.location.href);
-    return url.searchParams.get('m') ?? url.searchParams.get('q') ?? '';
+  clear() {
+    init_message_done = true;
+    init_query_done = true;
   },
-  shouldSend() {
-    const url = new URL(window.location.href);
-    return url.searchParams.has('q');
+  content: function() {
+    return init_message_done ? '' : INIT_MESSAGE;
   },
-  clear() {
-    cleanCurrentUrl(['m', 'q']);
+  shouldSend: function() {
+    return init_query_done ? '' : INIT_QUERY;
   },
 };
 

src/utils/app.context.tsx

@@ -15,7 +15,6 @@ import {
 } from './types';
 import StorageUtils from './storage';
 import {
-  cleanCurrentUrl,
   filterThoughtFromMsgs,
   getSSEStreamAsync,
   isBoolean,
@@ -113,9 +112,6 @@ export const AppContextProvider = ({
 }: {
   children: React.ReactElement;
 }) => {
-  if (new URL(window.location.href).searchParams.has('h')) {
-    cleanCurrentUrl(['h']);
-  }
   const { t } = useTranslation();
   const { pathname } = useLocation();
   const navigate = useNavigate();
@@ -636,9 +632,8 @@ export const AppContextProvider = ({
   >(null);
   const [promptSelectFirstConfig, setPromptSelectFirstConfig] =
     useState<number>(-1);
-
+  // https://swapi.dev/api/planets/1/?format=json
   useEffect(() => {
-    if (!promptSelectConfig) {
       fetch('/prompts.config.json')
         .then((response) => {
           if (!response.ok) throw new Error(response.status.toString());

src/utils/misc.ts

@@ -114,10 +114,3 @@ 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());
-};