@app-studio/web 0.8.73 → 0.8.76

package/dist/components/Chat/ModelSelector/ModelSelector/ModelSelector.props.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ModelSelector Props
+ */
+import { ViewProps } from 'app-studio';
+import { AIModel, ModelSelectorStyles } from './ModelSelector.type';
+export interface ModelSelectorProps extends ViewProps {
+    /**
+     * List of available models
+     */
+    models: AIModel[];
+    /**
+     * Currently selected model ID
+     */
+    selectedModelId: string;
+    /**
+     * Callback function when a model is selected
+     */
+    onModelSelect: (modelId: string) => void;
+    /**
+     * Whether to show model details
+     */
+    showModelDetails?: boolean;
+    /**
+     * Whether to group models by provider
+     */
+    groupByProvider?: boolean;
+    /**
+     * Whether to show a search input
+     */
+    enableSearch?: boolean;
+    /**
+     * Whether the selector is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom styles for the component
+     */
+    styles?: ModelSelectorStyles;
+}

package/dist/components/Chat/ModelSelector/ModelSelector/ModelSelector.state.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ModelSelector State
+ */
+import { AIModel } from './ModelSelector.type';
+export declare const useModelSelectorState: (models: AIModel[], _selectedModelId: string, enableSearch: boolean) => {
+    isOpen: boolean;
+    searchQuery: string;
+    filteredModels: AIModel[];
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    handleSearchChange: (query: string) => void;
+};

package/dist/components/Chat/ModelSelector/ModelSelector/ModelSelector.style.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ModelSelector Styles
+ */
+import { ViewProps } from 'app-studio';
+export declare const containerStyles: ViewProps;
+export declare const selectedModelStyles: ViewProps;
+export declare const dropdownStyles: ViewProps;
+export declare const searchInputStyles: ViewProps;
+export declare const optionStyles: (isSelected: boolean) => ViewProps;
+export declare const providerGroupStyles: ViewProps;
+export declare const modelInfoStyles: ViewProps;

package/dist/components/Chat/ModelSelector/ModelSelector/ModelSelector.type.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ModelSelector Types
+ */
+import { ViewProps } from 'app-studio';
+export interface AIModel {
+    id: string;
+    name: string;
+    provider: string;
+    description?: string;
+    maxTokens?: number;
+    capabilities?: string[];
+    tags?: string[];
+    isAvailable?: boolean;
+}
+export interface ModelSelectorStyles {
+    container?: ViewProps;
+    dropdown?: ViewProps;
+    option?: ViewProps;
+    selectedModel?: ViewProps;
+    modelInfo?: ViewProps;
+}

package/dist/components/Chat/ModelSelector/ModelSelector/ModelSelector.view.d.ts

@@ -0,0 +1,16 @@
+/**
+ * ModelSelector View
+ */
+import React from 'react';
+import { ModelSelectorProps } from './ModelSelector.props';
+import { AIModel } from './ModelSelector.type';
+interface Props extends ModelSelectorProps {
+    isOpen: boolean;
+    searchQuery: string;
+    filteredModels: AIModel[];
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    handleSearchChange: (query: string) => void;
+}
+export declare const ModelSelectorView: React.FC<Props>;
+export {};

package/dist/components/Chat/ModelSelector/ModelSelector.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ModelSelector Component
+ *
+ * A dropdown component for selecting AI models with filtering and grouping options.
+ */
+import React from 'react';
+import { ModelSelectorProps } from './ModelSelector/ModelSelector.props';
+export declare const ModelSelector: React.FC<ModelSelectorProps>;
+export type { ModelSelectorProps } from './ModelSelector/ModelSelector.props';
+export type { AIModel } from './ModelSelector/ModelSelector.type';

package/dist/components/Chat/PromptInput/PromptInput/PromptInput.props.d.ts

@@ -0,0 +1,59 @@
+/**
+ * PromptInput Props
+ */
+import { ViewProps } from 'app-studio';
+import { PromptInputStyles } from './PromptInput.type';
+export interface PromptInputProps extends ViewProps {
+    /**
+     * Current value of the input
+     */
+    value: string;
+    /**
+     * Callback function when the input value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Callback function when the input is submitted
+     */
+    onSubmit: () => void;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show a loading indicator
+     */
+    isLoading?: boolean;
+    /**
+     * Whether to enable file uploads
+     */
+    enableFileUpload?: boolean;
+    /**
+     * Whether to enable voice input
+     */
+    enableVoiceInput?: boolean;
+    /**
+     * Whether to enable AI suggestions
+     */
+    enableSuggestions?: boolean;
+    /**
+     * Maximum number of rows for the textarea
+     */
+    maxRows?: number;
+    /**
+     * Minimum number of rows for the textarea
+     */
+    minRows?: number;
+    /**
+     * Whether to use a transparent background
+     */
+    transparentBackground?: boolean;
+    /**
+     * Custom styles for the component
+     */
+    styles?: PromptInputStyles;
+}

