@smart-cloud/ai-kit-ui 1.4.5 → 1.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -20,10 +20,11 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@mantine/colors-generator": "^8.3.16",
-    "@smart-cloud/ai-kit-core": "^1.4.6",
+    "@smart-cloud/ai-kit-core": "^1.4.7",
     "@smart-cloud/wpsuite-core": "^2.2.10",
     "@tabler/icons-react": "^3.40.0",
     "chroma-js": "^3.2.0",
+    "country-data-list": "^1.6.0",
     "react-markdown": "^10.1.0",
     "rehype-parse": "^9.0.1",
     "rehype-raw": "^7.0.0",

package/src/ai-feature/AiFeature.tsx

@@ -41,7 +41,16 @@ import {
   type WriteArgs,
 } from "@smart-cloud/ai-kit-core";
 import { I18n } from "aws-amplify/utils";
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { countries } from "country-data-list";
+import {
+  type ComponentProps,
+  FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -80,8 +89,80 @@ type GeneratedPostMetadata = {
   excerpt?: string;
 };
 
+type LanguageSelectorOption = {
+  value: AiKitLanguageCode;
+  label: string;
+  countryCode: string;
+  countryName: string;
+  flag: string;
+};
+
+type WriterTone = "neutral" | "formal" | "casual";
+type RewriterTone = "as-is" | "more-formal" | "more-casual";
+type WriterLength = "short" | "medium" | "long";
+type RewriterLength = "as-is" | "shorter" | "longer";
+type SummarizerLength = "short" | "medium" | "long";
+type SummarizerType = "headline" | "key-points" | "teaser" | "tldr";
+type ProofreadResult = {
+  corrections: ComponentProps<typeof ProofreadDiff>["corrections"];
+  correctedInput?: string;
+};
+
 const aiKit = getAiKitPlugin();
 
+const LANGUAGE_TO_COUNTRY_CODE: Record<AiKitLanguageCode, string> = {
+  ar: "SA",
+  en: "US",
+  zh: "CN",
+  nl: "NL",
+  fr: "FR",
+  de: "DE",
+  he: "IL",
+  hi: "IN",
+  hu: "HU",
+  id: "ID",
+  it: "IT",
+  ja: "JP",
+  ko: "KR",
+  no: "NO",
+  pl: "PL",
+  pt: "PT",
+  ru: "RU",
+  es: "ES",
+  sv: "SE",
+  th: "TH",
+  tr: "TR",
+  uk: "UA",
+};
+
+const RTL_LANGUAGES = new Set<AiKitLanguageCode>(["ar", "he"]);
+
+const countryLookup = countries as Record<string, { name?: string }>;
+
+function getFlagEmoji(countryCode: string): string {
+  return countryCode
+    .toUpperCase()
+    .replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)));
+}
+
+function isRtlLanguage(code?: AiKitLanguageCode | "" | null): boolean {
+  return Boolean(code && RTL_LANGUAGES.has(code as AiKitLanguageCode));
+}
+
+function getSupportedLanguageOptions(): LanguageSelectorOption[] {
+  return LANGUAGE_OPTIONS.map((languageOption) => {
+    const countryCode = LANGUAGE_TO_COUNTRY_CODE[languageOption.value];
+
+    return {
+      value: languageOption.value,
+      label: languageOption.label,
+      countryCode,
+      countryName: countryLookup[countryCode]?.name || languageOption.label,
+      flag: getFlagEmoji(countryCode),
+    };
+  });
+}
+
 const postResponseConstraint = {
   type: "object",
   properties: {
@@ -314,9 +395,28 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
     onAccept,
     onOptionsChanged,
     language,
+    direction,
     rootElement,
   } = props;
 
+  const [languageOverride, setLanguageOverride] = useState<
+    AiKitLanguageCode | undefined
+  >();
+  const [directionOverride, setDirectionOverride] = useState<
+    "ltr" | "rtl" | "auto" | undefined
+  >();
+
+  const effectiveUiLanguage = languageOverride ?? normalizeLang(language);
+  const effectiveDirection = useMemo(() => {
+    const activeDirection = languageOverride ? directionOverride : direction;
+
+    if (!activeDirection || activeDirection === "auto") {
+      return isRtlLanguage(effectiveUiLanguage) ? "rtl" : "ltr";
+    }
+
+    return activeDirection;
+  }, [direction, directionOverride, effectiveUiLanguage, languageOverride]);
+
   const allowOverride = {
     text: allowOverrideDefaults?.text ?? true,
     instructions: allowOverrideDefaults?.instructions ?? true,
@@ -341,7 +441,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
       (mode === "summarize" && allowOverride?.type) ||
       allowOverride?.outputLanguage,
     );
-  }, [allowOverride]);
+  }, [allowOverride, mode]);
 
   const [state, setState] = useState<string>();
   const [featureOpen, setFeatureOpen] = useState<boolean>(!showOpenButton);
