@pingux/astro 2.114.0 → 2.115.0-alpha.0

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

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Response" />
+
+# Response
+
+The Response component is used to display animated text responses, lists, and attachments in a conversational UI. It supports progressive rendering of text and nested components like toolbars and attachments.
+
+### Recommended Use
+
+- Use the Response component to display text responses with typing animations.
+- Include lists, toolbars, or attachments as part of the response content.
+
+### Features
+
+- **Typing Animation**: Text is progressively displayed to simulate typing.
+- **Nested Components**: Supports nested lists, toolbars, and attachments.
+- **Customizable**: Delay and animation settings can be adjusted.
+
+### Required Components
+
+This component works with the following subcomponents:
+- [ResponseText](./?path=/docs/components-response-responsetext--docs)
+- [ResponseList](./?path=/docs/components-response-responselist--docs)
+- [ResponseToolbar](./?path=/docs/components-response-responsetoolbar--docs)
+- [ResponseAttachment](./?path=/docs/components-response-responseattachment--docs)
+
+### Example Usage
+
+```jsx
+<Response delay={100}>
+  <ResponseText text="Hello, how can I assist you today?" />
+  <ResponseList as="ul">
+    <ResponseText as="li" text="Option 1: Get help with your account." />
+    <ResponseText as="li" text="Option 2: Learn about our services." />
+  </ResponseList>
+  <ResponseToolbar>
+    <ResponseToolbarIcon title="Copy" icon={CopyIcon} />
+    <ResponseToolbarIcon title="Read Aloud" icon={VolumeHighIcon} />
+  </ResponseToolbar>
+</Response>

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

@@ -2,6 +2,14 @@ import React from 'react';
 declare const _default: {
     title: string;
     component: (props: import("../../../types/response").ResponseProps) => React.JSX.Element;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            source: {
+                type: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: (args: any) => React.JSX.Element;

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

@@ -13,8 +13,10 @@ 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 _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
+var _index = require("../../../index");
 var _ResponseMarkdown = _interopRequireDefault(require("./ResponseMarkdown/ResponseMarkdown"));
-var _Response = _interopRequireDefault(require("./Response"));
+var _Response = _interopRequireDefault(require("./Response.mdx"));
 var _ResponseAttachment = _interopRequireDefault(require("./ResponseAttachment"));
 var _ResponseList = _interopRequireDefault(require("./ResponseList"));
 var _ResponseText = _interopRequireDefault(require("./ResponseText"));
@@ -23,7 +25,17 @@ var _ResponseToolbarIcon = _interopRequireDefault(require("./ResponseToolbarIcon
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Ai Components/Response',
-  component: _Response["default"]
+  component: _index.Response,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Response["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 exports["default"] = _default;
 var testText = 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet';
@@ -44,8 +56,8 @@ var Default = function Default(args) {
     title: 'Rephrase Answer',
     icon: _TextIcon["default"]
   }];
-  var delay = 40;
-  return (0, _react2.jsx)(_Response["default"], {
+  var delay = 100;
+  return (0, _react2.jsx)(_index.Response, {
     delay: delay
   }, (0, _react2.jsx)(_ResponseText["default"], {
     text: testText
@@ -76,8 +88,8 @@ exports.Default = Default;
 var nestedMarkdown = 'The recent login activity shows successful authentication attempts for the user \"bbludis476@gmail.com\" using the \"BXRetail App\". There were no failed authentication attempts recorded. Here are the details of the successful attempts:\n\n1. **Timestamp:** 2025-02-13T09:25:55.946Z\n   - **User:** bbludis476@gmail.com\n   - **Action:** User Access Allowed\n   - **Status:** SUCCESS\n\n2. **Timestamp:** 2025-02-13T09:25:52.377Z\n   - **User:** bbludis476@gmail.com\n   - **Action:** User Access Allowed\n   - **Status:** SUCCESS';
 var italics = '*Italics* bbludis476@gmail.com';
 var MarkdownStory = function MarkdownStory() {
-  return (0, _react2.jsx)(_Response["default"], {
-    delay: 20
+  return (0, _react2.jsx)(_index.Response, {
+    delay: 100
   }, (0, _react2.jsx)(_ResponseText["default"], {
     text: "Beginning response text"
   }), (0, _react2.jsx)(_ResponseMarkdown["default"], {

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

@@ -106,10 +106,12 @@ test('component renders', () => {
 test('delay prop works correctly', async () => {
   getComponent();
 
+  const splitText = defaultProps.text.split(' ');
+
   expect(screen.queryByText(defaultProps.text)).not.toBeInTheDocument();
-  for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
+  for (let i = 1; i < splitText.length + 1; i += 1) {
     act(() => { jest.advanceTimersByTime(100); });
-    expect(screen.queryByText(defaultProps.text.slice(0, i))).toBeInTheDocument();
+    expect(screen.queryByText(splitText.slice(0, i).join(' '))).toBeInTheDocument();
   }
   expect(screen.queryByText(defaultProps.text)).toBeInTheDocument();
 });
@@ -117,15 +119,19 @@ test('delay prop works correctly', async () => {
 test('delay prop works correctly, with list', async () => {
   getComponentWithList();
 
+  const splitText = headingText.split(' ');
+
   expect(screen.queryByText(headingText)).not.toBeInTheDocument();
-  for (let i = 1; i < headingText.length + 1; i += 1) {
+  for (let i = 1; i < splitText.length + 1; i += 1) {
     act(() => { jest.advanceTimersByTime(100); });
-    expect(screen.queryByText(headingText.slice(0, i))).toBeInTheDocument();
+    expect(screen.queryByText(splitText.slice(0, i).join(' '))).toBeInTheDocument();
   }
   expect(screen.queryByText(headingText)).toBeInTheDocument();
 
+  const nextTextSplit = nextText.split(' ');
+
   // advance through the listItems
-  for (let i = 1; i < (listItem1.length * 3) + 1; i += 1) {
+  for (let i = 1; i < 10; i += 1) {
     act(() => { jest.advanceTimersByTime(100); });
   }
   expect(screen.queryByText(nextText)).not.toBeInTheDocument();
@@ -133,7 +139,7 @@ test('delay prop works correctly, with list', async () => {
   // 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(nextTextSplit.slice(0, i).join(' '))).toBeInTheDocument();
   }
   expect(screen.queryByText(nextText)).toBeInTheDocument();
 });
@@ -148,7 +154,7 @@ test('default delay prop works correctly', async () => {
   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.split(' ').slice(0, i).join(' '))).toBeInTheDocument();
   }
   expect(screen.queryByText(defaultProps.text)).toBeInTheDocument();
 });

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

@@ -27,7 +27,8 @@ var ResponseList = function ResponseList(props) {
     setAnimationIndex = props.setAnimationIndex,
     shouldStartAnimation = props.shouldStartAnimation,
     delay = props.delay,
-    asProp = props.as;
+    _props$as = props.as,
+    asProp = _props$as === void 0 ? 'ul' : _props$as;
   (0, _react.useEffect)(function () {
     if (children && setAnimationIndex && index === children.length && parentIndex !== undefined) {
       setAnimationIndex(parentIndex + 1);
@@ -46,19 +47,14 @@ var ResponseList = function ResponseList(props) {
   return (0, _react2.jsx)(_index.Box, {
     as: asProp,
     variant: "response.list",
-    className: classNames,
-    sx: {
-      pl: 'md',
-      listStyleType: 'disc',
-      listStylePosition: 'inside'
-    }
+    className: classNames
   }, (0, _map["default"])(_react.Children).call(_react.Children, children, function (child, i) {
     return /*#__PURE__*/_react["default"].cloneElement(child, {
       shouldStartAnimation: index === i,
       setAnimationIndex: setIndex,
       animationIndex: i,
       delay: delay,
-      isListItem: /*#__PURE__*/_react["default"].isValidElement(child) && child.props.as && child.props.as !== 'p',
+      isListItem: /*#__PURE__*/_react["default"].isValidElement(child) && child.props.as && (child.props.as !== 'p' || child.props.as !== 'span'),
       parentIndex: index,
       as: 'li'
     });

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LoaderProps } from '../../../types';
+declare const ResponseLoader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ResponseLoader;

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

@@ -0,0 +1,34 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _templateObject, _templateObject2;
+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 typingPulse = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n   0% {\n        opacity: 0.25;\n    }\n\n   50% {\n        opacity: 0.25;\n    }\n   80% {\n        opacity: 1;\n    }\n   100% {\n        opacity: 0.25;\n    }\n"])));
+var animationSettingsType = '2s ease-out infinite';
+var ResponseLoader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? 'currentColor' : _props$color;
+  return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref) {
+    var className = _ref.css;
+    return (0, _react2.jsx)("span", {
+      ref: ref,
+      role: "alert",
+      "aria-label": "response is loading",
+      className: className(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n            animation: ", " ", ";\n            background-color: ", ";\n            height: .75rem;\n            width: .75rem;\n            border-radius: 50%;\n            display: inline-block;\n            margin-left: 4px;\n            margin-bottom: -1px;\n        "])), typingPulse, animationSettingsType, color)
+    });
+  });
+});
+var _default = ResponseLoader;
+exports["default"] = _default;

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

@@ -67,7 +67,7 @@ var MarkdownTextContainer = function MarkdownTextContainer(props) {
   return (0, _react2.jsx)(_Box["default"], {
     className: classNames,
     variant: "response.textWrapper",
-    as: hasNonStringChild ? 'div' : as
+    as: hasNonStringChild && as === 'p' ? 'div' : as
   }, (0, _react2.jsx)(_Box["default"], {
     isRow: true
   }, (0, _map["default"])(_react.Children).call(_react.Children, (0, _slice["default"])(markdownTextChildren).call(markdownTextChildren, 0, index + 1), function (child, i) {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ResponseMarkdownContextValue } from '../../../../types/response';
 export declare const ResponseMarkdownContext: React.Context<ResponseMarkdownContextValue>;
+export declare const countChildren: (_children: any) => number;
 declare const ResponseMarkdown: (componentProps: any) => React.JSX.Element;
 export default ResponseMarkdown;

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ResponseMarkdownContext = void 0;
+exports["default"] = exports.countChildren = exports.ResponseMarkdownContext = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -31,6 +31,16 @@ var ResponseMarkdownContext = /*#__PURE__*/(0, _react.createContext)({
   stateIndex: -1
 });
 exports.ResponseMarkdownContext = ResponseMarkdownContext;
+var countChildren = function countChildren(_children) {
+  var count = 0;
+  for (var i = 0; i < _children.length; i += 1) {
+    if (typeof _children[i] !== 'string') {
+      count += 1;
+    }
+  }
+  return count;
+};
+exports.countChildren = countChildren;
 var ResponseMarkdown = function ResponseMarkdown(componentProps) {
   var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -135,8 +145,9 @@ var ResponseMarkdown = function ResponseMarkdown(componentProps) {
       }
     }
   });
+  var childrenCount = countChildren(markdown.props.children);
   (0, _react.useEffect)(function () {
-    if (index === markdown.props.children.length) {
+    if (index === childrenCount) {
       setAnimationIndex(parentIndex + 1);
     }
   }, [index, markdown.props.children.length]);

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

@@ -12,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _hooks = require("../../../hooks");
 var _useTypeAnimation2 = _interopRequireDefault(require("../../../hooks/useTypeAnimation/useTypeAnimation"));
 var _index = require("../../../index");
+var _ResponseLoader = _interopRequireDefault(require("./ResponseLoader"));
 var _react2 = require("@emotion/react");
 var _excluded = ["delay", "text", "shouldStartAnimation", "setAnimationIndex", "animationIndex", "isListItem", "className"];
 var ResponseText = function ResponseText(props) {
@@ -32,7 +33,8 @@ var ResponseText = function ResponseText(props) {
     shouldStartAnimation: shouldStartAnimation
   };
   var _useTypeAnimation = (0, _useTypeAnimation2["default"])(animationProps),
-    currentText = _useTypeAnimation.currentText;
+    currentText = _useTypeAnimation.currentText,
+    isLoading = _useTypeAnimation.isLoading;
   var hasBullet = isListItem === true && currentText.length > 0;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       hasBullet: hasBullet
@@ -43,7 +45,7 @@ var ResponseText = function ResponseText(props) {
     role: isListItem ? 'listitem' : '',
     variant: "response",
     className: classNames
-  }), renderText);
+  }), renderText, isLoading && (0, _react2.jsx)(_ResponseLoader["default"], null));
 };
 var _default = ResponseText;
 exports["default"] = _default;

package/lib/cjs/components/Text/Text.stories.js

@@ -430,8 +430,7 @@ var CustomWidth = function CustomWidth() {
   return (0, _react2.jsx)(_index.Box, {
     width: 200
   }, (0, _react2.jsx)(_index.Text, {
-    p: "xl",
-    color: "text.secondary"
+    p: "xl"
   }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
 };
 exports.CustomWidth = CustomWidth;

package/lib/cjs/hooks/useTypeAnimation/useTypeAnimation.d.ts

@@ -5,6 +5,7 @@ declare const useTypeAnimation: ({ shouldStartAnimation, text, delay, setAnimati
     setAnimationIndex: any;
     animationIndex: any;
 }) => {
-    currentText: string;
+    currentText: any;
+    isLoading: boolean;
 };
 export default useTypeAnimation;

package/lib/cjs/hooks/useTypeAnimation/useTypeAnimation.js

@@ -7,6 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = require("react");
 var useTypeAnimation = function useTypeAnimation(_ref) {
@@ -15,20 +16,26 @@ var useTypeAnimation = function useTypeAnimation(_ref) {
     delay = _ref.delay,
     setAnimationIndex = _ref.setAnimationIndex,
     animationIndex = _ref.animationIndex;
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)(text.split(' ')),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    currentText = _useState2[0],
-    setCurrentText = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
+    splitText = _useState2[0],
+    setSplitText = _useState2[1];
+  var _useState3 = (0, _react.useState)(-1),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     currentIndex = _useState4[0],
     setCurrentIndex = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
   (0, _react.useEffect)(function () {
-    if (shouldStartAnimation && text && currentIndex < text.length) {
+    if (shouldStartAnimation && currentIndex < 0) {
+      setCurrentIndex(0);
+    }
+  }, [shouldStartAnimation, currentIndex]);
+  (0, _react.useEffect)(function () {
+    if (shouldStartAnimation && text && currentIndex < splitText.length) {
       var timeout = (0, _setTimeout2["default"])(function () {
-        setCurrentText(function (prevText) {
-          return prevText + text[currentIndex];
-        });
         setCurrentIndex(function (prevIndex) {
           return prevIndex + 1;
         });
@@ -37,15 +44,24 @@ var useTypeAnimation = function useTypeAnimation(_ref) {
         return clearTimeout(timeout);
       };
     }
-    if (text && currentIndex === text.length) {
+    if (splitText && currentIndex === splitText.length) {
       setAnimationIndex(animationIndex + 1);
     }
     return function () {
       return null;
     };
   }, [currentIndex, delay, text, shouldStartAnimation, setAnimationIndex, animationIndex]);
+  (0, _react.useEffect)(function () {
+    if (splitText.length > 0 && currentIndex > 0 && currentIndex < splitText.length) {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [splitText, text, currentIndex]);
+  var indexOrNothing = Math.max(currentIndex, 0);
   return {
-    currentText: currentText
+    currentText: (0, _slice["default"])(splitText).call(splitText, 0, indexOrNothing).join(' '),
+    isLoading: isLoading
   };
 };
 var _default = useTypeAnimation;

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

@@ -17,8 +17,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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) { (0, _defineProperty2["default"])(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; }
 var setAnimationIndex = jest.fn();
 var animationIndex = 0;
-var text = 'Hello';
+var text = 'Hello World';
 var delay = 100;
+var splitText = text.split(' ');
 var defaultProps = {
   text: text,
   delay: delay,
@@ -39,11 +40,11 @@ describe('useTypeAnimation', function () {
       }),
       result = _renderHook.result;
     expect(result.current.currentText).toBe('');
-    for (var i = 0; i < text.length; i += 1) {
+    for (var i = 0; i < splitText.length; i += 1) {
       (0, _reactHooks.act)(function () {
         jest.advanceTimersByTime(delay);
       });
-      expect(result.current.currentText).toBe((0, _slice["default"])(text).call(text, 0, i + 1));
+      expect(result.current.currentText).toBe((0, _slice["default"])(splitText).call(splitText, 0, i + 1).join(' '));
     }
     expect(result.current.currentText).toBe(text);
   });

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

@@ -2703,19 +2703,23 @@ declare const _default: {
                 };
             };
             textWrapper: {
+                height: string;
                 '&.has-bullet': {
                     display: string;
+                    height: string;
                 };
                 '&.has-rendered': {
                     display: string;
                 };
                 '&.has-block': {
+                    maxHeight: string;
                     display: string;
                 };
                 '&::marker': {
                     color: string;
                 };
                 listStylePosition: string;
+                flexDirection: string;
             };
         };
         skeleton: {

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

@@ -50,19 +50,23 @@ declare const _default: {
         };
     };
     textWrapper: {
+        height: string;
         '&.has-bullet': {
             display: string;
+            height: string;
         };
         '&.has-rendered': {
             display: string;
         };
         '&.has-block': {
+            maxHeight: string;
             display: string;
         };
         '&::marker': {
             color: string;
         };
         listStylePosition: string;
+        flexDirection: string;
     };
 };
 export default _default;

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

@@ -56,19 +56,23 @@ var list = {
   }
 };
 var textWrapper = {
+  height: 'fit-content',
   '&.has-bullet': {
-    display: 'list-item !important'
+    display: 'list-item !important',
+    height: 'fit-content'
   },
   '&.has-rendered': {
     display: 'list-item'
   },
   '&.has-block': {
+    maxHeight: 'fit-content',
     display: 'block'
   },
   '&::marker': {
     color: 'text.primary'
   },
-  listStylePosition: 'outside'
+  listStylePosition: 'initial',
+  flexDirection: 'row'
 };
 var _default = {
   iconWrapper: iconWrapper,

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

@@ -968,19 +968,23 @@ declare const _default: {
             };
         };
         textWrapper: {
+            height: string;
             '&.has-bullet': {
                 display: string;
+                height: string;
             };
             '&.has-rendered': {
                 display: string;
             };
             '&.has-block': {
+                maxHeight: string;
                 display: string;
             };
             '&::marker': {
                 color: string;
             };
             listStylePosition: string;
+            flexDirection: string;
         };
     };
     skeleton: {

package/lib/components/AIComponents/Response/Response.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Response" />
+
+# Response
+
+The Response component is used to display animated text responses, lists, and attachments in a conversational UI. It supports progressive rendering of text and nested components like toolbars and attachments.
+
+### Recommended Use
+
+- Use the Response component to display text responses with typing animations.
+- Include lists, toolbars, or attachments as part of the response content.
+
+### Features
+
+- **Typing Animation**: Text is progressively displayed to simulate typing.
+- **Nested Components**: Supports nested lists, toolbars, and attachments.
+- **Customizable**: Delay and animation settings can be adjusted.
+
+### Required Components
+
+This component works with the following subcomponents:
+- [ResponseText](./?path=/docs/components-response-responsetext--docs)
+- [ResponseList](./?path=/docs/components-response-responselist--docs)
+- [ResponseToolbar](./?path=/docs/components-response-responsetoolbar--docs)
+- [ResponseAttachment](./?path=/docs/components-response-responseattachment--docs)
+
+### Example Usage
+
+```jsx
+<Response delay={100}>
+  <ResponseText text="Hello, how can I assist you today?" />
+  <ResponseList as="ul">
+    <ResponseText as="li" text="Option 1: Get help with your account." />
+    <ResponseText as="li" text="Option 2: Learn about our services." />
+  </ResponseList>
+  <ResponseToolbar>
+    <ResponseToolbarIcon title="Copy" icon={CopyIcon} />
+    <ResponseToolbarIcon title="Read Aloud" icon={VolumeHighIcon} />
+  </ResponseToolbar>
+</Response>

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

