@app-studio/components 0.10.17

package/dist/native/components/ChatInput/AudioRecorder.js

@@ -0,0 +1,52 @@
+import React, { useCallback, useEffect } from 'react';
+import { Horizontal, View } from 'app-studio';
+import { MicrophoneIcon, StopIcon } from '../Icon/Icon';
+import { AudioWaveform } from '../AudioInput/AudioWaveform/AudioWaveform';
+import { useAudioRecording } from '../AudioInput/useAudioRecording';
+// The main AudioRecorder functional component, responsible for managing and displaying audio recording functionality.
+export const AudioRecorder = ({ onRecordingComplete, onRecordingStart, views = {}, }) => {
+    // Destructures state variables and functions from the custom 'useAudioRecording' hook to manage recording logic.
+    const { 
+    // Boolean state indicating whether audio recording is currently active.
+    recording, 
+    // Boolean state indicating whether the recording is currently paused.
+    paused, 
+    // The recorded audio data stored as a Blob object once recording is stopped.
+    audioBlob, 
+    // An AnalyserNode from the Web Audio API, used for real-time audio analysis and visualization.
+    analyserNode, 
+    // Function to initiate the audio recording process.
+    startRecording, 
+    // Function to stop the current audio recording process.
+    stopRecording, } = useAudioRecording();
+    // A React effect hook that triggers an action when the 'audioBlob' state changes, specifically after a recording has completed.
+    useEffect(() => {
+        // Checks if an audio blob has been generated, signifying the completion of a recording.
+        if (audioBlob) {
+            // Creates a new 'File' object from the recorded audio blob, assigning a unique name and appropriate MIME type.
+            const file = new File([audioBlob], `recording-${Date.now()}.webm`, {
+                type: audioBlob.type || 'audio/webm;codecs=opus',
+            });
+            // Invokes the 'onRecordingComplete' callback prop, passing the newly created audio file to the parent component.
+            onRecordingComplete(file);
+        }
+    }, [audioBlob]);
+    // Memoized callback function to handle the start recording event, ensuring it's not recreated unnecessarily.
+    const handleStart = useCallback(() => {
+        // Initiates the audio recording using the function provided by the 'useAudioRecording' hook.
+        startRecording();
+        // Calls the optional 'onRecordingStart' callback if it was provided, signaling the beginning of recording.
+        onRecordingStart?.();
+    }, []);
+    return (<Horizontal alignItems="center" gap={4}>
+      <View minWidth={90}>
+        {recording && analyserNode && (<AudioWaveform analyserNode={analyserNode} isPaused={paused}/>)}
+      </View>
+      <View as="button" type="button" onClick={recording ? stopRecording : handleStart} height="40px" width="40px" display="flex" alignItems="center" justifyContent="center" backgroundColor={recording ? 'theme-error' : 'color-gray-100'} color={recording ? 'color-white' : 'color-gray-600'} borderRadius="50%" border="none" cursor="pointer" _hover={{
+            backgroundColor: recording ? 'color-red-600' : 'color-gray-200',
+        }} {...views.button}>
+        {recording ? (<StopIcon widthHeight={16} color="currentColor" filled={false}/>) : (<MicrophoneIcon widthHeight={16} color="currentColor" filled={false}/>)}
+      </View>
+    </Horizontal>);
+};
+//# sourceMappingURL=AudioRecorder.js.map

package/dist/native/components/ChatInput/AudioRecorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecorder.js","sourceRoot":"","sources":["../../../../src/components/ChatInput/AudioRecorder.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/ChatInput/ChatInput/ChatInput.props.d.ts

