@veracity/vui 2.25.6 → 2.26.0-beta.1

package/package.json

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

@@ -33,6 +33,7 @@ export const Accordion = vui<'div', AccordionProps>((props, ref) => {
         borderTop={isVertical ? `1px solid transparent` : undefined}
         className={cs('vui-accordion', className)}
         ref={ref}
+        w="100%"
         {...styles.container}
         {...aliasedProps}
         {...rest}

package/src/chat/chat.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from 'react'
+
+import Box from '../box'
+import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
+import { Tag } from '../tag'
+import { cs } from '../utils'
+import { ChatInputStatus, ChatProps } from './chat.types'
+import ChatInput from './chatInput'
+import ChatMessage from './chatMessage'
+
+/**
+ * Displays a chat interface with messages and actions.
+ */
+export const Chat = vui<'div', ChatProps>((props, ref) => {
+  const {
+    className,
+    children,
+    inputStatus = ChatInputStatus.Default,
+    messages,
+    processingMessage,
+    suggestions,
+    onNewTopicClick,
+    onSuggestionClick,
+    onSend,
+    onStop,
+    ...rest
+  } = omitThemingProps(props)
+
+  const styles = useStyleConfig('Chat', props)
+
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  const scrollDown = () => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+
+  useEffect(scrollDown, [messages, children])
+
+  return (
+    <Box
+      className={cs('vui-chat', className)}
+      ref={ref}
+      {...styles.chat}
+      h="100%"
+      justifyContent="space-between"
+      {...rest}
+    >
+      <Box className={cs('vui-chat-messages')} {...styles?.messages}>
+        {messages?.length ? messages.map((message, key) => <ChatMessage key={key} {...message} />) : children}
+        <div ref={messagesEndRef} />
+      </Box>
+      <Box column>
+        {!!suggestions?.length && (
+          <Box className={cs('vui-chat-suggestions')} {...styles?.suggestions} mb="24px" mt="8px">
+            {suggestions?.map(suggestion => (
+              <Tag
+                cursor={inputStatus === ChatInputStatus.Default ? 'pointer' : undefined}
+                disabled={inputStatus !== ChatInputStatus.Default}
+                key={suggestion}
+                mb="6px"
+                ml="6px"
+                onClick={() => onSuggestionClick?.(suggestion)}
+              >
+                {suggestion}
+              </Tag>
+            ))}
+          </Box>
+        )}
+        <ChatInput
+          onNewTopicClick={onNewTopicClick}
+          onSend={onSend}
+          onStop={onStop}
+          processingMessage={processingMessage}
+          status={inputStatus}
+          value=""
+        />
+      </Box>
+    </Box>
+  )
+}) as VuiComponent<'div', ChatProps> & {
+  Message: typeof ChatMessage
+  Input: typeof ChatInput
+}
+
+Chat.Message = ChatMessage
+Chat.Input = ChatInput
+Chat.displayName = 'Chat'
+export default Chat

package/src/chat/chat.types.ts

@@ -0,0 +1,49 @@
+import { AvatarProps } from '../avatar'
+import { BoxProps } from '../box'
+import { ButtonProps } from '../button'
+import { MessageProps } from '../message'
+import { ThemingProps } from '../theme'
+
+export enum ChatInputStatus {
+  Default = 'default',
+  Processing = 'processing',
+  Disabled = 'disabled',
+}
+
+export type ChatProps = Omit<BoxProps, 'size' | 'variant'> &
+  ThemingProps<'Chat'> & {
+    // Status of the chat input @default 'default'
+    inputStatus?: ChatInputStatus
+    // An array of chat messages
+    messages?: ChatMessageProps[]
+    // Optional string indicating a message being processed
+    processingMessage?: string
+    // An array of suggestion strings
+    suggestions?: string[]
+    // Callback function for when a new topic is clicked
+    onNewTopicClick?: () => void
+    // Callback function for when a suggestion is clicked
+    onSuggestionClick?: (suggestion: string) => void
+    // Optional callback function for sending a message
+    onSend?: (message: string) => void
+    // Optional callback function for stopping an action
+    onStop?: () => void
+  }
+
+export type ChatInputProps = Omit<BoxProps, 'size' | 'variant'> & {
+  placeholder?: string
+  status?: ChatInputStatus
+  /** @default 'Generating message' */
+  processingMessage?: string
+  onNewTopicClick?: () => void
+  onSend?: (message: string) => void
+  onStop?: () => void
+}
+
+export type ChatInputButtonProps = Omit<ButtonProps, 'size'> & {
+  status?: ChatInputStatus
+}
+
+export type ChatMessageProps = MessageProps & {
+  avatar?: AvatarProps
+}

package/src/chat/chatInput.tsx

@@ -0,0 +1,83 @@
+import { KeyboardEvent, useEffect, useState } from 'react'
+
+import Box from '../box'
+import Button from '../button'
+import { KeyboardKeys, useStyleConfig, vui } from '../core'
+import Icon from '../icon'
+import Textarea from '../textarea'
+import { cs } from '../utils'
+import { ChatInputProps, ChatInputStatus } from './chat.types'
+import ChatInputButton from './chatInputButton'
+
+/**
+ * Displays a chat interface with messages and actions.
+ */
+export const ChatInput = vui<'input', ChatInputProps>((props, ref) => {
+  const {
+    placeholder = 'Type your message',
+    status = ChatInputStatus.Default,
+    processingMessage = 'Generating message',
+    value: valueProp,
+    onNewTopicClick,
+    onSend,
+    onStop,
+    ...rest
+  } = props
+
+  const [value, setValue] = useState<string | undefined>(valueProp as string)
+  const styles = useStyleConfig('Chat', props)
+
+  useEffect(() => {
+    if (status === ChatInputStatus.Default) setValue(valueProp as string)
+  }, [status])
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === KeyboardKeys.Enter && e.ctrlKey) {
+      e.stopPropagation()
+      if (value?.length && status === ChatInputStatus.Default) onSend?.(value)
+    }
+    if (e.key === KeyboardKeys.Escape) {
+      e.stopPropagation()
+      if (status === ChatInputStatus.Processing) onStop?.()
+    }
+  }
+
+  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?.()} />}
+      {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" />
+          <Box>{processingMessage}</Box>
+        </Box>
+      ) : (
+        <Textarea
+          disabled={isDisabled}
+          onChange={e => {
+            if (status === ChatInputStatus.Default) setValue(e.target.value)
+          }}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
+          resize="vertical"
+          value={value}
+          w="100%"
+        />
+      )}
+
+      <ChatInputButton
+        disabled={!value?.length}
+        onClick={() => {
+          if (status === ChatInputStatus.Default) {
+            if (value?.length) onSend?.(value)
+          } else onStop?.()
+        }}
+        status={status as ChatInputStatus}
+      />
+    </Box>
+  )
+})
+
+ChatInput.displayName = 'ChatInput'
+export default ChatInput

