trancription form with original text (#727)

enjoy/src/renderer/components/medias/media-loading-modal.tsx

@@ -12,8 +12,6 @@ import {
   AlertDialogFooter,
   AlertDialogOverlay,
   Button,
-  PingPoint,
-  Progress,
 } from "@renderer/components/ui";
 import { CheckCircleIcon, LoaderIcon, XCircleIcon } from "lucide-react";
 import { t } from "i18next";
@@ -22,7 +20,6 @@ import { TranscriptionCreateForm } from "../transcriptions";
 
 export const MediaLoadingModal = () => {
   const navigate = useNavigate();
-  const { whisperConfig } = useContext(AISettingsProviderContext);
   const {
     media,
     decoded,
@@ -52,6 +49,7 @@ export const MediaLoadingModal = () => {
             </div>
           ) : (
             <TranscriptionCreateForm
+              originalText={transcription?.result?.originalText}
               onSubmit={(data) => {
                 generateTranscription({
                   originalText: data.text,

enjoy/src/renderer/components/transcriptions/transcription-create-form.tsx

@@ -37,6 +37,7 @@ const transcriptionSchema = z.object({
 
 export const TranscriptionCreateForm = (props: {
   onSubmit: (data: z.infer<typeof transcriptionSchema>) => void;
+  originalText?: string;
   onCancel?: () => void;
   transcribing?: boolean;
   transcribingProgress?: number;
@@ -46,6 +47,7 @@ export const TranscriptionCreateForm = (props: {
     transcribingProgress = 0,
     onSubmit,
     onCancel,
+    originalText,
   } = props;
   const { learningLanguage } = useContext(AppSettingsProviderContext);
   const { whisperConfig } = useContext(AISettingsProviderContext);
@@ -55,7 +57,7 @@ export const TranscriptionCreateForm = (props: {
     values: {
       language: learningLanguage,
       service: whisperConfig.service,
-      text: "",
+      text: originalText,
     },
   });
 
@@ -197,8 +199,17 @@ export const TranscriptionCreateForm = (props: {
                   }
                 }}
               />
-              {field.value && (
-                <Textarea className="h-96" {...field} disabled={transcribing} />
+              {field.value != undefined && (
+                <>
+                  <FormLabel>
+                    {t("transcript")}
+                  </FormLabel>
+                  <Textarea
+                    className="h-36"
+                    {...field}
+                    disabled={transcribing}
+                  />
+                </>
               )}
               <FormMessage />
             </FormItem>