From 85093d30c85ea9cb2d34631e623d79e1f3e76ebf Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 18 Jan 2025 18:36:55 -0500 Subject: [PATCH 01/73] feat: make ping permanent --- apps/app/src/lib/components/SelectedTransformation.svelte | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/app/src/lib/components/SelectedTransformation.svelte b/apps/app/src/lib/components/SelectedTransformation.svelte index 055f60737..dc2a0f00d 100644 --- a/apps/app/src/lib/components/SelectedTransformation.svelte +++ b/apps/app/src/lib/components/SelectedTransformation.svelte @@ -74,11 +74,9 @@ {:else} {/if} - {#if !selectedTransformation} - - {/if} + {/snippet} From 7af5e3697cdd54575035907b1953a6cf103ab28f Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 18 Jan 2025 18:48:02 -0500 Subject: [PATCH 02/73] feat: scaffold db queries for getting transformationRuns by recordingId --- .../lib/query/transformationRuns/queries.ts | 21 ++++++++++++-- .../lib/query/transformations/mutations.ts | 4 ++- .../src/lib/services/db/DbService.dexie.ts | 29 +++++++++++++++---- apps/app/src/lib/services/db/DbService.ts | 3 ++ 4 files changed, 48 insertions(+), 9 deletions(-) diff --git a/apps/app/src/lib/query/transformationRuns/queries.ts b/apps/app/src/lib/query/transformationRuns/queries.ts index 17f6fdaca..b3d1f30ac 100644 --- a/apps/app/src/lib/query/transformationRuns/queries.ts +++ b/apps/app/src/lib/query/transformationRuns/queries.ts @@ -7,12 +7,15 @@ import type { Accessor } from '../types'; // Define the query key as a constant array export const transformationRunKeys = { all: ['transformationRuns'] as const, - byId: (id: string) => ['transformationRuns', id] as const, + byTransformationId: (id: string) => + ['transformationRuns', 'transformationId', id] as const, + byRecordingId: (recordingId: string) => + ['transformationRuns', 'recordingId', recordingId] as const, }; export const useTransformationRunsByIdQuery = (id: Accessor) => createResultQuery(() => ({ - queryKey: transformationRunKeys.byId(id()), + queryKey: transformationRunKeys.byTransformationId(id()), queryFn: async () => { const result = await DbTransformationsService.getTransformationRunsByTransformationId( @@ -21,3 +24,17 @@ export const useTransformationRunsByIdQuery = (id: Accessor) => return result; }, })); + +export const useTransformationRunsByRecordingIdQuery = ( + recordingId: Accessor, +) => + createResultQuery(() => ({ + queryKey: transformationRunKeys.byRecordingId(recordingId()), + queryFn: async () => { + const result = + await DbTransformationsService.getTransformationRunsByRecordingId( + recordingId(), + ); + return result; + }, + })); diff --git a/apps/app/src/lib/query/transformations/mutations.ts b/apps/app/src/lib/query/transformations/mutations.ts index 113a0135a..c693af31a 100644 --- a/apps/app/src/lib/query/transformations/mutations.ts +++ b/apps/app/src/lib/query/transformations/mutations.ts @@ -259,7 +259,9 @@ export const useRunTransformationWithToast = () => const transformationRun = transformationRunResult.data; queryClient.setQueryData( - transformationRunKeys.byId(transformationRun.transformationId), + transformationRunKeys.byTransformationId( + transformationRun.transformationId, + ), (oldData) => { if (!oldData) return [transformationRun]; return [transformationRun, ...oldData]; diff --git a/apps/app/src/lib/services/db/DbService.dexie.ts b/apps/app/src/lib/services/db/DbService.dexie.ts index f8144208b..84c0df378 100644 --- a/apps/app/src/lib/services/db/DbService.dexie.ts +++ b/apps/app/src/lib/services/db/DbService.dexie.ts @@ -187,9 +187,9 @@ class RecordingsDatabase extends Dexie { const blobs = oldRecordings.map(({ id, blob }) => ({ id, blob })); await tx - .table< - RecordingsDbSchemaV2['recordingMetadata'] - >('recordingMetadata') + .table( + 'recordingMetadata', + ) .bulkAdd(metadata); await tx .table('recordingBlobs') @@ -212,9 +212,9 @@ class RecordingsDatabase extends Dexie { upgrade: async (tx) => { // Get data from both tables const metadata = await tx - .table< - RecordingsDbSchemaV2['recordingMetadata'] - >('recordingMetadata') + .table( + 'recordingMetadata', + ) .toArray(); const blobs = await tx .table('recordingBlobs') @@ -589,6 +589,23 @@ export function createDbTransformationsServiceDexie() { }); }, + async getTransformationRunsByRecordingId(recordingId) { + return tryAsync({ + try: () => + db.transformationRuns + .where('recordingId') + .equals(recordingId) + .toArray(), + mapErr: (error) => + DbServiceErr({ + title: + 'Error getting transformation runs by recording id from Dexie', + description: 'Please try again', + error, + }), + }); + }, + async createTransformationRun(transformationRun) { const now = new Date().toISOString(); const transformationRunWithTimestamps = { diff --git a/apps/app/src/lib/services/db/DbService.ts b/apps/app/src/lib/services/db/DbService.ts index c80ad655d..795f6c5ed 100644 --- a/apps/app/src/lib/services/db/DbService.ts +++ b/apps/app/src/lib/services/db/DbService.ts @@ -103,6 +103,9 @@ export type DbTransformationsService = { getTransformationRunsByTransformationId: ( transformationId: string, ) => Promise>; + getTransformationRunsByRecordingId: ( + recordingId: string, + ) => Promise>; createTransformationRun: ( transformationRun: Pick< TransformationRun, From 88dad4ddf321f42c923096c9c9a6f3230937091f Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 18 Jan 2025 18:48:46 -0500 Subject: [PATCH 03/73] feat: scaffold ViewTransformationRunsDialog --- .../recordings/RecordingRowActions.svelte | 3 ++ .../ViewTransformationRunsDialog.svelte | 39 +++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte diff --git a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte index c90e58197..7baabdcbc 100644 --- a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte +++ b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte @@ -23,6 +23,7 @@ PlayIcon as StartTranscriptionIcon, } from 'lucide-svelte'; import EditRecordingDialog from './EditRecordingDialog.svelte'; + import ViewTransformationRunsDialog from './ViewTransformationRunsDialog.svelte'; const transcriber = getTranscriberFromContext(); @@ -118,6 +119,8 @@ {/if} + + { diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte new file mode 100644 index 000000000..72d5a6fb4 --- /dev/null +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -0,0 +1,39 @@ + + + + + {#snippet child({ props })} + + + + {/snippet} + + + + Transformation Runs + + View all transformation runs for this recording + + +
+ +
+ + + + + From d0de3b931abae84da29fefcf861dde370b93f65b Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sun, 19 Jan 2025 10:40:53 -0500 Subject: [PATCH 04/73] refactor: move transformationsQuery --- .../-components/RenderTransformationRuns.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte index f531b93f9..f8ea46669 100644 --- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte +++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte @@ -11,6 +11,10 @@ let { transformationId }: { transformationId: string } = $props(); + const transformationsQuery = useTransformationRunsByIdQuery( + () => transformationId, + ); + let expandedRunId = $state(null); function toggleRunExpanded(runId: string) { @@ -20,10 +24,6 @@ function formatDate(dateStr: string) { return format(new Date(dateStr), 'MMM d, yyyy h:mm a'); } - - const transformationsQuery = useTransformationRunsByIdQuery( - () => transformationId, - ); {#if transformationsQuery.isLoading} From 854a712a3778660a0de95db03e79eda47f9979fd Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sun, 19 Jan 2025 10:41:18 -0500 Subject: [PATCH 05/73] refactor: rename to transformationRunsByIdQuery --- .../-components/RenderTransformationRuns.svelte | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte index f8ea46669..4b5c1869d 100644 --- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte +++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte @@ -11,7 +11,7 @@ let { transformationId }: { transformationId: string } = $props(); - const transformationsQuery = useTransformationRunsByIdQuery( + const transformationRunsByIdQuery = useTransformationRunsByIdQuery( () => transformationId, ); @@ -26,14 +26,15 @@ } -{#if transformationsQuery.isLoading} +{#if transformationRunsByIdQuery.isLoading}
Loading runs...
-{:else if transformationsQuery.error} +{:else if transformationRunsByIdQuery.error}
- {transformationsQuery.error.title}: {transformationsQuery.error.description} + {transformationRunsByIdQuery.error.title}: {transformationRunsByIdQuery + .error.description}
-{:else if transformationsQuery.data} - {@const runs = transformationsQuery.data} +{:else if transformationRunsByIdQuery.data} + {@const runs = transformationRunsByIdQuery.data} {#if runs.length === 0}
From b0c15c847614597c452b7c0248561a03f940cdc7 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:02:51 -0500 Subject: [PATCH 06/73] feat: hide ping if has selectedTransformation --- apps/app/src/lib/components/SelectedTransformation.svelte | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/app/src/lib/components/SelectedTransformation.svelte b/apps/app/src/lib/components/SelectedTransformation.svelte index dc2a0f00d..055f60737 100644 --- a/apps/app/src/lib/components/SelectedTransformation.svelte +++ b/apps/app/src/lib/components/SelectedTransformation.svelte @@ -74,9 +74,11 @@ {:else} {/if} - + {#if !selectedTransformation} + + {/if} {/snippet} From 379956d63b7e6ba67de4229988a2a869417360f8 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:30:17 -0500 Subject: [PATCH 07/73] refactor: useTransformationRunsByTransformationIdQuery --- apps/app/src/lib/query/transformationRuns/queries.ts | 4 +++- .../-components/RenderTransformationRuns.svelte | 7 +++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/app/src/lib/query/transformationRuns/queries.ts b/apps/app/src/lib/query/transformationRuns/queries.ts index b3d1f30ac..6bb68a6ef 100644 --- a/apps/app/src/lib/query/transformationRuns/queries.ts +++ b/apps/app/src/lib/query/transformationRuns/queries.ts @@ -13,7 +13,9 @@ export const transformationRunKeys = { ['transformationRuns', 'recordingId', recordingId] as const, }; -export const useTransformationRunsByIdQuery = (id: Accessor) => +export const useTransformationRunsByTransformationIdQuery = ( + id: Accessor, +) => createResultQuery(() => ({ queryKey: transformationRunKeys.byTransformationId(id()), queryFn: async () => { diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte index 4b5c1869d..a94bd90d9 100644 --- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte +++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte @@ -5,15 +5,14 @@ import * as Card from '$lib/components/ui/card'; import { Label } from '$lib/components/ui/label'; import * as Table from '$lib/components/ui/table'; - import { useTransformationRunsByIdQuery } from '$lib/query/transformationRuns/queries'; + import { useTransformationRunsByTransformationIdQuery } from '$lib/query/transformationRuns/queries'; import { format } from 'date-fns'; import { ChevronDown, ChevronRight } from 'lucide-svelte'; let { transformationId }: { transformationId: string } = $props(); - const transformationRunsByIdQuery = useTransformationRunsByIdQuery( - () => transformationId, - ); + const transformationRunsByIdQuery = + useTransformationRunsByTransformationIdQuery(() => transformationId); let expandedRunId = $state(null); From f6b04b047beee77150de08a077aacb8c599da0c7 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:45:48 -0500 Subject: [PATCH 08/73] feat: useLatestTransformationRunByTransformationIdQuery --- .../src/lib/query/transformationRuns/queries.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/apps/app/src/lib/query/transformationRuns/queries.ts b/apps/app/src/lib/query/transformationRuns/queries.ts index 6bb68a6ef..a39542886 100644 --- a/apps/app/src/lib/query/transformationRuns/queries.ts +++ b/apps/app/src/lib/query/transformationRuns/queries.ts @@ -27,6 +27,21 @@ export const useTransformationRunsByTransformationIdQuery = ( }, })); +export const useLatestTransformationRunByTransformationIdQuery = ( + id: Accessor, +) => + createResultQuery(() => ({ + queryKey: transformationRunKeys.byTransformationId(id()), + queryFn: async () => { + const result = + await DbTransformationsService.getTransformationRunsByTransformationId( + id(), + ); + return result; + }, + select: (data) => data?.[0] ?? null, + })); + export const useTransformationRunsByRecordingIdQuery = ( recordingId: Accessor, ) => From 7dbac857e2a3fc9677826747f359b55cb296fb42 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:46:25 -0500 Subject: [PATCH 09/73] refactor: formatting and id() and queryKey --- .../lib/query/transformationRuns/queries.ts | 29 +++++-------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/apps/app/src/lib/query/transformationRuns/queries.ts b/apps/app/src/lib/query/transformationRuns/queries.ts index a39542886..3edeccd5b 100644 --- a/apps/app/src/lib/query/transformationRuns/queries.ts +++ b/apps/app/src/lib/query/transformationRuns/queries.ts @@ -18,13 +18,8 @@ export const useTransformationRunsByTransformationIdQuery = ( ) => createResultQuery(() => ({ queryKey: transformationRunKeys.byTransformationId(id()), - queryFn: async () => { - const result = - await DbTransformationsService.getTransformationRunsByTransformationId( - id(), - ); - return result; - }, + queryFn: () => + DbTransformationsService.getTransformationRunsByTransformationId(id()), })); export const useLatestTransformationRunByTransformationIdQuery = ( @@ -32,13 +27,8 @@ export const useLatestTransformationRunByTransformationIdQuery = ( ) => createResultQuery(() => ({ queryKey: transformationRunKeys.byTransformationId(id()), - queryFn: async () => { - const result = - await DbTransformationsService.getTransformationRunsByTransformationId( - id(), - ); - return result; - }, + queryFn: () => + DbTransformationsService.getTransformationRunsByTransformationId(id()), select: (data) => data?.[0] ?? null, })); @@ -47,11 +37,8 @@ export const useTransformationRunsByRecordingIdQuery = ( ) => createResultQuery(() => ({ queryKey: transformationRunKeys.byRecordingId(recordingId()), - queryFn: async () => { - const result = - await DbTransformationsService.getTransformationRunsByRecordingId( - recordingId(), - ); - return result; - }, + queryFn: () => + DbTransformationsService.getTransformationRunsByRecordingId( + recordingId(), + ), })); From df346ac8fd76bb6164f4063d01181c77355a9791 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:46:43 -0500 Subject: [PATCH 10/73] feat: sort getTransformationRunsByTransformationId --- apps/app/src/lib/services/db/DbService.dexie.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/apps/app/src/lib/services/db/DbService.dexie.ts b/apps/app/src/lib/services/db/DbService.dexie.ts index 84c0df378..a171fd2ce 100644 --- a/apps/app/src/lib/services/db/DbService.dexie.ts +++ b/apps/app/src/lib/services/db/DbService.dexie.ts @@ -577,8 +577,15 @@ export function createDbTransformationsServiceDexie() { db.transformationRuns .where('transformationId') .equals(transformationId) - .reverse() // Most recent first - .toArray(), + .reverse() + .toArray() + .then((runs) => + runs.sort( + (a, b) => + new Date(b.startedAt).getTime() - + new Date(a.startedAt).getTime(), + ), + ), mapErr: (error) => DbServiceErr({ title: From c3315bc762aaff45cdeb4054d56367caa25ae5a0 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:57:23 -0500 Subject: [PATCH 11/73] feat: sort by startedAt when getting transformationRuns --- apps/app/src/lib/services/db/DbService.dexie.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/app/src/lib/services/db/DbService.dexie.ts b/apps/app/src/lib/services/db/DbService.dexie.ts index a171fd2ce..29b38544b 100644 --- a/apps/app/src/lib/services/db/DbService.dexie.ts +++ b/apps/app/src/lib/services/db/DbService.dexie.ts @@ -602,7 +602,14 @@ export function createDbTransformationsServiceDexie() { db.transformationRuns .where('recordingId') .equals(recordingId) - .toArray(), + .toArray() + .then((runs) => + runs.sort( + (a, b) => + new Date(b.startedAt).getTime() - + new Date(a.startedAt).getTime(), + ), + ), mapErr: (error) => DbServiceErr({ title: From 838ceef5d57be3662214c24ef0e87cda10261358 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 17:08:22 -0500 Subject: [PATCH 12/73] feat: more detailed error message handled by DbServiceError --- .../src/lib/services/db/DbService.dexie.ts | 23 ------------------- apps/app/src/lib/services/db/DbService.ts | 10 ++++++-- 2 files changed, 8 insertions(+), 25 deletions(-) diff --git a/apps/app/src/lib/services/db/DbService.dexie.ts b/apps/app/src/lib/services/db/DbService.dexie.ts index 29b38544b..cdd8313af 100644 --- a/apps/app/src/lib/services/db/DbService.dexie.ts +++ b/apps/app/src/lib/services/db/DbService.dexie.ts @@ -298,7 +298,6 @@ export function createDbRecordingsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error getting all recordings from Dexie', - description: 'Please try again', error, }), }); @@ -316,7 +315,6 @@ export function createDbRecordingsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error getting latest recording from Dexie', - description: 'Please try again', error, }), }); @@ -331,7 +329,6 @@ export function createDbRecordingsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error getting recording by id from Dexie', - description: 'Please try again', error, }), }); @@ -351,7 +348,6 @@ export function createDbRecordingsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error adding recording to Dexie', - description: 'Please try again', error, }), }); @@ -372,7 +368,6 @@ export function createDbRecordingsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error updating recording in Dexie', - description: 'Please try again', error, }), }); @@ -388,7 +383,6 @@ export function createDbRecordingsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error deleting recording from Dexie', - description: 'Please try again', error, }), }); @@ -403,7 +397,6 @@ export function createDbRecordingsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error deleting recordings from Dexie', - description: 'Please try again', error, }), }); @@ -426,7 +419,6 @@ export function createDbRecordingsServiceDexie() { DbServiceErr({ title: 'Unable to get recording count while cleaning up old recordings', - description: 'Please try again', error, }), }); @@ -449,7 +441,6 @@ export function createDbRecordingsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Unable to clean up old recordings', - description: 'Some old recordings could not be deleted', error, }), }); @@ -467,7 +458,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error getting all transformations from Dexie', - description: 'Please try again', error, }), }); @@ -483,7 +473,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error getting transformation by id from Dexie', - description: 'Please try again', error, }), }); @@ -501,7 +490,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error adding transformation to Dexie', - description: 'Please try again', error, }), }); @@ -520,7 +508,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error updating transformation in Dexie', - description: 'Please try again', error, }), }); @@ -534,7 +521,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error deleting transformation from Dexie', - description: 'Please try again', error, }), }); @@ -549,7 +535,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error deleting transformations from Dexie', - description: 'Please try again', error, }), }); @@ -563,7 +548,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error getting transformation run by id from Dexie', - description: 'Please try again', error, }), }); @@ -590,7 +574,6 @@ export function createDbTransformationsServiceDexie() { DbServiceErr({ title: 'Error getting transformation runs by transformation id from Dexie', - description: 'Please try again', error, }), }); @@ -614,7 +597,6 @@ export function createDbTransformationsServiceDexie() { DbServiceErr({ title: 'Error getting transformation runs by recording id from Dexie', - description: 'Please try again', error, }), }); @@ -637,7 +619,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error adding transformation run to Dexie', - description: 'Please try again', error, }), }); @@ -678,7 +659,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error adding step run to transformation run in Dexie', - description: 'Please try again', error, }), }); @@ -716,7 +696,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error updating transformation step run status in Dexie', - description: 'Please try again', error, }), }); @@ -754,7 +733,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error updating transformation step run status in Dexie', - description: 'Please try again', error, }), }); @@ -783,7 +761,6 @@ export function createDbTransformationsServiceDexie() { mapErr: (error) => DbServiceErr({ title: 'Error updating transformation step run status in Dexie', - description: 'Please try again', error, }), }); diff --git a/apps/app/src/lib/services/db/DbService.ts b/apps/app/src/lib/services/db/DbService.ts index 795f6c5ed..e2286d356 100644 --- a/apps/app/src/lib/services/db/DbService.ts +++ b/apps/app/src/lib/services/db/DbService.ts @@ -11,7 +11,6 @@ import { nanoid } from 'nanoid/non-secure'; type DbErrorProperties = { _tag: 'DbServiceError'; title: string; - description: string; error: unknown; }; @@ -21,7 +20,14 @@ export type DbServiceResult = Ok | DbServiceErr; export const DbServiceErr = ( properties: Omit, ): DbServiceErr => { - return Err({ _tag: 'DbServiceError', ...properties }); + return Err({ + _tag: 'DbServiceError', + description: + properties.error instanceof Error + ? properties.error.message + : 'Unknown error', + ...properties, + }); }; export function generateDefaultTransformation(): Transformation { From fa0597418bd0bcf495a144b63c7b9deba2ab29ce Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 17:09:07 -0500 Subject: [PATCH 13/73] fix: add description t ype --- apps/app/src/lib/services/db/DbService.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/app/src/lib/services/db/DbService.ts b/apps/app/src/lib/services/db/DbService.ts index e2286d356..c0a8eca59 100644 --- a/apps/app/src/lib/services/db/DbService.ts +++ b/apps/app/src/lib/services/db/DbService.ts @@ -14,7 +14,7 @@ type DbErrorProperties = { error: unknown; }; -export type DbServiceErr = Err; +export type DbServiceErr = Err; export type DbServiceResult = Ok | DbServiceErr; export const DbServiceErr = ( From 93a89f5ec7357f064d759e9d2f154b82375cf317 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 17:09:22 -0500 Subject: [PATCH 14/73] feat: useLatestTransformationRunByRecordingIdQuery --- .../src/lib/query/transformationRuns/queries.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/apps/app/src/lib/query/transformationRuns/queries.ts b/apps/app/src/lib/query/transformationRuns/queries.ts index 3edeccd5b..5daed6b12 100644 --- a/apps/app/src/lib/query/transformationRuns/queries.ts +++ b/apps/app/src/lib/query/transformationRuns/queries.ts @@ -22,17 +22,18 @@ export const useTransformationRunsByTransformationIdQuery = ( DbTransformationsService.getTransformationRunsByTransformationId(id()), })); -export const useLatestTransformationRunByTransformationIdQuery = ( - id: Accessor, +export const useTransformationRunsByRecordingIdQuery = ( + recordingId: Accessor, ) => createResultQuery(() => ({ - queryKey: transformationRunKeys.byTransformationId(id()), + queryKey: transformationRunKeys.byRecordingId(recordingId()), queryFn: () => - DbTransformationsService.getTransformationRunsByTransformationId(id()), - select: (data) => data?.[0] ?? null, + DbTransformationsService.getTransformationRunsByRecordingId( + recordingId(), + ), })); -export const useTransformationRunsByRecordingIdQuery = ( +export const useLatestTransformationRunByRecordingIdQuery = ( recordingId: Accessor, ) => createResultQuery(() => ({ @@ -41,4 +42,5 @@ export const useTransformationRunsByRecordingIdQuery = ( DbTransformationsService.getTransformationRunsByRecordingId( recordingId(), ), + select: (data) => data?.[0] ?? null, })); From 1d60e852061b2a0630a2b927497adc1ab0dab0d2 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Tue, 21 Jan 2025 17:17:15 -0500 Subject: [PATCH 15/73] feat: ViewTransformationRuns with a window to open a popover --- .../lib/query/transformationRuns/queries.ts | 2 +- .../ViewTransformationRunsDialog.svelte | 66 +++++++++++-------- 2 files changed, 39 insertions(+), 29 deletions(-) diff --git a/apps/app/src/lib/query/transformationRuns/queries.ts b/apps/app/src/lib/query/transformationRuns/queries.ts index 5daed6b12..60dd7837a 100644 --- a/apps/app/src/lib/query/transformationRuns/queries.ts +++ b/apps/app/src/lib/query/transformationRuns/queries.ts @@ -42,5 +42,5 @@ export const useLatestTransformationRunByRecordingIdQuery = ( DbTransformationsService.getTransformationRunsByRecordingId( recordingId(), ), - select: (data) => data?.[0] ?? null, + select: (data) => data.at(0) ?? null, })); diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte index 72d5a6fb4..5317de741 100644 --- a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -4,36 +4,46 @@ import WhisperingButton from '$lib/components/WhisperingButton.svelte'; import { ListIcon } from 'lucide-svelte'; import RenderTransformationRuns from '../transformations/-components/RenderTransformationRuns.svelte'; + import { useLatestTransformationRunByRecordingIdQuery } from '$lib/query/transformationRuns/queries'; let { recordingId }: { recordingId: string } = $props(); + + const latestTransformationRunByRecordingIdQuery = + useLatestTransformationRunByRecordingIdQuery(() => recordingId); + let isOpen = $state(false); - - - {#snippet child({ props })} - - - - {/snippet} - - - - Transformation Runs - - View all transformation runs for this recording - - -
- -
- - - - - +{#if latestTransformationRunByRecordingIdQuery.data} + + + {#snippet child({ props })} + +
+ {latestTransformationRunByRecordingIdQuery.data?.output} +
+ + {/snippet} + + + + Transformation Runs + + View all transformation runs for this recording + + +
+ +
+ + + + + +{/if} From 765a777a7dca381f448f21bfcce40e3abbcb7118 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Thu, 23 Jan 2025 10:34:47 -0500 Subject: [PATCH 16/73] refactor: rename to transformationRunsByRecordingIdQuery --- .../RenderTransformationRuns.svelte | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte index a94bd90d9..397b9e15e 100644 --- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte +++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte @@ -5,14 +5,14 @@ import * as Card from '$lib/components/ui/card'; import { Label } from '$lib/components/ui/label'; import * as Table from '$lib/components/ui/table'; - import { useTransformationRunsByTransformationIdQuery } from '$lib/query/transformationRuns/queries'; + import { useTransformationRunsByRecordingIdQuery } from '$lib/query/transformationRuns/queries'; import { format } from 'date-fns'; import { ChevronDown, ChevronRight } from 'lucide-svelte'; - let { transformationId }: { transformationId: string } = $props(); + let { recordingId }: { recordingId: string } = $props(); - const transformationRunsByIdQuery = - useTransformationRunsByTransformationIdQuery(() => transformationId); + const transformationRunsByRecordingIdQuery = + useTransformationRunsByRecordingIdQuery(() => recordingId); let expandedRunId = $state(null); @@ -25,15 +25,15 @@ } -{#if transformationRunsByIdQuery.isLoading} +{#if transformationRunsByRecordingIdQuery.isLoading}
Loading runs...
-{:else if transformationRunsByIdQuery.error} +{:else if transformationRunsByRecordingIdQuery.error}
- {transformationRunsByIdQuery.error.title}: {transformationRunsByIdQuery - .error.description} + {transformationRunsByRecordingIdQuery.error.title}: + {transformationRunsByRecordingIdQuery.error.description}
-{:else if transformationRunsByIdQuery.data} - {@const runs = transformationRunsByIdQuery.data} +{:else if transformationRunsByRecordingIdQuery.data} + {@const runs = transformationRunsByRecordingIdQuery.data} {#if runs.length === 0}
From 94ac86285572b0879b440ee3036a4ef90aa50658 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Thu, 23 Jan 2025 12:16:46 -0500 Subject: [PATCH 17/73] wip feat: formatting ViewTransformationRunsDialog --- .../(config)/recordings/ViewTransformationRunsDialog.svelte | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte index 5317de741..5cc61d0a5 100644 --- a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -22,11 +22,9 @@ {...props} variant="outline" tooltipContent="View Transformation Runs" - class="w-full max-w-md text-left text-sm leading-snug overflow-y-auto h-full max-h-32 whitespace-pre-wrap break-words [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent" + class="w-full block max-w-md text-left text-sm leading-snug overflow-y-auto h-full max-h-24 text-wrap [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent" > -
- {latestTransformationRunByRecordingIdQuery.data?.output} -
+ {latestTransformationRunByRecordingIdQuery.data?.output} {/snippet} From 44bf893d14de4469b1540a68f3b49227316958fd Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Thu, 23 Jan 2025 12:24:14 -0500 Subject: [PATCH 18/73] feat: TranscribedText dialog styling --- .../recordings/TranscribedText.svelte | 75 ++++++++++++++++--- 1 file changed, 66 insertions(+), 9 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte index 02e144054..3f99ae13f 100644 --- a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte +++ b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte @@ -1,18 +1,75 @@ -

- {transcribedText} -

+ + + {#snippet child({ props })} + + {transcribedText} + + {/snippet} + + + + Transcribed Text + + + + + + + + From 6bd2ef09847d49c154eaf42adf6c5aee735c4d31 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Thu, 23 Jan 2025 12:31:44 -0500 Subject: [PATCH 19/73] feat: update props to accept runs rather than id --- .../ViewTransformationRunsDialog.svelte | 21 +- .../-components/RenderTransformation.svelte | 17 +- .../RenderTransformationRuns.svelte | 261 +++++++++--------- 3 files changed, 159 insertions(+), 140 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte index 5cc61d0a5..7f1941535 100644 --- a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -4,13 +4,19 @@ import WhisperingButton from '$lib/components/WhisperingButton.svelte'; import { ListIcon } from 'lucide-svelte'; import RenderTransformationRuns from '../transformations/-components/RenderTransformationRuns.svelte'; - import { useLatestTransformationRunByRecordingIdQuery } from '$lib/query/transformationRuns/queries'; + import { + useLatestTransformationRunByRecordingIdQuery, + useTransformationRunsByRecordingIdQuery, + } from '$lib/query/transformationRuns/queries'; let { recordingId }: { recordingId: string } = $props(); const latestTransformationRunByRecordingIdQuery = useLatestTransformationRunByRecordingIdQuery(() => recordingId); + const transformationRunsByRecordingIdQuery = + useTransformationRunsByRecordingIdQuery(() => recordingId); + let isOpen = $state(false); @@ -36,7 +42,18 @@
- + {#if transformationRunsByRecordingIdQuery.isPending} +
Loading runs...
+ {:else if transformationRunsByRecordingIdQuery.error} +
+ {transformationRunsByRecordingIdQuery.error.title}: + {transformationRunsByRecordingIdQuery.error.description} +
+ {:else if transformationRunsByRecordingIdQuery.data} + + {/if}
import * as Resizable from '$lib/components/ui/resizable'; + import { useTransformationRunsByTransformationIdQuery } from '$lib/query/transformationRuns/queries'; import type { Transformation } from '$lib/services/db'; import RenderTransformationConfigurationAndSteps from './RenderTransformationConfigurationAndSteps.svelte'; import RenderTransformationRuns from './RenderTransformationRuns.svelte'; @@ -14,6 +15,9 @@ setTransformation: (transformation: Transformation) => void; setTransformationDebounced: (transformation: Transformation) => void; } = $props(); + + const transformationRunsByTransformationIdQuery = + useTransformationRunsByTransformationIdQuery(() => transformation.id); @@ -32,7 +36,18 @@ - + {#if transformationRunsByTransformationIdQuery.isPending} +
Loading runs...
+ {:else if transformationRunsByTransformationIdQuery.error} +
+ {transformationRunsByTransformationIdQuery.error.title}: + {transformationRunsByTransformationIdQuery.error.description} +
+ {:else if transformationRunsByTransformationIdQuery.data} + + {/if} diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte index 397b9e15e..9adda554a 100644 --- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte +++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte @@ -5,14 +5,11 @@ import * as Card from '$lib/components/ui/card'; import { Label } from '$lib/components/ui/label'; import * as Table from '$lib/components/ui/table'; - import { useTransformationRunsByRecordingIdQuery } from '$lib/query/transformationRuns/queries'; + import type { TransformationRun } from '$lib/services/db'; import { format } from 'date-fns'; import { ChevronDown, ChevronRight } from 'lucide-svelte'; - let { recordingId }: { recordingId: string } = $props(); - - const transformationRunsByRecordingIdQuery = - useTransformationRunsByRecordingIdQuery(() => recordingId); + let { runs }: { runs: TransformationRun[] } = $props(); let expandedRunId = $state(null); @@ -25,143 +22,133 @@ } -{#if transformationRunsByRecordingIdQuery.isLoading} -
Loading runs...
-{:else if transformationRunsByRecordingIdQuery.error} -
- {transformationRunsByRecordingIdQuery.error.title}: - {transformationRunsByRecordingIdQuery.error.description} -
-{:else if transformationRunsByRecordingIdQuery.data} - {@const runs = transformationRunsByRecordingIdQuery.data} - {#if runs.length === 0} -
-
-
- -
-
-

No Runs Yet

-

- When you run a transformation, the results will appear here. -

-
+{#if runs.length === 0} +
+
+
+ +
+
+

No Runs Yet

+

+ When you run a transformation, the results will appear here. +

- {:else} - - +
+{:else} + + + + Expand + Status + Started + Completed + + + + {#each runs as run} - Expand - Status - Started - Completed + + + + + + {run.status} + + + + {formatDate(run.startedAt)} + + + {run.completedAt ? formatDate(run.completedAt) : '-'} + - - - {#each runs as run} - - - - - - - {run.status} - - - - {formatDate(run.startedAt)} - - - {run.completedAt ? formatDate(run.completedAt) : '-'} - - - {#if expandedRunId === run.id} - - - - {#if run.output} - - {:else if run.error} - - {/if} - {#if run.stepRuns.length > 0} -
- - - - + {#if expandedRunId === run.id} + + + + {#if run.output} + + {:else if run.error} + + {/if} + {#if run.stepRuns.length > 0} +
+ + + + + + Status + Started + Completed + Input + Output + + + + {#each run.stepRuns as stepRun} - Status - Started - Completed - Input - Output + + + {stepRun.status} + + + + {formatDate(stepRun.startedAt)} + + + {stepRun.completedAt + ? formatDate(stepRun.completedAt) + : '-'} + + + {stepRun.input} + + + {#if stepRun.output} + + {:else if stepRun.error} + + {/if} + - - - {#each run.stepRuns as stepRun} - - - - {stepRun.status} - - - - {formatDate(stepRun.startedAt)} - - - {stepRun.completedAt - ? formatDate(stepRun.completedAt) - : '-'} - - - {stepRun.input} - - - {#if stepRun.output} - - {:else if stepRun.error} - - {/if} - - - {/each} - - - -
- {/if} - - - {/if} - {/each} - - - {/if} + {/each} + + + +
+ {/if} + + + {/if} + {/each} + + {/if} From 90cfb3b55e6a1b9e2c68e5070d077c05e70f747f Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Thu, 23 Jan 2025 12:33:41 -0500 Subject: [PATCH 20/73] chore: simplify and remove the query for getting the latest one, move it to a $derived --- .../lib/query/transformationRuns/queries.ts | 12 ------------ .../ViewTransformationRunsDialog.svelte | 19 ++++++++----------- 2 files changed, 8 insertions(+), 23 deletions(-) diff --git a/apps/app/src/lib/query/transformationRuns/queries.ts b/apps/app/src/lib/query/transformationRuns/queries.ts index 60dd7837a..21641900c 100644 --- a/apps/app/src/lib/query/transformationRuns/queries.ts +++ b/apps/app/src/lib/query/transformationRuns/queries.ts @@ -32,15 +32,3 @@ export const useTransformationRunsByRecordingIdQuery = ( recordingId(), ), })); - -export const useLatestTransformationRunByRecordingIdQuery = ( - recordingId: Accessor, -) => - createResultQuery(() => ({ - queryKey: transformationRunKeys.byRecordingId(recordingId()), - queryFn: () => - DbTransformationsService.getTransformationRunsByRecordingId( - recordingId(), - ), - select: (data) => data.at(0) ?? null, - })); diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte index 7f1941535..6fd4e65fa 100644 --- a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -1,26 +1,23 @@ -{#if latestTransformationRunByRecordingIdQuery.data} +{#if latestTransformationRunByRecordingId} {#snippet child({ props })} @@ -30,7 +27,7 @@ tooltipContent="View Transformation Runs" class="w-full block max-w-md text-left text-sm leading-snug overflow-y-auto h-full max-h-24 text-wrap [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent" > - {latestTransformationRunByRecordingIdQuery.data?.output} + {latestTransformationRunByRecordingId.output} {/snippet} From 319f13a30db1347e938dc61f5495d7be27684896 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Thu, 23 Jan 2025 12:44:50 -0500 Subject: [PATCH 21/73] feat: Copyable variants --- .../{CopyableCode.svelte => Copyable.svelte} | 18 +++++++-------- .../recordings/TranscribedText.svelte | 5 ++-- .../settings/transcription/+page.svelte | 8 ++++--- .../RenderTransformationRuns.svelte | 23 ++++++++++--------- 4 files changed, 28 insertions(+), 26 deletions(-) rename apps/app/src/lib/components/{CopyableCode.svelte => Copyable.svelte} (78%) diff --git a/apps/app/src/lib/components/CopyableCode.svelte b/apps/app/src/lib/components/Copyable.svelte similarity index 78% rename from apps/app/src/lib/components/CopyableCode.svelte rename to apps/app/src/lib/components/Copyable.svelte index 5bfa1a639..ed5a2f438 100644 --- a/apps/app/src/lib/components/CopyableCode.svelte +++ b/apps/app/src/lib/components/Copyable.svelte @@ -1,21 +1,19 @@ @@ -37,7 +35,7 @@ label: string; hideLabel?: boolean; codeText: string; - variant?: CopyableCodeVariant; + variant: CopyableVariants; } = $props(); let hasCopied = $state(false); @@ -54,7 +52,7 @@ - 
+	
 	
-	import CopyableCode from '$lib/components/CopyableCode.svelte';
+	import Copyable from '$lib/components/Copyable.svelte';
 	import WhisperingButton from '$lib/components/WhisperingButton.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
@@ -38,7 +38,8 @@
 		
 			Transcribed Text
 		
-		
-	import CopyableCode from '$lib/components/CopyableCode.svelte';
+	import Copyable from '$lib/components/Copyable.svelte';
 	import {
 		LabeledInput,
 		LabeledSelect,
@@ -114,13 +114,15 @@
 					
 
 					
-						
 					
 					
-						
diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte
index 9adda554a..6002798f3 100644
--- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte
+++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte
@@ -1,5 +1,5 @@
 
+
+
+		copyTextToClipboardWithToast.mutate(
+			{ label, text: copyableText },
+			{ onSuccess: () => (hasCopied = true) },
+		)}
+>
+	Copy
+	{#if hasCopied}
+		
+	{:else}
+		
+	{/if}
+
diff --git a/apps/app/src/lib/components/Copyable.svelte b/apps/app/src/lib/components/Copyable.svelte
index 39f1970a0..9229346d8 100644
--- a/apps/app/src/lib/components/Copyable.svelte
+++ b/apps/app/src/lib/components/Copyable.svelte
@@ -6,7 +6,7 @@
 		variants: {
 			variant: {
 				code: 'bg-muted text-muted-foreground font-semibold font-mono',
-				prose: 'bg-muted text-muted-foreground',
+				text: 'bg-muted text-muted-foreground',
 				error: 'bg-destructive/10 text-destructive',
 			},
 		},
@@ -18,13 +18,9 @@
 
 
 
 
 

@@ -53,23 +40,10 @@
 		{label}
 	
 	
-	
-				copyTextToClipboardWithToast.mutate(
-					{ label: 'code', text: copyableText },
-					{ onSuccess: () => (hasCopied = true) },
-				)}>
-			Copy
-    {#if hasCopied}
-				
-			{:else}
-				
-			{/if}
-		
 {copyableText}
+	
 

 

diff --git a/apps/app/src/lib/query/clipboard/mutations.ts b/apps/app/src/lib/query/clipboard/mutations.ts
index f15047cbb..747b2afcb 100644
--- a/apps/app/src/lib/query/clipboard/mutations.ts
+++ b/apps/app/src/lib/query/clipboard/mutations.ts
@@ -10,13 +10,14 @@ export const useCopyTextToClipboard = () =>
 		},
 	}));
 
+export type CopyToClipboardLabel = 'transcribed text' | 'transcribed text (joined)' | 'code';
 export const useCopyTextToClipboardWithToast = () =>
 	createMutation(() => ({
 		mutationFn: async ({
 			label,
 			text,
 		}: {
-			label: 'transcribed text' | 'transcribed text (joined)' | 'code';
+			label: CopyToClipboardLabel;
 			text: string;
 		}) => {
 			const result = await ClipboardService.setClipboardText(text);

From c3dbd82411941760e0ba9d6aa196c98743c3cd22 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Fri, 24 Jan 2025 17:14:18 -0500
Subject: [PATCH 28/73] refactor: CopyToClipboardbutton

---
 .../components/CopyToClipboardButton.svelte   |   5 +-
 .../recordings/TranscribedText.svelte         | 125 ++++++++++--------
 2 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/apps/app/src/lib/components/CopyToClipboardButton.svelte b/apps/app/src/lib/components/CopyToClipboardButton.svelte
index 7e240f2c9..81e148736 100644
--- a/apps/app/src/lib/components/CopyToClipboardButton.svelte
+++ b/apps/app/src/lib/components/CopyToClipboardButton.svelte
@@ -1,4 +1,5 @@
 
 
-
-	
-		{#snippet child({ props })}
-			
-				{transcribedText}
-			
-		{/snippet}
-	
-	
-		
-			Transcribed Text
-		
-		
-		
-			
-			
+				
-		
-	
-
+							{
+								onSuccess: () => {
+									isDialogOpen = false;
+								},
+							},
+						)}
+					disabled={copyTextToClipboardWithToast.isPending}
+				>
+					{#if copyTextToClipboardWithToast.isPending}
+						
+					{:else}
+						
+					{/if}
+					Copy Text
+				
+			
+		
+	
+
+	
+
From af870a007958d382ef6dc44f1be0fdcc374a2a4d Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Fri, 24 Jan 2025 17:20:38 -0500 Subject: [PATCH 29/73] feat: no need for cn in CopyToClipboardButton --- .../src/lib/components/CopyToClipboardButton.svelte | 12 ++++-------- apps/app/src/lib/components/WhisperingButton.svelte | 4 ++-- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/apps/app/src/lib/components/CopyToClipboardButton.svelte b/apps/app/src/lib/components/CopyToClipboardButton.svelte index 81e148736..6bae08341 100644 --- a/apps/app/src/lib/components/CopyToClipboardButton.svelte +++ b/apps/app/src/lib/components/CopyToClipboardButton.svelte @@ -1,25 +1,22 @@ copyTextToClipboardWithToast.mutate( { label, text: copyableText }, { onSuccess: () => (hasCopied = true) }, )} - {...restProps} > Copy {#if hasCopied} diff --git a/apps/app/src/lib/components/WhisperingButton.svelte b/apps/app/src/lib/components/WhisperingButton.svelte index 71924c8de..8d8bad838 100644 --- a/apps/app/src/lib/components/WhisperingButton.svelte +++ b/apps/app/src/lib/components/WhisperingButton.svelte @@ -9,7 +9,7 @@ children, tooltipContent, ...restProps - }: { id?: string; tooltipContent: string | Snippet } & Props = $props(); + }: Props & { tooltipContent: string | Snippet } = $props(); {#snippet tooltip()} @@ -22,7 +22,7 @@ - + {#snippet child({ props: tooltipProps })} - - + + Date: Sat, 25 Jan 2025 09:24:10 -0500 Subject: [PATCH 31/73] refactor: props for TranscribedText --- .../routes/(config)/recordings/+page.svelte | 6 +++- .../recordings/TranscribedText.svelte | 28 ++++++++----------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/+page.svelte b/apps/app/src/routes/(config)/recordings/+page.svelte index 529d55ff6..97bdea015 100644 --- a/apps/app/src/routes/(config)/recordings/+page.svelte +++ b/apps/app/src/routes/(config)/recordings/+page.svelte @@ -50,6 +50,7 @@ import RenderAudioUrl from './RenderAudioUrl.svelte'; import TranscribedText from './TranscribedText.svelte'; import ViewTransformationRunsDialog from './ViewTransformationRunsDialog.svelte'; + import { createRecordingViewTransitionName } from '$lib/utils/createRecordingViewTransitionName'; const transcriber = getTranscriberFromContext(); @@ -151,8 +152,11 @@ cell: ({ getValue, row }) => { const transcribedText = getValue(); return renderComponent(TranscribedText, { - recordingId: row.id, transcribedText, + buttonViewTransitionName: createRecordingViewTransitionName({ + recordingId: row.id, + propertyName: 'transcribedText', + }), }); }, }, diff --git a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte index d1582a16b..8341827e4 100644 --- a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte +++ b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte @@ -1,22 +1,22 @@ @@ -30,19 +30,16 @@ variant="outline" tooltipContent="View Transcribed Text" class="w-full block max-w-48 text-left text-sm leading-snug overflow-y-auto h-full max-h-12 text-wrap [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent" - style="view-transition-name: {createRecordingViewTransitionName({ - recordingId: recordingId, - propertyName: 'transcribedText', - })}" + style="view-transition-name: {buttonViewTransitionName}" > {transcribedText} {/snippet} - + Transcribed Text 
{transcribedText}
+ class="relative whitespace-normal rounded p-4 text-sm prose bg-muted text-muted-foreground max-h-96 overflow-y-auto">{transcribedText}
From 8f1f6603440a75c3395e25586201a1a01604892a Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 09:30:11 -0500 Subject: [PATCH 32/73] feat: make it a history icon again --- .../(config)/recordings/ViewTransformationRunsDialog.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte index 6fd4e65fa..13e5adad0 100644 --- a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -3,6 +3,7 @@ import { Button } from '$lib/components/ui/button'; import * as Dialog from '$lib/components/ui/dialog/index.js'; import { useTransformationRunsByRecordingIdQuery } from '$lib/query/transformationRuns/queries'; + import { HistoryIcon } from 'lucide-svelte'; import RenderTransformationRuns from '../transformations/-components/RenderTransformationRuns.svelte'; let { recordingId }: { recordingId: string } = $props(); @@ -25,9 +26,9 @@ {...props} variant="outline" tooltipContent="View Transformation Runs" - class="w-full block max-w-md text-left text-sm leading-snug overflow-y-auto h-full max-h-24 text-wrap [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent" > - {latestTransformationRunByRecordingId.output} + + View Transformation Runs {/snippet} From e146c6588df37eeb92f45db1b2ea37e66b71208e Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 09:37:53 -0500 Subject: [PATCH 33/73] wip feat: table shares CopyableTextPopover --- .../routes/(config)/recordings/+page.svelte | 12 ++-- .../recordings/CopyableTextPopover.svelte | 71 +++++++++++++++++++ ...ransformationRunOutputByRecordingId.svelte | 34 +++++++++ .../recordings/TranscribedText.svelte | 70 +++--------------- 4 files changed, 120 insertions(+), 67 deletions(-) create mode 100644 apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte create mode 100644 apps/app/src/routes/(config)/recordings/LatestTransformationRunOutputByRecordingId.svelte diff --git a/apps/app/src/routes/(config)/recordings/+page.svelte b/apps/app/src/routes/(config)/recordings/+page.svelte index 97bdea015..c51c1decb 100644 --- a/apps/app/src/routes/(config)/recordings/+page.svelte +++ b/apps/app/src/routes/(config)/recordings/+page.svelte @@ -51,6 +51,7 @@ import TranscribedText from './TranscribedText.svelte'; import ViewTransformationRunsDialog from './ViewTransformationRunsDialog.svelte'; import { createRecordingViewTransitionName } from '$lib/utils/createRecordingViewTransitionName'; + import LatestTransformationRunOutputByRecordingId from './LatestTransformationRunOutputByRecordingId.svelte'; const transcriber = getTranscriberFromContext(); @@ -152,11 +153,8 @@ cell: ({ getValue, row }) => { const transcribedText = getValue(); return renderComponent(TranscribedText, { + recordingId: row.id, transcribedText, - buttonViewTransitionName: createRecordingViewTransitionName({ - recordingId: row.id, - propertyName: 'transcribedText', - }), }); }, }, @@ -166,11 +164,13 @@ header: ({ column }) => renderComponent(SortableTableHeader, { column, - headerText: 'Transformation Runs', + headerText: 'Latest Transformation Run Output', }), cell: ({ getValue }) => { const recordingId = getValue(); - return renderComponent(ViewTransformationRunsDialog, { recordingId }); + return renderComponent(LatestTransformationRunOutputByRecordingId, { + recordingId, + }); }, }, { diff --git a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte new file mode 100644 index 000000000..bf70a08f1 --- /dev/null +++ b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte @@ -0,0 +1,71 @@ + + +
+ + + {#snippet child({ props })} + + {text} + + {/snippet} + + + Transcribed Text + 
{text}
+ + + + + + + + +
diff --git a/apps/app/src/routes/(config)/recordings/LatestTransformationRunOutputByRecordingId.svelte b/apps/app/src/routes/(config)/recordings/LatestTransformationRunOutputByRecordingId.svelte new file mode 100644 index 000000000..2bbb6c613 --- /dev/null +++ b/apps/app/src/routes/(config)/recordings/LatestTransformationRunOutputByRecordingId.svelte @@ -0,0 +1,34 @@ + + +
+ {#if latestTransformationRunByRecordingId?.output} + + {/if} + +
diff --git a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte index 8341827e4..58b03c309 100644 --- a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte +++ b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte @@ -1,71 +1,19 @@ -
- - - {#snippet child({ props })} - - {transcribedText} - - {/snippet} - - - Transcribed Text - 
{transcribedText}
- - - - - - - - -
+ From 6a1b378d857af1c4b8ebde4bc5fbbd6e55f9ce20 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 09:38:38 -0500 Subject: [PATCH 34/73] feat: simplify template of ViewTransformationRunsDialog to just use icon as trigger --- .../ViewTransformationRunsDialog.svelte | 85 +++++++++---------- 1 file changed, 39 insertions(+), 46 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte index 13e5adad0..be1201dab 100644 --- a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -11,52 +11,45 @@ const transformationRunsByRecordingIdQuery = useTransformationRunsByRecordingIdQuery(() => recordingId); - const latestTransformationRunByRecordingId = $derived( - transformationRunsByRecordingIdQuery.data?.at(0) ?? null, - ); - let isOpen = $state(false); -{#if latestTransformationRunByRecordingId} - - - {#snippet child({ props })} - - - View Transformation Runs - - {/snippet} - - - - Transformation Runs - - View all transformation runs for this recording - - -
- {#if transformationRunsByRecordingIdQuery.isPending} -
Loading runs...
- {:else if transformationRunsByRecordingIdQuery.error} -
- {transformationRunsByRecordingIdQuery.error.title}: - {transformationRunsByRecordingIdQuery.error.description} -
- {:else if transformationRunsByRecordingIdQuery.data} - - {/if} -
- - - - - -{/if} + + + {#snippet child({ props })} + + + View Transformation Runs + + {/snippet} + + + + Transformation Runs + + View all transformation runs for this recording + + +
+ {#if transformationRunsByRecordingIdQuery.isPending} +
Loading runs...
+ {:else if transformationRunsByRecordingIdQuery.error} +
+ {transformationRunsByRecordingIdQuery.error.title}: + {transformationRunsByRecordingIdQuery.error.description} +
+ {:else if transformationRunsByRecordingIdQuery.data} + + {/if} +
+ + + + + From 3c916a536833ff5eb87d09517049f7928b9a5a64 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 09:38:50 -0500 Subject: [PATCH 35/73] chore: remove redundant sr-only --- .../(config)/recordings/ViewTransformationRunsDialog.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte index be1201dab..76db28bcd 100644 --- a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -23,7 +23,6 @@ tooltipContent="View Transformation Runs" > - View Transformation Runs {/snippet} From 17ed4a1246512acc46eba7cec982c9c79bbb21c0 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 10:03:12 -0500 Subject: [PATCH 36/73] feat: updates to template in TranscribedText.svelte --- .../recordings/CopyableTextPopover.svelte | 89 +++++++++---------- .../recordings/TranscribedText.svelte | 10 ++- 2 files changed, 49 insertions(+), 50 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte index bf70a08f1..dee9f8a78 100644 --- a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte +++ b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte @@ -1,5 +1,4 @@ -
- - - {#snippet child({ props })} - - {text} - - {/snippet} - - - Transcribed Text - 
{text}
- - - - - - - - -
+ + + {#snippet child({ props })} + + {text} + + {/snippet} + + + Transcribed Text + 
{text}
+ + + + + + diff --git a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte index 58b03c309..e513ac05b 100644 --- a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte +++ b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte @@ -1,4 +1,5 @@ - +
+ + +
From 92aa91ef2af4bf3bd321e1c971e1fe728ae01a35 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 10:03:48 -0500 Subject: [PATCH 37/73] chore: variant=text --- .../-components/RenderTransformationRuns.svelte | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte index 52f123eaf..473199f59 100644 --- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte +++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationRuns.svelte @@ -79,14 +79,10 @@ {#if expandedRunId === run.id} - + {#if run.output} @@ -133,7 +129,7 @@ {#if stepRun.output} Date: Sat, 25 Jan 2025 10:04:09 -0500 Subject: [PATCH 38/73] refactor: use ClipboardIcon --- apps/app/src/lib/components/CopyToClipboardButton.svelte | 5 +++-- .../RenderTransformationConfigurationAndSteps.svelte | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/app/src/lib/components/CopyToClipboardButton.svelte b/apps/app/src/lib/components/CopyToClipboardButton.svelte index 6bae08341..9c76fc536 100644 --- a/apps/app/src/lib/components/CopyToClipboardButton.svelte +++ b/apps/app/src/lib/components/CopyToClipboardButton.svelte @@ -5,7 +5,8 @@ type CopyToClipboardLabel, useCopyTextToClipboardWithToast, } from '$lib/query/clipboard/mutations'; - import { CheckIcon, CopyIcon } from 'lucide-svelte'; + import { CheckIcon } from 'lucide-svelte'; + import { ClipboardIcon } from '$lib/components/icons'; const copyTextToClipboardWithToast = useCopyTextToClipboardWithToast(); @@ -44,6 +45,6 @@ {#if hasCopied} {:else} - + {/if} diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationConfigurationAndSteps.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationConfigurationAndSteps.svelte index 34f72a966..feaa54173 100644 --- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationConfigurationAndSteps.svelte +++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationConfigurationAndSteps.svelte @@ -28,6 +28,7 @@ import AnthropicApiKeyInput from '../../-components/AnthropicApiKeyInput.svelte'; import GroqApiKeyInput from '../../-components/GroqApiKeyInput.svelte'; import OpenAiApiKeyInput from '../../-components/OpenAiApiKeyInput.svelte'; + import { ClipboardIcon } from '$lib/components/icons'; let { transformation, @@ -166,7 +167,7 @@ class="h-8 w-8" onclick={() => duplicateStep(index)} > - + Date: Sat, 25 Jan 2025 10:05:01 -0500 Subject: [PATCH 39/73] fix: back to CopyIcon for duplicate --- .../RenderTransformationConfigurationAndSteps.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationConfigurationAndSteps.svelte b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationConfigurationAndSteps.svelte index feaa54173..34f72a966 100644 --- a/apps/app/src/routes/(config)/transformations/-components/RenderTransformationConfigurationAndSteps.svelte +++ b/apps/app/src/routes/(config)/transformations/-components/RenderTransformationConfigurationAndSteps.svelte @@ -28,7 +28,6 @@ import AnthropicApiKeyInput from '../../-components/AnthropicApiKeyInput.svelte'; import GroqApiKeyInput from '../../-components/GroqApiKeyInput.svelte'; import OpenAiApiKeyInput from '../../-components/OpenAiApiKeyInput.svelte'; - import { ClipboardIcon } from '$lib/components/icons'; let { transformation, @@ -167,7 +166,7 @@ class="h-8 w-8" onclick={() => duplicateStep(index)} > - + Date: Sat, 25 Jan 2025 10:05:38 -0500 Subject: [PATCH 40/73] feat: ClipboardIcon --- .../src/routes/(config)/recordings/CopyableTextPopover.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte index dee9f8a78..27ae89fe6 100644 --- a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte +++ b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte @@ -5,7 +5,7 @@ import * as Dialog from '$lib/components/ui/dialog'; import * as Popover from '$lib/components/ui/popover'; import { useCopyTextToClipboardWithToast } from '$lib/query/clipboard/mutations'; - import { CopyIcon } from 'lucide-svelte'; + import { ClipboardIcon } from '$lib/components/icons'; const copyTextToClipboardWithToast = useCopyTextToClipboardWithToast(); @@ -54,7 +54,7 @@ ); }} > - + Copy Text From d47de2ba09465657eb3f10955702a08eedb60cc9 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 10:05:51 -0500 Subject: [PATCH 41/73] feat: w-full no max-w for CopyableTextPopover --- .../src/routes/(config)/recordings/CopyableTextPopover.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte index 27ae89fe6..b254496d4 100644 --- a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte +++ b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte @@ -27,7 +27,7 @@ {...props} variant="outline" tooltipContent="View Transcribed Text" - class="w-full block max-w-48 text-left text-sm leading-snug overflow-y-auto h-full max-h-12 text-wrap [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent" + class="w-full block text-left text-sm leading-snug overflow-y-auto h-full max-h-12 text-wrap [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent" style="view-transition-name: {buttonViewTransitionName}" > {text} From a074ff84fa5f79918c539a3a610febc837a11ae5 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 10:06:08 -0500 Subject: [PATCH 42/73] feat: use variant ghost and size icon --- .../(config)/recordings/ViewTransformationRunsDialog.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte index 76db28bcd..351712ced 100644 --- a/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte +++ b/apps/app/src/routes/(config)/recordings/ViewTransformationRunsDialog.svelte @@ -19,7 +19,8 @@ {#snippet child({ props })} From ece9c4a4349011b31fde3e884b17db48db71ce0f Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 10:06:44 -0500 Subject: [PATCH 43/73] feat: Row Actions updated to remove some buttons in favor of other columns --- .../recordings/RecordingRowActions.svelte | 25 +------------------ 1 file changed, 1 insertion(+), 24 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte index 7baabdcbc..6516325d0 100644 --- a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte +++ b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte @@ -1,9 +1,8 @@ (hasCopied = true) }, )} + style={viewTransitionName + ? `view-transition-name: ${viewTransitionName};` + : undefined} > Copy {#if hasCopied} diff --git a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte index 7baabdcbc..f8530485d 100644 --- a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte +++ b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte @@ -89,22 +89,11 @@ }} /> - - copyTextToClipboardWithToast.mutate({ - label: 'transcribed text', - text: recording.transcribedText, - })} - variant="ghost" - size="icon" - style="view-transition-name: {createRecordingViewTransitionName({ - recordingId: recording.id, - propertyName: 'transcribedText', - })}-copy-button" - > - - + Date: Sat, 25 Jan 2025 10:25:01 -0500 Subject: [PATCH 48/73] feat: add two copy to clipboard buttons --- .../recordings/RecordingRowActions.svelte | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte index f8530485d..8cc242de3 100644 --- a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte +++ b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte @@ -1,7 +1,8 @@ copyTextToClipboardWithToast.mutate( { label, text: copyableText }, @@ -52,7 +50,14 @@ {#if hasCopied} {:else} - - {@render children?.()} + {@render copyIcon()} {/if} + +{#snippet copyIcon()} + {#if providedCopyIcon} + {@render providedCopyIcon()} + {:else} + + {/if} +{/snippet} From 1c728ff9b836831291a3a97584b62c33f825b522 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 13:28:19 -0500 Subject: [PATCH 52/73] feat: order of row actions --- .../src/routes/(config)/recordings/RecordingRowActions.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte index fd3952be9..627b227ca 100644 --- a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte +++ b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte @@ -114,6 +114,8 @@ {/snippet} + + downloadRecordingWithToast.mutate(recording)} @@ -127,8 +129,6 @@ {/if} - - { From 6cd138b0114ffa96a156a9a365b7d7319a8d277b Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 13:28:30 -0500 Subject: [PATCH 53/73] chore: organize imports --- .../routes/(config)/recordings/RecordingRowActions.svelte | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte index 627b227ca..245ef2814 100644 --- a/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte +++ b/apps/app/src/routes/(config)/recordings/RecordingRowActions.svelte @@ -4,7 +4,6 @@ import WhisperingButton from '$lib/components/WhisperingButton.svelte'; import { TrashIcon } from '$lib/components/icons'; import { Skeleton } from '$lib/components/ui/skeleton'; - import { useCopyTextToClipboardWithToast } from '$lib/query/clipboard/mutations'; import { useDownloadRecordingWithToast } from '$lib/query/download/mutations'; import { useDeleteRecordingWithToast, @@ -18,19 +17,17 @@ import { AlertCircleIcon, DownloadIcon, + LayersIcon, Loader2Icon, EllipsisIcon as LoadingTranscriptionIcon, RepeatIcon as RetryTranscriptionIcon, PlayIcon as StartTranscriptionIcon, - LayersIcon, - CopyIcon, } from 'lucide-svelte'; import EditRecordingDialog from './EditRecordingDialog.svelte'; import ViewTransformationRunsDialog from './ViewTransformationRunsDialog.svelte'; const transcriber = getTranscriberFromContext(); - const copyTextToClipboardWithToast = useCopyTextToClipboardWithToast(); const deleteRecordingWithToast = useDeleteRecordingWithToast(); const updateRecordingWithToast = useUpdateRecordingWithToast(); const downloadRecordingWithToast = useDownloadRecordingWithToast(); From 2cd4e0a695efa7f8d36355834c21d09fe3a238de Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 13:31:37 -0500 Subject: [PATCH 54/73] feat: standardize and simplify CopyableTextPopover usage --- .../recordings/CopyableTextPopover.svelte | 82 ++++++++++--------- ...ransformationRunOutputByRecordingId.svelte | 16 ++-- .../recordings/TranscribedText.svelte | 10 +-- 3 files changed, 49 insertions(+), 59 deletions(-) diff --git a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte index b254496d4..f6488e9cb 100644 --- a/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte +++ b/apps/app/src/routes/(config)/recordings/CopyableTextPopover.svelte @@ -20,43 +20,45 @@ let isPopoverOpen = $state(false); - - - {#snippet child({ props })} - - {text} - - {/snippet} - - - Transcribed Text - 
{text}
- - - - - - +{#if text} + + + {#snippet child({ props })} + + {text} + + {/snippet} + + + Transcribed Text + 
{text}
+ + + + + + +{/if} diff --git a/apps/app/src/routes/(config)/recordings/LatestTransformationRunOutputByRecordingId.svelte b/apps/app/src/routes/(config)/recordings/LatestTransformationRunOutputByRecordingId.svelte index 2bbb6c613..ce7f91699 100644 --- a/apps/app/src/routes/(config)/recordings/LatestTransformationRunOutputByRecordingId.svelte +++ b/apps/app/src/routes/(config)/recordings/LatestTransformationRunOutputByRecordingId.svelte @@ -2,7 +2,6 @@ import { useTransformationRunsByRecordingIdQuery } from '$lib/query/transformationRuns/queries'; import { createRecordingViewTransitionName } from '$lib/utils/createRecordingViewTransitionName'; import CopyableTextPopover from './CopyableTextPopover.svelte'; - import ViewTransformationRunsDialog from './ViewTransformationRunsDialog.svelte'; let { recordingId, @@ -23,12 +22,9 @@ }); -
- {#if latestTransformationRunByRecordingId?.output} - - {/if} - -
+{#if latestTransformationRunByRecordingId?.output} + +{/if} diff --git a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte index e513ac05b..58b03c309 100644 --- a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte +++ b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte @@ -1,5 +1,4 @@ -
- - -
+ From 356aee407d03aa1dae6783a33e4c489fe8ae5658 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 13:33:40 -0500 Subject: [PATCH 55/73] refactor: move to copyable folder --- .../components/{ => copyable}/CopyToClipboardButton.svelte | 0 apps/app/src/lib/components/{ => copyable}/Copyable.svelte | 4 ++-- .../components/copyable}/CopyableTextPopover.svelte | 0 .../LatestTransformationRunOutputByRecordingId.svelte | 2 +- .../app/src/routes/(config)/recordings/TranscribedText.svelte | 2 +- .../src/routes/(config)/settings/transcription/+page.svelte | 2 +- .../-components/RenderTransformationRuns.svelte | 2 +- 7 files changed, 6 insertions(+), 6 deletions(-) rename apps/app/src/lib/components/{ => copyable}/CopyToClipboardButton.svelte (100%) rename apps/app/src/lib/components/{ => copyable}/Copyable.svelte (90%) rename apps/app/src/{routes/(config)/recordings => lib/components/copyable}/CopyableTextPopover.svelte (100%) diff --git a/apps/app/src/lib/components/CopyToClipboardButton.svelte b/apps/app/src/lib/components/copyable/CopyToClipboardButton.svelte similarity index 100% rename from apps/app/src/lib/components/CopyToClipboardButton.svelte rename to apps/app/src/lib/components/copyable/CopyToClipboardButton.svelte diff --git a/apps/app/src/lib/components/Copyable.svelte b/apps/app/src/lib/components/copyable/Copyable.svelte similarity index 90% rename from apps/app/src/lib/components/Copyable.svelte rename to apps/app/src/lib/components/copyable/Copyable.svelte index 9229346d8..b90b3e321 100644 --- a/apps/app/src/lib/components/Copyable.svelte +++ b/apps/app/src/lib/components/copyable/Copyable.svelte @@ -19,8 +19,8 @@ {#if latestTransformationRunByRecordingId?.output} - diff --git a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte index b48f9ca55..6256a0709 100644 --- a/apps/app/src/routes/(config)/recordings/TranscribedText.svelte +++ b/apps/app/src/routes/(config)/recordings/TranscribedText.svelte @@ -1,6 +1,6 @@ - + From 09eda52c6c03e4aac80124172bef4925aa2d0400 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 13:35:34 -0500 Subject: [PATCH 58/73] feat: convert from popover to dialog --- .../copyable/CopyableTextDialog.svelte | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/apps/app/src/lib/components/copyable/CopyableTextDialog.svelte b/apps/app/src/lib/components/copyable/CopyableTextDialog.svelte index f6488e9cb..bb2072b97 100644 --- a/apps/app/src/lib/components/copyable/CopyableTextDialog.svelte +++ b/apps/app/src/lib/components/copyable/CopyableTextDialog.svelte @@ -3,7 +3,6 @@ import { Button } from '$lib/components/ui/button'; import * as Card from '$lib/components/ui/card'; import * as Dialog from '$lib/components/ui/dialog'; - import * as Popover from '$lib/components/ui/popover'; import { useCopyTextToClipboardWithToast } from '$lib/query/clipboard/mutations'; import { ClipboardIcon } from '$lib/components/icons'; @@ -17,12 +16,12 @@ buttonViewTransitionName: string; } = $props(); - let isPopoverOpen = $state(false); + let isDialogOpen = $state(false); {#if text} - - + + {#snippet child({ props })} {/snippet} - - + + Transcribed Text 
{text}
- - - + + {/if} From 27a475a12d6c35c3bffd1293404ec61794e41353 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 13:44:03 -0500 Subject: [PATCH 59/73] wip feat: try using textarea that is scrollable --- .../components/copyable/CopyableTextDialog.svelte | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/apps/app/src/lib/components/copyable/CopyableTextDialog.svelte b/apps/app/src/lib/components/copyable/CopyableTextDialog.svelte index bb2072b97..1d326a7b1 100644 --- a/apps/app/src/lib/components/copyable/CopyableTextDialog.svelte +++ b/apps/app/src/lib/components/copyable/CopyableTextDialog.svelte @@ -1,10 +1,11 @@ -{#snippet tooltip()} - {#if typeof tooltipContent === 'string'} - {tooltipContent} - {:else} - {@render tooltipContent()} - {/if} -{/snippet} - - - - - {#snippet child({ props: tooltipProps })} - - {/snippet} - - - {@render tooltip()} - - - + + {#snippet trigger({ tooltipProps, tooltip })} + + {/snippet} + diff --git a/apps/app/src/lib/components/WhisperingTooltip.svelte b/apps/app/src/lib/components/WhisperingTooltip.svelte new file mode 100644 index 000000000..9dfe046da --- /dev/null +++ b/apps/app/src/lib/components/WhisperingTooltip.svelte @@ -0,0 +1,43 @@ + + +{#snippet tooltip()} + {#if typeof tooltipContent === 'string'} + {tooltipContent} + {:else} + {@render tooltipContent()} + {/if} +{/snippet} + + + + + {#snippet child({ props: tooltipProps })} + {@render trigger?.({ + tooltipProps: mergeProps(tooltipProps, restProps), + tooltip, + })} + {/snippet} + + + {@render tooltip()} + + + From 4016564ba89298e8afa4248e0ffdaf80c60a4578 Mon Sep 17 00:00:00 2001 From: Braden Wong <13159333+braden-w@users.noreply.github.com> Date: Sat, 25 Jan 2025 14:13:54 -0500 Subject: [PATCH 61/73] feat: use textarea for trigger of dialog --- .../lib/components/WhisperingButton.svelte | 9 +++-- .../lib/components/WhisperingTooltip.svelte | 5 +-- .../copyable/CopyableTextDialog.svelte | 39 ++++++++++--------- 3 files changed, 28 insertions(+), 25 deletions(-) diff --git a/apps/app/src/lib/components/WhisperingButton.svelte b/apps/app/src/lib/components/WhisperingButton.svelte index af89ec24a..c6b1a984d 100644 --- a/apps/app/src/lib/components/WhisperingButton.svelte +++ b/apps/app/src/lib/components/WhisperingButton.svelte @@ -3,18 +3,19 @@ import { mergeProps } from 'bits-ui'; import type { Snippet } from 'svelte'; import WhisperingTooltip from './WhisperingTooltip.svelte'; + import { nanoid } from 'nanoid/non-secure'; let { - id, + id = nanoid(), children, tooltipContent, - ...restProps - }: Props & { tooltipContent: string | Snippet } = $props(); + ...buttonProps + }: Props & { id?: string; tooltipContent: string | Snippet } = $props(); {#snippet trigger({ tooltipProps, tooltip })} -