@@ -377,11 +477,12 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
   const [type, setType] = useState<SummarizerType | undefined>(defaults?.type);
 
   const autoRunOnceRef = useRef(false);
+  const supportedLanguageOptions = useMemo(
+    () => getSupportedLanguageOptions(),
+    [],
+  );
 
   const defaultTitle = useMemo(() => {
-    if (language) {
-      I18n.setLanguage(language || "en");
-    }
     if (title) {
       return title;
     }
@@ -411,7 +512,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
         break;
     }
     return t;
-  }, [title, mode, language]);
+  }, [title, mode, effectiveUiLanguage]);
 
   const formatAiKitStatus = useCallback(
     (e: AiKitStatusEvent | null): string | null => {
@@ -464,7 +565,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
           return msg || I18n.get("Working...");
       }
     },
-    [language, mode],
+    [effectiveUiLanguage, mode],
   );
 
   const inputText = useMemo(() => {
@@ -996,7 +1097,7 @@ Follow these additional instructions: ${instructions}`
       default:
         return ai.lastSource ? I18n.get("Regenerate") : I18n.get("Generate");
     }
-  }, [language, ai.lastSource, mode]);
+  }, [effectiveUiLanguage, ai.lastSource, mode]);
 
   const getRegenerateOnBackendTitle = useCallback(() => {
     switch (mode) {
@@ -1011,7 +1112,7 @@ Follow these additional instructions: ${instructions}`
       default:
         return I18n.get("Regenerate on Backend");
     }
-  }, [language, mode]);
+  }, [effectiveUiLanguage, mode]);
 
   const close = useCallback(async () => {
     setFeatureOpen(false);
@@ -1082,6 +1183,16 @@ Follow these additional instructions: ${instructions}`
     };
   }, []);
 
+  useEffect(() => {
+    if (!languageOverride) {
+      return;
+    }
+
+    setDirectionOverride("auto");
+    setOutputLanguage(languageOverride);
+    setDetectedLanguage(undefined);
+  }, [languageOverride]);
+
   const optionsSummary = useMemo(() => {
     const parts: string[] = [];
 
@@ -1126,7 +1237,7 @@ Follow these additional instructions: ${instructions}`
 
     return parts.length ? parts.join(" • ") : I18n.get("No overrides");
   }, [
-    language,
+    effectiveUiLanguage,
     mode,
     inputLanguage,
     outputLanguage,
@@ -1151,6 +1262,89 @@ Follow these additional instructions: ${instructions}`
   const CollapseComponent = optionsDisplay === "collapse" ? Collapse : Stack;
   const OptionsComponent = optionsDisplay === "horizontal" ? Group : Stack;
 
+  const selectedLanguageOption = useMemo(
+    () =>
+      supportedLanguageOptions.find(
+        (option) =>
+          option.value === (languageOverride ?? normalizeLang(language)),
+      ) ?? supportedLanguageOptions[0],
+    [language, languageOverride, supportedLanguageOptions],
+  );
+
+  const renderedOutputLanguage = useMemo(() => {
+    if (outputLanguage && outputLanguage !== "auto") {
+      return outputLanguage;
+    }
+
+    return languageOverride || readDefaultOutputLanguage() || "";
+  }, [languageOverride, outputLanguage]);
+
+  const renderLanguageOverrideSelect = useCallback(
+    (size: "xs" | "sm" = "sm") => (
+      <Select
+        allowDeselect={false}
+        aria-label={I18n.get("Interface language")}
+        checkIconPosition="right"
+        className="ai-feature-language-selector"
+        comboboxProps={{ width: 220 }}
+        data={supportedLanguageOptions.map((option) => ({
+          value: option.value,
+          label: option.flag,
+        }))}
+        disabled={ai.busy}
+        onChange={(value) => {
+          const nextLanguage = normalizeLang(value);
+
+          if (!nextLanguage) {
+            return;
+          }
+
+          setLanguageOverride(nextLanguage);
+        }}
+        renderOption={({ option }) => {
+          const languageOption = supportedLanguageOptions.find(
+            (item) => item.value === option.value,
+          );
+
+          if (!languageOption) {
+            return option.label;
+          }
+
+          return (
+            <Group gap="xs" wrap="nowrap">
+              <span aria-hidden="true">{languageOption.flag}</span>
+              <span>{I18n.get(languageOption.countryName)}</span>
+            </Group>
+          );
+        }}
+        searchable={false}
+        size={size}
+        styles={{
+          input: {
+            fontSize: 18,
+            lineHeight: 1,
+            minHeight: size === "sm" ? 36 : 28,
+            paddingInlineStart: 10,
+            paddingInlineEnd: 28,
+            textAlign: "center",
+            width: size === "sm" ? 72 : 60,
+          },
+          section: {
+            width: 24,
+          },
+        }}
+        value={selectedLanguageOption?.value || null}
+        w={size === "sm" ? 72 : 60}
+      />
+    ),
+    [
+      ai.busy,
+      selectedLanguageOption?.value,
+      setLanguageOverride,
+      supportedLanguageOptions,
+    ],
+  );
+
   useEffect(() => {
     if (variation !== "modal" || !featureOpen) {
       return;
@@ -1222,6 +1416,9 @@ Follow these additional instructions: ${instructions}`
               <Modal.Header style={{ zIndex: 1000 }}>
                 {getOpenButtonDefaultIcon("ai-feature-title-icon")}
                 <Modal.Title>{I18n.get(defaultTitle)}</Modal.Title>
+                <div style={{ marginLeft: "auto", marginRight: 8 }}>
+                  {renderLanguageOverrideSelect("xs")}
+                </div>
                 <Modal.CloseButton />
               </Modal.Header>
             )}
