@razorpay/blade
Version:
The Design System that powers Razorpay
316 lines (313 loc) • 12.4 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import styled from 'styled-components';
import { AnimatePresence } from 'framer-motion';
import { ChatInputActionBar } from './ChatInputActionBar.js';
import { ChatInputGhostSuggestion } from './ChatInputGhostSuggestion.js';
import { useChatInput } from './useChatInput.js';
import '../BladeProvider/index.js';
import '../BaseMotion/index.js';
import '../Box/BaseBox/index.js';
import '../Box/styledProps/index.js';
import '../Button/IconButton/index.js';
import { FileUploadItem } from '../FileUpload/FileUploadItem.js';
import '../Icons/index.js';
import { BaseInput } from '../Input/BaseInput/BaseInput.js';
import '../Typography/index.js';
import '../../utils/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import '../../utils/metaAttribute/index.js';
import { msToSeconds } from '../../utils/msToSeconds.js';
import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import useTheme from '../BladeProvider/useTheme.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { BaseMotionBox, BaseMotionEntryExit } from '../BaseMotion/BaseMotion.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import InfoIcon from '../Icons/InfoIcon/InfoIcon.js';
import { Text } from '../Typography/Text/Text.js';
import { IconButton } from '../Button/IconButton/IconButton.js';
import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["value", "defaultValue", "onChange", "onFocus", "onBlur", "onSubmit", "placeholder", "isDisabled", "isGenerating", "onStop", "fileList", "onFileChange", "onFileRemove", "onFileReupload", "accept", "suggestions", "onSuggestionAccept", "validationState", "errorText", "onErrorDismiss", "accessibilityLabel", "testID"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var HiddenScrollbarBox = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "ChatInputweb__HiddenScrollbarBox",
componentId: "sc-13ok6nm-0"
})(function () {
return {
'&::-webkit-scrollbar': {
display: 'none'
},
scrollbarWidth: 'none'
};
});
var _ChatInput = function _ChatInput(_ref, ref) {
var value = _ref.value,
defaultValue = _ref.defaultValue,
onChange = _ref.onChange,
onFocus = _ref.onFocus,
onBlur = _ref.onBlur,
onSubmit = _ref.onSubmit,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? 'Ask a question...' : _ref$placeholder,
_ref$isDisabled = _ref.isDisabled,
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
_ref$isGenerating = _ref.isGenerating,
isGenerating = _ref$isGenerating === void 0 ? false : _ref$isGenerating,
onStop = _ref.onStop,
fileList = _ref.fileList,
onFileChange = _ref.onFileChange,
onFileRemove = _ref.onFileRemove,
onFileReupload = _ref.onFileReupload,
accept = _ref.accept,
suggestions = _ref.suggestions,
onSuggestionAccept = _ref.onSuggestionAccept,
validationState = _ref.validationState,
errorText = _ref.errorText,
onErrorDismiss = _ref.onErrorDismiss,
_ref$accessibilityLab = _ref.accessibilityLabel,
accessibilityLabel = _ref$accessibilityLab === void 0 ? 'Chat input' : _ref$accessibilityLab,
testID = _ref.testID,
rest = _objectWithoutProperties(_ref, _excluded);
var _useTheme = useTheme(),
theme = _useTheme.theme;
var _useChatInput = useChatInput({
value: value,
defaultValue: defaultValue,
onChange: onChange,
onSubmit: onSubmit,
isDisabled: isDisabled,
isGenerating: isGenerating,
onStop: onStop,
fileList: fileList,
onFileChange: onFileChange,
onFileRemove: onFileRemove,
accept: accept,
suggestions: suggestions,
onSuggestionAccept: onSuggestionAccept
}, ref),
fileInputRef = _useChatInput.fileInputRef,
mergedRef = _useChatInput.mergedRef,
textValue = _useChatInput.textValue,
files = _useChatInput.files,
setActiveSuggestionIndex = _useChatInput.setActiveSuggestionIndex,
hasFiles = _useChatInput.hasFiles,
isSubmitDisabled = _useChatInput.isSubmitDisabled,
showGhostSuggestion = _useChatInput.showGhostSuggestion,
handleTextChange = _useChatInput.handleTextChange,
handleSubmit = _useChatInput.handleSubmit,
handleKeyDown = _useChatInput.handleKeyDown,
handleUploadClick = _useChatInput.handleUploadClick,
handleFileInputChange = _useChatInput.handleFileInputChange,
handleFileRemove = _useChatInput.handleFileRemove,
handlePaste = _useChatInput.handlePaste,
handleInnerMouseDownCapture = _useChatInput.handleInnerMouseDownCapture;
var errorSlideVariants = {
initial: {
opacity: 0
},
animate: {
transform: ['translateY(100%)', 'translateY(0%)'],
opacity: 1,
transition: {
duration: msToSeconds(theme.motion.duration.xmoderate),
ease: cssBezierToArray(castWebType(theme.motion.easing.emphasized))
}
},
exit: {
opacity: 0,
transform: 'translateY(100%)',
transitionEnd: {
transform: 'translateY(100%)'
},
transition: {
duration: msToSeconds(theme.motion.duration.xmoderate),
ease: cssBezierToArray(castWebType(theme.motion.easing.emphasized))
}
}
};
var filePreviewMotionVariants = {
initial: {
height: '0px',
overflow: 'hidden'
},
animate: {
height: 'auto',
overflow: 'hidden',
transition: {
duration: msToSeconds(theme.motion.duration.quick),
ease: cssBezierToArray(castWebType(theme.motion.easing.emphasized))
}
},
exit: {
height: '0px',
overflow: 'hidden',
transition: {
duration: msToSeconds(theme.motion.duration.quick),
ease: cssBezierToArray(castWebType(theme.motion.easing.emphasized))
}
}
};
var filePreviewContent = /*#__PURE__*/jsx(AnimatePresence, {
children: hasFiles ? /*#__PURE__*/jsx(BaseMotionBox, {
motionVariants: filePreviewMotionVariants,
children: /*#__PURE__*/jsx(HiddenScrollbarBox, {
display: "flex",
flexDirection: "row",
gap: "spacing.3",
paddingTop: "spacing.5",
paddingX: "spacing.5",
overflowX: "auto",
height: "auto",
overflowY: "hidden",
flexWrap: "nowrap",
children: files.map(function (file) {
var _file$id;
return /*#__PURE__*/jsx(FileUploadItem, {
flexShrink: 0,
flexGrow: 1,
flexBasis: 1,
minWidth: "160px",
maxWidth: "200px",
file: file,
onRemove: function onRemove() {
return handleFileRemove(file);
},
onReupload: onFileReupload ? function () {
return onFileReupload({
file: file
});
} : undefined
}, (_file$id = file.id) !== null && _file$id !== void 0 ? _file$id : file.name);
})
})
}) : null
});
var actionBarContent = /*#__PURE__*/jsx(ChatInputActionBar, {
isDisabled: isDisabled,
isGenerating: isGenerating,
isSubmitDisabled: isSubmitDisabled,
onUploadClick: handleUploadClick,
onSubmit: handleSubmit,
onStop: onStop
});
var isError = validationState === 'error';
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
position: "relative"
}, metaAttribute({
name: MetaConstants.ChatInput,
testID: testID
})), getStyledProps(rest)), {}, {
children: [/*#__PURE__*/jsx("input", {
ref: fileInputRef,
type: "file",
accept: accept,
multiple: true,
onChange: handleFileInputChange,
disabled: isDisabled,
style: {
display: 'none'
},
"aria-hidden": "true"
}), /*#__PURE__*/jsx(BaseBox, {
position: "relative",
zIndex: 1,
onMouseDownCapture: handleInnerMouseDownCapture,
children: /*#__PURE__*/jsx(BaseInput, _objectSpread({
ref: mergedRef,
as: "textarea",
id: "chat-input",
elevation: "highRaised",
label: undefined,
accessibilityLabel: accessibilityLabel,
hideLabelText: true,
hideFormHint: true,
placeholder: showGhostSuggestion ? '' : placeholder,
value: textValue,
onChange: handleTextChange,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: handleKeyDown,
onPaste: handlePaste,
isDisabled: isDisabled,
numberOfLines: 2,
size: "medium",
padding: makeSpace(theme.spacing[5]),
borderRadius: "large",
caretColor: "surface.icon.onSea.onSubtle",
topContent: filePreviewContent,
bottomContent: actionBarContent,
inputRowOverlay: showGhostSuggestion && suggestions ? /*#__PURE__*/jsx(BaseBox, {
position: "absolute",
top: "spacing.5",
left: "spacing.5",
right: "spacing.5",
pointerEvents: "none",
zIndex: 3,
children: /*#__PURE__*/jsx(ChatInputGhostSuggestion, {
suggestions: suggestions,
isVisible: showGhostSuggestion,
onIndexChange: setActiveSuggestionIndex
})
}) : null
}, makeAnalyticsAttribute(rest)))
}), /*#__PURE__*/jsx(BaseBox, {
position: "absolute",
bottom: "calc(100% - 12px)",
left: "spacing.0",
right: "spacing.0",
zIndex: 0,
children: /*#__PURE__*/jsx(BaseMotionEntryExit, {
motionVariants: errorSlideVariants,
isVisible: isError,
type: "inout",
children: /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "spacing.2",
backgroundColor: "feedback.background.negative.subtle",
paddingX: "spacing.4",
paddingTop: "spacing.3",
paddingBottom: "spacing.6",
borderTopLeftRadius: "medium",
borderTopRightRadius: "medium",
role: "alert",
children: [/*#__PURE__*/jsx(InfoIcon, {
size: "small",
color: "feedback.icon.negative.intense"
}), /*#__PURE__*/jsx(Text, {
size: "small",
truncateAfterLines: 8,
color: "feedback.text.negative.intense",
children: errorText
}), onErrorDismiss ? /*#__PURE__*/jsx(IconButton, {
marginLeft: "auto",
icon: CloseIcon,
size: "small",
emphasis: "intense",
accessibilityLabel: "Dismiss error",
onClick: function onClick() {
return onErrorDismiss();
}
}) : null]
})
})
})]
}));
};
var ChatInput = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_ChatInput), {
componentId: MetaConstants.ChatInput,
displayName: 'ChatInput'
});
export { ChatInput };
//# sourceMappingURL=ChatInput.web.js.map