@@ -0,0 +1,317 @@
+import { ViewProps } from 'app-studio';
+import { ChatInputStyles, ModelOption, PromptExample, Shape, Size, Variant } from './ChatInput.type';
+import { Suggestion } from '../EditableInput';
+/**
+ * Props for the ChatInput component
+ */
+export interface ChatInputProps extends Omit<ViewProps, 'onChange' | 'onSubmit' | 'loading'> {
+    /**
+     * Get the pending files
+     */
+    getPendingFiles?: () => File[];
+    /**
+     * Clear the pending files
+     */
+    clearPendingFiles?: () => void;
+    /**
+     * Callback function when the form is submitted
+     */
+    onSubmit?: (message: string, options?: {
+        model_name?: string;
+        enable_thinking?: boolean;
+    }) => void;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is disabled (camelCase alias for `disabled`)
+     */
+    isDisabled?: boolean;
+    /**
+     * Visible row count for the input
+     */
+    lines?: number;
+    /**
+     * Optional right-side affordance rendered inside the input
+     */
+    rightElement?: React.ReactNode;
+    /**
+     * Optional key handler for the editable area
+     */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /**
+     * Error state or value used by form wrappers
+     */
+    error?: any;
+    /**
+     * Whether an agent is currently running
+     */
+    isAgentRunning?: boolean;
+    /**
+     * Whether an agent is currently running (alias for `isAgentRunning`)
+     */
+    isWorkerRunning?: boolean;
+    /**
+     * Callback function to stop the agent
+     */
+    onStopAgent?: () => void;
+    /**
+     * Callback function to stop the worker (alias for `onStopAgent`)
+     */
+    onStopWorker?: () => void;
+    /**
+     * Whether to auto focus the input
+     */
+    autoFocus?: boolean;
+    /**
+     * Controlled value for the input
+     */
+    value?: string;
+    /**
+     * Callback function when the input value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback function when the file browser is opened
+     */
+    onFileBrowse?: () => void;
+    /**
+     * ID of the sandbox
+     */
+    sandboxId?: string;
+    /**
+     * Callback when file upload progress changes
+     */
+    onUploadProgress?: (progress: number) => void;
+    /**
+     * Callback when file upload succeeds
+     */
+    onUploadSuccess?: (data: any) => void;
+    /**
+     * Callback when file upload fails
+     */
+    onUploadError?: (error: any) => void;
+    /**
+     * Function to execute file upload. Parent should provide this.
+     * Should return an object with a loading property.
+     */
+    onFileUpload?: (file: File) => void;
+    /**
+     * Whether to hide the attachment button
+     */
+    hideAttachments?: boolean;
+    /**
+     * Enable audio recording button
+     */
+    enableAudioRecording?: boolean;
+    /**
+     * Callback when audio recording starts
+     */
+    onAudioRecordingStart?: () => void;
+    /**
+     * Callback when audio recording stops
+     */
+    onAudioRecordingStop?: (audio: Blob) => void;
+    /**
+     * Title for the chat input
+     */
+    title?: string;
+    /**
+     * Whether to show the guide tip
+     */
+    showGuideTip?: boolean;
+    /**
+     * URL for the guide video
+     */
+    guideVideoUrl?: string;
+    /**
+     * Callback function when the guide tip is closed
+     */
+    onGuideClose?: () => void;
+    /**
+     * List of prompt examples
+     */
+    promptExamples?: PromptExample[];
+    /**
+     * List of suggestions for auto-completion
+     */
+    suggestions?: Suggestion[];
+    /**
+     * Callback function when a prompt example is selected
+     */
+    onPromptExampleSelect?: (example: PromptExample) => void;
+    /**
+     * Data for mention auto-completion
+     */
+    mentionData?: Array<{
+        id: string;
+        name: string;
+        avatar?: string;
+        description?: string;
+    }>;
+    /**
+     * Trigger character for mentions (default: '@')
+     */
+    mentionTrigger?: string;
+    /**
+     * Callback function when a mention is selected
+     */
+    onMentionSelect?: (mention: {
+        id: string;
+        name: string;
+        avatar?: string;
+        description?: string;
+    }) => void;
+    /**
+     * Error message to display at the bottom
+     */
+    errorMessage?: string;
+    /**
+     * Size of the input
+     */
+    size?: Size;
+    /**
+     * Shape of the input
+     */
+    shape?: Shape;
+    /**
+     * Variant of the input
+     */
+    variant?: Variant;
+    /**
+     * Style customization
+     */
+    views?: ChatInputStyles;
+}
+/**
+ * Props for the ChatInput view component
+ */
+export interface ChatInputViewProps extends ChatInputProps {
+    /**
+     * Current value of the input
+     */
+    value?: string;
+    /**
+     * Callback function when the input value changes
+     */
+    handleChange: (value: string) => void;
+    /**
+     * Callback function when the form is submitted
+     */
+    handleSubmit: (e: React.FormEvent) => void;
+    /**
+     * Reference to the editable div element
+     */
+    editableRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Reference to the file input element
+     */
+    fileInputRef: React.RefObject<HTMLInputElement | null>;
+    /**
+     * Whether files are being uploaded
+     */
+    isUploading: boolean;
+    /**
+     * Current upload progress (0-100)
+     */
+    uploadProgress?: number;
+    leftButtons?: React.ReactNode;
+    rightButtons?: React.ReactNode;
+    /**
+     * Whether the user is dragging files over the input
+     */
+    isDraggingOver: boolean;
+    /**
+     * List of uploaded files
+     */
+    uploadedFiles: File[];
+    /**
+     * Callback function to remove an uploaded file
+     */
+    removeUploadedFile: (index: number) => void;
+    /**
+     * Callback function to set pending files
+     */
+    setPendingFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    /**
+     * Callback function to set uploaded files
+     */
+    setUploadedFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    /**
+     * Callback function to set whether files are being uploaded
+     */
+    setIsUploading: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Start uploading newly added files
+     */
+    startUpload: (files: File[]) => void;
+    /**
+     * Currently selected model
+     */
+    selectedModel: string;
+    /**
+     * Callback function when the model changes
+     */
+    handleModelChange: (model: string) => void;
+    /**
+     * List of available models
+     */
+    modelOptions: ModelOption[];
+    /**
+     * Subscription status
+     */
+    subscriptionStatus?: string;
+    /**
+     * Whether the user can access the selected model
+     */
+    canAccessModel: (model: string) => boolean;
+    /**
+     * Whether the guide tip is shown
+     */
+    isGuideTipShown: boolean;
+    /**
+     * Callback function to hide the guide tip
+     */
+    hideGuideTip: () => void;
+    /**
+     * Callback function to handle prompt example selection
+     */
+    handlePromptExampleSelect: (example: PromptExample) => void;
+    /**
+     * Callback function to handle drag over events
+     */
+    handleDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
+    /**
+     * Callback function to handle drag leave events
+     */
+    handleDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
+    /**
+     * List of suggestions for auto-completion
+     */
+    suggestions?: Suggestion[];
+    /**
+     * Optional text label displayed while in loading state.
+     */
+    loadingText?: string;
+    /**
+     * Optional text label displayed on the attachment button / area.
+     */
+    attachmentText?: string;
+    /**
+     * Files staged for upload (pending) — surfaced by the state hook.
+     */
+    pendingFiles?: File[];
+    /**
+     * Optional error message used by some compositions (e.g. Formik wrapper).
+     */
+    error?: any;
+}