@@ -5,8 +5,10 @@ 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 DocsLayout from '../../../../.storybook/storybookDocsLayout';
+import { Response } from '../../../index';
 import Markdown from './ResponseMarkdown/ResponseMarkdown';
-import Response from './Response';
+import ResponseReadme from './Response.mdx';
 import ResponseAttachment from './ResponseAttachment';
 import ResponseList from './ResponseList';
 import ResponseText from './ResponseText';
@@ -15,7 +17,17 @@ import ResponseToolbarIcon from './ResponseToolbarIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Ai Components/Response',
-  component: Response
+  component: Response,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ResponseReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 var testText = 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet';
 export var Default = function Default(args) {
@@ -35,7 +47,7 @@ export var Default = function Default(args) {
     title: 'Rephrase Answer',
     icon: TextIcon
   }];
-  var delay = 40;
+  var delay = 100;
   return ___EmotionJSX(Response, {
     delay: delay
   }, ___EmotionJSX(ResponseText, {
@@ -67,7 +79,7 @@ var nestedMarkdown = 'The recent login activity shows successful authentication
 var italics = '*Italics* bbludis476@gmail.com';
 export var MarkdownStory = function MarkdownStory() {
   return ___EmotionJSX(Response, {
-    delay: 20
+    delay: 100
   }, ___EmotionJSX(ResponseText, {
     text: "Beginning response text"
   }), ___EmotionJSX(Markdown, {

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

@@ -106,10 +106,12 @@ test('component renders', () => {
 test('delay prop works correctly', async () => {
   getComponent();
 
+  const splitText = defaultProps.text.split(' ');
+
   expect(screen.queryByText(defaultProps.text)).not.toBeInTheDocument();
-  for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
+  for (let i = 1; i < splitText.length + 1; i += 1) {
     act(() => { jest.advanceTimersByTime(100); });
-    expect(screen.queryByText(defaultProps.text.slice(0, i))).toBeInTheDocument();
+    expect(screen.queryByText(splitText.slice(0, i).join(' '))).toBeInTheDocument();
   }
   expect(screen.queryByText(defaultProps.text)).toBeInTheDocument();
 });
@@ -117,15 +119,19 @@ test('delay prop works correctly', async () => {
 test('delay prop works correctly, with list', async () => {
   getComponentWithList();
 
+  const splitText = headingText.split(' ');
+
   expect(screen.queryByText(headingText)).not.toBeInTheDocument();
-  for (let i = 1; i < headingText.length + 1; i += 1) {
+  for (let i = 1; i < splitText.length + 1; i += 1) {
     act(() => { jest.advanceTimersByTime(100); });
-    expect(screen.queryByText(headingText.slice(0, i))).toBeInTheDocument();
+    expect(screen.queryByText(splitText.slice(0, i).join(' '))).toBeInTheDocument();
   }
   expect(screen.queryByText(headingText)).toBeInTheDocument();
 
+  const nextTextSplit = nextText.split(' ');
+
   // advance through the listItems
-  for (let i = 1; i < (listItem1.length * 3) + 1; i += 1) {
+  for (let i = 1; i < 10; i += 1) {
     act(() => { jest.advanceTimersByTime(100); });
   }
   expect(screen.queryByText(nextText)).not.toBeInTheDocument();
@@ -133,7 +139,7 @@ test('delay prop works correctly, with list', async () => {
   // 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(nextTextSplit.slice(0, i).join(' '))).toBeInTheDocument();
   }
   expect(screen.queryByText(nextText)).toBeInTheDocument();
 });
@@ -148,7 +154,7 @@ test('default delay prop works correctly', async () => {
   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.split(' ').slice(0, i).join(' '))).toBeInTheDocument();
   }
   expect(screen.queryByText(defaultProps.text)).toBeInTheDocument();
 });

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

@@ -14,7 +14,8 @@ var ResponseList = function ResponseList(props) {
     setAnimationIndex = props.setAnimationIndex,
     shouldStartAnimation = props.shouldStartAnimation,
     delay = props.delay,
-    asProp = props.as;
+    _props$as = props.as,
+    asProp = _props$as === void 0 ? 'ul' : _props$as;
   useEffect(function () {
     if (children && setAnimationIndex && index === children.length && parentIndex !== undefined) {
       setAnimationIndex(parentIndex + 1);
@@ -33,19 +34,14 @@ var ResponseList = function ResponseList(props) {
   return ___EmotionJSX(Box, {
     as: asProp,
     variant: "response.list",
-    className: classNames,
-    sx: {
-      pl: 'md',
-      listStyleType: 'disc',
-      listStylePosition: 'inside'
-    }
+    className: classNames
   }, _mapInstanceProperty(Children).call(Children, children, function (child, i) {
     return /*#__PURE__*/React.cloneElement(child, {
       shouldStartAnimation: index === i,
       setAnimationIndex: setIndex,
       animationIndex: i,
       delay: delay,
-      isListItem: /*#__PURE__*/React.isValidElement(child) && child.props.as && child.props.as !== 'p',
+      isListItem: /*#__PURE__*/React.isValidElement(child) && child.props.as && (child.props.as !== 'p' || child.props.as !== 'span'),
       parentIndex: index,
       as: 'li'
     });

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

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import React, { forwardRef } from 'react';
+import { ClassNames, keyframes } from '@emotion/react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var typingPulse = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   0% {\n        opacity: 0.25;\n    }\n\n   50% {\n        opacity: 0.25;\n    }\n   80% {\n        opacity: 1;\n    }\n   100% {\n        opacity: 0.25;\n    }\n"])));
+var animationSettingsType = '2s ease-out infinite';
+var ResponseLoader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? 'currentColor' : _props$color;
+  return ___EmotionJSX(ClassNames, null, function (_ref) {
+    var className = _ref.css;
+    return ___EmotionJSX("span", {
+      ref: ref,
+      role: "alert",
+      "aria-label": "response is loading",
+      className: className(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            animation: ", " ", ";\n            background-color: ", ";\n            height: .75rem;\n            width: .75rem;\n            border-radius: 50%;\n            display: inline-block;\n            margin-left: 4px;\n            margin-bottom: -1px;\n        "])), typingPulse, animationSettingsType, color)
+    });
+  });
+});
+export default ResponseLoader;

package/lib/components/AIComponents/Response/ResponseMarkdown/MarkdownTextContainer.js

@@ -53,7 +53,7 @@ var MarkdownTextContainer = function MarkdownTextContainer(props) {
   return ___EmotionJSX(Box, {
     className: classNames,
     variant: "response.textWrapper",
-    as: hasNonStringChild ? 'div' : as
+    as: hasNonStringChild && as === 'p' ? 'div' : as
   }, ___EmotionJSX(Box, {
     isRow: true
   }, _mapInstanceProperty(Children).call(Children, _sliceInstanceProperty(markdownTextChildren).call(markdownTextChildren, 0, index + 1), function (child, i) {

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

@@ -19,6 +19,15 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ResponseMarkdownContext = /*#__PURE__*/createContext({
   stateIndex: -1
 });
+export var countChildren = function countChildren(_children) {
+  var count = 0;
+  for (var i = 0; i < _children.length; i += 1) {
+    if (typeof _children[i] !== 'string') {
+      count += 1;
+    }
+  }
+  return count;
+};
 var ResponseMarkdown = function ResponseMarkdown(componentProps) {
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
@@ -123,8 +132,9 @@ var ResponseMarkdown = function ResponseMarkdown(componentProps) {
       }
     }
   });
+  var childrenCount = countChildren(markdown.props.children);
   useEffect(function () {
-    if (index === markdown.props.children.length) {
+    if (index === childrenCount) {
       setAnimationIndex(parentIndex + 1);
     }
   }, [index, markdown.props.children.length]);

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

@@ -5,6 +5,7 @@ import React from 'react';
 import { useStatusClasses } from '../../../hooks';
 import useTypeAnimation from '../../../hooks/useTypeAnimation/useTypeAnimation';
 import { Text } from '../../../index';
+import ResponseLoader from './ResponseLoader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ResponseText = function ResponseText(props) {
   var _props$delay = props.delay,
@@ -24,7 +25,8 @@ var ResponseText = function ResponseText(props) {
     shouldStartAnimation: shouldStartAnimation
   };
   var _useTypeAnimation = useTypeAnimation(animationProps),
-    currentText = _useTypeAnimation.currentText;
+    currentText = _useTypeAnimation.currentText,
+    isLoading = _useTypeAnimation.isLoading;
   var hasBullet = isListItem === true && currentText.length > 0;
   var _useStatusClasses = useStatusClasses(className, {
       hasBullet: hasBullet
@@ -35,6 +37,6 @@ var ResponseText = function ResponseText(props) {
     role: isListItem ? 'listitem' : '',
     variant: "response",
     className: classNames
-  }), renderText);
+  }), renderText, isLoading && ___EmotionJSX(ResponseLoader, null));
 };
 export default ResponseText;

package/lib/components/Text/Text.stories.js

@@ -420,8 +420,7 @@ export var CustomWidth = function CustomWidth() {
   return ___EmotionJSX(Box, {
     width: 200
   }, ___EmotionJSX(Text, {
-    p: "xl",
-    color: "text.secondary"
+    p: "xl"
   }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
 };
 export var CustomStyle = function CustomStyle() {

package/lib/hooks/useTypeAnimation/useTypeAnimation.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import { useEffect, useState } from 'react';
 var useTypeAnimation = function useTypeAnimation(_ref) {
   var shouldStartAnimation = _ref.shouldStartAnimation,
@@ -7,20 +8,26 @@ var useTypeAnimation = function useTypeAnimation(_ref) {
     delay = _ref.delay,
     setAnimationIndex = _ref.setAnimationIndex,
     animationIndex = _ref.animationIndex;
-  var _useState = useState(''),
+  var _useState = useState(text.split(' ')),
     _useState2 = _slicedToArray(_useState, 2),
-    currentText = _useState2[0],
-    setCurrentText = _useState2[1];
-  var _useState3 = useState(0),
+    splitText = _useState2[0],
+    setSplitText = _useState2[1];
+  var _useState3 = useState(-1),
     _useState4 = _slicedToArray(_useState3, 2),
     currentIndex = _useState4[0],
     setCurrentIndex = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
   useEffect(function () {
-    if (shouldStartAnimation && text && currentIndex < text.length) {
+    if (shouldStartAnimation && currentIndex < 0) {
+      setCurrentIndex(0);
+    }
+  }, [shouldStartAnimation, currentIndex]);
+  useEffect(function () {
+    if (shouldStartAnimation && text && currentIndex < splitText.length) {
       var timeout = _setTimeout(function () {
-        setCurrentText(function (prevText) {
-          return prevText + text[currentIndex];
-        });
         setCurrentIndex(function (prevIndex) {
           return prevIndex + 1;
         });
@@ -29,15 +36,24 @@ var useTypeAnimation = function useTypeAnimation(_ref) {
         return clearTimeout(timeout);
       };
     }
-    if (text && currentIndex === text.length) {
+    if (splitText && currentIndex === splitText.length) {
       setAnimationIndex(animationIndex + 1);
     }
     return function () {
       return null;
     };
   }, [currentIndex, delay, text, shouldStartAnimation, setAnimationIndex, animationIndex]);
+  useEffect(function () {
+    if (splitText.length > 0 && currentIndex > 0 && currentIndex < splitText.length) {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [splitText, text, currentIndex]);
+  var indexOrNothing = Math.max(currentIndex, 0);
   return {
-    currentText: currentText
+    currentText: _sliceInstanceProperty(splitText).call(splitText, 0, indexOrNothing).join(' '),
+    isLoading: isLoading
   };
 };
 export default useTypeAnimation;

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

@@ -14,8 +14,9 @@ import { act, renderHook } from '@testing-library/react-hooks';
 import useTypeAnimation from './useTypeAnimation';
 var setAnimationIndex = jest.fn();
 var animationIndex = 0;
-var text = 'Hello';
+var text = 'Hello World';
 var delay = 100;
+var splitText = text.split(' ');
 var defaultProps = {
   text: text,
   delay: delay,
@@ -36,11 +37,11 @@ describe('useTypeAnimation', function () {
       }),
       result = _renderHook.result;
     expect(result.current.currentText).toBe('');
-    for (var i = 0; i < text.length; i += 1) {
+    for (var i = 0; i < splitText.length; i += 1) {
       act(function () {
         jest.advanceTimersByTime(delay);
       });
-      expect(result.current.currentText).toBe(_sliceInstanceProperty(text).call(text, 0, i + 1));
+      expect(result.current.currentText).toBe(_sliceInstanceProperty(splitText).call(splitText, 0, i + 1).join(' '));
     }
     expect(result.current.currentText).toBe(text);
   });

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

@@ -49,19 +49,23 @@ var list = {
   }
 };
 var textWrapper = {
+  height: 'fit-content',
   '&.has-bullet': {
-    display: 'list-item !important'
+    display: 'list-item !important',
+    height: 'fit-content'
   },
   '&.has-rendered': {
     display: 'list-item'
   },
   '&.has-block': {
+    maxHeight: 'fit-content',
     display: 'block'
   },
   '&::marker': {
     color: 'text.primary'
   },
-  listStylePosition: 'outside'
+  listStylePosition: 'initial',
+  flexDirection: 'row'
 };
 export default {
   iconWrapper: iconWrapper,

package/package.json

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