diff --git a/README.md b/README.md index 3454232..ca14013 100644 --- a/README.md +++ b/README.md @@ -189,6 +189,7 @@ interface BitteAiChatProps { chatId?: string; // Custom chat ID }; welcomeMessageComponent?: JSX.Element; // Custom Welcome Message to be displayed when the chat loads + mobileInputExtraButton?: JSX.Element // Custom Button to add in mobile next to 'Send' } ``` diff --git a/src/components/BitteAiChat.tsx b/src/components/BitteAiChat.tsx index f6d5da1..83520ce 100644 --- a/src/components/BitteAiChat.tsx +++ b/src/components/BitteAiChat.tsx @@ -15,6 +15,7 @@ export const BitteAiChat = ({ agentId, options, welcomeMessageComponent, + mobileInputExtraButton, }: BitteAiChatProps) => { const [loadedData, setLoadedData] = useState({ agentIdLoaded: "", @@ -59,6 +60,7 @@ export const BitteAiChat = ({ localAgent: options?.localAgent, }} welcomeMessageComponent={welcomeMessageComponent} + mobileInputExtraButton={mobileInputExtraButton} /> ); diff --git a/src/components/chat/ChatContent.tsx b/src/components/chat/ChatContent.tsx index c5de738..071358e 100644 --- a/src/components/chat/ChatContent.tsx +++ b/src/components/chat/ChatContent.tsx @@ -34,6 +34,7 @@ export const ChatContent = ({ options, messages: initialMessages, welcomeMessageComponent, + mobileInputExtraButton }: BitteAiChatProps) => { const chatId = useRef(options?.chatId || generateId()).current; const [isAtBottom, setIsAtBottom] = useState(true); @@ -285,6 +286,7 @@ export const ChatContent = ({ textColor={textColor!} backgroundColor={generalBackground!} agentName={options?.agentName} + mobileInputExtraButton={mobileInputExtraButton} /> diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx index b841ad9..c10dff0 100644 --- a/src/components/chat/ChatInput.tsx +++ b/src/components/chat/ChatInput.tsx @@ -14,6 +14,7 @@ interface SmartActionsInputProps { borderColor: string; textColor: string; backgroundColor: string; + mobileInputExtraButton?: JSX.Element; } export const SmartActionsInput = ({ @@ -26,6 +27,7 @@ export const SmartActionsInput = ({ borderColor, textColor, backgroundColor, + mobileInputExtraButton, }: SmartActionsInputProps) => { const agentNameRef = useRef(null); const [paddingLeft, setPaddingLeft] = useState(125); @@ -47,11 +49,11 @@ export const SmartActionsInput = ({ return (
-
+