package/src/chat/chatInputButton.tsx

@@ -0,0 +1,19 @@
+import { Button } from '../button'
+import { useStyleConfig, vui } from '../core'
+import { ChatInputButtonProps, ChatInputStatus } from './chat.types'
+
+/**
+ *  Displays a chat input button.
+ */
+export const ChatInputButton = vui<'button', ChatInputButtonProps>((props, ref) => {
+  const styles = useStyleConfig('Chat', props)
+
+  const { status = 'default', onClick } = props
+
+  const icon = status === ChatInputStatus.Processing ? 'falStopCircle' : 'falChevronCircleRight'
+
+  return <Button icon={icon} onClick={onClick} ref={ref} variant="tertiaryDark" {...styles?.inputButton} />
+})
+
+ChatInputButton.displayName = 'ChatInputButton'
+export default ChatInputButton

package/src/chat/chatMessage.tsx

@@ -0,0 +1,33 @@
+import { AvatarProps } from '../avatar'
+import { useStyleConfig, vui } from '../core'
+import Message from '../message'
+import { cs } from '../utils'
+import { ChatMessageProps } from './chat.types'
+
+const defaultAvatar: AvatarProps = {
+  variant: 'solidDarkBlue',
+  icon: 'cubVeracity',
+}
+
+/**
+ * Displays a chat interface with messages and actions.
+ */
+export const ChatMessage = vui<'div', ChatMessageProps>((props, ref) => {
+  const styles = useStyleConfig('Chat', props)
+  const { avatar = defaultAvatar, ...rest } = props
+
+  return (
+    <Message
+      avatar={avatar}
+      className={cs('vui-chat-message')}
+      h="100%"
+      my="16px"
+      ref={ref}
+      {...styles?.message}
+      {...rest}
+    />
+  )
+})
+
+ChatMessage.displayName = 'ChatMessage'
+export default ChatMessage

