@umituz/react-native-ai-generation-content 1.17.18 → 1.17.20

package/src/features/text-to-voice/presentation/components/TextToVoiceErrorMessage.tsx

@@ -0,0 +1,57 @@
+/**
+ * TextToVoiceErrorMessage Component
+ * Error message display
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { TextToVoiceErrorMessageProps } from "../../domain/types";
+
+export const TextToVoiceErrorMessage: React.FC<TextToVoiceErrorMessageProps> = ({
+  message,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        styles.errorCard,
+        {
+          backgroundColor: `${tokens.colors.error}20`,
+          borderColor: tokens.colors.error,
+        },
+        style,
+      ]}
+    >
+      <AtomicIcon name="alert-circle-outline" size="sm" color="error" />
+      <AtomicText
+        type="bodySmall"
+        style={[styles.errorText, { color: tokens.colors.error }]}
+      >
+        {message}
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  errorCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    margin: 16,
+    marginTop: 0,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  errorText: {
+    marginLeft: 8,
+    flex: 1,
+  },
+});

package/src/features/text-to-voice/presentation/components/TextToVoiceExamplePrompts.tsx

@@ -0,0 +1,77 @@
+/**
+ * TextToVoiceExamplePrompts Component
+ * Horizontal scrolling example prompts
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { TextToVoiceExamplePromptsProps } from "../../domain/types";
+
+export const TextToVoiceExamplePrompts: React.FC<
+  TextToVoiceExamplePromptsProps
+> = ({ prompts, onSelectPrompt, labelKey, style }) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  if (prompts.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.section, style]}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {t(labelKey)}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollView}
+      >
+        {prompts.map((prompt, index) => (
+          <TouchableOpacity
+            key={index}
+            style={[styles.promptCard, { backgroundColor: tokens.colors.surface }]}
+            onPress={() => onSelectPrompt(prompt)}
+          >
+            <AtomicText
+              type="bodySmall"
+              style={{ color: tokens.colors.textPrimary }}
+              numberOfLines={2}
+            >
+              {prompt}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  scrollView: {
+    marginHorizontal: -16,
+    paddingHorizontal: 16,
+  },
+  promptCard: {
+    padding: 12,
+    borderRadius: 8,
+    marginRight: 12,
+    minWidth: 150,
+    maxWidth: 200,
+  },
+});

package/src/features/text-to-voice/presentation/components/TextToVoiceGenerateButton.tsx

@@ -0,0 +1,87 @@
+/**
+ * TextToVoiceGenerateButton Component
+ * Generate button with loading state
+ */
+
+import React from "react";
+import { TouchableOpacity, ActivityIndicator, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { TextToVoiceGenerateButtonProps } from "../../domain/types";
+
+export const TextToVoiceGenerateButton: React.FC<
+  TextToVoiceGenerateButtonProps
+> = ({
+  isGenerating,
+  progress,
+  disabled,
+  onPress,
+  buttonTextKey,
+  generatingTextKey,
+  style,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        {
+          backgroundColor: tokens.colors.primary,
+          opacity: disabled ? 0.6 : 1,
+        },
+        style,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      {isGenerating ? (
+        <>
+          <ActivityIndicator
+            color={tokens.colors.onPrimary}
+            style={styles.loader}
+          />
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.buttonText, { color: tokens.colors.onPrimary }]}
+          >
+            {t(generatingTextKey)} {progress.toFixed(0)}%
+          </AtomicText>
+        </>
+      ) : (
+        <>
+          <AtomicIcon name="Volume2" size="md" color="onPrimary" />
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.buttonText, { color: tokens.colors.onPrimary }]}
+          >
+            {t(buttonTextKey)}
+          </AtomicText>
+        </>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    marginHorizontal: 16,
+    padding: 16,
+    borderRadius: 12,
+  },
+  loader: {
+    marginRight: 8,
+  },
+  buttonText: {
+    fontWeight: "600",
+    marginLeft: 8,
+  },
+});

