From 938d3bc284c2fdecf2a4fa047abe271cbe5aa9d0 Mon Sep 17 00:00:00 2001 From: Amos Jun-yeung Ng Date: Sat, 13 Apr 2024 18:52:35 +0700 Subject: [PATCH 1/6] Add smoother fade-ins for API call reveal --- src-svelte/src/lib/SubInfoBox.svelte | 4 ++-- .../src/routes/api-calls/[slug]/ApiCallDisplay.svelte | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src-svelte/src/lib/SubInfoBox.svelte b/src-svelte/src/lib/SubInfoBox.svelte index f847ab10..bd6334b3 100644 --- a/src-svelte/src/lib/SubInfoBox.svelte +++ b/src-svelte/src/lib/SubInfoBox.svelte @@ -5,11 +5,11 @@ const subinfoboxId = getComponentId("subinfobox"); -
+

{subheading}

-
+
diff --git a/src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte b/src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte index 056bf1ad..554190c5 100644 --- a/src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte +++ b/src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte @@ -39,7 +39,7 @@ {#if apiCall} - +
@@ -74,9 +74,9 @@
ID {apiCall?.id ?? "Unknown"}
-
+
{#each apiCall?.request.prompt.messages ?? [] as message} -
+
{message.role} 
{message.text}
From 5a0d23dd92fc822225dbfa12de47086bd6c7a908 Mon Sep 17 00:00:00 2001 From: Amos Jun-yeung Ng Date: Sat, 13 Apr 2024 21:01:18 +0700 Subject: [PATCH 2/6] Fix up chat transition stories --- .../src/lib/__mocks__/MockAppLayout.svelte | 2 +- .../lib/__mocks__/MockFullPageLayout.svelte | 2 +- .../lib/__mocks__/MockPageTransitions.svelte | 6 ++++ src-svelte/src/routes/AnimationControl.svelte | 7 ++-- .../src/routes/chat/Chat.reveal.stories.ts | 36 +++++++++++++++++++ src-svelte/src/routes/chat/Chat.stories.ts | 15 ++------ 6 files changed, 50 insertions(+), 18 deletions(-) create mode 100644 src-svelte/src/routes/chat/Chat.reveal.stories.ts diff --git a/src-svelte/src/lib/__mocks__/MockAppLayout.svelte b/src-svelte/src/lib/__mocks__/MockAppLayout.svelte index cd5a48a6..318b716e 100644 --- a/src-svelte/src/lib/__mocks__/MockAppLayout.svelte +++ b/src-svelte/src/lib/__mocks__/MockAppLayout.svelte @@ -3,7 +3,7 @@ import Snackbar from "$lib/snackbar/Snackbar.svelte"; -
+
diff --git a/src-svelte/src/lib/__mocks__/MockFullPageLayout.svelte b/src-svelte/src/lib/__mocks__/MockFullPageLayout.svelte index 82c2b843..ffc46314 100644 --- a/src-svelte/src/lib/__mocks__/MockFullPageLayout.svelte +++ b/src-svelte/src/lib/__mocks__/MockFullPageLayout.svelte @@ -3,7 +3,7 @@ import Snackbar from "$lib/snackbar/Snackbar.svelte"; -
+
diff --git a/src-svelte/src/lib/__mocks__/MockPageTransitions.svelte b/src-svelte/src/lib/__mocks__/MockPageTransitions.svelte index d1a5a9f3..9669c747 100644 --- a/src-svelte/src/lib/__mocks__/MockPageTransitions.svelte +++ b/src-svelte/src/lib/__mocks__/MockPageTransitions.svelte @@ -14,3 +14,9 @@ + + diff --git a/src-svelte/src/routes/AnimationControl.svelte b/src-svelte/src/routes/AnimationControl.svelte index a4254994..79628168 100644 --- a/src-svelte/src/routes/AnimationControl.svelte +++ b/src-svelte/src/routes/AnimationControl.svelte @@ -12,7 +12,8 @@
@@ -20,12 +21,12 @@
From 4720670780975d98089cd92517f5188fe0f68d24 Mon Sep 17 00:00:00 2001 From: Amos Jun-yeung Ng Date: Sat, 13 Apr 2024 22:03:15 +0700 Subject: [PATCH 5/6] Fix InfoBox reveal for populated chat conversations --- src-svelte/src/lib/InfoBox.svelte | 15 ++++++++++----- src-svelte/src/routes/chat/Chat.svelte | 13 ++++++++++++- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src-svelte/src/lib/InfoBox.svelte b/src-svelte/src/lib/InfoBox.svelte index 92ee1417..936e3bd8 100644 --- a/src-svelte/src/lib/InfoBox.svelte +++ b/src-svelte/src/lib/InfoBox.svelte @@ -412,7 +412,10 @@ revealCutoffFraction, equivalentYProgress, ); - const delayFraction = adjustedYProgress * theoreticalTotalKickoffFraction; + const delayFraction = Math.max( + 0, + adjustedYProgress * theoreticalTotalKickoffFraction, + ); return new PrimitiveTimingFraction({ delayFraction, durationFraction: perElementRevealFraction, @@ -455,15 +458,16 @@ let revealAnimations = getNodeAnimations(node); const config = { childList: true, subtree: true }; - const mutationCallback: MutationCallback = () => { + const recalculateReveals = () => { revealAnimations = getNodeAnimations(node); // hide all new nodes immediately revealAnimations.forEach((anim) => { anim.tickForGlobalTime(0); }); }; - const observer = new MutationObserver(mutationCallback); - observer.observe(node, config); + const mutationObserver = new MutationObserver(recalculateReveals); + mutationObserver.observe(node, config); + node.addEventListener("info-box-update", recalculateReveals); return { delay: timing.infoBox.delayMs(), @@ -484,7 +488,8 @@ } if (tGlobalFraction === 1) { - observer.disconnect(); + mutationObserver.disconnect(); + node.removeEventListener("info-box-update", recalculateReveals); } }, }; diff --git a/src-svelte/src/routes/chat/Chat.svelte b/src-svelte/src/routes/chat/Chat.svelte index 5578c5eb..d0a96dce 100644 --- a/src-svelte/src/routes/chat/Chat.svelte +++ b/src-svelte/src/routes/chat/Chat.svelte @@ -29,6 +29,7 @@ export let showMostRecentMessage = true; let messageComponents: Message[] = []; let growable: Scrollable | undefined; + let chatContainer: HTMLDivElement | undefined = undefined; let conversationWidthPx = 100; function resizeConversationView() { @@ -44,6 +45,13 @@ if (showMostRecentMessage) { growable?.scrollToBottom(); } + if (!chatContainer) { + console.warn("Chat container not initialized"); + return; + } + chatContainer.dispatchEvent( + new CustomEvent("info-box-update", { bubbles: true }), + ); } function appendMessage(message: ChatMessage) { @@ -81,7 +89,10 @@ -
+
Date: Sat, 13 Apr 2024 22:19:39 +0700 Subject: [PATCH 6/6] Fix animation control tests --- src-svelte/src/routes/AnimationControl.test.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src-svelte/src/routes/AnimationControl.test.ts b/src-svelte/src/routes/AnimationControl.test.ts index 3308913b..37b397d9 100644 --- a/src-svelte/src/routes/AnimationControl.test.ts +++ b/src-svelte/src/routes/AnimationControl.test.ts @@ -13,7 +13,9 @@ describe("AnimationControl", () => { test("will enable animations by default", async () => { render(AnimationControl, {}); - const animationControl = document.querySelector(".container") as Element; + const animationControl = document.getElementById( + "animation-control", + ) as Element; expect(animationControl.classList).not.toContainEqual( "animations-disabled", ); @@ -26,7 +28,9 @@ describe("AnimationControl", () => { animationsOn.set(false); render(AnimationControl, {}); - const animationControl = document.querySelector(".container") as Element; + const animationControl = document.getElementById( + "animation-control", + ) as Element; expect(animationControl.classList).toContainEqual("animations-disabled"); expect(animationControl.getAttribute("style")).toEqual( "--base-animation-speed: 1; --standard-duration: 0.00ms;", @@ -37,7 +41,9 @@ describe("AnimationControl", () => { animationSpeed.set(0.9); render(AnimationControl, {}); - const animationControl = document.querySelector(".container") as Element; + const animationControl = document.getElementById( + "animation-control", + ) as Element; expect(animationControl.classList).not.toContainEqual( "animations-disabled", );