@app-studio/web 0.8.96 → 0.9.0

package/dist/components/ChatInput/AttachmentGroup.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { UploadedFile } from './ChatInput/ChatInput.type';
+interface AttachmentGroupProps {
+    files: UploadedFile[];
+    sandboxId?: string;
+    onRemove: (index: number) => void;
+    layout?: 'inline' | 'grid';
+    maxHeight?: string;
+    showPreviews?: boolean;
+    views?: {
+        container?: any;
+        item?: any;
+        name?: any;
+        size?: any;
+        removeButton?: any;
+    };
+}
+export declare const AttachmentGroup: React.FC<AttachmentGroupProps>;
+export {};

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

@@ -0,0 +1,204 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { ChatInputStyles, ModelOption, PromptExample, Shape, Size, UploadedFile, Variant } from './ChatInput.type';
+/**
+ * Props for the ChatInput component
+ */
+export interface ChatInputProps extends ViewProps {
+    /**
+     * 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 an agent is currently running
+     */
+    isAgentRunning?: boolean;
+    /**
+     * Callback function to stop the agent
+     */
+    onStopAgent?: () => 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;
+    /**
+     * Whether to hide the attachment button
+     */
+    hideAttachments?: boolean;
+    /**
+     * 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[];
+    /**
+     * Callback function when a prompt example is selected
+     */
+    onPromptExampleSelect?: (example: PromptExample) => void;
+    /**
+     * Whether to show the reference image button
+     */
+    showReferenceImageButton?: boolean;
+    /**
+     * Callback function when the reference image button is clicked
+     */
+    onReferenceImageClick?: () => 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>;
+    /**
+     * Reference to the file input element
+     */
+    fileInputRef: React.RefObject<HTMLInputElement>;
+    /**
+     * Whether files are being uploaded
+     */
+    isUploading: boolean;
+    /**
+     * Whether the user is dragging files over the input
+     */
+    isDraggingOver: boolean;
+    /**
+     * List of uploaded files
+     */
+    uploadedFiles: UploadedFile[];
+    /**
+     * 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<UploadedFile[]>>;
+    /**
+     * Callback function to set whether files are being uploaded
+     */
+    setIsUploading: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * 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;
+    /**
+     * Whether the reference image modal is shown
+     */
+    isReferenceImageModalShown: boolean;
+    /**
+     * Callback function to toggle the reference image modal
+     */
+    toggleReferenceImageModal: () => void;
+    /**
+     * Callback function to handle prompt example selection
+     */
+    handlePromptExampleSelect: (example: PromptExample) => void;
+}

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

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { ChatInputProps } from './ChatInput.props';
+import { ModelOption, PromptExample, UploadedFile } from './ChatInput.type';
+/**
+ * Custom hook for managing ChatInput state
+ */
+export declare const useChatInputState: (props: ChatInputProps) => {
+    value: string | undefined;
+    handleChange: (newValue: string) => void;
+    handleSubmit: (e: React.FormEvent) => void;
+    editableRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    fileInputRef: import("react").MutableRefObject<HTMLInputElement | null>;
+    isUploading: boolean;
+    isDraggingOver: boolean;
+    uploadedFiles: UploadedFile[];
+    pendingFiles: File[];
+    removeUploadedFile: (index: number) => void;
+    setPendingFiles: import("react").Dispatch<import("react").SetStateAction<File[]>>;
+    setUploadedFiles: import("react").Dispatch<import("react").SetStateAction<UploadedFile[]>>;
+    setIsUploading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    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;
+    isReferenceImageModalShown: boolean;
+    toggleReferenceImageModal: () => void;
+    handlePromptExampleSelect: (example: PromptExample) => void;
+};

package/dist/components/ChatInput/ChatInput/ChatInput.style.d.ts

