@ibti-tech/chatbot 0.5.6 → 0.5.8

package/README.md

@@ -276,12 +276,186 @@ npm install react react-dom lodash nookies
 
 ## 📡 Backend API
 
-The chatbot expects the backend API to be configured and accessible at the provided URL. The API must implement the necessary endpoints for:
+The chatbot expects the backend API to be configured and accessible at the provided URL. The API must implement the following endpoints:
 
-- Sending messages
-- Receiving responses
-- Managing conversation history
-- Suggested questions
+### Required Endpoints
+
+#### 1. `GET /chat/welcome?locale={locale}`
+
+**Purpose**: Retrieves the welcome message and checks API health/availability.
+
+**Query Parameters**:
+- `locale` (required): The locale code (`'pt-BR'` or `'en'`)
+
+**Response**:
+```json
+{
+  "welcomeMessage": "Hello! How can I help you today?"
+}
+```
+
+**Status Codes**:
+- `200 OK`: API is available and welcome message is returned
+- `4xx/5xx`: API is considered unavailable
+
+**Notes**:
+- This endpoint is used for health checks (via `HEAD` or `GET` requests)
+- The chatbot uses this to determine connection status
+- Should return a welcome message appropriate for the specified locale
+
+---
+
+#### 2. `POST /chat/completion?locale={locale}`
+
+**Purpose**: Sends a chat message and receives a streaming response from the AI assistant.
+
+**Query Parameters**:
+- `locale` (required): The locale code (`'pt-BR'` or `'en'`)
+
+**Request Body**:
+```json
+{
+  "context": [
+    {
+      "role": "user",
+      "content": "What is artificial intelligence?"
+    },
+    {
+      "role": "assistant",
+      "content": "Artificial intelligence (AI) is..."
+    },
+    {
+      "role": "user",
+      "content": "Tell me more about machine learning"
+    }
+  ]
+}
+```
+
+**Request Body Schema**:
+- `context` (required, array): Array of chat messages representing the conversation history
+  - Each item must have:
+    - `role` (required, string): Either `"user"` or `"assistant"`
+    - `content` (required, string): The message content
+  - The array must not be empty
+  - The last message should typically be from the `"user"` role
+
+**Response**:
+- **Content-Type**: `text/event-stream`
+- **Format**: Server-Sent Events (SSE) stream
+- **Body**: Plain text chunks that are concatenated to form the complete response
+
+**Response Headers**:
+```
+Content-Type: text/event-stream
+Cache-Control: no-cache
+Connection: keep-alive
+```
+
+**Status Codes**:
+- `200 OK`: Stream started successfully
+- `429 Too Many Requests`: Rate limit exceeded (should send error message via stream before closing)
+- `4xx/5xx`: Error occurred
+
+**Streaming Behavior**:
+- The response is sent as a continuous stream of text chunks
+- Each chunk is immediately displayed to the user as it arrives
+- The stream ends when the complete response is sent
+- The chatbot accumulates all chunks to form the final message
+
+**Error Handling**:
+- For `429` errors, the API should send a friendly error message via the stream before closing:
+  ```json
+  {"error": "Sorry, too many requests were made. Please try again in a few moments. 😊"}
+  ```
+- For other errors, the stream should be closed and an appropriate HTTP status code returned
+
+**Example Flow**:
+1. Frontend sends POST request with conversation context
+2. Backend starts streaming response chunks
+3. Frontend receives chunks and displays them incrementally
+4. Stream completes when response is finished
+5. Frontend saves the complete message to conversation history
+
+---
+
+#### 3. `POST /chat/feedback`
+
+**Purpose**: Submits user feedback about a chatbot response (rating and optional message).
+
+**Request Body**:
+```json
+{
+  "rating_score": 5,
+  "chat_context": [
+    {
+      "role": "user",
+      "content": "What is AI?"
+    },
+    {
+      "role": "assistant",
+      "content": "Artificial intelligence is..."
+    }
+  ],
+  "locale": "pt-BR",
+  "message": "Very helpful response!"
+}
+```
+
+**Request Body Schema**:
+- `rating_score` (required, number): Rating from 1 to 5 (inclusive)
+  - Valid values: `1`, `2`, `3`, `4`, `5`
+- `chat_context` (required, array): The conversation context that was rated
+  - Same structure as in `/chat/completion` endpoint
+  - Must not be empty
+- `locale` (required, string): The locale code (`'pt-BR'` or `'en'`)
+- `message` (optional, string): Optional feedback message from the user
+
+**Response**:
+- **Status Code**: `200 OK` or `201 Created` (implementation dependent)
+- **Body**: Typically empty or a success confirmation
+
+**Status Codes**:
+- `200 OK` / `201 Created`: Feedback submitted successfully
+- `400 Bad Request`: Invalid request body (invalid rating, missing fields, etc.)
+- `4xx/5xx`: Other errors
+
+**Notes**:
+- This endpoint is called when a user rates a chatbot response
+- The feedback is typically stored for analytics and improvement purposes
+- The endpoint should handle the request asynchronously if possible to avoid blocking the UI
+
+---
+
+### API Requirements Summary
+
+| Endpoint | Method | Purpose | Streaming | Required |
+|----------|--------|---------|-----------|----------|
+| `/chat/welcome` | `GET` | Health check & welcome message | ❌ | ✅ |
+| `/chat/completion` | `POST` | Send message & receive response | ✅ | ✅ |
+| `/chat/feedback` | `POST` | Submit user feedback | ❌ | ✅ |
+
+### Implementation Notes
+
+1. **CORS**: The API must allow cross-origin requests from the frontend domain
+2. **Locale Support**: All endpoints should respect the `locale` parameter and return appropriate content
+3. **Error Handling**: Provide clear error messages in the appropriate locale
+4. **Streaming**: The `/chat/completion` endpoint must support Server-Sent Events (SSE) for real-time response streaming
+5. **Rate Limiting**: Consider implementing rate limiting and return `429` status when exceeded
+6. **Content-Type**: 
+   - Use `application/json` for JSON endpoints
+   - Use `text/event-stream` for streaming endpoints
+
+### Example API Base URL
+
+```jsx
+<ChatbotProvider
+  apiURL="https://api.example.com"  // Base URL without trailing slash
+  // ...
+/>
+```
+
+The chatbot will automatically append the endpoint paths (e.g., `/chat/welcome`, `/chat/completion`, `/chat/feedback`) to this base URL.
 
 ## 🐛 Issues and Support
 

