@alpaca-editor/core 1.0.4017 → 1.0.4026

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

@@ -0,0 +1,772 @@
+import { StepComponentProps } from "../../config/types";
+import { useEffect, useState, useCallback } from "react";
+import { useEditContext } from "../../editor/client/editContext";
+import { ItemDescriptor, Language } from "../../editor/pageModel";
+import { ActionButton } from "../../components/ActionButton";
+import { Input } from "../../components/ui/input";
+import { InputTextarea } from "primereact/inputtextarea";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { SimpleLanguageSelector } from "../../components/SimpleLanguageSelector";
+import { getLanguagesAndVersions } from "../../editor/services/contentService";
+import {
+  Languages,
+  Upload,
+  Wand2,
+  CheckCircle,
+  AlertCircle,
+  Sparkles,
+  RefreshCw,
+} from "lucide-react";
+import { WizardBox } from "../WizardBox";
+
+interface TranslatableField {
+  fieldId: string;
+  fieldName: string;
+  value: string;
+}
+
+interface TranslatableFieldsResponse {
+  [itemId: string]: TranslatableField[];
+}
+
+interface TranslatedField {
+  fieldId: string;
+  translatedValue: string;
+}
+
+interface TranslatedFieldsResponse {
+  [itemId: string]: TranslatedField[];
+}
+
+export function TranslateStep({
+  step,
+  data,
+  setData,
+  setStepCompleted,
+  internalState,
+  setInternalState,
+  parentItem,
+}: StepComponentProps) {
+  const editContext = useEditContext();
+  const [translatableFields, setTranslatableFields] =
+    useState<TranslatableFieldsResponse>({});
+  const [translatedFields, setTranslatedFields] =
+    useState<TranslatedFieldsResponse>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [isTranslating, setIsTranslating] = useState(false);
+  const [isDetectingLanguage, setIsDetectingLanguage] = useState(false);
+  const [targetLanguage, setTargetLanguage] = useState<Language | null>(
+    data.targetLanguage || null,
+  );
+  const [detectedLanguageName, setDetectedLanguageName] = useState<string>(
+    data.detectedLanguageName || "",
+  );
+  const [availableSourceLanguages, setAvailableSourceLanguages] = useState<
+    Language[]
+  >([]);
+  const [componentNames, setComponentNames] = useState<Record<string, string>>(
+    {},
+  );
+
+  // Get the current item from data (set by previous wizard steps)
+  const currentItem = data.currentItem || parentItem;
+
+  // Add source language state - initialize from current item's language
+  const [sourceLanguage, setSourceLanguage] = useState<string>(
+    data.sourceLanguage || currentItem?.language || "en",
+  );
+
+  // Get document content from previous wizard step
+  const documentContent = data.document;
+
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [publishResults, setPublishResults] = useState<{
+    success: string[];
+    errors: string[];
+  }>({ success: [], errors: [] });
+
+  const fetchAvailableLanguages = useCallback(async () => {
+    if (!currentItem || !editContext) return;
+
+    try {
+      const response = await getLanguagesAndVersions({
+        id: currentItem.id,
+        language: currentItem.language,
+        version: currentItem.version,
+      });
+
+      if (response.data?.languages) {
+        // Filter to only languages that have versions (versions > 0)
+        const languagesWithVersions = response.data.languages
+          .filter((lang) => lang.versions > 0)
+          .map((lang) => ({
+            languageCode: lang.languageCode,
+            name: lang.name,
+            icon: lang.icon,
+            versions: lang.versions,
+          }));
+        setAvailableSourceLanguages(languagesWithVersions);
+      }
+    } catch (error) {
+      console.error("Error fetching available languages:", error);
+      // Fallback to all languages if there's an error
+      setAvailableSourceLanguages(editContext?.itemLanguages || []);
+    }
+  }, [currentItem, editContext]);
+
+  const fetchComponentNames = useCallback(
+    async (itemIds: string[]) => {
+      if (!editContext || itemIds.length === 0) return;
+
+      const names: Record<string, string> = {};
+
+      for (const itemId of itemIds) {
+        try {
+          const item = await editContext.itemsRepository.getItem({
+            id: itemId,
+            language: sourceLanguage,
+            version: 0,
+          });
+
+          if (item?.name) {
+            names[itemId] = item.name;
+          } else {
+            names[itemId] = itemId; // Fallback to ID if name not found
+          }
+        } catch (error) {
+          console.error(`Error fetching item ${itemId}:`, error);
+          names[itemId] = itemId; // Fallback to ID on error
+        }
+      }
+
+      setComponentNames(names);
+    },
+    [editContext, sourceLanguage],
+  );
+
+  const fetchTranslatableFields = useCallback(async () => {
+    if (!currentItem || !editContext) return;
+
+    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: 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: "",
+              }),
+            );
+          }
+        });
+        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");
+      }
+    } catch (error) {
+      console.error("Error fetching translatable fields:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentItem, editContext, sourceLanguage, fetchComponentNames]);
+
+  useEffect(() => {
+    fetchAvailableLanguages();
+  }, [fetchAvailableLanguages]);
+
+  useEffect(() => {
+    fetchTranslatableFields();
+  }, [fetchTranslatableFields, sourceLanguage]);
+
+  const detectLanguage = async () => {
+    if (!editContext) {
+      console.warn("Edit context not available for language detection");
+      return;
+    }
+
+    setIsDetectingLanguage(true);
+    try {
+      const prompt = `Analyze the following text and identify the language it is written in. Return only the language name in English (e.g., "Spanish", "French", "German", "Italian", etc.). Do not include any other text or explanation.
+
+Text to analyze:
+${documentContent.substring(0, 1000)}`;
+
+      const abortController = new AbortController();
+
+      const result = await executePrompt(
+        [
+          {
+            content: prompt,
+            role: "user",
+            name: "user",
+            id: crypto.randomUUID(),
+          },
+        ],
+        { editContext, createAiContext: createWizardAiContext },
+        { model: "gpt-4o-mini" },
+        { signal: abortController.signal },
+        (response: any) => {
+          try {
+            const content =
+              response.content ||
+              response.messages?.[response.messages.length - 1]?.content;
+            if (content) {
+              const languageName = content.trim();
+              setDetectedLanguageName(languageName);
+              // Try to find matching Language object from available languages
+              const availableLanguages = editContext?.itemLanguages || [];
+              const matchingLanguage = availableLanguages.find((lang) =>
+                lang.name.toLowerCase().includes(languageName.toLowerCase()),
+              );
+              if (matchingLanguage) {
+                setTargetLanguage(matchingLanguage);
+              }
+            }
+          } catch (parseError: unknown) {
+            console.error(
+              "Error parsing language detection response:",
+              parseError,
+            );
+          }
+        },
+      );
+
+      if (result && result.messages && result.messages.length > 0) {
+        const lastMessage = result.messages[result.messages.length - 1];
+        if (lastMessage && lastMessage.content) {
+          const languageName = lastMessage.content.trim();
+          setDetectedLanguageName(languageName);
+          // Try to find matching Language object from available languages
+          const availableLanguages = editContext?.itemLanguages || [];
+          const matchingLanguage = availableLanguages.find((lang) =>
+            lang.name.toLowerCase().includes(languageName.toLowerCase()),
+          );
+          if (matchingLanguage) {
+            setTargetLanguage(matchingLanguage);
+          }
+          console.log(`Detected target language: ${languageName}`);
+        }
+      }
+    } catch (error) {
+      console.error("Language detection error:", error);
+    } finally {
+      setIsDetectingLanguage(false);
+    }
+  };
+
+  // Auto-detect language when document content is available
+  useEffect(() => {
+    if (!detectedLanguageName && !isDetectingLanguage) {
+      detectLanguage();
+    }
+  }, [detectedLanguageName, isDetectingLanguage]);
+
+  const handleTranslate = async () => {
+    if (!targetLanguage?.languageCode) {
+      console.warn("Missing target language");
+      return;
+    }
+
+    if (!editContext) {
+      console.error("Edit context not available");
+      return;
+    }
+
+    setIsTranslating(true);
+    try {
+      // Prepare the fields data for the AI prompt
+      const fieldsForTranslation = Object.entries(translatableFields).flatMap(
+        ([itemId, fields]) =>
+          fields.map((field) => ({
+            itemId,
+            fieldId: field.fieldId,
+            fieldName: field.fieldName,
+            originalValue: field.value,
+          })),
+      );
+
+      const prompt = `You are a translation assistant. You have been given a document in ${targetLanguage.name} and a list of fields that need to be translated from ${sourceLanguage} to ${targetLanguage.name}.
+
+Your task is to:
+1. Match the content from the provided document to the fields that need translation
+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 a field, leave the translatedValue empty
+
+Document content:
+${documentContent}
+
+Fields to translate:
+${JSON.stringify(fieldsForTranslation, null, 2)}
+
+Return your response as a JSON object in this exact format:
+{
+  "translations": [
+    {
+      "itemId": "item-id",
+      "fieldId": "field-id", 
+      "translatedValue": "exact text from document"
+    }
+  ]
+}`;
+
+      const abortController = new AbortController();
+
+      const result = await executePrompt(
+        [
+          {
+            content: prompt,
+            role: "user",
+            name: "user",
+            id: crypto.randomUUID(),
+          },
+        ],
+        { editContext, createAiContext: createWizardAiContext },
+        { model: "gpt-4o-mini" },
+        { 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 translations = parsedResponse.translations || [];
+
+            // Update translated fields with AI response
+            const updatedTranslatedFields: TranslatedFieldsResponse = {
+              ...translatedFields,
+            };
+
+            translations.forEach((translation: any) => {
+              const { itemId, fieldId, translatedValue } = translation;
+              if (updatedTranslatedFields[itemId]) {
+                const fieldIndex = updatedTranslatedFields[itemId].findIndex(
+                  (f) => f.fieldId === fieldId,
+                );
+                if (
+                  fieldIndex !== -1 &&
+                  updatedTranslatedFields[itemId][fieldIndex]
+                ) {
+                  updatedTranslatedFields[itemId][fieldIndex].translatedValue =
+                    translatedValue || "";
+                }
+              }
+            });
+
+            setTranslatedFields(updatedTranslatedFields);
+            console.log(
+              `Translation complete: ${translations.length} fields translated`,
+            );
+          } catch (parseError) {
+            console.error("Failed to parse AI response:", parseError);
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Translation error:", error);
+    } finally {
+      setIsTranslating(false);
+    }
+  };
+
+  const handleFieldChange = (
+    itemId: string,
+    fieldId: string,
+    value: string,
+  ) => {
+    setTranslatedFields((prev) => ({
+      ...prev,
+      [itemId]:
+        prev[itemId]?.map((field) =>
+          field.fieldId === fieldId
+            ? { ...field, translatedValue: value }
+            : field,
+        ) || [],
+    }));
+  };
+
+  const handleConfirmTranslation = async () => {
+    if (!editContext || !currentItem || !targetLanguage?.languageCode) {
+      console.error("Missing required data for publishing translations");
+      return;
+    }
+
+    setIsPublishing(true);
+    setPublishResults({ success: [], errors: [] });
+
+    try {
+      // Get all items that have translations
+      const itemsToTranslate = Object.entries(translatedFields).filter(
+        ([itemId, fields]) =>
+          fields.some((field) => field.translatedValue.trim() !== ""),
+      );
+
+      console.log(
+        `Publishing translations for ${itemsToTranslate.length} items to language: ${targetLanguage.languageCode}`,
+      );
+
+      for (const [itemId, translatedFieldsList] of itemsToTranslate) {
+        try {
+          // Create ItemDescriptor for the component item
+          const componentItemDescriptor = {
+            id: itemId,
+            language: targetLanguage.languageCode,
+            version: 0,
+          };
+
+          // Create language version for this item
+          console.log(
+            `Creating language version for item ${itemId} in language ${targetLanguage.languageCode}`,
+          );
+          await editContext.operations.createVersion(componentItemDescriptor);
+
+          // Update field values with translations
+          const fieldsWithTranslations = translatedFieldsList.filter(
+            (field) => field.translatedValue.trim() !== "",
+          );
+
+          for (const translatedField of fieldsWithTranslations) {
+            const fieldDescriptor = {
+              fieldId: translatedField.fieldId,
+              item: {
+                id: itemId,
+                language: targetLanguage.languageCode,
+                version: 0,
+              },
+            };
+
+            console.log(
+              `Updating field ${translatedField.fieldId} for item ${itemId}`,
+            );
+            await editContext.operations.editField({
+              field: fieldDescriptor,
+              value: translatedField.translatedValue,
+              rawValue: translatedField.translatedValue,
+              refresh: "none",
+            });
+          }
+
+          setPublishResults((prev) => ({
+            ...prev,
+            success: [
+              ...prev.success,
+              `${itemId} (${fieldsWithTranslations.length} fields)`,
+            ],
+          }));
+        } catch (error) {
+          console.error(`Error translating item ${itemId}:`, error);
+          setPublishResults((prev) => ({
+            ...prev,
+            errors: [
+              ...prev.errors,
+              `${itemId}: ${error instanceof Error ? error.message : "Unknown error"}`,
+            ],
+          }));
+        }
+      }
+
+      console.log("Translation publishing completed");
+    } catch (error) {
+      console.error("Error during translation publishing:", error);
+      setPublishResults((prev) => ({
+        ...prev,
+        errors: [
+          ...prev.errors,
+          `General error: ${error instanceof Error ? error.message : "Unknown error"}`,
+        ],
+      }));
+    } finally {
+      setIsPublishing(false);
+    }
+  };
+
+  // Check if step is completed (has translations and they've been published successfully)
+  useEffect(() => {
+    const hasTranslations = Object.values(translatedFields).some((fields) =>
+      fields.some((field) => field.translatedValue.trim() !== ""),
+    );
+    const hasSuccessfulPublish = publishResults.success.length > 0;
+
+    // Step is completed if we have translations and at least some have been published successfully
+    setStepCompleted(hasTranslations && hasSuccessfulPublish);
+  }, [translatedFields, publishResults, setStepCompleted]);
+
+  // Save translated fields and publish results to wizard data
+  useEffect(() => {
+    setData((prev) => ({
+      ...prev,
+      translatedFields,
+      publishResults,
+      targetLanguage,
+      detectedLanguageName,
+      sourceLanguage,
+    }));
+  }, [
+    translatedFields,
+    publishResults,
+    targetLanguage,
+    detectedLanguageName,
+    sourceLanguage,
+    setData,
+  ]);
+
+  const totalFields = Object.values(translatableFields).reduce(
+    (total, fields) => total + fields.length,
+    0,
+  );
+  const translatedCount = Object.values(translatedFields).reduce(
+    (total, fields) =>
+      total +
+      fields.filter((field) => field.translatedValue.trim() !== "").length,
+    0,
+  );
+
+  return (
+    <div className="mx-auto flex flex-col gap-6 p-6">
+      <WizardBox
+        title="Translation Setup"
+        description="Select source and target languages, target language will be auto-detected from the document"
+        icon={<Languages className="h-5 w-5" />}
+      >
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="mb-2 block text-sm font-medium">
+              Source Language
+            </label>
+            <SimpleLanguageSelector
+              selectedLanguage={sourceLanguage}
+              onLanguageSelected={(language: Language) =>
+                setSourceLanguage(language.languageCode)
+              }
+              disabled={false}
+              availableLanguages={availableSourceLanguages}
+            />
+            <p className="mt-1 text-xs text-gray-600">
+              Select the language of the content to translate from
+            </p>
+          </div>
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="block text-sm font-medium">
+                Target Language
+              </label>
+              {isDetectingLanguage && (
+                <div className="flex items-center gap-1 text-xs text-blue-600">
+                  <RefreshCw className="h-3 w-3 animate-spin" />
+                  Detecting...
+                </div>
+              )}
+              {detectedLanguageName && !isDetectingLanguage && (
+                <div className="flex items-center gap-1 text-xs text-green-600">
+                  <Sparkles className="h-3 w-3" />
+                  Auto-detected
+                </div>
+              )}
+            </div>
+            <div className="relative">
+              <SimpleLanguageSelector
+                selectedLanguage={targetLanguage?.languageCode || ""}
+                onLanguageSelected={(language: Language) =>
+                  setTargetLanguage(language)
+                }
+                disabled={false}
+                className={
+                  detectedLanguageName ? "border-green-200 bg-green-50" : ""
+                }
+              />
+              {detectedLanguageName && (
+                <button
+                  type="button"
+                  onClick={detectLanguage}
+                  className="absolute top-1/2 right-2 -translate-y-1/2 transform text-blue-600 hover:text-blue-800"
+                  title="Re-detect language"
+                >
+                  <RefreshCw className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+            {detectedLanguageName && (
+              <p className="mt-1 text-xs text-green-600">
+                Detected: {detectedLanguageName}
+                {targetLanguage && ` → Selected: ${targetLanguage.name}`}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <ActionButton
+          onClick={handleTranslate}
+          isLoading={isTranslating}
+          disabled={!targetLanguage?.languageCode}
+          className="mt-4"
+          variant="outline"
+        >
+          <Wand2 className="mr-2 h-4 w-4" />
+          Translate Fields
+        </ActionButton>
+      </WizardBox>
+
+      <WizardBox
+        title="Translation Progress"
+        description={`${translatedCount} of ${totalFields} fields translated`}
+        icon={<Upload className="h-5 w-5" />}
+      >
+        {isLoading ? (
+          <div className="py-8 text-center">Loading translatable fields...</div>
+        ) : (
+          <div className="space-y-6">
+            {Object.entries(translatableFields).map(([itemId, fields]) => (
+              <div key={itemId} className="rounded-lg p-4">
+                <h4 className="mb-4 font-medium">
+                  {componentNames[itemId] || "Component"}
+                </h4>
+                <div className="space-y-4">
+                  {fields.map((field) => {
+                    const translatedField = translatedFields[itemId]?.find(
+                      (f) => f.fieldId === field.fieldId,
+                    );
+                    return (
+                      <div
+                        key={field.fieldId}
+                        className="grid grid-cols-2 gap-4"
+                      >
+                        <div className="flex flex-col">
+                          <label className="mb-1 block text-xs font-medium">
+                            {field.fieldName}
+                          </label>
+                          <div className="min-h-[100px] flex-1 rounded border bg-gray-50 p-3 text-xs">
+                            {field.value}
+                          </div>
+                        </div>
+                        <div className="flex flex-col">
+                          <label className="mb-1 block text-xs font-medium">
+                            {field.fieldName}
+                          </label>
+                          <InputTextarea
+                            value={translatedField?.translatedValue || ""}
+                            onChange={(e) =>
+                              handleFieldChange(
+                                itemId,
+                                field.fieldId,
+                                e.target.value,
+                              )
+                            }
+                            placeholder="Translation will appear here..."
+                            rows={4}
+                            className="min-h-[100px] w-full flex-1 text-xs"
+                          />
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </WizardBox>
+
+      {translatedCount > 0 && (
+        <WizardBox
+          title="Publish Translations"
+          description="Create language versions and apply translations"
+          icon={<CheckCircle className="h-5 w-5" />}
+        >
+          <div className="space-y-4">
+            <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
+              <h4 className="mb-2 font-medium text-blue-900">
+                Ready to Publish
+              </h4>
+              <p className="text-sm text-blue-800">
+                {translatedCount} fields ready to be published to{" "}
+                <strong>{targetLanguage?.name}</strong> language versions
+                {detectedLanguageName &&
+                  targetLanguage?.name
+                    ?.toLowerCase()
+                    .includes(detectedLanguageName.toLowerCase()) && (
+                    <span className="text-green-700"> (auto-detected)</span>
+                  )}
+                . This will create new language versions for all translated
+                items and update their field values.
+              </p>
+            </div>
+
+            {(publishResults.success.length > 0 ||
+              publishResults.errors.length > 0) && (
+              <div className="space-y-2">
+                {publishResults.success.length > 0 && (
+                  <div className="rounded-lg border border-green-200 bg-green-50 p-3">
+                    <div className="mb-1 flex items-center gap-2 font-medium text-green-800">
+                      <CheckCircle className="h-4 w-4" />
+                      Successfully Published ({publishResults.success.length})
+                    </div>
+                    <ul className="list-inside list-disc text-sm text-green-700">
+                      {publishResults.success.map((item, index) => (
+                        <li key={index}>{item}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+
+                {publishResults.errors.length > 0 && (
+                  <div className="rounded-lg border border-red-200 bg-red-50 p-3">
+                    <div className="mb-1 flex items-center gap-2 font-medium text-red-800">
+                      <AlertCircle className="h-4 w-4" />
+                      Errors ({publishResults.errors.length})
+                    </div>
+                    <ul className="list-inside list-disc text-sm text-red-700">
+                      {publishResults.errors.map((error, index) => (
+                        <li key={index}>{error}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <ActionButton
+              onClick={handleConfirmTranslation}
+              isLoading={isPublishing}
+              disabled={translatedCount === 0 || !targetLanguage?.languageCode}
+              className="w-full"
+              variant="outline"
+            >
+              <CheckCircle className="mr-2 h-4 w-4" />
+              {isPublishing
+                ? "Publishing Translations..."
+                : `Publish ${translatedCount} Translations to ${targetLanguage?.name || "Target Language"}`}
+            </ActionButton>
+          </div>
+        </WizardBox>
+      )}
+    </div>
+  );
+}