Merge pull request #11 from devforth/feature/AdminForth/1271/allow-to-select-languages-for-

Feature/admin forth/1271/allow to select languages for

Author: yaroslav8765

custom/BulkActionButton.vue

@@ -0,0 +1,132 @@
+<template>
+  <Dialog 
+    class="w-[500px]"
+    :buttons="[
+      { 
+        label: 'Translate', 
+        onclick: (dialog) => { runTranslation(); dialog.hide(); } ,
+        options: {
+          disabled: noneChecked 
+        }
+      },
+      { 
+        label: 'Close',          
+        options: {
+          class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
+        }, 
+        onclick: (dialog) => dialog.hide() 
+      },
+    ]"
+  >
+    <template #trigger>
+      <button
+        v-if="checkboxes.length > 0"
+        class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded-default border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover"
+      >
+        <IconLanguageOutline class="w-5 h-5" />
+        {{ t('Translate Selected') }} {{ `(${checkboxes.length})`  }}
+        <div class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 
+          font-medium rounded-sm text-xs px-1 ml-1 text-center ">
+          AI    
+        </div>
+      </button>
+    </template>
+
+    <div class="grid grid-cols-2 gap-4 w-full">
+      <Button @click="selectAll" :disabled="allChecked">{{ t('Select All') }}</Button>
+      <Button @click="uncheckAll" :disabled="noneChecked">{{ t('Uncheck All') }}</Button>
+      <div class="col-span-2 grid grid-cols-3 gap-4 ">
+        <div class="group flex items-center justify-between cursor-pointer" v-for="(index, lang) in checkedLanguages" :key="index" @click="toggleLanguage(lang)">
+          <div class="flex items-center gap-2">
+            <Checkbox v-model="checkedLanguages[lang]" /> 
+            <span class="flag-icon"
+              :class="`flag-icon-${getCountryCodeFromLangCode(lang)}`"
+            ></span>
+            <span class="group-hover:underline">{{ getName(getCountryCodeFromLangCode(lang)) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+</Dialog>
+
+</template>
+
+<script setup lang="ts">
+  import { IconLanguageOutline } from '@iconify-prerendered/vue-flowbite';
+  import { useI18n } from 'vue-i18n';
+  import { Dialog, Button, Checkbox } from '@/afcl';
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { callAdminForthApi } from '@/utils';
+  import { useAdminforth } from '@/adminforth';
+  import { getCountryCodeFromLangCode } from './langCommon';
+  import { getName, overwrite } from 'country-list';
+
+  const { t } = useI18n();
+  const adminforth = useAdminforth();
+
+  overwrite([{
+    code: 'US',
+    name: 'USA'
+  }]);
+  const props = defineProps<{
+    resource: Record<string, any>;
+    checkboxes: string[];
+    adminUser: Record<string, any>;
+    meta: {
+      supportedLanguages: string[];
+      pluginInstanceId: string;
+    };
+    clearCheckboxes: () => void;
+  }>();
+
+  const checkedLanguages = ref<Record<string, boolean>>({});
+  const allChecked = computed(() => Object.values(checkedLanguages.value).every(Boolean));
+  const noneChecked = computed(() => Object.values(checkedLanguages.value).every(value => !value));
+
+  onMounted(() => {
+    for (const lang of props.meta.supportedLanguages) {
+      checkedLanguages.value[lang] = true;
+    }
+  });
+
+  function selectAll() {
+    for (const lang of props.meta.supportedLanguages) {
+      checkedLanguages.value[lang] = true;
+    }
+  }
+
+  function uncheckAll() {
+    for (const lang of props.meta.supportedLanguages) {
+      checkedLanguages.value[lang] = false;
+    }
+  }
+
+  function toggleLanguage(lang: string) {
+    checkedLanguages.value[lang] = !checkedLanguages.value[lang];
+  }
+
+  async function runTranslation() {
+    try {
+      const res = await callAdminForthApi({
+        path: `/plugin/${props.meta.pluginInstanceId}/translate-selected-to-languages`,
+        method: 'POST',
+        body: { 
+          selectedIds: props.checkboxes,
+          selectedLanguages: Object.keys(checkedLanguages.value).filter(lang => checkedLanguages.value[lang]),
+        },
+        silentError: true,
+      });
+      adminforth.list.refresh();
+      props.clearCheckboxes();
+        if (res.ok) {
+          adminforth.alert({ message: res.successMessage, variant: 'success' });
+        } else {
+          adminforth.alert({ message: res.errorMessage || t('Failed to translate selected items. Please, try again.'), variant: 'danger' });
+        }
+    } catch (e) {
+      console.error('Failed to translate selected items:', e);
+      adminforth.alert({ message: t('Failed to translate selected items. Please, try again.'), variant: 'danger' });
+    }
+  }
+
+</script>

custom/langCommon.ts

@@ -76,6 +76,8 @@ const countryISO31661ByLangISO6391 = {
     ja: 'jp', // Japanese → Japan
     uk: 'ua', // Ukrainian → Ukraine
     ur: 'pk', // Urdu → Pakistan
+    sr: 'rs', // Serbian → Serbia
+    da: 'dk' // Danish → Denmark
 };
 
 export function getCountryCodeFromLangCode(langCode) {

custom/package-lock.json

@@ -11,5 +11,8 @@
   "description": "",
   "devDependencies": {
     "flag-icon-css": "^4.1.7"
+  },
+  "dependencies": {
+    "country-list": "^2.4.1"
   }
 }

custom/package.json

@@ -8,7 +8,7 @@ import fs from 'fs-extra';
 import chokidar from 'chokidar';
 import  { AsyncQueue } from '@sapphire/async-queue';
 import getFlagEmoji from 'country-flag-svg';
-import { parse } from 'bcp-47'
+import { parse } from 'bcp-47';
 
 const processFrontendMessagesQueue = new AsyncQueue();
 
@@ -172,6 +172,14 @@ export default class I18nPlugin extends AdminForthPlugin {
       }
     });
 
