wca-designsystem 1.0.58 → 1.0.60

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.58",
+  "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' },
       ],
     },
   ])
@@ -61,7 +61,7 @@ const Template: any = (args: any) => {
         {...args}
         messages={messages}
         isTyping={isTyping}
-        disabledInputUser={true}
+        disabledInputUser={false}
         setMessages={setMessages}
         setIsTyping={setIsTyping}
         respostaUser={respostaUser}

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'
 }
 
@@ -27,22 +32,27 @@ type ChatBotProps = {
   messages: MensagemChat[]
   setMessages: React.Dispatch<React.SetStateAction<MensagemChat[]>>
   disabledInputUser?: boolean
+  handleUserTextInput: () => void
+  handleOptionClick: (id: string, opcaoId: OpcaoChat) => void
 }
 
 const ChatBot = ({
   messages,
   isTyping,
   setMessages,
-  setIsTyping,
   respostaUser,
   setRespostaUser,
+  handleOptionClick,
+  handleUserTextInput,
   disabledInputUser = false,
 }: ChatBotProps) => {
-  const handleOptionSelect = (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
@@ -50,18 +60,16 @@ const ChatBot = ({
         return msg
       })
 
-      updatedMessages.push({ type: 'user', text: option })
+      updatedMessages.push({
+        idChat: idChat,
+        type: 'user',
+        text: option.mensagem,
+      })
       setMessages(updatedMessages)
-      setIsTyping(true)
+      handleOptionClick(idChat, option)
     }
   }
 
-  const handleSend = (innerHtml: string) => {
-    setMessages((prev: any) => [...prev, { type: 'user', text: innerHtml }])
-    setRespostaUser('')
-    setIsTyping(true)
-  }
-
   return (
     <ChatWrapper>
       <ChatContainer>
@@ -72,7 +80,7 @@ const ChatBot = ({
             )
           }
         >
-          {messages.map((msg: any, index: number) =>
+          {messages.map((msg: MensagemChat, index: number) =>
             msg.options ? (
               <Message
                 avatarPosition="top-left"
@@ -90,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}
-                        onClick={() => handleOptionSelect(opt)}
+                        key={opt.id}
+                        onClick={() => handleOptionSelect(msg.idChat, opt)}
                       >
-                        {i + 1}. {opt}
+                        {i + 1}. {opt.mensagem}
                       </BotaoChat>
                     ))}
                   </Flex>
@@ -120,7 +128,7 @@ const ChatBot = ({
         <MessageInput
           value={respostaUser}
           onChange={(val) => setRespostaUser(val)}
-          onSend={(msg) => handleSend(msg)}
+          onSend={() => handleUserTextInput()}
           attachButton={false}
           placeholder={
             disabledInputUser