@ibti-tech/chatbot 0.2.0 → 0.5.7

package/dist/index.mjs

@@ -17,10 +17,10 @@ var useChatbot = /* @__PURE__ */ __name(() => {
 var useChatbot_default = useChatbot;
 
 // src/contexts/Chatbot/provider.tsx
-import React3, { useMemo, useRef, useState as useState3 } from "react";
+import React3, { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState3 } from "react";
 
 // src/contexts/Chatbot/useChatbotMessages.ts
-import { useEffect, useState as useState2 } from "react";
+import { useEffect, useState as useState2, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 
 // src/contexts/Chatbot/useChatbotSuggestedQuestions.ts
@@ -66,8 +66,10 @@ var en_default = {
     ONLINE: "Now online",
     LOADING: "Loading...",
     WRITING: "Writing answer...",
-    UNAVAILABLE: "Unavailable"
+    UNAVAILABLE: "Unavailable",
+    INACTIVE: "Inactive"
   },
+  WRITING_MESSAGE: "Writing",
   ERRORS: {
     UNKNOWN: "Sorry. We couldn't provide a response."
   },
@@ -87,7 +89,13 @@ var en_default = {
     SUBMIT_BUTTON: "Send",
     CLOSE_BUTTON: "Close",
     RATE: "Rate assistant"
-  }
+  },
+  MESSAGE_ACTIONS: {
+    COPY: "Copy message",
+    SHARE: "Share message",
+    RESEND: "Resend message"
+  },
+  USER_LABEL: "Me"
 };
 
 // src/i18n/pt_BR.json
@@ -97,8 +105,10 @@ var pt_BR_default = {
     ONLINE: "Ativo agora",
     LOADING: "Carregando...",
     WRITING: "Escrevendo resposta...",
-    UNAVAILABLE: "Indispon\xEDvel"
+    UNAVAILABLE: "Indispon\xEDvel",
+    INACTIVE: "Inativo"
   },
+  WRITING_MESSAGE: "Escrevendo",
   ERRORS: {
     UNKNOWN: "Desculpe. N\xE3o conseguimos fornecer uma resposta."
   },
@@ -118,7 +128,13 @@ var pt_BR_default = {
     SUBMIT_BUTTON: "Enviar",
     CLOSE_BUTTON: "Fechar",
     RATE: "Avaliar assistente"
-  }
+  },
+  MESSAGE_ACTIONS: {
+    COPY: "Copiar mensagem",
+    SHARE: "Compartilhar mensagem",
+    RESEND: "Reenviar mensagem"
+  },
+  USER_LABEL: "Eu"
 };
 
 // src/i18n/index.ts
@@ -184,10 +200,46 @@ var sendUserChatFeedback = /* @__PURE__ */ __name(async ({
     message: description
   })
 }), "sendUserChatFeedback");
+var checkApiHealth = /* @__PURE__ */ __name(async (apiUrl, locale = "en") => {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 5e3);
+  try {
+    const req = await fetch(`${apiUrl}/chat/welcome?locale=${locale}`, {
+      method: "HEAD",
+      // Use HEAD to minimize data transfer
+      signal: controller.signal
+    });
+    clearTimeout(timeoutId);
+    return req.ok;
+  } catch (err) {
+    clearTimeout(timeoutId);
+    const fallbackController = new AbortController();
+    const fallbackTimeoutId = setTimeout(
+      () => fallbackController.abort(),
+      5e3
+    );
+    try {
+      const req = await fetch(`${apiUrl}/chat/welcome?locale=${locale}`, {
+        method: "GET",
+        signal: fallbackController.signal
+      });
+      clearTimeout(fallbackTimeoutId);
+      return req.ok;
+    } catch {
+      clearTimeout(fallbackTimeoutId);
+      return false;
+    }
+  }
+}, "checkApiHealth");
 var getWelcomeMessage = /* @__PURE__ */ __name(async (apiUrl, locale = "en") => {
   const req = await fetch(`${apiUrl}/chat/welcome?locale=${locale}`, {
     method: "GET"
   });
+  if (!req.ok) {
+    throw new Error(
+      i18n[locale].ERRORS.UNKNOWN + ` (status: ${req.status})`
+    );
+  }
   const data = await req.json();
   return data.welcomeMessage;
 }, "getWelcomeMessage");
