Added hash-based routing using svelte-spa-router

package-lock.json

@@ -23,6 +23,7 @@
         "svelte-highlight": "^7.2.0",
         "svelte-local-storage-store": "^0.4.0",
         "svelte-markdown": "^0.2.3",
+        "svelte-spa-router": "^3.3.0",
         "tslib": "^2.5.0",
         "typescript": "^4.9.3",
         "vite": "^4.1.0"
@@ -1211,6 +1212,15 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regexparam": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.1.tgz",
+      "integrity": "sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -1581,6 +1591,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/svelte-spa-router": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
+      "integrity": "sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==",
+      "dev": true,
+      "dependencies": {
+        "regexparam": "2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ItalyPaleAle"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -26,6 +26,7 @@
     "svelte-highlight": "^7.2.0",
     "svelte-local-storage-store": "^0.4.0",
     "svelte-markdown": "^0.2.3",
+    "svelte-spa-router": "^3.3.0",
     "tslib": "^2.5.0",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"

src/App.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import Router, {location} from 'svelte-spa-router';
+  import routes from "./routes";
+
   import Navbar from "./lib/Navbar.svelte";
   import Sidebar from "./lib/Sidebar.svelte";
   import Home from "./lib/Home.svelte";
@@ -15,8 +18,6 @@
   if (urlParams.has("key")) {
     apiKeyStorage.set(urlParams.get("key")!);
   }
-
-  let activeChatId: number;
 </script>
 
 <Navbar />
@@ -25,14 +26,12 @@
   <div class="container is-fullhd">
     <div class="columns">
       <div class="column is-one-fifth">
-        <Sidebar bind:apiKey bind:sortedChats bind:activeChatId />
+          <Sidebar bind:apiKey bind:sortedChats />
       </div>
       <div class="column is-four-fifths">
-        {#if activeChatId}
-          <Chat bind:chatId={activeChatId} />
-        {:else}
-          <Home bind:activeChatId />
-        {/if}
+        {#key $location}
+          <Router {routes}/>
+        {/key}
       </div>
     </div>
   </div>

src/lib/Chat.svelte

@@ -6,9 +6,11 @@
   import Code from "./Code.svelte";
 
   import { afterUpdate, onMount } from "svelte";
+  import { replace } from 'svelte-spa-router'
   import SvelteMarkdown from "svelte-markdown";
 
-  export let chatId: number;
+  export let params = {};
+  let chatId: number = parseInt(params.chatId);
   let updating: boolean = false;
 
   let input: HTMLTextAreaElement;
@@ -229,8 +231,9 @@
 
   const deleteChat = () => {
     if (confirm("Are you sure you want to delete this chat?")) {
+      replace('/').then(() => {
         chatsStorage.update((chats) => chats.filter((chat) => chat.id !== chatId));
-      chatId = null;
+      });
     }
   };
 

src/lib/Home.svelte

@@ -2,8 +2,6 @@
   import { addChat, apiKeyStorage } from "./Storage.svelte";
 
   $: apiKey = $apiKeyStorage;
-
-  export let activeChatId: number;
 </script>
 
 <article class="message">
@@ -54,12 +52,7 @@
   <article class="message is-info">
     <div class="message-body">
       Select an existing chat on the sidebar, or
-      <a
-        href={"#"}
-        on:click|preventDefault={() => {
-          activeChatId = addChat();
-        }}>create a new chat</a
-      >
+      <a href={"#/chat/new"}>create a new chat</a>
     </div>
   </article>
 {/if}

src/lib/Navbar.svelte

@@ -4,7 +4,7 @@
 
 <nav class="navbar" aria-label="main navigation">
   <div class="navbar-brand">
-    <a class="navbar-item" href={"#"} on:click|preventDefault={() => (window.location = window.location)}>
+    <a class="navbar-item" href={"#/"}>
       <img src={logo} alt="ChatGPT-web" width="28" height="28" />
       <p class="ml-2 is-size-4 has-text-weight-bold">ChatGPT-web</p>
     </a>

src/lib/NewChat.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { addChat } from "./Storage.svelte";
+  import { replace } from 'svelte-spa-router'
+
+  // Create the new chat instance then redirect to it
+  const chatId = addChat();
+  replace(`/chat/${chatId}`);
+</script>

src/lib/Sidebar.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+  import {params, replace} from 'svelte-spa-router';
+
   import { addChat, clearChats } from "./Storage.svelte";
   import { exportAsMarkdown } from "./Export.svelte";
   import type { Chat } from "./Types.svelte";
 
-  export let activeChatId: number;
   export let sortedChats: Chat[];
   export let apiKey: string;
+
+  $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined;
 </script>
 
 <aside class="menu">
@@ -19,10 +22,9 @@
           {#each sortedChats as chat}
             <li>
               <a
-                href={"#"}
+                href={`#/chat/${chat.id}`}
                 class:is-disabled={!apiKey}
-                class:is-active={activeChatId === chat.id}
-                on:click|preventDefault={() => (activeChatId = chat.id)}>{chat.name || `Chat ${chat.id}`}</a
+                class:is-active={activeChatId === chat.id}>{chat.name || `Chat ${chat.id}`}</a
               >
             </li>
           {/each}
@@ -34,40 +36,35 @@
   <ul class="menu-list">
     <li>
       <a
-        href={"#"}
+        href={"#/"}
         class="panel-block"
         class:is-disabled={!apiKey}
-        class:is-active={!activeChatId}
-        on:click|preventDefault={() => {
-          activeChatId = null;
-        }}><span class="greyscale mr-2">🔑</span> API key</a
+        class:is-active={!activeChatId}><span class="greyscale mr-2">🔑</span> API key</a
       >
     </li>
     <li>
       <a
-        href={"#"}
+        href={"#/chat/new"}
         class="panel-block"
-        class:is-disabled={!apiKey}
-        on:click|preventDefault={() => {
-          activeChatId = addChat();
-        }}><span class="greyscale mr-2">➕</span> New chat</a
+        class:is-disabled={!apiKey}><span class="greyscale mr-2">➕</span> New chat</a
       >
     </li>
     <li>
       <a
-        href={"#"}
+        href={"#/"}
         class="panel-block"
         class:is-disabled={!apiKey}
-        on:click|preventDefault={() => {
+        on:click={() => {
+          replace('#/').then(() => {
             clearChats();
-          activeChatId = null;
+          });
         }}><span class="greyscale mr-2">🗑️</span> Clear chats</a
       >
     </li>
     {#if activeChatId}
       <li>
         <a
-          href={"#"}
+          href={"#/"}
           class="panel-block"
           class:is-disabled={!apiKey}
           on:click|preventDefault={() => {

src/routes.ts

@@ -0,0 +1,12 @@
+import Home from "./lib/Home.svelte";
+import Chat from "./lib/Chat.svelte";
+import NewChat from "./lib/NewChat.svelte";
+
+export default {
+    '/': Home,
+
+    '/chat/new': NewChat,
+    '/chat/:chatId': Chat,
+
+    '*': Home,
+};