@credithub/harlan-components 1.37.6 → 1.38.0

package/dist/assets/btn/btnSend.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function BtnSend({ fill, ...rest }: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default BtnSend;

package/dist/assets/btn/btnSend.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useTheme } from 'styled-components';
+function BtnSend(_a) {
+    var fill = _a.fill, rest = __rest(_a, ["fill"]);
+    var theme = useTheme();
+    var color = fill || theme.colors.azulCredithub;
+    return (React.createElement("svg", __assign({ width: "47", height: "47", viewBox: "0 0 47 47", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React.createElement("circle", { cx: "23.5", cy: "23.5", r: "23.5", fill: "#72BBF3" }),
+        React.createElement("circle", { cx: "23.5", cy: "23.5", r: "15", fill: "white", stroke: color, strokeWidth: "5" }),
+        React.createElement("mask", { id: "mask0_437_6958", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "14", y: "13", width: "20", height: "20" },
+            React.createElement("rect", { x: "14", y: "13", width: "20", height: "20", fill: "#D9D9D9" })),
+        React.createElement("g", { mask: "url(#mask0_437_6958)" },
+            React.createElement("path", { d: "M23.2503 19.875L19.5793 23.546C19.4294 23.6959 19.2538 23.7708 19.0524 23.7708C18.851 23.7708 18.6706 23.6944 18.5112 23.5417C18.365 23.3889 18.292 23.2118 18.292 23.0104C18.292 22.809 18.3671 22.6333 18.5174 22.4831L23.4776 17.5292C23.5528 17.4542 23.6341 17.3993 23.7218 17.3646C23.8094 17.3299 23.9034 17.3125 24.0037 17.3125C24.1038 17.3125 24.1978 17.3299 24.2855 17.3646C24.3732 17.3993 24.4517 17.4514 24.5212 17.5208L29.4795 22.4792C29.6323 22.6319 29.7087 22.8056 29.7087 23C29.7087 23.1944 29.6356 23.3681 29.4895 23.5208C29.33 23.6736 29.1485 23.75 28.9447 23.75C28.7411 23.75 28.5652 23.6736 28.417 23.5208L24.7503 19.875V28.2504C24.7503 28.4628 24.6789 28.6408 24.536 28.7846C24.393 28.9282 24.216 29 24.0047 29C23.7935 29 23.6149 28.9282 23.4691 28.7846C23.3232 28.6408 23.2503 28.4628 23.2503 28.2504V19.875Z", fill: color }))));
+}
+export default BtnSend;

package/dist/assets/btn/stopBtn.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function StopButton({ fill, ...rest }: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default StopButton;

package/dist/assets/btn/stopBtn.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useTheme } from 'styled-components';
+function StopButton(_a) {
+    var _b = _a.fill, fill = _b === void 0 ? '#FFFFFF' : _b, rest = __rest(_a, ["fill"]);
+    var theme = useTheme();
+    var background = theme.colors.azulCredithub;
+    return (React.createElement("svg", __assign({ width: "47", height: "47", viewBox: "0 0 47 47", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React.createElement("circle", { cx: "23.5", cy: "23.5", r: "23.5", fill: background }),
+        React.createElement("rect", { x: "16", y: "16", width: "15", height: "15", rx: "2", fill: fill })));
+}
+export default StopButton;

package/dist/assets/icones/credithub.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from '@/@types/icon';
+import React from 'react';
+declare const Credithub: React.FC<IconProps>;
+export default Credithub;

package/dist/assets/icones/credithub.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+var Credithub = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 18 : _c, circleFill = _a.circleFill;
+    var theme = useTheme();
+    var fill = circleFill || theme.colors.azulCredithub;
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        React.createElement("g", { clipPath: "url(#clip0_437_7403)" },
+            React.createElement("path", { d: "M18 8.99947C18 4.0284 13.9695 0 8.99973 0C4.02997 0 0 4.0284 0 8.99947C0 13.9705 4.0289 18 8.99973 18C13.9706 18 18 13.9705 18 8.99947Z", fill: fill }),
+            React.createElement("path", { d: "M6.84842 12.0296V9.17235H3.70547V12.0296H2.57324V5.34473H3.70547V8.1072H6.84842V5.34473H7.99025V12.0296H6.84842Z", fill: "white" }),
+            React.createElement("path", { d: "M10.7182 12.1614C9.62326 12.1614 8.98145 11.3503 8.98145 10.3321V7.4375H10.0764V10.1339C10.0764 10.6995 10.3408 11.1804 11.0012 11.1804C11.6617 11.1804 11.9639 10.7565 11.9639 10.1531V7.4375H13.0589V11.1906C13.0589 11.5676 13.0871 11.86 13.1063 12.0299H12.0583C12.0396 11.9261 12.0204 11.7093 12.0204 11.5208C11.7939 11.9356 11.256 12.162 10.7182 12.162V12.1614Z", fill: "white" }),
+            React.createElement("path", { d: "M17.8837 7.55498C17.5954 7.40107 17.2531 7.31479 16.8587 7.31479C16.1508 7.31479 15.6225 7.64445 15.4146 8.00341V5.20312H14.3389V12.0297H15.4055V11.4167C15.6699 11.8598 16.1699 12.1426 16.8208 12.1426C17.0527 12.1426 17.2691 12.1106 17.4685 12.0515C17.8118 11.0987 17.9994 10.0714 17.9994 8.99986C17.9994 8.50776 17.9594 8.02524 17.8832 7.55498H17.8837ZM16.6422 11.1717C15.9434 11.1717 15.4061 10.6253 15.4061 9.7199C15.4061 8.81452 15.9439 8.28621 16.6422 8.28621C17.3406 8.28621 17.879 8.8044 17.879 9.7199C17.879 10.6354 17.3592 11.1717 16.6422 11.1717Z", fill: "white" })),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: "clip0_437_7403" },
+                React.createElement("rect", { width: "18", height: "18", fill: "white" })))));
+};
+export default Credithub;

