@pingux/astro 2.104.0-alpha.1 → 2.104.0-alpha.3

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

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

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

@@ -0,0 +1,52 @@
+"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 _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 _react = _interopRequireWildcard(require("react"));
+var _AutoAwesomeOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AutoAwesomeOutlineIcon"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+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 Response = function Response(props) {
+  var children = props.children,
+    containerProps = props.containerProps,
+    iconProps = props.iconProps,
+    iconWrapperProps = props.iconWrapperProps,
+    _props$delay = props.delay,
+    delay = _props$delay === void 0 ? 10 : _props$delay;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    isRow: true,
+    gap: "md"
+  }, containerProps), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, iconWrapperProps, {
+    variant: "response.iconWrapper"
+  }), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    icon: _AutoAwesomeOutlineIcon["default"]
+  }, iconProps))), (0, _react2.jsx)(_index.Box, {
+    gap: "md"
+  }, (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, {
+      shouldStartAnimation: index === i,
+      setAnimationIndex: setIndex,
+      animationIndex: i,
+      parentIndex: index,
+      delay: delay
+    }));
+  })));
+};
+var _default = Response;
+exports["default"] = _default;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: (props: import("../../../types/response").ResponseProps) => React.JSX.Element;
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(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 _ = require("../../..");
+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 _react2 = require("@emotion/react");
+var _default = {
+  title: 'Ai Components/Response',
+  component: _Response["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 delay = 20;
+  return (0, _react2.jsx)(_.AstroWrapper, (0, _extends2["default"])({}, args, {
+    themeOverrides: [_.NextGenTheme]
+  }), (0, _react2.jsx)(_Response["default"], {
+    delay: delay
+  }, (0, _react2.jsx)(_ResponseText["default"], {
+    text: testText
+  }), (0, _react2.jsx)(_ResponseAttachment["default"], null), (0, _react2.jsx)(_ResponseText["default"], {
+    text: testText
+  }), (0, _react2.jsx)(_ResponseText["default"], {
+    text: testText
+  }), (0, _react2.jsx)(_ResponseList["default"], null, (0, _react2.jsx)(_ResponseText["default"], {
+    as: "h5",
+    sx: {
+      fontWeight: 2
+    },
+    text: "heading"
+  }), (0, _react2.jsx)(_ResponseText["default"], {
+    as: "li",
+    text: "list item 1"
+  }), (0, _react2.jsx)(_ResponseText["default"], {
+    as: "li",
+    text: "list item 2"
+  }), (0, _react2.jsx)(_ResponseText["default"], {
+    as: "li",
+    text: "list item 3"
+  })), (0, _react2.jsx)(_ResponseText["default"], {
+    text: "follow up text"
+  }), (0, _react2.jsx)(_ResponseToolbar["default"], toolBarProps)));
+};
+exports.Default = Default;

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

@@ -0,0 +1,215 @@
+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 { act, render, screen } from '../../../utils/testUtils/testWrapper';
+
+import Response from './Response';
+import ResponseAttachment from './ResponseAttachment';
+import ResponseList from './ResponseList';
+import ResponseText from './ResponseText';
+import ResponseToolbar from './ResponseToolbar';
+
+const delay = 100;
+
+const headingText = 'heading';
+
+const listItem1 = 'list item 1';
+const listItem2 = 'list item 2';
+const listItem3 = 'list item 3';
+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 defaultProps = {
+  containerProps: {
+    'data-testid': 'container',
+  },
+  text: 'Hello',
+  delay,
+};
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+const getComponent = props => render(
+  <Response {...defaultProps} {...props}>
+    <ResponseText text={defaultProps.text} />
+  </Response>,
+);
+
+const getComponentWithList = props => render(
+  <Response {...defaultProps} {...props}>
+    <ResponseText text={headingText} delay={delay} />
+    <ResponseList as="ul">
+      <ResponseText as="li" text={listItem1} />
+      <ResponseText as="li" text={listItem2} />
+      <ResponseText as="li" text={listItem3} />
+    </ResponseList>
+    <ResponseText text={nextText} />
+  </Response>,
+);
+
+const getComponentWithToolbar = props => render(
+  <Response {...defaultProps} {...props}>
+    <ResponseText text={defaultProps.text} />
+    <ResponseToolbar data-testid={toolbarId} />
+  </Response>,
+);
+
+const getComponentWithAttachment = props => render(
+  <Response {...defaultProps} {...props}>
+    <ResponseText text={defaultProps.text} />
+    <ResponseAttachment 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');
+
+  expect(container).toBeInTheDocument();
+});
+
+test('delay prop works correctly', async () => {
+  getComponent();
+
+  expect(screen.queryByText(defaultProps.text)).not.toBeInTheDocument();
+  for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(screen.queryByText(defaultProps.text.slice(0, i))).toBeInTheDocument();
+  }
+  expect(screen.queryByText(defaultProps.text)).toBeInTheDocument();
+});
+
+test('delay prop works correctly, with list', async () => {
+  getComponentWithList();
+
+  expect(screen.queryByText(headingText)).not.toBeInTheDocument();
+  for (let i = 1; i < headingText.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(screen.queryByText(headingText.slice(0, i))).toBeInTheDocument();
+  }
+  expect(screen.queryByText(headingText)).toBeInTheDocument();
+
+  // advance through the listItems
+  for (let i = 1; i < (listItem1.length * 3) + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+  }
+  expect(screen.queryByText(nextText)).not.toBeInTheDocument();
+
+  // ensure that the subsequent text renders correctly
+  for (let i = 1; i < nextText.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(screen.queryByText(nextText.slice(0, i))).toBeInTheDocument();
+  }
+  expect(screen.queryByText(nextText)).toBeInTheDocument();
+});
+
+test('default delay prop works correctly', async () => {
+  render(
+    <Response {...defaultProps} delay={undefined}>
+      <ResponseText text={defaultProps.text} />
+    </Response>,
+  );
+
+  expect(screen.queryByText(defaultProps.text)).not.toBeInTheDocument();
+  for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(10); });
+    expect(screen.queryByText(defaultProps.text.slice(0, i))).toBeInTheDocument();
+  }
+  expect(screen.queryByText(defaultProps.text)).toBeInTheDocument();
+});
+
+test('ResponseToolbar renders correctly', async () => {
+  getComponentWithToolbar();
+
+  const toolbar = screen.getByTestId(toolbarId);
+  expect(toolbar).toHaveClass('is-not-loaded');
+
+  for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+  }
+  expect(toolbar).not.toHaveClass('is-not-loaded');
+});
+
+test('ResponseAttachment renders correctly', async () => {
+  getComponentWithAttachment();
+  act(() => { jest.advanceTimersByTime(10); });
+
+  expect(screen.getByText('Attachment text')).toBeInTheDocument();
+  const wrapper = screen.getByTestId(attachmentWrapperId);
+  expect(wrapper).toHaveClass('is-not-loaded');
+  for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+  }
+  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.d.ts

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

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

@@ -0,0 +1,54 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _FileTableOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/FileTableOutlineIcon"));
+var _hooks = require("../../../hooks");
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+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 ResponseAttachment = function ResponseAttachment(props) {
+  var setAnimationIndex = props.setAnimationIndex,
+    parentIndex = props.parentIndex,
+    wrapperProps = props.wrapperProps,
+    textProps = props.textProps,
+    iconProps = props.iconProps,
+    className = props.className,
+    animationIndex = props.animationIndex,
+    shouldStartAnimation = props.shouldStartAnimation;
+  var isLoaded = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
+      isLoaded.current = true;
+      setAnimationIndex(animationIndex + 1);
+    }
+  }, [setAnimationIndex, parentIndex, animationIndex, shouldStartAnimation]);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isNotLoaded: !isLoaded.current
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    isRow: true
+  }, wrapperProps, {
+    className: classNames,
+    variant: "response.attachmentWrapper"
+  }), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    color: "green",
+    icon: _FileTableOutlineIcon["default"],
+    title: {
+      name: 'attachment icon'
+    }
+  }, iconProps)), (0, _react2.jsx)(_index.Text, textProps, "Attachment text"));
+};
+var _default = ResponseAttachment;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,66 @@
+"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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "parentIndex", "setAnimationIndex", "shouldStartAnimation", "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 ResponseList = function ResponseList(props) {
+  var _useState = (0, _react.useState)(-1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var children = props.children,
+    parentIndex = props.parentIndex,
+    setAnimationIndex = props.setAnimationIndex,
+    shouldStartAnimation = props.shouldStartAnimation,
+    delay = props.delay,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  (0, _react.useEffect)(function () {
+    if (children && setAnimationIndex && index === children.length && parentIndex) {
+      setAnimationIndex(parentIndex + 1);
+    }
+  }, [index]);
+  (0, _react.useEffect)(function () {
+    if (shouldStartAnimation) {
+      setIndex(0);
+    }
+  }, [shouldStartAnimation]);
+  return (0, _react2.jsx)(_index.Box, others, (0, _react2.jsx)(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].cloneElement(children[0], {
+    shouldStartAnimation: index === 0,
+    setAnimationIndex: setIndex,
+    animationIndex: 0,
+    delay: delay
+  })), (0, _react2.jsx)(_index.Box, {
+    as: "ul",
+    sx: {
+      pl: 'md',
+      listStyleType: 'disc',
+      listStylePosition: 'inside'
+    }
+  }, (0, _map["default"])(_react.Children).call(_react.Children, (0, _slice["default"])(children).call(children, 1, children.length), function (child, i) {
+    return /*#__PURE__*/_react["default"].cloneElement(child, {
+      shouldStartAnimation: index === i + 1,
+      setAnimationIndex: setIndex,
+      animationIndex: i + 1,
+      delay: delay,
+      isListItem: true
+    });
+  })));
+};
+var _default = ResponseList;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../../../hooks");
+var _useTypeAnimation = _interopRequireDefault(require("../../../hooks/useTypeAnimation/useTypeAnimation"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["delay", "text", "shouldStartAnimation", "setAnimationIndex", "animationIndex", "isListItem", "className"];
+var ResponseText = function ResponseText(props) {
+  var delay = props.delay,
+    text = props.text,
+    shouldStartAnimation = props.shouldStartAnimation,
+    setAnimationIndex = props.setAnimationIndex,
+    animationIndex = props.animationIndex,
+    isListItem = props.isListItem,
+    className = props.className,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var animationProps = {
+    delay: delay,
+    text: text,
+    setAnimationIndex: setAnimationIndex,
+    animationIndex: animationIndex,
+    shouldStartAnimation: shouldStartAnimation
+  };
+  var currentText = (0, _useTypeAnimation["default"])(animationProps);
+  var hasBullet = isListItem && currentText.length > 0;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      hasBullet: hasBullet
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, others, {
+    role: isListItem ? 'listitem' : '',
+    variant: "response",
+    className: classNames
+  }), currentText);
+};
+var _default = ResponseText;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,79 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+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"];
+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,
+    className = props.className,
+    shouldStartAnimation = props.shouldStartAnimation,
+    animationIndex = props.animationIndex,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var isLoaded = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
+      isLoaded.current = true;
+      setAnimationIndex(animationIndex + 1);
+    }
+  }, [setAnimationIndex, parentIndex, shouldStartAnimation, animationIndex]);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isNotLoaded: !isLoaded.current
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    isRow: true,
+    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)));
+};
+var _default = ResponseToolbar;
+exports["default"] = _default;

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

@@ -0,0 +1,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';