@pingux/astro 2.112.0-alpha.2 → 2.112.0-alpha.3

package/lib/cjs/components/AIComponents/Response/Response.stories.js

@@ -7,6 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _react = _interopRequireDefault(require("react"));
 var _ContentCopyIcon = _interopRequireDefault(require("@pingux/mdi-react/ContentCopyIcon"));
 var _TextIcon = _interopRequireDefault(require("@pingux/mdi-react/TextIcon"));
@@ -19,6 +20,7 @@ var _ResponseAttachment = _interopRequireDefault(require("./ResponseAttachment")
 var _ResponseList = _interopRequireDefault(require("./ResponseList"));
 var _ResponseText = _interopRequireDefault(require("./ResponseText"));
 var _ResponseToolbar = _interopRequireDefault(require("./ResponseToolbar"));
+var _ResponseToolbarIcon = _interopRequireDefault(require("./ResponseToolbarIcon"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Ai Components/Response',
@@ -27,28 +29,22 @@ var _default = {
 exports["default"] = _default;
 var testText = 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet';
 var Default = function Default(args) {
-  var toolBarProps = {
-    readButtonProps: {
-      title: 'Read aloud',
-      icon: _VolumeHighIcon["default"]
-    },
-    copyButtonProps: {
-      title: 'Copy',
-      icon: _ContentCopyIcon["default"]
-    },
-    goodButtonProps: {
-      title: 'Good Response',
-      icon: _ThumbUpOutlineIcon["default"]
-    },
-    badButtonProps: {
-      title: 'Bad Response',
-      icon: _ThumbDownOutlineIcon["default"]
-    },
-    rephraseButtonProps: {
-      title: 'Rephrase Answer',
-      icon: _TextIcon["default"]
-    }
-  };
+  var icons = [{
+    title: 'Read aloud',
+    icon: _VolumeHighIcon["default"]
+  }, {
+    title: 'Copy',
+    icon: _ContentCopyIcon["default"]
+  }, {
+    title: 'Good Response',
+    icon: _ThumbUpOutlineIcon["default"]
+  }, {
+    title: 'Bad Response',
+    icon: _ThumbDownOutlineIcon["default"]
+  }, {
+    title: 'Rephrase Answer',
+    icon: _TextIcon["default"]
+  }];
   var delay = 20;
   return (0, _react2.jsx)(_.AstroWrapper, (0, _extends2["default"])({}, args, {
     themeOverrides: [_.NextGenTheme]
@@ -56,7 +52,9 @@ var Default = function Default(args) {
     delay: delay
   }, (0, _react2.jsx)(_ResponseText["default"], {
     text: testText
-  }), (0, _react2.jsx)(_ResponseAttachment["default"], null), (0, _react2.jsx)(_ResponseText["default"], {
+  }), (0, _react2.jsx)(_ResponseAttachment["default"], {
+    text: "Attachment Text"
+  }), (0, _react2.jsx)(_ResponseText["default"], {
     text: testText
   }), (0, _react2.jsx)(_ResponseText["default"], {
     text: testText
@@ -77,6 +75,8 @@ var Default = function Default(args) {
     text: "list item 3"
   })), (0, _react2.jsx)(_ResponseText["default"], {
     text: "follow up text"
-  }), (0, _react2.jsx)(_ResponseToolbar["default"], toolBarProps)));
+  }), (0, _react2.jsx)(_ResponseToolbar["default"], null, (0, _map["default"])(icons).call(icons, function (icon) {
+    return (0, _react2.jsx)(_ResponseToolbarIcon["default"], icon);
+  }))));
 };
 exports.Default = Default;

package/lib/cjs/components/AIComponents/Response/Response.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import AccountGroupIcon from '@pingux/mdi-react/AccountGroupIcon';
-import AccountIcon from '@pingux/mdi-react/AccountIcon';
-import LockIcon from '@pingux/mdi-react/LockIcon';
-import SearchIcon from '@pingux/mdi-react/SearchIcon';
-import TagIcon from '@pingux/mdi-react/TagIcon';
+import CopyIcon from '@pingux/mdi-react/ContentCopyIcon';
+import TextIcon from '@pingux/mdi-react/TextIcon';
+import ThumbDownOutlineIcon from '@pingux/mdi-react/ThumbDownOutlineIcon';
+import ThumbUpOutlineIcon from '@pingux/mdi-react/ThumbUpOutlineIcon';
+import VolumeHighIcon from '@pingux/mdi-react/VolumeHighIcon';
 
 import { act, render, screen } from '../../../utils/testUtils/testWrapper';
 
@@ -12,6 +12,7 @@ import ResponseAttachment from './ResponseAttachment';
 import ResponseList from './ResponseList';
 import ResponseText from './ResponseText';
 import ResponseToolbar from './ResponseToolbar';
+import ResponseToolBarIcon from './ResponseToolbarIcon';
 
 const delay = 100;
 
@@ -24,28 +25,24 @@ const nextText = 'nextText';
 const attachmentWrapperId = 'wrapper-id';
 const toolbarId = 'id';
 
-const customProps = {
-  readButtonProps: {
-    title: 'Read aloud test',
-    icon: AccountGroupIcon,
-  },
-  copyButtonProps: {
-    title: 'Copy test',
-    icon: AccountIcon,
-  },
-  goodButtonProps: {
-    title: 'Good Response test',
-    icon: LockIcon,
-  },
-  badButtonProps: {
-    title: 'Bad Response test',
-    icon: SearchIcon,
-  },
-  rephraseButtonProps: {
-    title: 'Rephrase Answer test',
-    icon: TagIcon,
-  },
-};
+const attachmentText = 'Attachment Text';
+
+const icons = [{
+  title: 'Read aloud test',
+  icon: VolumeHighIcon,
+}, {
+  title: 'Copy test',
+  icon: CopyIcon,
+}, {
+  title: 'Good Response test',
+  icon: ThumbUpOutlineIcon,
+}, {
+  title: 'Bad Response test',
+  icon: ThumbDownOutlineIcon,
+}, {
+  title: 'Rephrase Answer test',
+  icon: TextIcon,
+}];
 
 const defaultProps = {
   containerProps: {
@@ -80,25 +77,25 @@ const getComponentWithList = props => render(
 const getComponentWithToolbar = props => render(
   <Response {...defaultProps} {...props}>
     <ResponseText text={defaultProps.text} />
-    <ResponseToolbar data-testid={toolbarId} />
+    <ResponseToolbar data-testid={toolbarId}>
+      {icons.map(icon => {
+        return (
+          <ResponseToolBarIcon key={icon.title} {...icon} />
+        );
+      })}
+    </ResponseToolbar>
+    <ResponseText text={defaultProps.text} />
   </Response>,
 );
 
 const getComponentWithAttachment = props => render(
   <Response {...defaultProps} {...props}>
     <ResponseText text={defaultProps.text} />
-    <ResponseAttachment wrapperProps={{ 'data-testid': attachmentWrapperId }} />
+    <ResponseAttachment text={attachmentText} wrapperProps={{ 'data-testid': attachmentWrapperId }} />
     <ResponseText text={defaultProps.text} />
   </Response>,
 );
 
-const getComponentWithToolbarCustomProps = props => render(
-  <Response {...defaultProps} {...props}>
-    <ResponseText text={defaultProps.text} />
-    <ResponseToolbar data-testid={toolbarId} {...customProps} />
-  </Response>,
-);
-
 test('component renders', () => {
   getComponent();
   const container = screen.getByTestId('container');
@@ -166,13 +163,19 @@ test('ResponseToolbar renders correctly', async () => {
     act(() => { jest.advanceTimersByTime(100); });
   }
   expect(toolbar).not.toHaveClass('is-not-loaded');
+  for (let i = 1; i < icons.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(screen.getByTitle(icons[i - 1].title)).toBeInTheDocument();
+    expect(screen.getByTitle(icons[i - 1].title)).not.toHaveClass('is-not-loaded');
+  }
+  act(() => { jest.advanceTimersByTime(2000); });
 });
 
 test('ResponseAttachment renders correctly', async () => {
   getComponentWithAttachment();
   act(() => { jest.advanceTimersByTime(10); });
 
-  expect(screen.getByText('Attachment text')).toBeInTheDocument();
+  expect(screen.getByText(attachmentText)).toBeInTheDocument();
   const wrapper = screen.getByTestId(attachmentWrapperId);
   expect(wrapper).toHaveClass('is-not-loaded');
   for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
@@ -180,36 +183,3 @@ test('ResponseAttachment renders correctly', async () => {
   }
   expect(wrapper).not.toHaveClass('is-not-loaded');
 });
-
-test('ResponseAttachment renders correctly, with custom props', async () => {
-  getComponentWithToolbarCustomProps();
-  act(() => { jest.advanceTimersByTime(10); });
-
-  expect(screen.getByTitle('Read aloud test')).toBeInTheDocument();
-  expect(screen.getByTitle('Copy test')).toBeInTheDocument();
-  expect(screen.getByTitle('Good Response test')).toBeInTheDocument();
-  expect(screen.getByTitle('Bad Response test')).toBeInTheDocument();
-  expect(screen.getByTitle('Rephrase Answer test')).toBeInTheDocument();
-});
-
-test('ResponseToolbar conditional rendering of IconButton based on title prop', async () => {
-  render(
-    <Response {...defaultProps}>
-      <ResponseText text={defaultProps.text} />
-      <ResponseToolbar
-        data-testid={toolbarId}
-        readButtonProps={{ title: 'Read aloud' }}
-        copyButtonProps={{ title: '' }}
-        goodButtonProps={{ title: 'Good Response' }}
-        badButtonProps={{ title: '' }}
-        rephraseButtonProps={{ title: 'Rephrase Answer' }}
-      />
-    </Response>,
-  );
-
-  expect(screen.getByTitle('Read aloud')).toBeInTheDocument();
-  expect(screen.queryByTitle('Copy')).not.toBeInTheDocument();
-  expect(screen.getByTitle('Good Response')).toBeInTheDocument();
-  expect(screen.queryByTitle('Bad Response')).not.toBeInTheDocument();
-  expect(screen.getByTitle('Rephrase Answer')).toBeInTheDocument();
-});

package/lib/cjs/components/AIComponents/Response/ResponseAttachment.js

@@ -25,7 +25,8 @@ var ResponseAttachment = function ResponseAttachment(props) {
     iconProps = props.iconProps,
     className = props.className,
     animationIndex = props.animationIndex,
-    shouldStartAnimation = props.shouldStartAnimation;
+    shouldStartAnimation = props.shouldStartAnimation,
+    text = props.text;
   var isLoaded = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
     if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
@@ -48,7 +49,7 @@ var ResponseAttachment = function ResponseAttachment(props) {
     title: {
       name: 'attachment icon'
     }
-  }, iconProps)), (0, _react2.jsx)(_index.Text, textProps, "Attachment text"));
+  }, iconProps)), (0, _react2.jsx)(_index.Text, textProps, text));
 };
 var _default = ResponseAttachment;
 exports["default"] = _default;

