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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -24,7 +24,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",
+    "country-flag-icons": "^1.6.15",
     "react-markdown": "^10.1.0",
     "rehype-parse": "^9.0.1",
     "rehype-raw": "^7.0.0",

package/src/ai-feature/AiFeature.tsx

@@ -41,7 +41,7 @@ import {
   type WriteArgs,
 } from "@smart-cloud/ai-kit-core";
 import { I18n } from "aws-amplify/utils";
-import { countries } from "country-data-list";
+import * as CountryFlagIcons from "country-flag-icons/react/3x2";
 import {
   type ComponentProps,
   FC,
@@ -93,8 +93,6 @@ type LanguageSelectorOption = {
   value: AiKitLanguageCode;
   label: string;
   countryCode: string;
-  countryName: string;
-  flag: string;
 };
 
 type WriterTone = "neutral" | "formal" | "casual";
@@ -137,12 +135,33 @@ const LANGUAGE_TO_COUNTRY_CODE: Record<AiKitLanguageCode, string> = {
 
 const RTL_LANGUAGES = new Set<AiKitLanguageCode>(["ar", "he"]);
 
-const countryLookup = countries as Record<string, { name?: string }>;
+function LanguageFlag(props: { countryCode?: string; size?: number }) {
+  const { countryCode, size = 18 } = props;
 
-function getFlagEmoji(countryCode: string): string {
-  return countryCode
-    .toUpperCase()
-    .replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)));
+  if (!countryCode) {
+    return null;
+  }
+
+  const Flag = CountryFlagIcons[
+    countryCode as keyof typeof CountryFlagIcons
+  ] as FC<ComponentProps<"svg">> | undefined;
+
+  if (!Flag) {
+    return null;
+  }
+
+  return (
+    <Flag
+      aria-hidden="true"
+      focusable="false"
+      style={{
+        display: "block",
+        flex: "none",
+        height: size,
+        width: Math.round(size * (4 / 3)),
+      }}
+    />
+  );
 }
 
 function isRtlLanguage(code?: AiKitLanguageCode | "" | null): boolean {
@@ -157,8 +176,6 @@ function getSupportedLanguageOptions(): LanguageSelectorOption[] {
       value: languageOption.value,
       label: languageOption.label,
       countryCode,
-      countryName: countryLookup[countryCode]?.name || languageOption.label,
-      flag: getFlagEmoji(countryCode),
     };
   });
 }
@@ -407,6 +424,8 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
   >();
 
   const effectiveUiLanguage = languageOverride ?? normalizeLang(language);
