@app-studio/components 0.10.17

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

@@ -0,0 +1,32 @@
+import type { ViewProps } from 'app-studio';
+import type { Variant, Size, Message, ChatWidgetStyles } from './ChatWidget.type';
+export interface ChatWidgetProps extends Omit<ViewProps, 'size' | 'onSubmit'> {
+    messages?: Message[];
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    onSubmit?: (message: string) => void;
+    inputPlaceholder?: string;
+    disableInput?: boolean;
+    variant?: Variant;
+    size?: Size;
+    showTimestamps?: boolean;
+    enableAttachments?: boolean;
+    enableContextPicker?: boolean;
+    selectedContextElements?: Array<{
+        id: string;
+        name: string;
+    }>;
+    onContextPickerClick?: () => void;
+    onRemoveContextElement?: (id: string) => void;
+    isLoading?: boolean;
+    loadingText?: string;
+    styles?: ChatWidgetStyles;
+    maxHeight?: string | number;
+}
+export interface ChatWidgetViewProps extends ChatWidgetProps {
+    internalInputValue: string;
+    handleInputChange: (value: string) => void;
+    handleSubmit: (e?: React.FormEvent) => void;
+    inputRef: React.RefObject<HTMLTextAreaElement | null>;
+    messagesRef: React.RefObject<HTMLDivElement | null>;
+}

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

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

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

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

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

@@ -0,0 +1,8 @@
+import type { ChatWidgetProps } from './ChatWidget.props';
+export declare function useChatWidgetState(props: ChatWidgetProps): {
+    internalInputValue: string;
+    handleInputChange: (value: string) => void;
+    handleSubmit: (e?: React.FormEvent) => void;
+    inputRef: import("react").RefObject<HTMLTextAreaElement | null>;
+    messagesRef: import("react").RefObject<HTMLDivElement | null>;
+};

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

@@ -0,0 +1,46 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+// This file defines a custom React hook `useChatWidgetState` to encapsulate the state management and logic for the ChatWidget component, handling input values, message display, and submission, supporting both controlled and uncontrolled component patterns.
+export function useChatWidgetState(props) {
+    const { inputValue, onInputChange, onSubmit, messages = [] } = props;
+    const [internalInputValue, setInternalInputValue] = useState('');
+    const inputRef = useRef(null);
+    const messagesRef = useRef(null);
+    const isControlled = inputValue !== undefined;
+    const currentInputValue = inputValue !== undefined ? inputValue : internalInputValue;
+    const handleInputChange = useCallback((value) => {
+        if (isControlled) {
+            onInputChange?.(value);
+        }
+        else {
+            setInternalInputValue(value);
+        }
+    }, [isControlled, onInputChange]);
+    const handleSubmit = useCallback((e) => {
+        if (e) {
+            e.preventDefault();
+        }
+        const trimmedValue = currentInputValue.trim();
+        if (trimmedValue && onSubmit) {
+            onSubmit(trimmedValue);
+            if (!isControlled) {
+                setInternalInputValue('');
+            }
+            if (inputRef.current) {
+                inputRef.current.style.height = 'auto';
+            }
+        }
+    }, [currentInputValue, onSubmit, isControlled]);
+    useEffect(() => {
+        if (messagesRef.current) {
+            messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+        }
+    }, [messages.length]);
+    return {
+        internalInputValue: currentInputValue,
+        handleInputChange,
+        handleSubmit,
+        inputRef,
+        messagesRef,
+    };
+}
+//# sourceMappingURL=ChatWidget.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidget.state.js","sourceRoot":"","sources":["../../../../../src/components/ChatWidget/ChatWidget/ChatWidget.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,iQAAiQ;AACjQ,MAAM,UAAU,kBAAkB,CAAC,KAAsB;IACvD,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACrE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjE,MAAM,QAAQ,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,UAAU,KAAK,SAAS,CAAC;IAC9C,MAAM,iBAAiB,GACrB,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAC7D,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAa,EAAE,EAAE;QAChB,IAAI,YAAY,EAAE,CAAC;YACjB,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,aAAa,CAAC,CAC9B,CAAC;IACF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,CAAC,EAAE,CAAC;YACN,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;QACD,MAAM,YAAY,GAAG,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAC9C,IAAI,YAAY,IAAI,QAAQ,EAAE,CAAC;YAC7B,QAAQ,CAAC,YAAY,CAAC,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,qBAAqB,CAAC,EAAE,CAAC,CAAC;YAC5B,CAAC;YACD,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACzC,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,iBAAiB,EAAE,QAAQ,EAAE,YAAY,CAAC,CAC5C,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxB,WAAW,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC;QACnE,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IACtB,OAAO;QACL,kBAAkB,EAAE,iBAAiB;QACrC,iBAAiB;QACjB,YAAY;QACZ,QAAQ;QACR,WAAW;KACZ,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,81 @@
+import type { CSSProperties } from 'react';
+import type { Variant, Size } from './ChatWidget.type';
+export declare const Sizes: Record<Size, CSSProperties>;
+export declare const Variants: Record<Variant, CSSProperties>;
+export declare const BubbleSizes: Record<Size, CSSProperties>;
+export declare const UserBubbleStyles: CSSProperties;
+export declare const AssistantBubbleStyles: CSSProperties;
+export declare const InputContainerStyles: CSSProperties;
+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;
+        backgroundColor: 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;
+        border: 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/native/components/ChatWidget/ChatWidget/ChatWidget.style.js

