diff --git a/src/lib/components/ContinueBtn.svelte b/src/lib/components/ContinueBtn.svelte
index aa72fd16042d0070130ef21cdcd39fc68b5742fb..f3c300971c184e252708f965ffab3eebdd1cddaa 100644
--- a/src/lib/components/ContinueBtn.svelte
+++ b/src/lib/components/ContinueBtn.svelte
@@ -1,12 +1,17 @@
@@ -64,7 +71,8 @@
type="button"
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
title="Confirm delete action"
- on:click|preventDefault={() => {
+ onclick={(e) => {
+ e.preventDefault();
confirmDelete = false;
dispatch("deleteConversation", conv.id);
}}
@@ -76,7 +84,8 @@
type="button"
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
title="Edit conversation title"
- on:click|preventDefault={() => {
+ onclick={(e) => {
+ e.preventDefault();
const newTitle = prompt("Edit this conversation title:", conv.title);
if (!newTitle) return;
dispatch("editConversationTitle", { id: conv.id, title: newTitle });
@@ -89,7 +98,8 @@
type="button"
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
title="Delete conversation"
- on:click|preventDefault={(event) => {
+ onclick={(event) => {
+ event.preventDefault();
if (event.shiftKey) {
dispatch("deleteConversation", conv.id);
} else {
diff --git a/src/lib/components/NavMenu.svelte b/src/lib/components/NavMenu.svelte
index 6dc7e68769e79d533812f36f688f6728ae096abc..9483243394c774f97068ccd7dfa62d3fc91ebcb9 100644
--- a/src/lib/components/NavMenu.svelte
+++ b/src/lib/components/NavMenu.svelte
@@ -14,13 +14,16 @@
import type { Conversation } from "$lib/types/Conversation";
import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
- export let conversations: ConvSidebar[];
- export let canLogin: boolean;
- export let user: LayoutData["user"];
+ interface Props {
+ conversations: ConvSidebar[];
+ canLogin: boolean;
+ user: LayoutData["user"];
+ p?: number;
+ }
- export let p = 0;
+ let { conversations = $bindable(), canLogin, user, p = $bindable(0) }: Props = $props();
- let hasMore = true;
+ let hasMore = $state(true);
function handleNewChatClick() {
isAborted.set(true);
@@ -32,7 +35,7 @@
new Date().setMonth(new Date().getMonth() - 1),
];
- $: groupedConversations = {
+ let groupedConversations = $derived({
today: conversations.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
week: conversations.filter(
({ updatedAt }) => updatedAt.getTime() > dateRanges[1] && updatedAt.getTime() < dateRanges[0]
@@ -41,7 +44,7 @@
({ updatedAt }) => updatedAt.getTime() > dateRanges[2] && updatedAt.getTime() < dateRanges[1]
),
older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
- };
+ });
const titles: { [key: string]: string } = {
today: "Today",
@@ -73,11 +76,13 @@
conversations = [...conversations, ...newConvs];
}
- $: if (conversations.length <= CONV_NUM_PER_PAGE) {
- // reset p to 0 if there's only one page of content
- // that would be caused by a data loading invalidation
- p = 0;
- }
+ $effect(() => {
+ if (conversations.length <= CONV_NUM_PER_PAGE) {
+ // reset p to 0 if there's only one page of content
+ // that would be caused by a data loading invalidation
+ p = 0;
+ }
+ });
@@ -88,13 +93,15 @@
{envPublic.PUBLIC_APP_NAME}
-
- New Chat
-
+ {#if $page.url.pathname !== base + "/"}
+
+ New Chat
+
+ {/if}
0}
-
+
{#each Array(100) as _}
-
+
{/each}
@@ -162,7 +169,7 @@
{/if}
{message.message}
diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
index 7e86734130d301001f8ddb72a2a917c1cc3f501f..b55f4cdbf418fb108783c73d748b342432bb1592 100644
--- a/src/lib/components/Pagination.svelte
+++ b/src/lib/components/Pagination.svelte
@@ -3,15 +3,15 @@
import { getHref } from "$lib/utils/getHref";
import PaginationArrow from "./PaginationArrow.svelte";
- export let classNames = "";
- export let numItemsPerPage: number;
- export let numTotalItems: number;
+ interface Props {
+ classNames?: string;
+ numItemsPerPage: number;
+ numTotalItems: number;
+ }
- const ELLIPSIS_IDX = -1 as const;
+ let { classNames = "", numItemsPerPage, numTotalItems }: Props = $props();
- $: numTotalPages = Math.ceil(numTotalItems / numItemsPerPage);
- $: pageIndex = parseInt($page.url.searchParams.get("p") ?? "0");
- $: pageIndexes = getPageIndexes(pageIndex, numTotalPages);
+ const ELLIPSIS_IDX = -1 as const;
function getPageIndexes(pageIdx: number, nTotalPages: number) {
let pageIdxs: number[] = [];
@@ -52,6 +52,9 @@
}
return pageIdxs;
}
+ let numTotalPages = $derived(Math.ceil(numTotalItems / numItemsPerPage));
+ let pageIndex = $derived(parseInt($page.url.searchParams.get("p") ?? "0"));
+ let pageIndexes = $derived(getPageIndexes(pageIndex, numTotalPages));
{#if numTotalPages > 1}
diff --git a/src/lib/components/PaginationArrow.svelte b/src/lib/components/PaginationArrow.svelte
index cc79cf37d7da2cf7f678c5a130e66a533b1f2436..3310d2b657c6b94d7f3a45516faf228ff1bd2f24 100644
--- a/src/lib/components/PaginationArrow.svelte
+++ b/src/lib/components/PaginationArrow.svelte
@@ -2,9 +2,13 @@
import CarbonCaretLeft from "~icons/carbon/caret-left";
import CarbonCaretRight from "~icons/carbon/caret-right";
- export let href: string;
- export let direction: "next" | "previous";
- export let isDisabled = false;
+ interface Props {
+ href: string;
+ direction: "next" | "previous";
+ isDisabled?: boolean;
+ }
+
+ let { href, direction, isDisabled = false }: Props = $props();
import { onMount, onDestroy } from "svelte";
+ interface Props {
+ children?: import("svelte").Snippet;
+ }
- let el: HTMLElement;
+ let { children }: Props = $props();
+
+ let el: HTMLElement | undefined = $state();
onMount(() => {
- el.ownerDocument.body.appendChild(el);
+ el?.ownerDocument.body.appendChild(el);
});
onDestroy(() => {
@@ -15,5 +20,5 @@
-
+ {@render children?.()}
diff --git a/src/lib/components/RetryBtn.svelte b/src/lib/components/RetryBtn.svelte
index 9f00bdd1faba00776376d5777520fac5258949e2..5abeddac0aee9c570f775537d9ebd5b55c1a1aa1 100644
--- a/src/lib/components/RetryBtn.svelte
+++ b/src/lib/components/RetryBtn.svelte
@@ -1,12 +1,17 @@
System Prompt
-
@@ -30,7 +34,7 @@
disabled
value={preprompt}
class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 max-sm:text-sm"
- />
+ >
{/if}
diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
index 549b6d8430c9fcf4598542e86ba5ecd2fa0122e7..9f587c1d3ea78f8a7bff04791d599d662620fc1c 100644
--- a/src/lib/components/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -3,7 +3,11 @@
import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
- export let message = "";
+ interface Props {
+ message?: string;
+ }
+
+ let { message = "" }: Props = $props();