Merge pull request #1599 from basedosdados/feat/structured-chatbot

Feat/structured chatbot

Author: AldemirLucas

next/components/organisms/chatbot/ChatWindow.js

@@ -1,13 +1,24 @@
-import React, { useRef, useCallback, useEffect } from 'react';
+import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import { VStack, Box } from '@chakra-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import Message from './Message';
 
-function ChatWindow({ messages, onFeedback, scrollTrigger }) {
+function ChatWindow({ messages, onFeedback, onFollowUpClick, scrollTrigger }) {
   const scrollContainerRef = useRef(null);
   const shouldAutoScrollRef = useRef(true);
+  const isProgrammaticScrollRef = useRef(false);
   const bottomThreshold = 80;
 
+  const lastAssistantMessageId = useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+      const msg = messages[i];
+      if (msg?.role === 'assistant') {
+        return msg.id;
+      }
+    }
+    return null;
+  }, [messages]);
+
   const rowVirtualizer = useVirtualizer({
     count: messages.length,
     getScrollElement: () => scrollContainerRef.current,
@@ -25,11 +36,18 @@ function ChatWindow({ messages, onFeedback, scrollTrigger }) {
     if (!el) return;
 
     requestAnimationFrame(() => {
-      el.scrollTop = el.scrollHeight;
+      if (!scrollContainerRef.current) return;
+      isProgrammaticScrollRef.current = true;
+      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+      requestAnimationFrame(() => {
+        isProgrammaticScrollRef.current = false;
+      });
     });
   }, []);
 
   const handleScroll = useCallback(() => {
+    if (isProgrammaticScrollRef.current) return;
+
     const el = scrollContainerRef.current;
     if (!el) return;
 
@@ -64,6 +82,7 @@ function ChatWindow({ messages, onFeedback, scrollTrigger }) {
       align="stretch"
       spacing={0}
       css={{
+        overflowAnchor: "none",
         "&::-webkit-scrollbar": {
           width: "6px",
         },
@@ -95,9 +114,14 @@ function ChatWindow({ messages, onFeedback, scrollTrigger }) {
             transform={`translateY(${virtualRow.start}px)`}
             paddingBottom="16px"
           >
-            <Message 
-              message={messages[virtualRow.index]} 
-              onFeedback={onFeedback} 
+            <Message
+              message={messages[virtualRow.index]}
+              onFeedback={onFeedback}
+              showFollowUpQuestions={
+                messages[virtualRow.index]?.id === lastAssistantMessageId &&
+                !messages[virtualRow.index]?.isLoading
+              }
+              onFollowUpClick={onFollowUpClick}
             />
           </Box>
         ))}

next/components/organisms/chatbot/FeedbackModal.js

@@ -0,0 +1,118 @@
+import { useEffect, useState } from "react";
+import {
+  ModalCloseButton,
+  Stack,
+  Textarea,
+} from "@chakra-ui/react";
+import TitleText from "../../atoms/Text/TitleText";
+import {
+  ModalGeneral,
+  Button,
+  ExtraInfoTextForm,
+} from "../../molecules/uiUserPage";
+
+export default function FeedbackModal({
+  isOpen,
+  onClose,
+  rating,
+  onSubmit,
+  isSubmitting,
+}) {
+  const [feedbackText, setFeedbackText] = useState("");
+  const isPositive = rating === 1;
+
+  useEffect(() => {
+    if (isOpen) {
+      setFeedbackText("");
+    }
+  }, [isOpen, rating]);
+
+  const handleSubmit = () => {
+    onSubmit(feedbackText.trim());
+  };
+
+  return (
+    <ModalGeneral
+      isOpen={isOpen}
+      onClose={onClose}
+      propsModalContent={{
+        minWidth: { base: "auto", lg: "520px !important" },
+        maxWidth: "520px",
+      }}
+    >
+      <Stack spacing={0} marginBottom="16px">
+        <TitleText marginRight="24px">Feedback</TitleText>
+        <ModalCloseButton
+          fontSize="14px"
+          top="34px"
+          right="26px"
+          _hover={{ backgroundColor: "transparent", opacity: 0.7 }}
+          onClick={onClose}
+        />
+      </Stack>
+
+      <Stack spacing="16px" marginBottom="24px">
+        <ExtraInfoTextForm marginBottom="0">
+          Dê os detalhes: (opcional)
+        </ExtraInfoTextForm>
+
+        <Textarea
+          value={feedbackText}
+          onChange={(e) => setFeedbackText(e.target.value)}
+          placeholder={
+            isPositive
+              ? "O que foi satisfatório na resposta?"
+              : "O que foi insatisfatório na resposta?"
+          }
+          minHeight="120px"
+          resize="vertical"
+          border="2px solid transparent"
+          borderRadius="8px"
+          backgroundColor="#EEEEEE"
+          color="#464A51"
+          fontFamily="Roboto"
+          fontSize="14px"
+          lineHeight="20px"
+          padding="12px 16px"
+          _placeholder={{ color: "#71757A", opacity: 1 }}
+          _hover={{
+            border: "2px solid transparent",
+            backgroundColor: "#DEDFE0",
+          }}
+          _focus={{
+            border: "2px solid #0068C5",
+            backgroundColor: "#FFF",
+            boxShadow: "none",
+          }}
+        />
+      </Stack>
+
+      <Stack
+        flexDirection={{ base: "column-reverse", lg: "row" }}
+        spacing={0}
+        gap="16px"
+        width={{base: "100%", lg: "fit-content"}}
+        marginLeft={{ base: "0", lg: "auto" }}
+      >
+        <Button
+          isVariant
+          width={{base: "100%", lg: "fit-content"}}
+          minWidth="120px"
+          onClick={onClose}
+        >
+          Cancelar
+        </Button>
+
+        <Button
+          width={{base: "100%", lg: "fit-content"}}
+          minWidth="120px"
+          onClick={handleSubmit}
+          isLoading={isSubmitting}
+          isDisabled={!isPositive && feedbackText.trim() === ""}
+        >
+          Enviar
+        </Button>
+      </Stack>
+    </ModalGeneral>
+  );
+}