@@ -0,0 +1,155 @@
+// Defines a map of CSS properties for various standard sizes (small, medium, large) used across the chat widget components.
+export const Sizes = {
+    sm: {
+        fontSize: '12px',
+        padding: '8px',
+    },
+    md: {
+        fontSize: '14px',
+        padding: '10px',
+    },
+    lg: {
+        fontSize: '14px',
+        padding: '12px',
+    },
+};
+// Defines a map of CSS properties for different visual variants of the chat widget, such as default, glassy, and minimal designs.
+export const Variants = {
+    default: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #e2e8f0',
+        borderRadius: '12px',
+        boxShadow: '0 12px 32px rgba(15, 23, 42, 0.08)',
+    },
+    glassy: {
+        backgroundColor: 'rgba(255, 255, 255, 0.92)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(226, 232, 240, 0.9)',
+        borderRadius: '12px',
+        boxShadow: '0 12px 32px rgba(15, 23, 42, 0.08)',
+    },
+    minimal: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #e2e8f0',
+        borderRadius: '12px',
+    },
+};
+// Specifies a collection of CSS properties tailored for different sizes of chat message bubbles.
+export const BubbleSizes = {
+    sm: {
+        fontSize: '12px',
+        padding: '8px 10px',
+        borderRadius: '12px',
+    },
+    md: {
+        fontSize: '14px',
+        padding: '10px 12px',
+        borderRadius: '12px',
+    },
+    lg: {
+        fontSize: '14px',
+        padding: '12px 14px',
+        borderRadius: '14px',
+    },
+};
+// Defines the default CSS properties for chat bubbles sent by the user, including background, text color, and alignment.
+export const UserBubbleStyles = {
+    backgroundColor: '#1D4ED8',
+    color: '#ffffff',
+    alignSelf: 'flex-end',
+    borderBottomRightRadius: '4px',
+};
+// Defines the default CSS properties for chat bubbles sent by the assistant, including background, text color, alignment, and border.
+export const AssistantBubbleStyles = {
+    backgroundColor: '#ffffff',
+    color: '#0F172A',
+    alignSelf: 'flex-start',
+    borderBottomLeftRadius: '4px',
+    border: '1px solid #E2E8F0',
+};
+// Defines the CSS properties for the container that holds the chat input field and related controls.
+export const InputContainerStyles = {
+    position: 'relative',
+    backgroundColor: '#ffffff',
+    borderTop: '1px solid #E2E8F0',
+    padding: '12px',
+    display: 'flex',
+    alignItems: 'flex-end',
+    gap: '8px',
+    transition: 'background-color 0.2s ease, border-color 0.2s ease',
+};
+// An comprehensive object containing the default CSS properties for various sub-components of the ChatWidget, including the main container, message area, input, bubbles, timestamps, and buttons.
+export const DefaultChatWidgetStyles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+    },
+    messagesContainer: {
+        flex: 1,
+        overflowY: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        padding: '16px',
+        backgroundColor: '#F8FAFC',
+    },
+    inputContainer: InputContainerStyles,
+    bubble: {
+        maxWidth: '80%',
+        position: 'relative',
+        wordWrap: 'break-word',
+        animation: 'chatBubbleAppear 0.25s ease-out',
+    },
+    timestamp: {
+        position: 'absolute',
+        top: '-24px',
+        fontSize: '12px',
+        color: '#64748B',
+        backgroundColor: 'rgba(255, 255, 255, 0.96)',
+        padding: '2px 8px',
+        borderRadius: '9999px',
+        opacity: 0,
+        transition: 'opacity 0.15s ease-out',
+        border: '1px solid #E2E8F0',
+    },
+    input: {
+        flex: 1,
+        border: 'none',
+        outline: 'none',
+        backgroundColor: 'transparent',
+        resize: 'none',
+        fontFamily: 'inherit',
+        fontSize: '14px',
+        minHeight: '24px',
+        maxHeight: '120px',
+    },
+    sendButton: {
+        width: '36px',
+        height: '36px',
+        borderRadius: '10px',
+        border: 'none',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.2s ease, opacity 0.2s ease',
+        flexShrink: 0,
+    },
+    attachmentButton: {
+        width: '36px',
+        height: '36px',
+        borderRadius: '10px',
+        border: 'none',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'transparent',
+        transition: 'background-color 0.2s ease',
+        flexShrink: 0,
+    },
+};
+//# sourceMappingURL=ChatWidget.style.js.map