package/dist/components/Chat/PromptInput/PromptInput/PromptInput.state.d.ts

@@ -0,0 +1,13 @@
+/**
+ * PromptInput State
+ */
+/// <reference types="react" />
+export declare const usePromptInputState: (value: string, onChange: (value: string) => void, onSubmit: () => void, enableSuggestions: boolean) => {
+    suggestions: string[];
+    selectedSuggestionIndex: number;
+    textareaRef: import("react").RefObject<HTMLTextAreaElement>;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleSuggestionClick: (suggestion: string) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+};

package/dist/components/Chat/PromptInput/PromptInput/PromptInput.style.d.ts

@@ -0,0 +1,10 @@
+/**
+ * PromptInput Styles
+ */
+import { ViewProps } from 'app-studio';
+export declare const containerStyles: ViewProps;
+export declare const getInputContainerStyles: (transparentBackground: boolean) => ViewProps;
+export declare const textareaStyles: ViewProps;
+export declare const buttonsContainerStyles: ViewProps;
+export declare const suggestionsContainerStyles: ViewProps;
+export declare const suggestionStyles: (isSelected: boolean) => ViewProps;

package/dist/components/Chat/PromptInput/PromptInput/PromptInput.type.d.ts

@@ -0,0 +1,11 @@
+/**
+ * PromptInput Types
+ */
+import { ViewProps } from 'app-studio';
+export interface PromptInputStyles {
+    container?: ViewProps;
+    textarea?: ViewProps;
+    buttonsContainer?: ViewProps;
+    suggestionsContainer?: ViewProps;
+    suggestion?: ViewProps;
+}

package/dist/components/Chat/PromptInput/PromptInput/PromptInput.view.d.ts

@@ -0,0 +1,16 @@
+/**
+ * PromptInput View
+ */
+import React from 'react';
+import { PromptInputProps } from './PromptInput.props';
+interface Props extends PromptInputProps {
+    suggestions: string[];
+    selectedSuggestionIndex: number;
+    textareaRef: React.RefObject<HTMLTextAreaElement>;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleSuggestionClick: (suggestion: string) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+}
+export declare const PromptInputView: React.FC<Props>;
+export {};

package/dist/components/Chat/PromptInput/PromptInput.d.ts

@@ -0,0 +1,10 @@
+/**
+ * PromptInput Component
+ *
+ * A textarea input component specifically designed for AI chat interfaces.
+ * Includes features like suggestions, file upload, and voice input.
+ */
+import React from 'react';
+import { PromptInputProps } from './PromptInput/PromptInput.props';
+export declare const PromptInput: React.FC<PromptInputProps>;
+export type { PromptInputProps } from './PromptInput/PromptInput.props';

package/dist/components/Chat/SettingsPanel/SettingsPanel/SettingsPanel.props.d.ts

@@ -0,0 +1,31 @@
+/**
+ * SettingsPanel Props
+ */
+import { ViewProps } from 'app-studio';
+import { SettingItem, SettingsPanelStyles } from './SettingsPanel.type';
+export interface SettingsPanelProps extends ViewProps {
+    /**
+     * Title of the settings panel
+     */
+    title?: string;
+    /**
+     * List of setting items
+     */
+    settings: SettingItem[];
+    /**
+     * Callback function when a setting value changes
+     */
+    onSettingChange: (id: string, value: any) => void;
+    /**
+     * Whether to group settings by category
+     */
+    groupByCategory?: boolean;
+    /**
+     * Whether the panel is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom styles for the component
+     */
+    styles?: SettingsPanelStyles;
+}

package/dist/components/Chat/SettingsPanel/SettingsPanel/SettingsPanel.style.d.ts

@@ -0,0 +1,11 @@
+/**
+ * SettingsPanel Styles
+ */
+import { ViewProps } from 'app-studio';
+export declare const containerStyles: ViewProps;
+export declare const headerStyles: ViewProps;
+export declare const contentStyles: ViewProps;
+export declare const settingItemStyles: ViewProps;
+export declare const settingInfoStyles: ViewProps;
+export declare const settingControlStyles: ViewProps;
+export declare const categoryHeaderStyles: ViewProps;

package/dist/components/Chat/SettingsPanel/SettingsPanel/SettingsPanel.type.d.ts

