@umituz/react-native-ai-generation-content 1.17.107 → 1.17.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.107",
+  "version": "1.17.109",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/index.ts

@@ -175,6 +175,7 @@ export {
   getProgressForStatus,
   interpolateProgress,
   createProgressTracker,
+  calculatePollingProgress,
   // Status checking
   checkStatusForErrors,
   isJobComplete,
@@ -305,7 +306,6 @@ export {
   ImagePickerBox,
   DualImagePicker,
   // New Generic Sections
-  AIGenerationProgressInline,
   PromptInput,
   AIGenerationHero,
   ExamplePrompts,
@@ -360,7 +360,6 @@ export type {
   // Image Picker
   ImagePickerBoxProps,
   DualImagePickerProps,
-  AIGenerationProgressInlineProps,
   PromptInputProps,
   AIGenerationHeroProps,
   ExamplePromptsProps,

package/src/infrastructure/utils/progress-calculator.util.ts

@@ -45,6 +45,27 @@ export function interpolateProgress(
   return Math.round(progress);
 }
 
+/**
+ * Calculate progress for polling-based operations
+ * Returns a rounded integer between minProgress and maxProgress
+ *
+ * @param currentAttempt - Current polling attempt (1-based)
+ * @param maxAttempts - Maximum number of polling attempts
+ * @param minProgress - Starting progress percentage (default: 10)
+ * @param maxProgress - Maximum progress percentage before completion (default: 95)
+ * @returns Rounded progress percentage
+ */
+export function calculatePollingProgress(
+  currentAttempt: number,
+  maxAttempts: number,
+  minProgress: number = 10,
+  maxProgress: number = 95,
+): number {
+  const ratio = currentAttempt / maxAttempts;
+  const progress = minProgress + ratio * (maxProgress - minProgress);
+  return Math.round(Math.min(maxProgress, progress));
+}
+
 export function createProgressTracker(stages?: ProgressStageConfig[]) {
   const effectiveStages = stages ?? DEFAULT_PROGRESS_STAGES;
   let currentStatus: GenerationStatus = "idle";

package/src/presentation/components/AIGenerationForm.tsx

@@ -13,8 +13,8 @@ import { AspectRatioSelector } from "./selectors/AspectRatioSelector";
 import { PromptInput } from "./PromptInput";
 import { GenerateButton } from "./buttons/GenerateButton";
 import { ExamplePrompts } from "./prompts/ExamplePrompts";
-import { AIGenerationProgressInline } from "./AIGenerationProgressInline";
 import { StylePresetsGrid } from "./StylePresetsGrid";
+import { GenerationProgressModal } from "./GenerationProgressModal";
 import type { AIGenerationFormProps } from "./AIGenerationForm.types";
 
 export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
@@ -36,6 +36,7 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   isGenerating,
   hideGenerateButton,
   progress,
+  progressIcon,
   generateButtonProps,
   showAdvanced,
   onAdvancedToggle,
@@ -155,13 +156,14 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
         </>
       )}
 
-      {isGenerating && progress !== undefined && (
-        <AIGenerationProgressInline
-          progress={progress}
-          title={translations.progressTitle || translations.generatingButton}
-          hint={translations.progressHint}
-        />
-      )}
+      {/* MANDATORY: Progress Modal shows automatically when isGenerating */}
+      <GenerationProgressModal
+        visible={isGenerating}
+        progress={progress ?? 0}
+        icon={progressIcon || "sparkles-outline"}
+        title={translations.progressTitle || translations.generatingButton}
+        message={translations.progressMessage || translations.progressHint}
+      />
     </>
   );
 };

package/src/presentation/components/AIGenerationForm.types.ts