package/src/chat/index.ts

@@ -0,0 +1,5 @@
+export * from './chat'
+export * from './chatInput'
+export * from './chatMessage'
+export { default } from './chat'
+export * from './chat.types'

package/src/chat/theme.ts

@@ -0,0 +1,19 @@
+const baseStyle = {
+  chat: { flexDirection: 'column', w: '100%', height: '100%' },
+  messages: { flexDirection: 'column', overflowY: 'auto' },
+  suggestions: { display: 'block', textAlign: 'right', width: '100%' },
+  input: {},
+}
+
+const defaultProps = {}
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants,
+}

package/src/core/types.ts

@@ -12,3 +12,24 @@ export interface VuiContext {
   removeToast: (id: string) => void
   setPortalSlot: Dispatch<ReactNode>
 }
+
+export enum KeyboardKeys {
+  Enter = 'Enter',
+  Escape = 'Escape',
+  ArrowUp = 'ArrowUp',
+  ArrowDown = 'ArrowDown',
+  ArrowLeft = 'ArrowLeft',
+  ArrowRight = 'ArrowRight',
+  Backspace = 'Backspace',
+  Tab = 'Tab',
+  Shift = 'Shift',
+  Control = 'Control',
+  Alt = 'Alt',
+  Meta = 'Meta',
+  Space = 'Space',
+  Delete = 'Delete',
+  Home = 'Home',
+  End = 'End',
+  PageUp = 'PageUp',
+  PageDown = 'PageDown',
+}

package/src/icon/theme.ts

@@ -34,7 +34,12 @@ const sizes = {
   },
 }
 