+  I18n.setLanguage(effectiveUiLanguage || "en");
+  const currentUiLanguage = effectiveUiLanguage || "en";
   const effectiveDirection = useMemo(() => {
     const activeDirection = languageOverride ? directionOverride : direction;
 
@@ -475,6 +494,9 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
     defaults?.tone,
   );
   const [type, setType] = useState<SummarizerType | undefined>(defaults?.type);
+  const [generatedContentLanguage, setGeneratedContentLanguage] = useState<
+    AiKitLanguageCode | ""
+  >("");
 
   const autoRunOnceRef = useRef(false);
   const supportedLanguageOptions = useMemo(
@@ -621,6 +643,18 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
   const statusText =
     formatAiKitStatus(ai.statusEvent) ?? (state ? I18n.get(state) : null);
 
+  const setGeneratedResultLanguage = useCallback(
+    (nextLanguage?: AiKitLanguageCode | "auto" | "" | null) => {
+      if (nextLanguage && nextLanguage !== "auto") {
+        setGeneratedContentLanguage(nextLanguage);
+        return;
+      }
+
+      setGeneratedContentLanguage(readDefaultOutputLanguage() || "");
+    },
+    [],
+  );
+
   const runGenerate = useCallback(
     async (modeOverride?: AiModePreference) => {
       if (!canGenerate) {
@@ -639,11 +673,11 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
           typeof input === "function" ? await Promise.resolve(input()) : input;
         switch (mode) {
           case "summarize": {
+            const outLang =
+              (outputLanguage && outputLanguage !== "auto"
+                ? outputLanguage
+                : null) || readDefaultOutputLanguage();
             const res = await ai.run(async ({ signal, onStatus }) => {
-              const outLang =
-                (outputLanguage && outputLanguage !== "auto"
-                  ? outputLanguage
-                  : null) || readDefaultOutputLanguage();
               const args: SummarizeArgs = {
                 text: text!.trim(),
                 format:
@@ -665,6 +699,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
               const out = await summarize(args, featureOptions);
               return out.result;
             });
+            setGeneratedResultLanguage(outLang || "");
             setGenerated((res as never) ?? "");
             break;
           }
@@ -707,6 +742,10 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
             break;
           }
           case "translate": {
+            const outLang =
+              (outputLanguage && outputLanguage !== "auto"
+                ? outputLanguage
+                : null) || readDefaultOutputLanguage();
             const res = await ai.run(async ({ signal, onStatus }) => {
               let inputLang = inputLanguage ?? "auto";
               if (inputLang === "auto") {
@@ -722,10 +761,6 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
               } else {
                 setDetectedLanguage(inputLang);
               }
-              const outLang =
-                (outputLanguage && outputLanguage !== "auto"
-                  ? outputLanguage
-                  : null) || readDefaultOutputLanguage();
               if (outLang === inputLang) {
                 console.warn(
                   "AI Kit: input and output languages are the same",
@@ -759,10 +794,12 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
               const out = await translate(args, featureOptions);
               return out.result;
             });
+            setGeneratedResultLanguage(outLang || "");
             setGenerated((res as never) ?? "");
             break;
           }
           case "rewrite": {
+            let generatedLanguage: AiKitLanguageCode | "" = "";
             const res = await ai.run(async ({ signal, onStatus }) => {
               let outLang =
                 (outputLanguage && outputLanguage !== "auto"
@@ -779,6 +816,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
                 });
                 setOutputLanguage(outLang);
               }
+              generatedLanguage = outLang || "";
               const args: RewriteArgs = {
                 text: text!.trim(),
                 context: instructions?.trim() || undefined,
@@ -801,6 +839,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
               const out = await rewrite(args, featureOptions);
               return out.result;
             });
+            setGeneratedResultLanguage(generatedLanguage);
             setGenerated((res as never) ?? "");
             break;
           }
@@ -864,6 +903,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
               });
               return out.result;
             });
+            setGeneratedResultLanguage(outLang || "");
             setGenerated((res as never) ?? "");
             break;
           }
@@ -1265,20 +1305,11 @@ Follow these additional instructions: ${instructions}`
   const selectedLanguageOption = useMemo(
     () =>
       supportedLanguageOptions.find(
-        (option) =>
-          option.value === (languageOverride ?? normalizeLang(language)),
+        (option) => option.value === currentUiLanguage,
       ) ?? supportedLanguageOptions[0],
-    [language, languageOverride, supportedLanguageOptions],
+    [currentUiLanguage, supportedLanguageOptions],
   );
 
-  const renderedOutputLanguage = useMemo(() => {
-    if (outputLanguage && outputLanguage !== "auto") {
-      return outputLanguage;
-    }
-
-    return languageOverride || readDefaultOutputLanguage() || "";
-  }, [languageOverride, outputLanguage]);
-
   const renderLanguageOverrideSelect = useCallback(
     (size: "xs" | "sm" = "sm") => (
       <Select
@@ -1286,12 +1317,18 @@ Follow these additional instructions: ${instructions}`
         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,
+          label: "",
         }))}
