@app-studio/web 0.9.81 → 0.9.83

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

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+import type { ViewProps } from 'app-studio';
+import type { Variant, Size, Message, ChatWidgetStyles } from './ChatWidget.type';
+/** Props for the ChatWidget component */
+export interface ChatWidgetProps extends Omit<ViewProps, 'size'> {
+    /** Array of messages to display */
+    messages?: Message[];
+    /** Current input value (for controlled component) */
+    inputValue?: string;
+    /** Callback when input value changes */
+    onInputChange?: (value: string) => void;
+    /** Callback when a message is submitted */
+    onSubmit?: (message: string) => void;
+    /** Placeholder text for the input field */
+    inputPlaceholder?: string;
+    /** Disable the input field */
+    disableInput?: boolean;
+    /** Visual variant of the component */
+    variant?: Variant;
+    /** Size of the component */
+    size?: Size;
+    /** Show timestamps on messages */
+    showTimestamps?: boolean;
+    /** Enable attachment button (visual only) */
+    enableAttachments?: boolean;
+    /** Enable context picker button */
+    enableContextPicker?: boolean;
+    /** Selected context elements to display in input area */
+    selectedContextElements?: Array<{
+        id: string;
+        name: string;
+    }>;
+    /** Callback when context picker is requested */
+    onContextPickerClick?: () => void;
+    /** Callback when a context element is removed from input */
+    onRemoveContextElement?: (id: string) => void;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Loading text to display */
+    loadingText?: string;
+    /** Custom styles for different parts of the component */
+    styles?: ChatWidgetStyles;
+    /** Maximum height for the messages container */
+    maxHeight?: string | number;
+}
+/** Props for the ChatWidget view component (includes state) */
+export interface ChatWidgetViewProps extends ChatWidgetProps {
+    /** Internal input value from state */
+    internalInputValue: string;
+    /** Handler for input changes */
+    handleInputChange: (value: string) => void;
+    /** Handler for message submission */
+    handleSubmit: (e?: React.FormEvent) => void;
+    /** Ref for the input element */
+    inputRef: React.RefObject<HTMLTextAreaElement>;
+    /** Ref for the messages container */
+    messagesRef: React.RefObject<HTMLDivElement>;
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ChatWidgetProps } from './ChatWidget.props';
+/**
+ * Custom hook for managing ChatWidget component state
+ */
+export declare function useChatWidgetState(props: ChatWidgetProps): {
+    internalInputValue: string;
+    handleInputChange: (value: string) => void;
+    handleSubmit: (e?: import("react").FormEvent<Element> | undefined) => void;
+    inputRef: import("react").RefObject<HTMLTextAreaElement>;
+    messagesRef: import("react").RefObject<HTMLDivElement>;
+};

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

@@ -0,0 +1,87 @@
+import type { CSSProperties } from 'react';
+import type { Variant, Size } from './ChatWidget.type';
+/** Size mappings for the ChatWidget component */
+export declare const Sizes: Record<Size, CSSProperties>;
+/** Variant mappings for the ChatWidget component */
+export declare const Variants: Record<Variant, CSSProperties>;
+/** Bubble size mappings */
+export declare const BubbleSizes: Record<Size, CSSProperties>;
+/** User bubble styles (blue, aligned right) */
+export declare const UserBubbleStyles: CSSProperties;
+/** Assistant bubble styles (gray, aligned left) */
+export declare const AssistantBubbleStyles: CSSProperties;
+/** Input container styles with glassmorphic effect */
+export declare const InputContainerStyles: CSSProperties;
+/** Default ChatWidget component styles */
+export declare const DefaultChatWidgetStyles: {
+    container: {
+        display: string;
+        flexDirection: "column";
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    messagesContainer: {
+        flex: number;
+        overflowY: "auto";
+        display: string;
+        flexDirection: "column";
+        gap: string;
+        padding: string;
+    };
+    inputContainer: CSSProperties;
+    bubble: {
+        maxWidth: string;
+        position: "relative";
+        wordWrap: "break-word";
+        animation: string;
+    };
+    timestamp: {
+        position: "absolute";
+        top: string;
+        fontSize: string;
+        color: string;
+        backgroundColor: string;
+        padding: string;
+        borderRadius: string;
+        opacity: number;
+        transition: string;
+        boxShadow: string;
+    };
+    input: {
+        flex: number;
+        border: string;
+        outline: string;
+        backgroundColor: string;
+        resize: "none";
+        fontFamily: string;
+        fontSize: string;
+        minHeight: string;
+        maxHeight: string;
+    };
+    sendButton: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        border: string;
+        cursor: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        transition: string;
+        flexShrink: number;
+    };
+    attachmentButton: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        border: string;
+        cursor: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        backgroundColor: string;
+        transition: string;
+        flexShrink: number;
+    };
+};

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

