@ibti-tech/chatbot 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -419,7 +419,6 @@ declare module '@ibti-tech/chatbot/hooks/useUpdatedTime.d.ts' {
 declare module '@ibti-tech/chatbot/i18n/LocaleTerms' {
   export interface LocaleTerms {
       CHATBOT_NAME: string;
-      ORGANIZATION_NAME: string;
       INPUT_PLACEHOLDER: string;
       ERRORS: {
           UNKNOWN: string;
@@ -449,7 +448,7 @@ declare module '@ibti-tech/chatbot/i18n/LocaleTerms' {
   //# sourceMappingURL=LocaleTerms.d.ts.map
 }
 declare module '@ibti-tech/chatbot/i18n/LocaleTerms.d.ts' {
-  {"version":3,"file":"LocaleTerms.d.ts","sourceRoot":"","sources":["../../../../home/juan/projetos/ibti/ibti-chatbot/src/i18n/LocaleTerms.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAA;QACd,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,WAAW,EAAE;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,MAAM,CAAA;QACrB,aAAa,EAAE,MAAM,CAAA;QACrB,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF"}
+  {"version":3,"file":"LocaleTerms.d.ts","sourceRoot":"","sources":["../../../../home/juan/projetos/ibti/ibti-chatbot/src/i18n/LocaleTerms.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;IACzB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAA;QACd,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,WAAW,EAAE;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,MAAM,CAAA;QACrB,aAAa,EAAE,MAAM,CAAA;QACrB,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF"}
 }
 declare module '@ibti-tech/chatbot/i18n/index' {
   import { ChatbotTypes } from 'types';

package/dist/index.js

@@ -0,0 +1,1132 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  ChatbotBar: () => ChatbotBar,
+  ChatbotContext: () => ChatbotContext,
+  ChatbotDevice: () => ChatbotDevice,
+  ChatbotProvider: () => ChatbotProvider,
+  useChatbot: () => useChatbot
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/contexts/Chatbot/useChatbot.ts
+var import_react = require("react");
+
+// src/contexts/Chatbot/context.ts
+var React = __toESM(require("react"));
+var ChatbotContext = React.createContext({});
+
+// src/contexts/Chatbot/useChatbot.ts
+var useChatbot = /* @__PURE__ */ __name(() => {
+  const context = (0, import_react.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
+var import_react4 = __toESM(require("react"));
+
+// src/contexts/Chatbot/useChatbotMessages.ts
+var import_react3 = require("react");
+var import_uuid = require("uuid");
+
+// src/contexts/Chatbot/useChatbotSuggestedQuestions.ts
+var import_react2 = require("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] = (0, import_react2.useState)(false);
+  const [data, setData] = (0, import_react2.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] = (0, import_react3.useState)(
+    []
+  );
+  const [assistantIntroduced, setAssistantIntroduced] = (0, import_react3.useState)(false);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [writing, setWriting] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)();
+  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 = (0, import_uuid.v4)();
+    const questionId = (0, import_uuid.v4)();
+    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");
+  (0, import_react3.useEffect)(() => {
+    if (assistantIntroduced) return;
+    introduceAssistant();
+  }, [assistantIntroduced]);
+  return {
+    chatMessages,
+    makeQuestion,
+    loading,
+    writing,
+    error,
+    suggestedQuestions
+  };
+}, "useChatbotMessages");
+var useChatbotMessages_default = useChatbotMessages;
+
+// src/themes/index.ts
+var import_ui = require("@ibti-tech/ui");
+var themes = {
+  light: import_ui.defaultLightTheme,
+  dark: import_ui.defaultDarkTheme
+};
+
+// src/contexts/Chatbot/provider.tsx
+var import_styled_components = require("styled-components");
+var ChatbotProvider = /* @__PURE__ */ __name(({
+  locale,
+  children,
+  apiURL,
+  theme
+}) => {
+  const {
+    makeQuestion,
+    chatMessages,
+    loading,
+    writing,
+    error,
+    suggestedQuestions
+  } = useChatbotMessages_default({
+    apiURL,
+    locale
+  });
+  const [opened, setOpened] = (0, import_react4.useState)(false);
+  const scrollRef = (0, import_react4.useRef)(null);
+  const openedToggle = /* @__PURE__ */ __name(() => {
+    setOpened((state) => !state);
+  }, "openedToggle");
+  const status = (0, import_react4.useMemo)(() => {
+    if (writing) return "writing";
+    if (error) return "unavailable";
+    if (loading) return "loading";
+    return "online";
+  }, [writing, loading, error]);
+  return /* @__PURE__ */ import_react4.default.createElement(
+    ChatbotContext.Provider,
+    {
+      value: {
+        chatMessages,
+        makeQuestion,
+        loading,
+        writing,
+        locale,
+        scrollRef,
+        opened,
+        openedToggle,
+        status,
+        suggestedQuestions,
+        apiURL
+      }
+    },
+    /* @__PURE__ */ import_react4.default.createElement(import_styled_components.ThemeProvider, { theme: themes[theme] }, children)
+  );
+}, "ChatbotProvider");
+
+// src/components/ChatbotDevice/index.tsx
+var import_react17 = __toESM(require("react"));
+
+// src/components/ChatbotDevice/styles.ts
+var import_ui2 = require("@ibti-tech/ui");
+var import_polished = require("polished");
+var import_styled_components2 = require("styled-components");
+var Wrapper = import_styled_components2.styled.div`
+  width: 100%;
+  /* background-color: ${(props) => (0, import_polished.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;
+
+  ${import_ui2.screens.tablet} {
+    height: 500px;
+    max-width: ${import_ui2.breakpoints.mobileL}px;
+  }
+
+  ${(props) => !props.$opened && import_styled_components2.css`
+      transform: translateY(calc(-100% + 32px));
+    `}
+`;
+
+// src/components/ChatbotHeader/index.tsx
+var import_react7 = __toESM(require("react"));
+
+// src/components/ChatbotHeader/styles.ts
+var import_styled_components3 = require("styled-components");
+var Name = import_styled_components3.styled.span`
+  color: ${(props) => props.theme.colors.content.title};
+  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+`;
+var ProfileInfo = import_styled_components3.styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+var ProfileImage = import_styled_components3.styled.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 = import_styled_components3.styled.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
+var import_react5 = __toESM(require("react"));
+var BotIcon = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ import_react5.default.createElement("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em" }, /* @__PURE__ */ import_react5.default.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
+var import_react6 = __toESM(require("react"));
+
+// src/components/ChatbotStatusLabel/styles.ts
+var import_styled_components4 = require("styled-components");
+var Wrapper3 = import_styled_components4.styled.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
+var import_styled_components5 = require("styled-components");
+var ChatbotStatusLabel = /* @__PURE__ */ __name(({}) => {
+  const { status } = useChatbot_default();
+  const i18nTerms = useI18n();
+  const theme = (0, import_styled_components5.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__ */ import_react6.default.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__ */ import_react7.default.createElement(Wrapper2, null, /* @__PURE__ */ import_react7.default.createElement(ProfileImage, null, /* @__PURE__ */ import_react7.default.createElement(BotIcon, null)), /* @__PURE__ */ import_react7.default.createElement(ProfileInfo, null, /* @__PURE__ */ import_react7.default.createElement(Name, null, i18n2.ORGANIZATION_NAME), /* @__PURE__ */ import_react7.default.createElement(ChatbotStatusLabel_default, null)));
+}, "ChatbotHeader");
+var ChatbotHeader_default = ChatbotHeader;
+
+// src/components/ChatbotBody/index.tsx
+var import_react12 = __toESM(require("react"));
+
+// src/components/ChatbotBody/styles.ts
+var import_styled_components6 = require("styled-components");
+var ChatbotInput = import_styled_components6.styled.div``;
+var MessagesList = import_styled_components6.styled.ul`
+  padding: ${(props) => props.theme.spacing.components.medium};
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+var Wrapper4 = import_styled_components6.styled.div`
+  overflow: hidden;
+  overflow-y: auto;
+  flex: 1;
+  height: 100%;
+`;
+
+// src/components/MessageBalloon/index.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/components/MessageBalloon/styles.ts
+var import_styled_components7 = require("styled-components");
+var Time = import_styled_components7.styled.span`
+  font-size: ${(props) => props.theme.fontSizes.small};
+`;
+var Balloon = import_styled_components7.styled.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 import_styled_components7.css`
+          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 import_styled_components7.css`
+          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 = import_styled_components7.styled.span`
+  font-size: ${(props) => props.theme.fontSizes.small};
+`;
+var Wrapper5 = import_styled_components7.styled.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 import_styled_components7.css``;
+    default:
+    case "sent":
+      return import_styled_components7.css`
+          text-align: right;
+        `;
+  }
+}};
+`;
+
+// src/utils/formatMessageTime.ts
+var import_date_fns = require("date-fns");
+var formatMessageTime = /* @__PURE__ */ __name((dateUTC, currentDateUTC, locale) => {
+  return (0, import_date_fns.intlFormatDistance)(dateUTC, currentDateUTC, { locale });
+}, "formatMessageTime");
+
+// src/components/MessageBalloon/index.tsx
+var import_react_markdown = __toESM(require("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__ */ import_react8.default.createElement(Wrapper5, { $type: messageType }, data.role == "assistant" && /* @__PURE__ */ import_react8.default.createElement(Label, null, i18n2.CHATBOT_NAME), /* @__PURE__ */ import_react8.default.createElement(Balloon, { $type: messageType }, /* @__PURE__ */ import_react8.default.createElement(import_react_markdown.default, null, data.content)), /* @__PURE__ */ import_react8.default.createElement(Time, null, formatMessageTime(data.timestamp, currentDateUTC, locale)));
+}, "MessageBalloon");
+var MessageBalloon_default = MessageBalloon;
+
+// src/hooks/useElementScroll.ts
+var import_react9 = require("react");
+var useElementScroll = /* @__PURE__ */ __name((elementRef) => {
+  const [scrollProgress, setScrollProgress] = (0, import_react9.useState)(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");
+  (0, import_react9.useEffect)(() => {
+    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
+var import_react10 = require("react");
+var useUpdatedTime = /* @__PURE__ */ __name(({
+  intervalInSeconds
+}) => {
+  const [date, setDate] = (0, import_react10.useState)(/* @__PURE__ */ new Date());
+  (0, import_react10.useEffect)(() => {
+    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
+var import_react11 = __toESM(require("react"));
+
+// src/components/SuggestedQuestions/styles.ts
+var import_ui3 = require("@ibti-tech/ui");
+var import_styled_components8 = require("styled-components");
+var QuestionButton = (0, import_styled_components8.styled)(import_ui3.Button)`
+  text-align: left;
+  justify-content: flex-start;
+  height: auto;
+  padding: ${(props) => props.theme.spacing.components.small};
+`;
+var QuestionListItem = import_styled_components8.styled.li``;
+var QuestionList = import_styled_components8.styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+var Title = import_styled_components8.styled.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 = import_styled_components8.styled.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__ */ import_react11.default.createElement(Wrapper6, null, /* @__PURE__ */ import_react11.default.createElement(Title, null, i18n2.SUGGESTED_QUESTIONS.TITLE), /* @__PURE__ */ import_react11.default.createElement(QuestionList, null, suggestedQuestions.data.map((question) => /* @__PURE__ */ import_react11.default.createElement(QuestionListItem, { key: question }, /* @__PURE__ */ import_react11.default.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 = (0, import_react12.useRef)(null);
+  const { scrollProgress, scrollToEnd } = useElementScroll(scrollableElementRef);
+  const { dateUTC } = useUpdatedTime({ intervalInSeconds: 15 });
+  (0, import_react12.useEffect)(() => {
+    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__ */ import_react12.default.createElement(Wrapper4, { ref: scrollableElementRef }, /* @__PURE__ */ import_react12.default.createElement(MessagesList, null, chatMessages.map((msgData) => /* @__PURE__ */ import_react12.default.createElement(
+    MessageBalloon_default,
+    {
+      key: msgData.id,
+      data: msgData,
+      currentDateUTC: dateUTC
+    }
+  ))), /* @__PURE__ */ import_react12.default.createElement(SuggestedQuestions_default, null));
+}, "ChatbotBody");
+var ChatbotBody_default = ChatbotBody;
+
+// src/components/ChatbotFooter/index.tsx
+var import_react13 = __toESM(require("react"));
+
+// src/components/ChatbotFooter/styles.ts
+var import_styled_components9 = require("styled-components");
+var LoadingSuggestedQuestions = import_styled_components9.styled.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 = import_styled_components9.styled.form`
+  display: flex;
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+var Wrapper7 = import_styled_components9.styled.div`
+  padding: ${(props) => props.theme.spacing.components.small};
+`;
+
+// src/components/ChatbotFooter/index.tsx
+var import_ui4 = require("@ibti-tech/ui");
+var ChatbotFooter = /* @__PURE__ */ __name(({}) => {
+  const { makeQuestion, loading, writing, suggestedQuestions } = useChatbot_default();
+  const [questionInput, setQuestionInput] = (0, import_react13.useState)("");
+  const i18nTerms = useI18n();
+  const handleSubmit = /* @__PURE__ */ __name(async (e) => {
+    e.preventDefault();
+    setQuestionInput("");
+    await makeQuestion(questionInput);
+  }, "handleSubmit");
+  return /* @__PURE__ */ import_react13.default.createElement(Wrapper7, { "data-testid": "chatbot-footer" }, suggestedQuestions.loading && /* @__PURE__ */ import_react13.default.createElement(LoadingSuggestedQuestions, null, /* @__PURE__ */ import_react13.default.createElement(import_ui4.Spinner, { size: "extra-small" }), i18nTerms.SUGGESTED_QUESTIONS.LOADING), /* @__PURE__ */ import_react13.default.createElement(Form, { onSubmit: handleSubmit }, /* @__PURE__ */ import_react13.default.createElement(
+    import_ui4.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 : import_ui4.ArrowRightIcon,
+        loading,
+        disabled: loading || writing || !questionInput,
+        type: "submit"
+      }
+    }
+  )));
+}, "ChatbotFooter");
+var ChatbotFooter_default = ChatbotFooter;
+
+// src/components/ChatbotToggle/styles.ts
+var import_ui5 = require("@ibti-tech/ui");
+var import_styled_components10 = require("styled-components");
+var ButtonWrapper = import_styled_components10.styled.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};
+
+  ${import_ui5.screens.tablet} {
+    transition: ${(props) => props.theme.transitionDurations.default};
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.layers[1].hoveredBackground};
+      cursor: pointer;
+    }
+  }
+`;
+
+// src/components/ChatbotToggle/index.tsx
+var import_react14 = __toESM(require("react"));
+var import_icons = require("@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 ? import_icons.ChevronUpIcon : import_icons.ChevronDownIcon;
+  return /* @__PURE__ */ import_react14.default.createElement(ButtonWrapper, { onClick: openedToggle }, /* @__PURE__ */ import_react14.default.createElement(BotIcon, null), /* @__PURE__ */ import_react14.default.createElement("span", null, toggleText), /* @__PURE__ */ import_react14.default.createElement(Chevron, null));
+}, "ChatbotToggle");
+var ChatbotToggle_default = ChatbotToggle;
+
+// src/components/ChatUserFeedbackRating/index.tsx
+var import_react16 = __toESM(require("react"));
+var import_ui7 = require("@ibti-tech/ui");
+
+// src/components/ChatUserFeedbackRating/styles.ts
+var import_ui6 = require("@ibti-tech/ui");
+var import_styled_components11 = require("styled-components");
+var ActionButtons = import_styled_components11.styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.spacing.components.small};
+`;
+var Form2 = import_styled_components11.styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.components.medium};
+`;
+var Description = import_styled_components11.styled.div`
+  font-size: ${(props) => props.theme.fontSizes.small};
+  margin-bottom: ${(props) => props.theme.spacing.components.medium};
+`;
+var Title2 = import_styled_components11.styled.span`
+  display: block;
+  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+  margin-bottom: ${(props) => props.theme.spacing.components.small};
+`;
+var Box = (0, import_styled_components11.styled)(import_ui6.CardBase)`
+  width: 100%;
+  height: max-content;
+  padding: ${(props) => props.theme.spacing.components.medium};
+  transition: ${(props) => props.theme.transitionDurations.default};
+`;
+var Wrapper8 = import_styled_components11.styled.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 ? import_styled_components11.css`
+          background-color: rgba(0, 0, 0, 0.15);
+          backdrop-filter: blur(3px);
+          opacity: 1;
+        ` : import_styled_components11.css`
+          pointer-events: none;
+          opacity: 0;
+
+          ${Box} {
+            transform: scale(0.9);
+          }
+        `}
+`;
+
+// src/contexts/Chatbot/useChatFeedbackBox.ts
+var import_react15 = require("react");
+var useChatFeedbackBox = /* @__PURE__ */ __name(() => {
+  const { chatMessages, apiURL, locale } = useChatbot_default();
+  const [rated, setRated] = (0, import_react15.useState)(false);
+  const [opened, setOpened] = (0, import_react15.useState)(false);
+  const [loading, setLoading] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
+    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] = (0, import_react16.useState)(5);
+  const [descriptionValue, setDescriptionValue] = (0, import_react16.useState)("");
+  const i18nTerms = useI18n();
+  const handleSubmit = /* @__PURE__ */ __name((e) => {
+    e.preventDefault();
+    chatFeedbackBox.sendUserRating({
+      description: descriptionValue,
+      ratingScore: ratingValue
+    });
+  }, "handleSubmit");
+  return /* @__PURE__ */ import_react16.default.createElement(Wrapper8, { $opened: chatFeedbackBox.opened }, /* @__PURE__ */ import_react16.default.createElement(Box, null, /* @__PURE__ */ import_react16.default.createElement(Title2, null, i18nTerms.CHAT_FEEDBACK.TITLE), /* @__PURE__ */ import_react16.default.createElement(Description, null, i18nTerms.CHAT_FEEDBACK.DESCRIPTION), /* @__PURE__ */ import_react16.default.createElement(Form2, { onSubmit: handleSubmit }, /* @__PURE__ */ import_react16.default.createElement(
+    import_ui7.RatingStars,
+    {
+      value: ratingValue,
+      setValue: setRatingValue,
+      layer: 2
+    }
+  ), /* @__PURE__ */ import_react16.default.createElement(
+    import_ui7.TextArea,
+    {
+      layer: 2,
+      placeholder: i18nTerms.CHAT_FEEDBACK.MESSAGE_FIELD,
+      fillWidth: true,
+      value: descriptionValue,
+      onChange: (e) => setDescriptionValue(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react16.default.createElement(ActionButtons, null, /* @__PURE__ */ import_react16.default.createElement(
+    import_ui7.Button,
+    {
+      onClick: chatFeedbackBox.close,
+      label: i18nTerms.CHAT_FEEDBACK.CLOSE_BUTTON,
+      size: "small",
+      variant: "layerBased"
+    }
+  ), /* @__PURE__ */ import_react16.default.createElement(
+    import_ui7.Button,
+    {
+      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__ */ import_react17.default.createElement(Wrapper, { $opened: opened }, /* @__PURE__ */ import_react17.default.createElement(ChatUserFeedbackRating, null), /* @__PURE__ */ import_react17.default.createElement(ChatbotHeader_default, null), /* @__PURE__ */ import_react17.default.createElement(ChatbotBody_default, null), /* @__PURE__ */ import_react17.default.createElement(ChatbotFooter_default, null), /* @__PURE__ */ import_react17.default.createElement(ChatbotToggle_default, null));
+}, "ChatbotDevice");
+var ChatbotDevice_default = ChatbotDevice;
+
+// src/components/ChatbotBar/styles.ts
+var import_ui8 = require("@ibti-tech/ui");
+var import_Container = require("@ibti-tech/ui/dist/components/Container");
+var import_styled_components12 = require("styled-components");
+var BarContainer = (0, import_styled_components12.styled)(import_Container.Container)`
+  @media screen and (max-width: ${import_ui8.breakpoints.tablet}px) {
+    padding: 0;
+  }
+
+  ${import_ui8.screens.tablet} {
+    display: flex;
+    justify-content: flex-end;
+  }
+`;
+var Wrapper9 = import_styled_components12.styled.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
+var import_react18 = __toESM(require("react"));
+var ChatbotBar = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ import_react18.default.createElement(Wrapper9, null, /* @__PURE__ */ import_react18.default.createElement(BarContainer, null, /* @__PURE__ */ import_react18.default.createElement(ChatbotDevice_default, null)));
+}, "ChatbotBar");

package/dist/index.mjs

@@ -403,7 +403,6 @@ var BotIcon = /* @__PURE__ */ __name(() => {
 // src/i18n/en.json
 var en_default = {
   CHATBOT_NAME: "IBTI Chatbot (Beta)",
-  ORGANIZATION_NAME: "IBTI IT Solutions",
   STATUS: {
     ONLINE: "Now online",
     LOADING: "Loading...",
@@ -434,7 +433,6 @@ var en_default = {
 // 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...",
@@ -519,7 +517,7 @@ 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)));
+  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.CHATBOT_NAME), /* @__PURE__ */ React6.createElement(ChatbotStatusLabel_default, null)));
 }, "ChatbotHeader");
 var ChatbotHeader_default = ChatbotHeader;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibti-tech/chatbot",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Chatbot developed for ibti products",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",