package/src/features/text-to-voice/presentation/components/TextToVoiceHeader.tsx

@@ -0,0 +1,73 @@
+/**
+ * TextToVoiceHeader Component
+ * Header with icon and description
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { TextToVoiceHeaderProps } from "../../domain/types";
+
+export const TextToVoiceHeader: React.FC<TextToVoiceHeaderProps> = ({
+  descriptionKey,
+  iconName,
+  headerContent,
+  style,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.container, style]}>
+      {headerContent || (
+        <View style={styles.content}>
+          <View
+            style={[
+              styles.iconContainer,
+              { backgroundColor: `${tokens.colors.primary}20` },
+            ]}
+          >
+            <AtomicIcon
+              name={iconName as "Mic"}
+              size="lg"
+              color="primary"
+            />
+          </View>
+          <AtomicText
+            type="bodySmall"
+            style={[styles.description, { color: tokens.colors.textSecondary }]}
+          >
+            {t(descriptionKey)}
+          </AtomicText>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  content: {
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 12,
+  },
+  description: {
+    marginTop: 8,
+    textAlign: "center",
+  },
+});

package/src/features/text-to-voice/presentation/components/TextToVoiceOptionalInput.tsx

@@ -0,0 +1,73 @@
+/**
+ * TextToVoiceOptionalInput Component
+ * Optional text input with hint
+ */
+
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { TextToVoiceOptionalInputProps } from "../../domain/types";
+
+export const TextToVoiceOptionalInput: React.FC<
+  TextToVoiceOptionalInputProps
+> = ({ title, value, onChangeText, placeholder, hint, style }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[styles.card, { backgroundColor: tokens.colors.surface }, style]}
+    >
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {title}
+      </AtomicText>
+      <TextInput
+        style={[
+          styles.textInput,
+          {
+            backgroundColor: tokens.colors.backgroundPrimary,
+            color: tokens.colors.textPrimary,
+            borderColor: tokens.colors.borderLight,
+          },
+        ]}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={tokens.colors.textTertiary}
+      />
+      <AtomicText
+        type="bodySmall"
+        style={[styles.hint, { color: tokens.colors.textTertiary }]}
+      >
+        {hint}
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 16,
+    marginTop: 0,
+    padding: 16,
+    borderRadius: 12,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 8,
+  },
+  textInput: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    minHeight: 44,
+  },
+  hint: {
+    marginTop: 4,
+  },
+});

package/src/features/text-to-voice/presentation/components/TextToVoiceTextInput.tsx

@@ -0,0 +1,85 @@
+/**
+ * TextToVoiceTextInput Component
+ * Text input for voice generation with character count
+ */
+
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { TextToVoiceTextInputProps } from "../../domain/types";
+
+export const TextToVoiceTextInput: React.FC<TextToVoiceTextInputProps> = ({
+  value,
+  onChangeText,
+  maxLength = 5000,
+  labelKey,
+  placeholderKey,
+  characterCountKey,
+  style,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[styles.card, { backgroundColor: tokens.colors.surface }, style]}
+    >
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {t(labelKey)}
+      </AtomicText>
+      <TextInput
+        style={[
+          styles.textInput,
+          {
+            backgroundColor: tokens.colors.backgroundPrimary,
+            color: tokens.colors.textPrimary,
+            borderColor: tokens.colors.borderLight,
+          },
+        ]}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={t(placeholderKey)}
+        placeholderTextColor={tokens.colors.textTertiary}
+        multiline
+        numberOfLines={6}
+        maxLength={maxLength}
+      />
+      <AtomicText
+        type="bodySmall"
+        style={[styles.characterCount, { color: tokens.colors.textTertiary }]}
+      >
+        {t(characterCountKey, { count: value.length, max: maxLength })}
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 16,
+    marginTop: 0,
+    padding: 16,
+    borderRadius: 12,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 8,
+  },
+  textInput: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    minHeight: 120,
+    textAlignVertical: "top",
+  },
+  characterCount: {
+    marginTop: 4,
+  },
+});

