@alpaca-editor/core 1.0.4033 → 1.0.4038

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

@@ -1,14 +1,13 @@
 import { StepComponentProps } from "../../config/types";
 import { useEffect, useState, useCallback } from "react";
 import { useEditContext } from "../../editor/client/editContext";
-import { ItemDescriptor, Language } from "../../editor/pageModel";
+import { 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 { LanguageSelector } from "../../components/ui/LanguageSelector";
+
 import {
   Languages,
   Upload,
@@ -17,13 +16,19 @@ import {
   AlertCircle,
   Sparkles,
   RefreshCw,
+  Edit,
+  Save,
+  X,
 } from "lucide-react";
 import { WizardBox } from "../WizardBox";
+import { SimpleRichTextEditor } from "../../editor/field-types/richtext/components/SimpleRichTextEditor";
+import "../../editor/field-types/richtext/components/SimpleRichTextEditor.css";
 
 interface TranslatableField {
   fieldId: string;
   fieldName: string;
   value: string;
+  fieldType: string;
 }
 
 interface TranslatableFieldsResponse {
@@ -68,12 +73,11 @@ export function TranslateStep({
   const [detectedLanguageName, setDetectedLanguageName] = useState<string>(
     data.detectedLanguageName || "",
   );
-  const [availableSourceLanguages, setAvailableSourceLanguages] = useState<
-    Language[]
-  >([]);
+
   const [componentNames, setComponentNames] = useState<Record<string, string>>(
     {},
   );
+  const [editingFields, setEditingFields] = useState<Set<string>>(new Set());
 
   // Get the current item from data (set by previous wizard steps)
   const currentItem = data.currentItem || parentItem;
@@ -86,41 +90,12 @@ export function TranslateStep({
   // Get document content from previous wizard step
   const documentContent = data.document;
 
-  const [isPublishing, setIsPublishing] = useState(false);
-  const [publishResults, setPublishResults] = useState<{
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveResults, setSaveResults] = 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[], sourceLanguageParam: string) => {
       if (!editContext || itemIds.length === 0) return;
@@ -213,10 +188,6 @@ export function TranslateStep({
   const [lastFetchedSourceLanguage, setLastFetchedSourceLanguage] =
     useState<string>("");
 
-  useEffect(() => {
-    fetchAvailableLanguages();
-  }, [fetchAvailableLanguages]);
-
   // Reset the last fetched source language when the current item changes
   useEffect(() => {
     setLastFetchedSourceLanguage("");
@@ -226,12 +197,12 @@ export function TranslateStep({
     // 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)
+    // 3. We're not currently saving (to avoid conflicts)
     // 4. We're not currently loading or translating
     if (
       sourceLanguage &&
       sourceLanguage !== lastFetchedSourceLanguage &&
-      !isPublishing &&
+      !isSaving &&
       !isLoading &&
       !isTranslating
     ) {
@@ -242,7 +213,7 @@ export function TranslateStep({
     fetchTranslatableFields,
     sourceLanguage,
     lastFetchedSourceLanguage,
-    isPublishing,
+    isSaving,
     isLoading,
     isTranslating,
   ]);
@@ -272,7 +243,7 @@ ${documentContent.substring(0, 1000)}`;
           },
         ],
         { editContext, createAiContext: createWizardAiContext },
-        { model: "gpt-4.1" },
+        { model: step.fields.aiModel || undefined },
         { signal: abortController.signal },
         (response: any) => {
           try {
@@ -403,7 +374,7 @@ Return your response as a JSON object in this exact format:
           },
         ],
         { editContext, createAiContext: createWizardAiContext },
-        { model: "gpt-4.1", stream: false },
+        { model: step.fields.aiModel || undefined, stream: false },
         { signal: abortController.signal },
       );
 
@@ -519,7 +490,7 @@ Return your response as a JSON object in this exact format:
           },
         ],
         { editContext, createAiContext: createWizardAiContext },
-        { model: "gpt-4.1", stream: false },
+        { model: step.fields.aiModel || undefined, stream: false },
         { signal: abortController.signal },
       );
 
@@ -620,7 +591,7 @@ Return your response as a JSON object in this exact format:
           },
         ],
         { editContext, createAiContext: createWizardAiContext },
-        { model: "gpt-4.1", stream: false },
+        { model: step.fields.aiModel || undefined, stream: false },
         { signal: abortController.signal },
       );
 
@@ -683,6 +654,26 @@ Return your response as a JSON object in this exact format:
     }
   };
 
+  const isRichTextField = (fieldType: string): boolean => {
+    return (
+      fieldType?.toLowerCase() === "rich text" ||
+      fieldType?.toLowerCase() === "html"
+    );
+  };
+
+  const toggleFieldEdit = (itemId: string, fieldId: string) => {
+    const fieldKey = `${itemId}-${fieldId}`;
+    setEditingFields((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(fieldKey)) {
+        newSet.delete(fieldKey);
+      } else {
+        newSet.add(fieldKey);
+      }
+      return newSet;
+    });
+  };
+
   const handleFieldChange = (
     itemId: string,
     fieldId: string,
@@ -704,14 +695,14 @@ Return your response as a JSON object in this exact format:
     }));
   };
 
-  const handleConfirmTranslation = async () => {
+  const handleSaveTranslations = async () => {
     if (!editContext || !currentItem || !targetLanguage?.languageCode) {
-      console.error("Missing required data for publishing translations");
+      console.error("Missing required data for saving translations");
       return;
     }
 
-    setIsPublishing(true);
-    setPublishResults({ success: [], errors: [] });
+    setIsSaving(true);
+    setSaveResults({ success: [], errors: [] });
 
     try {
       // Get all items that have translations
@@ -721,7 +712,7 @@ Return your response as a JSON object in this exact format:
       );
 
       console.log(
-        `Publishing translations for ${itemsToTranslate.length} items to language: ${targetLanguage.languageCode}`,
+        `Saving translations for ${itemsToTranslate.length} items to language: ${targetLanguage.languageCode}`,
       );
 
       for (const [itemId, translatedFieldsList] of itemsToTranslate) {
@@ -765,7 +756,7 @@ Return your response as a JSON object in this exact format:
             });
           }
 
-          setPublishResults((prev) => ({
+          setSaveResults((prev) => ({
             ...prev,
             success: [
               ...prev.success,
@@ -774,7 +765,7 @@ Return your response as a JSON object in this exact format:
           }));
         } catch (error) {
           console.error(`Error translating item ${itemId}:`, error);
-          setPublishResults((prev) => ({
+          setSaveResults((prev) => ({
             ...prev,
             errors: [
               ...prev.errors,
@@ -784,10 +775,10 @@ Return your response as a JSON object in this exact format:
         }
       }
 
-      console.log("Translation publishing completed");
+      console.log("Translation saving completed");
     } catch (error) {
-      console.error("Error during translation publishing:", error);
-      setPublishResults((prev) => ({
+      console.error("Error during translation saving:", error);
+      setSaveResults((prev) => ({
         ...prev,
         errors: [
           ...prev.errors,
@@ -795,34 +786,34 @@ Return your response as a JSON object in this exact format:
         ],
       }));
     } finally {
-      setIsPublishing(false);
+      setIsSaving(false);
     }
   };
 
-  // Check if step is completed (has translations and they've been published successfully)
+  // Check if step is completed (has translations and they've been saved successfully)
   useEffect(() => {
     const hasTranslations = Object.values(translatedFields).some((fields) =>
       fields.some((field) => field.translatedValue.trim() !== ""),
     );
-    const hasSuccessfulPublish = publishResults.success.length > 0;
+    const hasSuccessfulSave = saveResults.success.length > 0;
 
-    // Step is completed if we have translations and at least some have been published successfully
-    setStepCompleted(hasTranslations && hasSuccessfulPublish);
-  }, [translatedFields, publishResults, setStepCompleted]);
+    // Step is completed if we have translations and at least some have been saved successfully
+    setStepCompleted(hasTranslations && hasSuccessfulSave);
+  }, [translatedFields, saveResults, setStepCompleted]);
 
-  // Save translated fields and publish results to wizard data
+  // Save translated fields and save results to wizard data
   useEffect(() => {
     setData((prev) => ({
       ...prev,
       translatedFields,
-      publishResults,
+      saveResults,
       targetLanguage,
       detectedLanguageName,
       sourceLanguage,
     }));
   }, [
     translatedFields,
-    publishResults,
+    saveResults,
     targetLanguage,
     detectedLanguageName,
     sourceLanguage,
@@ -852,13 +843,14 @@ Return your response as a JSON object in this exact format:
             <label className="mb-2 block text-sm font-medium">
               Source Language
             </label>
-            <SimpleLanguageSelector
+            <LanguageSelector
               selectedLanguage={sourceLanguage}
               onLanguageSelected={(language: Language) =>
                 setSourceLanguage(language.languageCode)
               }
               disabled={false}
-              availableLanguages={availableSourceLanguages}
+              showAllLanguagesSwitch={false}
+              showAllLanguages={true}
             />
             <p className="mt-1 text-xs text-gray-600">
               Select the language of the content to translate from
@@ -883,15 +875,14 @@ Return your response as a JSON object in this exact format:
               )}
             </div>
             <div className="relative">
-              <SimpleLanguageSelector
+              <LanguageSelector
                 selectedLanguage={targetLanguage?.languageCode || ""}
                 onLanguageSelected={(language: Language) =>
                   setTargetLanguage(language)
                 }
                 disabled={false}
-                className={
-                  detectedLanguageName ? "border-green-200 bg-green-50" : ""
-                }
+                showAllLanguagesSwitch={false}
+                showAllLanguages={true}
               />
               {detectedLanguageName && (
                 <button
@@ -944,13 +935,43 @@ Return your response as a JSON object in this exact format:
               Translating fields...
             </div>
           </div>
-        ) : isPublishing ? (
+        ) : isSaving ? (
           <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...
+              Saving translations...
             </div>
           </div>
+        ) : saveResults.success.length > 0 || saveResults.errors.length > 0 ? (
+          <div className="space-y-4">
+            {saveResults.success.length > 0 && (
+              <div className="rounded-lg border border-green-200 bg-green-50 p-4">
+                <div className="mb-2 flex items-center gap-2 font-medium text-green-800">
+                  <CheckCircle className="h-4 w-4" />
+                  Successfully Saved ({saveResults.success.length} items)
+                </div>
+                <ul className="list-inside list-disc text-sm text-green-700">
+                  {saveResults.success.map((item, index) => (
+                    <li key={index}>{item}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {saveResults.errors.length > 0 && (
+              <div className="rounded-lg border border-red-200 bg-red-50 p-4">
+                <div className="mb-2 flex items-center gap-2 font-medium text-red-800">
+                  <AlertCircle className="h-4 w-4" />
+                  Errors ({saveResults.errors.length})
+                </div>
+                <ul className="list-inside list-disc text-sm text-red-700">
+                  {saveResults.errors.map((error, index) => (
+                    <li key={index}>{error}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
         ) : translatedCount > 0 ? (
           <div className="space-y-6">
             {Object.entries(translatableFields).map(([itemId, fields]) => (
@@ -964,20 +985,18 @@ Return your response as a JSON object in this exact format:
                       (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 key={field.fieldId}>
+                        {/* Headers Row */}
+                        <div className="grid grid-cols-2 gap-4">
+                          {/* Source Field Header */}
+                          <div>
+                            <label className="block text-xs font-medium">
+                              {field.fieldName} ({field.fieldType})
+                            </label>
                           </div>
-                        </div>
-                        <div className="flex flex-col">
-                          <div className="mb-1 flex items-center justify-between">
+
+                          {/* Translation Field Header */}
+                          <div className="flex items-center justify-between">
                             <div className="flex items-center gap-2">
                               <label className="block text-xs font-medium">
                                 {field.fieldName}
@@ -1003,91 +1022,205 @@ Return your response as a JSON object in this exact format:
                               )}
                             </div>
                             <div className="flex items-center gap-1">
-                              {translatedField?.translatedValue && (
+                              {!editingFields.has(
+                                `${itemId}-${field.fieldId}`,
+                              ) &&
+                                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>
+                                )}
+                              {!editingFields.has(
+                                `${itemId}-${field.fieldId}`,
+                              ) && (
                                 <button
                                   type="button"
                                   onClick={() =>
-                                    checkTranslationCompleteness(
+                                    handleSingleFieldTranslation(
                                       itemId,
                                       field.fieldId,
-                                      field.value,
-                                      translatedField.translatedValue,
-                                      field.fieldName,
+                                      field,
                                     )
                                   }
                                   disabled={
-                                    checkingFields.has(
+                                    !targetLanguage?.languageCode ||
+                                    translatingFields.has(
                                       `${itemId}-${field.fieldId}`,
-                                    ) || !translatedField.translatedValue.trim()
+                                    ) ||
+                                    isTranslating
                                   }
-                                  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"
+                                  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"
                                 >
-                                  {checkingFields.has(
+                                  {translatingFields.has(
                                     `${itemId}-${field.fieldId}`,
                                   ) ? (
                                     <RefreshCw className="h-3 w-3 animate-spin" />
                                   ) : (
-                                    <CheckCircle className="h-3 w-3" />
+                                    <Wand2 className="h-3 w-3" />
                                   )}
-                                  Check
+                                  Retranslate
+                                </button>
+                              )}
+                              {editingFields.has(
+                                `${itemId}-${field.fieldId}`,
+                              ) ? (
+                                <>
+                                  <button
+                                    type="button"
+                                    onClick={() =>
+                                      toggleFieldEdit(itemId, field.fieldId)
+                                    }
+                                    className="flex items-center gap-1 rounded px-2 py-1 text-xs text-green-600 hover:bg-green-50 hover:text-green-800"
+                                    title="Save changes"
+                                  >
+                                    <Save className="h-3 w-3" strokeWidth={1} />
+                                    Save
+                                  </button>
+                                  <button
+                                    type="button"
+                                    onClick={() =>
+                                      toggleFieldEdit(itemId, field.fieldId)
+                                    }
+                                    className="flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+                                    title="Cancel edit"
+                                  >
+                                    <X className="h-3 w-3" strokeWidth={1} />
+                                    Cancel
+                                  </button>
+                                </>
+                              ) : (
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    toggleFieldEdit(itemId, field.fieldId)
+                                  }
+                                  className="flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+                                  title="Edit translation"
+                                >
+                                  <Edit className="h-3 w-3" strokeWidth={1} />
+                                  Edit
                                 </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>
+
+                        {/* Content Row */}
+                        <div className="grid grid-cols-2 gap-4">
+                          {/* Source Field Content */}
+                          <div className="rounded border bg-gray-50 p-1 text-xs">
+                            {isRichTextField(field.fieldType) ? (
+                              <div
+                                className="rich-text-content"
+                                dangerouslySetInnerHTML={{
+                                  __html: field.value,
+                                }}
+                              />
+                            ) : (
+                              field.value
+                            )}
+                          </div>
+
+                          {/* Translation Field Content */}
+                          <div className="space-y-2">
+                            {translatedField?.isComplete === false &&
+                              translatedField?.missingSuggestions && (
+                                <div className="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>
-                                <p className="text-xs text-orange-700 select-text">
-                                  {translatedField.missingSuggestions}
-                                </p>
+                              )}
+
+                            {/* Conditionally render editor or readonly view */}
+                            {editingFields.has(`${itemId}-${field.fieldId}`) ? (
+                              <div>
+                                {isRichTextField(field.fieldType) ? (
+                                  <SimpleRichTextEditor
+                                    value={
+                                      translatedField?.translatedValue || ""
+                                    }
+                                    onChange={(value: string) =>
+                                      handleFieldChange(
+                                        itemId,
+                                        field.fieldId,
+                                        value,
+                                      )
+                                    }
+                                    readOnly={false}
+                                    placeholder="Enter translation here..."
+                                    className="min-h-[70px] text-xs"
+                                  />
+                                ) : (
+                                  <InputTextarea
+                                    value={
+                                      translatedField?.translatedValue || ""
+                                    }
+                                    onChange={(e) =>
+                                      handleFieldChange(
+                                        itemId,
+                                        field.fieldId,
+                                        e.target.value,
+                                      )
+                                    }
+                                    placeholder="Enter translation here..."
+                                    rows={4}
+                                    className="h-full min-h-[70px] w-full text-xs"
+                                  />
+                                )}
+                              </div>
+                            ) : (
+                              <div className="h-full min-h-[70px] rounded border bg-gray-50 p-1 text-xs">
+                                {translatedField?.translatedValue ? (
+                                  isRichTextField(field.fieldType) ? (
+                                    <div
+                                      className="rich-text-content"
+                                      dangerouslySetInnerHTML={{
+                                        __html: translatedField.translatedValue,
+                                      }}
+                                    />
+                                  ) : (
+                                    translatedField.translatedValue
+                                  )
+                                ) : (
+                                  <span className="text-gray-400">
+                                    Translation will appear here...
+                                  </span>
+                                )}
                               </div>
                             )}
-                          <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>
                     );
@@ -1105,79 +1238,50 @@ Return your response as a JSON object in this exact format:
         )}
       </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>
-                )}
+      {translatedCount > 0 &&
+        saveResults.success.length === 0 &&
+        saveResults.errors.length === 0 && (
+          <WizardBox
+            title="Save 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 Save
+                </h4>
+                <p className="text-sm text-blue-800">
+                  {translatedCount} fields ready to be saved 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>
-            )}
 
-            <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>
-      )}
+              <ActionButton
+                onClick={handleSaveTranslations}
+                isLoading={isSaving}
+                disabled={
+                  translatedCount === 0 || !targetLanguage?.languageCode
+                }
+                className="w-full"
+                variant="outline"
+              >
+                <CheckCircle className="mr-2 h-4 w-4" />
+                {isSaving
+                  ? "Saving Translations..."
+                  : `Save ${translatedCount} Translations to ${targetLanguage?.name || "Target Language"}`}
+              </ActionButton>
+            </div>
+          </WizardBox>
+        )}
     </div>
   );
 }