@atlaskit/help 7.14.0 → 7.14.2

package/dist/es2019/components/contexts/navigationContext.js

@@ -9,6 +9,7 @@ import { useWhatsNewArticleContext } from './whatsNewArticleContext';
 import { useHomeContext } from './homeContext';
 import { useSearchContext } from './searchContext';
 import { useHeaderContext } from './headerContext';
+import { useAiContext } from './aiAgentContext';
 const DEFAULT_ARTICLE_ID = {
   id: '',
   type: ARTICLE_TYPE.HELP_ARTICLE
@@ -229,6 +230,9 @@ export const NavigationContextProvider = ({
     articleId: propsArticleId,
     history: propsHistory
   } = navigationData;
+  const {
+    isAiEnabled
+  } = useAiContext();
   const [{
     articleId: currentArticleId,
     history: currentHistory,
@@ -249,7 +253,7 @@ export const NavigationContextProvider = ({
      * - If default content isn't defined and the history only has one article,
      * we should not display the back button
      */
-    if (currentHistory.length === 1 && !isDefaultContentDefined || currentView === VIEW.WHATS_NEW && !isDefaultContentDefined) {
+    if (currentHistory.length === 1 && !isDefaultContentDefined || currentView === VIEW.WHATS_NEW && !isDefaultContentDefined || isAiEnabled && currentView === VIEW.SEARCH) {
       return false;
     }
 
@@ -257,7 +261,7 @@ export const NavigationContextProvider = ({
      * if an overlay is visible return true to display the back buton
      */
     return isOverlayVisible;
-  }, [currentHistory.length, isDefaultContentDefined, isOverlayVisible, currentView]);
+  }, [currentHistory.length, isDefaultContentDefined, isOverlayVisible, currentView, isAiEnabled]);
   const fetchArticleData = useCallback(async historyItem => {
     try {
       let article;

package/dist/es2019/components/styled.js

@@ -32,6 +32,16 @@ export const HelpBody = styled.div({
   overflowX: 'hidden',
   overflowY: 'auto'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const HelpBodyAi = styled.div({
+  width: '100%',
+  boxSizing: 'border-box',
+  order: 0,
+  flex: '1 1 auto',
+  alignSelf: 'auto',
+  position: 'relative'
+});
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export const Home = styled.div(props => ({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -43,6 +53,19 @@ export const Home = styled.div(props => ({
   boxSizing: 'border-box'
 }));
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const HomeAi = styled.div(props => ({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  display: props.isOverlayFullyVisible ? 'none' : 'block',
+  // height: `calc(100% - ${token('space.800', '60px')})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  overflow: props.isOverlayVisible ? 'hidden' : 'auto',
+  paddingLeft: "var(--ds-space-200, 16px)",
+  paddingRight: "var(--ds-space-200, 16px)",
+  paddingBottom: "var(--ds-space-200, 16px)",
+  boxSizing: 'border-box'
+}));
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const HelpFooter = styled.div({
   padding: `${"var(--ds-space-100, 8px)"} 0`,
@@ -53,4 +76,12 @@ export const HelpFooter = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   borderTop: `${"var(--ds-space-025, 2px)"} solid ${`var(--ds-border, ${colors.N30})`}`,
   justifyContent: 'space-between'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const BackButtonContainer = styled.div({
+  position: 'absolute',
+  marginTop: "var(--ds-space-200, 14px)",
+  left: "var(--ds-space-100, 8px)",
+  height: "var(--ds-space-400, 32px)"
 });

package/dist/es2019/messages.js

@@ -259,5 +259,10 @@ export const messages = defineMessages({
     id: 'help.show_more_button.label_less',
     defaultMessage: 'Show less',
     description: '"Show less" text'
+  },
+  help_panel_search_back: {
+    id: 'helpPanel.search.back',
+    defaultMessage: 'Back',
+    description: ''
   }
 });

package/dist/esm/analytics.js

@@ -5,5 +5,5 @@ export var createAndFire = x.createAndFireEvent('atlaskit');
 export var defaultAnalyticsAttributes = {
   componentName: 'help',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };

package/dist/esm/components/Article/ArticleLoadingFail/index.js

@@ -10,7 +10,7 @@ import { LoadingErrorMessage, LoadingErrorButtonContainer, LoadingErrorHeading }
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export var ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export var ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export var ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -31,7 +31,7 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 var buttonStyles = css({
   padding: '0',

package/dist/esm/components/Article/HelpArticle/index.js

@@ -56,7 +56,7 @@ export var HelpArticle = function HelpArticle(_ref) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.14.0"
+      packageVersion: "7.14.2"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

package/dist/esm/components/Article/WhatsNewArticle/index.js

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export var WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/dist/esm/components/Article/index.js

@@ -7,7 +7,7 @@ import { Transition } from 'react-transition-group';
 import { useNavigationContext } from '../contexts/navigationContext';
 import { useHelpArticleContext } from '../contexts/helpArticleContext';
 import { SLIDEIN_OVERLAY_TRANSITION_DURATION_MS, VIEW } from '../constants';
-import { ArticleContainer } from './styled';
+import { ArticleContainer, ArticleContainerAi } from './styled';
 import ArticleContent from './ArticleContent';
 // Animation
 var defaultStyle = {
@@ -26,8 +26,9 @@ var transitionStyles = {
     left: '100%'
   }
 };
-export var Article = function Article() {
+export var Article = function Article(_ref) {
   var _history$length;
+  var isAiEnabled = _ref.isAiEnabled;
   var _useNavigationContext = useNavigationContext(),
     view = _useNavigationContext.view,
     articleId = _useNavigationContext.articleId,
@@ -104,7 +105,24 @@ export var Article = function Article() {
       setShowArticle(view === VIEW.ARTICLE || view === VIEW.WHATS_NEW_ARTICLE);
     }
   }, [view, showArticle]);
-  return /*#__PURE__*/React.createElement(Transition, {
+  return isAiEnabled ? /*#__PURE__*/React.createElement(Transition, {
+    in: showArticle,
+    timeout: SLIDEIN_OVERLAY_TRANSITION_DURATION_MS,
+    enter: !skipArticleSlideInAnimation,
+    onEntered: onArticleEntered,
+    onExit: onArticleExit,
+    unmountOnExit: true,
+    mountOnEnter: true
+  }, function (state) {
+    return /*#__PURE__*/React.createElement(ArticleContainerAi, {
+      ref: articleContainerRef,
+      style: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state]), enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled'])
+    }, /*#__PURE__*/React.createElement(ArticleContent, {
+      currentArticle: currentArticle,
+      onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,
+      onWhatsNewArticleLoadingFailTryAgainButtonClick: reloadWhatsNewArticle && handleOnWhatsNewArticleLoadingFailTryAgainButtonClick
+    }));
+  }) : /*#__PURE__*/React.createElement(Transition, {
     in: showArticle,
     timeout: SLIDEIN_OVERLAY_TRANSITION_DURATION_MS,
     enter: !skipArticleSlideInAnimation,

package/dist/esm/components/Article/styled.js

@@ -20,4 +20,23 @@ export var ArticleContainer = styled.div({
   overflowX: 'hidden',
   overflowY: 'auto',
   zIndex: 2
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var ArticleContainerAi = styled.div({
+  paddingLeft: "var(--ds-space-300, 24px)",
+  paddingRight: "var(--ds-space-300, 24px)",
+  paddingBottom: "var(--ds-space-200, 16px)",
+  position: 'absolute',
+  height: "calc(100% - ".concat("var(--ds-space-800, 60px)", ")"),
+  width: '100%',
+  top: "var(--ds-space-800, 60px)",
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  left: '100%',
+  flex: 1,
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  zIndex: 2
 });

package/dist/esm/components/ArticlesList/ArticlesListItem/index.js

@@ -8,7 +8,7 @@ import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTit
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 var highlightText = function highlightText(text) {
   if (!text) {

package/dist/esm/components/BackButton/index.js

@@ -0,0 +1,76 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
+import { Transition } from 'react-transition-group';
+import ArrowleftIcon from '@atlaskit/icon/core/migration/arrow-left';
+import Button from '@atlaskit/button/standard-button';
+import { messages } from '../../messages';
+import { BackButtonContainer } from '../styled';
+import { TRANSITION_DURATION_MS } from '../constants';
+// Animation
+var defaultStyle = {
+  transition: "left ".concat(TRANSITION_DURATION_MS, "ms, opacity ").concat(TRANSITION_DURATION_MS, "ms"),
+  left: "var(--ds-space-300, 24px)",
+  opacity: 0
+};
+var transitionStyles = {
+  entered: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 1
+  },
+  exited: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 0
+  }
+};
+export var BackButton = function BackButton(_ref) {
+  var onClick = _ref.onClick,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    formatMessage = _ref.intl.formatMessage;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var handleOnClick = function handleOnClick(event) {
+    if (onClick) {
+      var _analyticsEvent = createAnalyticsEvent({
+        action: 'clicked'
+      });
+      onClick(event, _analyticsEvent);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Transition, {
+    in: isVisible,
+    timeout: TRANSITION_DURATION_MS,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, function (state) {
+    return /*#__PURE__*/React.createElement(BackButtonContainer, {
+      style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick(event) {
+        if (state === 'entered') {
+          handleOnClick(event);
+        }
+      },
+      appearance: "subtle",
+      iconBefore: /*#__PURE__*/React.createElement(ArrowleftIcon, {
+        color: "currentColor",
+        label: "",
+        LEGACY_size: "medium"
+      })
+    }, formatMessage(messages.help_panel_search_back)));
+  });
+};
+var BackButtonWithContext = function BackButtonWithContext(props) {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      componentName: 'backButton',
+      packageName: "@atlaskit/help",
+      packageVersion: "7.14.2"
+    }
+  }, /*#__PURE__*/React.createElement(BackButton, props));
+};
+export default injectIntl(BackButtonWithContext);

package/dist/esm/components/Help.js

@@ -45,7 +45,7 @@ export var Help = /*#__PURE__*/function (_React$PureComponent) {
         rest = _objectWithoutProperties(_this$props, _excluded);
       return /*#__PURE__*/React.createElement(LocaleIntlProvider, null, /*#__PURE__*/React.createElement(HeaderContextProvider, rest.header, /*#__PURE__*/React.createElement(HomeContextProvider, _extends({}, rest.home, {
         homeContent: children
-      }), /*#__PURE__*/React.createElement(HelpArticleContextProvider, rest.helpArticle, /*#__PURE__*/React.createElement(RelatedArticlesContextProvider, rest.relatedArticles, /*#__PURE__*/React.createElement(SearchContextProvider, rest.search, /*#__PURE__*/React.createElement(WhatsNewArticleProvider, rest.whatsNew, /*#__PURE__*/React.createElement(NavigationContextProvider, rest.navigation, /*#__PURE__*/React.createElement(AiContextProvider, rest.ai, /*#__PURE__*/React.createElement(HelpContent, {
+      }), /*#__PURE__*/React.createElement(HelpArticleContextProvider, rest.helpArticle, /*#__PURE__*/React.createElement(RelatedArticlesContextProvider, rest.relatedArticles, /*#__PURE__*/React.createElement(SearchContextProvider, rest.search, /*#__PURE__*/React.createElement(WhatsNewArticleProvider, rest.whatsNew, /*#__PURE__*/React.createElement(AiContextProvider, rest.ai, /*#__PURE__*/React.createElement(NavigationContextProvider, rest.navigation, /*#__PURE__*/React.createElement(HelpContent, {
         footer: footer
       }))))))))));
     }

package/dist/esm/components/HelpContent.js

@@ -15,7 +15,8 @@ import ArticleComponent from './Article';
 import WhatsNewButton from './WhatsNew/WhatsNewButton';
 import WhatsNewResults from './WhatsNew/WhatsNewResults';
 import HelpContentButton from './HelpContentButton';
-import { HelpBodyContainer, HelpBody, Home } from './styled';
+import BackButton from './BackButton';
+import { HelpBodyContainer, HelpBody, Home, HomeAi, HelpBodyAi } from './styled';
 import { HelpFooter } from './styled';
 export var HelpContent = function HelpContent(_ref) {
   var footer = _ref.footer;
@@ -52,7 +53,7 @@ export var HelpContent = function HelpContent(_ref) {
   }, [navigateBack, onBackButtonClick]);
   useEffect(function () {
     var handler;
-    if (isOverlayVisible) {
+    if (isOverlayVisible && !isAiEnabled) {
       handler = setTimeout(function () {
         setIsOverlayFullyVisible(isOverlayVisible);
       }, HIDE_CONTENT_DELAY);
@@ -64,14 +65,36 @@ export var HelpContent = function HelpContent(_ref) {
         clearTimeout(handler);
       }
     };
-  }, [isOverlayVisible]);
-  return /*#__PURE__*/React.createElement(HelpLayout, {
+  }, [isOverlayVisible, isAiEnabled]);
+  return isAiEnabled ? /*#__PURE__*/React.createElement(HelpLayout, {
+    onCloseButtonClick: onClose,
+    isAiEnabled: true
+  }, /*#__PURE__*/React.createElement(HelpBodyContainer, null, /*#__PURE__*/React.createElement(HelpBodyAi, null, /*#__PURE__*/React.createElement(BackButton, {
+    onClick: handleOnBackButtonClick,
+    isVisible: canNavigateBack
+  }), onSearch && /*#__PURE__*/React.createElement(SearchInput, {
+    isAiEnabled: true
+  }), /*#__PURE__*/React.createElement(SearchResults, {
+    isAiEnabled: true
+  }), /*#__PURE__*/React.createElement(ArticleComponent, {
+    isAiEnabled: true
+  }), /*#__PURE__*/React.createElement(HomeAi, {
+    isOverlayFullyVisible: isOverlayFullyVisible,
+    isOverlayVisible: isOverlayVisible
+  }, homeContent, onSearchWhatsNewArticles && onGetWhatsNewArticle && /*#__PURE__*/React.createElement(WhatsNewButton, {
+    productName: productName
+  }), homeOptions && homeOptions.map(function (defaultOption) {
+    return /*#__PURE__*/React.createElement(HelpContentButton, _extends({
+      key: defaultOption.id
+    }, defaultOption));
+  }))), /*#__PURE__*/React.createElement(WhatsNewResults, null), footer && /*#__PURE__*/React.createElement(HelpFooter, {
+    "data-testid": "inside-footer"
+  }, footer))) : /*#__PURE__*/React.createElement(HelpLayout, {
     onBackButtonClick: handleOnBackButtonClick,
     onCloseButtonClick: onClose,
     isBackbuttonVisible: canNavigateBack,
-    footer: !isAiEnabled ? footer : undefined,
-    headerContent: onSearch && /*#__PURE__*/React.createElement(SearchInput, null),
-    isAiEnabled: isAiEnabled
+    footer: footer,
+    headerContent: onSearch && /*#__PURE__*/React.createElement(SearchInput, null)
   }, /*#__PURE__*/React.createElement(HelpBodyContainer, null, /*#__PURE__*/React.createElement(HelpBody, null, /*#__PURE__*/React.createElement(SearchResults, null), /*#__PURE__*/React.createElement(ArticleComponent, null), /*#__PURE__*/React.createElement(Home, {
     isOverlayFullyVisible: isOverlayFullyVisible,
     isOverlayVisible: isOverlayVisible
@@ -81,8 +104,6 @@ export var HelpContent = function HelpContent(_ref) {
     return /*#__PURE__*/React.createElement(HelpContentButton, _extends({
       key: defaultOption.id
     }, defaultOption));
-  }))), /*#__PURE__*/React.createElement(WhatsNewResults, null), isAiEnabled && footer && /*#__PURE__*/React.createElement(HelpFooter, {
-    "data-testid": "inside-footer"
-  }, footer)));
+  }))), /*#__PURE__*/React.createElement(WhatsNewResults, null)));
 };
 export default HelpContent;

package/dist/esm/components/HelpContentButton/index.js

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

package/dist/esm/components/RelatedArticles/index.js

@@ -24,7 +24,7 @@ import { Text } from '@atlaskit/primitives';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 var packageName = "@atlaskit/help";
-var packageVersion = "7.14.0";
+var packageVersion = "7.14.2";
 var buttonStyles = css({
   padding: '0',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/dist/esm/components/Search/SearchInput/index.js

@@ -17,11 +17,13 @@ import { injectIntl } from 'react-intl-next';
 import { REQUEST_STATE } from '../../../model/Requests';
 import { useSearchContext } from '../../contexts/searchContext';
 import { messages } from '../../../messages';
-import { SearchInputContainer, SearchIconContainer, CloseButtonAndSpinnerContainer } from './styled';
+import { VIEW } from '../../constants';
+import { SearchInputContainer, SearchInputContainerAi, SearchIconContainer, CloseButtonAndSpinnerContainer } from './styled';
+import { useNavigationContext } from '../../contexts/navigationContext';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 var buttonStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -30,7 +32,11 @@ var buttonStyles = css({
   height: "".concat(gridSize() * 3, "px")
 });
 export var SearchInput = function SearchInput(_ref) {
-  var formatMessage = _ref.intl.formatMessage;
+  var formatMessage = _ref.intl.formatMessage,
+    _ref$isAiEnabled = _ref.isAiEnabled,
+    isAiEnabled = _ref$isAiEnabled === void 0 ? false : _ref$isAiEnabled;
+  var _useNavigationContext = useNavigationContext(),
+    view = _useNavigationContext.view;
   var _useSearchContext = useSearchContext(),
     searchValue = _useSearchContext.searchValue,
     searchState = _useSearchContext.searchState,
@@ -77,7 +83,38 @@ export var SearchInput = function SearchInput(_ref) {
   if (inputRef && inputRef.current) {
     inputRef.current.value = searchValue;
   }
-  return jsx(SearchInputContainer, null, jsx(Textfield, {
+  if (view === VIEW.ARTICLE || view === VIEW.WHATS_NEW_ARTICLE) {
+    return null;
+  }
+  return isAiEnabled ? jsx(SearchInputContainerAi, null, jsx(Textfield, {
+    title: "Help articles search input",
+    autoComplete: "off",
+    ref: inputRef,
+    name: "help-search-input",
+    elemBeforeInput: jsx(SearchIconContainer, null, jsx(SearchIcon, {
+      LEGACY_margin: "0 2px",
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })),
+    elemAfterInput: jsx(CloseButtonAndSpinnerContainer, null, searchState === REQUEST_STATE.loading && jsx(Spinner, {
+      size: "small"
+    }), searchValue !== '' && jsx(Button, {
+      css: buttonStyles,
+      appearance: "subtle",
+      onClick: handleOnClearButtonClick,
+      spacing: "none",
+      "aria-label": "Clear field"
+    }, jsx(EditorCloseIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    }))),
+    placeholder: formatMessage(messages.help_search_placeholder),
+    onChange: handleOnInputChange,
+    onKeyPress: handleOnKeyPress,
+    value: searchValue
+  })) : jsx(SearchInputContainer, null, jsx(Textfield, {
     title: "Help articles search input",
     autoComplete: "off",
     ref: inputRef,

package/dist/esm/components/Search/SearchInput/styled.js

@@ -13,6 +13,20 @@ export var SearchInputContainer = styled.div({
   boxSizing: 'border-box'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var SearchInputContainerAi = styled.div({
+  width: "calc(100% - ".concat("var(--ds-space-300, 24px)", " - ", "var(--ds-space-300, 24px)", ")"),
+  height: "var(--ds-space-400, 32px)",
+  marginLeft: "var(--ds-space-300, 24px)",
+  marginRight: "var(--ds-space-300, 24px)",
+  marginTop: "var(--ds-space-200, 14px)",
+  marginBottom: "var(--ds-space-200, 14px)",
+  order: 0,
+  flex: '0 1 auto',
+  alignSelf: 'auto',
+  boxSizing: 'border-box'
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var SearchIconContainer = styled.div({
   width: "var(--ds-space-300, 24px)",

package/dist/esm/components/Search/SearchResults/index.js

@@ -13,7 +13,7 @@ import SearchResultsList from './SearchResults';
 import SearchExternalSite from './SearchExternalSite';
 import SearchResultsEmpty from './SearchResultsEmpty';
 import SearchResultsError from './SearchResultsError';
-import { SearchResultsContainer } from './styled';
+import { SearchResultsContainer, SearchResultsContainerAi } from './styled';
 var defaultStyle = {
   transition: "opacity ".concat(FADEIN_OVERLAY_TRANSITION_DURATION_MS, "ms"),
   opacity: 0,
@@ -37,7 +37,9 @@ var transitionStyles = {
     visibility: 'hidden'
   }
 };
-export var SearchResults = function SearchResults() {
+export var SearchResults = function SearchResults(_ref) {
+  var _ref$isAiEnabled = _ref.isAiEnabled,
+    isAiEnabled = _ref$isAiEnabled === void 0 ? false : _ref$isAiEnabled;
   var _useSearchContext = useSearchContext(),
     searchState = _useSearchContext.searchState,
     searchResult = _useSearchContext.searchResult,
@@ -74,7 +76,48 @@ export var SearchResults = function SearchResults() {
       setSuggestionsCount(0);
     }
   }, [searchResult]);
-  return /*#__PURE__*/React.createElement(Transition, {
+  return isAiEnabled ? /*#__PURE__*/React.createElement(Transition, {
+    in: view === VIEW.SEARCH && isSearchResultVisible,
+    timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS
+  }, function (state) {
+    return /*#__PURE__*/React.createElement(SearchResultsContainerAi, {
+      style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: liveRegionRef,
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        position: 'absolute',
+        // hidden visually, but accessible
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        width: 1,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: 1,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        margin: -1,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        border: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        padding: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        clip: 'rect(0 0 0 0)',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        overflow: 'hidden'
+      }
+    }, suggestionsCount > 0 && "".concat(suggestionsCount, " suggestion").concat(suggestionsCount !== 1 ? 's' : '', " available for typed text."), suggestionsCount === 0 && 'No suggestions available.'), searchState !== REQUEST_STATE.error && searchResult !== null && searchResult.length > 0 && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResultsList, {
+      searchResult: searchResult,
+      onSearchResultItemClick: handleOnSearchResultItemClick
+    }), /*#__PURE__*/React.createElement(SearchExternalSite, {
+      searchExternalUrl: searchExternalUrl,
+      onSearchExternalUrlClick: onSearchExternalUrlClick
+    })), searchState !== REQUEST_STATE.error && searchResult !== null && searchResult.length === 0 && /*#__PURE__*/React.createElement(SearchResultsEmpty, {
+      searchExternalUrl: searchExternalUrl,
+      onSearchExternalUrlClick: onSearchExternalUrlClick
+    }), searchState === REQUEST_STATE.error && /*#__PURE__*/React.createElement(SearchResultsError, {
+      onSearch: onSearch
+    }));
+  }) : /*#__PURE__*/React.createElement(Transition, {
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS
   }, function (state) {

package/dist/esm/components/Search/SearchResults/styled.js

@@ -21,6 +21,22 @@ export var SearchResultsContainer = styled.div({
   padding: "0 ".concat("var(--ds-space-200, 16px)")
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var SearchResultsContainerAi = styled.div({
+  position: 'absolute',
+  height: "calc(100% - ".concat("var(--ds-space-800, 60px)", ")"),
+  width: '100%',
+  top: "var(--ds-space-800, 60px)",
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  flex: 1,
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  zIndex: 10,
+  padding: "0 ".concat("var(--ds-space-200, 16px)")
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var SearchResultsList = styled.div({
   paddingTop: "var(--ds-space-300, 24px)",

package/dist/esm/components/WhatsNew/WhatsNewButton/index.js

@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export var WhatsNewButton = function WhatsNewButton(_ref) {
   var productName = _ref.productName,

package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/index.js

@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export var WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/dist/esm/components/constants.js

@@ -13,4 +13,6 @@ export var VIEW = /*#__PURE__*/function (VIEW) {
 // Animation related consts
 export var SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = 300;
 export var FADEIN_OVERLAY_TRANSITION_DURATION_MS = 440;
-export var HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;
+export var HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;
+// Animation related consts
+export var TRANSITION_DURATION_MS = 220;