package/dist/native/components/ChatInput/ChatInput/ChatInput.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatInput.props.js.map

package/dist/native/components/ChatInput/ChatInput/ChatInput.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.props.js","sourceRoot":"","sources":["../../../../../src/components/ChatInput/ChatInput/ChatInput.props.ts"],"names":[],"mappings":""}

package/dist/native/components/ChatInput/ChatInput/ChatInput.state.d.ts

@@ -0,0 +1,43 @@
+import { ChatInputProps } from './ChatInput.props';
+import { ModelOption, PromptExample } from './ChatInput.type';
+/**
+ * Props accepted by useChatInputState (excludes props the hook provides)
+ */
+type UseChatInputStateProps = Omit<ChatInputProps, 'getPendingFiles' | 'clearPendingFiles'>;
+/**
+ * Custom hook for managing ChatInput state
+ */
+export declare const useChatInputState: (props: UseChatInputStateProps) => {
+    onSubmit: ((message: string, options?: {
+        model_name?: string;
+        enable_thinking?: boolean;
+    }) => void) | undefined;
+    getPendingFiles: () => File[];
+    clearPendingFiles: () => void;
+    value: string;
+    handleChange: (newValue: string) => void;
+    handleSubmit: (e: React.FormEvent) => void;
+    editableRef: import("react").RefObject<HTMLDivElement | null>;
+    fileInputRef: import("react").RefObject<HTMLInputElement | null>;
+    isUploading: boolean;
+    uploadProgress: number;
+    isDraggingOver: boolean;
+    uploadedFiles: File[];
+    pendingFiles: File[];
+    removeUploadedFile: (index: number) => void;
+    setPendingFiles: import("react").Dispatch<import("react").SetStateAction<File[]>>;
+    setUploadedFiles: import("react").Dispatch<import("react").SetStateAction<File[]>>;
+    setIsUploading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    startUpload: (files: File[]) => void;
+    selectedModel: string;
+    handleModelChange: import("react").Dispatch<import("react").SetStateAction<string>>;
+    modelOptions: ModelOption[];
+    subscriptionStatus: string;
+    canAccessModel: (_model: string) => boolean;
+    handleDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
+    handleDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
+    isGuideTipShown: boolean;
+    hideGuideTip: () => void;
+    handlePromptExampleSelect: (example: PromptExample) => void;
+};
+export {};

