@veracity/vui 2.26.0-beta.1 → 2.26.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.26.0-beta.1",
+  "version": "2.26.0-beta.2",
   "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.tsx

@@ -17,6 +17,7 @@ export const Chat = vui<'div', ChatProps>((props, ref) => {
     children,
     inputStatus = ChatInputStatus.Default,
     messages,
+    helpText,
     processingMessage,
     suggestions,
     onNewTopicClick,
@@ -65,6 +66,7 @@ export const Chat = vui<'div', ChatProps>((props, ref) => {
           </Box>
         )}
         <ChatInput
+          helpText={helpText}
           onNewTopicClick={onNewTopicClick}
           onSend={onSend}
           onStop={onStop}

package/src/chat/chat.types.ts

@@ -16,6 +16,8 @@ export type ChatProps = Omit<BoxProps, 'size' | 'variant'> &
     inputStatus?: ChatInputStatus
     // An array of chat messages
     messages?: ChatMessageProps[]
+    // Optional string indicating a help text
+    helpText?: string
     // Optional string indicating a message being processed
     processingMessage?: string
     // An array of suggestion strings
@@ -33,6 +35,7 @@ export type ChatProps = Omit<BoxProps, 'size' | 'variant'> &
 export type ChatInputProps = Omit<BoxProps, 'size' | 'variant'> & {
   placeholder?: string
   status?: ChatInputStatus
+  helpText?: string
   /** @default 'Generating message' */
   processingMessage?: string
   onNewTopicClick?: () => void

package/src/chat/chatInput.tsx

@@ -14,6 +14,7 @@ import ChatInputButton from './chatInputButton'
  */
 export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
   const {
+    helpText,
     placeholder = 'Type your message',
     status = ChatInputStatus.Default,
     processingMessage = 'Generating message',
@@ -46,7 +47,7 @@ export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
 
   return (
     <Box className={cs('vui-chat-input')} justifyContent="space-between" ref={ref} {...styles?.input} {...rest}>
-      {!!onNewTopicClick && <Button icon="falPlus" mr={1} onClick={() => onNewTopicClick?.()} />}
+      {!!onNewTopicClick && <Button icon="falPlus" mr={0.5} onClick={() => onNewTopicClick?.()} />}
       {status === ChatInputStatus.Processing ? (
         <Box borderColor="sandstone.79" 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" />
@@ -55,9 +56,8 @@ export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
       ) : (
         <Textarea
           disabled={isDisabled}
-          onChange={e => {
-            if (status === ChatInputStatus.Default) setValue(e.target.value)
-          }}
+          helpText={helpText}
+          onChange={e => status === ChatInputStatus.Default && setValue(e.target.value)}
           onKeyDown={onKeyDown}
           placeholder={placeholder}
           resize="vertical"

package/src/chat/chatInputButton.tsx

@@ -12,7 +12,7 @@ export const ChatInputButton = vui<'button', ChatInputButtonProps>((props, ref)
 
   const icon = status === ChatInputStatus.Processing ? 'falStopCircle' : 'falChevronCircleRight'
 
-  return <Button icon={icon} onClick={onClick} ref={ref} variant="tertiaryDark" {...styles?.inputButton} />
+  return <Button icon={icon} ml={0.5} onClick={onClick} ref={ref} variant="tertiaryDark" {...styles?.inputButton} />
 })
 
 ChatInputButton.displayName = 'ChatInputButton'

package/src/message/consts.ts

@@ -18,3 +18,8 @@ export const messageColors = {
   error: 'energyRed.45',
   success: 'landGreen.35',
 }
+
+export const avatarStyles = {
+  mt: '4px',
+  color: 'black',
+}

package/src/message/message.tsx

@@ -3,7 +3,7 @@ import { Box } from '../box'
 import { styled, useStyleConfig, vui } from '../core'
 import { Icon } from '../icon'
 import { cs } from '../utils'
-import { iconDictionary, spacingDictionary } from './consts'
+import { avatarStyles, iconDictionary, spacingDictionary } from './consts'
 import { MessageProps } from './message.types'
 
 export const MessageBase = styled.divBox`
@@ -23,7 +23,7 @@ export const Message = vui<'span', MessageProps>((props, ref) => {
         ) : (
           <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.fontSize} />
         )}
-        <Box mt={avatar ? '4px' : undefined} size={styles.fontSize} w="100%">
+        <Box size={styles.fontSize} w="100%" {...(avatar ? avatarStyles : undefined)}>
           {children ?? text}
         </Box>
       </Box>