From 9c9c5ec1c366de99ef81f9a119aa0390744f69c2 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 3 Jul 2025 14:20:34 -0400
Subject: [PATCH] fix: internationalize placeholder text in chat inputs

- Add askPagePlaceholder, askAnythingPlaceholder, enterTextToSpeakPlaceholder keys
- Replace hardcoded 'Ask about this page...', 'Ask anything...', 'Enter text to speak...'
- All input placeholders now use translation system
- Ensures consistent multilingual experience across all UI elements
---
 src/languages/en.js |  3 +++
 src/ui.js           | 12 ++++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 2cd5358..d449e2e 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -24,6 +24,9 @@ export const en = {
 	// Chat UI
 	sendButton: "Send",
 	typePlaceholder: "Type your message...",
+	askPagePlaceholder: "Ask about this page...",
+	askAnythingPlaceholder: "Ask anything...",
+	enterTextToSpeakPlaceholder: "Enter text to speak...",
 	clearChatConfirm: "Clear all conversation history?",
 
 	// Modal headers
diff --git a/src/ui.js b/src/ui.js
index 5fda7ea..cba3d5d 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -274,7 +274,7 @@ export function createFullInterface(container) {
 		chatContainer.innerHTML = `
 	    <div id="chat-box" style="min-height: 200px; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; overflow-y: auto; border-radius: 4px;"></div>
 	    <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-	      <input type="text" id="user-input" placeholder="Ask about this page..." style="flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
+	      <input type="text" id="user-input" placeholder="${getUIText("askPagePlaceholder")}" style="flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
 	      <button onclick="handleUserInput()" style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Send</button>
 	    </div>
 	  `;
@@ -283,7 +283,7 @@ export function createFullInterface(container) {
 		chatContainer.innerHTML = `
 	    <div id="chat-box" style="min-height: 200px; border: 1px solid rgba(128,128,128,0.3); padding: 10px; margin-bottom: 10px; overflow-y: auto; border-radius: 4px; background: rgba(0,0,0,0.05); backdrop-filter: blur(10px);"></div>
 	    <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-	      <input type="text" id="user-input" placeholder="Ask about this page..." style="flex: 1; padding: 8px; border: 1px solid rgba(128,128,128,0.3); border-radius: 4px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);">
+	      <input type="text" id="user-input" placeholder="${getUIText("askPagePlaceholder")}" style="flex: 1; padding: 8px; border: 1px solid rgba(128,128,128,0.3); border-radius: 4px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);">
 	      <button onclick="handleUserInput()" style="padding: 8px 16px; background: rgba(0,123,255,0.8); color: white; border: none; border-radius: 4px; cursor: pointer;">Send</button>
 	    </div>
 	  `;
@@ -358,7 +358,7 @@ export function createChatFeature(container) {
 		chatDiv.innerHTML = `
 	    <h4>AI Chat</h4>
 	    <div style="border: 1px solid #ccc; height: 150px; padding: 8px; margin: 5px 0; overflow-y: auto;" data-chat-box></div>
-	    <input type="text" placeholder="Ask anything..." style="width: 100%; margin: 2px 0;" data-chat-input>
+	    <input type="text" placeholder="${getUIText("askAnythingPlaceholder")}" style="width: 100%; margin: 2px 0;" data-chat-input>
 	    <button onclick="handleCustomChat(this)" style="width: 100%; padding: 6px;">Send</button>
 	  `;
 	} else {
@@ -366,7 +366,7 @@ export function createChatFeature(container) {
 		chatDiv.innerHTML = `
 	    <h4>AI Chat</h4>
 	    <div style="border: 1px solid rgba(128,128,128,0.3); height: 150px; padding: 8px; margin: 5px 0; overflow-y: auto; background: rgba(0,0,0,0.05); backdrop-filter: blur(10px);" data-chat-box></div>
-	    <input type="text" placeholder="Ask anything..." style="width: 100%; margin: 2px 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(128,128,128,0.3); backdrop-filter: blur(10px);" data-chat-input>
+	    <input type="text" placeholder="${getUIText("askAnythingPlaceholder")}" style="width: 100%; margin: 2px 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(128,128,128,0.3); backdrop-filter: blur(10px);" data-chat-input>
 	    <button onclick="handleCustomChat(this)" style="width: 100%; padding: 6px; background: rgba(0,123,255,0.8); color: white; border: none;">Send</button>
 	  `;
 	}
@@ -379,7 +379,7 @@ export function createTTSFeature(container) {
 	if (USE_CUSTOM_STYLING) {
 		ttsDiv.innerHTML = `
 	    <h4>Text to Speech</h4>
-	    <textarea placeholder="Enter text to speak..." style="width: 100%; height: 80px; margin: 5px 0;" data-tts-input></textarea>
+	    <textarea placeholder="${getUIText("enterTextToSpeakPlaceholder")}" style="width: 100%; height: 80px; margin: 5px 0;" data-tts-input></textarea>
 	    <button onclick="handleTTSFromElement(this)" style="width: 100%; padding: 6px;">🔊 Convert to Speech</button>
 	    <div data-tts-result style="margin: 5px 0;"></div>
 	  `;
@@ -387,7 +387,7 @@ export function createTTSFeature(container) {
 		// For blog sites without custom styling - use minimal, theme-agnostic styles
 		ttsDiv.innerHTML = `
 	    <h4>Text to Speech</h4>
-	    <textarea placeholder="Enter text to speak..." style="width: 100%; height: 80px; margin: 5px 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(128,128,128,0.3); backdrop-filter: blur(10px);" data-tts-input></textarea>
+	    <textarea placeholder="${getUIText("enterTextToSpeakPlaceholder")}" style="width: 100%; height: 80px; margin: 5px 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(128,128,128,0.3); backdrop-filter: blur(10px);" data-tts-input></textarea>
 	    <button onclick="handleTTSFromElement(this)" style="width: 100%; padding: 6px; background: rgba(0,123,255,0.8); color: white; border: none;">🔊 Convert to Speech</button>
 	    <div data-tts-result style="margin: 5px 0;"></div>
 	  `;