@@ -1231,7 +1428,13 @@ Follow these additional instructions: ${instructions}`
                 working={ai.busy}
                 variation={variation}
               >
-                <Stack gap="sm" mb="sm" p="sm">
+                <Stack gap="sm" mb="sm" p="sm" dir={effectiveDirection}>
+                  {variation !== "modal" && (
+                    <Group justify="flex-end">
+                      {renderLanguageOverrideSelect()}
+                    </Group>
+                  )}
+
                   {/* ERROR */}
                   {error && <Alert color="red">{I18n.get(error)}</Alert>}
 
@@ -1877,6 +2080,7 @@ Follow these additional instructions: ${instructions}`
                         mode !== "generatePostMetadata" &&
                         typeof generated === "string" && (
                           <MarkdownResult
+                            contentLanguage={renderedOutputLanguage}
                             value={generated}
                             editable={!!editable}
                             onChange={(v) => {
@@ -1887,7 +2091,11 @@ Follow these additional instructions: ${instructions}`
                     </Stack>
                   )}
                   {generated === "" && (
-                    <MarkdownResult value={generated} editable={false} />
+                    <MarkdownResult
+                      contentLanguage={renderedOutputLanguage}
+                      value={generated}
+                      editable={false}
+                    />
                   )}
                 </Stack>
                 {/* ACTIONS */}
@@ -1974,11 +2182,14 @@ Follow these additional instructions: ${instructions}`
 };
 
 function MarkdownResult(props: {
+  contentLanguage?: AiKitLanguageCode | "";
   value: string;
   editable: boolean;
   onChange?: (v: string) => void;
 }) {
-  const { value, editable, onChange } = props;
+  const { contentLanguage, value, editable, onChange } = props;
+  const contentDirection = isRtlLanguage(contentLanguage) ? "rtl" : "ltr";
+  const contentAlign = contentDirection === "rtl" ? "right" : "left";
 
   if (editable) {
     return (
@@ -1995,7 +2206,11 @@ function MarkdownResult(props: {
         />
 
         <Input.Label>{I18n.get("Preview")}</Input.Label>
-        <Stack className="ai-feature-generated-content ai-feature-preview">
+        <Stack
+          className="ai-feature-generated-content ai-feature-preview"
+          dir={contentDirection}
+          style={{ textAlign: contentAlign }}
+        >
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
         </Stack>
       </Stack>
@@ -2003,7 +2218,11 @@ function MarkdownResult(props: {
   }
 
   return (
-    <Stack className="ai-feature-generated-content">
+    <Stack
+      className="ai-feature-generated-content"
+      dir={contentDirection}
+      style={{ textAlign: contentAlign }}
+    >
       {value ? (
         <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
       ) : (

package/src/i18n/ar.ts

@@ -1,6 +1,6 @@
 export const arDict: Record<string, string> = {
   "--- Select ---": "--- اختر ---",
-  Accept: "يقبل",
+  Accept: "قبول",
   "Accept response": "قبول الرد",
   Add: "إضافة",
   "Add image": "إضافة صورة",
@@ -24,7 +24,7 @@ export const arDict: Record<string, string> = {
   "Audio no longer available": "الرسالة الصوتية لم تعد متاحة",
   "Audio recorded": "تم تسجيل الصوت",
   auto: "آلي",
-  "Auto-detect": "الكشف التلقائي",
+  "Auto-detect": "اكتشاف تلقائي",
   Cancel: "يلغي",
   Caption: "التسمية التوضيحية",
   Casual: "غير رسمي",
@@ -32,7 +32,7 @@ export const arDict: Record<string, string> = {
   Categories: "الفئات",
   "Checking capabilities…": "إمكانيات الفحص…",
   Chinese: "الصينية",
-  Clear: "",
+  Clear: "مسح",
   "Clear audio": "مسح الصوت",
   "Click again to confirm": "انقر مرة أخرى للتأكيد",
   Close: "يغلق",
@@ -63,7 +63,7 @@ export const arDict: Record<string, string> = {
   Formal: "رَسمِيّ",
   formal: "رَسمِيّ",
   French: "فرنسي",
-  Generate: "يولد",
+  Generate: "إنشاء",
   "Generate Image Metadata": "إنشاء بيانات وصفية للصورة",
   "Generate Post Metadata": "إنشاء بيانات وصفية للمقال",
   "Generated content": "المحتوى المُنشأ",
@@ -98,7 +98,7 @@ export const arDict: Record<string, string> = {
   long: "طويل",
   Longer: "أطول",
   longer: "أطول",
-  Markdown: "تخفيض السعر",
+  Markdown: "Markdown",
   Maximize: "تكبير",
   Medium: "واسطة",
   medium: "واسطة",
@@ -127,14 +127,14 @@ export const arDict: Record<string, string> = {
   Preview: "معاينة",
   Proofread: "التدقيق اللغوي",
   "Proofread again": "راجع النص مرة أخرى",
-  "Proofread on Backend": "تمت المراجعة في الواجهة الخلفية",
+  "Proofread on Backend": "تدقيق لغوي على الخادم",
   Proofreading: "التدقيق اللغوي",
   "Proofreading part {current}/{total}...":
     "جارٍ تدقيق الجزء {current}/{total}...",
   "Ready.": "جاهز.",
   "Received backend response.": "تم استلام رد من الخادم الخلفي.",
   "Receiving response...": "جارٍ استلام الرد...",
-  Record: "",
+  Record: "تسجيل",
   "Record audio": "تسجيل الصوت",
   "Recorded audio:": "صوت مسجّل:",
   "Recording...": "جارٍ التسجيل...",
@@ -151,7 +151,7 @@ export const arDict: Record<string, string> = {
   "Restore size": "استعادة الحجم",
   Rewrite: "إعادة كتابة",
   "Rewrite again": "أعد الكتابة مرة أخرى",
-  "Rewrite on Backend": "إعادة كتابة الكود في الواجهة الخلفية",
+  "Rewrite on Backend": "إعادة كتابة على الخادم",
   "Rewriting part {current}/{total}...":
     "جارٍ إعادة كتابة الجزء {current}/{total}...",
   "Rewriting text": "إعادة كتابة النص",
@@ -179,13 +179,13 @@ export const arDict: Record<string, string> = {
   "Suggested change": "التغيير المقترح",
   Summarize: "لخص",
   "Summarize again": "أعد التلخيص",
-  "Summarize on Backend": "تلخيص على الواجهة الخلفية",
+  "Summarize on Backend": "تلخيص على الخادم",
   Summarizing: "ملخص",
   "Summarizing part {current}/{total}...":
     "جارٍ تلخيص الجزء {current}/{total}...",
   Swedish: "السويدية",
   Tags: "الوسوم",
-  Teaser: "إعلان تشويقي",
+  Teaser: "نص تمهيدي",
   teaser: "إعلان تشويقي",
   Thai: "تايلاندي",
   "The alt text for the image.": "النص البديل للصورة.",
@@ -208,11 +208,11 @@ export const arDict: Record<string, string> = {
   Title: "عنوان",
   "TL;DR": "باختصار شديد",
   tldr: "باختصار",
-  Tone: "نغمة",
-  Topic: "عنوان",
+  Tone: "الأسلوب",
+  Topic: "الموضوع",
   Translate: "يترجم",
   "Translate again": "ترجم مرة أخرى",
-  "Translate on Backend": "الترجمة في الواجهة الخلفية",
+  "Translate on Backend": "ترجمة على الخادم",
   Translating: "الترجمة",
   "Translating part {current}/{total}...":
     "جارٍ ترجمة الجزء {current}/{total}...",

package/src/i18n/de.ts

@@ -32,7 +32,7 @@ export const deDict: Record<string, string> = {
   Categories: "Kategorien",
   "Checking capabilities…": "Fähigkeiten werden geprüft…",
   Chinese: "Chinesisch",
-  Clear: "",
+  Clear: "Leeren",
   "Clear audio": "Audio löschen",
   "Click again to confirm": "Zum Bestätigen erneut klicken",
   Close: "Schließen",
@@ -125,16 +125,16 @@ export const deDict: Record<string, string> = {
   Portuguese: "Portugiesisch",
   "Powered by": "Angetrieben von",
   Preview: "Vorschau",
-  Proofread: "Prüfen",
+  Proofread: "Korrekturlesen",
   "Proofread again": "Erneut prüfen",
   "Proofread on Backend": "Serverseitig prüfen",
-  Proofreading: "Textprüfung",
+  Proofreading: "Korrekturlesen",
   "Proofreading part {current}/{total}...":
     "Teil {current}/{total} wird Korrektur gelesen...",
   "Ready.": "Bereit.",
   "Received backend response.": "Backend-Antwort erhalten.",
   "Receiving response...": "Antwort wird empfangen...",
-  Record: "",
+  Record: "Aufnehmen",
   "Record audio": "Audio aufnehmen",
   "Recorded audio:": "Aufgenommenes Audio:",
   "Recording...": "Wird aufgenommen...",
@@ -159,7 +159,7 @@ export const deDict: Record<string, string> = {
   Russian: "Russisch",
   Search: "Suchen",
   "Search the documentation…": "Durchsuchen Sie die Dokumentation…",
-  "Search with AI-Kit": "Suche mit AI-Kit",
+  "Search with AI-Kit": "Mit AI-Kit suchen",
   "Searching…": "Suche…",
   "Select or type tags…": "Tags auswählen oder eingeben…",
   Send: "Senden",

package/src/i18n/es.ts

@@ -32,7 +32,7 @@ export const esDict: Record<string, string> = {
   Categories: "Categorías",
   "Checking capabilities…": "Comprobando capacidades…",
   Chinese: "Chino",
-  Clear: "",
+  Clear: "Borrar",
   "Clear audio": "Borrar audio",
   "Click again to confirm": "Haz clic de nuevo para confirmar",
   Close: "Cerrar",
@@ -100,7 +100,7 @@ export const esDict: Record<string, string> = {
   long: "largo",
   Longer: "Más extenso",
   longer: "más extenso",
-  Markdown: "Reducción",
+  Markdown: "Markdown",
   Maximize: "Maximizar",
   Medium: "Medio",
   medium: "medio",
@@ -136,13 +136,13 @@ export const esDict: Record<string, string> = {
   "Ready.": "Listo.",
   "Received backend response.": "Se recibió una respuesta del backend.",
   "Receiving response...": "Recibiendo respuesta...",
-  Record: "",
+  Record: "Grabar",
   "Record audio": "Grabar audio",
   "Recorded audio:": "Audio grabado:",
   "Recording...": "Grabando...",
   Reference: "Referencia",
   References: "Referencias",
-  Regenerate: "Regenerado",
+  Regenerate: "Regenerar",
   "Regenerate on Backend": "Regenerar en el backend",
   "Reject response": "Rechazar respuesta",
   "Remove image": "Eliminar imagen",
@@ -187,7 +187,7 @@ export const esDict: Record<string, string> = {
     "Resumiendo la parte {current}/{total}...",
   Swedish: "sueco",
   Tags: "Etiquetas",
-  Teaser: "Rompecabezas",
+  Teaser: "Texto teaser",
   teaser: "rompecabezas",
   Thai: "tailandés",
   "The alt text for the image.": "El texto alternativo de la imagen.",