@@ -0,0 +1,30 @@
+/**
+ * SettingsPanel Types
+ */
+import { ViewProps } from 'app-studio';
+export interface SettingItem {
+    id: string;
+    label: string;
+    description?: string;
+    type: 'toggle' | 'select' | 'slider' | 'input' | 'button';
+    value?: any;
+    options?: {
+        label: string;
+        value: any;
+    }[];
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+    onClick?: () => void;
+    category?: string;
+}
+export interface SettingsPanelStyles {
+    container?: ViewProps;
+    header?: ViewProps;
+    content?: ViewProps;
+    settingItem?: ViewProps;
+    settingInfo?: ViewProps;
+    settingControl?: ViewProps;
+    categoryHeader?: ViewProps;
+}

package/dist/components/Chat/SettingsPanel/SettingsPanel/SettingsPanel.view.d.ts

@@ -0,0 +1,6 @@
+/**
+ * SettingsPanel View
+ */
+import React from 'react';
+import { SettingsPanelProps } from './SettingsPanel.props';
+export declare const SettingsPanelView: React.FC<SettingsPanelProps>;

package/dist/components/Chat/SettingsPanel/SettingsPanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * SettingsPanel Component
+ *
+ * A panel for displaying and managing AI application settings.
+ */
+import React from 'react';
+import { SettingsPanelProps } from './SettingsPanel/SettingsPanel.props';
+export declare const SettingsPanel: React.FC<SettingsPanelProps>;
+export type { SettingsPanelProps } from './SettingsPanel/SettingsPanel.props';
+export type { SettingItem } from './SettingsPanel/SettingsPanel.type';

package/dist/components/Chat/ToolSelector/ToolSelector/ToolSelector.props.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ToolSelector Props
+ */
+import { ViewProps } from 'app-studio';
+import { AITool, ToolSelectorStyles } from './ToolSelector.type';
+export interface ToolSelectorProps extends ViewProps {
+    /**
+     * List of available tools
+     */
+    tools: AITool[];
+    /**
+     * Currently selected tool IDs
+     */
+    selectedToolIds: string[];
+    /**
+     * Callback function when a tool is selected or deselected
+     */
+    onToolToggle: (toolId: string) => void;
+    /**
+     * Whether to group tools by category
+     */
+    groupByCategory?: boolean;
+    /**
+     * Whether to show tool descriptions
+     */
+    showDescriptions?: boolean;
+    /**
+     * Whether to show tool icons
+     */
+    showIcons?: boolean;
+    /**
+     * Whether the selector is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom styles for the component
+     */
+    styles?: ToolSelectorStyles;
+}

package/dist/components/Chat/ToolSelector/ToolSelector/ToolSelector.style.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ToolSelector Styles
+ */
+import { ViewProps } from 'app-studio';
+export declare const containerStyles: ViewProps;
+export declare const toolsContainerStyles: ViewProps;
+export declare const toolItemStyles: (isSelected: boolean, isEnabled: boolean) => ViewProps;
+export declare const toolIconStyles: ViewProps;
+export declare const toolInfoStyles: ViewProps;
+export declare const categoryHeaderStyles: ViewProps;

package/dist/components/Chat/ToolSelector/ToolSelector/ToolSelector.type.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ToolSelector Types
+ */
+import { ViewProps } from 'app-studio';
+export interface AITool {
+    id: string;
+    name: string;
+    description?: string;
+    icon?: string;
+    category?: string;
+    isEnabled?: boolean;
+}
+export interface ToolSelectorStyles {
+    container?: ViewProps;
+    toolsContainer?: ViewProps;
+    toolItem?: ViewProps;
+    toolIcon?: ViewProps;
+    toolInfo?: ViewProps;
+    categoryHeader?: ViewProps;
+}

package/dist/components/Chat/ToolSelector/ToolSelector/ToolSelector.view.d.ts

@@ -0,0 +1,6 @@
+/**
+ * ToolSelector View
+ */
+import React from 'react';
+import { ToolSelectorProps } from './ToolSelector.props';
+export declare const ToolSelectorView: React.FC<ToolSelectorProps>;

package/dist/components/Chat/ToolSelector/ToolSelector.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ToolSelector Component
+ *
+ * A component for selecting AI tools and capabilities to use in a conversation.
+ */
+import React from 'react';
+import { ToolSelectorProps } from './ToolSelector/ToolSelector.props';
+export declare const ToolSelector: React.FC<ToolSelectorProps>;
+export type { ToolSelectorProps } from './ToolSelector/ToolSelector.props';
+export type { AITool } from './ToolSelector/ToolSelector.type';

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

@@ -0,0 +1,16 @@
+/**
+ * App Studio Components for AI Applications
+ *
+ * This module exports a collection of components specifically designed
+ * for building AI-powered applications.
+ */
+export * from './ChatInterface/ChatInterface';
+export * from './MessageBubble/MessageBubble';
+export * from './PromptInput/PromptInput';
+export * from './ModelSelector/ModelSelector';
+export * from './AIResponseDisplay/AIResponseDisplay';
+export * from './LoadingIndicator/LoadingIndicator';
+export * from './ToolSelector/ToolSelector';
+export * from './SettingsPanel/SettingsPanel';
+export * from './FileUploader/FileUploader';
+export * from './CodeBlock/CodeBlock';

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

