@app-studio/web 0.9.82 → 0.9.83

package/dist/web.cjs.development.js

@@ -815,6 +815,9 @@ var ZoomInIcon = /*#__PURE__*/createIcon('zoom-in', {
 var DragHandleLinesIcon = /*#__PURE__*/createIcon('grip-horizontal', {
   filled: false
 });
+var MousePointerIcon = /*#__PURE__*/createIcon('mouse-pointer-2', {
+  filled: false
+});
 
 /**
  * Alert Styles
@@ -3320,7 +3323,7 @@ var ButtonView = _ref5 => {
   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') {
@@ -16659,40 +16662,46 @@ Table.Template = TableView;
  * @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
@@ -16779,6 +16788,10 @@ var TabHeader = _ref => {
   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",
@@ -16789,7 +16802,23 @@ var TabHeader = _ref => {
     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)));
 };
 
 /**
@@ -16825,7 +16854,7 @@ var TabsView = _ref => {
       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
@@ -16944,7 +16973,7 @@ var TabsComponent = _ref => {
   // 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, {
@@ -16955,9 +16984,9 @@ var TabsComponent = _ref => {
   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) {
@@ -26300,6 +26329,898 @@ var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
 });
 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;
@@ -26325,6 +27246,9 @@ exports.Carousel = Carousel;
 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;
@@ -26411,6 +27335,7 @@ exports.MinusIcon = MinusIcon;
 exports.Modal = Modal;
 exports.MoonIcon = MoonIcon;
 exports.MoreIcon = MoreIcon;
+exports.MousePointerIcon = MousePointerIcon;
 exports.NavigationMenu = NavigationMenu;
 exports.NotificationIcon = NotificationIcon;
 exports.OTPInput = OTPInput;