engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: internationalize placeholder text in chat inputs

Browse source 
- 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
This commit is contained in:
Russell Ballestrini 2025-07-03 14:20:34 -04:00
parent d3e6b78166
commit 9c9c5ec1c3
2 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/languages/en.js
View file

@ -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

12
src/ui.js
View file

@ -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>
`;