@smart-cloud/ai-kit-ui 1.0.0

package/src/useAiRun.ts

@@ -0,0 +1,177 @@
+import {
+  AiKitLanguageCode,
+  AiKitPlugin,
+  AiKitSettings,
+  getAiKitPlugin,
+  getStoreSelect,
+  type AiKitConfig,
+  type AiKitStatusEvent,
+} from "@smart-cloud/ai-kit-core";
+import { getWpSuite } from "@smart-cloud/wpsuite-core";
+import { useCallback, useRef, useState } from "react";
+
+export type AiRunState<T> = {
+  busy: boolean;
+  error: string | null;
+  statusEvent: AiKitStatusEvent | null;
+  result: T | null;
+  isCancelled: boolean;
+  /** Last known execution source (best-effort). */
+  lastSource: "on-device" | "backend" | null;
+};
+
+export type AiFeatureFunction<T> = (args: {
+  signal: AbortSignal;
+  onStatus: (e: AiKitStatusEvent) => void;
+}) => Promise<T>;
+
+export type UseAiRunResult<T> = AiRunState<T> & {
+  run: (func: AiFeatureFunction<T>) => Promise<T | null>;
+  cancel: () => void;
+  reset: () => void;
+  /** Current AbortSignal, if a run is in-flight. */
+  signal: AbortSignal | null;
+};
+
+function getErrorMessage(err: unknown): string {
+  if (err instanceof Error) return err.message;
+  if (typeof err === "string") return err;
+  try {
+    return JSON.stringify(err);
+  } catch {
+    return "Unknown error";
+  }
+}
+
+/**
+ * Returns true if backend routing is configured in the current AiKit settings.
+ *
+ * This is intentionally conservative: it only checks *configuration*, not reachability.
+ */
+export async function isBackendConfigured(): Promise<boolean> {
+  const store = await getAiKitPlugin().features.store;
+  if (!store) {
+    return false;
+  }
+  const s: AiKitConfig = getStoreSelect(store).getConfig() ?? {};
+  if (s.backendTransport === "gatey") {
+    return Boolean(s.backendApiName);
+  }
+  if (s.backendTransport === "fetch") {
+    return Boolean(s.backendBaseUrl);
+  }
+  // Unknown/undefined transport: treat as not configured.
+  return false;
+}
+
+export function readDefaultOutputLanguage(): AiKitLanguageCode {
+  const aiKit = getWpSuite()?.plugins?.aiKit as AiKitPlugin | undefined;
+  return (
+    ((aiKit?.settings ?? {}) as AiKitSettings).defaultOutputLanguage ?? "en"
+  );
+}
+
+/**
+ * Removes a single surrounding Markdown code fence.
+ *
+ * Handles common model outputs like:
+ * ```json
+ * {"a":1}
+ * ```
+ */
+export function stripCodeFence(text: string): string {
+  const fence = /^\s*```(?:json)?\s*([\s\S]*?)\s*```\s*$/i;
+  const m = text.match(fence);
+  return m ? m[1] : text;
+}
+
+export function useAiRun<T>(): UseAiRunResult<T> {
+  const ctrlRef = useRef<AbortController | null>(null);
+  const lastSourceRef = useRef<"on-device" | "backend" | null>(null);
+
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [statusEvent, setStatusEvent] = useState<AiKitStatusEvent | null>(null);
+  const [result, setResult] = useState<T | null>(null);
+  const [isCancelled, setIsCancelled] = useState(false);
+  const [lastSource, setLastSource] = useState<"on-device" | "backend" | null>(
+    null,
+  );
+
+  const cancel = useCallback(() => {
+    ctrlRef.current?.abort();
+  }, []);
+
+  const reset = useCallback(() => {
+    ctrlRef.current?.abort();
+    ctrlRef.current = null;
+    setBusy(false);
+    setError(null);
+    setStatusEvent(null);
+    setResult(null);
+    setIsCancelled(false);
+    lastSourceRef.current = null;
+    setLastSource(null);
+  }, []);
+
+  const run = useCallback(
+    async (func: AiFeatureFunction<T>): Promise<T | null> => {
+      // Cancel any ongoing run
+      ctrlRef.current?.abort();
+
+      const ctrl = new AbortController();
+      ctrlRef.current = ctrl;
+
+      setBusy(true);
+      setError(null);
+      setStatusEvent(null);
+      setResult(null);
+      setIsCancelled(false);
+      lastSourceRef.current = null;
+      setLastSource(null);
+
+      try {
+        const value = await func({
+          signal: ctrl.signal,
+          onStatus: (e) => {
+            setStatusEvent(e);
+            if (e.source === "on-device" || e.source === "backend") {
+              lastSourceRef.current = e.source;
+              setLastSource(e.source);
+            }
+          },
+        });
+        setResult(value);
+        return value;
+      } catch (err) {
+        if (ctrl.signal.aborted) {
+          setIsCancelled(true);
+          setError(null);
+          return null;
+        }
+        setError(getErrorMessage(err));
+        return null;
+      } finally {
+        setBusy(false);
+        setStatusEvent(null);
+      }
+    },
+    [],
+  );
+
+  // NOTE: do not memoize; ctrlRef changes don't trigger rerender.
+  const signal = ctrlRef.current?.signal ?? null;
+
+  return {
+    busy,
+    error,
+    statusEvent,
+    result,
+    isCancelled,
+    lastSource,
+    run,
+    cancel,
+    reset,
+    signal,
+  };
+}

