@cmnd-ai/chatbot-react 1.2.1 → 1.3.1

package/Readme.md

@@ -1,6 +1,6 @@
 ## @cmnd-ai/chatbot-react
 
-This npm package provides a customizable chatbot component for use in web applications, designed specifically for Node.js environments.
+This npm package provides a customizable chatbot component for use in web applications, designed specifically for React environments.
 
 ### Installation
 
@@ -19,91 +19,19 @@ yarn add @cmnd-ai/chatbot-react
 ### Example implementation
 
 ```javascript
-import { ChatProvider, CmndChatBot } from "@cmnd-ai/chatbot-react";
-import { useEffect } from "react";
+import { ChatProvider } from "@cmnd-ai/chatbot-react";
 
-const components = {
-  messages({ props }) {
-    const messages = props.chats.data?.messages || [];
-
-    useEffect(() => {
-      const comp = document.querySelector(`#lastItemId`);
-      if (!comp) return;
-
-      setTimeout(() => {
-        comp.scrollIntoView({
-          behavior: "smooth",
-          block: "end", // Scroll to the bottom of the container
-        });
-      }, 500);
-    }, [messages.length]);
-
-    const getchild = () => {
-      if (props.chats.error) {
-        return <h1>Error</h1>;
-      }
-      if (!props.chats.data?.messages?.length)
-        return <h1>Ask me a question</h1>;
-
-      return (
-        <div>
-          {messages.map((eachMessage, msgIndex) => (
-            <div
-              key={eachMessage.id}
-              id={msgIndex === messages.length - 1 ? "lastItemId" : undefined}
-            >
-              {eachMessage.message + ""}
-            </div>
-          ))}
-        </div>
-      );
-    };
-
-    return <div style={{ flexGrow: 1 }}>{getchild()}</div>;
-  },
-  userInputBox({ props }) {
-    return (
-      <div
-        style={{
-          display: "flex",
-          gap: "1rem",
-        }}
-      >
-        <input
-          style={{
-            flexGrow: 1,
-          }}
-          type="text"
-          value={props.userInputData.textValue}
-          onChange={(e) => props.userInputData.setTextValue(e.target.value)}
-          placeholder="Type here"
-          disabled={props.userInputData.isSending}
-        />
-        <button
-          onClick={props.userInputData.submitMessage}
-          disabled={props.userInputData.isSending}
-        >
-          {props.userInputData.isSending ? "Sending..." : "Send"}
-        </button>
-      </div>
-    );
-  },
-  error({ props }) {
-    return <div>Error: {props.chats.error + ""}</div>;
-  },
-};
-
-function App() {
+const App = () => {
   return (
-    <div>
-      <ChatProvider apiKey="xxxxx" chatbotId={1} organizationId={1}>
-        {(params) => <CmndChatBot {...params} components={components} />}
-      </ChatProvider>
-    </div>
+    <ChatProvider
+      baseUrl="<your-cmnd-api-base-url>"
+      chatbotId={"<your-chatbot-id>"}
+      organizationId={"<your-organization-id>"}
+    />
   );
-}
+};
 
 export default App;
 ```
 
-You can find an example implementation from Github [here](https://github.com/CyprusCodes/cmnd-react-chatbot-example.git)
+For more information on customizing the chatbot components, please refer [here](https://github.com/CyprusCodes/cmnd-react-chatbot-example.git)

package/dist/ChatProvider/index.d.ts

@@ -3,7 +3,7 @@ import { CmndChatBotProps } from "../CmndChatBot/index.js";
 import { CmndChatContext } from "../type.js";
 export declare const ChatProviderContext: React.Context<CmndChatContext | undefined>;
 export interface ChatProviderProps extends CmndChatBotProps {
-    children: React.ReactNode | ((props: CmndChatBotProps) => React.ReactNode);
+    children?: React.ReactNode | ((props: CmndChatBotProps) => React.ReactNode);
 }
 declare function ChatProvider(props: ChatProviderProps): JSX.Element | null;
 export default ChatProvider;

package/dist/ChatProvider/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
 import { MessageRole, } from "../type.js";
 import postUserConversation from "../services/postUserConversation.js";
@@ -43,7 +43,6 @@ function ChatProvider(props) {
         if (!organizationId || !chatbotId)
             return;
         return postUserConversation({
-            orgId: organizationId,
             payload: newMessages,
             apikey: props.apiKey,
             chatbotId,
@@ -114,6 +113,6 @@ function ChatProvider(props) {
                 scrollToBottom,
                 enabledTools,
             },
-        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsx(Conversation, { messages: messages, setMessages: setMessages, postSessionMessage: postSessionMessage, isChatLoading: isChatLoading, messagesRef: messagesRef, input: input, setInput: setInput, handleSendClick: handleSendClick, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, canSendMessage: canSendMessage, scrollToBottom: scrollToBottom, error: error, enabledTools: enabledTools, Components: Components, UITools: UITools })) }));
+        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(Conversation, { messages: messages, setMessages: setMessages, postSessionMessage: postSessionMessage, isChatLoading: isChatLoading, messagesRef: messagesRef, input: input, setInput: setInput, handleSendClick: handleSendClick, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, canSendMessage: canSendMessage, scrollToBottom: scrollToBottom, error: error, enabledTools: enabledTools, Components: Components, UITools: UITools, customStyles: props.customStyles })] })) }));
 }
 export default ChatProvider;

package/dist/ChatProvider/processStream/index.js

@@ -15,13 +15,17 @@ const processStream = async (reader, onData) => {
             const lines = chunk.split("\n");
             for (const line of lines) {
                 let dataString = line;
+                if (line === "") {
+                    // skip empty line of content
+                    continue;
+                }
                 if (line.startsWith("data: ")) {
                     dataString = line.slice(6);
                 }
                 if (dataString === "[DONE]") {
                     onData({
                         completionFinished: true,
-                        finalResponseWithUsageData: false,
+                        finalResponseWithUsageData: false
                     });
                 }
                 else {
@@ -35,14 +39,14 @@ const processStream = async (reader, onData) => {
                             onData({
                                 completionFinished: false,
                                 finalResponseWithUsageData: false,
-                                message: fullAssistantMessage,
+                                message: fullAssistantMessage
                             });
                         }
                         else {
                             //at this point, the dataObject does not have a content propery
                             //and it is completed
                             //get the last message from the dataObject to check if it is a function call
-                            const { messages, completionFinished, finalResponseWithUsageData, chatbotConversationId, conversationId, totalTokens, totalCost, } = dataObject;
+                            const { messages, completionFinished, finalResponseWithUsageData, chatbotConversationId, conversationId, totalTokens, totalCost } = dataObject;
                             onData({
                                 messages,
                                 completionFinished,
@@ -50,7 +54,7 @@ const processStream = async (reader, onData) => {
                                 conversationId,
                                 chatbotConversationId,
                                 totalTokens,
-                                totalCost,
+                                totalCost
                             });
                         }
                     }
@@ -65,7 +69,7 @@ const processStream = async (reader, onData) => {
         onData({
             completionFinished: true,
             message: fullAssistantMessage,
-            finalResponseWithUsageData: true,
+            finalResponseWithUsageData: true
         });
         console.error(error);
         throw new Error(error);

package/dist/CmndChatBot/index.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
-import { UIFunctionArguments } from "../type.js";
+import { CmndChatContext, CustomStyles, UIFunctionArguments } from "../type.js";
 import { ConversationProps } from "../components/Conversation.js";
 export interface CmndChatBotProps extends Pick<ConversationProps, 'Components'> {
     chatbotId: number;
     organizationId: number;
-    apiKey: string;
+    apiKey?: string;
     baseUrl: string;
     UITools?: Record<string, React.FC<UIFunctionArguments<any>>>;
+    customStyles?: CustomStyles;
 }
-declare function CmndChatBot(props: CmndChatBotProps): void;
+declare function CmndChatBot(): CmndChatContext;
 export default CmndChatBot;

package/dist/CmndChatBot/index.js

@@ -1,6 +1,6 @@
 import useChatContext from "../ChatProvider/useChatContext.js";
-function CmndChatBot(props) {
+function CmndChatBot() {
     const chatContext = useChatContext();
-    return;
+    return chatContext;
 }
 export default CmndChatBot;

package/dist/components/ChatInputBox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ChatInputBoxProps {
+    input: string;
+    setInput: (input: string) => void;
+    handleSendClick: () => void;
+}
+declare const ChatInputBox: ({ input, setInput, handleSendClick }: ChatInputBoxProps) => JSX.Element;
+export default ChatInputBox;

package/dist/components/ChatInputBox.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChatInputBox = ({ input, setInput, handleSendClick }) => {
+    return (_jsx("div", { className: "cmnd-input-wrapper", children: _jsx("input", { autoFocus: true, id: "cmnd-input", className: "cmnd-input", onKeyDown: e => {
+                if (e.key === "Enter") {
+                    handleSendClick();
+                }
+            }, autoComplete: "off", value: input, onChange: e => setInput(e.target.value), type: "text", placeholder: "Type something..." }) }));
+};
+export default ChatInputBox;

package/dist/components/Chatbubble.d.ts

@@ -1,5 +1,5 @@
 import React, { Dispatch, ReactNode, SetStateAction } from "react";
-import { MessageRole, ToolDetails, ToolData, UIFunctionArguments } from "../type.js";
+import { MessageRole, ToolDetails, ToolData, UIFunctionArguments, CustomStyles } from "../type.js";
 interface ChatBubbleProps {
     message: string | ReactNode | null;
     role: MessageRole;
@@ -16,6 +16,7 @@ interface ChatBubbleProps {
     setIsChatLoading: Dispatch<SetStateAction<boolean>>;
     scrollToBottom: () => void;
     UITools?: Record<string, React.FC<UIFunctionArguments<any>>>;
+    customStyles?: CustomStyles;
 }
-declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, }: ChatBubbleProps) => JSX.Element | null;
+declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, customStyles, }: ChatBubbleProps) => JSX.Element | null;
 export default Chatbubble;

package/dist/components/Chatbubble.js

@@ -10,6 +10,7 @@ import ReactMarkdown from "react-markdown";
 import SyntaxHighlighter from "react-syntax-highlighter";
 //@ts-ignore
 import oneDark from "react-syntax-highlighter/dist/cjs/styles/prism/one-dark.js";
+import { overrideStyle } from "../utils.js";
 const getChatAvatar = (role) => {
     switch (role) {
         case MessageRole.USER:
@@ -22,7 +23,7 @@ const getChatAvatar = (role) => {
             return _jsx(BsRobot, {});
     }
 };
-const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, }) => {
+const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, customStyles, }) => {
     const patchLastMessageToolInfo = useCallback((messages, toolInfo) => {
         const lastMessage = messages[messages.length - 1];
         if (lastMessage.role !== MessageRole.FUNCTION) {
@@ -103,15 +104,19 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
         width: "100%",
         background: "none",
     };
-    return (_jsxs("div", { style: defaultStyle, className: `cmnd-chatbot-chat-bubble ${role}`, children: [_jsx("span", { style: {
+    const defaultChatBubbleStyle = {
+        backgroundColor: role === MessageRole.USER ? "#7A8194" : "#373E4E",
+        color: "white",
+        padding: "10px",
+        borderRadius: "10px",
+    };
+    const chatBubbleCustomStyle = overrideStyle(role === MessageRole.USER
+        ? customStyles?.userChatbubbleStyle ?? defaultChatBubbleStyle
+        : customStyles?.botChatbubbleStyle ?? defaultChatBubbleStyle, customStyles?.chatbubbleStyle);
+    return (_jsxs("div", { style: defaultStyle, className: `cmnd-chatbot-chat-bubble ${role}`, children: [_jsx("span", { style: overrideStyle({
                     fontSize: "30px",
                     color: "black",
-                }, children: getChatAvatar(role) }), _jsxs("p", { style: {
-                    backgroundColor: role === MessageRole.USER ? "#7A8194" : "#373E4E",
-                    color: "white",
-                    padding: "10px",
-                    borderRadius: "10px",
-                }, children: [role === MessageRole.USER || isLoadingBubble ? (_jsx("span", { children: message })) : (_jsx(ReactMarkdown, { className: "markdown", remarkPlugins: [remarkGfm], children: message?.toString() ?? "", remarkRehypeOptions: { passThrough: ["link"] }, components: {
+                }, customStyles?.chatAvatarStyle), children: getChatAvatar(role) }), _jsxs("p", { style: chatBubbleCustomStyle, children: [role === MessageRole.USER || isLoadingBubble ? (_jsx("span", { children: message })) : (_jsx(ReactMarkdown, { className: "markdown", remarkPlugins: [remarkGfm], children: message?.toString() ?? "", remarkRehypeOptions: { passThrough: ["link"] }, components: {
                             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                             // @ts-ignore
                             code({ inline, className, children, ...props }) {

package/dist/components/Conversation.d.ts

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from "react";
-import { InputFieldProps, SendButtonProps, UIFunctionArguments } from "../type.js";
+import { CustomStyles, InputFieldProps, SendButtonProps, UIFunctionArguments } from "../type.js";
 export interface ConversationProps {
     messages: any[];
     setMessages: Dispatch<SetStateAction<any[]>>;
@@ -22,6 +22,7 @@ export interface ConversationProps {
         error?: any;
     };
     UITools?: Record<string, React.FC<UIFunctionArguments<any>>>;
+    customStyles?: CustomStyles;
 }
-declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, }: ConversationProps) => JSX.Element;
+declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, customStyles, }: ConversationProps) => JSX.Element;
 export default Conversation;

package/dist/components/Conversation.js

@@ -1,19 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Chatbubble from "./Chatbubble.js";
 import LoadingBubble from "./LoadingBubble.js";
-import { RiSendPlane2Line } from "react-icons/ri";
-const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, }) => {
-    return (_jsxs("div", { className: "cmnd-conversations", children: [_jsxs("div", { ref: messagesRef, id: "messages", className: "cmnd-conversations-messages", children: [error, messages.map((m, i) => (_jsx(Chatbubble, { hide: m.hiddenFromUser, message: m.message, role: m.role, toolCallDetails: m.tool, tools: enabledTools, postSessionMessage: postSessionMessage, messages: messages, setMessages: setMessages, id: m.id, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, scrollToBottom: scrollToBottom, UITools: UITools }, i))), isChatLoading ? _jsx(LoadingBubble, {}) : null] }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick } })) : (_jsx("input", { id: "cmnd-input", className: "cmnd-input", onKeyDown: (e) => {
-                            if (e.key === "Enter") {
-                                handleSendClick();
-                            }
-                        }, autoComplete: "off", value: input, onChange: (e) => setInput(e.target.value), type: "text", placeholder: "type something..." })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
+import ChatInputBox from "./ChatInputBox.js";
+const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, customStyles, }) => {
+    return (_jsxs("div", { className: "cmnd-conversations", children: [_jsxs("div", { ref: messagesRef, id: "messages", className: "cmnd-conversations-messages", children: [error, messages.map((m, i) => (_jsx(Chatbubble, { customStyles: customStyles, hide: m.hiddenFromUser, message: m.message, role: m.role, toolCallDetails: m.tool, tools: enabledTools, postSessionMessage: postSessionMessage, messages: messages, setMessages: setMessages, id: m.id, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, scrollToBottom: scrollToBottom, UITools: UITools }, i))), isChatLoading ? _jsx(LoadingBubble, { customStyles: customStyles }) : null] }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
                             canSendMessage,
-                            handleSendClick,
-                        } })) : (_jsx("span", { id: "cmnd-send-button", className: "cmnd-send-button", style: {
-                            opacity: canSendMessage ? "1" : "0.5",
-                            cursor: canSendMessage ? "pointer" : "not-allowed",
-                            fontSize: "1.5rem",
-                        }, onClick: handleSendClick, children: _jsx(RiSendPlane2Line, {}) }))] })] }));
+                            handleSendClick
+                        } })) : (_jsx("button", { className: "cmnd-send-button", onClick: handleSendClick, children: "Send" }))] })] }));
 };
 export default Conversation;

package/dist/components/LoadingBubble.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-declare const LoadingBubble: () => JSX.Element;
+import { CustomStyles } from "../type.js";
+interface LoadingBubbleProps {
+    customStyles?: CustomStyles;
+}
+declare const LoadingBubble: ({ customStyles }: LoadingBubbleProps) => JSX.Element;
 export default LoadingBubble;

package/dist/components/LoadingBubble.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MessageRole } from "../type.js";
 import Chatbubble from "./Chatbubble.js";
-const LoadingBubble = () => {
+const LoadingBubble = ({ customStyles }) => {
     const color = "white";
-    return (_jsx(Chatbubble, { isLoadingBubble: true, message: _jsx("div", { className: "loading-container", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: {
+    return (_jsx(Chatbubble, { isLoadingBubble: true, customStyles: customStyles, message: _jsx("div", { className: "loading-container", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: {
                     margin: "auto",
                     display: "block",
                     shapeRendering: "auto",

package/dist/index.d.ts

@@ -1,4 +1,5 @@
+import "./styles/index.css";
 export { default as ChatProvider } from "./ChatProvider/index.js";
 export { default as useChatContext } from "./ChatProvider/useChatContext.js";
-export { CmndChatContext } from "./type.js";
+export { CmndChatContext, InputFieldProps, SendButtonProps, CustomStyles } from "./type.js";
 export { default as CmndChatBot } from "./CmndChatBot/index.js";

package/dist/index.js

@@ -1,3 +1,4 @@
+import "./styles/index.css";
 export { default as ChatProvider } from "./ChatProvider/index.js";
 export { default as useChatContext } from "./ChatProvider/useChatContext.js";
 export { default as CmndChatBot } from "./CmndChatBot/index.js";

package/dist/services/postUserConversation.d.ts

@@ -1,9 +1,8 @@
 import { ConversationDataObject } from "../type.js";
-declare const postUserConversation: ({ orgId, payload, apikey, chatbotId, baseUrl, onData, }: {
-    orgId: number;
+declare const postUserConversation: ({ payload, apikey, chatbotId, baseUrl, onData, }: {
     payload: object;
     chatbotId: number;
-    apikey: string;
+    apikey?: string | undefined;
     baseUrl: string;
     onData?: ((data: ConversationDataObject) => void) | undefined;
 }) => Promise<void>;

package/dist/services/postUserConversation.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import processStream from "../ChatProvider/processStream/index.js";
-const postUserConversation = async ({ orgId, payload, apikey, chatbotId, baseUrl, onData, }) => {
-    const endpoint = `${baseUrl}/organizations/${orgId}/chatbots/${chatbotId}/conversations`;
+const postUserConversation = async ({ payload, apikey, chatbotId, baseUrl, onData, }) => {
+    const endpoint = `${baseUrl}/chatbots/${chatbotId}/conversations`;
     const response = await axios.post(endpoint, {
         messages: payload,
     }, {
@@ -14,9 +14,7 @@ const postUserConversation = async ({ orgId, payload, apikey, chatbotId, baseUrl
         responseType: "stream",
         adapter: "fetch",
     });
-    const reader = response.data
-        .pipeThrough(new TextDecoderStream())
-        .getReader();
+    const reader = response.data.pipeThrough(new TextDecoderStream()).getReader();
     await processStream(reader, onData);
 };
 export default postUserConversation;

package/dist/styles/index.css

@@ -0,0 +1,204 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.cmnd-conversations {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: none;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+}
+.cmnd-conversations-messages {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 60%;
+  align-items: center;
+  padding: 10px;
+}
+.cmnd-input-wrapper {
+  display: flex;
+  width: 65%;
+}
+.cmnd-input-div {
+  width: 100%;
+  border: none;
+  border-radius: 20px;
+  display: flex;
+  padding: 0 10px;
+  margin-top: auto;
+  display: flex;
+  justify-content: center;
+}
+.cmnd-input {
+  flex: 3;
+  background-color: #3d4354;
+  border: none;
+  color: white;
+  font-size: 16px;
+  height: 100%;
+  padding: 10px;
+  border-radius: 20px 0 0 20px;
+  height: 45px;
+  outline: none;
+}
+.cmnd-send-button {
+  flex: 0;
+  background-color: #20232c;
+  border: none;
+  color: white;
+  font-size: 16px;
+  height: 100%;
+  padding: 0 20px;
+  border-radius: 0 20px 20px 0;
+  height: 45px;
+}
+
+.cmnd-chatbot-chat-bubble {
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  word-wrap: break-word;
+}
+
+.markdown {
+  max-width: none;
+}
+
+.markdown table {
+  border-collapse: separate;
+  border-spacing: 0px 0px;
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem;
+  width: 100%;
+}
+.prose :where(thead):not(:where([class~="not-prose"] *)) {
+  border-bottom-color: #4b5563;
+  border-bottom-width: 1px;
+}
+
+.markdown table thead {
+  border-bottom-color: #4b5563;
+  border-bottom-width: 1px;
+}
+.markdown th {
+  background-color: hsla(0, 0%, 100%, 0.1);
+  border: 1px solid hsla(0, 0%, 100%, 0.15);
+  padding: 0.25rem 0.75rem;
+}
+
+.markdown th {
+  border-left-width: 1px;
+}
+
+.markdown th {
+  border-right-width: 1px;
+}
+.markdown th:first-child {
+  border-top-left-radius: 0.375rem;
+}
+
+.markdown th:last-child {
+  border-right-width: 1px;
+  border-top-right-radius: 0.375rem;
+}
+
+.markdown td {
+  border: 1px solid hsla(0, 0%, 100%, 0.15);
+  padding: 0.25rem 0.75rem;
+}
+
+.markdown td:last-child,
+.markdown td {
+  border-right-width: 1px;
+}
+
+.markdown td:last-child {
+  border-left-width: 1px;
+}
+
+.markdown tbody tr:last-child td:first-child {
+  border-bottom-left-radius: 0.375rem;
+}
+.markdown tbody tr:last-child td:last-child,
+.markdown tbody tr:last-child td:first-child {
+  border-bottom-right-radius: 0.375rem;
+}
+.markdown blockquote {
+  border-left-width: 2px;
+  padding-left: 1rem;
+}
+
+.markdown blockquote > p {
+  margin: 0;
+}
+.markdown p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.markdown blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: #848d97;
+  border-left: 0.25em solid #30363d;
+  padding-top: 0.5rem;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+.markdown ul,
+.markdown ol {
+  padding-left: 1.625em;
+}
+.markdown pre {
+  background-color: #161b22;
+  border-radius: 0.375rem;
+  color: currentColor;
+  font-size: 0.875em;
+  font-weight: 400;
+  line-height: 1.7142857;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  overflow-x: auto;
+  padding: 5px;
+}
+.markdown code:not(pre code) {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-spaces;
+  background-color: #6e768166;
+  border-radius: 6px;
+}
+.markdown a:hover {
+  color: #2964aa;
+}
+.markdown a {
+  color: #7ab7ff;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  font-weight: 400;
+}
+
+@media screen and (max-width: 1280px) {
+  .cmnd-conversations-messages {
+    width: 100%;
+  }
+  .cmnd-input-wrapper {
+    width: 100%;
+  }
+  .cmnd-input {
+    font-size: 14px;
+  }
+  .cmnd-send-button {
+    font-size: 14px;
+  }
+}

package/dist/type.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { ConversationProps } from "./components/Conversation.js";
 export interface CmndChatContext {
     props: Partial<ConversationProps>;
@@ -100,4 +101,12 @@ interface ToolMessage {
     tool: ToolDetails;
 }
 export type Message = GenericMessage | ToolMessage;
+export interface CustomStyles {
+    chatAvatarStyle?: CSSProperties;
+    inputStyle?: CSSProperties;
+    sendButtonStyle?: CSSProperties;
+    chatbubbleStyle?: CSSProperties;
+    botChatbubbleStyle?: CSSProperties;
+    userChatbubbleStyle?: CSSProperties;
+}
 export {};

package/dist/utils.d.ts

@@ -1,2 +1,14 @@
 import { CSSProperties } from "react";
+/**
+ * Overrides properties of a base CSS style with provided overrides.
+ *
+ * @param style - The base CSS style to be overridden.
+ * @param overrides - An optional object containing properties to override in the base style.
+ * @returns A new CSSProperties object with overridden properties.
+ *
+ * @example
+ * // Override backgroundColor and width properties
+ * const baseStyle = { backgroundColor: "#f0f0f0", width: "400px" };
+ * const customStyle = overrideStyle(baseStyle, { backgroundColor: "blue", width: "300px" });
+ */
 export declare const overrideStyle: (style: CSSProperties, overrides?: Partial<CSSProperties>) => CSSProperties;

package/dist/utils.js

@@ -1,3 +1,15 @@
+/**
+ * Overrides properties of a base CSS style with provided overrides.
+ *
+ * @param style - The base CSS style to be overridden.
+ * @param overrides - An optional object containing properties to override in the base style.
+ * @returns A new CSSProperties object with overridden properties.
+ *
+ * @example
+ * // Override backgroundColor and width properties
+ * const baseStyle = { backgroundColor: "#f0f0f0", width: "400px" };
+ * const customStyle = overrideStyle(baseStyle, { backgroundColor: "blue", width: "300px" });
+ */
 export const overrideStyle = (style, overrides) => {
     return { ...style, ...overrides };
 };

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@cmnd-ai/chatbot-react",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "main": "dist/index.js",
   "description": "",
   "type": "module",
   "files": [
     "dist/",
     "package.json",
+    "dist/styles/index.css",
     "ReadMe.md"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run copy-css",
+    "copy-css": "mkdir -p dist/styles && cp src/styles/index.css dist/styles/index.css",
+    "dev": "npm run copy-css && tsc -w",
     "prepublishOnly": "npm run build",
     "semantic-release": "semantic-release"
   },
@@ -18,6 +21,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@types/express-unless": "^2.0.3",
     "@types/react": "18.0.28",
     "@types/react-syntax-highlighter": "^15.5.13",
     "semantic-release": "^22.0.12",