+    if (this.options.translateLangAsBCP47Code) {
+      for (const [lang, bcp47] of Object.entries(this.options.translateLangAsBCP47Code)) {
+        if (!this.options.supportedLanguages.includes(lang as SupportedLanguage)) {
+          throw new Error(`Invalid language code ${lang} in translateLangAsBCP47Code. It must be one of the supportedLanguages.`);
+        }
+      }
+    }
+
     this.externalAppOnly = this.options.externalAppOnly === true;
 
     // find primary key field
@@ -440,46 +448,27 @@ export default class I18nPlugin extends AdminForthPlugin {
     }
 
     // add bulk action
-    if (!resourceConfig.options.bulkActions) {
-      resourceConfig.options.bulkActions = [];
+
+    const pageInjection = {
+      file: this.componentPath('BulkActionButton.vue'),
+      meta: {
+        supportedLanguages: this.options.supportedLanguages,
+        pluginInstanceId: this.pluginInstanceId,
+      }
     }
-    
-    if (this.options.completeAdapter) {
-      resourceConfig.options.bulkActions.push(
-        {
-          id: 'translate_all',
-          label: 'Translate selected',
-          icon: 'flowbite:language-outline',
-          badge: 'AI',
-          // if optional `confirm` is provided, user will be asked to confirm action
-          confirm: 'Are you sure you want to translate selected items? Only empty strings will be translated',
-          allowed: async ({ resource, adminUser, selectedIds, allowedActions }) => {
-            process.env.HEAVY_DEBUG && console.log('allowedActions', JSON.stringify(allowedActions));
-            return allowedActions.edit;
-          },
-          action: async ({ selectedIds, tr }) => {
-            let translatedCount = 0;
-            try {
-              translatedCount = await this.bulkTranslate({ selectedIds });
-            } catch (e) {
-              process.env.HEAVY_DEBUG && console.error('🪲⛔ bulkTranslate error', e);
-              if (e instanceof AiTranslateError) {
-                return { ok: false, error: e.message };
-              } 
-              throw e;
-            }
-            this.updateUntranslatedMenuBadge();
-            return { 
-              ok: true, 
-              error: undefined, 
-              successMessage: await tr(`Translated {count} items`, 'backend', {
-                count: translatedCount,
-              }),
-            };
-          }
-        }
-      );  
-    };
+
+    if (!resourceConfig.options.pageInjections) {
+      resourceConfig.options.pageInjections = {};
+    }
+    if (!resourceConfig.options.pageInjections.list) {
+      resourceConfig.options.pageInjections.list = {};
+    }
+    if (!resourceConfig.options.pageInjections.list.beforeActionButtons) {
+      resourceConfig.options.pageInjections.list.beforeActionButtons = [];
+    }
+
+    (resourceConfig.options.pageInjections.list.beforeActionButtons as AdminForthComponentDeclaration[]).push(pageInjection);
+
 
     // if there is menu item with resourceId, add .badge function showing number of untranslated strings
     const addBadgeCountToMenuItem = (menuItem: AdminForthConfigMenuItem) => {
@@ -517,6 +506,7 @@ export default class I18nPlugin extends AdminForthPlugin {
       return [];
     }
 
+    const replacedLanguageCodeForTranslations = this.options.translateLangAsBCP47Code && langIsoCode.length === 2 ? this.options.translateLangAsBCP47Code[langIsoCode as any] : null;
     if (strings.length > maxKeysInOneReq) {
       let totalTranslated = [];
       for (let i = 0; i < strings.length; i += maxKeysInOneReq) {
@@ -527,14 +517,15 @@ export default class I18nPlugin extends AdminForthPlugin {
       }
       return totalTranslated;
     }
+    const langCode = replacedLanguageCodeForTranslations ? replacedLanguageCodeForTranslations : langIsoCode;
     const lang = langIsoCode;
     const primaryLang = getPrimaryLanguageCode(lang);
     const langName = iso6391.getName(primaryLang);
     const requestSlavicPlurals = Object.keys(SLAVIC_PLURAL_EXAMPLES).includes(primaryLang) && plurals;
     const region = String(lang).split('-')[1]?.toUpperCase() || '';
     const prompt = `
-        I need to translate strings in JSON to ${langName} language (ISO 639-1 code ${lang}) from English for my web app.
-        ${region ? `Use the regional conventions for ${lang} (region ${region}), including spelling, punctuation, and formatting.` : ''}
+        I need to translate strings in JSON to ${langName} language ${replacedLanguageCodeForTranslations || lang.length > 2 ? `BCP-47 code ${langCode}` : `ISO 639-1 code ${langIsoCode}`} from English for my web app.
+        ${region ? `Use the regional conventions for ${langCode} (region ${region}), including spelling, punctuation, and formatting.` : ''}
         ${requestSlavicPlurals ? `You should provide 4 slavic forms (in format "zero count | singular count | 2-4 | 5+") e.g. "apple | apples" should become "${SLAVIC_PLURAL_EXAMPLES[lang]}"` : ''}
         Keep keys, as is, write translation into values! If keys have variables (in curly brackets), then translated strings should have them as well (variables itself should not be translated). Here are the strings:
 
@@ -548,11 +539,31 @@ export default class I18nPlugin extends AdminForthPlugin {
     \`\`\`
     `;  
 
+    const jsonSchemaProperties = {};
+    strings.forEach(s => {
+      jsonSchemaProperties[s.en_string] = { 
+        type: 'string',
+        minLength: 1,
+      };
+    });
+
+    const jsonSchemaRequired = strings.map(s => s.en_string);
+
     // call OpenAI
     const resp = await this.options.completeAdapter.complete(
       prompt,
       [],
       prompt.length * 2,
+      {
+        json_schema: {
+          name: "translation_response",
+          schema: {
+            type: "object",
+            properties: jsonSchemaProperties,
+            required: jsonSchemaRequired,
+          },
+        },
+      }
     );
 
     process.env.HEAVY_DEBUG && console.log(`🪲🔪LLM resp >> ${prompt.length}, <<${resp.content.length} :\n\n`, JSON.stringify(resp));
@@ -568,7 +579,7 @@ export default class I18nPlugin extends AdminForthPlugin {
     // ```
     let res;
     try {
-      res = resp.content.split("```json")[1].split("```")[0];
+      res = resp.content//.split("```json")[1].split("```")[0];
     } catch (e) {
       console.error(`Error in parsing LLM resp: ${resp}\n Prompt was: ${prompt}\n Resp was: ${JSON.stringify(resp)}`, );
       return [];
@@ -613,7 +624,7 @@ export default class I18nPlugin extends AdminForthPlugin {
   }
 
   // returns translated count
-  async bulkTranslate({ selectedIds }: { selectedIds: string[] }): Promise<number> {
+  async bulkTranslate({ selectedIds, selectedLanguages }: { selectedIds: string[], selectedLanguages?: SupportedLanguage[] }): Promise<number> {
 
     const needToTranslateByLang : Partial<
       Record<
@@ -626,8 +637,8 @@ export default class I18nPlugin extends AdminForthPlugin {
     > = {};
 
     const translations = await this.adminforth.resource(this.resourceConfig.resourceId).list(Filters.IN(this.primaryKeyFieldName, selectedIds));
-
-    for (const lang of this.options.supportedLanguages) {
+    const languagesToProcess = selectedLanguages || this.options.supportedLanguages;
+    for (const lang of languagesToProcess) {
       if (lang === 'en') {
         // all strings are in English, no need to translate
         continue;
@@ -1057,6 +1068,36 @@ export default class I18nPlugin extends AdminForthPlugin {
       }
     });
 
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/translate-selected-to-languages`,
+      noAuth: false,
+      handler: async ({ body, tr }) => {
+        const selectedLanguages = body.selectedLanguages;
+        const selectedIds = body.selectedIds;
+
+        let translatedCount = 0;
+        try {
+          console.log('🪲translate-selected-to-languages', { selectedLanguages, selectedIds });
+          translatedCount = await this.bulkTranslate({ selectedIds, selectedLanguages });
+        } catch (e) {
+          process.env.HEAVY_DEBUG && console.error('🪲⛔ bulkTranslate error', e);
+          if (e instanceof AiTranslateError) {
+            return { ok: false, error: e.message };
+          } 
+          throw e;
+        }
+        this.updateUntranslatedMenuBadge();
+        return { 
+          ok: true, 
+          error: undefined, 
+          successMessage: await tr(`Translated {count} items`, 'backend', {
+            count: translatedCount,
+          }),
+        };
+      }
+    });
+
   }
 
 }