@@ -0,0 +1,112 @@
+import { ViewProps } from 'app-studio';
+import { Shape, Size, Variant } from './ChatInput.type';
+/**
+ * Default styles for the ChatInput component
+ */
+export declare const DefaultChatInputStyles: {
+    container: {
+        width: string;
+        maxWidth: string;
+        borderRadius: string;
+        backgroundColor: string;
+        transition: string;
+    };
+    content: {
+        width: string;
+        padding: string;
+        borderRadius: string;
+        backgroundColor: string;
+        borderWidth: string;
+        borderStyle: string;
+        borderColor: string;
+    };
+    textarea: {
+        width: string;
+        minHeight: string;
+        maxHeight: string;
+        padding: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        backgroundColor: string;
+        border: string;
+        outline: string;
+        resize: string;
+        overflow: string;
+    };
+    attachments: {
+        display: string;
+        flexWrap: string;
+        gap: string;
+        padding: string;
+    };
+    attachmentItem: {
+        display: string;
+        alignItems: string;
+        gap: string;
+        padding: string;
+        borderRadius: string;
+        backgroundColor: string;
+    };
+    attachmentName: {
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+    };
+    attachmentSize: {
+        fontSize: string;
+        color: string;
+    };
+    attachmentRemove: {
+        padding: string;
+        borderRadius: string;
+        cursor: string;
+        color: string;
+        backgroundColor: string;
+        transition: string;
+    };
+    submitButton: {
+        height: string;
+        minWidth: string;
+        padding: string;
+        borderRadius: string;
+        backgroundColor: string;
+        color: string;
+        transition: string;
+    };
+    fileButton: {
+        height: string;
+        padding: string;
+        borderRadius: string;
+        backgroundColor: string;
+        color: string;
+        transition: string;
+    };
+    modelSelector: {
+        height: string;
+        padding: string;
+        borderRadius: string;
+        backgroundColor: string;
+        color: string;
+        transition: string;
+    };
+    loadingIndicator: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        gap: string;
+        padding: string;
+    };
+};
+/**
+ * Shape styles for the ChatInput component
+ */
+export declare const Shapes: Record<Shape, ViewProps>;
+/**
+ * Size styles for the ChatInput component
+ */
+export declare const Sizes: Record<Size, ViewProps>;
+/**
+ * Variant styles for the ChatInput component
+ */
+export declare const Variants: Record<Variant, ViewProps>;

package/dist/components/ChatInput/ChatInput/ChatInput.type.d.ts

@@ -0,0 +1,67 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Size options for the ChatInput component
+ */
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Shape options for the ChatInput component
+ */
+export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+/**
+ * Variant options for the ChatInput component
+ */
+export declare type Variant = 'default' | 'outline' | 'none';
+/**
+ * Uploaded file interface
+ */
+export interface UploadedFile {
+    name: string;
+    path: string;
+    size: number;
+    type: string;
+    localUrl?: string;
+}
+/**
+ * Prompt example interface
+ */
+export interface PromptExample {
+    id: string;
+    text: string;
+}
+/**
+ * Model option interface
+ */
+export interface ModelOption {
+    id: string;
+    name: string;
+    description?: string;
+    isThinking?: boolean;
+}
+/**
+ * Style customization interface for ChatInput
+ */
+export interface ChatInputStyles {
+    textarea?: ViewProps;
+    container?: ViewProps;
+    content?: ViewProps;
+    editableInput?: ViewProps;
+    header?: ViewProps;
+    title?: ViewProps;
+    guideTip?: ViewProps;
+    guideTipVideo?: ViewProps;
+    guideTipClose?: ViewProps;
+    promptExamples?: ViewProps;
+    promptExampleItem?: ViewProps;
+    referenceImageButton?: ViewProps;
+    referenceImageModal?: ViewProps;
+    attachments?: ViewProps;
+    attachmentItem?: ViewProps;
+    attachmentName?: ViewProps;
+    attachmentSize?: ViewProps;
+    attachmentRemove?: ViewProps;
+    submitButton?: ViewProps;
+    fileButton?: ViewProps;
+    modelSelector?: ViewProps;
+    loadingIndicator?: ViewProps;
+    bottomTip?: ViewProps;
+}

package/dist/components/ChatInput/ChatInput/ChatInput.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChatInputViewProps } from './ChatInput.props';
+declare const ChatInputView: React.FC<ChatInputViewProps>;
+export default ChatInputView;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ChatInputProps } from './ChatInput/ChatInput.props';
+/**
+ * Interface for the ChatInput component's imperative handle
+ */
+export interface ChatInputHandles {
+    /**
+     * Get the pending files
+     */
+    getPendingFiles: () => File[];
+    /**
+     * Clear the pending files
+     */
+    clearPendingFiles: () => void;
+}
+/**
+ * ChatInput component
+ *
+ * A customizable chat input component with file upload support
+ */
+export declare const ChatInput: React.ForwardRefExoticComponent<Pick<ChatInputProps, string | number> & React.RefAttributes<ChatInputHandles>>;