package/lib/cjs/components/AIComponents/Response/ResponseToolbar.js

@@ -9,49 +9,40 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _ContentCopyIcon = _interopRequireDefault(require("@pingux/mdi-react/ContentCopyIcon"));
-var _TextIcon = _interopRequireDefault(require("@pingux/mdi-react/TextIcon"));
-var _ThumbDownOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ThumbDownOutlineIcon"));
-var _ThumbUpOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ThumbUpOutlineIcon"));
-var _VolumeHighIcon = _interopRequireDefault(require("@pingux/mdi-react/VolumeHighIcon"));
 var _hooks = require("../../../hooks");
 var _index = require("../../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["parentIndex", "setAnimationIndex", "readButtonProps", "copyButtonProps", "goodButtonProps", "badButtonProps", "rephraseButtonProps", "className", "shouldStartAnimation", "animationIndex"];
+var _excluded = ["parentIndex", "setAnimationIndex", "children", "className", "shouldStartAnimation", "animationIndex", "delay"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var ResponseToolbarIcon = function ResponseToolbarIcon(props) {
-  var title = props.title,
-    icon = props.icon;
-  return (0, _react2.jsx)(_index.IconButton, {
-    title: title
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: icon,
-    title: {
-      name: title
-    }
-  }));
-};
 var ResponseToolbar = function ResponseToolbar(props) {
   var parentIndex = props.parentIndex,
     setAnimationIndex = props.setAnimationIndex,
-    readButtonProps = props.readButtonProps,
-    copyButtonProps = props.copyButtonProps,
-    goodButtonProps = props.goodButtonProps,
-    badButtonProps = props.badButtonProps,
-    rephraseButtonProps = props.rephraseButtonProps,
+    children = props.children,
     className = props.className,
     shouldStartAnimation = props.shouldStartAnimation,
     animationIndex = props.animationIndex,
+    delay = props.delay,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var isLoaded = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(-1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (index === (children === null || children === void 0 ? void 0 : children.length) && animationIndex !== undefined && setAnimationIndex) {
+      setAnimationIndex(animationIndex + 1);
+    }
+  }, [setAnimationIndex, index, shouldStartAnimation, animationIndex, children === null || children === void 0 ? void 0 : children.length]);
   (0, _react.useEffect)(function () {
     if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
       isLoaded.current = true;
-      setAnimationIndex(animationIndex + 1);
+      setIndex(0);
     }
   }, [setAnimationIndex, parentIndex, shouldStartAnimation, animationIndex]);
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
@@ -63,17 +54,14 @@ var ResponseToolbar = function ResponseToolbar(props) {
     gap: "sm",
     variant: "response.toolbar",
     className: classNames
-  }, others), (readButtonProps === null || readButtonProps === void 0 ? void 0 : readButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _VolumeHighIcon["default"]
-  }, readButtonProps)), (copyButtonProps === null || copyButtonProps === void 0 ? void 0 : copyButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _ContentCopyIcon["default"]
-  }, copyButtonProps)), (goodButtonProps === null || goodButtonProps === void 0 ? void 0 : goodButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _ThumbUpOutlineIcon["default"]
-  }, goodButtonProps)), (badButtonProps === null || badButtonProps === void 0 ? void 0 : badButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _ThumbDownOutlineIcon["default"]
-  }, badButtonProps)), (rephraseButtonProps === null || rephraseButtonProps === void 0 ? void 0 : rephraseButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _TextIcon["default"]
-  }, rephraseButtonProps)));
+  }, others), (0, _map["default"])(_react.Children).call(_react.Children, children, function (child, i) {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].cloneElement(child, {
+      setAnimationIndex: setIndex,
+      animationIndex: i,
+      parentIndex: index,
+      delay: delay
+    }));
+  }));
 };
 var _default = ResponseToolbar;
 exports["default"] = _default;

