TT-7334 feat: add Prompt tool functionality and components

localization/TranscriberAdmin-en-1.2.xliff

@@ -7586,6 +7586,13 @@
                <context context-type="sourcefile">PlanTabs.tsx</context>
             </context-group>
          </trans-unit>
+         <trans-unit id="prompt.noAudio">
+            <source>No prompt has been recorded for this section yet.</source>
+            <target/>
+            <context-group>
+               <context context-type="sourcefile">PassageDetailPromptMember.tsx</context>
+            </context-group>
+         </trans-unit>
          <trans-unit id="profile.add">
             <source>Add</source>
             <target/>
@@ -9771,6 +9778,13 @@
                <context context-type="sourcefile">useTools.ts</context>
             </context-group>
          </trans-unit>
+         <trans-unit id="tool.prompt">
+            <source>Prompt</source>
+            <target/>
+            <context-group>
+               <context context-type="sourcefile">useTools.ts</context>
+            </context-group>
+         </trans-unit>
       	<trans-unit id="tool.phraseBackTranslate">
       		<source>Phrase Back Translate</source>
       		<target/>

localization/TranscriberAdmin-en.xlf

@@ -6502,6 +6502,12 @@
             <target/>
          </segment>
       </unit>
+      <unit id="prompt.noAudio">
+         <segment>
+            <source>No prompt has been recorded for this section yet.</source>
+            <target/>
+         </segment>
+      </unit>
       <unit id="profile.add">
          <segment>
             <source>Add</source>
@@ -8374,6 +8380,12 @@
             <target/>
          </segment>
       </unit>
+      <unit id="tool.prompt">
+         <segment>
+            <source>Prompt</source>
+            <target/>
+         </segment>
+      </unit>
       <unit id="tool.phraseBackTranslate">
          <segment>
             <source>Phrase Back Translate</source>

src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx

@@ -14,6 +14,7 @@ import { WorkflowSteps } from './WorkflowSteps';
 import PassageDetailSectionPassage from './PassageDetailSectionPassage';
 import PassageDetailStepComplete from './PassageDetailStepComplete';
 import PassageDetailArtifacts from './Internalization/PassageDetailArtifacts';
+import PassageDetailPrompt from './Prompt/PassageDetailPrompt';
 import TeamCheckReference from './TeamCheckReference';
 import PassageDetailPlayer from './PassageDetailPlayer';
 import PassageDetailRecord from './PassageDetailRecord';
@@ -278,6 +279,17 @@ const PassageDetailGrids = () => {
             </Grid>
           </Grid>
         )}