@@ -0,0 +1,54 @@
+/** Variant types for the ChatWidget component */
+export declare type Variant = 'default' | 'glassy' | 'minimal';
+/** Size options for the ChatWidget component */
+export declare type Size = 'sm' | 'md' | 'lg';
+/** Role of the message sender */
+export declare type MessageRole = 'user' | 'assistant';
+/** Attachment type for messages */
+export interface Attachment {
+    id: string;
+    name: string;
+    size?: number;
+    type?: string;
+    url?: string;
+}
+/** Context element referenced in chat */
+export interface ContextElement {
+    id: string;
+    name: string;
+    tagName: string;
+    rect?: DOMRect;
+}
+export declare type MessageType = 'text' | 'error' | 'system' | 'tool';
+/** Message structure */
+export interface Message {
+    id: string;
+    role: MessageRole;
+    content: string;
+    reasoning?: string;
+    messageType?: MessageType;
+    timestamp: Date;
+    attachments?: Attachment[];
+    contextElements?: ContextElement[];
+}
+/** Custom styles for different parts of the ChatWidget component */
+export interface ChatWidgetStyles {
+    container?: any;
+    messagesContainer?: any;
+    inputContainer?: any;
+    bubble?: any;
+    userBubble?: any;
+    assistantBubble?: any;
+    timestamp?: any;
+    input?: any;
+    sendButton?: any;
+    attachmentButton?: any;
+    loadingIndicator?: any;
+    contextChipsContainer?: any;
+    contextPickerButton?: any;
+    reasoningContainer?: any;
+    reasoningContent?: any;
+    errorMessage?: any;
+    systemMessage?: any;
+    toolMessage?: any;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ChatWidgetViewProps } from './ChatWidget.props';
+/**
+ * ChatWidget View Component
+ * Presentational component for the ChatWidget interface
+ */
+declare const ChatWidgetView: React.FC<ChatWidgetViewProps>;
+export default ChatWidgetView;

package/dist/components/ChatWidget/ChatWidget.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ChatWidgetProps } from './ChatWidget/ChatWidget.props';
+/**
+ * ChatWidget Component
+ *
+ * A configurable chat interface component inspired by the ChatWidget toolbar design.
+ * This is a UI-only component without backend/LLM connections.
+ *
+ * @example
+ * ```tsx
+ * <ChatWidget
+ *   messages={messages}
+ *   onSubmit={(message) => console.log(message)}
+ *   variant="glassy"
+ *   size="md"
+ * />
+ * ```
+ */
+export declare const ChatWidgetComponent: React.FC<ChatWidgetProps>;
+export declare const ChatWidget: React.FC<ChatWidgetProps>;

package/dist/components/ChatWidget/Widget/ChatWidgetWidget.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ContextElement } from './useContextSelector';
+import type { Message } from '../ChatWidget/ChatWidget.type';
+interface ChatWidgetWidgetProps {
+    initialMessages?: Message[];
+    onSendMessage?: (message: string, contextElements: ContextElement[]) => void;
+    bubbleSize?: 'sm' | 'md' | 'lg';
+}
+/**
+ * ChatWidget Widget Component
+ * A floating chat widget with DOM element selection capabilities.
+ */
+export declare const ChatWidgetWidget: React.FC<ChatWidgetWidgetProps>;
+export {};

package/dist/components/ChatWidget/Widget/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useContextSelector';
+export * from './ChatWidgetWidget';

package/dist/components/ChatWidget/Widget/useContextSelector.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface ContextElement {
+    id: string;
+    name: string;
+    tagName: string;
+    rect: DOMRect;
+}
+interface UseContextSelectorProps {
+    onSelect: (element: ContextElement) => void;
+    onCancel: () => void;
+    active: boolean;
+}
+export declare function useContextSelector({ onSelect, onCancel, active, }: UseContextSelectorProps): {
+    highlightedElement: ContextElement | null;
+};
+/**
+ * Overlay component to render the highlight box
+ */
+export declare function ContextOverlay({ element, }: {
+    element: ContextElement | null;
+}): React.JSX.Element | null;
+export {};

