@pingux/astro 2.104.0-alpha.0 → 2.104.0-alpha.2

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

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React 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';
+import { AstroWrapper, NextGenTheme } from '../../..';
+import Response from './Response';
+import ResponseAttachment from './ResponseAttachment';
+import ResponseList from './ResponseList';
+import ResponseText from './ResponseText';
+import ResponseToolbar from './ResponseToolbar';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Ai Components/Response',
+  component: Response
+};
+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 delay = 20;
+  return ___EmotionJSX(AstroWrapper, _extends({}, args, {
+    themeOverrides: [NextGenTheme]
+  }), ___EmotionJSX(Response, {
+    delay: delay
+  }, ___EmotionJSX(ResponseText, {
+    text: testText
+  }), ___EmotionJSX(ResponseAttachment, null), ___EmotionJSX(ResponseText, {
+    text: testText
+  }), ___EmotionJSX(ResponseText, {
+    text: testText
+  }), ___EmotionJSX(ResponseList, null, ___EmotionJSX(ResponseText, {
+    as: "h5",
+    sx: {
+      fontWeight: 2
+    },
+    text: "heading"
+  }), ___EmotionJSX(ResponseText, {
+    as: "li",
+    text: "list item 1"
+  }), ___EmotionJSX(ResponseText, {
+    as: "li",
+    text: "list item 2"
+  }), ___EmotionJSX(ResponseText, {
+    as: "li",
+    text: "list item 3"
+  })), ___EmotionJSX(ResponseText, {
+    text: "follow up text"
+  }), ___EmotionJSX(ResponseToolbar, toolBarProps)));
+};

package/lib/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/components/AIComponents/Response/ResponseAttachment.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useEffect, useRef } from 'react';
+import FileTableOutlineIcon from '@pingux/mdi-react/FileTableOutlineIcon';
+import { useStatusClasses } from '../../../hooks';
+import { Box, Icon, Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+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 = useRef(false);
+  useEffect(function () {
+    if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
+      isLoaded.current = true;
+      setAnimationIndex(animationIndex + 1);
+    }
+  }, [setAnimationIndex, parentIndex, animationIndex, shouldStartAnimation]);
+  var _useStatusClasses = useStatusClasses(className, {
+      isNotLoaded: !isLoaded.current
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({
+    isRow: true
+  }, wrapperProps, {
+    className: classNames,
+    variant: "response.attachmentWrapper"
+  }), ___EmotionJSX(Icon, _extends({
+    color: "green",
+    icon: FileTableOutlineIcon,
+    title: {
+      name: 'attachment icon'
+    }
+  }, iconProps)), ___EmotionJSX(Text, textProps, "Attachment text"));
+};
+export default ResponseAttachment;

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