@@ -196,11 +248,19 @@ var getWelcomeMessage = /* @__PURE__ */ __name(async (apiUrl, locale = "en") =>
 import { parseCookies, setCookie } from "nookies";
 var ChatCookieManager = class {
   constructor() {
+    this.storageKey = "ibtiChatbot@chat";
     this.cookieKey = "ibtiChatbot@chat";
+    // Keep for migration purposes
+    this.maxAgeInHours = 24;
   }
   static {
     __name(this, "ChatCookieManager");
   }
+  /**
+   * Validates that the data can be safely serialized to JSON
+   * @param data - Data to validate
+   * @throws Error if data cannot be serialized
+   */
   checkValidJSONData(data) {
     try {
       JSON.parse(JSON.stringify(data));
@@ -208,27 +268,144 @@ var ChatCookieManager = class {
       throw new Error("Invalid chat context data.");
     }
   }
-  getData() {
-    const cookies = parseCookies();
-    if (!cookies[this.cookieKey]) {
-      this.saveData([]);
-      return [];
+  /**
+   * Checks if the stored data has expired based on creation timestamp
+   * @param createdAt - ISO timestamp string when data was created
+   * @returns true if data is older than maxAgeInHours
+   */
+  isDataExpired(createdAt) {
+    const now = (/* @__PURE__ */ new Date()).getTime();
+    const created = new Date(createdAt).getTime();
+    const maxAgeInMs = this.maxAgeInHours * 60 * 60 * 1e3;
+    return now - created > maxAgeInMs;
+  }
+  /**
+   * Migrates data from cookies to localStorage if cookies exist and localStorage doesn't
+   * @returns true if migration was performed
+   */
+  migrateFromCookies() {
+    if (typeof window === "undefined") return false;
+    if (localStorage.getItem(this.storageKey)) {
+      return false;
     }
     try {
-      const data = JSON.parse(cookies[this.cookieKey]);
-      return data;
+      const cookies = document.cookie.split(";");
+      const cookie = cookies.find((c) => {
+        const trimmed = c.trim();
+        return trimmed.startsWith(`${this.cookieKey}=`);
+      });
+      if (cookie) {
+        const equalIndex = cookie.indexOf("=");
+        if (equalIndex !== -1) {
+          const cookieValue = decodeURIComponent(cookie.substring(equalIndex + 1).trim());
+          const data = JSON.parse(cookieValue);
+          if (Array.isArray(data)) {
+            const storageData = {
+              messages: data,
+              createdAt: (/* @__PURE__ */ new Date()).toISOString()
+            };
+            localStorage.setItem(this.storageKey, JSON.stringify(storageData));
+          } else if (data.messages) {
+            localStorage.setItem(this.storageKey, JSON.stringify(data));
+          }
+          document.cookie = `${this.cookieKey}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+          return true;
+        }
+      }
     } catch (err) {
-      this.saveData([]);
-      return [];
+      console.warn("Failed to migrate from cookies to localStorage:", err);
     }
+    return false;
   }
+  /**
+   * Retrieves chat messages from localStorage (client-side) or cookies (server-side).
+   * Automatically migrates from cookies to localStorage and cleans expired data.
+   * @returns Array of chat messages, empty array if none found or expired
+   */
+  getData() {
+    if (typeof window !== "undefined") {
+      this.migrateFromCookies();
+      const storedValue = localStorage.getItem(this.storageKey);
+      if (!storedValue) {
+        return [];
+      }
+      try {
+        const data = JSON.parse(storedValue);
+        if (Array.isArray(data)) {
+          const storageData = {
+            messages: data,
+            createdAt: (/* @__PURE__ */ new Date()).toISOString()
+          };
+          localStorage.setItem(this.storageKey, JSON.stringify(storageData));
+          return data;
+        }
+        if (data.createdAt && this.isDataExpired(data.createdAt)) {
+          this.saveData([]);
+          return [];
+        }
+        return data.messages || [];
+      } catch (err) {
+        console.warn("Failed to parse chat storage data:", err);
+        this.saveData([]);
+        return [];
+      }
+    } else {
+      const cookies = parseCookies();
+      const cookieValue = cookies[this.cookieKey];
+      if (!cookieValue) {
+        return [];
+      }
+      try {
+        const data = JSON.parse(cookieValue);
+        if (Array.isArray(data)) {
+          return data;
+        }
+        if (data.createdAt && this.isDataExpired(data.createdAt)) {
+          return [];
+        }
+        return data.messages || [];
+      } catch (err) {
+        console.warn("Failed to parse chat cookie:", err);
+        return [];
+      }
+    }
+  }
+  /**
+   * Saves chat messages to localStorage (client-side) or cookies (server-side).
+   * Data expires after 24 hours (checked on read, not enforced by storage).
+   * @param data - Array of chat messages to persist
+   */
   saveData(data) {
     try {
       this.checkValidJSONData(data);
-      setCookie(null, this.cookieKey, JSON.stringify(data), {
-        expiresIn: 60 * 60 * 24
-      });
+      const storageData = {
+        messages: data,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      const storageValue = JSON.stringify(storageData);
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.setItem(this.storageKey, storageValue);
+          const verifyData = localStorage.getItem(this.storageKey);
+          if (!verifyData) {
+            throw new Error("Failed to verify localStorage save");
+          }
+          document.cookie = `${this.cookieKey}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+        } catch (err) {
+          console.error("Failed to save to localStorage:", err);
+          if (err instanceof DOMException && err.code === 22) {
+            console.warn("localStorage quota exceeded. Consider clearing old data.");
+          }
+          throw new Error("Failed to save chat context data to localStorage");
+        }
+      } else {
+        setCookie(null, this.cookieKey, storageValue, {
+          expiresIn: 60 * 60 * 24
+          // 24 hours in seconds
+        });
+      }
     } catch (err) {
+      console.error("Failed to save chat data:", err);
       throw new Error("Fail to save chat context data");
     }
   }
@@ -254,6 +431,10 @@ var useChatbotMessages = /* @__PURE__ */ __name(({
   const [loading, setLoading] = useState2(false);
   const [writing, setWriting] = useState2(false);
   const [error, setError] = useState2();
+  const [apiConnectionError, setApiConnectionError] = useState2(false);
+  const prevWritingRef = useRef(false);
+  const chatMessagesRef = useRef([]);
+  const saveTimeoutRef = useRef(null);
   const suggestedQuestions = useChatbotSuggestedQuestions({
     chatContext: chatMessages.map((item) => ({
       role: item.role,
@@ -262,6 +443,30 @@ var useChatbotMessages = /* @__PURE__ */ __name(({
     apiURL,
     locale
   });
+  const persistMessages = /* @__PURE__ */ __name((messages, immediate = false) => {
+    if (!initialized) return;
+    chatMessagesRef.current = messages;
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+      saveTimeoutRef.current = null;
+    }
+    if (immediate) {
+      try {
+        chatCookie.saveData(messages);
+      } catch (err) {
+        console.error("Failed to persist messages:", err);
+      }
+    } else {
+      saveTimeoutRef.current = setTimeout(() => {
+        try {
+          chatCookie.saveData(chatMessagesRef.current);
+        } catch (err) {
+          console.error("Failed to persist messages (debounced):", err);
+        }
+        saveTimeoutRef.current = null;
+      }, 500);
+    }
+  }, "persistMessages");
   const createQuestionMessageIntoHistory = /* @__PURE__ */ __name((question, id) => {
     const timestamp = (/* @__PURE__ */ new Date()).toUTCString();
     const messageData = {
@@ -275,9 +480,10 @@ var useChatbotMessages = /* @__PURE__ */ __name(({
       messageData
     ];
     setChatMessages(newHistory);
+    persistMessages(newHistory, true);
     return messageData;
   }, "createQuestionMessageIntoHistory");
-  const createOrUpdateAnswerMessageIntoHistory = /* @__PURE__ */ __name((answer, id, error2 = false) => {
+  const createOrUpdateAnswerMessageIntoHistory = /* @__PURE__ */ __name((answer, id, error2 = false, shouldPersist = false) => {
     const timestamp = (/* @__PURE__ */ new Date()).toUTCString();
     const messageData = {
       id,
@@ -289,7 +495,7 @@ var useChatbotMessages = /* @__PURE__ */ __name(({
     setChatMessages((prev) => {
       const itemAlreadyExists = prev.some((item) => item.id == id);
       if (itemAlreadyExists) {
-        return prev.map((item) => {
+        const updated = prev.map((item) => {
           if (item.id == id)
             return {
               ...item,
@@ -297,8 +503,12 @@ var useChatbotMessages = /* @__PURE__ */ __name(({
             };
           return item;
         });
+        persistMessages(updated, shouldPersist);
+        return updated;
       }
-      return [...prev, messageData];
+      const newHistory = [...prev, messageData];
+      persistMessages(newHistory, shouldPersist);
+      return newHistory;
     });
     return messageData;
   }, "createOrUpdateAnswerMessageIntoHistory");
@@ -325,45 +535,107 @@ var useChatbotMessages = /* @__PURE__ */ __name(({
         onReceiving(receivedMessage) {
           setLoading(false);
           setWriting(true);
-          createOrUpdateAnswerMessageIntoHistory(receivedMessage, answerId);
+          createOrUpdateAnswerMessageIntoHistory(receivedMessage, answerId, false, false);
         },
         onDone: /* @__PURE__ */ __name(() => {
           setWriting(false);
+          setTimeout(() => {
+            setChatMessages((currentMessages) => {
+              if (initialized && currentMessages.length > 0) {
+                if (saveTimeoutRef.current) {
+                  clearTimeout(saveTimeoutRef.current);
+                  saveTimeoutRef.current = null;
+                }
+                chatCookie.saveData(currentMessages);
+                chatMessagesRef.current = currentMessages;
+              }
+              return currentMessages;
+            });
+          }, 100);
           suggestedQuestions.fetchData();
         }, "onDone")
       });
     } catch (err) {
       if (err instanceof Error) {
-        createOrUpdateAnswerMessageIntoHistory(err.message, answerId, true);
+        createOrUpdateAnswerMessageIntoHistory(err.message, answerId, true, true);
       }
-    }
-    chatCookie.saveData([
-      ...chatMessages,
-      {
-        id: uuidv4(),
-        timestamp: (/* @__PURE__ */ new Date()).toUTCString(),
-        role: chatContext.role,
-        content: chatContext.content
+      const isConnectionError = err instanceof TypeError || err instanceof Error && (err.message.toLowerCase().includes("fetch") || err.message.toLowerCase().includes("network") || err.message.toLowerCase().includes("failed to fetch"));
+      if (isConnectionError) {
+        setApiConnectionError(true);
       }
-    ]);
+      setError(err);
+      setLoading(false);
+      setWriting(false);
+    }
     dispatchAssitantAnswer();
   }, "makeQuestion");
+  useEffect(() => {
+    if (!initialized) return;
+    if (prevWritingRef.current && !writing && !loading && chatMessages.length > 0) {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        saveTimeoutRef.current = null;
+      }
+      try {
+        chatCookie.saveData(chatMessages);
+        chatMessagesRef.current = chatMessages;
+      } catch (err) {
+        console.error("Failed to persist messages on writing complete:", err);
+      }
+    }
+    prevWritingRef.current = writing;
+  }, [writing, loading, chatMessages, initialized]);
+  useEffect(() => {
+    chatMessagesRef.current = chatMessages;
+  }, [chatMessages]);
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  }, []);
   const init = /* @__PURE__ */ __name(async () => {
+    try {
+      const isApiAvailable = await checkApiHealth(apiURL, locale);
+      if (!isApiAvailable) {
+        setApiConnectionError(true);
+        setInitialized(true);
+        return;
+      }
+      setApiConnectionError(false);
+    } catch (err) {
+      setApiConnectionError(true);
+      setError(err);
+      setInitialized(true);
+      return;
+    }
     const savedData = chatCookie.getData();
     if (savedData && savedData.length > 0) {
       setChatMessages(savedData);
+      setInitialized(true);
     } else {
-      const firstMessage = await getWelcomeMessage(apiURL, locale);
-      setChatMessages([
-        {
-          id: uuidv4(),
-          timestamp: (/* @__PURE__ */ new Date()).toUTCString(),
-          role: "assistant",
-          content: firstMessage
+      try {
+        const firstMessage = await getWelcomeMessage(apiURL, locale);
+        setChatMessages([
+          {
+            id: uuidv4(),
+            timestamp: (/* @__PURE__ */ new Date()).toUTCString(),
+            role: "assistant",
+            content: firstMessage
+          }
+        ]);
+        setApiConnectionError(false);
+      } catch (err) {
+        const isConnectionError = err instanceof TypeError || err instanceof Error && (err.message.toLowerCase().includes("fetch") || err.message.toLowerCase().includes("network") || err.message.toLowerCase().includes("failed to fetch"));
+        if (isConnectionError) {
+          setApiConnectionError(true);
         }
-      ]);
+        setError(err);
+      } finally {
+        setInitialized(true);
+      }
     }
-    setInitialized(true);
   }, "init");
   useEffect(() => {
     if (initialized) return;
@@ -375,6 +647,7 @@ var useChatbotMessages = /* @__PURE__ */ __name(({
     loading,
     writing,
     error,
+    apiConnectionError,
     suggestedQuestions
   };
 }, "useChatbotMessages");
@@ -393,7 +666,9 @@ var ChatbotProvider = /* @__PURE__ */ __name(({
   locale,
   children,
   apiURL,
-  theme
+  theme,
+  isOpen = false,
+  texts
 }) => {
   const {
     makeQuestion,
@@ -401,22 +676,26 @@ var ChatbotProvider = /* @__PURE__ */ __name(({
     loading,
     writing,
     error,
+    apiConnectionError,
     suggestedQuestions
   } = useChatbotMessages_default({
     apiURL,
     locale
   });
-  const [opened, setOpened] = useState3(false);
-  const scrollRef = useRef(null);
+  const [opened, setOpened] = useState3(isOpen);
+  const scrollRef = useRef2(null);
+  useEffect2(() => {
+    setOpened(isOpen);
+  }, [isOpen]);
   const openedToggle = /* @__PURE__ */ __name(() => {
     setOpened((state) => !state);
   }, "openedToggle");
   const status = useMemo(() => {
     if (writing) return "writing";
-    if (error) return "unavailable";
+    if (apiConnectionError || error) return "unavailable";
     if (loading) return "loading";
     return "online";
-  }, [writing, loading, error]);
+  }, [writing, loading, error, apiConnectionError]);
   return /* @__PURE__ */ React3.createElement(
     ChatbotContext.Provider,
     {
@@ -430,8 +709,10 @@ var ChatbotProvider = /* @__PURE__ */ __name(({
         opened,
         openedToggle,
         status,
+        apiConnectionError,
         suggestedQuestions,
-        apiURL
+        apiURL,
+        texts
       }
     },
     /* @__PURE__ */ React3.createElement(ThemeProvider, { theme: themes[theme] }, children)
@@ -439,7 +720,7 @@ var ChatbotProvider = /* @__PURE__ */ __name(({
 }, "ChatbotProvider");
 
 // src/components/ChatbotDevice/index.tsx
-import React13 from "react";
+import React14 from "react";
 
 // src/components/ChatbotDevice/styles.ts
 import { breakpoints, screens } from "@ibti-tech/ui";
@@ -451,8 +732,6 @@ var Wrapper = styled.div`
   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;
@@ -460,14 +739,45 @@ var Wrapper = styled.div`
   box-sizing: border-box;
   position: relative;
 
+  @media screen and (max-width: ${breakpoints.tablet}px) {
+    ${(props) => props.$opened && props.$verticalPosition === "bottom" ? css`
+            max-height: 100vh;
+          ` : ""}
+  }
+
+  ${(props) => props.$verticalPosition === "top" ? css`
+          border-end-end-radius: ${(props2) => props2.theme.borderRadius.medium};
+          border-end-start-radius: ${(props2) => props2.theme.borderRadius.medium};
+        ` : css`
+          border-start-end-radius: ${(props2) => props2.theme.borderRadius.medium};
+          border-start-start-radius: ${(props2) => props2.theme.borderRadius.medium};
+        `}
+
   ${screens.tablet} {
     height: 500px;
     max-width: ${breakpoints.mobileL}px;
   }
 
-  ${(props) => !props.$opened && css`
-      transform: translateY(calc(-100% + 32px));
-    `}
+  ${(props) => !props.$opened && (props.$verticalPosition === "top" ? css`
+          transform: translateY(calc(-100% + 32px));
+        ` : css`
+          transform: translateY(calc(100% - 32px));
+          width: 100%;
+          ${screens.tablet} {
+            width: ${breakpoints.mobileL}px;
+            max-width: ${breakpoints.mobileL}px;
+            min-width: ${breakpoints.mobileL}px;
+          }
+          > *:not(:last-child) {
+            display: none;
+          }
+          > *:last-child {
+            flex-shrink: 0;
+            min-height: 32px;
+            height: 32px;
+            width: 100%;
+          }
+        `)}
 `;
 
 // src/components/ChatbotHeader/index.tsx
@@ -518,6 +828,120 @@ var BotIcon = /* @__PURE__ */ __name(() => {
   ));
 }, "BotIcon");
 
+// src/hooks/useChatbotTexts.ts
+var useChatbotTexts = /* @__PURE__ */ __name(() => {
+  const { locale, texts } = useChatbot();
+  const defaultTexts = i18n[locale];
+  if (!texts || !texts[locale]) {
+    return defaultTexts;
+  }
+  const customTexts = texts[locale];
+  const getText = /* @__PURE__ */ __name((custom, defaultValue = "") => custom && custom.trim() !== "" ? custom : defaultValue, "getText");
+  return {
+    CHATBOT_NAME: getText(
+      customTexts.CHATBOT_NAME,
+      defaultTexts.CHATBOT_NAME
+    ),
+    INPUT_PLACEHOLDER: getText(
+      customTexts.INPUT_PLACEHOLDER,
+      defaultTexts.INPUT_PLACEHOLDER
+    ),
+    CHATBOT_BAR: {
+      OPEN: getText(
+        customTexts.CHATBOT_BAR?.OPEN,
+        defaultTexts.CHATBOT_BAR.OPEN
+      ),
+      CLOSE: getText(
+        customTexts.CHATBOT_BAR?.CLOSE,
+        defaultTexts.CHATBOT_BAR.CLOSE
+      )
+    },
+    CHAT_FEEDBACK: {
+      TITLE: getText(
+        customTexts.CHAT_FEEDBACK?.TITLE,
+        defaultTexts.CHAT_FEEDBACK.TITLE
+      ),
+      DESCRIPTION: getText(
+        customTexts.CHAT_FEEDBACK?.DESCRIPTION,
+        defaultTexts.CHAT_FEEDBACK.DESCRIPTION
+      ),
+      MESSAGE_FIELD: getText(
+        customTexts.CHAT_FEEDBACK?.MESSAGE_FIELD,
+        defaultTexts.CHAT_FEEDBACK.MESSAGE_FIELD
+      ),
+      SUBMIT_BUTTON: getText(
+        customTexts.CHAT_FEEDBACK?.SUBMIT_BUTTON,
+        defaultTexts.CHAT_FEEDBACK.SUBMIT_BUTTON
+      ),
+      CLOSE_BUTTON: getText(
+        customTexts.CHAT_FEEDBACK?.CLOSE_BUTTON,
+        defaultTexts.CHAT_FEEDBACK.CLOSE_BUTTON
+      ),
+      RATE: getText(
+        customTexts.CHAT_FEEDBACK?.RATE,
+        defaultTexts.CHAT_FEEDBACK.RATE
+      )
+    },
+    SUGGESTED_QUESTIONS: {
+      TITLE: getText(
+        customTexts.SUGGESTED_QUESTIONS?.TITLE,
+        defaultTexts.SUGGESTED_QUESTIONS.TITLE
+      ),
+      LOADING: getText(
+        customTexts.SUGGESTED_QUESTIONS?.LOADING,
+        defaultTexts.SUGGESTED_QUESTIONS.LOADING
+      )
+    },
+    STATUS: {
+      ONLINE: getText(customTexts.STATUS?.ONLINE, defaultTexts.STATUS.ONLINE),
+      LOADING: getText(
+        customTexts.STATUS?.LOADING,
+        defaultTexts.STATUS.LOADING
+      ),
+      WRITING: getText(
+        customTexts.STATUS?.WRITING,
+        defaultTexts.STATUS.WRITING
+      ),
+      UNAVAILABLE: getText(
+        customTexts.STATUS?.UNAVAILABLE,
+        defaultTexts.STATUS.UNAVAILABLE
+      ),
+      INACTIVE: getText(
+        customTexts.STATUS?.INACTIVE,
+        defaultTexts.STATUS.INACTIVE
+      )
+    },
+    ERRORS: {
+      UNKNOWN: getText(
+        customTexts.ERRORS?.UNKNOWN,
+        defaultTexts.ERRORS.UNKNOWN
+      )
+    },
+    MESSAGE_ACTIONS: {
+      COPY: getText(
+        customTexts.MESSAGE_ACTIONS?.COPY,
+        defaultTexts.MESSAGE_ACTIONS.COPY
+      ),
+      SHARE: getText(
+        customTexts.MESSAGE_ACTIONS?.SHARE,
+        defaultTexts.MESSAGE_ACTIONS.SHARE
+      ),
+      RESEND: getText(
+        customTexts.MESSAGE_ACTIONS?.RESEND,
+        defaultTexts.MESSAGE_ACTIONS.RESEND
+      )
+    },
+    USER_LABEL: getText(
+      customTexts.USER_LABEL,
+      defaultTexts.USER_LABEL
+    ),
+    WRITING_MESSAGE: getText(
+      customTexts.WRITING_MESSAGE,
+      defaultTexts.WRITING_MESSAGE
+    )
+  };
+}, "useChatbotTexts");
+
 // src/components/ChatbotStatusLabel/index.tsx
 import React5 from "react";
 
@@ -541,14 +965,14 @@ var Wrapper3 = styled3.span`
 // src/components/ChatbotStatusLabel/index.tsx
 import { useTheme } from "styled-components";
 var ChatbotStatusLabel = /* @__PURE__ */ __name(({}) => {
-  const { status } = useChatbot_default();
-  const i18nTerms = useI18n();
+  const { status, apiConnectionError } = useChatbot_default();
+  const texts = useChatbotTexts();
   const theme = useTheme();
   const statusLabel = {
-    online: i18nTerms.STATUS.ONLINE,
-    loading: i18nTerms.STATUS.LOADING,
-    writing: i18nTerms.STATUS.WRITING,
-    unavailable: i18nTerms.STATUS.UNAVAILABLE
+    online: texts.STATUS.ONLINE,
+    loading: texts.STATUS.LOADING,
+    writing: texts.STATUS.WRITING,
+    unavailable: apiConnectionError ? texts.STATUS.INACTIVE : texts.STATUS.UNAVAILABLE
   };
   const statusColor = {
     online: theme.colors.palette.success.normal,
@@ -563,11 +987,11 @@ var ChatbotStatusLabel_default = ChatbotStatusLabel;
 // src/components/ChatbotHeader/index.tsx
 import { Button } from "@ibti-tech/ui";
 var ChatbotHeader = /* @__PURE__ */ __name(({ chatFeedbackBox }) => {
-  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.CHATBOT_NAME), /* @__PURE__ */ React6.createElement(ChatbotStatusLabel_default, null)), /* @__PURE__ */ React6.createElement(
+  const texts = useChatbotTexts();
+  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, texts.CHATBOT_NAME), /* @__PURE__ */ React6.createElement(ChatbotStatusLabel_default, null)), /* @__PURE__ */ React6.createElement(
     Button,
     {
-      label: i18n2.CHAT_FEEDBACK.RATE,
+      label: texts.CHAT_FEEDBACK.RATE,
       onClick: chatFeedbackBox.open,
       size: "small",
       layer: 2,
@@ -578,31 +1002,74 @@ var ChatbotHeader = /* @__PURE__ */ __name(({ chatFeedbackBox }) => {
 var ChatbotHeader_default = ChatbotHeader;
 
 // src/components/ChatbotBody/index.tsx
-import React9, { useEffect as useEffect5, useRef as useRef3 } from "react";
+import React10, { useEffect as useEffect6, useRef as useRef5 } 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};
+  padding: ${(props) => props.theme.spacing.components.medium}
+    ${(props) => props.theme.spacing.components.large}
+    ${(props) => props.theme.spacing.components.large}
+    ${(props) => props.theme.spacing.components.medium};
   display: flex;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing.components.small};
+  gap: 0;
 `;
 var Wrapper4 = styled4.div`
   overflow: hidden;
   overflow-y: auto;
   flex: 1;
   height: 100%;
+  padding-right: ${(props) => props.theme.spacing.components.small};
+
+  /* Custom scrollbar styles */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${(props) => props.theme.colors.palette.primary.normal};
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    opacity: 0.8;
+  }
+
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: ${(props) => props.theme.colors.palette.primary.normal} transparent;
 `;
 
 // src/components/MessageBalloon/index.tsx
-import React7 from "react";
+import React7, { useState as useState4, useRef as useRef3, useEffect as useEffect3 } from "react";
 
 // src/components/MessageBalloon/styles.ts
+import { mix } from "polished";
 import { css as css2, styled as styled5 } from "styled-components";
 var Time = styled5.span`
   font-size: ${(props) => props.theme.fontSizes.small};
+  color: ${(props) => props.theme.colors.content.detail};
+  white-space: nowrap;
+
+  ${({ $type }) => {
+  switch ($type) {
+    case "received":
+      return css2`
+          text-align: left;
+        `;
+    default:
+    case "sent":
+      return css2`
+          text-align: right;
+        `;
+  }
+}}
 `;
 var Balloon = styled5.div`
   padding: ${(props) => props.theme.spacing.components.small};
@@ -627,6 +1094,7 @@ var Balloon = styled5.div`
     case "received":
       return css2`
           background: ${(props) => props.theme.colors.layers[2].background};
+          color: ${(props) => props.theme.colors.content.text};
           border-top-left-radius: 0;
 
           ${$error && css2`
@@ -645,8 +1113,9 @@ var Balloon = styled5.div`
     case "sent":
       return css2`
           background: ${(props) => props.theme.colors.palette.primary.normal};
+          color: white;
           border-top-right-radius: 0;
-          margin-left: auto;
+          text-align: left;
 
           &::after {
             border-width: 0px 0px 10px 10px;
@@ -664,9 +1133,19 @@ var Balloon = styled5.div`
   flex-direction: column;
   gap: 1.3em;
 
+  p {
+    margin: 0;
+    color: inherit;
+  }
+
   a {
     color: ${(props) => props.theme.colors.palette.primary.normal};
     font-weight: semibold;
+    
+    ${({ $type }) => $type === "sent" && css2`
+        color: white;
+        text-decoration: underline;
+      `}
   }
 
   ol,
@@ -674,16 +1153,220 @@ var Balloon = styled5.div`
     display: flex;
     flex-direction: column;
     gap: 1.3em;
+    margin: 0;
+    padding-left: 1.5em;
+    color: inherit;
+  }
+
+  li {
+    color: inherit;
+  }
+
+  code {
+    background: ${(props) => props.$type === "received" ? props.theme.colors.layers[1].background : "rgba(0, 0, 0, 0.2)"};
+    color: inherit;
+    padding: 0.2em 0.4em;
+    border-radius: ${(props) => props.theme.borderRadius.small};
+    font-size: 0.9em;
+  }
+
+  pre {
+    background: ${(props) => props.$type === "received" ? props.theme.colors.layers[1].background : "rgba(0, 0, 0, 0.2)"};
+    color: inherit;
+    padding: ${(props) => props.theme.spacing.components.small};
+    border-radius: ${(props) => props.theme.borderRadius.small};
+    overflow-x: auto;
+    margin: 0;
+
+    /* Custom scrollbar styles */
+    &::-webkit-scrollbar {
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${(props) => props.theme.colors.palette.primary.normal};
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      opacity: 0.8;
+    }
+
+    /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: ${(props) => props.theme.colors.palette.primary.normal} transparent;
+  }
+
+  pre code {
+    background: transparent;
+    padding: 0;
+  }
+
+  strong,
+  b {
+    color: inherit;
+    font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+  }
+
+  em,
+  i {
+    color: inherit;
   }
 `;
 var Label = styled5.span`
   font-size: ${(props) => props.theme.fontSizes.small};
+  color: ${(props) => props.theme.colors.content.detail};
+`;
+var BalloonAndActionsWrapper = styled5.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: ${(props) => props.theme.spacing.components.medium};
+
+  ${({ $type }) => {
+  switch ($type) {
+    case "received":
+      return css2``;
+    default:
+    case "sent":
+      return css2`
+          align-items: flex-end;
+        `;
+  }
+}}
+`;
+var BalloonContainer = styled5.div`
+  position: relative;
+  width: max-content;
+  max-width: 100%;
+
+  ${({ $type }) => {
+  switch ($type) {
+    case "received":
+      return css2`
+          display: inline-block;
+        `;
+    default:
+    case "sent":
+      return css2`
+          display: block;
+          margin-left: auto;
+        `;
+  }
+}}
+`;
+var TimestampAndActionsRow = styled5.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+
+  ${({ $type }) => {
+  switch ($type) {
+    case "received":
+      return css2`
+          flex-direction: row-reverse;
+          justify-content: flex-end;
+        `;
+    default:
+    case "sent":
+      return css2`
+          flex-direction: row;
+          justify-content: flex-end;
+        `;
+  }
+}}
+`;
+var ActionsContainer = styled5.div`
+  display: flex;
+  gap: ${(props) => props.theme.spacing.components.xsmall};
+  align-items: center;
+  z-index: 10;
+  opacity: ${(props) => props.$isVisible ? 1 : 0};
+  visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  pointer-events: ${(props) => props.$isVisible ? "auto" : "none"};
+  margin: 0;
+  padding: 0;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-5px) scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  ${({ $type }) => {
+  switch ($type) {
+    case "received":
+      return css2`
+          left: 0;
+        `;
+    default:
+    case "sent":
+      return css2`
+          right: 0;
+        `;
+  }
+}}
+`;
+var ActionButton = styled5.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: ${(props) => props.theme.colors.layers[1].background};
+  color: ${(props) => props.theme.colors.content.text};
+  border-radius: ${(props) => props.theme.borderRadius.small};
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  opacity: 0.85;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    opacity: 1;
+    background: ${(props) => props.theme.colors.layers[2].background};
+    transform: scale(1.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+var Tooltip = styled5.span`
+  position: absolute;
+  white-space: nowrap;
+  padding: ${(props) => props.theme.spacing.components.xsmall}
+    ${(props) => props.theme.spacing.components.small};
+  background: ${(props) => mix(0.1, props.theme.colors.content.text, props.theme.colors.layers[2].background)};
+  color: ${(props) => props.theme.colors.content.text};
+  border-radius: ${(props) => props.theme.borderRadius.small};
+  font-size: ${(props) => props.theme.fontSizes.xsmall};
+  pointer-events: none;
+  z-index: 30;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  bottom: calc(100% + ${(props) => props.theme.spacing.components.xsmall});
+  left: 50%;
+  transform: translateX(-50%);
 `;
 var Wrapper5 = styled5.div`
   font-size: ${(props) => props.theme.fontSizes.small};
   display: flex;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing.components.xsmall};
+  gap: 2px;
 
   ${(props) => {
   switch (props.$type) {
@@ -707,6 +1390,7 @@ var formatMessageTime = /* @__PURE__ */ __name((dateUTC, currentDateUTC, locale)
 // src/components/MessageBalloon/index.tsx
 import Markdown from "react-markdown";
 import { CircleExclamationIcon } from "@ibti-tech/ui";
+import { Copy, Share2, RotateCw } from "lucide-react";
 var messageTypes = {
   assistant: "received",
   user: "sent"
@@ -716,16 +1400,204 @@ var MessageBalloon = /* @__PURE__ */ __name(({
   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, $error: data.error }, data.error && /* @__PURE__ */ React7.createElement(CircleExclamationIcon, null), /* @__PURE__ */ React7.createElement(Markdown, null, data.content)), /* @__PURE__ */ React7.createElement(Time, null, formatMessageTime(data.timestamp, currentDateUTC, locale)));
+  const texts = useChatbotTexts();
+  const { locale, makeQuestion } = useChatbot_default();
+  const [isHovered, setIsHovered] = useState4(false);
+  const [showTooltip, setShowTooltip] = useState4(null);
+  const [copied, setCopied] = useState4(false);
+  const copyTimeoutRef = useRef3(null);
+  useEffect3(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleCopy = /* @__PURE__ */ __name(async () => {
+    try {
+      await navigator.clipboard.writeText(data.content);
+      setCopied(true);
+      setShowTooltip("copy");
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = setTimeout(() => {
+        setCopied(false);
+        setShowTooltip((prev) => prev === "copy" ? null : prev);
+      }, 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }, "handleCopy");
+  const handleShare = /* @__PURE__ */ __name(async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: texts.CHATBOT_NAME,
+          text: data.content
+        });
+      } catch (err) {
+        console.error("Failed to share:", err);
+      }
+    } else {
+      handleCopy();
+    }
+  }, "handleShare");
+  const handleResend = /* @__PURE__ */ __name(() => {
+    if (data.role === "user") {
+      makeQuestion(data.content);
+    }
+  }, "handleResend");
+  return /* @__PURE__ */ React7.createElement(Wrapper5, { $type: messageType }, data.role == "assistant" && /* @__PURE__ */ React7.createElement(Label, null, texts.CHATBOT_NAME), data.role == "user" && /* @__PURE__ */ React7.createElement(Label, null, texts.USER_LABEL), /* @__PURE__ */ React7.createElement(
+    BalloonAndActionsWrapper,
+    {
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      $type: messageType
+    },
+    /* @__PURE__ */ React7.createElement(BalloonContainer, { $type: messageType }, /* @__PURE__ */ React7.createElement(Balloon, { $type: messageType, $error: data.error }, data.error && /* @__PURE__ */ React7.createElement(CircleExclamationIcon, null), /* @__PURE__ */ React7.createElement(Markdown, null, data.content))),
+    /* @__PURE__ */ React7.createElement(TimestampAndActionsRow, { $type: messageType }, /* @__PURE__ */ React7.createElement(
+      ActionsContainer,
+      {
+        $type: messageType,
+        $isVisible: isHovered,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      },
+      data.role === "user" && /* @__PURE__ */ React7.createElement(
+        ActionButton,
+        {
+          $messageType: messageType,
+          onClick: handleResend,
+          onMouseEnter: () => setShowTooltip("resend"),
+          onMouseLeave: () => setShowTooltip(null),
+          "aria-label": texts.MESSAGE_ACTIONS.RESEND
+        },
+        /* @__PURE__ */ React7.createElement(RotateCw, { size: 14 }),
+        showTooltip === "resend" && /* @__PURE__ */ React7.createElement(Tooltip, { $messageType: messageType }, texts.MESSAGE_ACTIONS.RESEND)
+      ),
+      /* @__PURE__ */ React7.createElement(
+        ActionButton,
+        {
+          $messageType: messageType,
+          onClick: handleCopy,
+          onMouseEnter: () => {
+            if (!copied) {
+              setShowTooltip("copy");
+            }
+          },
+          onMouseLeave: () => {
+            if (!copied) {
+              setShowTooltip(null);
+            }
+          },
+          "aria-label": texts.MESSAGE_ACTIONS.COPY
+        },
+        /* @__PURE__ */ React7.createElement(Copy, { size: 14 }),
+        (showTooltip === "copy" || copied) && /* @__PURE__ */ React7.createElement(Tooltip, { $messageType: messageType }, copied ? locale === "pt-BR" ? "Copiado!" : "Copied!" : texts.MESSAGE_ACTIONS.COPY)
+      ),
+      /* @__PURE__ */ React7.createElement(
+        ActionButton,
+        {
+          $messageType: messageType,
+          onClick: handleShare,
+          onMouseEnter: () => setShowTooltip("share"),
+          onMouseLeave: () => setShowTooltip(null),
+          "aria-label": texts.MESSAGE_ACTIONS.SHARE
+        },
+        /* @__PURE__ */ React7.createElement(Share2, { size: 14 }),
+        showTooltip === "share" && /* @__PURE__ */ React7.createElement(Tooltip, { $messageType: messageType }, texts.MESSAGE_ACTIONS.SHARE)
+      )
+    ), /* @__PURE__ */ React7.createElement(Time, { $type: messageType }, formatMessageTime(data.timestamp, currentDateUTC, locale)))
+  ));
 }, "MessageBalloon");
 var MessageBalloon_default = MessageBalloon;
 
+// src/components/WritingIndicator/index.tsx
+import React8 from "react";
+
+// src/components/WritingIndicator/styles.ts
+import { keyframes, styled as styled6 } from "styled-components";
+var dotAnimation = keyframes`
+  0%, 20% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  80%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+`;
+var Dots = styled6.span`
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: 4px;
+`;
+var Dot = styled6.span`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: ${dotAnimation} 1.4s ease-in-out infinite;
+  animation-delay: ${(props) => props.$delay}s;
+`;
+var Text = styled6.span`
+  display: inline-block;
+`;
+var Balloon2 = styled6.div`
+  padding: ${(props) => props.theme.spacing.components.small};
+  width: max-content;
+  max-width: 100%;
+  border-radius: ${(props) => props.theme.borderRadius.medium};
+  border-top-left-radius: 0;
+  position: relative;
+  line-height: 1.5em;
+  display: flex;
+  align-items: center;
+  background: ${(props) => props.theme.colors.layers[2].background};
+  color: ${(props) => props.theme.colors.content.text};
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0px 10px 10px 0;
+    border-color: transparent
+      ${(props) => props.theme.colors.layers[2].background} transparent
+      transparent;
+    top: 0;
+    left: -10px;
+  }
+`;
+var Label2 = styled6.span`
+  font-size: ${(props) => props.theme.fontSizes.small};
+`;
+var Wrapper6 = styled6.div`
+  font-size: ${(props) => props.theme.fontSizes.small};
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.components.xsmall};
+`;
+
+// src/components/WritingIndicator/index.tsx
+var WritingIndicator = /* @__PURE__ */ __name(() => {
+  const texts = useChatbotTexts();
+  const { locale } = useChatbot();
+  return /* @__PURE__ */ React8.createElement(Wrapper6, null, /* @__PURE__ */ React8.createElement(Label2, null, texts.CHATBOT_NAME), /* @__PURE__ */ React8.createElement(Balloon2, null, /* @__PURE__ */ React8.createElement(Text, null, texts.WRITING_MESSAGE), /* @__PURE__ */ React8.createElement(Dots, null, /* @__PURE__ */ React8.createElement(Dot, { $delay: 0 }), /* @__PURE__ */ React8.createElement(Dot, { $delay: 0.2 }), /* @__PURE__ */ React8.createElement(Dot, { $delay: 0.4 }))));
+}, "WritingIndicator");
+var WritingIndicator_default = WritingIndicator;
+
 // src/hooks/useElementScroll.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 var useElementScroll = /* @__PURE__ */ __name((elementRef) => {
-  const [scrollProgress, setScrollProgress] = useState4(0);
+  const [scrollProgress, setScrollProgress] = useState5(0);
   const calculateScrollPercentage = /* @__PURE__ */ __name(() => {
     if (!elementRef.current) return;
     const element = elementRef.current;
@@ -737,7 +1609,7 @@ var useElementScroll = /* @__PURE__ */ __name((elementRef) => {
     const progressValue = Math.min(100, Math.max(0, scrolled));
     setScrollProgress(isNaN(progressValue) ? 100 : progressValue);
   }, "calculateScrollPercentage");
-  useEffect3(() => {
+  useEffect4(() => {
     if (!elementRef.current) return;
     const handleIntersection = /* @__PURE__ */ __name(() => {
       calculateScrollPercentage();
@@ -772,12 +1644,12 @@ var useElementScroll = /* @__PURE__ */ __name((elementRef) => {
 }, "useElementScroll");
 
 // src/hooks/useUpdatedTime.ts
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 var useUpdatedTime = /* @__PURE__ */ __name(({
   intervalInSeconds
 }) => {
-  const [date, setDate] = useState5(/* @__PURE__ */ new Date());
-  useEffect4(() => {
+  const [date, setDate] = useState6(/* @__PURE__ */ new Date());
+  useEffect5(() => {
     const time = 1e3 * intervalInSeconds;
     const interval = setInterval(() => {
       const now = /* @__PURE__ */ new Date();
@@ -791,40 +1663,40 @@ var useUpdatedTime = /* @__PURE__ */ __name(({
 }, "useUpdatedTime");
 
 // src/components/SuggestedQuestions/index.tsx
-import React8 from "react";
+import React9 from "react";
 
 // src/components/SuggestedQuestions/styles.ts
 import { Button as Button2 } from "@ibti-tech/ui";
-import { styled as styled6 } from "styled-components";
-var QuestionButton = styled6(Button2)`
+import { styled as styled7 } from "styled-components";
+var QuestionButton = styled7(Button2)`
   text-align: left;
   justify-content: flex-start;
   height: auto;
   padding: ${(props) => props.theme.spacing.components.small};
 `;
-var QuestionListItem = styled6.li``;
-var QuestionList = styled6.ul`
+var QuestionListItem = styled7.li``;
+var QuestionList = styled7.ul`
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.theme.spacing.components.small};
 `;
-var Title = styled6.span`
+var Title = styled7.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`
+var Wrapper7 = styled7.div`
   padding: ${(props) => props.theme.spacing.components.medium};
 `;
 
 // src/components/SuggestedQuestions/index.tsx
 var SuggestedQuestions = /* @__PURE__ */ __name(({}) => {
-  const i18n2 = useI18n();
+  const texts = useChatbotTexts();
   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(
+  return /* @__PURE__ */ React9.createElement(Wrapper7, null, /* @__PURE__ */ React9.createElement(Title, null, texts.SUGGESTED_QUESTIONS.TITLE), /* @__PURE__ */ React9.createElement(QuestionList, null, suggestedQuestions.data.map((question) => /* @__PURE__ */ React9.createElement(QuestionListItem, { key: question }, /* @__PURE__ */ React9.createElement(
     QuestionButton,
     {
       label: question,
@@ -843,11 +1715,11 @@ var SuggestedQuestions_default = SuggestedQuestions;
 
 // src/components/ChatbotBody/index.tsx
 var ChatbotBody = /* @__PURE__ */ __name(({}) => {
-  const { chatMessages, suggestedQuestions } = useChatbot();
-  const scrollableElementRef = useRef3(null);
+  const { chatMessages, suggestedQuestions, loading } = useChatbot();
+  const scrollableElementRef = useRef5(null);
   const { scrollProgress, scrollToEnd } = useElementScroll(scrollableElementRef);
   const { dateUTC } = useUpdatedTime({ intervalInSeconds: 15 });
-  useEffect5(() => {
+  useEffect6(() => {
     if (scrollProgress > 85) scrollToEnd();
     document.addEventListener(
       CUSTOM_EVENT_NAMES.ASSISTANT_ANSWER_FINISHED,
@@ -860,23 +1732,28 @@ var ChatbotBody = /* @__PURE__ */ __name(({}) => {
       );
     };
   }, [chatMessages, suggestedQuestions]);
-  return /* @__PURE__ */ React9.createElement(Wrapper4, { ref: scrollableElementRef }, /* @__PURE__ */ React9.createElement(MessagesList, null, chatMessages.map((msgData) => /* @__PURE__ */ React9.createElement(
+  useEffect6(() => {
+    if (loading) {
+      scrollToEnd();
+    }
+  }, [loading, scrollToEnd]);
+  return /* @__PURE__ */ React10.createElement(Wrapper4, { ref: scrollableElementRef }, /* @__PURE__ */ React10.createElement(MessagesList, null, chatMessages.map((msgData) => /* @__PURE__ */ React10.createElement(
     MessageBalloon_default,
     {
       key: msgData.id,
       data: msgData,
       currentDateUTC: dateUTC
     }
-  ))), /* @__PURE__ */ React9.createElement(SuggestedQuestions_default, null));
+  )), loading && /* @__PURE__ */ React10.createElement(WritingIndicator_default, null)), /* @__PURE__ */ React10.createElement(SuggestedQuestions_default, null));
 }, "ChatbotBody");
 var ChatbotBody_default = ChatbotBody;
 
 // src/components/ChatbotFooter/index.tsx
-import React10, { useState as useState6 } from "react";
+import React11, { useState as useState7, useRef as useRef6, useEffect as useEffect7 } from "react";
 
 // src/components/ChatbotFooter/styles.ts
-import { styled as styled7 } from "styled-components";
-var LoadingSuggestedQuestions = styled7.span`
+import { styled as styled8 } from "styled-components";
+var LoadingSuggestedQuestions = styled8.span`
   display: flex;
   align-items: center;
   gap: ${(props) => props.theme.spacing.components.small};
@@ -884,11 +1761,84 @@ var LoadingSuggestedQuestions = styled7.span`
   padding: ${(props) => props.theme.spacing.components.small}
     ${(props) => props.theme.spacing.components.medium};
 `;
-var Form = styled7.form`
+var Form = styled8.form`
   display: flex;
   gap: ${(props) => props.theme.spacing.components.small};
+
+  /* Remove border from submit button */
+  button[type='submit'] {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Chatbot textarea styles */
+  .textareaField {
+    font-family: inherit !important;
+
+    &,
+    *,
+    textarea {
+      font-size: ${(props) => props.theme.fontSizes.medium} !important;
+      font-family: inherit !important;
+    }
+
+    textarea {
+      border-radius: ${(props) => props.theme.borderRadius.medium} !important;
+      border: 1px solid ${(props) => props.theme.colors.layers[2].border} !important;
+      padding: ${(props) => props.theme.spacing.components.small}
+        ${(props) => props.theme.spacing.components.medium} !important;
+      min-height: 40px !important;
+      max-height: 200px !important;
+      resize: none !important;
+      line-height: 1.5 !important;
+      width: 100% !important;
+      box-sizing: border-box !important;
+      font-family: inherit !important;
+      overflow-y: auto !important;
+      overflow-x: hidden !important;
+
+      /* Custom scrollbar styles */
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: ${(props) => props.theme.colors.palette.primary.normal} !important;
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        opacity: 0.8;
+      }
+
+      /* Firefox */
+      scrollbar-width: thin !important;
+      scrollbar-color: ${(props) => props.theme.colors.palette.primary.normal} transparent !important;
+
+      &:focus {
+        outline: none !important;
+        border-color: ${(props) => props.theme.colors.palette.primary.normal} !important;
+      }
+
+      &::placeholder {
+        color: ${(props) => props.theme.colors.content.detail} !important;
+        font-size: ${(props) => props.theme.fontSizes.medium} !important;
+        font-family: inherit !important;
+      }
+    }
+
+    &:focus-within textarea {
+      outline: none !important;
+      border-color: ${(props) => props.theme.colors.palette.primary.normal} !important;
+    }
+  }
 `;
-var Wrapper7 = styled7.div`
+var Wrapper8 = styled8.div`
   padding: ${(props) => props.theme.spacing.components.small};
 `;
 
@@ -901,31 +1851,60 @@ import {
 } from "@ibti-tech/ui";
 var ChatbotFooter = /* @__PURE__ */ __name(({}) => {
   const { makeQuestion, loading, writing, suggestedQuestions } = useChatbot_default();
-  const [questionInput, setQuestionInput] = useState6("");
-  const i18nTerms = useI18n();
+  const [questionInput, setQuestionInput] = useState7("");
+  const wrapperRef = useRef6(null);
+  const texts = useChatbotTexts();
   const handleSubmit = /* @__PURE__ */ __name(async (e) => {
     e.preventDefault();
+    if (!questionInput.trim() || loading || writing) {
+      return;
+    }
+    const questionToSend = questionInput.trim();
     setQuestionInput("");
-    await makeQuestion(questionInput);
+    await makeQuestion(questionToSend);
   }, "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(
+  useEffect7(() => {
+    const textarea = wrapperRef.current?.querySelector(
+      ".textareaField textarea"
+    );
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+      const handleKeyDown = /* @__PURE__ */ __name((e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          if (questionInput.trim() && !loading && !writing) {
+            const form = textarea.closest("form");
+            if (form) {
+              form.requestSubmit();
+            }
+          }
+        }
+      }, "handleKeyDown");
+      textarea.addEventListener("keydown", handleKeyDown);
+      return () => {
+        textarea.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [questionInput, loading, writing]);
+  return /* @__PURE__ */ React11.createElement(Wrapper8, { "data-testid": "chatbot-footer", ref: wrapperRef }, suggestedQuestions.loading && /* @__PURE__ */ React11.createElement(LoadingSuggestedQuestions, null, /* @__PURE__ */ React11.createElement(Spinner, { size: "extra-small" }), texts.SUGGESTED_QUESTIONS.LOADING), /* @__PURE__ */ React11.createElement(Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React11.createElement(
     TextArea,
     {
       fillWidth: true,
       disabled: loading || writing,
       value: questionInput,
       onChange: (e) => setQuestionInput(e.target.value),
-      placeholder: i18nTerms.INPUT_PLACEHOLDER,
+      placeholder: texts.INPUT_PLACEHOLDER,
       className: "textareaField",
       rows: 1,
       layer: 2
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     IconButton,
     {
       icon: ArrowUpIcon,
       loading,
-      disabled: loading || writing || !questionInput,
+      disabled: loading || writing || !questionInput.trim(),
       type: "submit"
     }
   )));
@@ -934,13 +1913,11 @@ 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`
+import { css as css4, styled as styled9 } from "styled-components";
+var ButtonWrapper = styled9.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};
@@ -950,6 +1927,21 @@ var ButtonWrapper = styled8.button`
   justify-content: center;
   gap: ${(props) => props.theme.spacing.components.small};
   border-radius: ${(props) => props.theme.borderRadius.medium};
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  flex-shrink: 0;
+
+  ${(props) => !props.$opened && props.$verticalPosition === "bottom" && css4`
+      background-color: ${props.theme.colors.layers[1].background};
+      cursor: pointer;
+      min-height: 32px;
+      height: 32px;
+      width: 100%;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      border-radius: ${(props2) => props2.theme.borderRadius.medium} ${(props2) => props2.theme.borderRadius.medium} 0 0;
+    `}
 
   ${screens2.tablet} {
     transition: ${(props) => props.theme.transitionDurations.default};
@@ -962,50 +1954,116 @@ var ButtonWrapper = styled8.button`
 `;
 
 // src/components/ChatbotToggle/index.tsx
-import React11 from "react";
+import React12 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));
+var ChatbotToggle = /* @__PURE__ */ __name(({
+  verticalPosition = "bottom",
+  opened: openedProp
+}) => {
+  const { opened: openedContext, openedToggle } = useChatbot_default();
+  const opened = openedProp ?? openedContext;
+  const texts = useChatbotTexts();
+  const toggleText = (opened ? texts.CHATBOT_BAR.CLOSE : texts.CHATBOT_BAR.OPEN).replace("{{CHATBOT_NAME}}", texts.CHATBOT_NAME);
+  const Chevron = verticalPosition === "top" ? opened ? ChevronUpIcon : ChevronDownIcon : opened ? ChevronDownIcon : ChevronUpIcon;
+  return /* @__PURE__ */ React12.createElement(
+    ButtonWrapper,
+    {
+      onClick: openedToggle,
+      $opened: opened,
+      $verticalPosition: verticalPosition
+    },
+    /* @__PURE__ */ React12.createElement(BotIcon, null),
+    /* @__PURE__ */ React12.createElement("span", null, toggleText),
+    /* @__PURE__ */ React12.createElement(Chevron, null)
+  );
 }, "ChatbotToggle");
 var ChatbotToggle_default = ChatbotToggle;
 
 // src/components/ChatUserFeedbackRating/index.tsx
-import React12, { useState as useState7 } from "react";
+import React13, { useState as useState8 } from "react";
 import { Button as Button4, RatingStars, TextArea as TextArea2 } 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`
+import { css as css5, styled as styled10 } from "styled-components";
+var ActionButtons = styled10.div`
   display: flex;
   justify-content: flex-end;
   gap: ${(props) => props.theme.spacing.components.small};
+
+  /* Remove border from submit button */
+  button[type='submit'] {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
 `;
-var Form2 = styled9.form`
+var Form2 = styled10.form`
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.theme.spacing.components.medium};
+
+  /* Feedback textarea styles */
+  .feedbackTextarea {
+    font-family: inherit !important;
+
+    &,
+    *,
+    textarea {
+      font-size: ${(props) => props.theme.fontSizes.medium} !important;
+      font-family: inherit !important;
+    }
+
+    textarea {
+      border-radius: ${(props) => props.theme.borderRadius.medium} !important;
+      border: 1px solid ${(props) => props.theme.colors.layers[2].border} !important;
+      padding: ${(props) => props.theme.spacing.components.small}
+        ${(props) => props.theme.spacing.components.medium} !important;
+      min-height: 40px !important;
+      resize: none !important;
+      line-height: 1.5 !important;
+      width: 100% !important;
+      box-sizing: border-box !important;
+      font-family: inherit !important;
+      color: ${(props) => props.theme.colors.content.text} !important;
+      background-color: ${(props) => props.theme.colors.layers[2].background} !important;
+
+      &:focus {
+        outline: none !important;
+        border-color: ${(props) => props.theme.colors.palette.primary.normal} !important;
+      }
+
+      &::placeholder {
+        color: ${(props) => props.theme.colors.content.detail} !important;
+        font-size: ${(props) => props.theme.fontSizes.medium} !important;
+        font-family: inherit !important;
+      }
+    }
+
+    &:focus-within textarea {
+      outline: none !important;
+      border-color: ${(props) => props.theme.colors.palette.primary.normal} !important;
+    }
+  }
 `;
-var Description = styled9.div`
+var Description = styled10.div`
   font-size: ${(props) => props.theme.fontSizes.small};
+  color: ${(props) => props.theme.colors.content.text};
   margin-bottom: ${(props) => props.theme.spacing.components.medium};
 `;
-var Title2 = styled9.span`
+var Title2 = styled10.span`
   display: block;
   font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+  color: ${(props) => props.theme.colors.content.text};
   margin-bottom: ${(props) => props.theme.spacing.components.small};
 `;
-var Box = styled9(CardBase)`
+var Box = styled10(CardBase)`
   width: 100%;
   height: max-content;
   padding: ${(props) => props.theme.spacing.components.medium};
   transition: ${(props) => props.theme.transitionDurations.default};
 `;
-var Wrapper8 = styled9.div`
+var Wrapper9 = styled10.div`
   position: absolute;
   z-index: 1;
   left: 0;
@@ -1018,11 +2076,11 @@ var Wrapper8 = styled9.div`
   padding: ${(props) => props.theme.spacing.components.medium};
   transition: ${(props) => props.theme.transitionDurations.default};
 
-  ${(props) => props.$opened ? css3`
+  ${(props) => props.$opened ? css5`
           background-color: rgba(0, 0, 0, 0.15);
           backdrop-filter: blur(3px);
           opacity: 1;
-        ` : css3`
+        ` : css5`
           pointer-events: none;
           opacity: 0;
 
@@ -1037,9 +2095,9 @@ var ChatUserFeedbackRating = /* @__PURE__ */ __name(({
   chatFeedbackBox
 }) => {
   const chatbot = useChatbot_default();
-  const [ratingValue, setRatingValue] = useState7(5);
-  const [descriptionValue, setDescriptionValue] = useState7("");
-  const i18nTerms = useI18n();
+  const [ratingValue, setRatingValue] = useState8(5);
+  const [descriptionValue, setDescriptionValue] = useState8("");
+  const texts = useChatbotTexts();
   const handleSubmit = /* @__PURE__ */ __name((e) => {
     e.preventDefault();
     chatFeedbackBox.sendUserRating({
@@ -1047,35 +2105,36 @@ var ChatUserFeedbackRating = /* @__PURE__ */ __name(({
       ratingScore: ratingValue
     });
   }, "handleSubmit");
-  return /* @__PURE__ */ React12.createElement(Wrapper8, { $opened: chatFeedbackBox.opened && chatbot.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(
+  return /* @__PURE__ */ React13.createElement(Wrapper9, { $opened: chatFeedbackBox.opened && chatbot.opened }, /* @__PURE__ */ React13.createElement(Box, null, /* @__PURE__ */ React13.createElement(Title2, null, texts.CHAT_FEEDBACK.TITLE), /* @__PURE__ */ React13.createElement(Description, null, texts.CHAT_FEEDBACK.DESCRIPTION), /* @__PURE__ */ React13.createElement(Form2, { onSubmit: handleSubmit }, /* @__PURE__ */ React13.createElement(
     RatingStars,
     {
       value: ratingValue,
       setValue: setRatingValue,
       layer: 2
     }
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     TextArea2,
     {
       layer: 2,
-      placeholder: i18nTerms.CHAT_FEEDBACK.MESSAGE_FIELD,
+      placeholder: texts.CHAT_FEEDBACK.MESSAGE_FIELD,
       fillWidth: true,
       value: descriptionValue,
-      onChange: (e) => setDescriptionValue(e.target.value)
+      onChange: (e) => setDescriptionValue(e.target.value),
+      className: "feedbackTextarea"
     }
-  ), /* @__PURE__ */ React12.createElement(ActionButtons, null, /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(ActionButtons, null, /* @__PURE__ */ React13.createElement(
     Button4,
     {
       onClick: chatFeedbackBox.close,
-      label: i18nTerms.CHAT_FEEDBACK.CLOSE_BUTTON,
+      label: texts.CHAT_FEEDBACK.CLOSE_BUTTON,
       size: "small",
       variant: "layerBased"
     }
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     Button4,
     {
       type: "submit",
-      label: i18nTerms.CHAT_FEEDBACK.SUBMIT_BUTTON,
+      label: texts.CHAT_FEEDBACK.SUBMIT_BUTTON,
       size: "small",
       loading: chatFeedbackBox.loading
     }
@@ -1083,15 +2142,12 @@ var ChatUserFeedbackRating = /* @__PURE__ */ __name(({
 }, "ChatUserFeedbackRating");
 
 // src/contexts/Chatbot/useChatFeedbackBox.ts
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 var useChatFeedbackBox = /* @__PURE__ */ __name(() => {
   const { chatMessages, apiURL, locale } = useChatbot_default();
-  const [rated, setRated] = useState8(false);
-  const [opened, setOpened] = useState8(false);
-  const [loading, setLoading] = useState8(false);
-  useEffect6(() => {
-    if (chatMessages.length > 6 && !rated) setOpened(true);
-  }, [chatMessages]);
+  const [rated, setRated] = useState9(false);
+  const [opened, setOpened] = useState9(false);
+  const [loading, setLoading] = useState9(false);
   const open = /* @__PURE__ */ __name(() => {
     setOpened(true);
   }, "open");
@@ -1131,42 +2187,93 @@ var useChatFeedbackBox = /* @__PURE__ */ __name(() => {
 }, "useChatFeedbackBox");
 
 // src/components/ChatbotDevice/index.tsx
-var ChatbotDevice = /* @__PURE__ */ __name(({}) => {
+var ChatbotDevice = /* @__PURE__ */ __name(({
+  verticalPosition = "bottom"
+}) => {
   const { opened } = useChatbot_default();
   const chatFeedbackBox = useChatFeedbackBox();
-  return /* @__PURE__ */ React13.createElement(Wrapper, { $opened: opened }, /* @__PURE__ */ React13.createElement(ChatUserFeedbackRating, { chatFeedbackBox }), /* @__PURE__ */ React13.createElement(ChatbotHeader_default, { chatFeedbackBox }), /* @__PURE__ */ React13.createElement(ChatbotBody_default, null), /* @__PURE__ */ React13.createElement(ChatbotFooter_default, null), /* @__PURE__ */ React13.createElement(ChatbotToggle_default, null));
+  return /* @__PURE__ */ React14.createElement(Wrapper, { $opened: opened, $verticalPosition: verticalPosition }, /* @__PURE__ */ React14.createElement(ChatUserFeedbackRating, { chatFeedbackBox }), /* @__PURE__ */ React14.createElement(ChatbotHeader_default, { chatFeedbackBox }), /* @__PURE__ */ React14.createElement(ChatbotBody_default, null), /* @__PURE__ */ React14.createElement(ChatbotFooter_default, null), /* @__PURE__ */ React14.createElement(ChatbotToggle_default, { verticalPosition, opened }));
 }, "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)`
+import { css as css6, styled as styled11 } from "styled-components";
+var BarContainer = styled11(Container)`
   @media screen and (max-width: ${breakpoints3.tablet}px) {
     padding: 0;
   }
 
   ${screens3.tablet} {
     display: flex;
-    justify-content: flex-end;
+    justify-content: ${(props) => props.$horizontalPosition === "right" ? "flex-end" : "flex-start"};
+    
+    ${(props) => !props.$opened && props.$verticalPosition === "bottom" ? css6`
+            width: ${breakpoints3.mobileL}px;
+            max-width: ${breakpoints3.mobileL}px;
+            min-width: ${breakpoints3.mobileL}px;
+            padding-left: 0;
+          ` : ""}
   }
 `;
-var Wrapper9 = styled10.div`
+var Wrapper10 = styled11.div`
+  position: fixed;
   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};
+  pointer-events: none;
+
+  ${(props) => props.$verticalPosition === "top" ? css6`
+          top: 0;
+          padding-top: ${(props2) => props2.theme.spacing.components.xsmall};
+        ` : css6`
+          bottom: 0;
+          padding-bottom: ${(props2) => props2.theme.spacing.components.xsmall};
+          
+          @media screen and (max-width: ${breakpoints3.tablet}px) {
+            ${props.$opened ? css6`
+                  padding-bottom: 0;
+                ` : ""}
+          }
+        `}
+
+  ${screens3.tablet} {
+    width: auto;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    ${(props) => props.$horizontalPosition === "right" ? css6`
+            right: ${(props2) => props2.theme.spacing.components.medium};
+          ` : css6`
+            left: ${(props2) => props2.theme.spacing.components.medium};
+          `}
+  }
 `;
 
 // 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)));
+import React15 from "react";
+var ChatbotBar = /* @__PURE__ */ __name(({
+  verticalPosition = "bottom",
+  horizontalPosition = "right"
+}) => {
+  const { opened } = useChatbot_default();
+  return /* @__PURE__ */ React15.createElement(
+    Wrapper10,
+    {
+      $verticalPosition: verticalPosition,
+      $horizontalPosition: horizontalPosition,
+      $opened: opened
+    },
+    /* @__PURE__ */ React15.createElement(
+      BarContainer,
+      {
+        $horizontalPosition: horizontalPosition,
+        $opened: opened,
+        $verticalPosition: verticalPosition
+      },
+      /* @__PURE__ */ React15.createElement(ChatbotDevice_default, { verticalPosition })
+    )
+  );
 }, "ChatbotBar");
 export {
   ChatbotBar,