@veracity/vui 2.26.0-beta.4 → 2.26.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.26.0-beta.4",
+  "version": "2.26.0-beta.5",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/chat/chat.types.ts

@@ -36,6 +36,8 @@ export type ChatInputProps = Omit<BoxProps, 'size' | 'variant'> & {
   placeholder?: string
   status?: ChatInputStatus
   helpText?: string
+  /** @default 120 */
+  maxTextareaHeight?: number
   /** @default 'Generating message' */
   processingMessage?: string
   onNewTopicClick?: () => void

package/src/chat/chatInput.tsx

@@ -16,7 +16,7 @@ const CustomTextarea = styled.textareaBox`
   outline: none;
   padding: 0 8px;
   resize: none;
-  transition-duration: 0;
+  transition-duration: 0.3s;
   width: 100%;
   min-height: 1.5em;
   overflow-y: hidden;
@@ -41,6 +41,7 @@ export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
     helpText,
     placeholder = 'Type your message',
     status = ChatInputStatus.Default,
+    maxTextareaHeight = 120,
     processingMessage = 'Generating message',
     value: valueProp,
     onNewTopicClick,
@@ -74,30 +75,32 @@ export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
     textarea.placeholder = ''
 
     // Dynamically adjust the height of the textarea
-    textarea.style.height = 'auto' // Set the height based on scrollHeight
-    textarea.style.maxHeight = 'auto' // Reset the height
-    textarea.style.height = `${textarea.scrollHeight}px` // Set the height based on scrollHeight
-    textarea.style.maxHeight = `${textarea.scrollHeight}px` // Set the height based on scrollHeight
-    textarea.style.lineHeight = '2.2' // Set the height based on scrollHeight
 
-    // Update the value
-    if (status === ChatInputStatus.Default) {
-      setValue(textarea.value)
+    if (textarea.scrollHeight <= maxTextareaHeight) {
+      textarea.style.height = 'auto'
+      textarea.style.maxHeight = 'auto'
+      textarea.style.height = `${textarea.scrollHeight}px`
+      textarea.style.maxHeight = `${textarea.scrollHeight}px`
+      textarea.style.lineHeight = '2.2'
     }
+
+    if (status === ChatInputStatus.Default) setValue(textarea.value)
   }
 
   const isDisabled = status === ChatInputStatus.Disabled
 
   return (
     <Box className={cs('vui-chat-input')} justifyContent="space-between" ref={ref} {...styles?.input} {...rest}>
-      {!!onNewTopicClick && <Button icon="falPlus" mr={1} onClick={() => onNewTopicClick?.()} />}
+      {!!onNewTopicClick && status === ChatInputStatus.Default && (
+        <Button animation="fadeUp" icon="falPlus" mr={1} onClick={() => onNewTopicClick?.()} />
+      )}
       {status === ChatInputStatus.Processing ? (
         <Box borderColor={inputColors.border} borderWidth={1} center justifyContent="flex-start" py={0.5} w="100%">
           <Icon mx={1} name="fadSpinnerThird" pathFill={['blue.40', 'blue.60']} size="lg" variant="spinning" />
           <Box>{processingMessage}</Box>
         </Box>
       ) : (
-        <Box column w="100%">
+        <Box animation="fadeUp" border="0" column outline="none" w="100%">
           <Box
             borderColor={inputColors.border}
             borderWidth={1}