@stack-spot/ai-chat-widget 1.8.5 → 1.9.0

package/src/views/Chat/ChatMessage.tsx

@@ -1,9 +1,11 @@
-import { Button, IconBox, Text } from '@citric/core'
+import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
 import { Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
 import { Avatar, Badge, IconButton } from '@citric/ui'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { Dispatch, useCallback, useMemo, useRef, useState } from 'react'
+import { PhoneInput } from 'react-international-phone'
+import 'react-international-phone/style.css'
 import { Markdown } from '../../components/Markdown'
 import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
@@ -28,12 +30,98 @@ interface Props {
   isLast: boolean,
 }
 
+interface RenderInputsEntryProps { 
+  isLast: boolean, 
+  entry: TextChatEntry, 
+  value: string[], 
+  setValue: Dispatch<React.SetStateAction<string[]>>,
+  labels: string[], 
+  setLabels: Dispatch<React.SetStateAction<string[]>>,
+}
+
+const RenderInputsEntry = ({ isLast, entry, value, setValue, setLabels }: RenderInputsEntryProps) => {
+  const chat = useCurrentChat()
+
+  const renderInputs = () => {
+    if (entry.type === 'input-text') {
+      return <Input name={entry.name} {...entry.validations} onChange={(data) => setValue([data.target.value])} required={entry.required} />
+    }
+
+    if (entry.type === 'input-radio') {
+      return <Flex>
+        {entry.options?.map((option) => (<Box w={6} key={option.value}>
+          <Label htmlFor={option.value} colorScheme="light.contrastText">
+            <Radio name={entry.name} id={option.value} onChange={(data) => {
+              if (data.target.checked) {
+                setValue([option.label])
+                option.value && setLabels([option.value])
+              } else {
+                setValue([])
+              }
+            }} />
+            <Text ml={3}>{option.label}</Text>
+          </Label>
+        </Box>))}
+      </Flex>
+    }
+
+    if (entry.type === 'button-list') {
+      return <Flex>
+        {entry.options?.map((item) => (<Button key={item.label} colorScheme={item.color} 
+          onClick={() => {
+            item.value && chat.pushMessage(
+              ChatEntry.createUserEntry(item.value, false, entry.name, item?.label ? [item?.label] : undefined),
+            )
+          }}>
+          {item.label}
+        </Button>))
+        }</Flex>
+    }
+
+    if (entry.type === 'input-checkbox') {
+      return <Flex>
+        {entry.options?.map((option) => (
+          <Flex w={6} key={option.label}>
+            <Checkbox name={entry.name} key={option.label} onChange={(data) => {
+              if (data.target.checked) {
+                setValue([...value, option.label])
+                option.value && setLabels([option.value])
+              } else {
+                const newValue = value.filter(((item) => item !== option.label))
+                setValue([...newValue])
+              }
+            }}/>
+            <Text ml={3}>{option.label}</Text>
+          </Flex>))}
+      </Flex>
+    }
+
+    if (entry.type === 'input-phone') {
+      return (<PhoneInput
+        defaultCountry="br"
+        value={value[0]}
+        onChange={(phone) => setValue([phone])}
+        className="input-phone"
+        placeholder="11961234567"
+      />)
+    }
+    return <p className="plain-text">{entry.content}</p>
+  }
+
+  return <Flex flexDirection="column">
+    <Text appearance="body2" mb={4}>{entry.content}</Text>
+    {isLast && renderInputs()}
+  </Flex>
+}
+
 /**
  * Renders a message (ChatEntry) in the chat.
  */
 export const ChatMessage = ({ message, username, isLast }: Props) => {
   const t = useTranslate(dictionary)
   const [liked, setLiked] = useState<boolean | undefined>()
+  const [value, setValue] = useState<string[]>([])
+  const [labels, setLabels] = useState<string[]>([])
   const entry = useChatEntry(message)
   const dateFormatter = useDateFormatter()
   const userInfo = entry.agentType === 'user' ? <Avatar size="xs">{username}</Avatar> : <AgentInfo agent={entry.agent} />
@@ -50,13 +138,17 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
     widget.set('panel', 'ks-details')
   }, [])
 
-  const runAction = useCallback((action: SerializableAction) => {
+  const runAction = (action: SerializableAction) => {
     if (action.type === 'link') {
       window.open(action.exec, '_blank')
     } else {
-      chat.pushMessage(ChatEntry.createUserEntry(action.exec))
+      if (action.exec) {
+        chat.pushMessage(ChatEntry.createUserEntry(action.exec))
+      } else {
+        value && chat.pushMessage(ChatEntry.createUserEntry(value.toString(), false, entry.name, labels))
+      }
     }
-  }, [])
+  }
 
   const { like, dislike } = useMemo(() => {
     async function feedback(like: boolean) {
@@ -82,6 +174,17 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
     }
   }
 
+  const renderContent = () => {
+    if (entry.type === 'md') {
+      return <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
+    }
+    if (entry.type === 'text') {
+      return <p className="plain-text">{entry.content}</p>
+    }
+
+    return <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
+  }
+
   return (entry.content || entry.error) && (
     <li className={entry.agentType} ref={ref}>
       <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
@@ -90,24 +193,22 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
           {entry.badges?.length && <div className="badges">
             {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
           </div>}
-          {entry.type === 'md'
-            ? <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
-            : <p className="plain-text">{entry.content}</p>
-          }
+          {renderContent()}
           {entry.actions?.length && (
             <div className="actions">
               {entry.actions.map(
-                (a, index) => (
-                  <Button
+                (a, index) => (<>
+                  {(!a.hideWhenNotLast || isLast) && <Button
                     key={index}
                     appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
-                    colorScheme="inverse"
+                    colorScheme={a.colorScheme ? a.colorScheme : 'inverse'}
                     onClick={() => runAction(a)}
-                    disabled={!isLast}
+                    disabled={(entry.required && !value.length) ?? !isLast}
+                    type={a.buttonType ?? 'button'}
                   >
                     {a.title}
-                  </Button>
-                ),
+                  </Button>}
+                </>),
               )}
             </div>
           )}