package/dist/assets/icones/person.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from '@/@types/icon';
+import React from 'react';
+declare const Person: React.FC<IconProps>;
+export default Person;

package/dist/assets/icones/person.js

@@ -0,0 +1,11 @@
+import React from 'react';
+var Person = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 18 : _c;
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        React.createElement("circle", { cx: "9", cy: "9", r: "9", fill: "#D1D1D1" }),
+        React.createElement("mask", { id: "mask0_437_7398", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "2", y: "2", width: "14", height: "14" },
+            React.createElement("rect", { x: "2", y: "2", width: "14", height: "14", fill: "#D9D9D9" })),
+        React.createElement("g", { mask: "url(#mask0_437_7398)" },
+            React.createElement("path", { d: "M8.99883 8.9998C8.41549 8.9998 7.91966 8.79564 7.51133 8.3873C7.10299 7.97897 6.89883 7.48314 6.89883 6.8998C6.89883 6.31647 7.10299 5.82064 7.51133 5.4123C7.91966 5.00397 8.41549 4.7998 8.99883 4.7998C9.58216 4.7998 10.078 5.00397 10.4863 5.4123C10.8947 5.82064 11.0988 6.31647 11.0988 6.8998C11.0988 7.48314 10.8947 7.97897 10.4863 8.3873C10.078 8.79564 9.58216 8.9998 8.99883 8.9998ZM4.79883 12.1498V11.7998C4.79883 11.5762 4.85959 11.3647 4.98112 11.1654C5.10265 10.9661 5.27036 10.7984 5.48424 10.6623C6.01897 10.3512 6.58427 10.113 7.18014 9.94772C7.77602 9.78244 8.38122 9.6998 8.99577 9.6998C9.61031 9.6998 10.2165 9.78244 10.8145 9.94772C11.4124 10.113 11.9787 10.3512 12.5134 10.6623C12.7273 10.7887 12.895 10.954 13.0165 11.1581C13.1381 11.3623 13.1988 11.5762 13.1988 11.7998V12.1498C13.1988 12.4386 13.096 12.6857 12.8902 12.8914C12.6845 13.097 12.4372 13.1998 12.1482 13.1998H5.84474C5.5558 13.1998 5.30924 13.097 5.10508 12.8914C4.90091 12.6857 4.79883 12.4386 4.79883 12.1498ZM5.84883 12.1498H12.1488V11.7998C12.1488 11.7494 12.1341 11.7037 12.1046 11.6626C12.0753 11.6214 12.0365 11.5893 11.9884 11.5665C11.5412 11.2942 11.0648 11.0901 10.5592 10.954C10.0537 10.8179 9.53355 10.7498 8.99883 10.7498C8.46411 10.7498 7.94397 10.8179 7.43841 10.954C6.93286 11.0901 6.45647 11.2942 6.00924 11.5665C5.96063 11.6054 5.92174 11.6429 5.89258 11.6791C5.86341 11.7153 5.84883 11.7556 5.84883 11.7998V12.1498ZM9.00189 7.9498C9.29151 7.9498 9.53841 7.8467 9.74258 7.64049C9.94674 7.43428 10.0488 7.18637 10.0488 6.89674C10.0488 6.60712 9.94572 6.36022 9.73951 6.15605C9.53331 5.95189 9.28539 5.8498 8.99577 5.8498C8.70614 5.8498 8.45924 5.95291 8.25508 6.15912C8.05091 6.36533 7.94883 6.61324 7.94883 6.90287C7.94883 7.19249 8.05193 7.43939 8.25814 7.64355C8.46435 7.84772 8.71226 7.9498 9.00189 7.9498Z", fill: "#353535" }))));
+};
+export default Person;

