@app-studio/web 0.9.82 → 0.9.83

package/dist/web.umd.development.js

@@ -775,6 +775,9 @@
   var DragHandleLinesIcon = /*#__PURE__*/createIcon('grip-horizontal', {
     filled: false
   });
+  var MousePointerIcon = /*#__PURE__*/createIcon('mouse-pointer-2', {
+    filled: false
+  });
 
   /**
    * Alert Styles
@@ -3280,7 +3283,7 @@
     var mainColorKey = (_ref6 = backgroundColor != null ? backgroundColor : color) != null ? _ref6 : 'theme.button.background';
     // Decide which theme token to resolve based on state
     var stateColorKey = isDisabled ? 'theme.disabled' : isLoading ? 'theme.loading' : mainColorKey;
-    // Resolve to actual hex color. 
+    // Resolve to actual hex color.
     // If 'theme.button.background' isn't defined, it falls back to 'theme.primary'
     var mainTone = getColorHex(stateColorKey);
     if (mainTone === 'theme.button.background' || mainTone === 'theme.loading') {
@@ -16619,40 +16622,46 @@
    * @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.
    */
-  var useTabsState = (propTabs, defaultValue) => {
+  var useTabsState = (propTabs, defaultValue, value) => {
+    // Helper to extract the identifier (value or title) from a tab
+    var getTabId = tab => tab.value !== undefined ? tab.value : tab.title;
     // Find the initial tab based on defaultValue, or default to the first tab.
-    // Ensure propTabs is not empty before accessing index 0.
     var findInitialTab = () => {
       if (!propTabs || propTabs.length === 0) {
-        return undefined; // No tabs, no initial active tab
+        return undefined;
       }
       if (defaultValue !== undefined) {
-        var foundTab = propTabs.find(tab => tab.title === defaultValue);
+        var foundTab = propTabs.find(tab => getTabId(tab) === defaultValue);
         if (foundTab) {
           return foundTab;
         }
-        // Warn if defaultValue is provided but not found
-        // console.warn(
-        //   `Tabs: defaultValue "${defaultValue}" not found in tabs. Defaulting to the first tab.`
-        // );
       }
-      return propTabs[0]; // Default to the first tab
+      return propTabs[0];
     };
-    var [activeTab, setActiveTab] = React.useState(findInitialTab());
-    // Effect to update the active tab if the defaultValue prop changes
-    // or if the tabs array changes and the current active tab is no longer valid.
+    var [internalActiveTab, setInternalActiveTab] = React.useState(findInitialTab());
+    // Determine the effective active tab
+    // In controlled mode (value provided), find the tab matching value.
+    // In uncontrolled mode, use internal state.
+    var activeTab = value !== undefined ? propTabs.find(tab => getTabId(tab) === value) : internalActiveTab;
+    var setActiveTab = tab => {
+      // Only update internal state if uncontrolled
+      if (value === undefined) {
+        setInternalActiveTab(tab);
+      }
+    };
+    // Effect to update internal active tab if defaultValue changes or tabs change
     React.useEffect(() => {
+      if (value !== undefined) return; // Skip logic if controlled
       var newInitialTab = findInitialTab();
-      // Update only if the calculated initial tab is different from the current active tab
-      // or if the current active tab is no longer in the list (and there are tabs)
-      var currentActiveTabStillValid = activeTab && propTabs.some(t => t.title === activeTab.title);
-      if (newInitialTab && (!currentActiveTabStillValid || defaultValue !== undefined && (activeTab == null ? void 0 : activeTab.title) !== defaultValue)) {
-        setActiveTab(newInitialTab);
-      } else if (!newInitialTab && activeTab) {
-        // Handle case where all tabs are removed
-        setActiveTab(undefined);
-      }
-    }, [propTabs, defaultValue]); // Rerun when tabs or initial title changes
+      var currentActiveTabStillValid = internalActiveTab && propTabs.some(t => getTabId(t) === getTabId(internalActiveTab));
+      // If current tab is invalid, or if defaultValue changed and suggests a different tab
+      // (Note: The original logic forced reset on defaultValue change, we keep that behavior)
+      if (newInitialTab && (!currentActiveTabStillValid || defaultValue !== undefined && internalActiveTab && getTabId(internalActiveTab) !== defaultValue)) {
+        setInternalActiveTab(newInitialTab);
+      } else if (!newInitialTab && internalActiveTab) {
+        setInternalActiveTab(undefined);
+      }
+    }, [propTabs, defaultValue]); // Remove internalActiveTab dependency to avoid loops, though it shouldn't cause one if guarded
     return {
       activeTab,
       setActiveTab
@@ -16739,6 +16748,10 @@
     var getGap = () => {
       return ['top', 'bottom'].includes(iconPosition) ? '4px' : '8px';
     };
+    // Clone icon to apply active styles (e.g. bold stroke) if valid
+    var iconElement = tab.icon && /*#__PURE__*/React__default.isValidElement(tab.icon) ? /*#__PURE__*/React__default.cloneElement(tab.icon, {
+      strokeWidth: isActive ? 2.5 : 2
+    }) : tab.icon;
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "div",
       role: "tab",
@@ -16749,7 +16762,23 @@
       gap: getGap(),
       onClick: onClick,
       "data-state": isActive ? 'active' : 'inactive'
-    }), tab.icon && /*#__PURE__*/React__default.createElement(appStudio.Element, null, tab.icon), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textStyles), tab.title));
+    }), iconElement && (/*#__PURE__*/React__default.createElement(appStudio.Element, {
+      key: isActive ? 'active-icon' : 'inactive-icon'
+    }, iconElement)), /*#__PURE__*/React__default.createElement(appStudio.Element, {
+      display: "grid",
+      alignItems: "center",
+      justifyContent: "center"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textStyles, {
+      fontWeight: "600",
+      visibility: "hidden",
+      gridColumn: "1",
+      gridRow: "1",
+      "aria-hidden": "true"
+    }), tab.title), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textStyles, {
+      fontWeight: isActive ? '600' : '500',
+      gridColumn: "1",
+      gridRow: "1"
+    }), tab.title)));
   };
 
   /**
@@ -16785,7 +16814,7 @@
         borderBottomColor: "color.gray.200"
       }, views.headerTabs), tabs.map(tab => {
         // Determine if the current tab in the loop is the active one
-        var isActive = tab.title === activeTab.title;
+        var isActive = (tab.value !== undefined ? tab.value : tab.title) === (activeTab.value !== undefined ? activeTab.value : activeTab.title);
         // Prepare the onClick handler for this specific tab
         var onClick = () => handleTabClick(tab);
         // Use the custom renderTab function if provided
@@ -16904,7 +16933,7 @@
     // For compound component pattern
     var compoundState = useTabsCompoundState(defaultValue, value, onValueChange);
     // For data-driven pattern
-    var dataState = useTabsState(tabs || [], defaultValue);
+    var dataState = useTabsState(tabs || [], defaultValue, value);
     // If using compound component pattern (children provided)
     if (children) {
       return /*#__PURE__*/React__default.createElement(TabsContext.Provider, {
@@ -16915,9 +16944,9 @@
     if (tabs) {
       // Handler function to change the active tab and trigger the callback
       var handleTabClick = tab => {
-        var _dataState$activeTab;
+        var getTabId = t => t.value !== undefined ? t.value : t.title;
         // Only update state and call callback if the clicked tab is different from the current one
-        if (((_dataState$activeTab = dataState.activeTab) == null ? void 0 : _dataState$activeTab.title) !== tab.title) {
+        if (!dataState.activeTab || getTabId(dataState.activeTab) !== getTabId(tab)) {
           dataState.setActiveTab(tab);
           // Call the onTabChange callback if provided
           if (onTabChange) {
@@ -26260,6 +26289,898 @@
   });
   Background.displayName = 'Background';
 
+  /**
+   * Custom hook for managing ChatWidget component state
+   */
+  function useChatWidgetState(props) {
+    var {
+      inputValue,
+      onInputChange,
+      onSubmit,
+      messages = []
+    } = props;
+    // Internal state for uncontrolled input
+    var [internalInputValue, setInternalInputValue] = React.useState('');
+    // Refs
+    var inputRef = React.useRef(null);
+    var messagesRef = React.useRef(null);
+    // Determine if the component is controlled
+    var isControlled = inputValue !== undefined;
+    // Get the current input value
+    var currentInputValue = inputValue !== undefined ? inputValue : internalInputValue;
+    // Handle input changes
+    var handleInputChange = React.useCallback(value => {
+      if (isControlled) {
+        onInputChange == null || onInputChange(value);
+      } else {
+        setInternalInputValue(value);
+      }
+    }, [isControlled, onInputChange]);
+    // Handle message submission
+    var handleSubmit = React.useCallback(e => {
+      if (e) {
+        e.preventDefault();
+      }
+      var trimmedValue = currentInputValue.trim();
+      if (trimmedValue && onSubmit) {
+        onSubmit(trimmedValue);
+        // Clear input after submission (only for uncontrolled)
+        if (!isControlled) {
+          setInternalInputValue('');
+        }
+        // Reset textarea height
+        if (inputRef.current) {
+          inputRef.current.style.height = 'auto';
+        }
+      }
+    }, [currentInputValue, onSubmit, isControlled]);
+    // Auto-scroll to bottom when new messages arrive
+    React.useEffect(() => {
+      if (messagesRef.current) {
+        messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+      }
+    }, [messages.length]);
+    return {
+      internalInputValue: currentInputValue,
+      handleInputChange,
+      handleSubmit,
+      inputRef,
+      messagesRef
+    };
+  }
+
+  /** Size mappings for the ChatWidget component */
+  var Sizes$5 = {
+    sm: {
+      fontSize: '13px',
+      padding: '8px'
+    },
+    md: {
+      fontSize: '14px',
+      padding: '12px'
+    },
+    lg: {
+      fontSize: '16px',
+      padding: '16px'
+    }
+  };
+  /** Variant mappings for the ChatWidget component */
+  var Variants$4 = {
+    default: {
+      backgroundColor: '#ffffff',
+      border: '1px solid #e5e7eb',
+      borderRadius: '16px'
+    },
+    glassy: {
+      backgroundColor: 'rgba(255, 255, 255, 0.6)',
+      backdropFilter: 'blur(12px)',
+      border: '1px solid rgba(0, 0, 0, 0.1)',
+      borderRadius: '16px',
+      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+    },
+    minimal: {
+      backgroundColor: 'transparent',
+      border: 'none'
+    }
+  };
+  /** Bubble size mappings */
+  var BubbleSizes = {
+    sm: {
+      fontSize: '13px',
+      padding: '6px 10px',
+      borderRadius: '14px'
+    },
+    md: {
+      fontSize: '14px',
+      padding: '8px 12px',
+      borderRadius: '16px'
+    },
+    lg: {
+      fontSize: '16px',
+      padding: '10px 16px',
+      borderRadius: '18px'
+    }
+  };
+  /** User bubble styles (blue, aligned right) */
+  var UserBubbleStyles = {
+    backgroundColor: 'rgba(37, 99, 235, 0.9)',
+    color: '#ffffff',
+    alignSelf: 'flex-end',
+    borderBottomRightRadius: '4px',
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'
+  };
+  /** Assistant bubble styles (gray, aligned left) */
+  var AssistantBubbleStyles = {
+    backgroundColor: 'rgba(244, 244, 245, 0.6)',
+    color: '#18181b',
+    alignSelf: 'flex-start',
+    borderBottomLeftRadius: '4px',
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'
+  };
+  /** Input container styles with glassmorphic effect */
+  var InputContainerStyles = {
+    position: 'relative',
+    backgroundColor: 'rgba(244, 244, 245, 0.05)',
+    backdropFilter: 'blur(12px)',
+    borderRadius: '16px',
+    border: '1px solid rgba(0, 0, 0, 0.1)',
+    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    padding: '8px 12px',
+    display: 'flex',
+    alignItems: 'flex-end',
+    gap: '8px',
+    transition: 'all 0.2s ease'
+  };
+  /** Default ChatWidget component styles */
+  var DefaultChatWidgetStyles = {
+    container: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    },
+    messagesContainer: {
+      flex: 1,
+      overflowY: 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      padding: '16px'
+    },
+    inputContainer: InputContainerStyles,
+    bubble: {
+      maxWidth: '80%',
+      position: 'relative',
+      wordWrap: 'break-word',
+      animation: 'chatBubbleAppear 0.3s ease-out'
+    },
+    timestamp: {
+      position: 'absolute',
+      top: '-24px',
+      fontSize: '12px',
+      color: 'rgba(0, 0, 0, 0.5)',
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      padding: '2px 8px',
+      borderRadius: '9999px',
+      opacity: 0,
+      transition: 'opacity 0.15s ease-out',
+      boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
+    },
+    input: {
+      flex: 1,
+      border: 'none',
+      outline: 'none',
+      backgroundColor: 'transparent',
+      resize: 'none',
+      fontFamily: 'inherit',
+      fontSize: '14px',
+      minHeight: '24px',
+      maxHeight: '120px'
+    },
+    sendButton: {
+      width: '32px',
+      height: '32px',
+      borderRadius: '50%',
+      border: 'none',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transition: 'all 0.2s ease',
+      flexShrink: 0
+    },
+    attachmentButton: {
+      width: '32px',
+      height: '32px',
+      borderRadius: '50%',
+      border: 'none',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'transparent',
+      transition: 'background-color 0.2s ease',
+      flexShrink: 0
+    }
+  };
+
+  var _excluded$1p = ["messages", "inputPlaceholder", "disableInput", "variant", "size", "showTimestamps", "enableAttachments", "enableContextPicker", "selectedContextElements", "onContextPickerClick", "onRemoveContextElement", "isLoading", "loadingText", "styles", "maxHeight", "internalInputValue", "handleInputChange", "handleSubmit", "inputRef", "messagesRef"],
+    _excluded2$n = ["onSubmit"];
+  /**
+   * ChatWidget View Component
+   * Presentational component for the ChatWidget interface
+   */
+  var ChatWidgetView = _ref => {
+    var _styles$contextPicker;
+    var {
+        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
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1p);
+    // Combine styles
+    var containerStyles = Object.assign({}, DefaultChatWidgetStyles.container, Variants$4[variant], styles.container);
+    var messagesContainerStyles = Object.assign({}, DefaultChatWidgetStyles.messagesContainer, {
+      maxHeight
+    }, styles.messagesContainer);
+    var inputContainerStyles = Object.assign({}, DefaultChatWidgetStyles.inputContainer, styles.inputContainer);
+    var inputStyles = Object.assign({}, DefaultChatWidgetStyles.input, Sizes$5[size], styles.input);
+    // Auto-resize textarea
+    var handleTextareaChange = React.useCallback(e => {
+      handleInputChange(e.target.value);
+      // Auto-resize
+      e.target.style.height = 'auto';
+      e.target.style.height = e.target.scrollHeight + "px";
+    }, [handleInputChange]);
+    // Handle Enter key to submit
+    var handleKeyDown = React.useCallback(e => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    }, [handleSubmit]);
+    var hasText = internalInputValue.trim().length > 0;
+    // Separate onSubmit from other props to avoid type conflict
+    var viewProps = _objectWithoutPropertiesLoose(props, _excluded2$n);
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, containerStyles, viewProps), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: messagesRef
+    }, messagesContainerStyles), messages.length === 0 ? (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1,
+      color: "color.gray.400"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontSize: "14px"
+    }, "No messages yet. Start a conversation!"))) : messages.map(message => (/*#__PURE__*/React__default.createElement(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 && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      justifyContent: "flex-start",
+      alignItems: "center",
+      gap: 8,
+      marginTop: "8px"
+    }, styles.loadingIndicator), /*#__PURE__*/React__default.createElement(LoadingSpinnerIcon, {
+      widthHeight: 12,
+      color: "currentColor",
+      filled: false,
+      style: {
+        animation: 'spin 1s linear infinite'
+      }
+    }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      color: "color.gray.500",
+      fontSize: "14px"
+    }, loadingText)))), /*#__PURE__*/React__default.createElement(appStudio.View, null, selectedContextElements.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      gap: 8,
+      marginBottom: "8px",
+      flexWrap: "wrap",
+      paddingHorizontal: "20px"
+    }, styles.contextChipsContainer), selectedContextElements.map(element => (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      key: element.id,
+      backgroundColor: "rgba(37, 99, 235, 0.1)",
+      border: "1px solid rgba(37, 99, 235, 0.2)",
+      borderRadius: "6px",
+      padding: "4px 8px",
+      alignItems: "center",
+      gap: 6
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontSize: "12px",
+      color: "color.blue.700",
+      fontWeight: "500"
+    }, element.name), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "button",
+      type: "button",
+      onClick: () => onRemoveContextElement == null ? void 0 : onRemoveContextElement(element.id),
+      cursor: "pointer",
+      border: "none",
+      backgroundColor: "transparent",
+      display: "flex",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+      widthHeight: 12,
+      color: "color.blue.700"
+    }))))))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      as: "form",
+      onSubmit: handleSubmit
+    }, inputContainerStyles), enableAttachments && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      as: "button",
+      type: "button"
+    }, DefaultChatWidgetStyles.attachmentButton, styles.attachmentButton, {
+      _hover: {
+        backgroundColor: 'color.gray.100'
+      }
+    }), /*#__PURE__*/React__default.createElement(AttachmentIcon, {
+      widthHeight: 16,
+      color: "color.gray.600"
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      as: "textarea",
+      ref: inputRef,
+      value: internalInputValue,
+      onChange: handleTextareaChange,
+      onKeyDown: handleKeyDown,
+      placeholder: inputPlaceholder,
+      disabled: disableInput || isLoading
+    }, inputStyles, {
+      style: Object.assign({}, inputStyles, {
+        opacity: disableInput || isLoading ? 0.5 : 1
+      })
+    })), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+      gap: 4,
+      alignItems: "center"
+    }, enableContextPicker && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      as: "button",
+      type: "button",
+      onClick: onContextPickerClick
+    }, DefaultChatWidgetStyles.attachmentButton, styles.contextPickerButton, {
+      _hover: Object.assign({
+        backgroundColor: 'color.gray.100'
+      }, (_styles$contextPicker = styles.contextPickerButton) == null ? void 0 : _styles$contextPicker._hover),
+      title: "Select element from page"
+    }), /*#__PURE__*/React__default.createElement(MousePointerIcon, {
+      widthHeight: 16,
+      color: "color.gray.600"
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      as: "button",
+      type: "submit",
+      disabled: !hasText || disableInput || isLoading
+    }, DefaultChatWidgetStyles.sendButton, {
+      backgroundColor: hasText ? 'theme.primary' : 'color.gray.300',
+      _hover: {
+        backgroundColor: hasText ? 'color.blue.600' : 'color.gray.300'
+      }
+    }, styles.sendButton, {
+      style: {
+        cursor: hasText ? 'pointer' : 'not-allowed',
+        opacity: !hasText || disableInput || isLoading ? 0.6 : 1
+      }
+    }), /*#__PURE__*/React__default.createElement(SendIcon, {
+      widthHeight: 16,
+      color: "color.white",
+      filled: false
+    }))))));
+  };
+  var ChatBubble = _ref2 => {
+    var {
+      message,
+      size,
+      showTimestamp,
+      styles
+    } = _ref2;
+    var [showTimestampOverlay, setShowTimestampOverlay] = React__default.useState(false);
+    var [isReasoningOpen, setIsReasoningOpen] = React__default.useState(false);
+    var isUser = message.role === 'user';
+    var isSystem = message.messageType === 'system';
+    var isError = message.messageType === 'error';
+    var isTool = message.messageType === 'tool';
+    // System Message Rendering
+    if (isSystem) {
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        display: "flex",
+        justifyContent: "center",
+        padding: "8px",
+        width: "100%"
+      }, styles.systemMessage), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+        gap: 6,
+        alignItems: "center",
+        opacity: 0.7
+      }, /*#__PURE__*/React__default.createElement(InfoIcon, {
+        widthHeight: 12,
+        color: "color.gray.600"
+      }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+        fontSize: "12px",
+        color: "color.gray.600",
+        fontStyle: "italic"
+      }, message.content)));
+    }
+    // Tool Message Rendering
+    if (isTool) {
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        display: "flex",
+        justifyContent: "flex-start",
+        padding: "8px 16px",
+        width: "100%"
+      }, styles.toolMessage), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+        gap: 8,
+        alignItems: "center",
+        backgroundColor: "rgba(0,0,0,0.03)",
+        padding: "8px",
+        borderRadius: "8px",
+        width: "100%",
+        border: "1px solid rgba(0,0,0,0.05)"
+      }, /*#__PURE__*/React__default.createElement(SettingsIcon, {
+        widthHeight: 14,
+        color: "color.gray.600"
+      }), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+        gap: 2
+      }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+        fontSize: "11px",
+        fontWeight: "600",
+        color: "color.gray.700"
+      }, "Tool Usage"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+        fontSize: "12px",
+        color: "color.gray.600",
+        fontFamily: "monospace"
+      }, message.content))));
+    }
+    // Bubble Styles construction
+    var bubbleStyles = Object.assign({}, DefaultChatWidgetStyles.bubble, BubbleSizes[size], isUser ? UserBubbleStyles : AssistantBubbleStyles, isError ? {
+      backgroundColor: 'rgba(239, 68, 68, 0.1)',
+      border: '1px solid rgba(239, 68, 68, 0.2)',
+      color: '#b91c1c'
+    } : {}, styles.bubble, isUser ? styles.userBubble : styles.assistantBubble, isError ? styles.errorMessage : {});
+    var timestampStyles = Object.assign({}, DefaultChatWidgetStyles.timestamp, {
+      [isUser ? 'right' : 'left']: '8px',
+      opacity: showTimestampOverlay ? 1 : 0
+    }, styles.timestamp);
+    return /*#__PURE__*/React__default.createElement(appStudio.View, {
+      position: "relative",
+      onMouseEnter: () => setShowTimestampOverlay(true),
+      onMouseLeave: () => setShowTimestampOverlay(false),
+      display: "flex",
+      justifyContent: isUser ? 'flex-end' : 'flex-start'
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, bubbleStyles), showTimestamp && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, timestampStyles), message.timestamp.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit'
+    }))), isError && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      gap: 6,
+      marginBottom: "4px",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(ErrorIcon, {
+      widthHeight: 14,
+      color: "#b91c1c"
+    }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontWeight: "600",
+      fontSize: "12px"
+    }, "Error"))), message.reasoning && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      marginBottom: "8px",
+      borderBottom: "1px solid rgba(0,0,0,0.05)",
+      paddingBottom: "8px"
+    }, styles.reasoningContainer), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      as: "button",
+      onClick: () => setIsReasoningOpen(!isReasoningOpen),
+      cursor: "pointer",
+      gap: 4,
+      alignItems: "center",
+      backgroundColor: "transparent",
+      border: "none",
+      padding: 0
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontSize: "11px",
+      color: "color.gray.500",
+      fontWeight: "600"
+    }, "Thinking Process"), /*#__PURE__*/React__default.createElement(ChevronIcon, {
+      orientation: isReasoningOpen ? 'down' : 'right',
+      widthHeight: 10,
+      color: "color.gray.500"
+    })), isReasoningOpen && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      padding: "8px",
+      backgroundColor: "rgba(0,0,0,0.03)",
+      borderRadius: "8px",
+      marginTop: "4px"
+    }, styles.reasoningContent), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontSize: "12px",
+      color: "color.gray.600",
+      fontStyle: "italic"
+    }, message.reasoning))))), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word"
+    }, message.content), message.attachments && message.attachments.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+      gap: 4,
+      marginTop: "8px"
+    }, message.attachments.map(attachment => (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      key: attachment.id,
+      gap: 6,
+      padding: "6px 8px",
+      backgroundColor: "rgba(0, 0, 0, 0.05)",
+      borderRadius: "8px",
+      fontSize: "12px"
+    }, /*#__PURE__*/React__default.createElement(AttachmentIcon, {
+      widthHeight: 14
+    }), /*#__PURE__*/React__default.createElement(appStudio.Text, null, attachment.name)))))), message.contextElements && message.contextElements.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+      gap: 4,
+      marginTop: "8px"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontSize: "11px",
+      color: "rgba(0,0,0,0.5)",
+      fontWeight: "600"
+    }, "Context:"), message.contextElements.map(element => (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      key: element.id,
+      gap: 6,
+      padding: "4px 8px",
+      backgroundColor: "rgba(37, 99, 235, 0.1)",
+      borderRadius: "6px",
+      fontSize: "11px",
+      border: "1px solid rgba(37, 99, 235, 0.2)"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      color: "color.blue.700",
+      fontWeight: "500"
+    }, element.name))))))));
+  };
+
+  /**
+   * 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"
+   * />
+   * ```
+   */
+  var ChatWidgetComponent = props => {
+    var state = useChatWidgetState(props);
+    return /*#__PURE__*/React__default.createElement(ChatWidgetView, Object.assign({}, props, state));
+  };
+  ChatWidgetComponent.displayName = 'ChatWidget';
+  var ChatWidget = ChatWidgetComponent;
+
+  function useContextSelector(_ref) {
+    var {
+      onSelect,
+      onCancel,
+      active
+    } = _ref;
+    var [highlightedElement, setHighlightedElement] = React.useState(null);
+    var overlayRef = React.useRef(null);
+    // Handle mouse move to consistently highlight elements
+    var handleMouseMove = React.useCallback(e => {
+      var _target$innerText;
+      if (!active) return;
+      var target = document.elementFromPoint(e.clientX, e.clientY);
+      // Ignore if targeting the overlay itself or the widget
+      if (!target || target === document.body || target.closest('[data-chatwidget-ignore="true"]') || target.closest('#chatwidget-overlay')) {
+        setHighlightedElement(null);
+        return;
+      }
+      var rect = target.getBoundingClientRect();
+      // Compute a helpful name
+      var name = target.tagName.toLowerCase();
+      if (target.id) name += "#" + target.id;else if (target.className && typeof target.className === 'string') {
+        // Just take the first class for brevity
+        var firstClass = target.className.split(' ')[0];
+        if (firstClass) name += "." + firstClass;
+      }
+      // Get some text content if available for better context
+      var text = (_target$innerText = target.innerText) == null ? void 0 : _target$innerText.slice(0, 20);
+      if (text) name += " (\"" + text + "...\")";
+      setHighlightedElement({
+        id: target.id || "el-" + Date.now(),
+        name,
+        tagName: target.tagName.toLowerCase(),
+        rect
+      });
+    }, [active]);
+    // Handle click to select
+    var handleClick = React.useCallback(e => {
+      if (!active) return;
+      // If clicking inside the widget, don't trigger selection
+      var target = e.target;
+      if (target.closest('[data-chatwidget-ignore="true"]')) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      if (highlightedElement) {
+        onSelect(highlightedElement);
+      }
+    }, [active, highlightedElement, onSelect]);
+    // Handle escape to cancel
+    var handleKeyDown = React.useCallback(e => {
+      if (!active) return;
+      if (e.key === 'Escape') {
+        onCancel();
+      }
+    }, [active, onCancel]);
+    React.useEffect(() => {
+      if (active) {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('click', handleClick, true); // Capture phase to prevent default
+        document.addEventListener('keydown', handleKeyDown);
+        document.body.style.cursor = 'crosshair';
+      } else {
+        setHighlightedElement(null);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('click', handleClick, true);
+        document.removeEventListener('keydown', handleKeyDown);
+        document.body.style.cursor = '';
+      }
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('click', handleClick, true);
+        document.removeEventListener('keydown', handleKeyDown);
+        document.body.style.cursor = '';
+      };
+    }, [active, handleMouseMove, handleClick, handleKeyDown]);
+    return {
+      highlightedElement
+    };
+  }
+  /**
+   * Overlay component to render the highlight box
+   */
+  function ContextOverlay(_ref2) {
+    var {
+      element
+    } = _ref2;
+    if (!element) return null;
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: "chatwidget-overlay",
+      style: {
+        position: 'fixed',
+        top: element.rect.top,
+        left: element.rect.left,
+        width: element.rect.width,
+        height: element.rect.height,
+        border: '2px solid #2563eb',
+        backgroundColor: 'rgba(37, 99, 235, 0.1)',
+        pointerEvents: 'none',
+        zIndex: 99999,
+        transition: 'all 0.1s ease-out',
+        borderRadius: '4px'
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '-24px',
+        left: '0',
+        backgroundColor: '#2563eb',
+        color: 'white',
+        padding: '2px 8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        fontWeight: 'bold',
+        whiteSpace: 'nowrap'
+      }
+    }, element.name));
+  }
+
+  /**
+   * ChatWidget Widget Component
+   * A floating chat widget with DOM element selection capabilities.
+   */
+  var ChatWidgetWidget = _ref => {
+    var {
+      initialMessages = [],
+      onSendMessage,
+      bubbleSize = 'md'
+    } = _ref;
+    var [isOpen, setIsOpen] = React.useState(false);
+    var [isContextPickerActive, setIsContextPickerActive] = React.useState(false);
+    var [messages, setMessages] = React.useState(initialMessages);
+    var [contextElements, setContextElements] = React.useState([]);
+    // Hook for context selection
+    var {
+      highlightedElement
+    } = useContextSelector({
+      active: isContextPickerActive,
+      onSelect: element => {
+        setContextElements(prev => [...prev, element]);
+        setIsContextPickerActive(false);
+        setIsOpen(true); // Re-open chat after selection
+      },
+      onCancel: () => {
+        setIsContextPickerActive(false);
+        setIsOpen(true);
+      }
+    });
+    var toggleOpen = () => setIsOpen(!isOpen);
+    var handleContextPickerClick = () => {
+      setIsContextPickerActive(true);
+      setIsOpen(false); // Minimize chat while picking
+    };
+    var handleRemoveContextElement = id => {
+      setContextElements(prev => prev.filter(el => el.id !== id));
+    };
+    var handleSubmit = content => {
+      // Add user message
+      var newMessage = {
+        id: Date.now().toString(),
+        role: 'user',
+        content,
+        timestamp: new Date(),
+        contextElements: [...contextElements]
+      };
+      setMessages(prev => [...prev, newMessage]);
+      onSendMessage == null || onSendMessage(content, contextElements);
+      // Clear context after sending
+      setContextElements([]);
+      // Simulate assistant response
+      setTimeout(() => {
+        var _newMessage$contextEl;
+        var isToolCall = Math.random() > 0.7;
+        var hasReasoning = Math.random() > 0.4;
+        var assistantMessage = {
+          id: (Date.now() + 1).toString(),
+          role: 'assistant',
+          timestamp: new Date(),
+          content: isToolCall ? 'I will highlight the selected element.' : "I received your message regarding: " + (((_newMessage$contextEl = newMessage.contextElements) == null ? void 0 : _newMessage$contextEl.map(e => e.name).join(', ')) || 'general context') + ". How can I assist you further?",
+          messageType: isToolCall ? 'tool' : 'text',
+          reasoning: hasReasoning ? 'Analyzing the user input and context... The user seems to be asking about specific elements. I should tailor my response to the selected context.' : undefined
+        };
+        setMessages(prev => [...prev, assistantMessage]);
+        if (isToolCall) {
+          // Add a follow-up system message after a tool call
+          setTimeout(() => {
+            setMessages(prev => [...prev, {
+              id: (Date.now() + 2).toString(),
+              role: 'assistant',
+              messageType: 'system',
+              content: 'Tool "highlightElement" executed successfully.',
+              timestamp: new Date()
+            }]);
+          }, 800);
+        }
+      }, 1000);
+    };
+    return /*#__PURE__*/React__default.createElement(appStudio.View, {
+      position: "fixed",
+      bottom: 24,
+      right: 24,
+      zIndex: 9999
+    }, /*#__PURE__*/React__default.createElement(ContextOverlay, {
+      element: highlightedElement
+    }), isContextPickerActive && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      position: "fixed",
+      top: 24,
+      left: "50%",
+      transform: "translateX(-50%)",
+      backgroundColor: "rgba(0,0,0,0.8)",
+      color: "white",
+      padding: "8px 16px",
+      borderRadius: "24px",
+      zIndex: 10000,
+      boxShadow: "0 4px 6px rgba(0,0,0,0.1)"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontWeight: "600",
+      fontSize: "14px"
+    }, "Click an element to select it. Press ESC to cancel."))), isOpen && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      position: "absolute",
+      bottom: 60,
+      right: 0,
+      width: "400px",
+      height: "600px",
+      marginBottom: "16px",
+      backgroundColor: "rgba(255, 255, 255, 0.8)",
+      backdropFilter: "blur(20px)",
+      borderRadius: "24px",
+      border: "1px solid rgba(255, 255, 255, 0.4)",
+      boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+      overflow: "hidden",
+      animation: "slideUp 0.3s ease-out",
+      style: {
+        animation: 'fadeIn 0.2s ease-out',
+        transformOrigin: 'bottom right'
+      }
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+      padding: "16px",
+      borderBottom: "1px solid rgba(0,0,0,0.05)",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontWeight: "bold",
+      color: "color.gray.800"
+    }, "ChatWidget Assistant"), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "button",
+      onClick: () => setIsOpen(false),
+      cursor: "pointer",
+      padding: "4px",
+      borderRadius: "50%",
+      border: "none",
+      backgroundColor: "transparent",
+      _hover: {
+        backgroundColor: 'rgba(0,0,0,0.05)'
+      }
+    }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+      widthHeight: 16,
+      color: "color.gray.500"
+    }))), /*#__PURE__*/React__default.createElement(ChatWidget, {
+      messages: messages,
+      onSubmit: handleSubmit,
+      size: bubbleSize,
+      variant: "minimal",
+      enableContextPicker: true,
+      selectedContextElements: contextElements,
+      onContextPickerClick: handleContextPickerClick,
+      onRemoveContextElement: handleRemoveContextElement,
+      styles: {
+        container: {
+          height: 'calc(100% - 60px)',
+          backgroundColor: 'transparent'
+        },
+        inputContainer: {
+          backgroundColor: 'white',
+          margin: '0 16px 16px 16px',
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
+        }
+      }
+    }))), !isContextPickerActive && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "button",
+      onClick: toggleOpen,
+      width: "56px",
+      height: "56px",
+      borderRadius: "50%",
+      backgroundColor: "theme.primary",
+      border: "none",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transition: "transform 0.2s ease",
+      _hover: {
+        transform: 'scale(1.05)'
+      },
+      _active: {
+        transform: 'scale(0.95)'
+      },
+      "data-chatwidget-ignore": "true" // Ignore clicks on the widget itself for context picking
+    }, isOpen ? (/*#__PURE__*/React__default.createElement(CloseIcon, {
+      widthHeight: 24,
+      color: "white"
+    })) : (/*#__PURE__*/React__default.createElement(PanelIcon, {
+      widthHeight: 24,
+      color: "white"
+    })))));
+  };
+
   exports.Accordion = Accordion;
   exports.Alert = Alert;
   exports.ArrowIcon = ArrowIcon;
@@ -26285,6 +27206,9 @@
   exports.Chart = Chart;
   exports.ChartIcon = ChartIcon;
   exports.ChatInput = ChatInput;
+  exports.ChatWidget = ChatWidget;
+  exports.ChatWidgetComponent = ChatWidgetComponent;
+  exports.ChatWidgetWidget = ChatWidgetWidget;
   exports.CheckIcon = CheckIcon;
   exports.Checkbox = Checkbox;
   exports.ChevronIcon = ChevronIcon;
@@ -26371,6 +27295,7 @@
   exports.Modal = Modal;
   exports.MoonIcon = MoonIcon;
   exports.MoreIcon = MoreIcon;
+  exports.MousePointerIcon = MousePointerIcon;
   exports.NavigationMenu = NavigationMenu;
   exports.NotificationIcon = NotificationIcon;
   exports.OTPInput = OTPInput;