package/lib/cjs/components/AIComponents/Response/ResponseToolbarIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ResponseToolbarIconProps } from '../../../types/response';
+declare const ResponseToolbarIcon: (props: ResponseToolbarIconProps) => React.JSX.Element;
+export default ResponseToolbarIcon;

package/lib/cjs/components/AIComponents/Response/ResponseToolbarIcon.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../../hooks");
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "icon", "className", "parentIndex", "animationIndex", "setAnimationIndex", "delay", "iconProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ResponseToolbarIcon = function ResponseToolbarIcon(props) {
+  var title = props.title,
+    icon = props.icon,
+    className = props.className,
+    parentIndex = props.parentIndex,
+    animationIndex = props.animationIndex,
+    setAnimationIndex = props.setAnimationIndex,
+    delay = props.delay,
+    iconProps = props.iconProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var isLoaded = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (parentIndex === animationIndex && setAnimationIndex && parentIndex !== undefined) {
+      (0, _setTimeout2["default"])(function () {
+        isLoaded.current = true;
+        setAnimationIndex(parentIndex + 1);
+      }, delay);
+    }
+  }, [parentIndex, animationIndex, setAnimationIndex, delay]);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isNotLoaded: !isLoaded.current
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+    title: title,
+    className: classNames,
+    variant: "responseToolbar"
+  }, others), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    icon: icon,
+    title: {
+      name: title
+    }
+  }, iconProps)));
+};
+var _default = ResponseToolbarIcon;
+exports["default"] = _default;