@@ -0,0 +1,52 @@
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+var _excluded = ["children", "parentIndex", "setAnimationIndex", "shouldStartAnimation", "delay"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import React, { Children, useEffect, useState } from 'react';
+import { Box } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ResponseList = function ResponseList(props) {
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_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 = _objectWithoutProperties(props, _excluded);
+  useEffect(function () {
+    if (children && setAnimationIndex && index === children.length && parentIndex) {
+      setAnimationIndex(parentIndex + 1);
+    }
+  }, [index]);
+  useEffect(function () {
+    if (shouldStartAnimation) {
+      setIndex(0);
+    }
+  }, [shouldStartAnimation]);
+  return ___EmotionJSX(Box, others, ___EmotionJSX(React.Fragment, null, /*#__PURE__*/React.cloneElement(children[0], {
+    shouldStartAnimation: index === 0,
+    setAnimationIndex: setIndex,
+    animationIndex: 0,
+    delay: delay
+  })), ___EmotionJSX(Box, {
+    as: "ul",
+    sx: {
+      pl: 'md',
+      listStyleType: 'disc',
+      listStylePosition: 'inside'
+    }
+  }, _mapInstanceProperty(Children).call(Children, _sliceInstanceProperty(children).call(children, 1, children.length), function (child, i) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      shouldStartAnimation: index === i + 1,
+      setAnimationIndex: setIndex,
+      animationIndex: i + 1,
+      delay: delay,
+      isListItem: true
+    });
+  })));
+};
+export default ResponseList;

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

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["delay", "text", "shouldStartAnimation", "setAnimationIndex", "animationIndex", "isListItem", "className"];
+import React from 'react';
+import { useStatusClasses } from '../../../hooks';
+import useTypeAnimation from '../../../hooks/useTypeAnimation/useTypeAnimation';
+import { Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+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 = _objectWithoutProperties(props, _excluded);
+  var animationProps = {
+    delay: delay,
+    text: text,
+    setAnimationIndex: setAnimationIndex,
+    animationIndex: animationIndex,
+    shouldStartAnimation: shouldStartAnimation
+  };
+  var currentText = useTypeAnimation(animationProps);
+  var hasBullet = isListItem && currentText.length > 0;
+  var _useStatusClasses = useStatusClasses(className, {
+      hasBullet: hasBullet
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Text, _extends({}, others, {
+    role: isListItem ? 'listitem' : '',
+    variant: "response",
+    className: classNames
+  }), currentText);
+};
+export default ResponseText;

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

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+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';
+import { useStatusClasses } from '../../../hooks';
+import { Box, Icon, IconButton } 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,
+    className = props.className,
+    shouldStartAnimation = props.shouldStartAnimation,
+    animationIndex = props.animationIndex,
+    others = _objectWithoutProperties(props, _excluded);
+  var isLoaded = useRef(false);
+  useEffect(function () {
+    if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
+      isLoaded.current = true;
+      setAnimationIndex(animationIndex + 1);
+    }
+  }, [setAnimationIndex, parentIndex, shouldStartAnimation, animationIndex]);
+  var _useStatusClasses = useStatusClasses(className, {
+      isNotLoaded: !isLoaded.current
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({
+    isRow: true,
+    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)));
+};
+export default ResponseToolbar;

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

@@ -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';

package/lib/components/Image/Image.stories.js