@@ -14,7 +14,9 @@ export interface AIGenerationFormTranslations {
   examplePromptsTitle?: string;
   generateButton: string;
   generatingButton: string;
+  // Progress Modal (mandatory when isGenerating)
   progressTitle?: string;
+  progressMessage?: string;
   progressHint?: string;
   presetsTitle?: string;
   showAdvancedLabel?: string;
@@ -54,7 +56,8 @@ export interface AIGenerationFormProps extends PropsWithChildren {
   
   // Optional: Generation Progress
   progress?: number;
-  
+  progressIcon?: string;
+
   // Custom Generate Button Props
   generateButtonProps?: {
     costLabel?: string;

package/src/presentation/components/index.ts

@@ -4,7 +4,6 @@ export { GenerationProgressBar } from "./GenerationProgressBar";
 export { PendingJobCard } from "./PendingJobCard";
 export { PendingJobProgressBar } from "./PendingJobProgressBar";
 export { PendingJobCardActions } from "./PendingJobCardActions";
-export { AIGenerationProgressInline } from "./AIGenerationProgressInline";
 export { PromptInput } from "./PromptInput";
 export { AIGenerationHero } from "./AIGenerationHero";
 export * from "./StylePresetsGrid";
@@ -26,7 +25,6 @@ export type {
 
 export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
 export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
-export type { AIGenerationProgressInlineProps } from "./AIGenerationProgressInline";
 export type { PromptInputProps } from "./PromptInput";
 export type { AIGenerationHeroProps } from "./AIGenerationHero";
 

package/src/presentation/components/AIGenerationProgressInline.tsx

@@ -1,106 +0,0 @@
-/**
- * AIGenerationProgressInline Component
- * Generic inline generation progress display
- * Props-driven for 100+ apps compatibility
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-  AtomicProgress,
-  AtomicSpinner,
-} from "@umituz/react-native-design-system";
-
-export interface AIGenerationProgressInlineProps {
-  readonly progress: number;
-  readonly title?: string;
-  readonly message?: string;
-  readonly hint?: string;
-  readonly backgroundColor?: string;
-  readonly accentColor?: string;
-}
-
-export const AIGenerationProgressInline: React.FC<
-  AIGenerationProgressInlineProps
-> = ({
-  progress,
-  title,
-  message,
-  hint,
-  backgroundColor,
-  accentColor,
-}) => {
-  const tokens = useAppDesignTokens();
-  const primaryColor = accentColor || tokens.colors.primary;
-  const bgColor = backgroundColor || tokens.colors.surface;
-
-  const clampedProgress = Math.max(0, Math.min(100, progress));
-
-  return (
-    <View style={[styles.container, { backgroundColor: bgColor }]}>
-      <AtomicSpinner size="lg" color={primaryColor} />
-
-      {title && (
-        <AtomicText
-          type="bodyMedium"
-          style={[styles.title, { color: tokens.colors.textPrimary }]}
-        >
-          {title}
-        </AtomicText>
-      )}
-      
-      {message && (
-        <AtomicText
-          type="bodySmall"
-          style={[styles.message, { color: tokens.colors.textSecondary }]}
-        >
-          {message}
-        </AtomicText>
-      )}
-      
-      <View style={styles.progressBarWrapper}>
-        <AtomicProgress
-          value={clampedProgress}
-          height={8}
-          color={primaryColor}
-          backgroundColor={tokens.colors.surfaceVariant}
-          shape="rounded"
-          showPercentage={false}
-        />
-      </View>
-      
-      <AtomicText
-        type="labelSmall"
-        style={[styles.progressLabel, { color: tokens.colors.textSecondary }]}
-      >
-        {clampedProgress}%{hint ? ` • ${hint}` : ""}
-      </AtomicText>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    margin: 16,
-    padding: 24,
-    borderRadius: 16,
-    alignItems: "center",
-  },
-  title: {
-    marginTop: 16,
-    fontWeight: "600",
-  },
-  message: {
-    marginTop: 8,
-    textAlign: "center",
-  },
-  progressBarWrapper: {
-    width: "100%",
-    marginTop: 16,
-  },
-  progressLabel: {
-    marginTop: 8,
-  },
-});