package/lib/cjs/components/AIComponents/Response/index.d.ts

@@ -3,3 +3,4 @@ export { default as ResponseAttachment } from './ResponseAttachment';
 export { default as ResponseList } from './ResponseList';
 export { default as ResponseText } from './ResponseText';
 export { default as ResponseToolbar } from './ResponseToolbar';
+export { default as ResponseToolbarIcon } from './ResponseToolbarIcon';

package/lib/cjs/components/AIComponents/Response/index.js

@@ -29,6 +29,12 @@ _Object$defineProperty(exports, "ResponseToolbar", {
     return _ResponseToolbar["default"];
   }
 });
+_Object$defineProperty(exports, "ResponseToolbarIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ResponseToolbarIcon["default"];
+  }
+});
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -39,4 +45,5 @@ var _Response = _interopRequireDefault(require("./Response"));
 var _ResponseAttachment = _interopRequireDefault(require("./ResponseAttachment"));
 var _ResponseList = _interopRequireDefault(require("./ResponseList"));
 var _ResponseText = _interopRequireDefault(require("./ResponseText"));
-var _ResponseToolbar = _interopRequireDefault(require("./ResponseToolbar"));
+var _ResponseToolbar = _interopRequireDefault(require("./ResponseToolbar"));
+var _ResponseToolbarIcon = _interopRequireDefault(require("./ResponseToolbarIcon"));

package/lib/cjs/index.d.ts

@@ -16,6 +16,7 @@ export { default as ResponseAttachment } from './components/AIComponents/Respons
 export { default as ResponseList } from './components/AIComponents/Response/ResponseList';
 export { default as ResponseText } from './components/AIComponents/Response/ResponseText';
 export { default as ResponseToolbar } from './components/AIComponents/Response/ResponseToolbar';
+export { default as ResponseToolbarIcon } from './components/AIComponents/Response/ResponseToolbarIcon';
 export { default as Suggestions } from './components/AIComponents/Suggestions';
 export { default as Suggestion } from './components/AIComponents/Suggestions/Suggestion';
 export { default as ArrayField } from './components/ArrayField';

package/lib/cjs/index.js

@@ -26,6 +26,7 @@ var _exportNames = {
   ResponseList: true,
   ResponseText: true,
   ResponseToolbar: true,
+  ResponseToolbarIcon: true,
   Suggestions: true,
   Suggestion: true,
   ArrayField: true,
@@ -798,6 +799,12 @@ _Object$defineProperty(exports, "ResponseToolbar", {
     return _ResponseToolbar["default"];
   }
 });