+        {tool === ToolSlug.Prompt && (
+          <Grid
+            container
+            direction="row"
+            sx={{ ...rowProps, minWidth: 0, flexWrap: 'wrap' }}
+          >
+            <Grid size={{ xs: 12 }} sx={{ minWidth: 0 }}>
+              <PassageDetailPrompt width={Math.max(0, paneWidth - 40)} />
+            </Grid>
+          </Grid>
+        )}
         {tool === ToolSlug.Paratext && (
           <Stack sx={{ width: '100%', minWidth: 0 }}>
             <PassageDetailChooser width={width - 24} sx={{ pl: 2 }} />

src/renderer/src/components/PassageDetail/PassageDetailPlayer.tsx

@@ -93,6 +93,7 @@ export interface DetailPlayerProps {
     | ((params: IRegionParams, teamDefault: boolean) => void)
     | undefined;
   onStartRegion?: (position: number) => void;
+  onDuration?: (duration: number) => void;
   onProgress?: (progress: number) => void;
   onSaveProgress?: (progress: number) => void;
   onInteraction?: () => void;
@@ -123,6 +124,7 @@ export function PassageDetailPlayer(props: DetailPlayerProps) {
     onSegment,
     onSegmentParamChange,
     onStartRegion,
+    onDuration: onDurationProp,
     onProgress,
     onSaveProgress,
     onInteraction,
@@ -313,6 +315,7 @@ export function PassageDetailPlayer(props: DetailPlayerProps) {
 
   const onDuration = (duration: number) => {
     durationRef.current = duration;
+    if (onDurationProp) onDurationProp(duration);
     if (
       mediafileRef.current &&
       !mediafileRef.current.attributes.sourceSegments &&

src/renderer/src/components/PassageDetail/Prompt/PassageDetailPrompt.tsx

@@ -0,0 +1,23 @@
+import { useRole } from '../../../crud/useRole';
+import { useStepPermissions } from '../../../utils/useStepPermission';
+import usePassageDetailContext from '../../../context/usePassageDetailContext';
+import PassageDetailPromptAdmin from './PassageDetailPromptAdmin';
+import PassageDetailPromptMember from './PassageDetailPromptMember';
+
+interface IProps {
+  width: number;
+}
+
+export default function PassageDetailPrompt(props: IProps) {
+  const { userIsAdmin } = useRole();
+  const { canDoSectionStep, permissionsOn } = useStepPermissions();
+  const { section, currentstep } = usePassageDetailContext();
+
+  const showAdmin =
+    userIsAdmin || (permissionsOn && canDoSectionStep(currentstep, section));
+
+  if (showAdmin) {
+    return <PassageDetailPromptAdmin width={props.width} />;
+  }
+  return <PassageDetailPromptMember width={props.width} />;
+}

src/renderer/src/components/PassageDetail/Prompt/PassageDetailPromptAdmin.tsx

@@ -0,0 +1,195 @@
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Stack } from '@mui/material';
+import { shallowEqual, useSelector } from 'react-redux';
+import {
+  ArtifactTypeSlug,
+  IMediaState,
+  MediaSt,
+  remoteIdGuid,
+  useArtifactType,
+} from '../../../crud';
+import { ReplaceRelatedRecord } from '../../../model/baseModel';
+import {
+  RecordIdentity,
+  RecordKeyMap,
+  RecordTransformBuilder,
+} from '@orbit/records';
+import { useGlobal } from '../../../context/useGlobal';
+import usePassageDetailContext from '../../../context/usePassageDetailContext';
+import { UnsavedContext } from '../../../context/UnsavedContext';
+import MediaRecord from '../../MediaRecord';
+import { useStepPermissions } from '../../../utils/useStepPermission';
+import { useSecResCreate, useSecResDelete } from '../../../crud';
+import { usePromptSectionResource } from './usePromptSectionResource';
+import { SectionResourceD } from '../../../model';
+import { sharedSelector } from '../../../selector';
+import { ISharedStrings } from '../../../model';
+
+interface IProps {
+  width: number;
+}
+
+const toolId = 'PromptTool';
+
+export default function PassageDetailPromptAdmin(props: IProps) {
+  const { width } = props;
+  const [memory] = useGlobal('memory');
+  const ts: ISharedStrings = useSelector(sharedSelector, shallowEqual);
+  const { getTypeId } = useArtifactType();
+  const { rowData, section, currentstep, forceRefresh, setRecording } =
+    usePassageDetailContext();
+  const { canDoSectionStep, canAlwaysDoStep } = useStepPermissions();
+  const { promptMediaId, sectionResource, hasPrompt } =
+    usePromptSectionResource(rowData, section, currentstep);
+  const { AddSectionResource } = useSecResCreate(section, currentstep);
+  const DeleteSectionResource = useSecResDelete();
+  const {
+    startSave,
+    toolChanged,
+    toolsChanged,
+    clearRequested,
+    clearCompleted,
+  } = useContext(UnsavedContext).state;
+  const [, setBigBusy] = useGlobal('importexportBusy');
+  const [canSave, setCanSave] = useState(false);
+  const [statusText, setStatusText] = useState('');
+  const [preload, setPreload] = useState(0);
+  const [recorderState, setRecorderState] = useState<IMediaState>();
+  const sectionResourceRef = useRef<SectionResourceD | null>(null);
+  /** Prevents preload ↔ trackState update loops; reset when promptMediaId changes. */
+  const recordPreloadInitiatedRef = useRef<string | null>(null);
+
+  const resourceArtifactId = useMemo(
+    () => getTypeId(ArtifactTypeSlug.Resource) || '',
+    [getTypeId]
+  );
+
+  const canEdit = canAlwaysDoStep() || canDoSectionStep(currentstep, section);
+
+  useEffect(() => {
+    sectionResourceRef.current = sectionResource;
+  }, [sectionResource]);
+
+  useEffect(() => {
+    toolChanged(toolId, canSave);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canSave]);
+
+  useEffect(() => {
+    if (clearRequested(toolId)) {
+      const sr = sectionResourceRef.current;
+      if (sr) {
+        void DeleteSectionResource(sr).then(() => {
+          forceRefresh();
+          clearCompleted(toolId);
+        });
+      } else {
+        clearCompleted(toolId);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toolsChanged]);
+
+  useEffect(() => {
+    recordPreloadInitiatedRef.current = null;
+  }, [promptMediaId]);
+
+  useEffect(() => {
+    const hasExisting =
+      Boolean(promptMediaId) &&
+      recorderState?.status === MediaSt.FETCHED &&
+      recorderState?.id === promptMediaId;
+    const shouldAutoPreload =
+      hasExisting && recordPreloadInitiatedRef.current !== promptMediaId;
+    if (shouldAutoPreload && promptMediaId) {
+      recordPreloadInitiatedRef.current = promptMediaId;
+      setPreload((p) => p + 1);
+    }
+  }, [promptMediaId, recorderState]);
+
+  const linkMediaToStep = async (mediaId: string) => {
+    const mediaRecId = { type: 'mediafile', id: mediaId } as RecordIdentity;
+    const t = new RecordTransformBuilder();
+    await memory.update([
+      ...ReplaceRelatedRecord(
+        t,
+        mediaRecId,
+        'orgWorkflowStep',
+        'orgworkflowstep',
+        currentstep
+      ),
+    ]);
+  };
+
+  const afterUploadCb = async (mediaId: string | undefined) => {
+    if (!mediaId) {
+      setStatusText(ts.NoSaveWoMedia);
+      return;
+    }
+    setStatusText('');
+    const existing = sectionResourceRef.current;
+    if (existing) {
+      await DeleteSectionResource(existing);
+      sectionResourceRef.current = null;
+    }
+    const mediaRecId = {
+      type: 'mediafile',
+      id:
+        remoteIdGuid('mediafile', mediaId, memory?.keyMap as RecordKeyMap) ||
+        mediaId,
+    } as RecordIdentity;
+    await linkMediaToStep(mediaRecId.id);
+    await AddSectionResource(0, null, mediaRecId);
+    forceRefresh();
+    setPreload((p) => p + 1);
+  };
+
+  const handleTrackRecorder = (state: IMediaState) => setRecorderState(state);
+
+  const handleRecording = (recording: boolean) => {
+    setRecording(recording);
+  };
+
+  const handleSave = () => {
+    startSave(toolId);
+  };
+
+  const onSaving = () => {
+    setBigBusy(true);
+  };
+
+  const onReady = () => {
+    setBigBusy(false);
+  };
+
+  const defaultFilename = useMemo(() => `prompt-${section.id}`, [section.id]);
+
+  return (
+    <Stack sx={{ width, maxWidth: width, minWidth: 0 }}>
+      <MediaRecord
+        toolId={toolId}
+        artifactId={resourceArtifactId}
+        passageId={undefined}
+        afterUploadCb={afterUploadCb}
+        mediaId={promptMediaId}
+        onSaving={onSaving}
+        onReady={onReady}
+        onRecording={handleRecording}
+        defaultFilename={defaultFilename}
+        allowRecord={canEdit}
+        allowZoom={true}
+        allowWave={true}
+        preload={preload}
+        trackState={handleTrackRecorder}
+        setCanSave={setCanSave}
+        setStatusText={setStatusText}
+        handleSave={handleSave}
+        isSaveDisabled={!canEdit}
+        height={280}
+        width={width}
+        forceMobileView={true}
+        metaData={hasPrompt ? undefined : <span>{statusText}</span>}
+      />
+    </Stack>
+  );
+}