package/dist/native/components/ChatInput/ChatInput/ChatInput.state.js

@@ -0,0 +1,227 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+/**
+ * Custom hook for managing ChatInput state
+ */
+export const useChatInputState = (props) => {
+    const { value: controlledValue, onChange: controlledOnChange, onSubmit, autoFocus = true, loading = false, disabled = false, isAgentRunning = false, onStopAgent, sandboxId, onUploadProgress, onUploadSuccess, onUploadError, onFileUpload, } = props;
+    // Determine if the component is controlled
+    const isControlled = controlledValue !== undefined && controlledOnChange !== undefined;
+    // State for uncontrolled input
+    const [uncontrolledValue, setUncontrolledValue] = useState('');
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    // State for file uploads
+    const [uploadedFiles, setUploadedFiles] = useState([]);
+    const [pendingFiles, setPendingFiles] = useState([]);
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState(0);
+    const [uploadQueue, setUploadQueue] = useState([]);
+    const [isProcessingQueue, setIsProcessingQueue] = useState(false);
+    const currentUploadRef = useRef(null);
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
+    // State for model selection
+    const [selectedModel, setSelectedModel] = useState('gpt-4');
+    const [modelOptions] = useState([
+        { id: 'gpt-3.5-turbo', name: 'GPT-3.5' },
+        { id: 'gpt-4', name: 'GPT-4' },
+        { id: 'gpt-4-thinking', name: 'GPT-4 (Thinking)', isThinking: true },
+        { id: 'claude-3-5-sonnet', name: 'Claude 3.5 Sonnet' },
+    ]);
+    // Refs for DOM elements
+    const editableRef = useRef(null);
+    const fileInputRef = useRef(null);
+    // State for UI features
+    const [isGuideTipShown, setIsGuideTipShown] = useState(props.showGuideTip || false);
+    // Focus the editable div on mount if autoFocus is true
+    useEffect(() => {
+        if (autoFocus && editableRef.current) {
+            editableRef.current.focus();
+        }
+    }, [autoFocus]);
+    // Clean up object URLs when component unmounts
+    useEffect(() => {
+        return () => {
+            uploadedFiles.forEach((file) => {
+                // if (file.localUrl) {
+                //   URL.revokeObjectURL(file);
+                // }
+            });
+        };
+    }, [uploadedFiles]);
+    // Handle input change for contenteditable
+    const handleChange = (newValue) => {
+        if (isControlled && controlledOnChange) {
+            controlledOnChange(newValue);
+        }
+        else {
+            setUncontrolledValue(newValue);
+        }
+    };
+    // Handle form submission
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if ((!value.trim() && uploadedFiles.length === 0) ||
+            loading ||
+            (disabled && !isAgentRunning)) {
+            return;
+        }
+        if (isAgentRunning && onStopAgent) {
+            onStopAgent();
+            return;
+        }
+        let message = value;
+        // Add file information to the message if files are uploaded
+        if (uploadedFiles.length > 0) {
+            const fileInfo = uploadedFiles
+                .map((file) => `[Uploaded File: ${URL.createObjectURL(file)}}]`)
+                .join('\n');
+            message = message ? `${message}\n\n${fileInfo}` : fileInfo;
+        }
+        // Determine model and thinking mode
+        let baseModelName = selectedModel;
+        let thinkingEnabled = false;
+        if (selectedModel.endsWith('-thinking')) {
+            baseModelName = selectedModel.replace(/-thinking$/, '');
+            thinkingEnabled = true;
+        }
+        // Call the onSubmit callback
+        onSubmit?.(message, {
+            model_name: baseModelName,
+            enable_thinking: thinkingEnabled,
+        });
+        // Clear the input if uncontrolled
+        if (!isControlled) {
+            setUncontrolledValue('');
+        }
+        // Clear uploaded files
+        setUploadedFiles([]);
+        // Also clear pending files that were staged for sending
+        setPendingFiles([]);
+    };
+    // Handle removing an uploaded file
+    const removeUploadedFile = (index) => {
+        setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
+        if (!sandboxId && pendingFiles.length > index) {
+            setPendingFiles((prev) => prev.filter((_, i) => i !== index));
+        }
+    };
+    // Handle drag events
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDraggingOver(true);
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDraggingOver(false);
+    };
+    // Start uploading a batch of files (enqueue and process)
+    const startUpload = useCallback((files) => {
+        if (!files || files.length === 0)
+            return;
+        // Add files to local states immediately for UI
+        setPendingFiles((prevFiles) => [...prevFiles, ...files]);
+        setUploadedFiles((prev) => [...prev, ...files]);
+        // Enqueue and kick the processor
+        setUploadQueue((prev) => [...prev, ...files]);
+        setIsUploading(true);
+    }, [setPendingFiles, setUploadedFiles]);
+    // Process upload queue sequentially
+    const processUploadQueue = useCallback(() => {
+        if (uploadQueue.length > 0 && !isProcessingQueue && onFileUpload) {
+            setIsProcessingQueue(true);
+            const nextFile = uploadQueue[0];
+            currentUploadRef.current = nextFile;
+            setUploadProgress(0);
+            // Execute user-provided upload function
+            try {
+                onFileUpload(nextFile);
+            }
+            catch (err) {
+                // Handle synchronous errors
+                setUploadQueue((prev) => prev.slice(1));
+                setIsProcessingQueue(false);
+                currentUploadRef.current = null;
+                setUploadProgress(0);
+                setIsUploading((prev) => uploadQueue.length - 1 > 0 || false);
+                onUploadError?.(err);
+            }
+        }
+        else if (uploadQueue.length === 0 && isUploading) {
+            // Nothing left to upload
+            setIsUploading(false);
+            setUploadProgress(0);
+        }
+    }, [
+        uploadQueue,
+        isProcessingQueue,
+        onFileUpload,
+        isUploading,
+        onUploadError,
+    ]);
+    // Effect: process whenever queue changes
+    useEffect(() => {
+        processUploadQueue();
+    }, [uploadQueue, isProcessingQueue, processUploadQueue]);
+    // Mock function for subscription status
+    const subscriptionStatus = 'active';
+    // Mock function to check if user can access a model
+    const canAccessModel = (_model) => true;
+    // Handle guide tip close
+    const hideGuideTip = () => {
+        setIsGuideTipShown(false);
+        if (props.onGuideClose) {
+            props.onGuideClose();
+        }
+    };
+    // Handle prompt example selection
+    const handlePromptExampleSelect = (example) => {
+        if (isControlled && controlledOnChange) {
+            controlledOnChange(example.text);
+        }
+        else {
+            setUncontrolledValue(example.text);
+        }
+        if (props.onPromptExampleSelect) {
+            props.onPromptExampleSelect(example);
+        }
+        // Focus the input after selecting an example
+        if (editableRef.current) {
+            editableRef.current.focus();
+        }
+    };
+    // Provide getPendingFiles and clearPendingFiles for ChatInputViewProps
+    const getPendingFiles = useCallback(() => pendingFiles, [pendingFiles]);
+    const clearPendingFiles = useCallback(() => setPendingFiles([]), []);
+    return {
+        onSubmit,
+        getPendingFiles,
+        clearPendingFiles,
+        value,
+        handleChange,
+        handleSubmit,
+        editableRef,
+        fileInputRef,
+        isUploading,
+        uploadProgress,
+        isDraggingOver,
+        uploadedFiles,
+        pendingFiles,
+        removeUploadedFile,
+        setPendingFiles,
+        setUploadedFiles,
+        setIsUploading,
+        startUpload,
+        selectedModel,
+        handleModelChange: setSelectedModel,
+        modelOptions,
+        subscriptionStatus,
+        canAccessModel,
+        handleDragOver,
+        handleDragLeave,
+        isGuideTipShown,
+        hideGuideTip,
+        handlePromptExampleSelect,
+    };
+};
+//# sourceMappingURL=ChatInput.state.js.map

package/dist/native/components/ChatInput/ChatInput/ChatInput.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.state.js","sourceRoot":"","sources":["../../../../../src/components/ChatInput/ChatInput/ChatInput.state.ts"],"names":[],"mappings":"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"}