package/dist/components/dossie/dossie.js

@@ -24,6 +24,7 @@ import { Section } from '../section';
 import { Queries, RequestStatus } from '../webservice';
 import { Carrousel } from './carrousel/carrousel';
 import { createDossieData } from './dossieData';
+import Llama from './llama/llama';
 import { Summary } from './summary/summary';
 import { TransactionsTable } from './transactionTable/transactionTable';
 var DossieContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  justify-items: center;\n  align-items: flex-start;\n  margin-bottom: 20px;\n  gap: 20px;\n\n  @media screen and (max-width: 992px) {\n    grid-template-columns: 1fr;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  justify-items: center;\n  align-items: flex-start;\n  margin-bottom: 20px;\n  gap: 20px;\n\n  @media screen and (max-width: 992px) {\n    grid-template-columns: 1fr;\n  }\n"])));
@@ -69,7 +70,9 @@ var Dossie = function (_a) {
                 React.createElement(DossieContent, null,
                     React.createElement(DossieCarrousel, null),
                     React.createElement(Summary, { finderResponse: data, rfbResponse: rfbResponse, document: document })),
-                React.createElement(TransactionsTable, { events: XPathUtils.select('//historico/consulta', data) || [] }))));
+                React.createElement(TransactionsTable, { events: XPathUtils.select('//historico/consulta', data) || [] })),
+            React.createElement(LlamaContainer, null,
+                React.createElement(Llama, { documento: document }))));
     };
     return (React.createElement(Section, { ctx: ctx, hideHeader: true, minimized: false, isError: function (e) { return response(e); }, onSuccess: response }));
 };

package/dist/components/dossie/llama/dataUtils.d.ts

@@ -0,0 +1,25 @@
+export declare function flattenData(data: any): string;
+export declare const selectRelevantData: (data: any, documento: string) => {
+    documento: string;
+    protestos: any;
+    ultimoRegistroCCF: any;
+    ccf: any;
+    dividasPublicas: any;
+    processosJuridicos: any;
+    bankAccounts: any;
+    ccfData: any;
+    divida: any;
+    dossie: any;
+    imoveis: any;
+    liminar: any;
+    partners: any;
+    pepData: any;
+    processosJuridicosData: any;
+    protestosData: any;
+    reclameAqui: any;
+    refinBoaVista: any;
+    refinSerasa: any;
+    scoreData: any;
+    scr: any;
+    veiculos: any;
+};

package/dist/components/dossie/llama/dataUtils.js

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { safeStringify } from './responseUtils';
+export function flattenData(data) {
+    var flattened = {};
+    for (var key in data) {
+        if (typeof data[key] === 'object' && !Array.isArray(data[key])) {
+            for (var innerKey in data[key]) {
+                flattened["".concat(key, "_").concat(innerKey)] = data[key][innerKey];
+            }
+        }
+        else {
+            flattened[key] = data[key];
+        }
+    }
+    return safeStringify(flattened);
+}
+export var selectRelevantData = function (data, documento) {
+    var protestos = data.protestos, ultimoRegistroCCF = data.ultimoRegistroCCF, ccf = data.ccf, dividasPublicas = data.dividasPublicas, processosJuridicos = data.processosJuridicos, bankAccounts = data.bankAccounts, ccfData = data.ccfData, divida = data.divida, dossie = data.dossie, imoveis = data.imoveis, liminar = data.liminar, partners = data.partners, pepData = data.pepData, processosJuridicosData = data.processosJuridicosData, protestosData = data.protestosData, reclameAqui = data.reclameAqui, refinBoaVista = data.refinBoaVista, refinSerasa = data.refinSerasa, scoreData = data.scoreData, scr = data.scr, veiculos = data.veiculos;
+    return {
+        documento: documento,
+        protestos: protestos,
+        ultimoRegistroCCF: ultimoRegistroCCF,
+        ccf: ccf,
+        dividasPublicas: dividasPublicas,
+        processosJuridicos: processosJuridicos,
+        bankAccounts: bankAccounts,
+        ccfData: ccfData,
+        divida: divida,
+        dossie: dossie,
+        imoveis: imoveis,
+        liminar: liminar,
+        partners: partners,
+        pepData: pepData,
+        processosJuridicosData: processosJuridicosData,
+        protestosData: protestosData,
+        reclameAqui: reclameAqui,
+        refinBoaVista: refinBoaVista,
+        refinSerasa: refinSerasa,
+        scoreData: scoreData,
+        scr: scr,
+        veiculos: veiculos
+    };
+};

