Merge pull request #85 from BitteProtocol/add-extra-input-btn

feat: add extra input button for mobile
BitteProtocol · Feb 13, 2025 · a722207 · a722207
2 parents 0d129c4 + 31686dc
commit a722207
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git 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
@@ -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}
       />
     </AccountProvider>
   );

diff --git 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}
         />
       </div>
     </div>

diff --git 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<HTMLDivElement>(null);
   const [paddingLeft, setPaddingLeft] = useState<number>(125);
@@ -47,11 +49,11 @@ export const SmartActionsInput = ({
 
   return (
     <form
-      className="bitte-relative bitte-mb-0 bitte-flex bitte-w-full bitte-items-center bitte-justify-center bitte-gap-4 max-lg:bitte-flex-wrap"
+      className='bitte-relative bitte-mb-0 bitte-flex bitte-w-full bitte-items-center bitte-justify-center bitte-gap-4 max-lg:bitte-flex-wrap'
       style={{ color: textColor }}
       onSubmit={handleSubmit}
     >
-      <div className="bitte-w-full bitte-relative">
+      <div className='bitte-w-full bitte-relative'>
         <AgentPill name={agentName || previousAgentName} ref={agentNameRef} />
 
         <Textarea
@@ -61,7 +63,7 @@ export const SmartActionsInput = ({
             background: backgroundColor,
             borderColor: borderColor,
           }}
-          className="bitte-h-[42px] bitte-w-full bitte-resize-none bitte-min-h-0 textarea-chat"
+          className='bitte-h-[42px] bitte-w-full bitte-resize-none bitte-min-h-0 textarea-chat'
           onChange={handleChange}
           onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
             if (e.key === "Enter" && !e.shiftKey) {
@@ -72,15 +74,20 @@ export const SmartActionsInput = ({
           value={input}
         />
       </div>
-      <Button
-        type='submit'
-        disabled={!input || isLoading}
-        className="bitte-h-[42px] bitte-w-full lg:bitte-w-[42px] bitte-p-0 disabled:bitte-opacity-20"
-        style={{ backgroundColor: buttonColor, color: textColor }}
-      >
-        <ArrowUp className="bitte-h-[16px] bitte-w-[16px] bitte-hidden lg:bitte-block" />
-        <span className="lg:bitte-hidden">Send</span>
-      </Button>
+      <div className='bitte-flex bitte-gap-2 bitte-w-full lg:bitte-contents'>
+        {mobileInputExtraButton ? (
+          <div className='bitte-w-full lg:bitte-hidden'>{mobileInputExtraButton}</div>
+        ) : null}
+        <Button
+          type='submit'
+          disabled={!input || isLoading}
+          className='bitte-h-[42px] bitte-w-full lg:bitte-w-[42px] bitte-p-0 disabled:bitte-opacity-20'
+          style={{ backgroundColor: buttonColor, color: textColor }}
+        >
+          <ArrowUp className='bitte-h-[16px] bitte-w-[16px] bitte-hidden lg:bitte-block' />
+          <span className='lg:bitte-hidden'>Send</span>
+        </Button>
+      </div>
     </form>
   );
 };
diff --git a/src/types/types.ts b/src/types/types.ts
@@ -212,6 +212,7 @@ export interface BitteAiChatProps {
     };
   };
   welcomeMessageComponent?: JSX.Element;
+  mobileInputExtraButton?: JSX.Element;
 }
 
 /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -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'
     }
     ```
@@ Expand Down @@