@smart-cloud/ai-kit-ui 1.3.15 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.3.15",
+  "version": "1.4.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -19,51 +19,54 @@
   "dependencies": {
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
-    "@mantine/colors-generator": "^8.3.15",
-    "@smart-cloud/ai-kit-core": "^1.3.7",
-    "@smart-cloud/wpsuite-core": "^2.2.6",
-    "@tabler/icons-react": "^3.36.1",
+    "@mantine/colors-generator": "^8.3.16",
+    "@smart-cloud/ai-kit-core": "^1.4.3",
+    "@smart-cloud/wpsuite-core": "^2.2.10",
+    "@tabler/icons-react": "^3.40.0",
     "chroma-js": "^3.2.0",
     "react-markdown": "^10.1.0",
+    "rehype-parse": "^9.0.1",
     "rehype-raw": "^7.0.0",
+    "rehype-remark": "^10.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
+    "remark-stringify": "^11.0.0",
     "unified": "^11.0.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^8.3.15",
-    "@mantine/hooks": "^8.3.15",
-    "@mantine/modals": "^8.3.15",
-    "@wordpress/data": "^10.39.0",
-    "aws-amplify": "^6.16.2",
+    "@mantine/core": "^8.3.16",
+    "@mantine/hooks": "^8.3.16",
+    "@mantine/modals": "^8.3.16",
+    "@wordpress/data": "^10.41.0",
+    "aws-amplify": "^6.16.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@mantine/core": "^8.3.15",
-    "@mantine/hooks": "^8.3.15",
-    "@mantine/modals": "^8.3.15",
-    "@types/dom-chromium-ai": "^0.0.14",
-    "@types/jquery": "^3.5.33",
+    "@mantine/core": "^8.3.16",
+    "@mantine/hooks": "^8.3.16",
+    "@mantine/modals": "^8.3.16",
+    "@types/dom-chromium-ai": "^0.0.15",
+    "@types/jquery": "^4.0.0",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
-    "@wordpress/data": "^10.39.0",
-    "ajv": "^8.17.1",
-    "aws-amplify": "^6.16.2",
-    "eslint": "^10.0.0",
-    "globals": "^17.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@wordpress/data": "^10.41.0",
+    "ajv": "^8.18.0",
+    "aws-amplify": "^6.16.3",
+    "eslint": "^10.0.3",
+    "globals": "^17.4.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.56.0"
+    "typescript-eslint": "^8.57.0"
   },
   "exports": {
     ".": {

package/src/ai-feature/AiFeature.tsx

@@ -55,6 +55,12 @@ import {
 
 import { translations } from "../i18n";
 import { PoweredBy } from "../poweredBy";
+import { shouldChunkInput } from "./chunking-utils";
+import {
+  chunkedSummarize,
+  chunkedTranslate,
+  chunkedRewrite,
+} from "./chunked-features";
 import {
   isBackendConfigured,
   readDefaultOutputLanguage,
@@ -472,7 +478,31 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
   }, [text, defaults]);
 
   const canGenerate = useMemo(() => {
-    const text = typeof inputText === "function" ? inputText() : inputText;
+    // If inputText is a function (async or sync getText), we can't determine
+    // if it has content without calling it. Assume it's valid if provided.
+    const input = inputText;
+    if (typeof input === "function") {
+      switch (mode) {
+        case "generateImageMetadata":
+          return Boolean(image);
+        case "translate":
+          // For translate, we need outputLanguage check, but can't check text without calling getText
+          return Boolean(
+            !outputLanguage || detectedLanguage !== outputLanguage,
+          );
+        case "summarize":
+        case "proofread":
+        case "rewrite":
+        case "write":
+        case "generatePostMetadata":
+          return true; // Assume getText will provide valid content
+        default:
+          return false;
+      }
+    }
+
+    // If inputText is a string, check it directly
+    const text = input as string | undefined;
     switch (mode) {
       case "generateImageMetadata":
         return Boolean(image);
@@ -507,8 +537,11 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
       setError(null);
       setGenerated(null);
 
+      const input = await inputText;
       try {
-        const text = typeof inputText === "function" ? inputText() : inputText;
+        // Support both sync and async getText functions
+        const text =
+          typeof input === "function" ? await Promise.resolve(input()) : input;
         switch (mode) {
           case "summarize": {
             const res = await ai.run(async ({ signal, onStatus }) => {
@@ -524,13 +557,32 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
                 type: type as SummarizerType,
                 outputLanguage: outLang as SummarizeArgs["outputLanguage"],
               };
-              const out = await summarize(args, {
+
+              const featureOptions: FeatureOptions = {
                 signal,
                 onStatus,
                 context,
                 modeOverride,
                 onDeviceTimeoutOverride: onDeviceTimeout,
-              });
+              };
+
+              // Determine if we're using on-device mode
+              const isOnDevice =
+                modeOverride === "local-only" ||
+                (!modeOverride && context === "admin");
+
+              // Check if chunking is needed
+              if (shouldChunkInput(text!.trim(), "summarize", isOnDevice)) {
+                return await chunkedSummarize(
+                  text!.trim(),
+                  args,
+                  featureOptions,
+                  isOnDevice,
+                );
+              }
+
+              // Normal single-pass summarization
+              const out = await summarize(args, featureOptions);
               return out.result;
             });
             setGenerated((res as never) ?? "");
@@ -614,13 +666,32 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
                 sourceLanguage: inputLang!,
                 targetLanguage: outLang,
               };
-              const out = await translate(args, {
+
+              const featureOptions: FeatureOptions = {
                 signal,
                 onStatus,
                 context,
                 modeOverride,
                 onDeviceTimeoutOverride: onDeviceTimeout,
-              });
+              };
+
+              // Determine if we're using on-device mode
+              const isOnDevice =
+                modeOverride === "local-only" ||
+                (!modeOverride && context === "admin");
+
+              // Check if chunking is needed (both on-device quota and AWS Translate limit)
+              if (shouldChunkInput(text!.trim(), "translate", isOnDevice)) {
+                return await chunkedTranslate(
+                  text!.trim(),
+                  args,
+                  featureOptions,
+                  isOnDevice,
+                );
+              }
+
+              // Normal single-pass translation
+              const out = await translate(args, featureOptions);
               return out.result;
             });
             setGenerated((res as never) ?? "");
@@ -652,13 +723,32 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
                 length: length as RewriterLength,
                 outputLanguage: outLang as RewriteArgs["outputLanguage"],
               };
-              const out = await rewrite(args, {
+
+              const featureOptions: FeatureOptions = {
                 signal,
                 onStatus,
                 context,
                 modeOverride,
                 onDeviceTimeoutOverride: onDeviceTimeout,
-              });
+              };
+
+              // Determine if we're using on-device mode
+              const isOnDevice =
+                modeOverride === "local-only" ||
+                (!modeOverride && context === "admin");
+
+              // Check if chunking is needed
+              if (shouldChunkInput(text!.trim(), "rewrite", isOnDevice)) {
+                return await chunkedRewrite(
+                  text!.trim(),
+                  args,
+                  featureOptions,
+                  isOnDevice,
+                );
+              }
+
+              // Normal single-pass rewrite
+              const out = await rewrite(args, featureOptions);
               return out.result;
             });
             setGenerated((res as never) ?? "");

package/src/ai-feature/chunked-features.ts

@@ -0,0 +1,254 @@
+/**
+ * Chunked versions of AI features for handling large inputs
+ *
+ * These wrappers split large inputs into smaller chunks, process them
+ * sequentially, and combine the results.
+ */
+
+import type {
+  AiKitStatusEvent,
+  FeatureOptions,
+  SummarizeArgs,
+  SummarizeResult,
+  TranslateArgs,
+  TranslateResult,
+  RewriteArgs,
+  RewriteResult,
+} from "@smart-cloud/ai-kit-core";
+import { summarize, translate, rewrite } from "@smart-cloud/ai-kit-core";
+import {
+  splitTextIntoChunks,
+  getChunkSize,
+  estimateTokenCount,
+} from "./chunking-utils";
+
+/**
+ * Chunked summarize implementation
+ *
+ * Strategy:
+ * 1. Split text into chunks
+ * 2. Summarize each chunk
+ * 3. If combined summaries are still large, recursively summarize them
+ * 4. Return final summary
+ */
+export async function chunkedSummarize(
+  text: string,
+  args: SummarizeArgs,
+  options: FeatureOptions,
+  isOnDevice: boolean,
+  recursionLevel: number = 0,
+): Promise<SummarizeResult> {
+  const maxChunkSize = getChunkSize("summarize", isOnDevice);
+  const chunks = splitTextIntoChunks(text, maxChunkSize);
+
+  if (chunks.length === 1) {
+    // No chunking needed
+    return await summarize(args, options);
+  }
+
+  // Prevent infinite recursion (max 2 levels)
+  if (recursionLevel >= 2) {
+    throw new Error(
+      "Text is too large to summarize. Please try using backend mode or reduce the input size.",
+    );
+  }
+
+  // Phase 1: Summarize each chunk
+  const chunkSummaries: string[] = [];
+
+  for (let i = 0; i < chunks.length; i++) {
+    const chunkResult = await summarize(
+      {
+        ...args,
+        text: chunks[i].text,
+      },
+      {
+        ...options,
+        onStatus: (e: AiKitStatusEvent) => {
+          if (options.onStatus) {
+            // Modify progress to reflect chunking
+            const baseProgress =
+              typeof e.progress === "number" ? e.progress : 0;
+            const chunkProgress = (i + baseProgress) / chunks.length;
+
+            options.onStatus({
+              ...e,
+              message:
+                recursionLevel === 0
+                  ? `Summarizing part ${i + 1}/${chunks.length}...`
+                  : `Combining summaries (${i + 1}/${chunks.length})...`,
+              progress: chunkProgress,
+            });
+          }
+        },
+      },
+    );
+
+    chunkSummaries.push(chunkResult.result);
+  }
+
+  // Phase 2: Combine summaries
+  const combinedSummaries = chunkSummaries.join("\n\n");
+
+  // Check if we need another round of summarization
+  if (estimateTokenCount(combinedSummaries) > maxChunkSize / 3.5) {
+    // Recursively summarize
+    return await chunkedSummarize(
+      combinedSummaries,
+      {
+        ...args,
+        // Adjust length for recursive summarization
+        length: args.length === "short" ? "short" : "medium",
+      },
+      {
+        ...options,
+        onStatus: (e: AiKitStatusEvent) => {
+          if (options.onStatus) {
+            options.onStatus({
+              ...e,
+              message: "Creating final summary...",
+            });
+          }
+        },
+      },
+      isOnDevice,
+      recursionLevel + 1,
+    );
+  }
+
+  // Final summarization
+  return await summarize(
+    {
+      ...args,
+      text: combinedSummaries,
+      length: args.length === "short" ? "short" : "medium",
+    },
+    {
+      ...options,
+      onStatus: (e: AiKitStatusEvent) => {
+        if (options.onStatus) {
+          options.onStatus({
+            ...e,
+            message: "Creating final summary...",
+          });
+        }
+      },
+    },
+  );
+}
+
+/**
+ * Chunked translate implementation
+ *
+ * Strategy:
+ * 1. Split text into chunks (respecting AWS Translate 10k char limit)
+ * 2. Translate each chunk sequentially
+ * 3. Join translated chunks
+ */
+export async function chunkedTranslate(
+  text: string,
+  args: TranslateArgs,
+  options: FeatureOptions,
+  isOnDevice: boolean,
+): Promise<TranslateResult> {
+  const maxChunkSize = getChunkSize("translate", isOnDevice);
+  const chunks = splitTextIntoChunks(text, maxChunkSize);
+
+  if (chunks.length === 1) {
+    // No chunking needed
+    return await translate(args, options);
+  }
+
+  // Translate each chunk sequentially
+  const translatedChunks: string[] = [];
+
+  for (let i = 0; i < chunks.length; i++) {
+    const chunkResult = await translate(
+      {
+        ...args,
+        text: chunks[i].text,
+      },
+      {
+        ...options,
+        onStatus: (e: AiKitStatusEvent) => {
+          if (options.onStatus) {
+            const baseProgress =
+              typeof e.progress === "number" ? e.progress : 0;
+            const chunkProgress = (i + baseProgress) / chunks.length;
+
+            options.onStatus({
+              ...e,
+              message: `Translating part ${i + 1}/${chunks.length}...`,
+              progress: chunkProgress,
+            });
+          }
+        },
+      },
+    );
+
+    translatedChunks.push(chunkResult.result);
+  }
+
+  // Join with paragraph breaks to maintain structure
+  return {
+    result: translatedChunks.join("\n\n"),
+  };
+}
+
+/**
+ * Chunked rewrite implementation
+ *
+ * Strategy:
+ * 1. Split text into chunks
+ * 2. Rewrite each chunk sequentially
+ * 3. Join rewritten chunks
+ */
+export async function chunkedRewrite(
+  text: string,
+  args: RewriteArgs,
+  options: FeatureOptions,
+  isOnDevice: boolean,
+): Promise<RewriteResult> {
+  const maxChunkSize = getChunkSize("rewrite", isOnDevice);
+  const chunks = splitTextIntoChunks(text, maxChunkSize);
+
+  if (chunks.length === 1) {
+    // No chunking needed
+    return await rewrite(args, options);
+  }
+
+  // Rewrite each chunk sequentially
+  const rewrittenChunks: string[] = [];
+
+  for (let i = 0; i < chunks.length; i++) {
+    const chunkResult = await rewrite(
+      {
+        ...args,
+        text: chunks[i].text,
+      },
+      {
+        ...options,
+        onStatus: (e: AiKitStatusEvent) => {
+          if (options.onStatus) {
+            const baseProgress =
+              typeof e.progress === "number" ? e.progress : 0;
+            const chunkProgress = (i + baseProgress) / chunks.length;
+
+            options.onStatus({
+              ...e,
+              message: `Rewriting part ${i + 1}/${chunks.length}...`,
+              progress: chunkProgress,
+            });
+          }
+        },
+      },
+    );
+
+    rewrittenChunks.push(chunkResult.result);
+  }
+
+  // Join with paragraph breaks
+  return {
+    result: rewrittenChunks.join("\n\n"),
+  };
+}