package/src/withAiKitShell.tsx

@@ -0,0 +1,208 @@
+import {
+  colorsTuple,
+  createTheme,
+  DEFAULT_THEME,
+  DirectionProvider,
+  MantineColorsTuple,
+  MantineProvider,
+} from "@mantine/core";
+import {
+  AiWorkerProps,
+  CustomTranslations,
+  getStoreSelect,
+} from "@smart-cloud/ai-kit-core";
+import { useSelect } from "@wordpress/data";
+import { I18n } from "aws-amplify/utils";
+import { type ComponentType, useMemo, useState } from "react";
+import { ShadowBoundary } from "./ShadowBoundary";
+
+export type AiKitShellInjectedProps = {
+  language?: string;
+  rootElement: HTMLElement;
+};
+
+export function withAiKitShell<P extends object>(
+  RootComponent: ComponentType<P & AiKitShellInjectedProps>,
+  propOverrides?: Partial<AiWorkerProps>,
+) {
+  const Wrapped: React.FC<P & Partial<AiWorkerProps>> = (props) => {
+    // Duck-typing merge: supports both explicit shell props or defaults.
+    const {
+      store,
+      variation,
+      showOpenButton,
+      colors,
+      colorMode,
+      primaryColor,
+      primaryShade,
+      className,
+      styleText,
+      language,
+      direction,
+    } = { ...props, ...propOverrides } as AiWorkerProps & P;
+
+    const languageInStore: string | undefined | null = useSelect(() =>
+      getStoreSelect(store).getLanguage(),
+    );
+    const directionInStore: "ltr" | "rtl" | "auto" | undefined | null =
+      useSelect(() => getStoreSelect(store).getDirection());
+    const customTranslations: CustomTranslations | undefined | null = useSelect(
+      () => getStoreSelect(store).getCustomTranslations(),
+    );
+    const [languageOverride] = useState<string>(
+      new URLSearchParams(window.location.search).get("language") ?? "",
+    );
+    const [directionOverride] = useState<string>(
+      new URLSearchParams(window.location.search).get("direction") ?? "",
+    );
+    const currentLanguage = useMemo(() => {
+      I18n.putVocabularies(customTranslations || {});
+      const lang = languageInStore || languageOverride || language;
+      if (!lang || lang === "system") {
+        I18n.setLanguage("");
+        return undefined;
+      }
+      I18n.setLanguage(lang);
+      return lang;
+    }, [language, languageOverride, languageInStore, customTranslations]);
+
+    const currentDirection = useMemo(() => {
+      const dir = directionInStore || directionOverride || direction;
+      if (!dir || dir === "auto") {
+        return currentLanguage === "ar" || currentLanguage === "he"
+          ? "rtl"
+          : "ltr";
+      }
+      return dir as "ltr" | "rtl";
+    }, [currentLanguage, direction, directionInStore, directionOverride]);
+
+    const stylesheets = useMemo(
+      () => [
+        (
+          WpSuite as never as {
+            constants: { aiKit: { mantineCssHref: string } };
+          }
+        )?.constants?.aiKit?.mantineCssHref,
+        (
+          WpSuite as never as {
+            constants: { aiKit: { aiKitUiCssHref: string } };
+          }
+        )?.constants?.aiKit?.aiKitUiCssHref,
+      ],
+      [WpSuite],
+    );
+
+    let customColors: Record<string, MantineColorsTuple> | undefined;
+    if (colors) {
+      customColors = {};
+      Object.keys(colors).forEach((c) => {
+        customColors![c] = colorsTuple(colors[c]);
+      });
+    }
+
+    const theme = createTheme({
+      respectReducedMotion: true,
+      ...(customColors && { colors: customColors }),
+      ...(primaryColor &&
+        [
+          ...Object.keys(DEFAULT_THEME.colors),
+          ...Object.keys(customColors || {}),
+        ].includes(primaryColor) && { primaryColor }),
+      ...(primaryShade &&
+        Object.keys(primaryShade).length > 0 && {
+          primaryShade: {
+            light:
+              primaryShade.light ??
+              (typeof DEFAULT_THEME.primaryShade === "object"
+                ? DEFAULT_THEME.primaryShade.light
+                : (DEFAULT_THEME.primaryShade ?? 6)),
+            dark:
+              primaryShade.dark ??
+              (typeof DEFAULT_THEME.primaryShade === "object"
+                ? DEFAULT_THEME.primaryShade.dark
+                : (DEFAULT_THEME.primaryShade ?? 6)),
+          },
+        }),
+      components: {
+        Button: {
+          styles: { root: { borderRadius: "inherit" } },
+        },
+        Tooltip: {
+          defaultProps: {
+            withinPortal: false,
+            zIndex: 100002,
+          },
+        },
+        Modal: {
+          defaultProps: {
+            withinPortal: false,
+            zIndex: 100002,
+          },
+          styles: {
+            body: {
+              overflow: "visible",
+              position: "relative",
+            },
+          },
+        },
+        Select: {
+          defaultProps: {
+            comboboxProps: {
+              withinPortal: false,
+              floatingStrategy: "fixed",
+              positionDependencies: [],
+            },
+          },
+        },
+      },
+    });
+
+    return (
+      <ShadowBoundary
+        mode={variation === "modal" && !showOpenButton ? "overlay" : "local"}
+        overlayRootId="ai-kit-overlay-root"
+        stylesheets={stylesheets}
+        styleText={styleText}
+        className={className}
+        rootElementId={
+          variation === "modal" && !showOpenButton
+            ? "ai-kit-portal-root"
+            : "ai-kit-inline-root"
+        }
+      >
+        {({ rootElement }) => {
+          rootElement.setAttribute(
+            "data-ai-kit-variation",
+            variation || "default",
+          );
+          rootElement.setAttribute("dir", currentDirection);
+          if (currentLanguage) {
+            rootElement.setAttribute("lang", currentLanguage);
+          }
+
+          return (
+            <DirectionProvider initialDirection={currentDirection}>
+              <MantineProvider
+                defaultColorScheme={colorMode}
+                theme={theme}
+                cssVariablesSelector={`#${rootElement.id}`}
+                getRootElement={() => rootElement as unknown as HTMLElement}
+              >
+                <RootComponent
+                  {...props}
+                  language={currentLanguage}
+                  rootElement={rootElement}
+                />
+              </MantineProvider>
+            </DirectionProvider>
+          );
+        }}
+      </ShadowBoundary>
+    );
+  };
+
+  Wrapped.displayName = `withAiKitShell(${
+    RootComponent.displayName ?? RootComponent.name ?? "Component"
+  })`;
+  return Wrapped;
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "types": ["jquery", "dom-chromium-ai"]
+  },
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "composite": true,
+    "lib": ["ESNext"],
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"]
+  },
+  "include": ["tsup.config.ts"],
+  "exclude": ["src/**", "dist/**", "node_modules/**"]
+}

package/tsup.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  // Copy non-hashed global CSS so consumers can import it (like Mantine styles)
+  onSuccess: "node -e \"const fs=require('fs'); const path=require('path'); fs.mkdirSync('dist',{recursive:true}); fs.copyFileSync(path.join('src','styles','ai-kit-ui.css'), path.join('dist','ai-kit-ui.css'));\"",
+
+  entry: ["src/index.tsx"],
+  format: ["cjs", "esm"],
+  dts: true,
+  splitting: false,
+  sourcemap: false,
+  clean: true,
+  external: [
+    "react",
+    "react-dom",
+    /^aws-amplify(\/.*)?$/,
+    /^@mantine\/.*?$/,
+    "jquery",
+    "@wordpress/data",
+  ],
+});