package/dist/index.d.ts

@@ -37,7 +37,7 @@ declare module '@ibti-tech/chatbot/components/ChatUserFeedbackRating/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatUserFeedbackRating/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatUserFeedbackRating/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,6NAWzB,CAAA;AAED,eAAO,MAAM,IAAI,mOA+ChB,CAAA;AAED,eAAO,MAAM,WAAW,6NAIvB,CAAA;AAED,eAAO,MAAM,KAAK,+NAKjB,CAAA;AAED,eAAO,MAAM,GAAG;;;;;;;wRAKf,CAAA;AAED,eAAO,MAAM,OAAO;aAAyB,OAAO;YA4BnD,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatUserFeedbackRating/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,6NAWzB,CAAA;AAED,eAAO,MAAM,IAAI,mOAkDhB,CAAA;AAED,eAAO,MAAM,WAAW,6NAKvB,CAAA;AAED,eAAO,MAAM,KAAK,+NAKjB,CAAA;AAED,eAAO,MAAM,GAAG;;;;;;;wRAef,CAAA;AAED,eAAO,MAAM,OAAO;aAAyB,OAAO;YA4BnD,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBar/index' {
   import React from 'react';
@@ -69,7 +69,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBar/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAW,MAAM,eAAe,CAAA;AAIpD,eAAO,MAAM,YAAY;;oBAGH,kBACnB;;yBAHoB,MAAM,GAAG,OAAO;aAC5B,OAAO;uBACG,KAAK,GAAG,QAAQ;iMAqBpC,CAAA;AAED,eAAO,MAAM,OAAO;uBACC,KAAK,GAAG,QAAQ;yBACd,MAAM,GAAG,OAAO;aAC5B,OAAO;YAwCjB,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAW,MAAM,eAAe,CAAA;AAIpD,eAAO,MAAM,YAAY;;oBAGH,kBACnB;;yBAHoB,MAAM,GAAG,OAAO;aAC5B,OAAO;uBACG,KAAK,GAAG,QAAQ;iMAgCpC,CAAA;AAED,eAAO,MAAM,OAAO;uBACC,KAAK,GAAG,QAAQ;yBACd,MAAM,GAAG,OAAO;aAC5B,OAAO;YAwCjB,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBody/index' {
   import React from 'react';
@@ -88,7 +88,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotBody/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBody/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBody/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,6NAAe,CAAA;AAExC,eAAO,MAAM,YAAY,iOAQxB,CAAA;AAED,eAAO,MAAM,OAAO,6NA4BnB,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBody/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,6NAAe,CAAA;AAExC,eAAO,MAAM,YAAY,iOAQxB,CAAA;AAED,eAAO,MAAM,OAAO,6NAsCnB,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotDevice/index' {
   import React from 'react';
@@ -110,7 +110,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotDevice/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;aACT,OAAO;uBACG,KAAK,GAAG,QAAQ;YAgEpC,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotDevice/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;aACT,OAAO;uBACG,KAAK,GAAG,QAAQ;YA0EpC,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotFooter/index' {
   import React from 'react';
@@ -129,7 +129,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotFooter/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotFooter/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotFooter/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,+NAOrC,CAAA;AAED,eAAO,MAAM,IAAI,mOA4EhB,CAAA;AAED,eAAO,MAAM,OAAO,6NAEnB,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotFooter/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,+NAQrC,CAAA;AAED,eAAO,MAAM,IAAI,mOA+EhB,CAAA;AAED,eAAO,MAAM,OAAO,6NAYnB,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotHeader/index' {
   import React from 'react';
@@ -152,7 +152,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotHeader/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotHeader/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotHeader/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,+NAGhB,CAAA;AAED,eAAO,MAAM,WAAW,6NAIvB,CAAA;AAED,eAAO,MAAM,YAAY,+NAaxB,CAAA;AAED,eAAO,MAAM,OAAO,6NAMnB,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotHeader/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,+NAGhB,CAAA;AAED,eAAO,MAAM,WAAW,6NAIvB,CAAA;AAED,eAAO,MAAM,YAAY,+NAaxB,CAAA;AAED,eAAO,MAAM,OAAO,6NAgBnB,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotStatusLabel/index' {
   import React from 'react';
@@ -171,7 +171,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotStatusLabel/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotStatusLabel/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotStatusLabel/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;kBAA+B,MAAM;YAaxD,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotStatusLabel/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;kBAA+B,MAAM;YAoBxD,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotToggle/index' {
   import React from 'react';
@@ -194,7 +194,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotToggle/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;aACf,OAAO;uBACG,KAAK,GAAG,QAAQ;YA0CpC,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotToggle/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;aACf,OAAO;uBACG,KAAK,GAAG,QAAQ;YAgDpC,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/MessageBalloon/index' {
   import React from 'react';
@@ -244,7 +244,7 @@ declare module '@ibti-tech/chatbot/components/MessageBalloon/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/MessageBalloon/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/MessageBalloon/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;WAAwB,UAAU,GAAG,MAAM;YAkB3D,CAAA;AAED,eAAO,MAAM,OAAO;WACX,UAAU,GAAG,MAAM;aACjB,OAAO;YA2JjB,CAAA;AAED,eAAO,MAAM,KAAK,+NAGjB,CAAA;AAED,eAAO,MAAM,wBAAwB;WAAuB,UAAU,GAAG,MAAM;YAiB9E,CAAA;AAED,eAAO,MAAM,gBAAgB;WAAuB,UAAU,GAAG,MAAM;YAmBtE,CAAA;AAED,eAAO,MAAM,sBAAsB;WAAuB,UAAU,GAAG,MAAM;YAqB5E,CAAA;AAED,eAAO,MAAM,gBAAgB;WAAuB,UAAU,GAAG,MAAM;gBAAc,OAAO;YAoC3F,CAAA;AAED,eAAO,MAAM,YAAY;kBAAiC,UAAU,GAAG,MAAM;YA2B5E,CAAA;AAED,eAAO,MAAM,OAAO;kBAA+B,UAAU,GAAG,MAAM;YAerE,CAAA;AAED,eAAO,MAAM,OAAO;WAAuB,UAAU,GAAG,MAAM;YAiB7D,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/MessageBalloon/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;WAAwB,UAAU,GAAG,MAAM;YAoB3D,CAAA;AAED,eAAO,MAAM,OAAO;WACX,UAAU,GAAG,MAAM;aACjB,OAAO;YAqKjB,CAAA;AAED,eAAO,MAAM,KAAK,+NAKjB,CAAA;AAED,eAAO,MAAM,wBAAwB;WAAuB,UAAU,GAAG,MAAM;YAiB9E,CAAA;AAED,eAAO,MAAM,gBAAgB;WAAuB,UAAU,GAAG,MAAM;YAmBtE,CAAA;AAED,eAAO,MAAM,sBAAsB;WAAuB,UAAU,GAAG,MAAM;YAqB5E,CAAA;AAED,eAAO,MAAM,gBAAgB;WAAuB,UAAU,GAAG,MAAM;gBAAc,OAAO;YAoC3F,CAAA;AAED,eAAO,MAAM,YAAY;kBAAiC,UAAU,GAAG,MAAM;YA2B5E,CAAA;AAED,eAAO,MAAM,OAAO;kBAA+B,UAAU,GAAG,MAAM;YAgBrE,CAAA;AAED,eAAO,MAAM,OAAO;WAAuB,UAAU,GAAG,MAAM;YAkB7D,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/SuggestedQuestions/index' {
   import React from 'react';
@@ -265,7 +265,7 @@ declare module '@ibti-tech/chatbot/components/SuggestedQuestions/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/SuggestedQuestions/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/SuggestedQuestions/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,mcAK1B,CAAA;AAED,eAAO,MAAM,gBAAgB,6NAAc,CAAA;AAE3C,eAAO,MAAM,YAAY,iOAIxB,CAAA;AAED,eAAO,MAAM,KAAK,+NAMjB,CAAA;AAED,eAAO,MAAM,OAAO,6NAEnB,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/SuggestedQuestions/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,mcAY1B,CAAA;AAED,eAAO,MAAM,gBAAgB,6NAAc,CAAA;AAE3C,eAAO,MAAM,YAAY,iOAIxB,CAAA;AAED,eAAO,MAAM,KAAK,+NAMjB,CAAA;AAED,eAAO,MAAM,OAAO,6NAYnB,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/WritingIndicator/index' {
   import React from 'react';
@@ -288,7 +288,7 @@ declare module '@ibti-tech/chatbot/components/WritingIndicator/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/WritingIndicator/styles.d.ts' {
-  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/WritingIndicator/styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,IAAI,+NAKhB,CAAA;AAED,eAAO,MAAM,GAAG;YAAyB,MAAM;YAO9C,CAAA;AAED,eAAO,MAAM,IAAI,+NAEhB,CAAA;AAED,eAAO,MAAM,OAAO,6NA0BnB,CAAA;AAED,eAAO,MAAM,KAAK,+NAEjB,CAAA;AAED,eAAO,MAAM,OAAO,6NAKnB,CAAA"}
+  {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/WritingIndicator/styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,IAAI,+NAKhB,CAAA;AAED,eAAO,MAAM,GAAG;YAAyB,MAAM;YAO9C,CAAA;AAED,eAAO,MAAM,IAAI,+NAEhB,CAAA;AAED,eAAO,MAAM,OAAO,6NAiCnB,CAAA;AAED,eAAO,MAAM,KAAK,+NAIjB,CAAA;AAED,eAAO,MAAM,OAAO,6NAYnB,CAAA"}
 }
 declare module '@ibti-tech/chatbot/contexts/Chatbot/context' {
   import * as React from 'react';

package/dist/index.mjs

@@ -738,6 +738,16 @@ var Wrapper = styled.div`
   max-height: calc(100vh - 45px);
   box-sizing: border-box;
   position: relative;
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+  }
+
+  *:not(b):not(strong):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    font-weight: 600 !important;
+  }
 
   @media screen and (max-width: ${breakpoints.tablet}px) {
     ${(props) => props.$opened && props.$verticalPosition === "bottom" ? css`
@@ -787,7 +797,7 @@ import React6 from "react";
 import { styled as styled2 } from "styled-components";
 var Name = styled2.span`
   color: ${(props) => props.theme.colors.content.title};
-  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+  font-weight: 700;
 `;
 var ProfileInfo = styled2.div`
   display: flex;
@@ -814,6 +824,16 @@ var Wrapper2 = styled2.div`
   display: flex;
   padding: ${(props) => props.theme.spacing.components.small};
   gap: ${(props) => props.theme.spacing.components.small};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+  }
+
+  *:not(b):not(strong):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    font-weight: 600 !important;
+  }
 `;
 
 // src/components/BotIcon/index.tsx
@@ -950,6 +970,13 @@ import { styled as styled3 } from "styled-components";
 var Wrapper3 = styled3.span`
   color: ${(props) => props.theme.colors.content.detail};
   font-size: ${(props) => props.theme.fontSizes.small};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+    font-weight: 600 !important;
+  }
 
   &::before {
     content: '';
@@ -1022,6 +1049,16 @@ var Wrapper4 = styled4.div`
   flex: 1;
   height: 100%;
   padding-right: ${(props) => props.theme.spacing.components.small};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+  }
+
+  *:not(b):not(strong):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    font-weight: 600 !important;
+  }
 
   /* Custom scrollbar styles */
   &::-webkit-scrollbar {
@@ -1056,6 +1093,8 @@ var Time = styled5.span`
   font-size: ${(props) => props.theme.fontSizes.small};
   color: ${(props) => props.theme.colors.content.detail};
   white-space: nowrap;
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
 
   ${({ $type }) => {
   switch ($type) {
@@ -1080,6 +1119,16 @@ var Balloon = styled5.div`
   line-height: 1.5em;
   display: flex;
   gap: ${(props) => props.theme.spacing.components.small};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+  }
+
+  p, li, span, div, code, pre {
+    font-weight: 600 !important;
+  }
 
   &::after {
     position: absolute;
@@ -1140,7 +1189,7 @@ var Balloon = styled5.div`
 
   a {
     color: ${(props) => props.theme.colors.palette.primary.normal};
-    font-weight: semibold;
+    font-weight: 700 !important;
     
     ${({ $type }) => $type === "sent" && css2`
         color: white;
@@ -1209,7 +1258,7 @@ var Balloon = styled5.div`
   strong,
   b {
     color: inherit;
-    font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+    font-weight: 700;
   }
 
   em,
@@ -1220,6 +1269,8 @@ var Balloon = styled5.div`
 var Label = styled5.span`
   font-size: ${(props) => props.theme.fontSizes.small};
   color: ${(props) => props.theme.colors.content.detail};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
 `;
 var BalloonAndActionsWrapper = styled5.div`
   display: flex;
@@ -1355,6 +1406,7 @@ var Tooltip = styled5.span`
   color: ${(props) => props.theme.colors.content.text};
   border-radius: ${(props) => props.theme.borderRadius.small};
   font-size: ${(props) => props.theme.fontSizes.xsmall};
+  font-weight: 500;
   pointer-events: none;
   z-index: 30;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
@@ -1364,6 +1416,7 @@ var Tooltip = styled5.span`
 `;
 var Wrapper5 = styled5.div`
   font-size: ${(props) => props.theme.fontSizes.small};
+  font-weight: 600 !important;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -1561,6 +1614,13 @@ var Balloon2 = styled6.div`
   align-items: center;
   background: ${(props) => props.theme.colors.layers[2].background};
   color: ${(props) => props.theme.colors.content.text};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+    font-weight: 600 !important;
+  }
 
   &::after {
     position: absolute;
@@ -1578,12 +1638,21 @@ var Balloon2 = styled6.div`
 `;
 var Label2 = styled6.span`
   font-size: ${(props) => props.theme.fontSizes.small};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
 `;
 var Wrapper6 = styled6.div`
   font-size: ${(props) => props.theme.fontSizes.small};
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.theme.spacing.components.xsmall};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+    font-weight: 600 !important;
+  }
 `;
 
 // src/components/WritingIndicator/index.tsx
@@ -1673,6 +1742,13 @@ var QuestionButton = styled7(Button2)`
   justify-content: flex-start;
   height: auto;
   padding: ${(props) => props.theme.spacing.components.small};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+    font-weight: 600 !important;
+  }
 `;
 var QuestionListItem = styled7.li``;
 var QuestionList = styled7.ul`
@@ -1683,12 +1759,22 @@ var QuestionList = styled7.ul`
 var Title = styled7.span`
   display: block;
   font-size: ${(props) => props.theme.fontSizes.small};
-  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+  font-weight: 700;
   margin-bottom: ${(props) => props.theme.spacing.components.medium};
   /* text-align: center; */
 `;
 var Wrapper7 = styled7.div`
   padding: ${(props) => props.theme.spacing.components.medium};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+  }
+
+  *:not(b):not(strong):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    font-weight: 600 !important;
+  }
 `;
 
 // src/components/SuggestedQuestions/index.tsx
@@ -1758,6 +1844,7 @@ var LoadingSuggestedQuestions = styled8.span`
   align-items: center;
   gap: ${(props) => props.theme.spacing.components.small};
   font-size: ${(props) => props.theme.fontSizes.small};
+  font-weight: 600 !important;
   padding: ${(props) => props.theme.spacing.components.small}
     ${(props) => props.theme.spacing.components.medium};
 `;
@@ -1774,13 +1861,14 @@ var Form = styled8.form`
 
   /* Chatbot textarea styles */
   .textareaField {
-    font-family: inherit !important;
+    font-family: 'Montserrat', sans-serif !important;
 
     &,
     *,
     textarea {
       font-size: ${(props) => props.theme.fontSizes.medium} !important;
-      font-family: inherit !important;
+      font-family: 'Montserrat', sans-serif !important;
+      font-weight: 600 !important;
     }
 
     textarea {
@@ -1794,7 +1882,8 @@ var Form = styled8.form`
       line-height: 1.5 !important;
       width: 100% !important;
       box-sizing: border-box !important;
-      font-family: inherit !important;
+      font-family: 'Montserrat', sans-serif !important;
+      font-weight: 600 !important;
       overflow-y: auto !important;
       overflow-x: hidden !important;
 
@@ -1828,7 +1917,8 @@ var Form = styled8.form`
       &::placeholder {
         color: ${(props) => props.theme.colors.content.detail} !important;
         font-size: ${(props) => props.theme.fontSizes.medium} !important;
-        font-family: inherit !important;
+        font-family: 'Montserrat', sans-serif !important;
+        font-weight: 600 !important;
       }
     }
 
@@ -1840,6 +1930,16 @@ var Form = styled8.form`
 `;
 var Wrapper8 = styled8.div`
   padding: ${(props) => props.theme.spacing.components.small};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+  }
+
+  *:not(b):not(strong):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    font-weight: 600 !important;
+  }
 `;
 
 // src/components/ChatbotFooter/index.tsx
@@ -1921,7 +2021,13 @@ var ButtonWrapper = styled9.button`
   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};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 700 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+    font-weight: 700 !important;
+  }
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2005,13 +2111,14 @@ var Form2 = styled10.form`
 
   /* Feedback textarea styles */
   .feedbackTextarea {
-    font-family: inherit !important;
+    font-family: 'Montserrat', sans-serif !important;
 
     &,
     *,
     textarea {
       font-size: ${(props) => props.theme.fontSizes.medium} !important;
-      font-family: inherit !important;
+      font-family: 'Montserrat', sans-serif !important;
+      font-weight: 600 !important;
     }
 
     textarea {
@@ -2024,7 +2131,8 @@ var Form2 = styled10.form`
       line-height: 1.5 !important;
       width: 100% !important;
       box-sizing: border-box !important;
-      font-family: inherit !important;
+      font-family: 'Montserrat', sans-serif !important;
+      font-weight: 600 !important;
       color: ${(props) => props.theme.colors.content.text} !important;
       background-color: ${(props) => props.theme.colors.layers[2].background} !important;
 
@@ -2036,7 +2144,8 @@ var Form2 = styled10.form`
       &::placeholder {
         color: ${(props) => props.theme.colors.content.detail} !important;
         font-size: ${(props) => props.theme.fontSizes.medium} !important;
-        font-family: inherit !important;
+        font-family: 'Montserrat', sans-serif !important;
+        font-weight: 600 !important;
       }
     }
 
@@ -2050,10 +2159,11 @@ 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};
+  font-weight: 600 !important;
 `;
 var Title2 = styled10.span`
   display: block;
-  font-weight: ${(props) => props.theme.fontFamily.montserrat.weights.bold};
+  font-weight: 700;
   color: ${(props) => props.theme.colors.content.text};
   margin-bottom: ${(props) => props.theme.spacing.components.small};
 `;
@@ -2062,6 +2172,16 @@ var Box = styled10(CardBase)`
   height: max-content;
   padding: ${(props) => props.theme.spacing.components.medium};
   transition: ${(props) => props.theme.transitionDurations.default};
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+  }
+
+  *:not(b):not(strong):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    font-weight: 600 !important;
+  }
 `;
 var Wrapper9 = styled10.div`
   position: absolute;
@@ -2201,6 +2321,17 @@ import { breakpoints as breakpoints3, screens as screens3 } from "@ibti-tech/ui"
 import { Container } from "@ibti-tech/ui/dist/components/Container";
 import { css as css6, styled as styled11 } from "styled-components";
 var BarContainer = styled11(Container)`
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 600 !important;
+
+  * {
+    font-family: 'Montserrat', sans-serif !important;
+  }
+
+  *:not(b):not(strong):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    font-weight: 600 !important;
+  }
+
   @media screen and (max-width: ${breakpoints3.tablet}px) {
     padding: 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibti-tech/chatbot",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Chatbot developed for IBTI products",
   "packageManager": "yarn@3.6.4",
   "main": "./dist/index.mjs",