From 63cb565dc56ff7ef727b023512988c6dadcccde5 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 3 Jul 2025 13:31:11 -0400
Subject: [PATCH] fix: connect UI refresh functions for complete auto-refresh
 support

---
 src/ui-translations.js |  4 ++++
 src/ui.js              | 29 +++++++++++++++++++----------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/ui-translations.js b/src/ui-translations.js
index f598fbe..6ddf543 100644
--- a/src/ui-translations.js
+++ b/src/ui-translations.js
@@ -37,6 +37,10 @@ export function setUserLanguagePreference(langCode) {
 		console.log("Language preference saved:", langCode);
 		// Trigger UI refresh when language changes
 		refreshUILanguage();
+		// Also trigger the UI-specific refresh function if available
+		if (typeof window !== "undefined" && window.refreshUILanguage) {
+			window.refreshUILanguage();
+		}
 	} catch (error) {
 		console.warn("Failed to save language preference:", error);
 	}
diff --git a/src/ui.js b/src/ui.js
index 9f41945..a80c46a 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -15,6 +15,7 @@ import {
 	getUserLanguagePreference,
 	setUserLanguagePreference,
 } from "./ui-translations.js";
+import { NATIVE_LANGUAGE_NAMES } from "./translation.js";
 
 // Refresh UI elements when language preference changes
 function refreshUILanguage() {
@@ -2783,7 +2784,11 @@ You have complete knowledge of this page content and can reference any details,
 			const pageTitle = document.title || window.location.hostname;
 
 			// FIRST: Generate intro message with specialized intro system prompt
-			const introSystemPrompt = `You are Hermes AI, powered by Nous Research, embedded on a webpage. Your task is to generate a warm, welcoming 3-paragraph introduction that shows you understand the specific page the user is viewing.
+			// Get user's preferred language and localize the system prompt
+			const userLang = getUserLanguagePreference();
+			const languageName = NATIVE_LANGUAGE_NAMES[userLang] || "English";
+			
+			const introSystemPrompt = `${getUIText("systemPromptIntro")}
 
 PAGE INFORMATION:
 Title: "${pageTitle}"
@@ -2793,11 +2798,11 @@ FULL PAGE CONTENT:
 ${pageContent}
 
 Generate a 3-paragraph introduction that:
-1. Introduces yourself as Hermes AI and acknowledges the specific page/content
-2. Explains how you can help with this page content and related topics  
-3. Invites questions and explains your capabilities
+${getUIText("systemPromptTask1")}
+${getUIText("systemPromptTask2")}
+${getUIText("systemPromptTask3")}
 
-Reference specific details from the page content to show understanding.`;
+${getUIText("systemPromptInstructions")} ${languageName}.`;
 
 			const introPrompt = "Generate the welcoming introduction message now.";
 
@@ -4063,7 +4068,8 @@ export function openTTSModal() {
 	const speedValue = document.createElement("span");
 	speedValue.textContent = "0.9";
 
-	speedLabel.textContent = `Speed: ${speedValue.textContent}`;
+	speedLabel.textContent = `${getUIText("speedLabel")} ${speedValue.textContent}`;
+	speedLabel.setAttribute("data-i18n", "speedLabel");
 	const speedSlider = document.createElement("input");
 	speedSlider.type = "range";
 	speedSlider.min = "0.25";
@@ -4073,14 +4079,15 @@ export function openTTSModal() {
 
 	speedSlider.oninput = () => {
 		speedValue.textContent = speedSlider.value;
-		speedLabel.textContent = `Speed: ${speedSlider.value}`;
+		speedLabel.textContent = `${getUIText("speedLabel")} ${speedSlider.value}`;
 	};
 
 	article.appendChild(speedLabel);
 	article.appendChild(speedSlider);
 
 	const playButton = document.createElement("button");
-	playButton.textContent = "Play Text";
+	playButton.textContent = getUIText("playText");
+	playButton.setAttribute("data-i18n", "playText");
 	if (USE_CUSTOM_STYLING) {
 		playButton.style.cssText = `
       padding: 12px 24px;
@@ -4313,12 +4320,14 @@ export function openTranslateModal() {
 		"display: flex; gap: 10px; margin-bottom: 20px;";
 
 	const pageTab = document.createElement("button");
-	pageTab.textContent = "📄 Translate Page";
+	pageTab.textContent = getUIText("translatePageTab");
+	pageTab.setAttribute("data-i18n", "translatePageTab");
 	pageTab.style.cssText =
 		"flex: 1; padding: 10px; border: 2px solid #4CAF50; border-radius: 6px; background: #4CAF50; color: white; cursor: pointer;";
 
 	const customTab = document.createElement("button");
-	customTab.textContent = "✏️ Custom Text";
+	customTab.textContent = getUIText("customTextTab");
+	customTab.setAttribute("data-i18n", "customTextTab");
 	customTab.style.cssText =
 		"flex: 1; padding: 10px; border: 2px solid #4CAF50; border-radius: 6px; background: white; color: #4CAF50; cursor: pointer;";