@atlaskit/help 7.14.2 → 7.14.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/help
 
+## 7.14.4
+
+### Patch Changes
+
+- [#106600](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106600)
+  [`6fa81748812d3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6fa81748812d3) -
+  Fix navigation context to set contentAri in navigation state
+
+## 7.14.3
+
+### Patch Changes
+
+- [#110491](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110491)
+  [`a49d7ed81fc11`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a49d7ed81fc11) -
+  [ux] adding tabs to Ai enabled IPH
+- Updated dependencies
+
 ## 7.14.2
 
 ### Patch Changes

package/dist/cjs/analytics.js

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

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

@@ -17,7 +17,7 @@ var _styled = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var ArticleLoadingFail = exports.ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

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

@@ -13,7 +13,7 @@ var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var ArticleWasHelpfulNoButton = exports.ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

@@ -13,7 +13,7 @@ var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var ArticleWasHelpfulYesButton = exports.ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

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

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

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

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

@@ -22,7 +22,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var WhatsNewArticle = exports.WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -18,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var highlightText = function highlightText(text) {
   if (!text) {

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

@@ -76,7 +76,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help",
-      packageVersion: "7.14.2"
+      packageVersion: "7.14.4"
     }
   }, /*#__PURE__*/_react.default.createElement(BackButton, props));
 };

package/dist/cjs/components/HelpContent.js

@@ -25,10 +25,16 @@ var _WhatsNewResults = _interopRequireDefault(require("./WhatsNew/WhatsNewResult
 var _HelpContentButton = _interopRequireDefault(require("./HelpContentButton"));
 var _BackButton = _interopRequireDefault(require("./BackButton"));
 var _styled = require("./styled");
+var _Tabs = require("./Tabs");
+var _aiChat = _interopRequireDefault(require("@atlaskit/icon/core/ai-chat"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("../messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var HelpContent = exports.HelpContent = function HelpContent(_ref) {
-  var footer = _ref.footer;
+  var footer = _ref.footer,
+    formatMessage = _ref.intl.formatMessage;
   // TODO: this will enable all the features and refactors related to AI
   var _useAiContext = (0, _aiAgentContext.useAiContext)(),
     isAiEnabled = _useAiContext.isAiEnabled;
@@ -75,10 +81,35 @@ var HelpContent = exports.HelpContent = function HelpContent(_ref) {
       }
     };
   }, [isOverlayVisible, isAiEnabled]);
-  return isAiEnabled ? /*#__PURE__*/_react.default.createElement(_helpLayout.default, {
+
+  // Values for tabs
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeTab = _useState4[0],
+    setActiveTab = _useState4[1];
+  var handleTabClick = function handleTabClick(index) {
+    setActiveTab(index);
+    // add custom event here via props
+  };
+  var tabs = [{
+    label: formatMessage(_messages.messages.help_ai_tab),
+    icon: /*#__PURE__*/_react.default.createElement(_aiChat.default, {
+      label: formatMessage(_messages.messages.help_ai_tab)
+    })
+  }, {
+    label: formatMessage(_messages.messages.help_search_tab),
+    icon: /*#__PURE__*/_react.default.createElement(_search.default, {
+      label: formatMessage(_messages.messages.help_search_tab)
+    })
+  }];
+  var HelpLayoutWithAi = /*#__PURE__*/_react.default.createElement(_helpLayout.default, {
     onCloseButtonClick: onClose,
-    isAiEnabled: true
-  }, /*#__PURE__*/_react.default.createElement(_styled.HelpBodyContainer, null, /*#__PURE__*/_react.default.createElement(_styled.HelpBodyAi, null, /*#__PURE__*/_react.default.createElement(_BackButton.default, {
+    isAiEnabled: isAiEnabled
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
+    activeTab: activeTab,
+    onTabClick: handleTabClick,
+    tabs: tabs
+  }), activeTab === 0 && /*#__PURE__*/_react.default.createElement("div", null, "ai agent here"), activeTab === 1 && /*#__PURE__*/_react.default.createElement(_styled.HelpBodyContainer, null, /*#__PURE__*/_react.default.createElement(_styled.HelpBodyAi, null, /*#__PURE__*/_react.default.createElement(_BackButton.default, {
     onClick: handleOnBackButtonClick,
     isVisible: canNavigateBack
   }), onSearch && /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
@@ -98,7 +129,8 @@ var HelpContent = exports.HelpContent = function HelpContent(_ref) {
     }, defaultOption));
   }))), /*#__PURE__*/_react.default.createElement(_WhatsNewResults.default, null), footer && /*#__PURE__*/_react.default.createElement(_styled.HelpFooter, {
     "data-testid": "inside-footer"
-  }, footer))) : /*#__PURE__*/_react.default.createElement(_helpLayout.default, {
+  }, footer)));
+  var HelpLayoutWithoutAi = /*#__PURE__*/_react.default.createElement(_helpLayout.default, {
     onBackButtonClick: handleOnBackButtonClick,
     onCloseButtonClick: onClose,
     isBackbuttonVisible: canNavigateBack,
@@ -114,5 +146,6 @@ var HelpContent = exports.HelpContent = function HelpContent(_ref) {
       key: defaultOption.id
     }, defaultOption));
   }))), /*#__PURE__*/_react.default.createElement(_WhatsNewResults.default, null)));
+  return isAiEnabled ? HelpLayoutWithAi : HelpLayoutWithoutAi;
 };
-var _default = exports.default = HelpContent;
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(HelpContent);

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

@@ -17,7 +17,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

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

@@ -34,7 +34,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var packageName = "@atlaskit/help";
-var packageVersion = "7.14.2";
+var packageVersion = "7.14.4";
 var buttonStyles = (0, _react2.css)({
   padding: '0',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

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

@@ -34,7 +34,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var buttonStyles = (0, _react2.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

package/dist/cjs/components/Tabs/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = require("./styled");
+var _primitives = require("@atlaskit/primitives");
+var Tab = function Tab(_ref) {
+  var label = _ref.label,
+    index = _ref.index,
+    _onClick = _ref.onClick,
+    isActive = _ref.isActive,
+    icon = _ref.icon;
+  return /*#__PURE__*/_react.default.createElement(_styled.TabLabel, {
+    isActive: isActive,
+    onClick: function onClick() {
+      return _onClick(index);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    space: "space.100",
+    alignBlock: "center",
+    alignInline: "center"
+  }, icon, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    color: isActive ? 'color.text.selected' : 'color.text'
+  }, label)));
+};
+var Tabs = exports.Tabs = function Tabs(_ref2) {
+  var activeTab = _ref2.activeTab,
+    onTabClick = _ref2.onTabClick,
+    tabs = _ref2.tabs;
+  return /*#__PURE__*/_react.default.createElement(_styled.TabContainer, null, /*#__PURE__*/_react.default.createElement(_styled.TabLabels, null, tabs.map(function (tab, index) {
+    return /*#__PURE__*/_react.default.createElement(Tab, {
+      key: index,
+      label: tab.label,
+      index: index,
+      onClick: onTabClick,
+      isActive: activeTab === index,
+      icon: tab.icon
+    });
+  })));
+};

package/dist/cjs/components/Tabs/styled.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabLabels = exports.TabLabel = exports.TabContainer = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var TabContainer = exports.TabContainer = _styled.default.div({
+  width: '100%'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var TabLabels = exports.TabLabels = _styled.default.div({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+
+// 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
+var TabLabel = exports.TabLabel = _styled.default.div(function (_ref) {
+  var isActive = _ref.isActive;
+  return {
+    flex: 1,
+    padding: "var(--ds-space-150, 12px)",
+    textAlign: 'center',
+    cursor: 'pointer',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    color: isActive ? "var(--ds-text-selected, #0C66E4)" : "var(--ds-text, #172B4D)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    borderBottom: isActive ? "1px solid ".concat("var(--ds-text-selected, #0C66E4)") : "1px solid ".concat("var(--ds-text-disabled, #091E424F)")
+  };
+});

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

@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var WhatsNewButton = exports.WhatsNewButton = function WhatsNewButton(_ref) {
   var productName = _ref.productName,

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

@@ -15,7 +15,7 @@ var _styled2 = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 var WhatsNewResultListItem = exports.WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -58,12 +58,14 @@ var getSimpleHistory = function getSimpleHistory(history) {
   return history.map(function (historyItem) {
     var id = historyItem.id,
       uid = historyItem.uid,
-      type = historyItem.type;
+      type = historyItem.type,
+      contentAri = historyItem.contentAri;
     return {
       id: id,
       uid: uid,
       state: _Requests.REQUEST_STATE.reload,
-      type: type
+      type: type,
+      contentAri: contentAri
     };
   });
 };
@@ -74,10 +76,12 @@ var getSimpleHistory = function getSimpleHistory(history) {
 var getHistoryData = function getHistoryData(history) {
   return history.map(function (historyItem) {
     var id = historyItem.id,
-      uid = historyItem.uid;
+      uid = historyItem.uid,
+      contentAri = historyItem.contentAri;
     return {
       id: id,
-      uid: uid
+      uid: uid,
+      contentAri: contentAri
     };
   });
 };
@@ -483,7 +487,8 @@ var NavigationContextProvider = exports.NavigationContextProvider = function Nav
             setNavigationData({
               articleId: {
                 id: lastHistoryItem.id,
-                type: lastHistoryItem.type
+                type: lastHistoryItem.type,
+                contentAri: lastHistoryItem.contentAri
               },
               history: simpleHistory
             });

package/dist/cjs/messages.js

@@ -270,5 +270,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'helpPanel.search.back',
     defaultMessage: 'Back',
     description: ''
+  },
+  help_search_tab: {
+    id: 'help.search_tab.search',
+    defaultMessage: 'Search',
+    description: 'Search tab text'
+  },
+  help_ai_tab: {
+    id: 'help.search_tab.ai',
+    defaultMessage: 'Ask AI',
+    description: 'Ask AI tab text'
   }
 });

package/dist/es2019/analytics.js

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

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

@@ -10,7 +10,7 @@ import { LoadingErrorMessage, LoadingErrorButtonContainer, LoadingErrorHeading }
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 export const ArticleLoadingFail = ({
   onTryAgainButtonClick,

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

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 export const ArticleWasHelpfulNoButton = ({
   isSelected = false,

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

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 export const ArticleWasHelpfulYesButton = ({
   isSelected = false,

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

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

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

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

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

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 const analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 export const WhatsNewArticle = ({
   intl: {

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

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

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

@@ -72,7 +72,7 @@ const BackButtonWithContext = props => {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help",
-      packageVersion: "7.14.2"
+      packageVersion: "7.14.4"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

package/dist/es2019/components/HelpContent.js

@@ -17,8 +17,16 @@ import HelpContentButton from './HelpContentButton';
 import BackButton from './BackButton';
 import { HelpBodyContainer, HelpBody, Home, HomeAi, HelpBodyAi } from './styled';
 import { HelpFooter } from './styled';
+import { Tabs } from './Tabs';
+import AiChatIcon from '@atlaskit/icon/core/ai-chat';
+import SearchIcon from '@atlaskit/icon/core/search';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../messages';
 export const HelpContent = ({
-  footer
+  footer,
+  intl: {
+    formatMessage
+  }
 }) => {
   // TODO: this will enable all the features and refactors related to AI
   const {
@@ -69,10 +77,32 @@ export const HelpContent = ({
       }
     };
   }, [isOverlayVisible, isAiEnabled]);
-  return isAiEnabled ? /*#__PURE__*/React.createElement(HelpLayout, {
+
+  // Values for tabs
+  const [activeTab, setActiveTab] = useState(0);
+  const handleTabClick = index => {
+    setActiveTab(index);
+    // add custom event here via props
+  };
+  const tabs = [{
+    label: formatMessage(messages.help_ai_tab),
+    icon: /*#__PURE__*/React.createElement(AiChatIcon, {
+      label: formatMessage(messages.help_ai_tab)
+    })
+  }, {
+    label: formatMessage(messages.help_search_tab),
+    icon: /*#__PURE__*/React.createElement(SearchIcon, {
+      label: formatMessage(messages.help_search_tab)
+    })
+  }];
+  const HelpLayoutWithAi = /*#__PURE__*/React.createElement(HelpLayout, {
     onCloseButtonClick: onClose,
-    isAiEnabled: true
-  }, /*#__PURE__*/React.createElement(HelpBodyContainer, null, /*#__PURE__*/React.createElement(HelpBodyAi, null, /*#__PURE__*/React.createElement(BackButton, {
+    isAiEnabled: isAiEnabled
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    activeTab: activeTab,
+    onTabClick: handleTabClick,
+    tabs: tabs
+  }), activeTab === 0 && /*#__PURE__*/React.createElement("div", null, "ai agent here"), activeTab === 1 && /*#__PURE__*/React.createElement(HelpBodyContainer, null, /*#__PURE__*/React.createElement(HelpBodyAi, null, /*#__PURE__*/React.createElement(BackButton, {
     onClick: handleOnBackButtonClick,
     isVisible: canNavigateBack
   }), onSearch && /*#__PURE__*/React.createElement(SearchInput, {
@@ -92,7 +122,8 @@ export const HelpContent = ({
     }, defaultOption));
   }))), /*#__PURE__*/React.createElement(WhatsNewResults, null), footer && /*#__PURE__*/React.createElement(HelpFooter, {
     "data-testid": "inside-footer"
-  }, footer))) : /*#__PURE__*/React.createElement(HelpLayout, {
+  }, footer)));
+  const HelpLayoutWithoutAi = /*#__PURE__*/React.createElement(HelpLayout, {
     onBackButtonClick: handleOnBackButtonClick,
     onCloseButtonClick: onClose,
     isBackbuttonVisible: canNavigateBack,
@@ -108,5 +139,6 @@ export const HelpContent = ({
       key: defaultOption.id
     }, defaultOption));
   }))), /*#__PURE__*/React.createElement(WhatsNewResults, null)));
+  return isAiEnabled ? HelpLayoutWithAi : HelpLayoutWithoutAi;
 };
-export default HelpContent;
+export default injectIntl(HelpContent);

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

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 const analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 const HelpContentButton = ({
   id = '',

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

@@ -21,7 +21,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';
 const packageName = "@atlaskit/help";
-const packageVersion = "7.14.2";
+const packageVersion = "7.14.4";
 const buttonStyles = css({
   padding: '0',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

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

@@ -23,7 +23,7 @@ import { useNavigationContext } from '../../contexts/navigationContext';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.2"
+  packageVersion: "7.14.4"
 };
 const 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

package/dist/es2019/components/Tabs/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { TabContainer, TabLabels, TabLabel } from './styled';
+import { Inline, Text } from '@atlaskit/primitives';
+const Tab = ({
+  label,
+  index,
+  onClick,
+  isActive,
+  icon
+}) => {
+  return /*#__PURE__*/React.createElement(TabLabel, {
+    isActive: isActive,
+    onClick: () => onClick(index)
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    alignBlock: "center",
+    alignInline: "center"
+  }, icon, /*#__PURE__*/React.createElement(Text, {
+    color: isActive ? 'color.text.selected' : 'color.text'
+  }, label)));
+};
+const Tabs = ({
+  activeTab,
+  onTabClick,
+  tabs
+}) => {
+  return /*#__PURE__*/React.createElement(TabContainer, null, /*#__PURE__*/React.createElement(TabLabels, null, tabs.map((tab, index) => {
+    return /*#__PURE__*/React.createElement(Tab, {
+      key: index,
+      label: tab.label,
+      index: index,
+      onClick: onTabClick,
+      isActive: activeTab === index,
+      icon: tab.icon
+    });
+  })));
+};
+export { Tabs };

package/dist/es2019/components/Tabs/styled.js

@@ -0,0 +1,31 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const TabContainer = styled.div({
+  width: '100%'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const TabLabels = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+
+// 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 TabLabel = styled.div(({
+  isActive
+}) => ({
+  flex: 1,
+  padding: "var(--ds-space-150, 12px)",
+  textAlign: 'center',
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  color: isActive ? "var(--ds-text-selected, #0C66E4)" : "var(--ds-text, #172B4D)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  borderBottom: isActive ? `1px solid ${"var(--ds-text-selected, #0C66E4)"}` : `1px solid ${"var(--ds-text-disabled, #091E424F)"}`
+}));