ECHO-716 Remind users to verify before finishing conversation

echo/directus/sync/snapshot/fields/project/anonymize_transcripts.json

@@ -16,7 +16,7 @@
     "readonly": false,
     "required": false,
     "searchable": true,
-    "sort": 35,
+    "sort": 36,
     "special": [
       "cast-boolean"
     ],

echo/directus/sync/snapshot/fields/project/conversation_title_prompt.json

@@ -16,7 +16,7 @@
     "readonly": false,
     "required": false,
     "searchable": true,
-    "sort": 34,
+    "sort": 35,
     "special": null,
     "translations": null,
     "validation": null,

echo/directus/sync/snapshot/fields/project/enable_ai_title_and_tags.json

@@ -16,7 +16,7 @@
     "readonly": false,
     "required": false,
     "searchable": true,
-    "sort": 33,
+    "sort": 34,
     "special": [
       "cast-boolean"
     ],

echo/directus/sync/snapshot/fields/project/is_verify_on_finish_enabled.json

@@ -0,0 +1,46 @@
+{
+  "collection": "project",
+  "field": "is_verify_on_finish_enabled",
+  "type": "boolean",
+  "meta": {
+    "collection": "project",
+    "conditions": null,
+    "display": null,
+    "display_options": null,
+    "field": "is_verify_on_finish_enabled",
+    "group": null,
+    "hidden": false,
+    "interface": "boolean",
+    "note": null,
+    "options": null,
+    "readonly": false,
+    "required": false,
+    "searchable": true,
+    "sort": 32,
+    "special": [
+      "cast-boolean"
+    ],
+    "translations": null,
+    "validation": null,
+    "validation_message": null,
+    "width": "full"
+  },
+  "schema": {
+    "name": "is_verify_on_finish_enabled",
+    "table": "project",
+    "data_type": "boolean",
+    "default_value": false,
+    "max_length": null,
+    "numeric_precision": null,
+    "numeric_scale": null,
+    "is_nullable": true,
+    "is_unique": false,
+    "is_indexed": false,
+    "is_primary_key": false,
+    "is_generated": false,
+    "generation_expression": null,
+    "has_auto_increment": false,
+    "foreign_key_table": null,
+    "foreign_key_column": null
+  }
+}

echo/directus/sync/snapshot/fields/project/selected_verification_key_list.json

@@ -19,7 +19,7 @@
     "readonly": false,
     "required": false,
     "searchable": true,
-    "sort": 32,
+    "sort": 33,
     "special": null,
     "translations": null,
     "validation": null,

echo/frontend/src/components/participant/ParticipantConversationAudio.tsx