-        disabled={ai.busy}
+        leftSection={
+          selectedLanguageOption?.countryCode ? (
+            <LanguageFlag
+              countryCode={selectedLanguageOption.countryCode}
+              size={18}
+            />
+          ) : null
+        }
         onChange={(value) => {
           const nextLanguage = normalizeLang(value);
 
@@ -1312,33 +1349,57 @@ Follow these additional instructions: ${instructions}`
 
           return (
             <Group gap="xs" wrap="nowrap">
-              <span aria-hidden="true">{languageOption.flag}</span>
-              <span>{I18n.get(languageOption.countryName)}</span>
+              {languageOption.countryCode ? (
+                <LanguageFlag
+                  countryCode={languageOption.countryCode}
+                  size={18}
+                />
+              ) : null}
+              <span>{I18n.get(languageOption.label)}</span>
             </Group>
           );
         }}
+        rightSection={null}
         searchable={false}
         size={size}
         styles={{
+          dropdown: {
+            minWidth: 220,
+          },
           input: {
+            backgroundColor: "transparent",
+            border: 0,
+            boxShadow: "none",
+            color: "inherit",
             fontSize: 18,
             lineHeight: 1,
             minHeight: size === "sm" ? 36 : 28,
-            paddingInlineStart: 10,
-            paddingInlineEnd: 28,
-            textAlign: "center",
-            width: size === "sm" ? 72 : 60,
+            paddingInlineStart: 0,
+            paddingInlineEnd: 0,
+            backgroundImage: "none",
+            width: size === "sm" ? 44 : 36,
+          },
+          option: {
+            color: "inherit",
           },
           section: {
-            width: 24,
+            color: "inherit",
+            alignItems: "center",
+            display: "flex",
+            height: "100%",
+            insetInlineStart: 0,
+            justifyContent: "center",
+            pointerEvents: "none",
+            width: "100%",
           },
         }}
         value={selectedLanguageOption?.value || null}
-        w={size === "sm" ? 72 : 60}
+        w={size === "sm" ? 44 : 36}
       />
     ),
     [
       ai.busy,
+      selectedLanguageOption?.countryCode,
       selectedLanguageOption?.value,
       setLanguageOverride,
       supportedLanguageOptions,
@@ -1408,15 +1469,23 @@ Follow these additional instructions: ${instructions}`
           {variation === "modal" && <Modal.Overlay />}
           <ContentComponent
             w="100%"
+            dir={effectiveDirection}
             style={{
               left: 0,
             }}
           >
             {variation === "modal" && (
-              <Modal.Header style={{ zIndex: 1000 }}>
+              <Modal.Header dir={effectiveDirection} style={{ zIndex: 1000 }}>
                 {getOpenButtonDefaultIcon("ai-feature-title-icon")}
                 <Modal.Title>{I18n.get(defaultTitle)}</Modal.Title>
-                <div style={{ marginLeft: "auto", marginRight: 8 }}>
+                <div
+                  style={{
+                    display: "flex",
+                    flex: 1,
+                    justifyContent: "flex-start",
+                    marginRight: 8,
+                  }}
+                >
                   {renderLanguageOverrideSelect("xs")}
                 </div>
                 <Modal.CloseButton />
@@ -2080,7 +2149,7 @@ Follow these additional instructions: ${instructions}`
                         mode !== "generatePostMetadata" &&
                         typeof generated === "string" && (
                           <MarkdownResult
-                            contentLanguage={renderedOutputLanguage}
+                            contentLanguage={generatedContentLanguage}
                             value={generated}
                             editable={!!editable}
                             onChange={(v) => {
@@ -2092,7 +2161,7 @@ Follow these additional instructions: ${instructions}`
                   )}
                   {generated === "" && (
                     <MarkdownResult
-                      contentLanguage={renderedOutputLanguage}
+                      contentLanguage={generatedContentLanguage}
                       value={generated}
                       editable={false}
                     />
@@ -2193,7 +2262,12 @@ function MarkdownResult(props: {
 
   if (editable) {
     return (
-      <Stack p={0} gap="sm">
+      <Stack
+        p={0}
+        gap="sm"
+        dir={contentDirection}
+        style={{ textAlign: contentAlign }}
+      >
         <Input.Label>{I18n.get("Generated content")}</Input.Label>
         <Textarea
           value={value}
@@ -2203,6 +2277,9 @@ function MarkdownResult(props: {
           maxRows={12}
           p={0}
           className="ai-feature-generated-content ai-feature-editor"
+          styles={{
+            input: { direction: contentDirection, textAlign: contentAlign },
+          }}
         />
 
         <Input.Label>{I18n.get("Preview")}</Input.Label>