import { useState, useEffect, useRef } from 'react'; import { ActionRequired } from '../api'; import { defineMessages, useIntl } from '../i18n'; import JsonSchemaForm from './ui/JsonSchemaForm'; import type { JsonSchema } from './ui/JsonSchemaForm'; const i18n = defineMessages({ cancelled: { id: 'elicitationRequest.cancelled', defaultMessage: 'Information request was cancelled.', }, submitted: { id: 'elicitationRequest.submitted', defaultMessage: 'Information submitted', }, expired: { id: 'elicitationRequest.expired', defaultMessage: 'This request has expired. The extension will need to ask again.', }, defaultMessage: { id: 'elicitationRequest.defaultMessage', defaultMessage: 'Goose needs some information from you.', }, submit: { id: 'elicitationRequest.submit', defaultMessage: 'Submit', }, waitingForResponse: { id: 'elicitationRequest.waitingForResponse', defaultMessage: 'Waiting for your response ({timeRemaining} remaining)', }, }); const ELICITATION_TIMEOUT_SECONDS = 300; interface ElicitationRequestProps { isCancelledMessage: boolean; isClicked: boolean; actionRequiredContent: ActionRequired & { type: 'actionRequired' }; onSubmit: (elicitationId: string, userData: Record) => void; } function formatTime(seconds: number): string { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}:${secs.toString().padStart(2, '0')}`; } export default function ElicitationRequest({ isCancelledMessage, isClicked, actionRequiredContent, onSubmit, }: ElicitationRequestProps) { const intl = useIntl(); const [submitted, setSubmitted] = useState(isClicked); const [timeRemaining, setTimeRemaining] = useState(ELICITATION_TIMEOUT_SECONDS); const startTimeRef = useRef(Date.now()); useEffect(() => { if (submitted || isCancelledMessage || isClicked) return; const interval = setInterval(() => { const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000); const remaining = Math.max(0, ELICITATION_TIMEOUT_SECONDS - elapsed); setTimeRemaining(remaining); if (remaining === 0) { clearInterval(interval); } }, 1000); return () => clearInterval(interval); }, [submitted, isCancelledMessage, isClicked]); if (actionRequiredContent.data.actionType !== 'elicitation') { return null; } const { id: elicitationId, message, requested_schema } = actionRequiredContent.data; const handleSubmit = (formData: Record) => { setSubmitted(true); onSubmit(elicitationId, formData); }; if (isCancelledMessage) { return (

{intl.formatMessage(i18n.cancelled)}

); } if (submitted) { return (

{intl.formatMessage(i18n.submitted)}

); } const isUrgent = timeRemaining <= 60; const isExpired = timeRemaining === 0; if (isExpired) { return (

{intl.formatMessage(i18n.expired)}

); } return (

{message || intl.formatMessage(i18n.defaultMessage)}

{intl.formatMessage(i18n.waitingForResponse, { timeRemaining: formatTime(timeRemaining) })}

); }