-const variants = {}
+const variants = {
+  static: {},
+  spinning: {
+    animation: 'vui-spin 0.6s linear infinite',
+  },
+}
 
 export default {
   baseStyle,

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './buttonGroup'
 export * from './buttonToggleGroup'
 export * from './calendar'
 export * from './card'
+export * from './chat'
 export * from './checkbox'
 export * from './copyToClipboard'
 export * from './core'

package/src/message/message.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
-
+import { Avatar } from '../avatar'
 import { Box } from '../box'
 import { styled, useStyleConfig, vui } from '../core'
 import { Icon } from '../icon'
-import { T } from '../t'
 import { cs } from '../utils'
 import { iconDictionary, spacingDictionary } from './consts'
 import { MessageProps } from './message.types'
@@ -14,14 +12,20 @@ export const MessageBase = styled.divBox`
 
 /** Displays a simple message text. */
 export const Message = vui<'span', MessageProps>((props, ref) => {
-  const { children, className, text, size = 'lg', variant = 'info', ...rest } = props
+  const { avatar, children, className, text, size = 'lg', variant = 'info', ...rest } = props
   const styles = useStyleConfig('Message', props)
 
   return (
     <MessageBase className={cs('vui-message', className)} ref={ref} {...styles} {...rest}>
       <Box>
-        <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.fontSize} />
-        <T size={styles.fontSize}>{children ?? text}</T>
+        {avatar ? (
+          <Avatar mr="8px" {...avatar} />
+        ) : (
+          <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.fontSize} />
+        )}
+        <Box mt={avatar ? '4px' : undefined} size={styles.fontSize} w="100%">
+          {children ?? text}
+        </Box>
       </Box>
     </MessageBase>
   )

package/src/message/message.types.ts

@@ -1,10 +1,13 @@
-import { ReactText } from 'react'
+import { ReactNode } from 'react'
 
+import { AvatarProps } from '../avatar'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type MessageProps = SystemProps &
   ThemingProps<'Message'> & {
     /** Displays given text if no children are provided. */
-    text?: ReactText
+    text?: ReactNode
+    /** If provided, it shows the avatar instead of the status icon */
+    avatar?: AvatarProps
   }

package/src/modal/modal.tsx

@@ -1,7 +1,7 @@
 import React, { cloneElement, useRef } from 'react'
 
 import Box from '../box'
-import { vui, VuiComponent } from '../core'
+import { KeyboardKeys, vui, VuiComponent } from '../core'
 import FocusLock from '../focusLock'
 import Portal from '../portal'
 import { callAll, cs, KeyboardEvent, mergeRefs, MouseEvent } from '../utils'
@@ -65,7 +65,7 @@ export const Modal = vui<'div', ModalProps>((props, ref) => {
   }
 
   const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Escape') {
+    if (e.key === KeyboardKeys.Escape) {
       e.stopPropagation()
 
       !disableEscClose && onClose?.()

package/src/notification/consts.ts

@@ -18,9 +18,9 @@ export const notificationStatusMapping: NotificationStatusMapping = {
   },
   loading: {
     iconProps: {
-      animation: 'vui-spin 0.6s linear infinite',
       name: 'fadSpinnerThird',
       pathFill: ['blue.40', 'blue.60'],
+      variant: 'spinning',
     },
     variant: 'subtleBlue',
   },
@@ -50,9 +50,9 @@ export const notificationStatusMapping: NotificationStatusMapping = {
   },
   bannerLoading: {
     iconProps: {
-      animation: 'vui-spin 0.6s linear infinite',
       name: 'fadSpinnerThird',
       pathFill: ['blue.40', 'blue.60'],
+      variant: 'spinning',
     },
     variant: 'bannerBlue',
   },

package/src/notification/notificationIcon.tsx

@@ -23,6 +23,7 @@ export const NotificationIcon = vui<'svg', IconProps>((props, ref) => {
       mt={marginTop}
       ref={ref}
       size="md"
+      variant="loading"
       {...styles.icon}
       {...iconProps}
       {...rest}

package/src/popover/consts.ts

@@ -1,15 +1,15 @@
 import { Modifier } from '@popperjs/core'
 import { Plugin } from 'tippy.js'
 
+import { KeyboardKeys } from '../core'
+
 /** Closes the popper if 'Escape' is pressed. Tippy plugin. */
 export const closeOnEscPlugin: Plugin = {
   name: 'closeOnEsc',
   defaultValue: true,
   fn({ hide }) {
     function onKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        hide()
-      }
+      if (e.key === KeyboardKeys.Escape) hide()
     }
 
     return {

package/src/select/selectOption.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 import { Checkbox } from '../checkbox'
-import { useStyleConfig, vui } from '../core'
+import { KeyboardKeys, useStyleConfig, vui } from '../core'
 import { List, ListItem } from '../list'
 import { usePopoverContext } from '../popover'
 import { cs, ellipsisOverflow, KeyboardEvent, MouseEvent, useCallbackRef } from '../utils'
@@ -37,7 +37,7 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
     !isMultiple && hide()
   })
 
-  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))
+  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === KeyboardKeys.Enter && onClick(e))
 
   const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()
 

package/src/theme/components.ts

@@ -7,6 +7,7 @@ import Breadcrumbs from '../breadcrumbs/theme'
 import Button from '../button/theme'
 import Calendar from '../calendar/theme'
 import Card from '../card/theme'
+import Chat from '../chat/theme'
 import Checkbox from '../checkbox/theme'
 import DatePicker from '../datePicker/theme'
 import Definition from '../definition/theme'
@@ -66,6 +67,7 @@ export default {
   Button,
   Calendar,
   Card,
+  Chat,
   Checkbox,
   DatePicker,
   Dialog,