package/dist/components/dossie/llama/llama.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -7,103 +18,120 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import BtnSend from '../../../assets/btn/btnSend';
+import BtnWrapper from '../../../assets/btn/btnWrapper';
+import ChevronDown from '../../../assets/btn/chevronDown';
+import ChevronUp from '../../../assets/btn/chevronUp';
+import StopButton from '../../../assets/btn/stopBtn';
+import Credithub from '../../../assets/icones/credithub';
+import Person from '../../../assets/icones/person';
 import StatusMessage from '../../../components/interface/statusMessage';
-import { useQuery } from '../../../components/webservice';
+import { useStreamQuery } from '../../../components/streamQuery';
 import { useGlobalData } from '../../../contexts/globalDataContext';
-import React, { useEffect, useMemo, useState } from 'react';
-import { ChatInput, ChatInputContainer, Container, ContainerInput, Header, InitialMessageBox, InitialMessageContent, Message, MessageHistory, SendButton, Title } from './styles';
-var isValidLlamaApiResponse = function (response) {
-    return (response &&
-        typeof response === 'object' &&
-        response.document &&
-        typeof response.document.messages === 'string');
-};
-function safeStringify(obj) {
-    var seen = new WeakSet();
-    return JSON.stringify(obj, function (_, value) {
-        if (typeof value === 'object' && value !== null) {
-            if (seen.has(value)) {
-                return;
+import useToggle from '../../../hooks/useToggle';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { flattenData, selectRelevantData } from './dataUtils';
+import { createQueryAndMessages } from './queryUtils';
+import { ChatInput, ChatInputContainer, Container, ContainerInput, Header, HeaderContent, InitialMessageBox, InitialMessageContent, LoadingDots, Message, MessageHistory, SendButton, Title } from './styles';
+var Llama = function (_a) {
+    var _b, _c, _d;
+    var documento = _a.documento;
+    var globalData = useGlobalData().data;
+    var _e = useState('{}'), serializedData = _e[0], setSerializedData = _e[1];
+    var _f = useState(false), queryEnabled = _f[0], setQueryEnabled = _f[1];
+    var _g = useState(''), userInput = _g[0], setUserInput = _g[1];
+    var _h = useState([]), messageHistory = _h[0], setMessageHistory = _h[1];
+    var _j = useToggle(), isOpen = _j[0], toggleOpen = _j[1];
+    var messageHistoryRef = useRef(null);
+    var incrementalResponseRef = useRef('');
+    var abortControllerRef = useRef(null);
+    var _k = useState(false), hasMadeInitialRequest = _k[0], setHasMadeInitialRequest = _k[1];
+    var _l = useState(false), isProcessing = _l[0], setIsProcessing = _l[1];
+    var _m = useState(false), shouldStartTyping = _m[0], setShouldStartTyping = _m[1];
+    var _o = useState(''), typingMessage = _o[0], setTypingMessage = _o[1];
+    var _p = useState(false), isTyping = _p[0], setIsTyping = _p[1];
+    var _q = useState(0), currentMessageIndex = _q[0], setCurrentMessageIndex = _q[1];
+    var typingIntervalRef = useRef(null);
+    var simulateTyping = function (message, callback) {
+        setIsTyping(true);
+        var index = typingMessage.length - 1;
+        if (typingIntervalRef.current) {
+            clearInterval(typingIntervalRef.current);
+        }
+        typingIntervalRef.current = setInterval(function () {
+            if (index < message.length) {
+                setTypingMessage(function (prev) { return prev + message[index]; });
+                index++;
             }
-            seen.add(value);
-        }
-        return value;
-    });
-}
-var selectRelevantData = function (data, documento) {
-    var protestos = data.protestos, ultimoRegistroCCF = data.ultimoRegistroCCF, ccf = data.ccf, dividasPublicas = data.dividasPublicas, processosJuridicos = data.processosJuridicos, bankAccounts = data.bankAccounts, ccfData = data.ccfData, divida = data.divida, dossie = data.dossie, imoveis = data.imoveis, liminar = data.liminar, partners = data.partners, pepData = data.pepData, processosJuridicosData = data.processosJuridicosData, protestosData = data.protestosData, reclameAqui = data.reclameAqui, refinBoaVista = data.refinBoaVista, refinSerasa = data.refinSerasa, scoreData = data.scoreData, scr = data.scr, veiculos = data.veiculos;
-    return {
-        documento: documento,
-        protestos: protestos,
-        ultimoRegistroCCF: ultimoRegistroCCF,
-        ccf: ccf,
-        dividasPublicas: dividasPublicas,
-        processosJuridicos: processosJuridicos,
-        bankAccounts: bankAccounts,
-        ccfData: ccfData,
-        divida: divida,
-        dossie: dossie,
-        imoveis: imoveis,
-        liminar: liminar,
-        partners: partners,
-        pepData: pepData,
-        processosJuridicosData: processosJuridicosData,
-        protestosData: protestosData,
-        reclameAqui: reclameAqui,
-        refinBoaVista: refinBoaVista,
-        refinSerasa: refinSerasa,
-        scoreData: scoreData,
-        scr: scr,
-        veiculos: veiculos
-    };
-};
-function flattenData(data) {
-    // Declara o tipo do objeto flattened como { [key: string]: any }
-    var flattened = {};
-    for (var key in data) {
-        if (typeof data[key] === 'object' && !Array.isArray(data[key])) {
-            for (var innerKey in data[key]) {
-                flattened["".concat(key, "_").concat(innerKey)] = data[key][innerKey];
+            else {
+                clearInterval(typingIntervalRef.current);
+                setIsTyping(false);
+                callback();
             }
+        }, 25);
+    };
+    var stopTyping = function () {
+        if (typingIntervalRef.current) {
+            clearInterval(typingIntervalRef.current);
+            typingIntervalRef.current = null;
+            setMessageHistory(function (prevMessages) {
+                var updatedMessages = __spreadArray([], prevMessages, true);
+                if (updatedMessages.length > 0 &&
+                    updatedMessages[updatedMessages.length - 1].role === 'assistant') {
+                    updatedMessages[updatedMessages.length - 1] = __assign(__assign({}, updatedMessages[updatedMessages.length - 1]), { content: typingMessage });
+                }
+                return updatedMessages;
+            });
+            setIsTyping(false);
+        }
+    };
+    var processMessages = function () {
+        var nextMessage = messageHistory[currentMessageIndex];
+        if ((nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.role) === 'assistant') {
+            simulateTyping(nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.content, function () {
+                setCurrentMessageIndex(function (prev) { return prev + 1; });
+            });
         }
         else {
-            flattened[key] = data[key];
+            setCurrentMessageIndex(function (prev) { return prev + 1; });
+        }
+    };
+    useEffect(function () {
+        if (currentMessageIndex < messageHistory.length && !isTyping) {
+            var nextMessage = messageHistory[currentMessageIndex];
+            if ((nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.role) === 'assistant') {
+                simulateTyping(nextMessage.content, function () {
+                    setCurrentMessageIndex(function (prev) { return prev + 1; });
+                });
+            }
+        }
+    }, [currentMessageIndex, messageHistory]);
+    var handleIncrementalResponse = function (response) {
+        var nonEmptyFragments = response.filter(function (e) { return e.message.content !== ''; });
+        if (nonEmptyFragments.length > 0) {
+            var newContent = nonEmptyFragments
+                .map(function (e) { return e.message.content; })
+                .join('');
+            incrementalResponseRef.current =
+                incrementalResponseRef.current + newContent;
+        }
+        if (response.some(function (e) { return e.done; })) {
+            var aiMessage_1 = incrementalResponseRef.current;
+            setQueryEnabled(false);
+            incrementalResponseRef.current = '';
+            setMessageHistory(function (prevMessages) { return __spreadArray(__spreadArray([], prevMessages, true), [
+                { role: 'assistant', content: aiMessage_1 }
+            ], false); });
         }
-    }
-    return safeStringify(flattened);
-}
-var createQueryAndMessages = function (relevantData, messageHistory, extraMessage) {
-    var baseMessages = __spreadArray([
-        {
-            role: 'system',
-            content: 'Você é um assistente financeiro especializado em análise de crédito. Sua tarefa é fornecer um alerta claro e direto sobre a existência de protestos, processos judiciais e outros problemas financeiros da empresa, sempre priorizando informações mais relevantes.'
-        },
-        {
-            role: 'user',
-            content: "\n        Esse dossi\u00EA inclui informa\u00E7\u00F5es financeiras e jur\u00EDdicas importantes. Sua tarefa \u00E9:\n        1. Informar se h\u00E1 protestos, processos judiciais ou outros problemas financeiros.\n        2. Priorizar informa\u00E7\u00F5es sobre processos judiciais, caso existam, e em seguida mencionar protestos.\n        3. N\u00E3o repetir informa\u00E7\u00F5es irrelevantes como valores ou detalhes n\u00E3o essenciais.\n        4. Manter o resumo curto, focando apenas em pontos cr\u00EDticos para a an\u00E1lise de cr\u00E9dito, com no m\u00E1ximo 300 caracteres.\n        5. N\u00E3o precisa falar sobre o que tem nos dados, o que dados incluem.\n\n        Aqui est\u00E3o os dados da empresa: ".concat(relevantData, ".\n\n        Responda em portugu\u00EAs de forma objetiva, com foco em informa\u00E7\u00F5es cr\u00EDticas e evitando linguagem t\u00E9cnica. Construa a resposta com a\n        seguinte estrutura: Esse dossie tem alguns problemas com processos juridiciais relacionados a credito e trabalhistas, bem como protestos, tenha cuidado.\n        A estrutura que apresentei \u00E9 meramente ilustrativa n\u00E3o se restrinja, apenas uma ideia para se guiar.\n        ").concat(extraMessage || '', "\n      ")
-        }
-    ], messageHistory, true);
-    return {
-        model: 'llama3',
-        messages: JSON.stringify(baseMessages)
     };
-};
-var Llama = function (_a) {
-    var documento = _a.documento;
-    var globalData = useGlobalData().data;
-    var _b = useState('{}'), serializedData = _b[0], setSerializedData = _b[1];
-    var _c = useState(false), queryEnabled = _c[0], setQueryEnabled = _c[1];
-    var _d = useState(''), userInput = _d[0], setUserInput = _d[1];
-    var _e = useState([]), messageHistory = _e[0], setMessageHistory = _e[1];
-    var _f = useState(''), initialMessage = _f[0], setInitialMessage = _f[1];
     useEffect(function () {
-        if (globalData && documento) {
+        if (globalData && documento && !hasMadeInitialRequest) {
             try {
                 var relevantData = selectRelevantData(globalData, documento);
                 var serialized = flattenData(relevantData);
                 setSerializedData(serialized);
                 setQueryEnabled(true);
+                setHasMadeInitialRequest(true);
             }
             catch (error) {
                 console.error('Erro ao preparar os dados para a API:', error);
@@ -111,47 +139,122 @@ var Llama = function (_a) {
                 setQueryEnabled(false);
             }
         }
-    }, [documento, globalData]);
+    }, [documento, globalData, hasMadeInitialRequest]);
     var queryData = useMemo(function () {
         if (!queryEnabled || !serializedData || serializedData === '{}')
             return undefined;
-        return createQueryAndMessages(serializedData, []);
-    }, [queryEnabled, serializedData]);
-    var _g = useQuery("SELECT FROM 'LlamaApi'.'Consulta'", queryData, !!queryData), response = _g.response, error = _g.error, isLoading = _g.isLoading, refetch = _g.refetch;
+        var query = createQueryAndMessages(serializedData, messageHistory);
+        return query;
+    }, [queryEnabled, serializedData, messageHistory]);
+    var _r = useStreamQuery("SELECT FROM 'LlamaApi'.'Consulta'", queryData, !!queryData), response = _r.response, error = _r.error, isLoading = _r.isLoading, refetch = _r.refetch;
     useEffect(function () {
-        var _a;
-        if (response && !isLoading && !error) {
-            if (isValidLlamaApiResponse(response) && ((_a = response.document) === null || _a === void 0 ? void 0 : _a.messages)) {
-                setInitialMessage(response.document.messages || 'Resumo não disponível');
+        abortControllerRef.current = new AbortController();
+        return function () {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
             }
-            else {
-                setInitialMessage('Resumo não disponível');
+            if (typingIntervalRef.current) {
+                clearInterval(typingIntervalRef.current);
             }
+        };
+    }, [queryEnabled]);
+    useEffect(function () {
+        if (response && !isLoading && !error) {
+            handleIncrementalResponse(response);
+            setIsProcessing(false);
+        }
+        if (error) {
+            setIsProcessing(false);
         }
     }, [response, isLoading, error]);
+    useEffect(function () {
+        if (currentMessageIndex < messageHistory.length) {
+            processMessages();
+        }
+    }, [currentMessageIndex, messageHistory]);
+    useEffect(function () {
+        if (messageHistoryRef.current) {
+            var _a = messageHistoryRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+            messageHistoryRef.current.scrollTop = scrollHeight - clientHeight;
+        }
+    }, [messageHistory, typingMessage, isTyping, isProcessing]);
+    useEffect(function () {
+        if (!isLoading && !error) {
+            setShouldStartTyping(true);
+        }
+    }, [isLoading, error]);
     var handleSendMessage = function () {
         if (userInput.trim()) {
-            setMessageHistory(function (prevMessages) { return __spreadArray(__spreadArray([], prevMessages, true), [
-                { role: 'user', content: userInput }
-            ], false); });
+            var newMessage_1 = { role: 'user', content: userInput };
+            setMessageHistory(function (prevMessages) { return __spreadArray(__spreadArray([], prevMessages, true), [newMessage_1], false); });
             setUserInput('');
+            setQueryEnabled(true);
+            setIsProcessing(true);
+            incrementalResponseRef.current = '';
             refetch();
         }
     };
+    var handleStopStream = function () {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            stopTyping();
+            setIsProcessing(false);
+            setQueryEnabled(false);
+            incrementalResponseRef.current = '';
+        }
+    };
+    var handleKeyPress = function (e) {
+        if (e.key === 'Enter') {
+            handleSendMessage();
+        }
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container, null,
-            React.createElement(Header, null,
-                React.createElement(Title, null, "Assistente artificial de an\u00E1lise de cr\u00E9dito")),
-            error && (React.createElement("div", null,
-                React.createElement(StatusMessage, { type: "error" },
-                    "Erro ao realizar a an\u00E1lise: ",
-                    error.message))),
-            React.createElement(InitialMessageBox, null,
-                React.createElement(InitialMessageContent, null, initialMessage || 'Pensando...')),
-            React.createElement(MessageHistory, null, messageHistory.map(function (msg, index) { return (React.createElement(Message, { key: index, role: msg.role }, msg.content)); }))),
-        React.createElement(ContainerInput, null,
-            React.createElement(ChatInputContainer, null,
-                React.createElement(ChatInput, { type: "text", placeholder: "Digite o que deseja saber sobre esse dossi\u00EA", value: userInput, onChange: function (e) { return setUserInput(e.target.value); } }),
-                React.createElement(SendButton, { onClick: handleSendMessage })))));
+        React.createElement(Header, null,
+            React.createElement(HeaderContent, null,
+                React.createElement("div", { className: "title-container" },
+                    React.createElement(Title, null, "Assistente artificial de an\u00E1lise de cr\u00E9dito")),
+                React.createElement(BtnWrapper, { onClick: toggleOpen }, isOpen ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)))),
+        isOpen && (React.createElement(React.Fragment, null,
+            React.createElement(Container, null,
+                error && (React.createElement("div", null,
+                    React.createElement(StatusMessage, { type: "error" },
+                        "Erro ao realizar a an\u00E1lise: ",
+                        error.message))),
+                React.createElement(InitialMessageBox, null,
+                    React.createElement(InitialMessageContent, null,
+                        React.createElement("div", { className: "icon-and-text" },
+                            React.createElement(Credithub, { size: 18, className: "initial-icon" }),
+                            React.createElement("span", null, isLoading &&
+                                currentMessageIndex === 0 &&
+                                !((_b = messageHistory[0]) === null || _b === void 0 ? void 0 : _b.content) ? (React.createElement(LoadingDots, null)) : shouldStartTyping &&
+                                isTyping &&
+                                currentMessageIndex === 0 ? (typingMessage) : ((_c = messageHistory[0]) === null || _c === void 0 ? void 0 : _c.content))),
+                        React.createElement("div", { className: "additional-message" },
+                            React.createElement("p", null, "Voc\u00EA pode fazer perguntas como:"),
+                            React.createElement("p", { className: "blue-text" }, "\u00C9 seguro oferecer um cr\u00E9dito de R$ 15.000,00 a uma taxa de juros de 3% em 12x?")),
+                        React.createElement("div", { className: "final-message" },
+                            React.createElement(Person, { size: 18 }),
+                            React.createElement("p", null, "Digite no campo abaixo o que deseja saber sobre esse dossi\u00EA?")))),
+                React.createElement(MessageHistory, { ref: messageHistoryRef },
+                    messageHistory
+                        .slice(1, currentMessageIndex)
+                        .map(function (msg, index) { return (React.createElement(Message, { key: index + 1, role: msg.role },
+                        React.createElement("div", { className: "icon-and-message" },
+                            msg.role === 'user' ? (React.createElement(Person, { size: 18 })) : (React.createElement(Credithub, { size: 18, className: "initial-icon" })),
+                            React.createElement("span", null, msg.content)))); }),
+                    isLoading && ((_d = messageHistory[0]) === null || _d === void 0 ? void 0 : _d.content) !== undefined ? (React.createElement(Message, { role: "assistant" },
+                        React.createElement("div", { className: "icon-and-message" },
+                            React.createElement(Credithub, { size: 18, className: "initial-icon" }),
+                            React.createElement("span", null,
+                                React.createElement(LoadingDots, null))))) : shouldStartTyping && isTyping && currentMessageIndex > 0 ? (React.createElement(Message, { role: "assistant" },
+                        React.createElement("div", { className: "icon-and-message" },
+                            React.createElement(Credithub, { size: 18, className: "initial-icon" }),
+                            React.createElement("span", null, typingMessage)))) : null)),
+            React.createElement(ContainerInput, null,
+                React.createElement(ChatInputContainer, null,
+                    React.createElement(ChatInput, { type: "text", placeholder: "Digite o que deseja saber sobre esse dossi\u00EA", value: userInput, onChange: function (e) { return setUserInput(e.target.value); }, onKeyPress: handleKeyPress, disabled: isProcessing || isTyping }),
+                    isProcessing || isTyping ? (React.createElement(SendButton, { onClick: handleStopStream },
+                        React.createElement(StopButton, null))) : (React.createElement(SendButton, { onClick: handleSendMessage },
+                        React.createElement(BtnSend, null)))))))));
 };
 export default Llama;