package/dist/native/components/ChatWidget/ChatWidget/ChatWidget.style.js.map

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

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

@@ -0,0 +1,47 @@
+export type Variant = 'default' | 'glassy' | 'minimal';
+export type Size = 'sm' | 'md' | 'lg';
+export type MessageRole = 'user' | 'assistant';
+export interface Attachment {
+    id: string;
+    name: string;
+    size?: number;
+    type?: string;
+    url?: string;
+}
+export interface ContextElement {
+    id: string;
+    name: string;
+    tagName: string;
+    rect?: DOMRect;
+}
+export type MessageType = 'text' | 'error' | 'system' | 'tool';
+export interface Message {
+    id: string;
+    role: MessageRole;
+    content: string;
+    reasoning?: string;
+    messageType?: MessageType;
+    timestamp: Date;
+    attachments?: Attachment[];
+    contextElements?: ContextElement[];
+}
+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/native/components/ChatWidget/ChatWidget/ChatWidget.type.js

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

package/dist/native/components/ChatWidget/ChatWidget/ChatWidget.type.js.map

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ChatWidgetViewProps } from './ChatWidget.props';
+declare const ChatWidgetView: React.FC<ChatWidgetViewProps>;
+export default ChatWidgetView;

package/dist/native/components/ChatWidget/ChatWidget/ChatWidget.view.js