+_Object$defineProperty(exports, "ResponseToolbarIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ResponseToolbarIcon["default"];
+  }
+});
 _Object$defineProperty(exports, "RockerButton", {
   enumerable: true,
   get: function get() {
@@ -1072,6 +1079,7 @@ var _ResponseAttachment = _interopRequireDefault(require("./components/AICompone
 var _ResponseList = _interopRequireDefault(require("./components/AIComponents/Response/ResponseList"));
 var _ResponseText = _interopRequireDefault(require("./components/AIComponents/Response/ResponseText"));
 var _ResponseToolbar = _interopRequireDefault(require("./components/AIComponents/Response/ResponseToolbar"));
+var _ResponseToolbarIcon = _interopRequireDefault(require("./components/AIComponents/Response/ResponseToolbarIcon"));
 var _Suggestions = _interopRequireDefault(require("./components/AIComponents/Suggestions"));
 var _Suggestion = _interopRequireDefault(require("./components/AIComponents/Suggestions/Suggestion"));
 var _ArrayField = _interopRequireWildcard(require("./components/ArrayField"));

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -783,6 +783,39 @@ declare const _default: {
                 transition: string;
                 outline: string;
             };
+            responseToolbar: {
+                '&.is-not-loaded': {
+                    display: string;
+                };
+                display: string;
+                cursor: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                border: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+            };
             modalCloseButton: {
                 position: string;
                 top: number;

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -550,6 +550,39 @@ declare const buttons: {
             transition: string;
             outline: string;
         };
+        responseToolbar: {
+            '&.is-not-loaded': {
+                display: string;
+            };
+            display: string;
+            cursor: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
         modalCloseButton: {
             position: string;
             top: number;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -250,6 +250,12 @@ var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   nextGen: _objectSpread({}, onyxIconButton),
   onyx: _objectSpread({}, onyxIconButton),
+  responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    '&.is-not-loaded': {
+      display: 'none'
+    },
+    display: 'inline-flex'
+  }),
   modalCloseButton: modalCloseButton,
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {

package/lib/cjs/types/response.d.ts

@@ -20,22 +20,22 @@ export interface ResponseAttachmentProps extends SharedResponseProps {
     iconProps?: IconProps;
     parentIndex?: number;
     className?: string;
+    text: string;
 }
 export interface ResponseListProps extends SharedResponseProps, BoxProps {
     children: ReactNode[];
     parentIndex?: number;
     delay?: number;
 }
-export interface ResponseProps {
+export interface ResponseProps extends BoxProps {
     containerProps?: BoxProps;
     iconProps?: IconProps;
     textProps?: ResponseTextProps;
     iconWrapperProps?: IconWrapperProps;
     shouldStartAnimation?: boolean;
-    children: ReactNode[];
     delay?: number;
 }
-export interface ResponseToolbarProps extends SharedResponseProps {
+export interface ResponseToolbarProps extends BoxProps, SharedResponseProps {
     readButtonProps?: IconButtonProps;
     copyButtonProps?: IconButtonProps;
     goodButtonProps?: IconButtonProps;
@@ -44,5 +44,12 @@ export interface ResponseToolbarProps extends SharedResponseProps {
     containerProps?: BoxProps;
     parentIndex?: number;
     className?: string;
+    delay?: number;
+    children: ReactNode[];
+}
+export interface ResponseToolbarIconProps extends IconButtonProps, SharedResponseProps {
+    delay?: number;
+    parentIndex?: number;
+    iconProps?: IconProps;
 }
 export {};

package/lib/components/AIComponents/Response/Response.stories.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import CopyIcon from '@pingux/mdi-react/ContentCopyIcon';
 import TextIcon from '@pingux/mdi-react/TextIcon';
@@ -11,6 +12,7 @@ import ResponseAttachment from './ResponseAttachment';
 import ResponseList from './ResponseList';
 import ResponseText from './ResponseText';
 import ResponseToolbar from './ResponseToolbar';
+import ResponseToolbarIcon from './ResponseToolbarIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Ai Components/Response',
@@ -18,28 +20,22 @@ export default {
 };
 var testText = 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet';
 export var Default = function Default(args) {
-  var toolBarProps = {
-    readButtonProps: {
-      title: 'Read aloud',
-      icon: VolumeHighIcon
-    },
-    copyButtonProps: {
-      title: 'Copy',
-      icon: CopyIcon
-    },
-    goodButtonProps: {
-      title: 'Good Response',
-      icon: ThumbUpOutlineIcon
-    },
-    badButtonProps: {
-      title: 'Bad Response',
-      icon: ThumbDownOutlineIcon
-    },
-    rephraseButtonProps: {
-      title: 'Rephrase Answer',
-      icon: TextIcon
-    }
-  };
+  var icons = [{
+    title: 'Read aloud',
+    icon: VolumeHighIcon
+  }, {
+    title: 'Copy',
+    icon: CopyIcon
+  }, {
+    title: 'Good Response',
+    icon: ThumbUpOutlineIcon
+  }, {
+    title: 'Bad Response',
+    icon: ThumbDownOutlineIcon
+  }, {
+    title: 'Rephrase Answer',
+    icon: TextIcon
+  }];
   var delay = 20;
   return ___EmotionJSX(AstroWrapper, _extends({}, args, {
     themeOverrides: [NextGenTheme]
@@ -47,7 +43,9 @@ export var Default = function Default(args) {
     delay: delay
   }, ___EmotionJSX(ResponseText, {
     text: testText
-  }), ___EmotionJSX(ResponseAttachment, null), ___EmotionJSX(ResponseText, {
+  }), ___EmotionJSX(ResponseAttachment, {
+    text: "Attachment Text"
+  }), ___EmotionJSX(ResponseText, {
     text: testText
   }), ___EmotionJSX(ResponseText, {
     text: testText
@@ -68,5 +66,7 @@ export var Default = function Default(args) {
     text: "list item 3"
   })), ___EmotionJSX(ResponseText, {
     text: "follow up text"
-  }), ___EmotionJSX(ResponseToolbar, toolBarProps)));
+  }), ___EmotionJSX(ResponseToolbar, null, _mapInstanceProperty(icons).call(icons, function (icon) {
+    return ___EmotionJSX(ResponseToolbarIcon, icon);
+  }))));
 };

package/lib/components/AIComponents/Response/Response.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import AccountGroupIcon from '@pingux/mdi-react/AccountGroupIcon';
-import AccountIcon from '@pingux/mdi-react/AccountIcon';
-import LockIcon from '@pingux/mdi-react/LockIcon';
-import SearchIcon from '@pingux/mdi-react/SearchIcon';
-import TagIcon from '@pingux/mdi-react/TagIcon';
+import CopyIcon from '@pingux/mdi-react/ContentCopyIcon';
+import TextIcon from '@pingux/mdi-react/TextIcon';
+import ThumbDownOutlineIcon from '@pingux/mdi-react/ThumbDownOutlineIcon';
+import ThumbUpOutlineIcon from '@pingux/mdi-react/ThumbUpOutlineIcon';
+import VolumeHighIcon from '@pingux/mdi-react/VolumeHighIcon';
 
 import { act, render, screen } from '../../../utils/testUtils/testWrapper';
 
@@ -12,6 +12,7 @@ import ResponseAttachment from './ResponseAttachment';
 import ResponseList from './ResponseList';
 import ResponseText from './ResponseText';
 import ResponseToolbar from './ResponseToolbar';
+import ResponseToolBarIcon from './ResponseToolbarIcon';
 
 const delay = 100;
 
@@ -24,28 +25,24 @@ const nextText = 'nextText';
 const attachmentWrapperId = 'wrapper-id';
 const toolbarId = 'id';
 
-const customProps = {
-  readButtonProps: {
-    title: 'Read aloud test',
-    icon: AccountGroupIcon,
-  },
-  copyButtonProps: {
-    title: 'Copy test',
-    icon: AccountIcon,
-  },
-  goodButtonProps: {
-    title: 'Good Response test',
-    icon: LockIcon,
-  },
-  badButtonProps: {
-    title: 'Bad Response test',
-    icon: SearchIcon,
-  },
-  rephraseButtonProps: {
-    title: 'Rephrase Answer test',
-    icon: TagIcon,
-  },
-};
+const attachmentText = 'Attachment Text';
+
+const icons = [{
+  title: 'Read aloud test',
+  icon: VolumeHighIcon,
+}, {
+  title: 'Copy test',
+  icon: CopyIcon,
+}, {
+  title: 'Good Response test',
+  icon: ThumbUpOutlineIcon,
+}, {
+  title: 'Bad Response test',
+  icon: ThumbDownOutlineIcon,
+}, {
+  title: 'Rephrase Answer test',
+  icon: TextIcon,
+}];
 
 const defaultProps = {
   containerProps: {
@@ -80,25 +77,25 @@ const getComponentWithList = props => render(
 const getComponentWithToolbar = props => render(
   <Response {...defaultProps} {...props}>
     <ResponseText text={defaultProps.text} />
-    <ResponseToolbar data-testid={toolbarId} />
+    <ResponseToolbar data-testid={toolbarId}>
+      {icons.map(icon => {
+        return (
+          <ResponseToolBarIcon key={icon.title} {...icon} />
+        );
+      })}
+    </ResponseToolbar>
+    <ResponseText text={defaultProps.text} />
   </Response>,
 );
 
 const getComponentWithAttachment = props => render(
   <Response {...defaultProps} {...props}>
     <ResponseText text={defaultProps.text} />
-    <ResponseAttachment wrapperProps={{ 'data-testid': attachmentWrapperId }} />
+    <ResponseAttachment text={attachmentText} wrapperProps={{ 'data-testid': attachmentWrapperId }} />
     <ResponseText text={defaultProps.text} />
   </Response>,
 );
 
-const getComponentWithToolbarCustomProps = props => render(
-  <Response {...defaultProps} {...props}>
-    <ResponseText text={defaultProps.text} />
-    <ResponseToolbar data-testid={toolbarId} {...customProps} />
-  </Response>,
-);
-
 test('component renders', () => {
   getComponent();
   const container = screen.getByTestId('container');
@@ -166,13 +163,19 @@ test('ResponseToolbar renders correctly', async () => {
     act(() => { jest.advanceTimersByTime(100); });
   }
   expect(toolbar).not.toHaveClass('is-not-loaded');
+  for (let i = 1; i < icons.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(screen.getByTitle(icons[i - 1].title)).toBeInTheDocument();
+    expect(screen.getByTitle(icons[i - 1].title)).not.toHaveClass('is-not-loaded');
+  }
+  act(() => { jest.advanceTimersByTime(2000); });
 });
 
 test('ResponseAttachment renders correctly', async () => {
   getComponentWithAttachment();
   act(() => { jest.advanceTimersByTime(10); });
 
-  expect(screen.getByText('Attachment text')).toBeInTheDocument();
+  expect(screen.getByText(attachmentText)).toBeInTheDocument();
   const wrapper = screen.getByTestId(attachmentWrapperId);
   expect(wrapper).toHaveClass('is-not-loaded');
   for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
@@ -180,36 +183,3 @@ test('ResponseAttachment renders correctly', async () => {
   }
   expect(wrapper).not.toHaveClass('is-not-loaded');
 });
-
-test('ResponseAttachment renders correctly, with custom props', async () => {
-  getComponentWithToolbarCustomProps();
-  act(() => { jest.advanceTimersByTime(10); });
-
-  expect(screen.getByTitle('Read aloud test')).toBeInTheDocument();
-  expect(screen.getByTitle('Copy test')).toBeInTheDocument();
-  expect(screen.getByTitle('Good Response test')).toBeInTheDocument();
-  expect(screen.getByTitle('Bad Response test')).toBeInTheDocument();
-  expect(screen.getByTitle('Rephrase Answer test')).toBeInTheDocument();
-});
-
-test('ResponseToolbar conditional rendering of IconButton based on title prop', async () => {
-  render(
-    <Response {...defaultProps}>
-      <ResponseText text={defaultProps.text} />
-      <ResponseToolbar
-        data-testid={toolbarId}
-        readButtonProps={{ title: 'Read aloud' }}
-        copyButtonProps={{ title: '' }}
-        goodButtonProps={{ title: 'Good Response' }}
-        badButtonProps={{ title: '' }}
-        rephraseButtonProps={{ title: 'Rephrase Answer' }}
-      />
-    </Response>,
-  );
-
-  expect(screen.getByTitle('Read aloud')).toBeInTheDocument();
-  expect(screen.queryByTitle('Copy')).not.toBeInTheDocument();
-  expect(screen.getByTitle('Good Response')).toBeInTheDocument();
-  expect(screen.queryByTitle('Bad Response')).not.toBeInTheDocument();
-  expect(screen.getByTitle('Rephrase Answer')).toBeInTheDocument();
-});

package/lib/components/AIComponents/Response/ResponseAttachment.js

@@ -12,7 +12,8 @@ var ResponseAttachment = function ResponseAttachment(props) {
     iconProps = props.iconProps,
     className = props.className,
     animationIndex = props.animationIndex,
-    shouldStartAnimation = props.shouldStartAnimation;
+    shouldStartAnimation = props.shouldStartAnimation,
+    text = props.text;
   var isLoaded = useRef(false);
   useEffect(function () {
     if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
@@ -35,6 +36,6 @@ var ResponseAttachment = function ResponseAttachment(props) {
     title: {
       name: 'attachment icon'
     }
-  }, iconProps)), ___EmotionJSX(Text, textProps, "Attachment text"));
+  }, iconProps)), ___EmotionJSX(Text, textProps, text));
 };
 export default ResponseAttachment;

package/lib/components/AIComponents/Response/ResponseToolbar.js

@@ -1,44 +1,35 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["parentIndex", "setAnimationIndex", "readButtonProps", "copyButtonProps", "goodButtonProps", "badButtonProps", "rephraseButtonProps", "className", "shouldStartAnimation", "animationIndex"];
-import React, { useEffect, useRef } from 'react';
-import CopyIcon from '@pingux/mdi-react/ContentCopyIcon';
-import TextIcon from '@pingux/mdi-react/TextIcon';
-import ThumbDownOutlineIcon from '@pingux/mdi-react/ThumbDownOutlineIcon';
-import ThumbUpOutlineIcon from '@pingux/mdi-react/ThumbUpOutlineIcon';
-import VolumeHighIcon from '@pingux/mdi-react/VolumeHighIcon';
+var _excluded = ["parentIndex", "setAnimationIndex", "children", "className", "shouldStartAnimation", "animationIndex", "delay"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { Children, useEffect, useRef, useState } from 'react';
 import { useStatusClasses } from '../../../hooks';
-import { Box, Icon, IconButton } from '../../../index';
+import { Box } from '../../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ResponseToolbarIcon = function ResponseToolbarIcon(props) {
-  var title = props.title,
-    icon = props.icon;
-  return ___EmotionJSX(IconButton, {
-    title: title
-  }, ___EmotionJSX(Icon, {
-    icon: icon,
-    title: {
-      name: title
-    }
-  }));
-};
 var ResponseToolbar = function ResponseToolbar(props) {
   var parentIndex = props.parentIndex,
     setAnimationIndex = props.setAnimationIndex,
-    readButtonProps = props.readButtonProps,
-    copyButtonProps = props.copyButtonProps,
-    goodButtonProps = props.goodButtonProps,
-    badButtonProps = props.badButtonProps,
-    rephraseButtonProps = props.rephraseButtonProps,
+    children = props.children,
     className = props.className,
     shouldStartAnimation = props.shouldStartAnimation,
     animationIndex = props.animationIndex,
+    delay = props.delay,
     others = _objectWithoutProperties(props, _excluded);
   var isLoaded = useRef(false);
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  useEffect(function () {
+    if (index === (children === null || children === void 0 ? void 0 : children.length) && animationIndex !== undefined && setAnimationIndex) {
+      setAnimationIndex(animationIndex + 1);
+    }
+  }, [setAnimationIndex, index, shouldStartAnimation, animationIndex, children === null || children === void 0 ? void 0 : children.length]);
   useEffect(function () {
     if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
       isLoaded.current = true;
-      setAnimationIndex(animationIndex + 1);
+      setIndex(0);
     }
   }, [setAnimationIndex, parentIndex, shouldStartAnimation, animationIndex]);
   var _useStatusClasses = useStatusClasses(className, {
@@ -50,16 +41,13 @@ var ResponseToolbar = function ResponseToolbar(props) {
     gap: "sm",
     variant: "response.toolbar",
     className: classNames
-  }, others), (readButtonProps === null || readButtonProps === void 0 ? void 0 : readButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: VolumeHighIcon
-  }, readButtonProps)), (copyButtonProps === null || copyButtonProps === void 0 ? void 0 : copyButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: CopyIcon
-  }, copyButtonProps)), (goodButtonProps === null || goodButtonProps === void 0 ? void 0 : goodButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: ThumbUpOutlineIcon
-  }, goodButtonProps)), (badButtonProps === null || badButtonProps === void 0 ? void 0 : badButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: ThumbDownOutlineIcon
-  }, badButtonProps)), (rephraseButtonProps === null || rephraseButtonProps === void 0 ? void 0 : rephraseButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: TextIcon
-  }, rephraseButtonProps)));
+  }, others), _mapInstanceProperty(Children).call(Children, children, function (child, i) {
+    return ___EmotionJSX(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
+      setAnimationIndex: setIndex,
+      animationIndex: i,
+      parentIndex: index,
+      delay: delay
+    }));
+  }));
 };
 export default ResponseToolbar;