package/src/features/text-to-voice/presentation/components/index.ts

@@ -0,0 +1,7 @@
+export { TextToVoiceTextInput } from "./TextToVoiceTextInput";
+export { TextToVoiceOptionalInput } from "./TextToVoiceOptionalInput";
+export { TextToVoiceExamplePrompts } from "./TextToVoiceExamplePrompts";
+export { TextToVoiceGenerateButton } from "./TextToVoiceGenerateButton";
+export { TextToVoiceAudioPlayer } from "./TextToVoiceAudioPlayer";
+export { TextToVoiceErrorMessage } from "./TextToVoiceErrorMessage";
+export { TextToVoiceHeader } from "./TextToVoiceHeader";

package/src/features/text-to-voice/presentation/hooks/index.ts

@@ -1,5 +1,6 @@
-export { useTextToVoiceFeature } from "./useTextToVoiceFeature";
+export { useTextToVoiceForm } from "./useTextToVoiceForm";
+export { useTextToVoiceGeneration } from "./useTextToVoiceGeneration";
 export type {
-  UseTextToVoiceFeatureProps,
-  UseTextToVoiceFeatureReturn,
-} from "./useTextToVoiceFeature";
+  UseTextToVoiceGenerationProps,
+  UseTextToVoiceGenerationReturn,
+} from "./useTextToVoiceGeneration";

package/src/features/text-to-voice/presentation/hooks/useTextToVoiceForm.ts

@@ -0,0 +1,91 @@
+/**
+ * useTextToVoiceForm Hook
+ * Manages form state for text-to-voice generation
+ */
+
+import { useState, useCallback } from "react";
+import type {
+  TextToVoiceFormState,
+  TextToVoiceFormReturn,
+  TextToVoiceFormConfig,
+  TextToVoiceRequest,
+} from "../../domain/types";
+
+const DEFAULT_FORM_STATE: TextToVoiceFormState = {
+  text: "",
+  model: "",
+  voice: "",
+  speed: 1.0,
+  stability: 0.5,
+  similarityBoost: 0.75,
+};
+
+export function useTextToVoiceForm(
+  config?: TextToVoiceFormConfig,
+): TextToVoiceFormReturn {
+  const initialState: TextToVoiceFormState = {
+    text: config?.initialText ?? DEFAULT_FORM_STATE.text,
+    model: config?.initialModel ?? DEFAULT_FORM_STATE.model,
+    voice: config?.initialVoice ?? DEFAULT_FORM_STATE.voice,
+    speed: config?.initialSpeed ?? DEFAULT_FORM_STATE.speed,
+    stability: config?.initialStability ?? DEFAULT_FORM_STATE.stability,
+    similarityBoost:
+      config?.initialSimilarityBoost ?? DEFAULT_FORM_STATE.similarityBoost,
+  };
+
+  const [formState, setFormState] = useState<TextToVoiceFormState>(initialState);
+
+  const setText = useCallback((text: string) => {
+    setFormState((prev) => ({ ...prev, text }));
+  }, []);
+
+  const setModel = useCallback((model: string) => {
+    setFormState((prev) => ({ ...prev, model }));
+  }, []);
+
+  const setVoice = useCallback((voice: string) => {
+    setFormState((prev) => ({ ...prev, voice }));
+  }, []);
+
+  const setSpeed = useCallback((speed: number) => {
+    setFormState((prev) => ({ ...prev, speed }));
+  }, []);
+
+  const setStability = useCallback((stability: number) => {
+    setFormState((prev) => ({ ...prev, stability }));
+  }, []);
+
+  const setSimilarityBoost = useCallback((similarityBoost: number) => {
+    setFormState((prev) => ({ ...prev, similarityBoost }));
+  }, []);
+
+  const buildRequest = useCallback((): TextToVoiceRequest => {
+    return {
+      text: formState.text.trim(),
+      userId: "",
+      model: formState.model || undefined,
+      options: {
+        voice: formState.voice || undefined,
+        speed: formState.speed,
+        stability: formState.stability,
+        similarityBoost: formState.similarityBoost,
+      },
+    };
+  }, [formState]);
+
+  const resetForm = useCallback(() => {
+    setFormState(initialState);
+  }, [initialState]);
+
+  return {
+    formState,
+    setText,
+    setModel,
+    setVoice,
+    setSpeed,
+    setStability,
+    setSimilarityBoost,
+    buildRequest,
+    resetForm,
+  };
+}

