wca-designsystem 1.0.59 → 1.0.60

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.59",
+  "version": "1.0.60",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/Chat/Chat.stories.tsx

@@ -32,10 +32,10 @@ const Template: any = (args: any) => {
       type: 'bot',
       text: ' Legal! De que etapa prefere falar primero?',
       options: [
-        'Ciclos da Crítica',
-        'Acompanhamento da Crítica',
-        'Execução Crítica',
-        'Outra',
+        { id: 1, mensagem: 'Ciclos da Crítica' },
+        { id: 2, mensagem: 'Acompanhamento da Crítica' },
+        { id: 3, mensagem: 'Execução Crítica' },
+        { id: 4, mensagem: 'Outra' },
       ],
     },
   ])

package/src/components/molecules/Chat/index.tsx

@@ -12,10 +12,15 @@ import { Flex } from '@mantine/core'
 import icon from '../../../assets/imagens/WCA/wca_inteligencia_comercial_logo.png'
 import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'
 
+export type OpcaoChat = {
+  id: number
+  mensagem: string
+}
+
 export type MensagemChat = {
   idChat: string
   text: string
-  options?: string[]
+  options?: OpcaoChat[]
   type: 'bot' | 'user'
 }
 
@@ -28,7 +33,7 @@ type ChatBotProps = {
   setMessages: React.Dispatch<React.SetStateAction<MensagemChat[]>>
   disabledInputUser?: boolean
   handleUserTextInput: () => void
-  handleOptionClick: (id: string, opcaoId: string) => void
+  handleOptionClick: (id: string, opcaoId: OpcaoChat) => void
 }
 
 const ChatBot = ({
@@ -41,11 +46,13 @@ const ChatBot = ({
   handleUserTextInput,
   disabledInputUser = false,
 }: ChatBotProps) => {
-  const handleOptionSelect = (idChat: string, option: any) => {
-    const indexWithOptions = messages.findIndex((msg: any) => msg.options)
+  const handleOptionSelect = (idChat: string, option: OpcaoChat) => {
+    const indexWithOptions = messages.findIndex(
+      (msg: MensagemChat) => msg.options
+    )
 
     if (indexWithOptions !== -1) {
-      const updatedMessages = messages.map((msg: any, i: number) => {
+      const updatedMessages = messages.map((msg: MensagemChat, i: number) => {
         if (i === indexWithOptions) {
           const { options, ...rest } = msg
           return rest
@@ -53,7 +60,11 @@ const ChatBot = ({
         return msg
       })
 
-      updatedMessages.push({ type: 'user', text: option })
+      updatedMessages.push({
+        idChat: idChat,
+        type: 'user',
+        text: option.mensagem,
+      })
       setMessages(updatedMessages)
       handleOptionClick(idChat, option)
     }
@@ -69,7 +80,7 @@ const ChatBot = ({
             )
           }
         >
-          {messages.map((msg: any, index: number) =>
+          {messages.map((msg: MensagemChat, index: number) =>
             msg.options ? (
               <Message
                 avatarPosition="top-left"
@@ -87,12 +98,12 @@ const ChatBot = ({
 
                 <Message.Footer>
                   <Flex mt={5} gap={5} direction={'column'}>
-                    {msg.options.map((opt: any, i: number) => (
+                    {msg.options.map((opt: OpcaoChat, i: number) => (
                       <BotaoChat
-                        key={opt}
+                        key={opt.id}
                         onClick={() => handleOptionSelect(msg.idChat, opt)}
                       >
-                        {i + 1}. {opt}
+                        {i + 1}. {opt.mensagem}
                       </BotaoChat>
                     ))}
                   </Flex>