package/lib/components/AIComponents/Response/ResponseToolbarIcon.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["title", "icon", "className", "parentIndex", "animationIndex", "setAnimationIndex", "delay", "iconProps"];
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import React, { useEffect, useRef } from 'react';
+import { useStatusClasses } from '../../../hooks';
+import { Icon, IconButton } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ResponseToolbarIcon = function ResponseToolbarIcon(props) {
+  var title = props.title,
+    icon = props.icon,
+    className = props.className,
+    parentIndex = props.parentIndex,
+    animationIndex = props.animationIndex,
+    setAnimationIndex = props.setAnimationIndex,
+    delay = props.delay,
+    iconProps = props.iconProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var isLoaded = useRef(false);
+  useEffect(function () {
+    if (parentIndex === animationIndex && setAnimationIndex && parentIndex !== undefined) {
+      _setTimeout(function () {
+        isLoaded.current = true;
+        setAnimationIndex(parentIndex + 1);
+      }, delay);
+    }
+  }, [parentIndex, animationIndex, setAnimationIndex, delay]);
+  var _useStatusClasses = useStatusClasses(className, {
+      isNotLoaded: !isLoaded.current
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(IconButton, _extends({
+    title: title,
+    className: classNames,
+    variant: "responseToolbar"
+  }, others), ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    title: {
+      name: title
+    }
+  }, iconProps)));
+};
+export default ResponseToolbarIcon;

