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

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

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

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

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

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

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

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

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

package/lib/index.js

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

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

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

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

@@ -28,13 +28,19 @@ export var input = {
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
   fontWeight: 1,
-  height: '50px',
   '&::placeholder': text.placeholder
 };
 input.promptInput = _objectSpread(_objectSpread({}, input), {}, {
+  position: 'absolute',
   pl: '0px',
   border: 'none',
   outline: 'none !important',
+  overflowY: 'hidden',
+  resize: 'none',
+  lineHeight: '24px',
+  minHeight: '26px',
+  height: '26px',
+  p: '0px',
   '&.is-focused': {
     border: 'none !important',
     outline: 'none !important'
@@ -112,8 +118,8 @@ input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
 input.promptInputWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
   border: '1px solid',
   borderColor: 'border.input',
-  px: '.75rem',
   borderRadius: '4px',
+  minHeight: '50px',
   '&.is-focused': {
     boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
   }
@@ -149,4 +155,20 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'
-});
+});
+input.promptInputRow = {
+  alignItems: 'center',
+  position: 'relative',
+  justifyContent: 'center',
+  flexGrow: '1',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  py: '12px'
+};
+input.promptInputAttachmentWrapper = {
+  gap: '1.5rem',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  whiteSpace: 'nowrap',
+  px: '.75rem'
+};

package/package.json

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