package/src/features/text-to-voice/presentation/hooks/useTextToVoiceGeneration.ts

@@ -0,0 +1,116 @@
+/**
+ * useTextToVoiceGeneration Hook
+ * Handles text-to-voice generation flow
+ */
+
+import { useState, useCallback } from "react";
+import { executeTextToVoice } from "../../infrastructure/services";
+import type {
+  TextToVoiceGenerationState,
+  TextToVoiceRequest,
+  TextToVoiceResult,
+  VoiceGeneration,
+  TextToVoiceFeatureConfig,
+} from "../../domain/types";
+
+export interface UseTextToVoiceGenerationProps {
+  config: TextToVoiceFeatureConfig;
+  onSuccess?: (generation: VoiceGeneration) => void;
+  onError?: (error: string) => void;
+}
+
+export interface UseTextToVoiceGenerationReturn {
+  state: TextToVoiceGenerationState;
+  generate: (request: TextToVoiceRequest) => Promise<VoiceGeneration | null>;
+  resetState: () => void;
+}
+
+const initialState: TextToVoiceGenerationState = {
+  isGenerating: false,
+  progress: 0,
+  audioUrl: null,
+  error: null,
+  requestId: null,
+};
+
+export function useTextToVoiceGeneration(
+  props: UseTextToVoiceGenerationProps,
+): UseTextToVoiceGenerationReturn {
+  const { config, onSuccess, onError } = props;
+  const [state, setState] = useState<TextToVoiceGenerationState>(initialState);
+
+  const resetState = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  const generate = useCallback(
+    async (request: TextToVoiceRequest): Promise<VoiceGeneration | null> => {
+      if (!request.text.trim()) {
+        const error = "Text is required";
+        setState((prev) => ({ ...prev, error }));
+        onError?.(error);
+        return null;
+      }
+
+      setState({
+        isGenerating: true,
+        progress: 0,
+        audioUrl: null,
+        error: null,
+        requestId: null,
+      });
+
+      config.onProcessingStart?.();
+
+      const result: TextToVoiceResult = await executeTextToVoice(request, {
+        model: config.model,
+        buildInput: config.buildInput,
+        extractResult: config.extractResult,
+        onProgress: (progress) => {
+          setState((prev) => ({ ...prev, progress }));
+        },
+      });
+
+      if (result.success && result.audioUrl) {
+        const generation: VoiceGeneration = {
+          id: result.requestId || Date.now().toString(),
+          text: request.text,
+          audioUrl: result.audioUrl,
+          provider: config.providerId || "unknown",
+          createdAt: new Date().toISOString(),
+        };
+
+        setState({
+          isGenerating: false,
+          progress: 100,
+          audioUrl: result.audioUrl,
+          error: null,
+          requestId: generation.id,
+        });
+
+        config.onProcessingComplete?.(result);
+        onSuccess?.(generation);
+
+        return generation;
+      }
+
+      const error = result.error || "Generation failed";
+      setState({
+        isGenerating: false,
+        progress: 0,
+        audioUrl: null,
+        error,
+        requestId: null,
+      });
+
+      config.onError?.(error);
+      onError?.(error);
+      config.onProcessingComplete?.(result);
+
+      return null;
+    },
+    [config, onSuccess, onError],
+  );
+
+  return { state, generate, resetState };
+}

package/src/features/text-to-voice/presentation/index.ts

@@ -1 +1,2 @@
 export * from "./hooks";
+export * from "./components";