package/dist/components/dossie/llama/queryUtils.d.ts

@@ -0,0 +1,4 @@
+export declare const createQueryAndMessages: (relevantData: string, messageHistory: any[], extraMessage?: string) => {
+    model: string;
+    messages: string;
+};

package/dist/components/dossie/llama/queryUtils.js

@@ -0,0 +1,26 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export var createQueryAndMessages = function (relevantData, messageHistory, extraMessage) {
+    var baseMessages = __spreadArray([
+        {
+            role: 'system',
+            content: "\n        Voc\u00EA \u00E9 NostraCredit, um analista de cr\u00E9dito de intelig\u00EAncia artificial do CreditHub, o bureau de cr\u00E9dito especializado em an\u00E1lise de cr\u00E9dito no Brasil. Sua miss\u00E3o \u00E9 ajudar os analistas de ind\u00FAstrias e financeiras a tomarem decis\u00F5es mais informadas e seguras, analisando dossi\u00EAs e destacando informa\u00E7\u00F5es relevantes que afetariam o recebimento de vendas futuras. Ao receber as condi\u00E7\u00F5es de venda e os dados de um dossi\u00EA, voc\u00EA deve:\n        Identificar informa\u00E7\u00F5es chave que possam influenciar negativamente a decis\u00E3o de cr\u00E9dito (por exemplo, hist\u00F3rico financeiro, renda, d\u00EDvidas p\u00FAblicas, score de cr\u00E9dito, protestos, a exist\u00EAncia de liminar, cadastro de cheques sem fundos, processos judiciais etc.) e calcular o poder de compra de acordo ao risco que elas apresentam:\n        Protestos representam atrasos em pagamento na data especificada.\n        Cheques sem fundo (CCF) representam falta de saldo em conta na data especificada.\n        D\u00EDvidas Publicas representam impostos que n\u00E3o foram pagos na data especificada.\n        Liminar representa oculta\u00E7\u00E3o de negativa\u00E7\u00F5es e um risco elevado por limitar os dados recebidos.\n        Processos judiciais representam conflitos n\u00E3o resolvidos que dever\u00E3o ser representados obrigatoriamente.\n        Sugerir insights sobre taxas de juros, condi\u00E7\u00F5es de pagamento e poss\u00EDveis riscos associados ao cliente, com base nas informa\u00E7\u00F5es fornecidas.\n        Fazer perguntas complementares se notar que informa\u00E7\u00F5es cruciais est\u00E3o faltando, para garantir uma an\u00E1lise mais assertiva e completa.\n        Oferecer recomenda\u00E7\u00F5es e insights sempre deixando claro que essa \u00E9 a sua opini\u00E3o como assistente do CreditHub, n\u00E3o uma decis\u00E3o final. Seu foco \u00E9 auxiliar o agente de cr\u00E9dito a tomar decis\u00F5es mais embasadas, fornecendo informa\u00E7\u00F5es \u00FAteis e estimulando o questionamento cr\u00EDtico, assegurando que todas as vari\u00E1veis relevantes sejam consideradas antes da decis\u00E3o final.\n        Resumir, em uma curta senten\u00E7a, a recomenda\u00E7\u00E3o final citando a taxa de juros calculada de acordo aos riscos apresentados, levando em conta o valor total da venda/antecipa\u00E7\u00E3o e a quantidade de parcelas que ser\u00E3o pagas futuramente.\n      "
+        },
+        {
+            role: 'user',
+            content: "\n        Esse dossi\u00EA inclui informa\u00E7\u00F5es financeiras e jur\u00EDdicas importantes. Sua tarefa \u00E9:\n        1. Informar se h\u00E1 protestos, processos judiciais ou outros problemas financeiros.\n        2. Priorizar informa\u00E7\u00F5es sobre processos judiciais, caso existam, e em seguida mencionar protestos.\n        3. N\u00E3o repetir informa\u00E7\u00F5es irrelevantes como valores ou detalhes n\u00E3o essenciais.\n        4. Manter o resumo curto, focando apenas em pontos cr\u00EDticos para a an\u00E1lise de cr\u00E9dito, com no m\u00E1ximo 150 caracteres.\n\n        Aqui est\u00E3o os dados da empresa: ".concat(relevantData, ".\n\n        Responda em portugu\u00EAs de forma objetiva, com foco em informa\u00E7\u00F5es cr\u00EDticas e evitando linguagem t\u00E9cnica.\n        Construa a resposta com a seguinte estrutura: \"Esse dossi\u00EA tem alguns problemas com processos judiciais relacionados a cr\u00E9dito e trabalhistas,\n        bem como protestos. Tenha cuidado.\"\n        Seja bem sucinto e objetivo, a ideia \u00E9 apenas destacar qualitativamente o dossi\u00EA apresentado.\n        ").concat(extraMessage || '', "\n      ")
+        }
+    ], messageHistory, true);
+    return {
+        model: 'llama3',
+        messages: JSON.stringify(baseMessages)
+    };
+};