@smart-cloud/ai-kit-ui 1.1.39 → 1.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.1.39",
+  "version": "1.1.41",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -20,11 +20,12 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@mantine/colors-generator": "^8.3.14",
-    "@smart-cloud/ai-kit-core": "^1.1.18",
+    "@smart-cloud/ai-kit-core": "^1.1.21",
     "@smart-cloud/wpsuite-core": "^2.1.2",
     "@tabler/icons-react": "^3.36.1",
     "chroma-js": "^3.2.0",
     "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",
@@ -42,27 +43,27 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^10.0.1",
     "@mantine/core": "^8.3.14",
     "@mantine/hooks": "^8.3.14",
     "@mantine/modals": "^8.3.14",
-    "@types/dom-chromium-ai": "^0.0.13",
+    "@types/dom-chromium-ai": "^0.0.14",
     "@types/jquery": "^3.5.33",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.54.0",
+    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@typescript-eslint/parser": "^8.55.0",
     "@wordpress/data": "^10.39.0",
     "ajv": "^8.17.1",
     "aws-amplify": "^6.16.0",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.0",
     "globals": "^17.3.0",
     "jquery": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0"
+    "typescript-eslint": "^8.55.0"
   },
   "exports": {
     ".": {

package/src/ai-feature/AiFeature.tsx

@@ -1,6 +1,5 @@
 import {
   Alert,
-  Anchor,
   Button,
   Collapse,
   Divider,
@@ -55,6 +54,7 @@ import {
 } from "@tabler/icons-react";
 
 import { translations } from "../i18n";
+import { PoweredBy } from "../poweredBy";
 import {
   isBackendConfigured,
   readDefaultOutputLanguage,
@@ -184,11 +184,14 @@ async function parseImageMetadataFromPromptResult(
         typeof parsed.title === "string"
           ? outputLang && outputLang !== "en"
             ? (
-                await translate({
-                  text: parsed.title,
-                  sourceLanguage: "en",
-                  targetLanguage: outputLang,
-                })
+                await translate(
+                  {
+                    text: parsed.title,
+                    sourceLanguage: "en",
+                    targetLanguage: outputLang,
+                  },
+                  featureOptions,
+                )
               ).result
             : parsed.title
           : "",
@@ -196,11 +199,14 @@ async function parseImageMetadataFromPromptResult(
         typeof parsed.caption === "string"
           ? outputLang && outputLang !== "en"
             ? (
-                await translate({
-                  text: parsed.caption,
-                  sourceLanguage: "en",
-                  targetLanguage: outputLang,
-                })
+                await translate(
+                  {
+                    text: parsed.caption,
+                    sourceLanguage: "en",
+                    targetLanguage: outputLang,
+                  },
+                  featureOptions,
+                )
               ).result
             : parsed.caption
           : "",
@@ -208,11 +214,14 @@ async function parseImageMetadataFromPromptResult(
         typeof parsed.description === "string"
           ? outputLang && outputLang !== "en"
             ? (
-                await translate({
-                  text: parsed.description,
-                  sourceLanguage: "en",
-                  targetLanguage: outputLang,
-                })
+                await translate(
+                  {
+                    text: parsed.description,
+                    sourceLanguage: "en",
+                    targetLanguage: outputLang,
+                  },
+                  featureOptions,
+                )
               ).result
             : parsed.description
           : "",
@@ -354,7 +363,11 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
   >(defaults?.outputFormat);
   const [outputLanguage, setOutputLanguage] = useState<
     AiKitLanguageCode | "auto" | undefined
-  >(defaults?.outputLanguage);
+  >(
+    defaults?.outputLanguage ||
+      aiKit.settings.defaultOutputLanguage ||
+      (mode === "rewrite" ? "auto" : undefined),
+  );
   const [length, setLength] = useState<
     WriterLength | RewriterLength | SummarizerLength | undefined
   >(defaults?.length);
@@ -369,33 +382,36 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
     if (language) {
       I18n.setLanguage(language || "en");
     }
-    let title;
+    if (title) {
+      return title;
+    }
+    let t;
     switch (mode) {
       default:
       case "summarize":
-        title = I18n.get("Summarize");
+        t = "Summarize";
         break;
       case "proofread":
-        title = I18n.get("Proofread");
+        t = "Proofread";
         break;
       case "write":
-        title = I18n.get("Write");
+        t = "Write";
         break;
       case "rewrite":
-        title = I18n.get("Rewrite");
+        t = "Rewrite";
         break;
       case "translate":
-        title = I18n.get("Translate");
+        t = "Translate";
         break;
       case "generatePostMetadata":
-        title = I18n.get("Generate Post Metadata");
+        t = "Generate Post Metadata";
         break;
       case "generateImageMetadata":
-        title = I18n.get("Generate Image Metadata");
+        t = "Generate Image Metadata";
         break;
     }
-    return title;
-  }, [mode, language]);
+    return t;
+  }, [title, mode, language]);
 
   const formatAiKitStatus = useCallback(
     (e: AiKitStatusEvent | null): string | null => {
@@ -461,10 +477,15 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
       case "generateImageMetadata":
         return Boolean(image);
       case "translate":
+        console.log(
+          "detectedLanguage",
+          detectedLanguage,
+          "outputLanguage",
+          outputLanguage,
+        );
         return (
           Boolean(text && text.trim().length > 0) &&
-          outputLanguage &&
-          detectedLanguage !== outputLanguage
+          (!outputLanguage || detectedLanguage !== outputLanguage)
         );
       case "summarize":
       case "proofread":
@@ -580,6 +601,13 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
                   ? outputLanguage
                   : null) || readDefaultOutputLanguage();
               if (outLang === inputLang) {
+                console.warn(
+                  "AI Kit: input and output languages are the same",
+                  {
+                    inputLang,
+                    outLang,
+                  },
+                );
                 setError(
                   I18n.get("Input and output languages cannot be the same."),
                 );
@@ -1160,7 +1188,7 @@ Follow these additional instructions: ${instructions}`
             {variation === "modal" && (
               <Modal.Header style={{ zIndex: 1000 }}>
                 {getOpenButtonDefaultIcon("ai-feature-title-icon")}
-                <Modal.Title>{I18n.get(title || defaultTitle)}</Modal.Title>
+                <Modal.Title>{I18n.get(defaultTitle)}</Modal.Title>
                 <Modal.CloseButton />
               </Modal.Header>
             )}
@@ -1334,6 +1362,7 @@ Follow these additional instructions: ${instructions}`
                                 onChange={(value) => {
                                   const val = value as AiKitLanguageCode;
                                   setInputLanguage(val);
+                                  setDetectedLanguage(undefined);
                                   onOptionsChanged?.({ inputLanguage: val });
                                 }}
                               />
@@ -1388,6 +1417,7 @@ Follow these additional instructions: ${instructions}`
                                 onChange={(value) => {
                                   const val = value as AiKitLanguageCode;
                                   setOutputLanguage(val);
+                                  setDetectedLanguage(undefined);
                                   onOptionsChanged?.({ outputLanguage: val });
                                 }}
                               />
@@ -1633,7 +1663,7 @@ Follow these additional instructions: ${instructions}`
                   {ai.busy && statusText && (
                     <AiFeatureBorder
                       enabled={variation === "modal"}
-                      working={ai.busy}
+                      working={true}
                       variation={variation}
                     >
                       <Group
@@ -1645,7 +1675,7 @@ Follow these additional instructions: ${instructions}`
                       >
                         <Loader size="sm" />
                         <Input.Label className="ai-feature-status-text">
-                          {statusText ?? "VALAMILYEN SZÖVEG"}
+                          {statusText}
                         </Input.Label>
                       </Group>
                     </AiFeatureBorder>
@@ -1900,36 +1930,7 @@ Follow these additional instructions: ${instructions}`
                     {I18n.get("Close")}
                   </Button>
                 </Group>
-                <div
-                  style={{
-                    display: aiKit.settings?.enablePoweredBy ? "flex" : "none",
-                    justifyContent: aiKit.settings?.enablePoweredBy
-                      ? "flex-end"
-                      : undefined,
-                    padding: 0,
-                    marginRight: "var(--ai-kit-spacing-sm)",
-                    marginBottom:
-                      variation === "default"
-                        ? "var(--ai-kit-spacing-sm)"
-                        : undefined,
-                  }}
-                  className={
-                    aiKit.settings?.enablePoweredBy ? undefined : "sr-only"
-                  }
-                >
-                  <Text c="p" ta="right" fs="italic" fz="xs">
-                    Powered by{" "}
-                    <Anchor
-                      href="https://wpsuite.io/ai-kit/"
-                      target="_blank"
-                      td="none"
-                      fz="xs"
-                      fw={400}
-                    >
-                      WPSuite AI-Kit
-                    </Anchor>
-                  </Text>
-                </div>
+                <PoweredBy variation={variation} />
               </AiFeatureBorder>
             </BodyComponent>
           </ContentComponent>