From 8b870649a691b46753fedf4408b186f045849090 Mon Sep 17 00:00:00 2001
From: Ed Spencer <ed@edspencer.net>
Date: Wed, 28 Aug 2024 12:38:55 -0400
Subject: [PATCH] Allow customizable ChatBox placeholder and send button text

---
 .changeset/eight-berries-rescue.md |  5 +++++
 src/ui/ChatBox.tsx                 |  4 +++-
 src/ui/ChatWrapper.tsx             | 13 +++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/eight-berries-rescue.md

diff --git a/.changeset/eight-berries-rescue.md b/.changeset/eight-berries-rescue.md
new file mode 100644
index 0000000..4c77833
--- /dev/null
+++ b/.changeset/eight-berries-rescue.md
@@ -0,0 +1,5 @@
+---
+"inform-ai": minor
+---
+
+Allow customization of placeholder and send button text
diff --git a/src/ui/ChatBox.tsx b/src/ui/ChatBox.tsx
index 91b5ff0..ab473ad 100644
--- a/src/ui/ChatBox.tsx
+++ b/src/ui/ChatBox.tsx
@@ -10,10 +10,12 @@
 export function ChatBox({
   autoFocus = false,
   placeholder = "Ask me anything...",
+  sendButtonText = "Send",
   onSubmit,
 }: {
   autoFocus?: boolean;
   placeholder?: string | null;
+  sendButtonText?: string;
   onSubmit: (message: string) => Promise<boolean>;
 }) {
   return (
@@ -51,7 +53,7 @@ export function ChatBox({
         />
       </div>
       <button type="submit" className="chatbox-button">
-        Send
+        {sendButtonText}
       </button>
     </form>
   );
diff --git a/src/ui/ChatWrapper.tsx b/src/ui/ChatWrapper.tsx
index 82b3d61..eab605f 100644
--- a/src/ui/ChatWrapper.tsx
+++ b/src/ui/ChatWrapper.tsx
@@ -12,6 +12,8 @@ export interface ChatWrapperProps {
   submitUserMessage: (messages: any[]) => Promise<any>;
   messages?: any[];
   setMessages: (value: any[] | ((prevState: any[]) => any[])) => void;
+  placeholder?: string;
+  sendButtonText?: string;
 }
 
 /**
@@ -80,7 +82,14 @@ export interface ChatWrapperProps {
  * @param {function} props.setMessages - A function to update the messages in the chat history. Can be async.
  * @return {JSX.Element} The JSX element representing the chat wrapper.
  */
-export function ChatWrapper({ className, submitUserMessage, messages = [], setMessages }: ChatWrapperProps) {
+export function ChatWrapper({
+  className,
+  submitUserMessage,
+  messages = [],
+  setMessages,
+  placeholder,
+  sendButtonText,
+}: ChatWrapperProps) {
   const { popRecentMessages } = useInformAIContext();
 
   async function onMessage(message: string) {
@@ -109,7 +118,7 @@ export function ChatWrapper({ className, submitUserMessage, messages = [], setMe
   return (
     <div className={clsx("flex flex-col p-1", className)}>
       <Messages messages={messages} />
-      <ChatBox onSubmit={onMessage} />
+      <ChatBox onSubmit={onMessage} placeholder={placeholder} sendButtonText={sendButtonText} />
     </div>
   );
 }