@alpaca-editor/core 1.0.4027 → 1.0.4031

package/src/page-wizard/steps/TranslateStep.tsx

@@ -33,6 +33,8 @@ interface TranslatableFieldsResponse {
 interface TranslatedField {
   fieldId: string;
   translatedValue: string;
+  isComplete?: boolean;
+  missingSuggestions?: string;
 }
 
 interface TranslatedFieldsResponse {
@@ -56,6 +58,10 @@ export function TranslateStep({
   const [isLoading, setIsLoading] = useState(false);
   const [isTranslating, setIsTranslating] = useState(false);
   const [isDetectingLanguage, setIsDetectingLanguage] = useState(false);
+  const [translatingFields, setTranslatingFields] = useState<Set<string>>(
+    new Set(),
+  );
+  const [checkingFields, setCheckingFields] = useState<Set<string>>(new Set());
   const [targetLanguage, setTargetLanguage] = useState<Language | null>(
     data.targetLanguage || null,
   );
@@ -116,7 +122,7 @@ export function TranslateStep({
   }, [currentItem, editContext]);
 
   const fetchComponentNames = useCallback(
-    async (itemIds: string[]) => {
+    async (itemIds: string[], sourceLanguageParam: string) => {
       if (!editContext || itemIds.length === 0) return;
 
       const names: Record<string, string> = {};
@@ -125,7 +131,7 @@ export function TranslateStep({
         try {
           const item = await editContext.itemsRepository.getItem({
             id: itemId,
-            language: sourceLanguage,
+            language: sourceLanguageParam,
             version: 0,
           });
 
@@ -142,69 +148,104 @@ export function TranslateStep({
 
       setComponentNames(names);
     },
-    [editContext, sourceLanguage],
+    [editContext],
   );
 
-  const fetchTranslatableFields = useCallback(async () => {
-    if (!currentItem || !editContext) return;
+  const fetchTranslatableFields = useCallback(
+    async (sourceLanguageParam: string) => {
+      if (!currentItem || !editContext) return;
 
-    setIsLoading(true);
-    try {
-      const response = await fetch(
-        "/alpaca/editor/page-wizard/getTranslatableFields",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
+      setIsLoading(true);
+      try {
+        const response = await fetch(
+          "/alpaca/editor/page-wizard/getTranslatableFields",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              id: currentItem.id,
+              language: sourceLanguageParam,
+              version: currentItem.version,
+            }),
           },
-          body: JSON.stringify({
-            id: currentItem.id,
-            language: sourceLanguage,
-            version: currentItem.version,
-          }),
-        },
-      );
+        );
+
+        if (response.ok) {
+          const fieldsData: TranslatableFieldsResponse = await response.json();
+          setTranslatableFields(fieldsData);
+
+          // Initialize translated fields structure
+          const initialTranslatedFields: TranslatedFieldsResponse = {};
+          Object.keys(fieldsData).forEach((itemId) => {
+            if (fieldsData[itemId]) {
+              initialTranslatedFields[itemId] = fieldsData[itemId].map(
+                (field) => ({
+                  fieldId: field.fieldId,
+                  translatedValue: "",
+                  isComplete: undefined,
+                  missingSuggestions: undefined,
+                }),
+              );
+            }
+          });
+          setTranslatedFields(initialTranslatedFields);
 
-      if (response.ok) {
-        const fieldsData: TranslatableFieldsResponse = await response.json();
-        setTranslatableFields(fieldsData);
-
-        // Initialize translated fields structure
-        const initialTranslatedFields: TranslatedFieldsResponse = {};
-        Object.keys(fieldsData).forEach((itemId) => {
-          if (fieldsData[itemId]) {
-            initialTranslatedFields[itemId] = fieldsData[itemId].map(
-              (field) => ({
-                fieldId: field.fieldId,
-                translatedValue: "",
-              }),
-            );
+          // Fetch component names for all item IDs
+          const itemIds = Object.keys(fieldsData);
+          if (itemIds.length > 0) {
+            fetchComponentNames(itemIds, sourceLanguageParam);
           }
-        });
-        setTranslatedFields(initialTranslatedFields);
-
-        // Fetch component names for all item IDs
-        const itemIds = Object.keys(fieldsData);
-        if (itemIds.length > 0) {
-          fetchComponentNames(itemIds);
+        } else {
+          console.error("Failed to fetch translatable fields");
         }
-      } else {
-        console.error("Failed to fetch translatable fields");
+      } catch (error) {
+        console.error("Error fetching translatable fields:", error);
+      } finally {
+        setIsLoading(false);
       }
-    } catch (error) {
-      console.error("Error fetching translatable fields:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentItem, editContext, sourceLanguage, fetchComponentNames]);
+    },
+    [currentItem, editContext, fetchComponentNames],
+  );
+
+  // Track the last source language we fetched for to prevent unnecessary re-fetching
+  const [lastFetchedSourceLanguage, setLastFetchedSourceLanguage] =
+    useState<string>("");
 
   useEffect(() => {
     fetchAvailableLanguages();
   }, [fetchAvailableLanguages]);
 
+  // Reset the last fetched source language when the current item changes
   useEffect(() => {
-    fetchTranslatableFields();
-  }, [fetchTranslatableFields, sourceLanguage]);
+    setLastFetchedSourceLanguage("");
+  }, [currentItem]);
+
+  useEffect(() => {
+    // Only fetch translatable fields if:
+    // 1. We have a source language
+    // 2. It's different from the last one we fetched for
+    // 3. We're not currently publishing (to avoid conflicts)
+    // 4. We're not currently loading or translating
+    if (
+      sourceLanguage &&
+      sourceLanguage !== lastFetchedSourceLanguage &&
+      !isPublishing &&
+      !isLoading &&
+      !isTranslating
+    ) {
+      fetchTranslatableFields(sourceLanguage);
+      setLastFetchedSourceLanguage(sourceLanguage);
+    }
+  }, [
+    fetchTranslatableFields,
+    sourceLanguage,
+    lastFetchedSourceLanguage,
+    isPublishing,
+    isLoading,
+    isTranslating,
+  ]);
 
   const detectLanguage = async () => {
     if (!editContext) {
@@ -231,7 +272,7 @@ ${documentContent.substring(0, 1000)}`;
           },
         ],
         { editContext, createAiContext: createWizardAiContext },
-        { model: "gpt-4o-mini" },
+        { model: "gpt-4.1" },
         { signal: abortController.signal },
         (response: any) => {
           try {
@@ -282,12 +323,25 @@ ${documentContent.substring(0, 1000)}`;
     }
   };
 
-  // Auto-detect language when document content is available
+  // Keep track of the last document content we detected for
+  const [lastDetectedDocument, setLastDetectedDocument] = useState<string>("");
+
+  // Auto-detect language when document content is available or changes
   useEffect(() => {
-    if (!detectedLanguageName && !isDetectingLanguage) {
+    if (
+      documentContent &&
+      !isDetectingLanguage &&
+      documentContent !== lastDetectedDocument
+    ) {
+      // Reset detected language when document changes, then detect again
+      if (detectedLanguageName && lastDetectedDocument) {
+        setDetectedLanguageName("");
+        setTargetLanguage(null);
+      }
+      setLastDetectedDocument(documentContent);
       detectLanguage();
     }
-  }, [detectedLanguageName, isDetectingLanguage]);
+  }, [documentContent]);
 
   const handleTranslate = async () => {
     if (!targetLanguage?.languageCode) {
@@ -349,7 +403,7 @@ Return your response as a JSON object in this exact format:
           },
         ],
         { editContext, createAiContext: createWizardAiContext },
-        { model: "gpt-4o-mini" },
+        { model: "gpt-4.1", stream: false },
         { signal: abortController.signal },
       );
 
@@ -377,6 +431,9 @@ Return your response as a JSON object in this exact format:
                 ) {
                   updatedTranslatedFields[itemId][fieldIndex].translatedValue =
                     translatedValue || "";
+                  updatedTranslatedFields[itemId][
+                    fieldIndex
+                  ].missingSuggestions = undefined;
                 }
               }
             });
@@ -385,6 +442,25 @@ Return your response as a JSON object in this exact format:
             console.log(
               `Translation complete: ${translations.length} fields translated`,
             );
+
+            // Check translation completeness for all translated fields
+            translations.forEach((translation: any) => {
+              const { itemId, fieldId, translatedValue } = translation;
+              if (translatedValue && translatedValue.trim()) {
+                const originalField = fieldsForTranslation.find(
+                  (f) => f.itemId === itemId && f.fieldId === fieldId,
+                );
+                if (originalField) {
+                  checkTranslationCompleteness(
+                    itemId,
+                    fieldId,
+                    originalField.originalValue,
+                    translatedValue,
+                    originalField.fieldName,
+                  );
+                }
+              }
+            });
           } catch (parseError) {
             console.error("Failed to parse AI response:", parseError);
           }
@@ -397,6 +473,216 @@ Return your response as a JSON object in this exact format:
     }
   };
 
+  const handleSingleFieldTranslation = async (
+    itemId: string,
+    fieldId: string,
+    field: TranslatableField,
+  ) => {
+    if (!targetLanguage?.languageCode || !editContext) {
+      console.warn("Missing target language or edit context");
+      return;
+    }
+
+    const fieldKey = `${itemId}-${fieldId}`;
+    setTranslatingFields((prev) => new Set(prev).add(fieldKey));
+
+    try {
+      // Create a prompt for this specific field
+      const prompt = `You are a translation assistant. You have been given a document in ${targetLanguage.name} and a single field that needs to be translated from ${sourceLanguage} to ${targetLanguage.name}.
+
+Your task is to:
+1. Find content from the provided document that matches this field
+2. Return ONLY the translated text from the document - do not change, modify, or create any new text
+3. If you cannot find a suitable translation in the document for this field, return an empty string
+
+Document content:
+${documentContent}
+
+Field to translate:
+- Field Name: ${field.fieldName}
+- Value (${sourceLanguage}): ${field.value}
+
+Return your response as a JSON object in this exact format:
+{
+  "translatedValue": "exact text from document or empty string if no match found"
+}`;
+
+      const abortController = new AbortController();
+
+      const result = await executePrompt(
+        [
+          {
+            content: prompt,
+            role: "user",
+            name: "user",
+            id: crypto.randomUUID(),
+          },
+        ],
+        { editContext, createAiContext: createWizardAiContext },
+        { model: "gpt-4.1", stream: false },
+        { signal: abortController.signal },
+      );
+
+      if (result && result.messages && result.messages.length > 0) {
+        const lastMessage = result.messages[result.messages.length - 1];
+        if (lastMessage && lastMessage.content) {
+          try {
+            const parsedResponse = JSON.parse(lastMessage.content);
+            const translatedValue = parsedResponse.translatedValue || "";
+
+            // Update this specific field's translation
+            setTranslatedFields((prev) => ({
+              ...prev,
+              [itemId]:
+                prev[itemId]?.map((f) =>
+                  f.fieldId === fieldId
+                    ? { ...f, translatedValue, missingSuggestions: undefined }
+                    : f,
+                ) || [],
+            }));
+
+            console.log(
+              `Single field translation complete for ${field.fieldName}`,
+            );
+
+            // Check translation completeness after translation
+            if (translatedValue.trim()) {
+              checkTranslationCompleteness(
+                itemId,
+                fieldId,
+                field.value,
+                translatedValue,
+                field.fieldName,
+              );
+            }
+          } catch (parseError) {
+            console.error("Failed to parse AI response:", parseError);
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Single field translation error:", error);
+    } finally {
+      setTranslatingFields((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(fieldKey);
+        return newSet;
+      });
+    }
+  };
+
+  const checkTranslationCompleteness = async (
+    itemId: string,
+    fieldId: string,
+    originalText: string,
+    translatedText: string,
+    fieldName: string,
+  ) => {
+    if (!editContext || !translatedText.trim()) {
+      return false;
+    }
+
+    const fieldKey = `${itemId}-${fieldId}`;
+    setCheckingFields((prev) => new Set(prev).add(fieldKey));
+
+    try {
+      const prompt = `You are a translation quality checker. Your task is to evaluate if a translation is complete and accurate.
+
+Original text (${sourceLanguage}):
+${originalText}
+
+Translated text (${targetLanguage?.name || "target language"}):
+${translatedText}
+
+Field context: ${fieldName}
+
+Is the translation complete (no missing content)? Do not assess the quality of the translation, just if it is complete. Only report missing sentences missing completely.
+ Do not report missing words, phrases, or content that is present in the original text.  We just want to make sure we copied all content from the translation document.
+
+If the translation is incomplete, identify specific content, phrases, or meaning that exists in the original but is missing in the translation, and suggest the exact text that should be added to make the translation complete.
+
+Return your response as a JSON object in this exact format:
+{
+  "isComplete": true/false,
+  "reason": "Brief explanation of your assessment",
+  "missingSuggestions": "If isComplete is false, provide specific suggestions for what needs to be added to complete the translation. Include the actual text that should be added. If isComplete is true, leave this empty."
+}`;
+
+      const abortController = new AbortController();
+
+      const result = await executePrompt(
+        [
+          {
+            content: prompt,
+            role: "user",
+            name: "user",
+            id: crypto.randomUUID(),
+          },
+        ],
+        { editContext, createAiContext: createWizardAiContext },
+        { model: "gpt-4.1", stream: false },
+        { signal: abortController.signal },
+      );
+
+      if (result && result.messages && result.messages.length > 0) {
+        const lastMessage = result.messages[result.messages.length - 1];
+        if (lastMessage && lastMessage.content) {
+          try {
+            const parsedResponse = JSON.parse(lastMessage.content);
+            const isComplete = parsedResponse.isComplete || false;
+            const missingSuggestions = parsedResponse.missingSuggestions || "";
+
+            // Update the field's completeness status and missing suggestions
+            setTranslatedFields((prev) => ({
+              ...prev,
+              [itemId]:
+                prev[itemId]?.map((f) =>
+                  f.fieldId === fieldId
+                    ? {
+                        ...f,
+                        isComplete,
+                        missingSuggestions: isComplete
+                          ? undefined
+                          : missingSuggestions,
+                      }
+                    : f,
+                ) || [],
+            }));
+
+            console.log(
+              `Translation completeness check for ${fieldName}: ${isComplete ? "Complete" : "Incomplete"} - ${parsedResponse.reason}`,
+            );
+
+            if (!isComplete && missingSuggestions) {
+              console.log(
+                `Missing content suggestions for ${fieldName}: ${missingSuggestions}`,
+              );
+            }
+
+            return isComplete;
+          } catch (parseError) {
+            console.error(
+              "Failed to parse completeness check response:",
+              parseError,
+            );
+            return false;
+          }
+        }
+      }
+
+      return false;
+    } catch (error) {
+      console.error("Translation completeness check error:", error);
+      return false;
+    } finally {
+      setCheckingFields((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(fieldKey);
+        return newSet;
+      });
+    }
+  };
+
   const handleFieldChange = (
     itemId: string,
     fieldId: string,
@@ -407,7 +693,12 @@ Return your response as a JSON object in this exact format:
       [itemId]:
         prev[itemId]?.map((field) =>
           field.fieldId === fieldId
-            ? { ...field, translatedValue: value }
+            ? {
+                ...field,
+                translatedValue: value,
+                isComplete: undefined,
+                missingSuggestions: undefined,
+              }
             : field,
         ) || [],
     }));
@@ -640,8 +931,27 @@ Return your response as a JSON object in this exact format:
         icon={<Upload className="h-5 w-5" />}
       >
         {isLoading ? (
-          <div className="py-8 text-center">Loading translatable fields...</div>
-        ) : (
+          <div className="py-8 text-center">
+            <div className="flex items-center justify-center gap-2">
+              <RefreshCw className="h-4 w-4 animate-spin" />
+              Loading translatable fields...
+            </div>
+          </div>
+        ) : isTranslating ? (
+          <div className="py-8 text-center">
+            <div className="flex items-center justify-center gap-2">
+              <RefreshCw className="h-4 w-4 animate-spin" />
+              Translating fields...
+            </div>
+          </div>
+        ) : isPublishing ? (
+          <div className="py-8 text-center">
+            <div className="flex items-center justify-center gap-2">
+              <RefreshCw className="h-4 w-4 animate-spin" />
+              Publishing translations...
+            </div>
+          </div>
+        ) : translatedCount > 0 ? (
           <div className="space-y-6">
             {Object.entries(translatableFields).map(([itemId, fields]) => (
               <div key={itemId} className="rounded-lg p-4">
@@ -667,9 +977,104 @@ Return your response as a JSON object in this exact format:
                           </div>
                         </div>
                         <div className="flex flex-col">
-                          <label className="mb-1 block text-xs font-medium">
-                            {field.fieldName}
-                          </label>
+                          <div className="mb-1 flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              <label className="block text-xs font-medium">
+                                {field.fieldName}
+                              </label>
+                              {translatedField?.translatedValue && (
+                                <div className="flex items-center">
+                                  {checkingFields.has(
+                                    `${itemId}-${field.fieldId}`,
+                                  ) ? (
+                                    <RefreshCw className="h-3 w-3 animate-spin text-gray-500" />
+                                  ) : translatedField.isComplete === true ? (
+                                    <span title="Translation is complete">
+                                      <CheckCircle className="h-3 w-3 text-green-600" />
+                                    </span>
+                                  ) : translatedField.isComplete === false ? (
+                                    <span title="Translation may be incomplete">
+                                      <AlertCircle className="h-3 w-3 text-red-600" />
+                                    </span>
+                                  ) : (
+                                    <div className="h-3 w-3" />
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                            <div className="flex items-center gap-1">
+                              {translatedField?.translatedValue && (
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    checkTranslationCompleteness(
+                                      itemId,
+                                      field.fieldId,
+                                      field.value,
+                                      translatedField.translatedValue,
+                                      field.fieldName,
+                                    )
+                                  }
+                                  disabled={
+                                    checkingFields.has(
+                                      `${itemId}-${field.fieldId}`,
+                                    ) || !translatedField.translatedValue.trim()
+                                  }
+                                  className="flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 hover:text-gray-800 disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:bg-transparent"
+                                  title="Check translation completeness"
+                                >
+                                  {checkingFields.has(
+                                    `${itemId}-${field.fieldId}`,
+                                  ) ? (
+                                    <RefreshCw className="h-3 w-3 animate-spin" />
+                                  ) : (
+                                    <CheckCircle className="h-3 w-3" />
+                                  )}
+                                  Check
+                                </button>
+                              )}
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  handleSingleFieldTranslation(
+                                    itemId,
+                                    field.fieldId,
+                                    field,
+                                  )
+                                }
+                                disabled={
+                                  !targetLanguage?.languageCode ||
+                                  translatingFields.has(
+                                    `${itemId}-${field.fieldId}`,
+                                  ) ||
+                                  isTranslating
+                                }
+                                className="flex items-center gap-1 rounded px-2 py-1 text-xs text-blue-600 hover:bg-blue-50 hover:text-blue-800 disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:bg-transparent"
+                                title="Retranslate this field"
+                              >
+                                {translatingFields.has(
+                                  `${itemId}-${field.fieldId}`,
+                                ) ? (
+                                  <RefreshCw className="h-3 w-3 animate-spin" />
+                                ) : (
+                                  <Wand2 className="h-3 w-3" />
+                                )}
+                                Retranslate
+                              </button>
+                            </div>
+                          </div>
+                          {translatedField?.isComplete === false &&
+                            translatedField?.missingSuggestions && (
+                              <div className="mb-2 rounded border border-orange-200 bg-orange-50 p-2">
+                                <div className="mb-1 flex items-center gap-1 text-xs font-medium text-orange-800">
+                                  <Sparkles className="h-3 w-3" />
+                                  AI Suggestions for Missing Content:
+                                </div>
+                                <p className="text-xs text-orange-700 select-text">
+                                  {translatedField.missingSuggestions}
+                                </p>
+                              </div>
+                            )}
                           <InputTextarea
                             value={translatedField?.translatedValue || ""}
                             onChange={(e) =>
@@ -691,6 +1096,12 @@ Return your response as a JSON object in this exact format:
               </div>
             ))}
           </div>
+        ) : (
+          <div className="py-8 text-center text-sm text-gray-500">
+            {Object.keys(translatableFields).length > 0
+              ? "Click 'Translate Fields' to start the translation process."
+              : "No translatable fields found."}
+          </div>
         )}
       </WizardBox>
 

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4027";
-export const buildDate = "2025-08-01 01:57:56";
+export const version = "1.0.4031";
+export const buildDate = "2025-08-06 09:06:10";