@@ -0,0 +1,227 @@
+import React, { useCallback } from 'react';
+import { View, Horizontal, Vertical, Text } from 'app-studio';
+import { DefaultChatWidgetStyles, Sizes, Variants, BubbleSizes, UserBubbleStyles, AssistantBubbleStyles, } from './ChatWidget.style';
+import { SendIcon, AttachmentIcon, LoadingSpinnerIcon, CloseIcon, ErrorIcon, InfoIcon, ChevronIcon, SettingsIcon, MousePointerIcon, } from '../../Icon/Icon';
+// Defines the main `ChatWidgetView` functional component, responsible for rendering the entire chat user interface based on the provided props.
+const ChatWidgetView = ({ messages = [], inputPlaceholder = 'Type a message...', disableInput = false, variant = 'default', size = 'md', showTimestamps = true, enableAttachments = false, enableContextPicker = false, selectedContextElements = [], onContextPickerClick, onRemoveContextElement, isLoading = false, loadingText = 'Loading...', styles = {}, maxHeight = '600px', internalInputValue, handleInputChange, handleSubmit, inputRef, messagesRef, inputValue, onInputChange, ...props }) => {
+    // Calculates the dynamic styles for the main chat widget container, merging default styles with variant-specific and any custom styles provided via props.
+    const containerStyles = {
+        ...DefaultChatWidgetStyles.container,
+        ...Variants[variant],
+        ...styles.container,
+    };
+    // Determines the styles for the message display area, incorporating default styles, a maximum height constraint, and any custom styles provided.
+    const messagesContainerStyles = {
+        ...DefaultChatWidgetStyles.messagesContainer,
+        maxHeight,
+        ...styles.messagesContainer,
+    };
+    // Calculates the styles for the chat input field's container, combining default styles with any custom styles provided via props.
+    const inputContainerStyles = {
+        ...DefaultChatWidgetStyles.inputContainer,
+        ...styles.inputContainer,
+    };
+    // Determines the styles for the chat input textarea, integrating default styles, size-specific adjustments, and custom styles from props.
+    const inputStyles = {
+        ...DefaultChatWidgetStyles.input,
+        ...Sizes[size],
+        ...styles.input,
+    };
+    // Handles the change event for the input textarea, dynamically adjusting its height to fit the content and updating the internal input value.
+    const handleTextareaChange = useCallback((e) => {
+        handleInputChange(e.target.value);
+        e.target.style.height = 'auto';
+        e.target.style.height = `${e.target.scrollHeight}px`;
+    }, [handleInputChange]);
+    // Manages key-down events within the input textarea, specifically preventing the default 'Enter' key behavior for new lines and instead triggering message submission, unless 'Shift + Enter' is pressed.
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    }, [handleSubmit]);
+    // A boolean flag indicating whether the internal input value contains any non-whitespace characters, used to determine if the send button should be enabled.
+    const hasText = internalInputValue.trim().length > 0;
+    const { onSubmit: _, ...viewProps } = props;
+    return (<View {...containerStyles} {...viewProps}>
+      
+      <View ref={messagesRef} {...messagesContainerStyles}>
+        {messages.length === 0 ? (<View display="flex" alignItems="center" justifyContent="center" flex={1} color="color-gray-500">
+            <Text fontSize="14px">No messages yet. Start a conversation.</Text>
+          </View>) : (messages.map((message) => (<ChatBubble key={message.id} message={message} size={size} showTimestamp={showTimestamps} styles={{
+                bubble: styles.bubble,
+                userBubble: styles.userBubble,
+                assistantBubble: styles.assistantBubble,
+                timestamp: styles.timestamp,
+                reasoningContainer: styles.reasoningContainer,
+                reasoningContent: styles.reasoningContent,
+                errorMessage: styles.errorMessage,
+                systemMessage: styles.systemMessage,
+                toolMessage: styles.toolMessage,
+            }}/>)))}
+        
+        {isLoading && (<Horizontal justifyContent="flex-start" alignItems="center" gap={8} marginTop="8px" {...styles.loadingIndicator}>
+            <LoadingSpinnerIcon widthHeight={12} color="currentColor" filled={false} style={{ animation: 'spin 1s linear infinite' }}/>
+            <Text color="color-gray-500" fontSize="14px">
+              {loadingText}
+            </Text>
+          </Horizontal>)}
+      </View>
+      
+      <View>
+        
+        {selectedContextElements.length > 0 && (<Horizontal gap={8} marginBottom="8px" flexWrap="wrap" padding="0 12px 8px" {...styles.contextChipsContainer}>
+            {selectedContextElements.map((element) => (<Horizontal key={element.id} backgroundColor="color-blue-50" borderWidth={1} borderStyle="solid" borderColor="color-blue-200" borderRadius="9999px" padding="6px 10px" alignItems="center" gap={6}>
+                <Text fontSize="12px" color="color-blue-700" fontWeight="500">
+                  {element.name}
+                </Text>
+                <View as="button" type="button" onClick={() => onRemoveContextElement?.(element.id)} cursor="pointer" border="none" backgroundColor="transparent" display="flex" alignItems="center">
+                  <CloseIcon widthHeight={12} color="color-blue-700"/>
+                </View>
+              </Horizontal>))}
+          </Horizontal>)}
+        
+        <View as="form" onSubmit={handleSubmit} {...inputContainerStyles}>
+          
+          {enableAttachments && (<View as="button" type="button" {...DefaultChatWidgetStyles.attachmentButton} {...styles.attachmentButton} _hover={{ backgroundColor: 'color-gray-100' }}>
+              <AttachmentIcon widthHeight={16} color="color-gray-600"/>
+            </View>)}
+          
+          <View as="textarea" ref={inputRef} value={internalInputValue} onChange={handleTextareaChange} onKeyDown={handleKeyDown} placeholder={inputPlaceholder} disabled={disableInput || isLoading} {...inputStyles} style={{
+            ...inputStyles,
+            opacity: disableInput || isLoading ? 0.5 : 1,
+        }}/>
+          <Vertical gap={4} alignItems="center">
+            
+            {enableContextPicker && (<View as="button" type="button" onClick={onContextPickerClick} {...DefaultChatWidgetStyles.attachmentButton} {...styles.contextPickerButton} _hover={{
+                backgroundColor: '#F1F5F9',
+                ...styles.contextPickerButton?._hover,
+            }} title="Select element from page">
+                <MousePointerIcon widthHeight={16} color="color-gray-600"/>
+              </View>)}
+            
+            <View as="button" type="submit" disabled={!hasText || disableInput || isLoading} {...DefaultChatWidgetStyles.sendButton} backgroundColor={hasText ? 'theme-primary' : 'color-gray-300'} _hover={{
+            backgroundColor: hasText ? '#1D4ED8' : 'color-gray-300',
+        }} {...styles.sendButton} style={{
+            cursor: hasText ? 'pointer' : 'not-allowed',
+            opacity: !hasText || disableInput || isLoading ? 0.6 : 1,
+        }}>
+              <SendIcon widthHeight={16} color="color-white" filled={false}/>
+            </View>
+          </Vertical>
+        </View>
+      </View>
+    </View>);
+};
+const ChatBubble = ({ message, size, showTimestamp, styles, }) => {
+    const [showTimestampOverlay, setShowTimestampOverlay] = React.useState(false);
+    const [isReasoningOpen, setIsReasoningOpen] = React.useState(false);
+    const isUser = message.role === 'user';
+    const isSystem = message.messageType === 'system';
+    const isError = message.messageType === 'error';
+    const isTool = message.messageType === 'tool';
+    if (isSystem) {
+        return (<View display="flex" justifyContent="center" padding="8px" width="100%" {...styles.systemMessage}>
+        <Horizontal gap={6} alignItems="center" opacity={0.7}>
+          <InfoIcon widthHeight={12} color="color-gray-600"/>
+          <Text fontSize="12px" color="color-gray-600" fontStyle="italic">
+            {message.content}
+          </Text>
+        </Horizontal>
+      </View>);
+    }
+    if (isTool) {
+        return (<View display="flex" justifyContent="flex-start" padding="8px 16px" width="100%" {...styles.toolMessage}>
+        <Horizontal gap={8} alignItems="center" backgroundColor="color-gray-50" padding="8px 10px" borderRadius="8px" width="100%" borderWidth={1} borderStyle="solid" borderColor="color-gray-200">
+          <SettingsIcon widthHeight={14} color="color-gray-600"/>
+          <Vertical gap={2}>
+            <Text fontSize="11px" fontWeight="600" color="color-gray-700">
+              Tool Usage
+            </Text>
+            <Text fontSize="12px" color="color-gray-600" fontFamily="monospace">
+              {message.content}
+            </Text>
+          </Vertical>
+        </Horizontal>
+      </View>);
+    }
+    const bubbleStyles = {
+        ...DefaultChatWidgetStyles.bubble,
+        ...BubbleSizes[size],
+        ...(isUser ? UserBubbleStyles : AssistantBubbleStyles),
+        ...(isError
+            ? {
+                backgroundColor: 'color-red-50',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: 'color-red-200',
+                color: 'color-red-700',
+            }
+            : {}),
+        ...styles.bubble,
+        ...(isUser ? styles.userBubble : styles.assistantBubble),
+        ...(isError ? styles.errorMessage : {}),
+    };
+    const timestampStyles = {
+        ...DefaultChatWidgetStyles.timestamp,
+        [isUser ? 'right' : 'left']: '8px',
+        opacity: showTimestampOverlay ? 1 : 0,
+        ...styles.timestamp,
+    };
+    return (<View position="relative" onMouseEnter={() => setShowTimestampOverlay(true)} onMouseLeave={() => setShowTimestampOverlay(false)} display="flex" justifyContent={isUser ? 'flex-end' : 'flex-start'}>
+      <View {...bubbleStyles}>
+        
+        {showTimestamp && (<View {...timestampStyles}>
+            {message.timestamp.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+            })}
+          </View>)}
+        
+        {isError && (<Horizontal gap={6} marginBottom="4px" alignItems="center">
+            <ErrorIcon widthHeight={14} color="color-red-700"/>
+            <Text fontWeight="600" fontSize="12px">
+              Error
+            </Text>
+          </Horizontal>)}
+        
+        {message.reasoning && (<View marginBottom="8px" borderBottomWidth={1} borderBottomStyle="solid" borderBottomColor="color-gray-200" paddingBottom="8px" {...styles.reasoningContainer}>
+            <Horizontal as="button" onClick={() => setIsReasoningOpen(!isReasoningOpen)} cursor="pointer" gap={4} alignItems="center" backgroundColor="transparent" border="none" padding={0}>
+              <Text fontSize="11px" color="color-gray-500" fontWeight="600">
+                Thinking Process
+              </Text>
+              <ChevronIcon orientation={isReasoningOpen ? 'down' : 'right'} widthHeight={10} color="color-gray-500"/>
+            </Horizontal>
+            {isReasoningOpen && (<View padding="8px" backgroundColor="color-gray-50" borderRadius="8px" marginTop="4px" borderWidth={1} borderStyle="solid" borderColor="color-gray-200" {...styles.reasoningContent}>
+                <Text fontSize="12px" color="color-gray-600" fontStyle="italic">
+                  {message.reasoning}
+                </Text>
+              </View>)}
+          </View>)}
+        
+        <View whiteSpace="pre-wrap" wordBreak="break-word">
+          {message.content}
+        </View>
+        
+        {message.attachments && message.attachments.length > 0 && (<Vertical gap={4} marginTop="8px">
+            {message.attachments.map((attachment) => (<Horizontal key={attachment.id} gap={6} padding="6px 8px" backgroundColor="color-gray-50" borderRadius="8px" fontSize="12px" borderWidth={1} borderStyle="solid" borderColor="color-gray-200">
+                <AttachmentIcon widthHeight={14}/>
+                <Text>{attachment.name}</Text>
+              </Horizontal>))}
+          </Vertical>)}
+        
+        {message.contextElements && message.contextElements.length > 0 && (<Vertical gap={4} marginTop="8px">
+            <Text fontSize="11px" color="color-black-500" fontWeight="600">
+              Context:
+            </Text>
+            {message.contextElements.map((element) => (<Horizontal key={element.id} gap={6} padding="6px 10px" backgroundColor="color-blue-50" borderRadius="9999px" fontSize="11px" borderWidth={1} borderStyle="solid" borderColor="color-blue-200">
+                <Text color="color-blue-700" fontWeight="500">
+                  {element.name}
+                </Text>
+              </Horizontal>))}
+          </Vertical>)}
+      </View>
+    </View>);
+};
+export default ChatWidgetView;
+//# sourceMappingURL=ChatWidget.view.js.map