- HotMic v1.0.0
+ HotMic v0.0.2
@@ -636,11 +726,25 @@
Post-Processing
// Application references
const elements = {
- // API Key elements
+ // API Provider elements
+ apiProvider: document.getElementById('apiProvider'),
+ groqApiSection: document.getElementById('groqApiSection'),
+ openaiApiSection: document.getElementById('openaiApiSection'),
+
+ // Groq API elements
+ groqBaseUrl: document.getElementById('groqBaseUrl'),
+ groqModel: document.getElementById('groqModel'),
apiKeyInput: document.getElementById('apiKey'),
saveApiKeyBtn: document.getElementById('saveApiKey'),
apiKeyStatus: document.getElementById('apiKeyStatus'),
+ // OpenAI API elements
+ openaiBaseUrl: document.getElementById('openaiBaseUrl'),
+ openaiModel: document.getElementById('openaiModel'),
+ openaiApiKeyInput: document.getElementById('openaiApiKey'),
+ saveOpenaiApiKeyBtn: document.getElementById('saveOpenaiApiKey'),
+ openaiApiKeyStatus: document.getElementById('openaiApiKeyStatus'),
+
// Shortcut elements
currentShortcut: document.getElementById('currentShortcut'),
editShortcut: document.getElementById('editShortcut'),
@@ -654,13 +758,20 @@
Post-Processing
enablePostProcessing: document.getElementById('enablePostProcessing'),
prompt: document.getElementById('prompt'),
resetPrompt: document.getElementById('resetPrompt'),
- promptStatus: document.getElementById('promptStatus')
+ promptStatus: document.getElementById('promptStatus'),
+
+ // History elements
+ historyEnabled: document.getElementById('historyEnabled'),
+ clearHistory: document.getElementById('clearHistory'),
+ encryptionStatus: document.getElementById('encryptionStatus'),
+ historyList: document.getElementById('historyList')
};
// Application state
const state = {
keys: new Set(),
- listeningForShortcut: false
+ listeningForShortcut: false,
+ apiProvider: 'groq' // Default provider
};
/**
@@ -670,15 +781,61 @@
Post-Processing
// Load settings from store
async function loadSettings() {
try {
+ await loadApiProvider();
await loadApiKey();
+ await loadOpenaiApiKey();
+ await loadBaseUrls();
+ await loadModels();
await loadShortcut();
await loadPromptSettings();
+ await loadHistorySettings();
await loadHistory();
} catch (error) {
console.error('Error loading settings:', error);
}
}
+ // Load API provider from store
+ async function loadApiProvider() {
+ const provider = await window.api.getApiProvider();
+ if (provider) {
+ elements.apiProvider.value = provider;
+ state.apiProvider = provider;
+ updateApiSectionVisibility();
+ }
+ }
+
+ // Load base URLs from store
+ async function loadBaseUrls() {
+ const groqBaseUrl = await window.api.getGroqBaseUrl();
+ if (groqBaseUrl) {
+ elements.groqBaseUrl.value = groqBaseUrl;
+ }
+
+ const openaiBaseUrl = await window.api.getOpenaiBaseUrl();
+ if (openaiBaseUrl) {
+ elements.openaiBaseUrl.value = openaiBaseUrl;
+ }
+
+ }
+
+ // Load models from store
+ async function loadModels() {
+ try {
+ const groqModel = await window.api.getGroqModel();
+ if (groqModel) {
+ elements.groqModel.value = groqModel;
+ }
+
+ const openaiModel = await window.api.getOpenaiModel();
+ if (openaiModel) {
+ elements.openaiModel.value = openaiModel;
+ }
+ } catch (error) {
+ console.error('Error loading models:', error);
+ }
+ }
+
// Load API key from store
async function loadApiKey() {
const apiKey = await window.api.getApiKey();
@@ -688,6 +845,29 @@
Post-Processing
}
}
+ // Load OpenAI API key from store
+ async function loadOpenaiApiKey() {
+ const apiKey = await window.api.getOpenaiApiKey();
+ if (apiKey) {
+ elements.openaiApiKeyInput.value = apiKey;
+ showStatus(elements.openaiApiKeyStatus, 'API key is set', 'success');
+ }
+ }
+
+ // Update API section visibility based on selected provider
+ function updateApiSectionVisibility() {
+ // Hide all sections first
+ elements.groqApiSection.style.display = 'none';
+ elements.openaiApiSection.style.display = 'none';
+
+ // Show selected provider section
+ if (state.apiProvider === 'groq') {
+ elements.groqApiSection.style.display = 'block';
+ } else if (state.apiProvider === 'openai') {
+ elements.openaiApiSection.style.display = 'block';
+ }
+ }
+
// Load shortcut from store
async function loadShortcut() {
const shortcut = await window.api.getShortcut();
@@ -718,17 +898,42 @@
Post-Processing
// Save API key to store
async function saveApiKey() {
const apiKey = elements.apiKeyInput.value.trim();
+ const baseUrl = elements.groqBaseUrl.value.trim();
+ const model = elements.groqModel.value;
- if (!apiKey) {
- showStatus(elements.apiKeyStatus, 'Please enter an API key', 'error');
- return;
+ try {
+ await window.api.setApiKey(apiKey);
+ await window.api.setGroqBaseUrl(baseUrl);
+ await window.api.setGroqModel(model);
+
+ if (apiKey) {
+ showStatus(elements.apiKeyStatus, 'Settings saved successfully', 'success');
+ } else {
+ showStatus(elements.apiKeyStatus, 'API key removed', 'success');
+ }
+ } catch (error) {
+ showStatus(elements.apiKeyStatus, `Error saving settings: ${error.message}`, 'error');
}
+ }
+
+ // Save OpenAI API key to store
+ async function saveOpenaiApiKey() {
+ const apiKey = elements.openaiApiKeyInput.value.trim();
+ const baseUrl = elements.openaiBaseUrl.value.trim();
+ const model = elements.openaiModel.value;
try {
- await window.api.setApiKey(apiKey);
- showStatus(elements.apiKeyStatus, 'API key saved successfully', 'success');
+ await window.api.setOpenaiApiKey(apiKey);
+ await window.api.setOpenaiBaseUrl(baseUrl);
+ await window.api.setOpenaiModel(model);
+
+ if (apiKey) {
+ showStatus(elements.openaiApiKeyStatus, 'Settings saved successfully', 'success');
+ } else {
+ showStatus(elements.openaiApiKeyStatus, 'API key removed', 'success');
+ }
} catch (error) {
- showStatus(elements.apiKeyStatus, `Error saving API key: ${error.message}`, 'error');
+ showStatus(elements.openaiApiKeyStatus, `Error saving settings: ${error.message}`, 'error');
}
}
@@ -892,8 +1097,12 @@
Raw Transcript
// Load and display history
async function loadHistory() {
const history = await window.api.getHistory();
- const historyList = document.getElementById('historyList');
- historyList.innerHTML = '';
+ elements.historyList.innerHTML = '';
+
+ if (history.length === 0) {
+ elements.historyList.innerHTML = '
No history items
';
+ return;
+ }
history.forEach(item => {
const div = document.createElement('div');
@@ -908,7 +1117,7 @@
Raw Transcript
${preview.substring(0, 100)}${preview.length > 100 ? '...' : ''}
`;
- historyList.appendChild(div);
+ elements.historyList.appendChild(div);
});
}
@@ -942,6 +1151,24 @@
Raw Transcript
}
}
+ // Load history settings
+ async function loadHistorySettings() {
+ try {
+ const settings = await window.api.getHistorySettings();
+ elements.historyEnabled.checked = settings.enabled;
+
+ // Update encryption status
+ const isEncrypted = await window.api.isHistoryEncrypted();
+ if (isEncrypted) {
+ elements.encryptionStatus.innerHTML = '🔒 History is encrypted';
+ } else {
+ elements.encryptionStatus.innerHTML = '⚠️ History is not encrypted';
+ }
+ } catch (error) {
+ console.error('Error loading history settings:', error);
+ }
+ }
+
/**
* UI Helpers
*/
@@ -953,66 +1180,110 @@
Raw Transcript
}
/**
- * Event Binding
+ * Event Listeners
*/
+ function setupEventListeners() {
+ // Tab navigation
+ const tabButtons = document.querySelectorAll('.tab-button');
+ const tabPanels = document.querySelectorAll('.tab-panel');
+
+ tabButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const tabId = button.getAttribute('data-tab');
+
+ // Update active tab button
+ tabButtons.forEach(btn => btn.classList.remove('active'));
+ button.classList.add('active');
+
+ // Show selected tab panel
+ tabPanels.forEach(panel => panel.style.display = 'none');
+ document.getElementById(`${tabId}-panel`).style.display = 'block';
+ });
+ });
+
+ // Provider selection
+ elements.apiProvider.addEventListener('change', function() {
+ state.apiProvider = this.value;
+ window.api.setApiProvider(this.value);
+ updateApiSectionVisibility();
+ });
- // Bind all event listeners
- function bindEventListeners() {
// API Key events
elements.saveApiKeyBtn.addEventListener('click', saveApiKey);
+ elements.saveOpenaiApiKeyBtn.addEventListener('click', saveOpenaiApiKey);
+
+ // Model and URL changes
+ elements.groqBaseUrl.addEventListener('change', () => elements.saveApiKeyBtn.click());
+ elements.groqModel.addEventListener('change', () => elements.saveApiKeyBtn.click());
+
+ elements.openaiBaseUrl.addEventListener('change', () => elements.saveOpenaiApiKeyBtn.click());
+ elements.openaiModel.addEventListener('change', () => elements.saveOpenaiApiKeyBtn.click());
// Shortcut events
elements.editShortcut.addEventListener('click', startShortcutListener);
- elements.cancelShortcut.addEventListener('click', cancelShortcutChange);
elements.saveShortcut.addEventListener('click', saveShortcut);
+ elements.cancelShortcut.addEventListener('click', cancelShortcutChange);
- // Key events for shortcut recording
+ // Setup key event listeners for capturing shortcut
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
- // Post-processing settings
+ // Post-processing events
elements.enablePostProcessing.addEventListener('change', () => {
updatePromptSectionState();
savePromptSettings();
});
-
elements.prompt.addEventListener('change', savePromptSettings);
elements.resetPrompt.addEventListener('click', resetPrompt);
+ // History events
+ elements.historyEnabled.addEventListener('change', toggleHistoryEnabled);
+ elements.clearHistory.addEventListener('click', clearHistoryConfirm);
+
// Error handling
window.api.onShortcutError && window.api.onShortcutError((message) => {
showStatus(elements.shortcutStatus, `Error: ${message}`, 'error');
});
}
- // Add tab switching logic
- function setupTabs() {
- const tabButtons = document.querySelectorAll('.tab-button');
-
- tabButtons.forEach(button => {
- button.addEventListener('click', () => {
- // Remove active class from all buttons and panels
- tabButtons.forEach(btn => btn.classList.remove('active'));
- document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
-
- // Add active class to clicked button and corresponding panel
- button.classList.add('active');
- document.getElementById(`${button.dataset.tab}-panel`).classList.add('active');
- });
- });
- }
-
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
loadSettings();
- bindEventListeners();
- setupTabs();
+ setupEventListeners();
// Listen for history updates
window.api.onHistoryUpdate(() => {
loadHistory();
});
});
+
+ // Toggle history enabled setting
+ async function toggleHistoryEnabled() {
+ try {
+ await window.api.setHistoryEnabled(elements.historyEnabled.checked);
+ // Reload history if enabled
+ if (elements.historyEnabled.checked) {
+ await loadHistory();
+ } else {
+ // Clear display but not actual history
+ elements.historyList.innerHTML = '
History is disabled
';
+ }
+ } catch (error) {
+ console.error('Error saving history settings:', error);
+ }
+ }
+
+ // Show confirmation before clearing history
+ async function clearHistoryConfirm() {
+ if (confirm('Are you sure you want to clear all history? This cannot be undone.')) {
+ try {
+ await window.api.clearHistory();
+ await loadHistory();
+ } catch (error) {
+ console.error('Error clearing history:', error);
+ }
+ }
+ }