package/dist/components/ChatInput/EditableInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface EditableInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (e: React.FormEvent) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    views?: {
+        container?: any;
+        input?: any;
+    };
+}
+export declare const EditableInput: React.ForwardRefExoticComponent<EditableInputProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ChatInput/FileUploadHandler.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { UploadedFile } from './ChatInput/ChatInput.type';
+interface FileUploadHandlerProps {
+    loading: boolean;
+    disabled: boolean;
+    isAgentRunning: boolean;
+    isUploading: boolean;
+    sandboxId?: string;
+    setPendingFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    setUploadedFiles: React.Dispatch<React.SetStateAction<UploadedFile[]>>;
+    setIsUploading: React.Dispatch<React.SetStateAction<boolean>>;
+    views?: {
+        button?: any;
+        icon?: any;
+        text?: any;
+        tooltip?: any;
+    };
+}
+export declare const FileUploadHandler: React.ForwardRefExoticComponent<FileUploadHandlerProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/ChatInput/GuideTip.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface GuideTipProps {
+    videoUrl?: string;
+    onClose: () => void;
+    views?: {
+        container?: any;
+        video?: any;
+        closeButton?: any;
+    };
+}
+export declare const GuideTip: React.FC<GuideTipProps>;
+export {};

package/dist/components/ChatInput/MessageInput.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ModelOption, UploadedFile } from './ChatInput/ChatInput.type';
+interface MessageInputProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onSubmit: (e: React.FormEvent) => void;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    isAgentRunning?: boolean;
+    onStopAgent?: () => void;
+    isDraggingOver?: boolean;
+    uploadedFiles: UploadedFile[];
+    fileInputRef: React.RefObject<HTMLInputElement>;
+    isUploading: boolean;
+    sandboxId?: string;
+    setPendingFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    setUploadedFiles: React.Dispatch<React.SetStateAction<UploadedFile[]>>;
+    setIsUploading: React.Dispatch<React.SetStateAction<boolean>>;
+    hideAttachments?: boolean;
+    selectedModel: string;
+    onModelChange: (model: string) => void;
+    modelOptions: ModelOption[];
+    subscriptionStatus?: string;
+    canAccessModel: (model: string) => boolean;
+    views?: {
+        container?: any;
+        textarea?: any;
+        buttonGroup?: any;
+        submitButton?: any;
+        submitIcon?: any;
+        modelSelector?: any;
+    };
+}
+export declare const MessageInput: React.ForwardRefExoticComponent<MessageInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/components/ChatInput/PromptExamples.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PromptExample } from './ChatInput/ChatInput.type';
+interface PromptExamplesProps {
+    examples: PromptExample[];
+    onSelect: (example: PromptExample) => void;
+    views?: {
+        container?: any;
+        item?: any;
+        text?: any;
+    };
+}
+export declare const PromptExamples: React.FC<PromptExamplesProps>;
+export {};

package/dist/components/ChatInput/ReferenceImageButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ReferenceImageButtonProps {
+    onClick: () => void;
+    views?: {
+        button?: any;
+        text?: any;
+        icon?: any;
+    };
+}
+export declare const ReferenceImageButton: React.FC<ReferenceImageButtonProps>;
+export {};

package/dist/components/ChatInput/ReferenceImageModal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ReferenceImageModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    views?: {
+        container?: any;
+        content?: any;
+        closeButton?: any;
+    };
+}
+export declare const ReferenceImageModal: React.FC<ReferenceImageModalProps>;
+export {};

package/dist/components/ChatInput/index.d.ts

@@ -0,0 +1,9 @@
+export { ChatInput } from './ChatInput';
+export type { ChatInputHandles } from './ChatInput';
+export { AttachmentGroup } from './AttachmentGroup';
+export { EditableInput } from './EditableInput';
+export { FileUploadHandler } from './FileUploadHandler';
+export { GuideTip } from './GuideTip';
+export { PromptExamples } from './PromptExamples';
+export { ReferenceImageButton } from './ReferenceImageButton';
+export { ReferenceImageModal } from './ReferenceImageModal';