package/lib/components/AIComponents/Response/index.js

@@ -2,4 +2,5 @@ export { default } from './Response';
 export { default as ResponseAttachment } from './ResponseAttachment';
 export { default as ResponseList } from './ResponseList';
 export { default as ResponseText } from './ResponseText';
-export { default as ResponseToolbar } from './ResponseToolbar';
+export { default as ResponseToolbar } from './ResponseToolbar';
+export { default as ResponseToolbarIcon } from './ResponseToolbarIcon';

package/lib/index.js

@@ -20,6 +20,7 @@ export { default as ResponseAttachment } from './components/AIComponents/Respons
 export { default as ResponseList } from './components/AIComponents/Response/ResponseList';
 export { default as ResponseText } from './components/AIComponents/Response/ResponseText';
 export { default as ResponseToolbar } from './components/AIComponents/Response/ResponseToolbar';
+export { default as ResponseToolbarIcon } from './components/AIComponents/Response/ResponseToolbarIcon';
 export { default as Suggestions } from './components/AIComponents/Suggestions';
 export { default as Suggestion } from './components/AIComponents/Suggestions/Suggestion';
 export { default as ArrayField } from './components/ArrayField';

package/lib/styles/themes/next-gen/variants/button.js

@@ -243,6 +243,12 @@ var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   nextGen: _objectSpread({}, onyxIconButton),
   onyx: _objectSpread({}, onyxIconButton),
+  responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    '&.is-not-loaded': {
+      display: 'none'
+    },
+    display: 'inline-flex'
+  }),
   modalCloseButton: modalCloseButton,
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.112.0-alpha.2",
+  "version": "2.112.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",