@@ -48,6 +48,7 @@ import {
 import useChunkedAudioRecorder from "./hooks/useChunkedAudioRecorder";
 import { PermissionErrorModal } from "./PermissionErrorModal";
 import { StopRecordingConfirmationModal } from "./StopRecordingConfirmationModal";
+import { useConversationArtefacts } from "./verify/hooks";
 
 const CONVERSATION_DELETION_STATUS_CODES = [404, 403, 410];
 const REFINE_BUTTON_THRESHOLD_SECONDS = 60;
@@ -74,6 +75,7 @@ export const ParticipantConversationAudio = () => {
 	const conversationQuery = useConversationQuery(projectId, conversationId);
 	const chunks = useConversationChunksQuery(projectId, conversationId);
 	const uploadChunkMutation = useUploadConversationChunk();
+	const artefactsQuery = useConversationArtefacts(conversationId);
 	const pendingUploadsRef = useRef<Promise<unknown>[]>([]);
 
 	const onChunk = (chunk: Blob) => {
@@ -225,6 +227,14 @@ export const ParticipantConversationAudio = () => {
 		}
 	}, [refineInfoModalOpened, recordingTime, closeRefineInfoModal]);
 
+	const hasApprovedArtefacts = (artefactsQuery.data?.length ?? 0) > 0;
+	const effectiveRecordingTime = stoppedRecordingTime ?? recordingTime;
+	const shouldVerifyOnFinish =
+		!!projectQuery.data?.is_verify_on_finish_enabled &&
+		!!projectQuery.data?.is_verify_enabled &&
+		!hasApprovedArtefacts &&
+		effectiveRecordingTime >= REFINE_BUTTON_THRESHOLD_SECONDS;
+
 	// Handlers
 	const handleStopRecording = () => {
 		if (isRecording) {
@@ -274,6 +284,11 @@ export const ParticipantConversationAudio = () => {
 		}
 	};
 
+	const handleSkipVerification = async () => {
+		close();
+		await handleConfirmFinish();
+	};
+
 	const handleSwitchToText = () => {
 		setStoppedRecordingTime(null);
 		close();
@@ -291,6 +306,12 @@ export const ParticipantConversationAudio = () => {
 		}
 	};
 
+	const handleVerify = () => {
+		close();
+		handleResumeRecording();
+		navigate(`/${projectId}/conversation/${conversationId}/verify`);
+	};
+
 	// Clear stoppedRecordingTime when recording actually starts (avoids UI flash)
 	useEffect(() => {
 		if (isRecording && stoppedRecordingTime !== null) {
@@ -473,6 +494,9 @@ export const ParticipantConversationAudio = () => {
 				handleConfirmFinish={handleConfirmFinish}
 				handleResume={handleResumeRecording}
 				handleSwitchToText={handleSwitchToText}
+				showVerifyOnFinish={shouldVerifyOnFinish}
+				handleSkipVerification={handleSkipVerification}
+				handleVerify={handleVerify}
 			/>
 
 			{/* Modal for refine info */}
@@ -580,6 +604,7 @@ export const ParticipantConversationAudio = () => {
 				<Outlet
 					context={{
 						isRecording,
+						recordingTime,
 					}}
 				/>
 				<div ref={scrollTargetRef} />

echo/frontend/src/components/participant/ParticipantConversationAudioContent.tsx

@@ -1,7 +1,15 @@
 import { useChat } from "@ai-sdk/react";
+import { Trans } from "@lingui/react/macro";
+import { Box, Group, Paper, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
+import { IconRosetteDiscountCheck } from "@tabler/icons-react";
 import { useEffect, useRef } from "react";
-import { useOutletContext, useParams, useSearchParams } from "react-router";
+import {
+	Link,
+	useOutletContext,
+	useParams,
+	useSearchParams,
+} from "react-router";
 import { API_BASE_URL } from "@/config";
 import { useLanguage } from "@/hooks/useLanguage";
 import { useLoadNotification } from "@/hooks/useLoadNotification";
@@ -12,10 +20,14 @@ import {
 } from "./hooks";
 import { ParticipantBody } from "./ParticipantBody";
 import { ParticipantEchoMessages } from "./ParticipantEchoMessages";
+import { useConversationArtefacts } from "./verify/hooks";
 import { VerifiedArtefactsList } from "./verify/VerifiedArtefactsList";
 
+const VERIFICATION_BANNER_THRESHOLD_SECONDS = 60;
+
 type OutletContextType = {
 	isRecording: boolean;
+	recordingTime: number;
 };
 
 export const ParticipantConversationAudioContent = () => {
@@ -25,7 +37,7 @@ export const ParticipantConversationAudioContent = () => {
 
 	const { projectId, conversationId } = useParams();
 	const [searchParams, setSearchParams] = useSearchParams();
-	const { isRecording } = useOutletContext<OutletContextType>();
+	const { isRecording, recordingTime } = useOutletContext<OutletContextType>();
 	const projectQuery = useParticipantProjectById(projectId ?? "");
 	const conversationQuery = useConversationQuery(projectId, conversationId);
 	const [_isRefineDisabled, _setIsRefineDisabled, removeValue] =
@@ -34,6 +46,14 @@ export const ParticipantConversationAudioContent = () => {
 			key: `refine_disabled_${conversationId}`,
 		});
 
+	const artefactsQuery = useConversationArtefacts(conversationId);
+	const hasApprovedArtefacts = (artefactsQuery.data?.length ?? 0) > 0;
+	const showVerificationBanner =
+		!!projectQuery.data?.is_verify_on_finish_enabled &&
+		!!projectQuery.data?.is_verify_enabled &&
+		!hasApprovedArtefacts &&
+		recordingTime >= VERIFICATION_BANNER_THRESHOLD_SECONDS;
+
 	const hasEchoParam = searchParams.get("echo") === "1";
 
 	const repliesQuery = useConversationRepliesQuery(conversationId);
@@ -69,11 +89,13 @@ export const ParticipantConversationAudioContent = () => {
 	});
 
 	// Handle load status notifications (shows toast when backend reports high load)
-	const hasEchoContent = echoMessages.length > 0 && echoMessages[echoMessages.length - 1]?.content?.length > 0;
+	const hasEchoContent =
+		echoMessages.length > 0 &&
+		echoMessages[echoMessages.length - 1]?.content?.length > 0;
 	useLoadNotification({
 		data: echoData,
-		isLoading: echoIsLoading,
 		hasContent: hasEchoContent,
+		isLoading: echoIsLoading,
 	});
 
 	const handleReply = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -125,6 +147,36 @@ export const ParticipantConversationAudioContent = () => {
 				projectLanguage={projectQuery.data?.language}
 			/>
 
+			{showVerificationBanner && (
+				<Link to="verify" style={{ textDecoration: "none" }}>
+					<Box className="flex justify-end">
+						<Paper
+							radius="md"
+							p="md"
+							my="md"
+							withBorder
+							style={{
+								borderColor: "var(--mantine-color-gray-4)",
+								borderStyle: "dashed",
+								cursor: "pointer",
+							}}
+						>
+							<Group gap="sm" wrap="nowrap">
+								<Text size="lg" fw={500} c="dimmed">
+									<Trans id="participant.banner.verification_required">
+										Verification required
+									</Trans>
+								</Text>
+								<IconRosetteDiscountCheck
+									size={22}
+									color="var(--mantine-color-dimmed)"
+								/>
+							</Group>
+						</Paper>
+					</Box>
+				</Link>
+			)}
+
 			<ParticipantEchoMessages
 				echoMessages={echoMessages}
 				isLoading={echoIsLoading}