@@ -6,7 +6,7 @@ import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Image } from '../../index';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
-import { chiefIdentityChampions, pingImg } from '../../utils/devUtils/constants/images';
+import { chiefIdentityChampions, fallbackImg, pingImg } from '../../utils/devUtils/constants/images';
 import ImageReadme from './Image.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -77,7 +77,7 @@ export var Disabled = function Disabled() {
 };
 export var FallbackImage = function FallbackImage() {
   return ___EmotionJSX(Image, {
-    fallbackImage: pingImg,
+    fallbackImage: fallbackImg,
     fallbackAlt: "Ping Identity",
     src: "https://deelay.me/7000/https://picsum.photos/150/150",
     sx: {

package/lib/hooks/useTypeAnimation/index.js

@@ -0,0 +1 @@
+export { default } from './useTypeAnimation';

package/lib/hooks/useTypeAnimation/useTypeAnimation.js

@@ -0,0 +1,41 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import { useEffect, useState } from 'react';
+var useTypeAnimation = function useTypeAnimation(_ref) {
+  var shouldStartAnimation = _ref.shouldStartAnimation,
+    text = _ref.text,
+    delay = _ref.delay,
+    setAnimationIndex = _ref.setAnimationIndex,
+    animationIndex = _ref.animationIndex;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentText = _useState2[0],
+    setCurrentText = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentIndex = _useState4[0],
+    setCurrentIndex = _useState4[1];
+  useEffect(function () {
+    if (shouldStartAnimation && text && currentIndex < text.length) {
+      var timeout = _setTimeout(function () {
+        setCurrentText(function (prevText) {
+          return prevText + text[currentIndex];
+        });
+        setCurrentIndex(function (prevIndex) {
+          return prevIndex + 1;
+        });
+      }, delay);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    }
+    if (text && currentIndex === text.length) {
+      setAnimationIndex(animationIndex + 1);
+    }
+    return function () {
+      return null;
+    };
+  }, [currentIndex, delay, text, shouldStartAnimation, setAnimationIndex, animationIndex]);
+  return currentText;
+};
+export default useTypeAnimation;

package/lib/hooks/useTypeAnimation/useTypeAnimation.test.js

@@ -0,0 +1,63 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import { act, renderHook } from '@testing-library/react-hooks';
+import useTypeAnimation from './useTypeAnimation';
+var setAnimationIndex = jest.fn();
+var animationIndex = 0;
+var text = 'Hello';
+var delay = 100;
+var defaultProps = {
+  text: text,
+  delay: delay,
+  setAnimationIndex: setAnimationIndex,
+  animationIndex: animationIndex,
+  shouldStartAnimation: true
+};
+describe('useTypeAnimation', function () {
+  beforeEach(function () {
+    jest.useFakeTimers();
+  });
+  afterEach(function () {
+    jest.useRealTimers();
+  });
+  it('should type out text with delay', function () {
+    var _renderHook = renderHook(function () {
+        return useTypeAnimation(defaultProps);
+      }),
+      result = _renderHook.result;
+    expect(result.current).toBe('');
+    for (var i = 0; i < text.length; i += 1) {
+      act(function () {
+        jest.advanceTimersByTime(delay);
+      });
+      expect(result.current).toBe(_sliceInstanceProperty(text).call(text, 0, i + 1));
+    }
+    expect(result.current).toBe(text);
+  });
+  it('should NOT render text when shouldStartAnimation = false', function () {
+    var _renderHook2 = renderHook(function () {
+        return useTypeAnimation(_objectSpread(_objectSpread({}, defaultProps), {}, {
+          shouldStartAnimation: false
+        }));
+      }),
+      result = _renderHook2.result;
+    expect(result.current).toBe('');
+    for (var i = 0; i < text.length; i += 1) {
+      act(function () {
+        jest.advanceTimersByTime(delay);
+      });
+      expect(result.current).toBe('');
+    }
+    expect(result.current).toBe('');
+  });
+});

package/lib/index.js

@@ -11,6 +11,11 @@ export * from './components/AccordionGroup';
 export { default as AccordionItem } from './components/AccordionItem';
 export * from './components/AccordionItem';
 export { default as Prompt } from './components/AIComponents/Prompt';
+export { default as Response } from './components/AIComponents/Response';
+export { default as ResponseAttachment } from './components/AIComponents/Response/ResponseAttachment';
+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 ArrayField } from './components/ArrayField';
 export * from './components/ArrayField';
 export { default as AstroWrapper } from './components/AstroProvider';

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -9,5 +9,5 @@ export var componentSpecificNextGenBlacklist = {
   TextField: ['Success'],
   OverlayPanel: ['Expandable']
 };
-export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt'];
+export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'Response'];
 export default nextGenConvertedComponents;

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

@@ -0,0 +1,35 @@
+var iconWrapper = {
+  border: '1px solid',
+  p: 'xs',
+  borderColor: 'gray-200',
+  borderRadius: '50%',
+  alignContent: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '32px',
+  height: '32px',
+  minWidth: '32px',
+  minHeight: '32px'
+};
+var attachmentWrapper = {
+  alignItems: 'center',
+  height: '60px',
+  border: '1px solid',
+  borderColor: 'gray-200',
+  p: 'md',
+  gap: 'sm',
+  borderRadius: '4px',
+  '&.is-not-loaded': {
+    display: 'none'
+  }
+};
+var toolbar = {
+  '&.is-not-loaded': {
+    display: 'none'
+  }
+};
+export default {
+  iconWrapper: iconWrapper,
+  attachmentWrapper: attachmentWrapper,
+  toolbar: toolbar
+};