@ibti-tech/chatbot 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1101 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/contexts/Chatbot/useChatbot.ts
+import { useContext } from "react";
+
+// src/contexts/Chatbot/context.ts
+import * as React from "react";
+var ChatbotContext = React.createContext({});
+
+// src/contexts/Chatbot/useChatbot.ts
+var useChatbot = /* @__PURE__ */ __name(() => {
+  const context = useContext(ChatbotContext);
+  if (!context) throw new Error("ChatbotContext was not found to be consumed.");
+  return context;
+}, "useChatbot");
+var useChatbot_default = useChatbot;
+
+// src/contexts/Chatbot/provider.tsx
+import React3, { useMemo, useRef, useState as useState3 } from "react";
+
+// src/contexts/Chatbot/useChatbotMessages.ts
+import { useEffect, useState as useState2 } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+// src/contexts/Chatbot/useChatbotSuggestedQuestions.ts
+import { useState } from "react";
+
+// src/services/chatbot-api.ts
+var sendChatContext = /* @__PURE__ */ __name(async ({
+  chatContext,
+  locale = "en",
+  onReceiving,
+  onDone,
+  apiURL,
+  onError
+}) => fetch(`${apiURL}/chat/completion?locale=${locale}`, {
+  method: "POST",
+  headers: {
+    "Content-type": "application/json"
+  },
+  body: JSON.stringify({
+    context: chatContext
+  })
+}).then((response) => {
+  if (!response.body) return;
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let message = "";
+  function read() {
+    reader.read().then(({ done, value }) => {
+      if (done) {
+        onDone && onDone();
+        return;
+      }
+      const decodifiedChunk = decoder.decode(value, { stream: true });
+      message += decodifiedChunk;
+      onReceiving(message, decodifiedChunk);
+      read();
+    });
+  }
+  __name(read, "read");
+  read();
+}).catch((err) => {
+  onError(err);
+}), "sendChatContext");
+var getSuggestedQuestions = /* @__PURE__ */ __name(async ({
+  chatContext,
+  apiURL,
+  locale = "en"
+}) => {
+  const res = await fetch(
+    `${apiURL}/chat/suggested_questions?locale=${locale}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json"
+      },
+      body: JSON.stringify({
+        context: chatContext
+      })
+    }
+  );
+  const data = await res.json();
+  return data.suggestedQuestions;
+}, "getSuggestedQuestions");
+var sendUserChatFeedback = /* @__PURE__ */ __name(async ({
+  apiURL,
+  chatContext,
+  locale = "en",
+  ratingScore,
+  description
+}) => fetch(`${apiURL}/chat/feedback`, {
+  method: "POST",
+  headers: {
+    "Content-type": "application/json"
+  },
+  body: JSON.stringify({
+    locale,
+    rating_score: ratingScore,
+    chat_context: chatContext,
+    message: description
+  })
+}), "sendUserChatFeedback");
+
+// src/contexts/Chatbot/useChatbotSuggestedQuestions.ts
+var useChatbotSuggestedQuestions = /* @__PURE__ */ __name(({
+  chatContext,
+  locale = "en",
+  apiURL
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const fetchData = /* @__PURE__ */ __name(async () => {
+    if (chatContext.length === 0) return;
+    setLoading(true);
+    const suggestedData = await getSuggestedQuestions({
+      chatContext,
+      locale,
+      apiURL
+    });
+    setData(suggestedData);
+    setLoading(false);
+  }, "fetchData");
+  const resetData = /* @__PURE__ */ __name(() => {
+    setData([]);
+  }, "resetData");
+  return {
+    loading,
+    data,
+    fetchData,
+    resetData
+  };
+}, "useChatbotSuggestedQuestions");
+
+// src/events/eventNames.ts
+var CUSTOM_EVENT_NAMES = {
+  ASSISTANT_ANSWER_FINISHED: "ASSISTANT_ANSWER_FINISHED"
+};
+
+// src/events/assistant-answer.ts
+var dispatchAssitantAnswer = /* @__PURE__ */ __name(() => {
+  const evt = new CustomEvent(CUSTOM_EVENT_NAMES.ASSISTANT_ANSWER_FINISHED);
+  document.dispatchEvent(evt);
+}, "dispatchAssitantAnswer");
+
+// src/contexts/Chatbot/useChatbotMessages.ts
+var useChatbotMessages = /* @__PURE__ */ __name(({
+  apiURL,
+  locale
+}) => {
+  const [chatMessages, setChatMessages] = useState2(
+    []
+  );
+  const [assistantIntroduced, setAssistantIntroduced] = useState2(false);
+  const [loading, setLoading] = useState2(false);
+  const [writing, setWriting] = useState2(false);
+  const [error, setError] = useState2();
+  const suggestedQuestions = useChatbotSuggestedQuestions({
+    chatContext: chatMessages.map((item) => ({
+      role: item.role,
+      content: item.content
+    })),
+    apiURL,
+    locale
+  });
+  const createQuestionMessageIntoHistory = /* @__PURE__ */ __name((question, id) => {
+    const timestamp = (/* @__PURE__ */ new Date()).toUTCString();
+    const messageData = {
+      id,
+      timestamp,
+      role: "user",
+      content: question
+    };
+    const newHistory = [
+      ...chatMessages,
+      messageData
+    ];
+    setChatMessages(newHistory);
+    return messageData;
+  }, "createQuestionMessageIntoHistory");
+  const createOrUpdateAnswerMessageIntoHistory = /* @__PURE__ */ __name((answer, id) => {
+    const timestamp = (/* @__PURE__ */ new Date()).toUTCString();
+    const messageData = {
+      id,
+      timestamp,
+      role: "assistant",
+      content: answer
+    };
+    setChatMessages((prev) => {
+      const itemAlreadyExists = prev.some((item) => item.id == id);
+      if (itemAlreadyExists) {
+        return prev.map((item) => {
+          if (item.id == id)
+            return {
+              ...item,
+              content: messageData.content
+            };
+          return item;
+        });
+      }
+      return [...prev, messageData];
+    });
+    return messageData;
+  }, "createOrUpdateAnswerMessageIntoHistory");
+  const makeQuestion = /* @__PURE__ */ __name(async (userQuestion) => {
+    setLoading(true);
+    suggestedQuestions.resetData();
+    const answerId = uuidv4();
+    const questionId = uuidv4();
+    const chatContext = createQuestionMessageIntoHistory(
+      userQuestion,
+      questionId
+    );
+    await sendChatContext({
+      apiURL,
+      locale,
+      chatContext: [
+        ...chatMessages.map((item) => ({
+          role: item.role,
+          content: item.content
+        })),
+        { role: chatContext.role, content: chatContext.content }
+      ],
+      onReceiving(receivedMessage) {
+        setLoading(false);
+        setWriting(true);
+        createOrUpdateAnswerMessageIntoHistory(receivedMessage, answerId);
+      },
+      onDone: /* @__PURE__ */ __name(() => {
+        setWriting(false);
+        suggestedQuestions.fetchData();
+      }, "onDone"),
+      onError: setError
+    });
+    dispatchAssitantAnswer();
+  }, "makeQuestion");
+  const introduceAssistant = /* @__PURE__ */ __name(() => {
+    const firstMessage = {
+      "pt-BR": "Ol\xE1!",
+      en: "Hello!"
+    }[locale];
+    makeQuestion(firstMessage);
+    setAssistantIntroduced(true);
+    setChatMessages((prev) => prev.slice(1));
+  }, "introduceAssistant");
+  useEffect(() => {
+    if (assistantIntroduced) return;
+    introduceAssistant();
+  }, [assistantIntroduced]);
+  return {
+    chatMessages,
+    makeQuestion,
+    loading,
+    writing,
+    error,
+    suggestedQuestions
+  };
+}, "useChatbotMessages");
+var useChatbotMessages_default = useChatbotMessages;
+
+// src/themes/index.ts
+import { defaultDarkTheme, defaultLightTheme } from "@ibti-tech/ui";
+var themes = {
+  light: defaultLightTheme,
+  dark: defaultDarkTheme
+};
+
+// src/contexts/Chatbot/provider.tsx
+import { ThemeProvider } from "styled-components";
+var ChatbotProvider = /* @__PURE__ */ __name(({
+  locale,
+  children,
+  apiURL,
+  theme
+}) => {
+  const {
+    makeQuestion,
+    chatMessages,
+    loading,
+    writing,
+    error,
+    suggestedQuestions
+  } = useChatbotMessages_default({
+    apiURL,
+    locale
+  });
+  const [opened, setOpened] = useState3(false);
+  const scrollRef = useRef(null);
+  const openedToggle = /* @__PURE__ */ __name(() => {
+    setOpened((state) => !state);
+  }, "openedToggle");
+  const status = useMemo(() => {
+    if (writing) return "writing";
+    if (error) return "unavailable";
+    if (loading) return "loading";
+    return "online";
+  }, [writing, loading, error]);
+  return /* @__PURE__ */ React3.createElement(
+    ChatbotContext.Provider,
+    {
+      value: {
+        chatMessages,
+        makeQuestion,
+        loading,
+        writing,
+        locale,
+        scrollRef,
+        opened,
+        openedToggle,
+        status,
+        suggestedQuestions,
+        apiURL
+      }
+    },
+    /* @__PURE__ */ React3.createElement(ThemeProvider, { theme: themes[theme] }, children)
+  );
+}, "ChatbotProvider");
+
+// src/components/ChatbotDevice/index.tsx
+import React13 from "react";
+
+// src/components/ChatbotDevice/styles.ts
+import { breakpoints, screens } from "@ibti-tech/ui";
+import { mix } from "polished";
+import { css, styled } from "styled-components";
+var Wrapper = styled.div`
+  width: 100%;
+  /* background-color: ${(props) => mix(
+  0.05,
+  props.theme.colors.palette.primary.normal,
+  props.theme.colors.layers[0].background
+)}; */
+  background-color: ${(props) => props.theme.colors.layers[1].background};
+  border: 1px solid ${(props) => props.theme.colors.layers[1].border};
+  display: flex;
+  flex-direction: column;
+  transition: ${(props) => props.theme.transitionDurations.fast};
+  border-end-end-radius: ${(props) => props.theme.borderRadius.medium};
+  border-end-start-radius: ${(props) => props.theme.borderRadius.medium};
+  overflow: hidden;
+  pointer-events: all;
+  height: 100vh;
+  position: relative;
+
+  ${screens.tablet} {
+    height: 500px;
+    max-width: ${breakpoints.mobileL}px;
+  }
+
+  ${(props) => !props.$opened && css`
+      transform: translateY(calc(-100% + 32px));
+    `}
+`;
+
+// src/components/ChatbotHeader/index.tsx
+import React6 from "react";
+
+// src/components/ChatbotHeader/styles.ts
+import { styled as styled2 } from "styled-components";
+var Name = styled2.span`
+  color: ${(props) => props.theme.colors.content.title};
+  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+`;
+var ProfileInfo = styled2.div`
+  display: flex;
+  flex-direction: column;
+`;
+var ProfileImage = styled2.span`
+  height: 2.5rem;
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props) => props.theme.colors.palette.primary.normal};
+  font-size: 1.5rem;
+  border-radius: ${(props) => props.theme.borderRadius.circle};
+
+  svg {
+    color: white;
+  }
+`;
+var Wrapper2 = styled2.div`
+  background: ${(props) => props.theme.colors.layers[2].background};
+  border: 1px solid ${(props) => props.theme.colors.layers[2].border};
+  display: flex;
+  padding: ${(props) => props.theme.spacing.components.small};
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+
+// src/components/BotIcon/index.tsx
+import React4 from "react";
+var BotIcon = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ React4.createElement("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em" }, /* @__PURE__ */ React4.createElement(
+    "path",
+    {
+      d: "M17.7530511,13.999921 C18.9956918,13.999921 20.0030511,15.0072804 20.0030511,16.249921 L20.0030511,17.1550008 C20.0030511,18.2486786 19.5255957,19.2878579 18.6957793,20.0002733 C17.1303315,21.344244 14.8899962,22.0010712 12,22.0010712 C9.11050247,22.0010712 6.87168436,21.3444691 5.30881727,20.0007885 C4.48019625,19.2883988 4.00354153,18.2500002 4.00354153,17.1572408 L4.00354153,16.249921 C4.00354153,15.0072804 5.01090084,13.999921 6.25354153,13.999921 L17.7530511,13.999921 Z M11.8985607,2.00734093 L12.0003312,2.00049432 C12.380027,2.00049432 12.6938222,2.2826482 12.7434846,2.64872376 L12.7503312,2.75049432 L12.7495415,3.49949432 L16.25,3.5 C17.4926407,3.5 18.5,4.50735931 18.5,5.75 L18.5,10.254591 C18.5,11.4972317 17.4926407,12.504591 16.25,12.504591 L7.75,12.504591 C6.50735931,12.504591 5.5,11.4972317 5.5,10.254591 L5.5,5.75 C5.5,4.50735931 6.50735931,3.5 7.75,3.5 L11.2495415,3.49949432 L11.2503312,2.75049432 C11.2503312,2.37079855 11.5324851,2.05700336 11.8985607,2.00734093 L12.0003312,2.00049432 L11.8985607,2.00734093 Z M9.74928905,6.5 C9.05932576,6.5 8.5,7.05932576 8.5,7.74928905 C8.5,8.43925235 9.05932576,8.99857811 9.74928905,8.99857811 C10.4392523,8.99857811 10.9985781,8.43925235 10.9985781,7.74928905 C10.9985781,7.05932576 10.4392523,6.5 9.74928905,6.5 Z M14.2420255,6.5 C13.5520622,6.5 12.9927364,7.05932576 12.9927364,7.74928905 C12.9927364,8.43925235 13.5520622,8.99857811 14.2420255,8.99857811 C14.9319888,8.99857811 15.4913145,8.43925235 15.4913145,7.74928905 C15.4913145,7.05932576 14.9319888,6.5 14.2420255,6.5 Z",
+      fill: "currentColor"
+    }
+  ));
+}, "BotIcon");
+
+// src/i18n/en.json
+var en_default = {
+  CHATBOT_NAME: "IBTI Chatbot (Beta)",
+  ORGANIZATION_NAME: "IBTI IT Solutions",
+  STATUS: {
+    ONLINE: "Now online",
+    LOADING: "Loading...",
+    WRITING: "Writing answer...",
+    UNAVAILABLE: "Unavailable"
+  },
+  ERRORS: {
+    UNKNOWN: "Sorry. We couldn't provide a response."
+  },
+  INPUT_PLACEHOLDER: "Ask something",
+  CHATBOT_BAR: {
+    OPEN: "Open {{CHATBOT_NAME}}",
+    CLOSE: "Close {{CHATBOT_NAME}}"
+  },
+  SUGGESTED_QUESTIONS: {
+    TITLE: "You may like to ask:",
+    LOADING: "Loading suggested questions..."
+  },
+  CHAT_FEEDBACK: {
+    TITLE: "Rate the Chatbot",
+    DESCRIPTION: "Give us a feedback about our bot assistant.",
+    MESSAGE_FIELD: "Description",
+    SUBMIT_BUTTON: "Send",
+    CLOSE_BUTTON: "Close"
+  }
+};
+
+// src/i18n/pt_BR.json
+var pt_BR_default = {
+  CHATBOT_NAME: "Assistente do IBTI (Beta)",
+  ORGANIZATION_NAME: "IBTI Solu\xE7\xF5es em TI",
+  STATUS: {
+    ONLINE: "Ativo agora",
+    LOADING: "Carregando...",
+    WRITING: "Escrevendo resposta...",
+    UNAVAILABLE: "Indispon\xEDvel"
+  },
+  ERRORS: {
+    UNKNOWN: "Desculpe. N\xE3o conseguimos fornecer uma resposta."
+  },
+  INPUT_PLACEHOLDER: "Pergunte alguma coisa",
+  CHATBOT_BAR: {
+    OPEN: "Abrir IBTI ChatBot",
+    CLOSE: "Fechar IBTI ChatBot"
+  },
+  SUGGESTED_QUESTIONS: {
+    TITLE: "Voc\xEA pode querer perguntar:",
+    LOADING: "Carregando perguntas sugeridas..."
+  },
+  CHAT_FEEDBACK: {
+    TITLE: "Avalie o Chatbot",
+    DESCRIPTION: "D\xEA-nos um feedback sobre o nosso assistente virtual.",
+    MESSAGE_FIELD: "Descri\xE7\xE3o",
+    SUBMIT_BUTTON: "Enviar",
+    CLOSE_BUTTON: "Fechar"
+  }
+};
+
+// src/i18n/index.ts
+var i18n = {
+  en: en_default,
+  "pt-BR": pt_BR_default
+};
+
+// src/hooks/useI18n.ts
+var useI18n = /* @__PURE__ */ __name(() => {
+  const { locale } = useChatbot();
+  return i18n[locale];
+}, "useI18n");
+
+// src/components/ChatbotStatusLabel/index.tsx
+import React5 from "react";
+
+// src/components/ChatbotStatusLabel/styles.ts
+import { styled as styled3 } from "styled-components";
+var Wrapper3 = styled3.span`
+  color: ${(props) => props.theme.colors.content.detail};
+  font-size: ${(props) => props.theme.fontSizes.small};
+
+  &::before {
+    content: '';
+    display: inline-block;
+    height: 8px;
+    width: 8px;
+    border-radius: 4px;
+    background: ${(props) => props.$signalColor};
+    margin-right: 4px;
+  }
+`;
+
+// src/components/ChatbotStatusLabel/index.tsx
+import { useTheme } from "styled-components";
+var ChatbotStatusLabel = /* @__PURE__ */ __name(({}) => {
+  const { status } = useChatbot_default();
+  const i18nTerms = useI18n();
+  const theme = useTheme();
+  const statusLabel = {
+    online: i18nTerms.STATUS.ONLINE,
+    loading: i18nTerms.STATUS.LOADING,
+    writing: i18nTerms.STATUS.WRITING,
+    unavailable: i18nTerms.STATUS.UNAVAILABLE
+  };
+  const statusColor = {
+    online: theme.colors.palette.success.normal,
+    loading: theme.colors.palette.warning.normal,
+    writing: theme.colors.palette.warning.normal,
+    unavailable: theme.colors.palette.error.normal
+  };
+  return /* @__PURE__ */ React5.createElement(Wrapper3, { $signalColor: statusColor[status] }, statusLabel[status]);
+}, "ChatbotStatusLabel");
+var ChatbotStatusLabel_default = ChatbotStatusLabel;
+
+// src/components/ChatbotHeader/index.tsx
+var ChatbotHeader = /* @__PURE__ */ __name(({}) => {
+  const i18n2 = useI18n();
+  return /* @__PURE__ */ React6.createElement(Wrapper2, null, /* @__PURE__ */ React6.createElement(ProfileImage, null, /* @__PURE__ */ React6.createElement(BotIcon, null)), /* @__PURE__ */ React6.createElement(ProfileInfo, null, /* @__PURE__ */ React6.createElement(Name, null, i18n2.ORGANIZATION_NAME), /* @__PURE__ */ React6.createElement(ChatbotStatusLabel_default, null)));
+}, "ChatbotHeader");
+var ChatbotHeader_default = ChatbotHeader;
+
+// src/components/ChatbotBody/index.tsx
+import React9, { useEffect as useEffect5, useRef as useRef3 } from "react";
+
+// src/components/ChatbotBody/styles.ts
+import { styled as styled4 } from "styled-components";
+var ChatbotInput = styled4.div``;
+var MessagesList = styled4.ul`
+  padding: ${(props) => props.theme.spacing.components.medium};
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+var Wrapper4 = styled4.div`
+  overflow: hidden;
+  overflow-y: auto;
+  flex: 1;
+  height: 100%;
+`;
+
+// src/components/MessageBalloon/index.tsx
+import React7 from "react";
+
+// src/components/MessageBalloon/styles.ts
+import { css as css2, styled as styled5 } from "styled-components";
+var Time = styled5.span`
+  font-size: ${(props) => props.theme.fontSizes.small};
+`;
+var Balloon = styled5.div`
+  padding: ${(props) => props.theme.spacing.components.small};
+  width: max-content;
+  max-width: 100%;
+  border-radius: ${(props) => props.theme.borderRadius.medium};
+  position: relative;
+  line-height: 1.5em;
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  ${({ $type }) => {
+  switch ($type) {
+    case "received":
+      return css2`
+          background: ${(props) => props.theme.colors.layers[2].background};
+          border-top-left-radius: 0;
+
+          &::after {
+            border-width: 0px 10px 10px 0;
+            border-color: transparent
+              ${(props) => props.theme.colors.layers[2].background} transparent
+              transparent;
+            top: 0;
+            left: -10px;
+          }
+        `;
+    case "sent":
+      return css2`
+          background: ${(props) => props.theme.colors.palette.primary.normal};
+          border-top-right-radius: 0;
+          margin-left: auto;
+
+          &::after {
+            border-width: 0px 0px 10px 10px;
+            border-color: transparent transparent transparent
+              ${(props) => props.theme.colors.palette.primary.normal};
+            top: 0;
+            right: -10px;
+          }
+        `;
+  }
+}}
+
+  // Markdown styles
+  
+  display: flex;
+  flex-direction: column;
+  gap: 1.3em;
+
+  a {
+    color: ${(props) => props.theme.colors.palette.primary.normal};
+    font-weight: semibold;
+  }
+
+  ol,
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 1.3em;
+  }
+`;
+var Label = styled5.span`
+  font-size: ${(props) => props.theme.fontSizes.small};
+`;
+var Wrapper5 = styled5.div`
+  font-size: ${(props) => props.theme.fontSizes.small};
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.components.xsmall};
+
+  ${(props) => {
+  switch (props.$type) {
+    case "received":
+      return css2``;
+    default:
+    case "sent":
+      return css2`
+          text-align: right;
+        `;
+  }
+}};
+`;
+
+// src/utils/formatMessageTime.ts
+import { intlFormatDistance } from "date-fns";
+var formatMessageTime = /* @__PURE__ */ __name((dateUTC, currentDateUTC, locale) => {
+  return intlFormatDistance(dateUTC, currentDateUTC, { locale });
+}, "formatMessageTime");
+
+// src/components/MessageBalloon/index.tsx
+import Markdown from "react-markdown";
+var messageTypes = {
+  assistant: "received",
+  user: "sent"
+};
+var MessageBalloon = /* @__PURE__ */ __name(({
+  data,
+  currentDateUTC
+}) => {
+  const messageType = messageTypes[data.role];
+  const i18n2 = useI18n();
+  const { locale } = useChatbot_default();
+  return /* @__PURE__ */ React7.createElement(Wrapper5, { $type: messageType }, data.role == "assistant" && /* @__PURE__ */ React7.createElement(Label, null, i18n2.CHATBOT_NAME), /* @__PURE__ */ React7.createElement(Balloon, { $type: messageType }, /* @__PURE__ */ React7.createElement(Markdown, null, data.content)), /* @__PURE__ */ React7.createElement(Time, null, formatMessageTime(data.timestamp, currentDateUTC, locale)));
+}, "MessageBalloon");
+var MessageBalloon_default = MessageBalloon;
+
+// src/hooks/useElementScroll.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+var useElementScroll = /* @__PURE__ */ __name((elementRef) => {
+  const [scrollProgress, setScrollProgress] = useState4(0);
+  const calculateScrollPercentage = /* @__PURE__ */ __name(() => {
+    if (!elementRef.current) return;
+    const element = elementRef.current;
+    const elementHeight = element.clientHeight;
+    const elementScrollHeight = element.scrollHeight;
+    const scrollTop = element.scrollTop;
+    const scrollableHeight = elementScrollHeight - elementHeight;
+    const scrolled = scrollTop / scrollableHeight * 100;
+    const progressValue = Math.min(100, Math.max(0, scrolled));
+    setScrollProgress(isNaN(progressValue) ? 100 : progressValue);
+  }, "calculateScrollPercentage");
+  useEffect3(() => {
+    if (!elementRef.current) return;
+    const handleIntersection = /* @__PURE__ */ __name(() => {
+      calculateScrollPercentage();
+    }, "handleIntersection");
+    const handleScroll = /* @__PURE__ */ __name(() => {
+      calculateScrollPercentage();
+    }, "handleScroll");
+    const element = elementRef.current;
+    element.addEventListener("scroll", handleScroll);
+    const intersectionObserver = new IntersectionObserver(() => {
+      handleIntersection();
+    });
+    intersectionObserver.observe(element);
+    calculateScrollPercentage();
+    return () => {
+      if (!elementRef.current) return;
+      elementRef.current.removeEventListener("scroll", handleScroll);
+      intersectionObserver.disconnect();
+    };
+  }, [elementRef]);
+  const scrollToTop = /* @__PURE__ */ __name(() => {
+    elementRef.current?.scrollTo({ top: elementRef.current.scrollHeight });
+  }, "scrollToTop");
+  const scrollToEnd = /* @__PURE__ */ __name(() => {
+    elementRef.current?.scrollTo(0, elementRef.current.scrollHeight);
+  }, "scrollToEnd");
+  return {
+    scrollProgress,
+    scrollToTop,
+    scrollToEnd
+  };
+}, "useElementScroll");
+
+// src/hooks/useUpdatedTime.ts
+import { useEffect as useEffect4, useState as useState5 } from "react";
+var useUpdatedTime = /* @__PURE__ */ __name(({
+  intervalInSeconds
+}) => {
+  const [date, setDate] = useState5(/* @__PURE__ */ new Date());
+  useEffect4(() => {
+    const time = 1e3 * intervalInSeconds;
+    const interval = setInterval(() => {
+      const now = /* @__PURE__ */ new Date();
+      setDate(now);
+    }, time);
+    return () => clearInterval(interval);
+  }, []);
+  return {
+    dateUTC: date.toUTCString()
+  };
+}, "useUpdatedTime");
+
+// src/components/SuggestedQuestions/index.tsx
+import React8 from "react";
+
+// src/components/SuggestedQuestions/styles.ts
+import { Button } from "@ibti-tech/ui";
+import { styled as styled6 } from "styled-components";
+var QuestionButton = styled6(Button)`
+  text-align: left;
+  justify-content: flex-start;
+  height: auto;
+  padding: ${(props) => props.theme.spacing.components.small};
+`;
+var QuestionListItem = styled6.li``;
+var QuestionList = styled6.ul`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+var Title = styled6.span`
+  display: block;
+  font-size: ${(props) => props.theme.fontSizes.small};
+  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+  margin-bottom: ${(props) => props.theme.spacing.components.medium};
+  /* text-align: center; */
+`;
+var Wrapper6 = styled6.div`
+  padding: ${(props) => props.theme.spacing.components.medium};
+`;
+
+// src/components/SuggestedQuestions/index.tsx
+var SuggestedQuestions = /* @__PURE__ */ __name(({}) => {
+  const i18n2 = useI18n();
+  const { suggestedQuestions, makeQuestion } = useChatbot_default();
+  if (suggestedQuestions.data.length === 0) return;
+  return /* @__PURE__ */ React8.createElement(Wrapper6, null, /* @__PURE__ */ React8.createElement(Title, null, i18n2.SUGGESTED_QUESTIONS.TITLE), /* @__PURE__ */ React8.createElement(QuestionList, null, suggestedQuestions.data.map((question) => /* @__PURE__ */ React8.createElement(QuestionListItem, { key: question }, /* @__PURE__ */ React8.createElement(
+    QuestionButton,
+    {
+      label: question,
+      size: "small",
+      variant: "layerBased",
+      layer: 2,
+      onClick: () => {
+        makeQuestion(question);
+      },
+      fillWidth: true,
+      shape: "rounded"
+    }
+  )))));
+}, "SuggestedQuestions");
+var SuggestedQuestions_default = SuggestedQuestions;
+
+// src/components/ChatbotBody/index.tsx
+var ChatbotBody = /* @__PURE__ */ __name(({}) => {
+  const { chatMessages, suggestedQuestions } = useChatbot();
+  const scrollableElementRef = useRef3(null);
+  const { scrollProgress, scrollToEnd } = useElementScroll(scrollableElementRef);
+  const { dateUTC } = useUpdatedTime({ intervalInSeconds: 15 });
+  useEffect5(() => {
+    if (scrollProgress > 85) scrollToEnd();
+    document.addEventListener(
+      CUSTOM_EVENT_NAMES.ASSISTANT_ANSWER_FINISHED,
+      scrollToEnd
+    );
+    return () => {
+      document.removeEventListener(
+        CUSTOM_EVENT_NAMES.ASSISTANT_ANSWER_FINISHED,
+        scrollToEnd
+      );
+    };
+  }, [chatMessages, suggestedQuestions]);
+  return /* @__PURE__ */ React9.createElement(Wrapper4, { ref: scrollableElementRef }, /* @__PURE__ */ React9.createElement(MessagesList, null, chatMessages.map((msgData) => /* @__PURE__ */ React9.createElement(
+    MessageBalloon_default,
+    {
+      key: msgData.id,
+      data: msgData,
+      currentDateUTC: dateUTC
+    }
+  ))), /* @__PURE__ */ React9.createElement(SuggestedQuestions_default, null));
+}, "ChatbotBody");
+var ChatbotBody_default = ChatbotBody;
+
+// src/components/ChatbotFooter/index.tsx
+import React10, { useState as useState6 } from "react";
+
+// src/components/ChatbotFooter/styles.ts
+import { styled as styled7 } from "styled-components";
+var LoadingSuggestedQuestions = styled7.span`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.spacing.components.small};
+  font-size: ${(props) => props.theme.fontSizes.small};
+  padding: ${(props) => props.theme.spacing.components.small}
+    ${(props) => props.theme.spacing.components.medium};
+`;
+var Form = styled7.form`
+  display: flex;
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+var Wrapper7 = styled7.div`
+  padding: ${(props) => props.theme.spacing.components.small};
+`;
+
+// src/components/ChatbotFooter/index.tsx
+import { ArrowRightIcon, Spinner, TextInput } from "@ibti-tech/ui";
+var ChatbotFooter = /* @__PURE__ */ __name(({}) => {
+  const { makeQuestion, loading, writing, suggestedQuestions } = useChatbot_default();
+  const [questionInput, setQuestionInput] = useState6("");
+  const i18nTerms = useI18n();
+  const handleSubmit = /* @__PURE__ */ __name(async (e) => {
+    e.preventDefault();
+    setQuestionInput("");
+    await makeQuestion(questionInput);
+  }, "handleSubmit");
+  return /* @__PURE__ */ React10.createElement(Wrapper7, { "data-testid": "chatbot-footer" }, suggestedQuestions.loading && /* @__PURE__ */ React10.createElement(LoadingSuggestedQuestions, null, /* @__PURE__ */ React10.createElement(Spinner, { size: "extra-small" }), i18nTerms.SUGGESTED_QUESTIONS.LOADING), /* @__PURE__ */ React10.createElement(Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React10.createElement(
+    TextInput,
+    {
+      fillWidth: true,
+      shape: "pill",
+      disabled: loading || writing,
+      value: questionInput,
+      onChange: (e) => setQuestionInput(e.target.value),
+      placeholder: i18nTerms.INPUT_PLACEHOLDER,
+      button: {
+        icon: loading || writing ? void 0 : ArrowRightIcon,
+        loading,
+        disabled: loading || writing || !questionInput,
+        type: "submit"
+      }
+    }
+  )));
+}, "ChatbotFooter");
+var ChatbotFooter_default = ChatbotFooter;
+
+// src/components/ChatbotToggle/styles.ts
+import { screens as screens2 } from "@ibti-tech/ui";
+import { styled as styled8 } from "styled-components";
+var ButtonWrapper = styled8.button`
+  height: 32px;
+  width: 100%;
+  background: transparent;
+  /* background-color: ${(props) => props.theme.colors.layers[1].background};
+  border: 1px solid ${(props) => props.theme.colors.layers[1].border}; */
+  color: ${(props) => props.theme.colors.palette.primary.normal};
+  padding: ${(props) => props.theme.spacing.components.small};
+  font-size: ${(props) => props.theme.fontSizes.small};
+  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.semibold};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${(props) => props.theme.spacing.components.small};
+  border-radius: ${(props) => props.theme.borderRadius.medium};
+
+  ${screens2.tablet} {
+    transition: ${(props) => props.theme.transitionDurations.default};
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.layers[1].hoveredBackground};
+      cursor: pointer;
+    }
+  }
+`;
+
+// src/components/ChatbotToggle/index.tsx
+import React11 from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "@ibti-tech/ui/dist/icons";
+var ChatbotToggle = /* @__PURE__ */ __name(() => {
+  const { opened, openedToggle } = useChatbot_default();
+  const i18nTerms = useI18n();
+  const toggleText = (opened ? i18nTerms.CHATBOT_BAR.CLOSE : i18nTerms.CHATBOT_BAR.OPEN).replace("{{CHATBOT_NAME}}", i18nTerms.CHATBOT_NAME);
+  const Chevron = opened ? ChevronUpIcon : ChevronDownIcon;
+  return /* @__PURE__ */ React11.createElement(ButtonWrapper, { onClick: openedToggle }, /* @__PURE__ */ React11.createElement(BotIcon, null), /* @__PURE__ */ React11.createElement("span", null, toggleText), /* @__PURE__ */ React11.createElement(Chevron, null));
+}, "ChatbotToggle");
+var ChatbotToggle_default = ChatbotToggle;
+
+// src/components/ChatUserFeedbackRating/index.tsx
+import React12, { useState as useState8 } from "react";
+import { Button as Button2, RatingStars, TextArea } from "@ibti-tech/ui";
+
+// src/components/ChatUserFeedbackRating/styles.ts
+import { CardBase } from "@ibti-tech/ui";
+import { css as css3, styled as styled9 } from "styled-components";
+var ActionButtons = styled9.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+var Form2 = styled9.form`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.components.medium};
+`;
+var Description = styled9.div`
+  font-size: ${(props) => props.theme.fontSizes.small};
+  margin-bottom: ${(props) => props.theme.spacing.components.medium};
+`;
+var Title2 = styled9.span`
+  display: block;
+  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+  margin-bottom: ${(props) => props.theme.spacing.components.small};
+`;
+var Box = styled9(CardBase)`
+  width: 100%;
+  height: max-content;
+  padding: ${(props) => props.theme.spacing.components.medium};
+  transition: ${(props) => props.theme.transitionDurations.default};
+`;
+var Wrapper8 = styled9.div`
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${(props) => props.theme.spacing.components.medium};
+  transition: ${(props) => props.theme.transitionDurations.default};
+
+  ${(props) => props.$opened ? css3`
+          background-color: rgba(0, 0, 0, 0.15);
+          backdrop-filter: blur(3px);
+          opacity: 1;
+        ` : css3`
+          pointer-events: none;
+          opacity: 0;
+
+          ${Box} {
+            transform: scale(0.9);
+          }
+        `}
+`;
+
+// src/contexts/Chatbot/useChatFeedbackBox.ts
+import { useEffect as useEffect6, useState as useState7 } from "react";
+var useChatFeedbackBox = /* @__PURE__ */ __name(() => {
+  const { chatMessages, apiURL, locale } = useChatbot_default();
+  const [rated, setRated] = useState7(false);
+  const [opened, setOpened] = useState7(false);
+  const [loading, setLoading] = useState7(false);
+  useEffect6(() => {
+    if (chatMessages.length > 6 && !rated) setOpened(true);
+  }, [chatMessages]);
+  const close = /* @__PURE__ */ __name(() => {
+    setOpened(false);
+    setRated(true);
+  }, "close");
+  const sendUserRating = /* @__PURE__ */ __name(async ({
+    ratingScore,
+    description
+  }) => {
+    try {
+      setLoading(true);
+      await sendUserChatFeedback({
+        apiURL,
+        chatContext: chatMessages.map((item) => ({
+          role: item.role,
+          content: item.content
+        })),
+        locale,
+        ratingScore,
+        description
+      });
+    } finally {
+      setLoading(false);
+      setRated(true);
+      setOpened(false);
+    }
+  }, "sendUserRating");
+  return {
+    opened,
+    close,
+    sendUserRating,
+    loading
+  };
+}, "useChatFeedbackBox");
+
+// src/components/ChatUserFeedbackRating/index.tsx
+var ChatUserFeedbackRating = /* @__PURE__ */ __name(({}) => {
+  const chatFeedbackBox = useChatFeedbackBox();
+  const [ratingValue, setRatingValue] = useState8(5);
+  const [descriptionValue, setDescriptionValue] = useState8("");
+  const i18nTerms = useI18n();
+  const handleSubmit = /* @__PURE__ */ __name((e) => {
+    e.preventDefault();
+    chatFeedbackBox.sendUserRating({
+      description: descriptionValue,
+      ratingScore: ratingValue
+    });
+  }, "handleSubmit");
+  return /* @__PURE__ */ React12.createElement(Wrapper8, { $opened: chatFeedbackBox.opened }, /* @__PURE__ */ React12.createElement(Box, null, /* @__PURE__ */ React12.createElement(Title2, null, i18nTerms.CHAT_FEEDBACK.TITLE), /* @__PURE__ */ React12.createElement(Description, null, i18nTerms.CHAT_FEEDBACK.DESCRIPTION), /* @__PURE__ */ React12.createElement(Form2, { onSubmit: handleSubmit }, /* @__PURE__ */ React12.createElement(
+    RatingStars,
+    {
+      value: ratingValue,
+      setValue: setRatingValue,
+      layer: 2
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    TextArea,
+    {
+      layer: 2,
+      placeholder: i18nTerms.CHAT_FEEDBACK.MESSAGE_FIELD,
+      fillWidth: true,
+      value: descriptionValue,
+      onChange: (e) => setDescriptionValue(e.target.value)
+    }
+  ), /* @__PURE__ */ React12.createElement(ActionButtons, null, /* @__PURE__ */ React12.createElement(
+    Button2,
+    {
+      onClick: chatFeedbackBox.close,
+      label: i18nTerms.CHAT_FEEDBACK.CLOSE_BUTTON,
+      size: "small",
+      variant: "layerBased"
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    Button2,
+    {
+      type: "submit",
+      label: i18nTerms.CHAT_FEEDBACK.SUBMIT_BUTTON,
+      size: "small",
+      loading: chatFeedbackBox.loading
+    }
+  )))));
+}, "ChatUserFeedbackRating");
+
+// src/components/ChatbotDevice/index.tsx
+var ChatbotDevice = /* @__PURE__ */ __name(({}) => {
+  const { opened } = useChatbot_default();
+  return /* @__PURE__ */ React13.createElement(Wrapper, { $opened: opened }, /* @__PURE__ */ React13.createElement(ChatUserFeedbackRating, null), /* @__PURE__ */ React13.createElement(ChatbotHeader_default, null), /* @__PURE__ */ React13.createElement(ChatbotBody_default, null), /* @__PURE__ */ React13.createElement(ChatbotFooter_default, null), /* @__PURE__ */ React13.createElement(ChatbotToggle_default, null));
+}, "ChatbotDevice");
+var ChatbotDevice_default = ChatbotDevice;
+
+// src/components/ChatbotBar/styles.ts
+import { breakpoints as breakpoints3, screens as screens3 } from "@ibti-tech/ui";
+import { Container } from "@ibti-tech/ui/dist/components/Container";
+import { styled as styled10 } from "styled-components";
+var BarContainer = styled10(Container)`
+  @media screen and (max-width: ${breakpoints3.tablet}px) {
+    padding: 0;
+  }
+
+  ${screens3.tablet} {
+    display: flex;
+    justify-content: flex-end;
+  }
+`;
+var Wrapper9 = styled10.div`
+  width: 100%;
+  padding-bottom: ${(props) => props.theme.spacing.components.xsmall};
+  background-color: ${(props) => props.theme.colors.layers[0].background};
+  border-bottom: 1px solid ${(props) => props.theme.colors.layers[0].border};
+  height: 40px;
+  z-index: 2;
+  pointer-events: none;
+  z-index: ${(props) => props.theme.zIndex.modals};
+`;
+
+// src/components/ChatbotBar/index.tsx
+import React14 from "react";
+var ChatbotBar = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ React14.createElement(Wrapper9, null, /* @__PURE__ */ React14.createElement(BarContainer, null, /* @__PURE__ */ React14.createElement(ChatbotDevice_default, null)));
+}, "ChatbotBar");
+export {
+  ChatbotBar,
+  ChatbotContext,
+  ChatbotDevice,
+  ChatbotProvider,
+  useChatbot
+};