@@ -0,0 +1,162 @@
+import { ViewProps } from 'app-studio';
+import React from 'react';
+import { CommandGroup, CommandItem, CommandSize, CommandStyles, CommandVariant } from './Command.type';
+export interface CommandProps {
+    /**
+     * Whether the command palette is open
+     */
+    open: boolean;
+    /**
+     * Callback when the open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Command groups to display
+     */
+    groups?: CommandGroup[];
+    /**
+     * Flat list of commands (alternative to groups)
+     */
+    commands?: CommandItem[];
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+    /**
+     * Size of the command palette
+     */
+    size?: CommandSize;
+    /**
+     * Visual variant of the command palette
+     */
+    variant?: CommandVariant;
+    /**
+     * Custom filter function for searching commands
+     */
+    filter?: (value: string, item: CommandItem) => boolean;
+    /**
+     * Custom empty state when no commands match the search
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * Custom footer content
+     */
+    footer?: React.ReactNode;
+    /**
+     * Custom styles for different parts of the command palette
+     */
+    views?: CommandStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface CommandInputProps {
+    /**
+     * Value of the search input
+     */
+    value: string;
+    /**
+     * Callback when the value changes
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+    /**
+     * Custom styles for the input
+     */
+    views?: {
+        container?: ViewProps;
+        input?: ViewProps;
+    };
+}
+export interface CommandListProps {
+    /**
+     * Children to render in the list
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the list
+     */
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface CommandGroupProps {
+    /**
+     * Heading for the group
+     */
+    heading: string;
+    /**
+     * Children to render in the group
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the group
+     */
+    views?: {
+        container?: ViewProps;
+        heading?: ViewProps;
+    };
+}
+export interface CommandItemProps {
+    /**
+     * Command item data
+     */
+    item: CommandItem;
+    /**
+     * Whether the item is selected
+     */
+    selected?: boolean;
+    /**
+     * Callback when the item is selected
+     */
+    onSelect?: () => void;
+    /**
+     * Custom styles for the item
+     */
+    views?: {
+        container?: ViewProps;
+        icon?: ViewProps;
+        content?: ViewProps;
+        name?: ViewProps;
+        description?: ViewProps;
+        shortcut?: ViewProps;
+    };
+}
+export interface CommandEmptyProps {
+    /**
+     * Children to render in the empty state
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom styles for the empty state
+     */
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface CommandType extends React.FC<CommandProps> {
+    /**
+     * Input component for the command palette
+     */
+    Input: React.FC<CommandInputProps>;
+    /**
+     * List component for the command palette
+     */
+    List: React.FC<CommandListProps>;
+    /**
+     * Group component for the command palette
+     */
+    Group: React.FC<CommandGroupProps>;
+    /**
+     * Item component for the command palette
+     */
+    Item: React.FC<CommandItemProps>;
+    /**
+     * Empty component for the command palette
+     */
+    Empty: React.FC<CommandEmptyProps>;
+}

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { CommandGroup, CommandItem } from './Command.type';
+export interface CommandStateProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    groups?: CommandGroup[];
+    commands?: CommandItem[];
+    filter?: (value: string, item: CommandItem) => boolean;
+}
+export declare const useCommandState: ({ open, onOpenChange, groups, commands, filter, }: CommandStateProps) => {
+    search: string;
+    setSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+    selectedIndex: number;
+    setSelectedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    filteredCommands: CommandItem[];
+    filteredGroups: CommandGroup[];
+    listRef: import("react").RefObject<HTMLDivElement>;
+};

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

@@ -0,0 +1,18 @@
+import { ViewProps } from 'app-studio';
+import { CommandSize, CommandVariant } from './Command.type';
+export declare const CommandSizes: Record<CommandSize, ViewProps>;
+export declare const CommandVariants: Record<CommandVariant, ViewProps>;
+export declare const CommandInputStyles: ViewProps;
+export declare const CommandListStyles: ViewProps;
+export declare const CommandGroupStyles: ViewProps;
+export declare const CommandGroupHeadingStyles: ViewProps;
+export declare const CommandItemStyles: ViewProps;
+export declare const CommandItemSelectedStyles: ViewProps;
+export declare const CommandItemDisabledStyles: ViewProps;
+export declare const CommandItemIconStyles: ViewProps;
+export declare const CommandItemContentStyles: ViewProps;
+export declare const CommandItemNameStyles: ViewProps;
+export declare const CommandItemDescriptionStyles: ViewProps;
+export declare const CommandItemShortcutStyles: ViewProps;
+export declare const CommandEmptyStyles: ViewProps;
+export declare const CommandFooterStyles: ViewProps;