package/dist/components/EditComponent/EditComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ToolbarItem } from './EditToolbar';
+interface EditComponentProps {
+    targetElement: HTMLElement | null;
+    defaultToolId?: string;
+    onClose?: () => void;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    sideOffset?: number;
+    variant?: 'floating' | 'overlay';
+    items?: ToolbarItem[];
+    onToolAction?: (id: string) => void;
+}
+export declare const EditComponent: React.FC<EditComponentProps>;
+export {};

package/dist/components/EditComponent/EditPanel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface EditPanelProps {
+    onClose?: () => void;
+    activeToolId?: string;
+}
+export declare const EditPanel: React.FC<EditPanelProps>;
+export {};

package/dist/components/EditComponent/EditToolbar.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface ToolbarItem {
+    id: string;
+    icon: string;
+    label?: string;
+    special?: boolean;
+    actionOnly?: boolean;
+}
+interface EditToolbarProps {
+    items: ToolbarItem[];
+    activeToolId?: string;
+    onSelectTool: (id: string) => void;
+    orientation?: 'vertical' | 'horizontal';
+}
+export declare const EditToolbar: React.FC<EditToolbarProps>;
+export {};

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

@@ -0,0 +1,3 @@
+export * from './EditComponent';
+export * from './EditToolbar';
+export * from './EditPanel';

package/dist/components/Form/Password/Password/Password.state.d.ts

@@ -30,7 +30,7 @@ export declare const usePasswordState: (props: PasswordProps) => {
     onFocus?: (() => void) | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     shadow?: import("app-studio").Shadow | import("../../../../utils/elevation").Elevation | import("app-studio").ViewProps | undefined;
-    shape?: "default" | "sharp" | "rounded" | "pillShaped" | undefined;
+    shape?: "default" | "square" | "rounded" | "pill" | undefined;
     views?: import("../../TextField/TextField/TextField.type").TextFieldStyles | undefined;
     variant?: "outline" | "default" | "none" | undefined;
     isVisible: boolean;

package/dist/components/Icon/Icon.d.ts

@@ -387,3 +387,7 @@ export declare const DragHandleLinesIcon: {
     (props: IconProps): React.JSX.Element;
     displayName: string;
 };
+export declare const MousePointerIcon: {
+    (props: IconProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -28,7 +28,7 @@ export interface TabsProps {
      */
     renderContent?: (activeTab: Tab) => React.ReactNode;
     /** Current value for controlled compound component pattern */
-    value?: string;
+    value?: string | number;
     /** Callback when tab value changes in compound component pattern */
     onValueChange?: (value: any) => void;
     /** Children for compound component pattern */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Tab } from './Tabs.type';
 /**
  * Custom hook to manage the state of the active tab.
@@ -6,9 +5,9 @@ import { Tab } from './Tabs.type';
  * @param defaultValue - The optional title of the tab to be initially active.
  * @returns An object containing the current activeTab and a function to update it.
  */
-export declare const useTabsState: (propTabs: Tab[], defaultValue?: string | number | undefined) => {
+export declare const useTabsState: (propTabs: Tab[], defaultValue?: string | number | undefined, value?: string | number | undefined) => {
     activeTab: Tab | undefined;
-    setActiveTab: import("react").Dispatch<import("react").SetStateAction<Tab | undefined>>;
+    setActiveTab: (tab: Tab) => void;
 };
 /**
  * Custom hook to manage the state for compound component pattern.

package/dist/components/index.d.ts

@@ -59,6 +59,8 @@ export * from './Command/Command';
 export * from './Tooltip/Tooltip';
 export * from './ChatInput/ChatInput';
 export * from './Background/Background';
+export * from './ChatWidget/ChatWidget';
+export * from './ChatWidget/Widget/ChatWidgetWidget';
 export * from './Accordion/Accordion/Accordion.props';
 export * from './Alert/Alert/Alert.props';
 export * from './AspectRatio/AspectRatio/AspectRatio.props';
@@ -111,3 +113,4 @@ export * from './Command/Command/Command.props';
 export * from './Tooltip/Tooltip/Tooltip.props';
 export * from './ChatInput/ChatInput/ChatInput.props';
 export * from './Background/Background/Background.props';
+export * from './ChatWidget/ChatWidget/ChatWidget.props';

package/dist/pages/chatwidget.page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function ChatWidgetPage(): React.JSX.Element;
+export default ChatWidgetPage;

package/dist/pages/editComponent.page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const EditComponentPage: () => React.JSX.Element;
+export default EditComponentPage;