peisongxiao/wwcompanion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Added multi-env support

Browse Source
This commit is contained in:
Peisong Xiao
2026-01-17 17:09:47 -05:00
parent 2638e08453
commit e3c7cbba95
5 changed files with 475 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
wwcompanion-extension/settings.js
View File

@@ -1,11 +1,12 @@
const systemPromptInput = document.getElementById("systemPrompt");
const resumeInput = document.getElementById("resume");
const saveBtn = document.getElementById("saveBtn");
const addApiConfigBtn = document.getElementById("addApiConfigBtn");
const apiConfigsContainer = document.getElementById("apiConfigs");
const activeApiConfigSelect = document.getElementById("activeApiConfigSelect");
const addApiKeyBtn = document.getElementById("addApiKeyBtn");
const apiKeysContainer = document.getElementById("apiKeys");
const addEnvConfigBtn = document.getElementById("addEnvConfigBtn");
const envConfigsContainer = document.getElementById("envConfigs");
const activeEnvConfigSelect = document.getElementById("activeEnvConfigSelect");
const addTaskBtn = document.getElementById("addTaskBtn");
const tasksContainer = document.getElementById("tasks");
const statusEl = document.getElementById("status");
@@ -17,6 +18,8 @@ const OPENAI_DEFAULTS = {
apiKeyPrefix: "Bearer "
};
const DEFAULT_MODEL = "gpt-4o-mini";
const DEFAULT_SYSTEM_PROMPT =
"You are a precise, honest assistant. Be concise and avoid inventing details, be critical about evaluations. You should put in a small summary of all the sections at the end. You should answer in no longer than 3 sections including the summary. And remember to bold or italicize key points.";
function getStorage(keys) {
return new Promise((resolve) => chrome.storage.local.get(keys, resolve));
@@ -50,6 +53,18 @@ function newApiConfigId() {
return `config-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}
function newEnvConfigId() {
if (crypto?.randomUUID) return crypto.randomUUID();
return `env-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}
function buildChatUrlFromBase(baseUrl) {
const trimmed = (baseUrl || "").trim().replace(/\/+$/, "");
if (!trimmed) return "";
if (trimmed.endsWith("/chat/completions")) return trimmed;
return `${trimmed}/chat/completions`;
}
function collectNames(container, selector) {
if (!container) return [];
return [...container.querySelectorAll(selector)]
@@ -94,10 +109,10 @@ function setApiConfigAdvanced(card, isAdvanced) {
});
const resetBtn = card.querySelector(".reset-openai");
if (resetBtn) resetBtn.disabled = isAdvanced;
if (resetBtn) resetBtn.disabled = false;
const advancedBtn = card.querySelector(".advanced-toggle");
if (advancedBtn && isAdvanced) advancedBtn.remove();
if (advancedBtn) advancedBtn.disabled = isAdvanced;
}
function readApiConfigFromCard(card) {
@@ -165,7 +180,7 @@ function buildApiConfigCard(config) {
baseField.appendChild(baseInput);
const headerField = document.createElement("div");
headerField.className = "field basic-only";
headerField.className = "field advanced-only";
const headerLabel = document.createElement("label");
headerLabel.textContent = "API Key Header";
const headerInput = document.createElement("input");
@@ -177,7 +192,7 @@ function buildApiConfigCard(config) {
headerField.appendChild(headerInput);
const prefixField = document.createElement("div");
prefixField.className = "field basic-only";
prefixField.className = "field advanced-only";
const prefixLabel = document.createElement("label");
prefixLabel.textContent = "API Key Prefix";
const prefixInput = document.createElement("input");
@@ -235,17 +250,28 @@ function buildApiConfigCard(config) {
const actions = document.createElement("div");
actions.className = "api-config-actions";
if (!isAdvanced) {
const advancedBtn = document.createElement("button");
advancedBtn.type = "button";
advancedBtn.className = "ghost advanced-toggle";
advancedBtn.textContent = "Advanced Mode";
advancedBtn.addEventListener("click", () => {
setApiConfigAdvanced(card, true);
updateApiConfigSelect(activeApiConfigSelect.value);
});
actions.appendChild(advancedBtn);
}
const advancedBtn = document.createElement("button");
advancedBtn.type = "button";
advancedBtn.className = "ghost advanced-toggle";
advancedBtn.textContent = "Advanced Mode";
advancedBtn.addEventListener("click", () => {
if (card.classList.contains("is-advanced")) return;
urlInput.value = buildChatUrlFromBase(baseInput.value);
templateInput.value = [
"{",
` \"model\": \"${modelInput.value || DEFAULT_MODEL}\",`,
" \"stream\": true,",
" \"messages\": [",
" { \"role\": \"system\", \"content\": \"SYSTEM_PROMPT_GOES_HERE\" },",
" { \"role\": \"user\", \"content\": \"PROMPT_GOES_HERE\" }",
" ],",
" \"api_key\": \"API_KEY_GOES_HERE\"",
"}"
].join("\n");
setApiConfigAdvanced(card, true);
updateEnvApiOptions();
});
actions.appendChild(advancedBtn);
const duplicateBtn = document.createElement("button");
duplicateBtn.type = "button";
@@ -259,7 +285,7 @@ function buildApiConfigCard(config) {
const newCard = buildApiConfigCard(copy);
card.insertAdjacentElement("afterend", newCard);
updateApiConfigKeyOptions();
updateApiConfigSelect(newCard.dataset.id);
updateEnvApiOptions();
});
actions.appendChild(duplicateBtn);
@@ -268,14 +294,14 @@ function buildApiConfigCard(config) {
resetBtn.className = "ghost reset-openai";
resetBtn.textContent = "Reset to OpenAI";
resetBtn.addEventListener("click", () => {
if (card.classList.contains("is-advanced")) {
setStatus("Advanced mode cannot be reset to OpenAI.");
return;
}
baseInput.value = OPENAI_DEFAULTS.apiBaseUrl;
headerInput.value = OPENAI_DEFAULTS.apiKeyHeader;
prefixInput.value = OPENAI_DEFAULTS.apiKeyPrefix;
updateApiConfigSelect(activeApiConfigSelect.value);
modelInput.value = DEFAULT_MODEL;
urlInput.value = "";
templateInput.value = "";
setApiConfigAdvanced(card, false);
updateEnvApiOptions();
});
actions.appendChild(resetBtn);
@@ -285,11 +311,11 @@ function buildApiConfigCard(config) {
deleteBtn.textContent = "Delete";
deleteBtn.addEventListener("click", () => {
card.remove();
updateApiConfigSelect(activeApiConfigSelect.value);
updateEnvApiOptions();
});
actions.appendChild(deleteBtn);
const updateSelect = () => updateApiConfigSelect(activeApiConfigSelect.value);
const updateSelect = () => updateEnvApiOptions();
nameInput.addEventListener("input", updateSelect);
baseInput.addEventListener("input", updateSelect);
headerInput.addEventListener("input", updateSelect);
@@ -318,35 +344,6 @@ function collectApiConfigs() {
return cards.map((card) => readApiConfigFromCard(card));
}
function updateApiConfigSelect(preferredId) {
const configs = collectApiConfigs();
activeApiConfigSelect.innerHTML = "";
if (!configs.length) {
const option = document.createElement("option");
option.value = "";
option.textContent = "No configs configured";
activeApiConfigSelect.appendChild(option);
activeApiConfigSelect.disabled = true;
return;
}
activeApiConfigSelect.disabled = false;
const selectedId =
preferredId && configs.some((config) => config.id === preferredId)
? preferredId
: configs[0].id;
for (const config of configs) {
const option = document.createElement("option");
option.value = config.id;
option.textContent = config.name || "Default";
activeApiConfigSelect.appendChild(option);
}
activeApiConfigSelect.value = selectedId;
}
function buildApiKeyCard(entry) {
const card = document.createElement("div");
card.className = "api-key-card";
@@ -458,6 +455,170 @@ function updateApiConfigKeyOptions() {
});
}
function buildEnvConfigCard(config) {
const card = document.createElement("div");
card.className = "env-config-card";
card.dataset.id = config.id || newEnvConfigId();
const nameField = document.createElement("div");
nameField.className = "field";
const nameLabel = document.createElement("label");
nameLabel.textContent = "Name";
const nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.value = config.name || "";
nameInput.className = "env-config-name";
nameField.appendChild(nameLabel);
nameField.appendChild(nameInput);
const apiField = document.createElement("div");
apiField.className = "field";
const apiLabel = document.createElement("label");
apiLabel.textContent = "API config";
const apiSelect = document.createElement("select");
apiSelect.className = "env-config-api-select";
apiSelect.dataset.preferred = config.apiConfigId || "";
apiField.appendChild(apiLabel);
apiField.appendChild(apiSelect);
const promptField = document.createElement("div");
promptField.className = "field";
const promptLabel = document.createElement("label");
promptLabel.textContent = "System prompt";
const promptInput = document.createElement("textarea");
promptInput.rows = 8;
promptInput.value = config.systemPrompt || "";
promptInput.className = "env-config-prompt";
promptField.appendChild(promptLabel);
promptField.appendChild(promptInput);
const actions = document.createElement("div");
actions.className = "env-config-actions";
const duplicateBtn = document.createElement("button");
duplicateBtn.type = "button";
duplicateBtn.className = "ghost duplicate";
duplicateBtn.textContent = "Duplicate";
duplicateBtn.addEventListener("click", () => {
const names = collectNames(envConfigsContainer, ".env-config-name");
const copy = collectEnvConfigs().find((entry) => entry.id === card.dataset.id) || {
id: card.dataset.id,
name: nameInput.value || "Default",
apiConfigId: apiSelect.value || "",
systemPrompt: promptInput.value || ""
};
const newCard = buildEnvConfigCard({
id: newEnvConfigId(),
name: ensureUniqueName(`${copy.name || "Default"} Copy`, names),
apiConfigId: copy.apiConfigId,
systemPrompt: copy.systemPrompt
});
card.insertAdjacentElement("afterend", newCard);
updateEnvApiOptions();
updateEnvConfigSelect(newCard.dataset.id);
});
const deleteBtn = document.createElement("button");
deleteBtn.type = "button";
deleteBtn.className = "ghost delete";
deleteBtn.textContent = "Delete";
deleteBtn.addEventListener("click", () => {
card.remove();
updateEnvConfigSelect(activeEnvConfigSelect.value);
});
actions.appendChild(duplicateBtn);
actions.appendChild(deleteBtn);
nameInput.addEventListener("input", () =>
updateEnvConfigSelect(activeEnvConfigSelect.value)
);
card.appendChild(nameField);
card.appendChild(apiField);
card.appendChild(promptField);
card.appendChild(actions);
return card;
}
function collectEnvConfigs() {
const cards = [...envConfigsContainer.querySelectorAll(".env-config-card")];
return cards.map((card) => {
const nameInput = card.querySelector(".env-config-name");
const apiSelect = card.querySelector(".env-config-api-select");
const promptInput = card.querySelector(".env-config-prompt");
return {
id: card.dataset.id || newEnvConfigId(),
name: (nameInput?.value || "Default").trim(),
apiConfigId: apiSelect?.value || "",
systemPrompt: (promptInput?.value || "").trim()
};
});
}
function updateEnvConfigSelect(preferredId) {
const configs = collectEnvConfigs();
activeEnvConfigSelect.innerHTML = "";
if (!configs.length) {
const option = document.createElement("option");
option.value = "";
option.textContent = "No environments configured";
activeEnvConfigSelect.appendChild(option);
activeEnvConfigSelect.disabled = true;
return;
}
activeEnvConfigSelect.disabled = false;
const selectedId =
preferredId && configs.some((config) => config.id === preferredId)
? preferredId
: configs[0].id;
for (const config of configs) {
const option = document.createElement("option");
option.value = config.id;
option.textContent = config.name || "Default";
activeEnvConfigSelect.appendChild(option);
}
activeEnvConfigSelect.value = selectedId;
}
function updateEnvApiOptions() {
const apiConfigs = collectApiConfigs();
const selects = envConfigsContainer.querySelectorAll(".env-config-api-select");
selects.forEach((select) => {
const preferred = select.dataset.preferred || select.value;
select.innerHTML = "";
if (!apiConfigs.length) {
const option = document.createElement("option");
option.value = "";
option.textContent = "No API configs configured";
select.appendChild(option);
select.disabled = true;
return;
}
select.disabled = false;
for (const config of apiConfigs) {
const option = document.createElement("option");
option.value = config.id;
option.textContent = config.name || "Default";
select.appendChild(option);
}
if (preferred && apiConfigs.some((config) => config.id === preferred)) {
select.value = preferred;
} else {
select.value = apiConfigs[0].id;
}
select.dataset.preferred = select.value;
});
}
function buildTaskCard(task) {
const card = document.createElement("div");
card.className = "task-card";
@@ -619,6 +780,8 @@ async function loadSettings() {
activeApiKeyId = "",
apiConfigs = [],
activeApiConfigId = "",
envConfigs = [],
activeEnvConfigId = "",
apiBaseUrl = "",
apiKeyHeader = "",
apiKeyPrefix = "",
@@ -633,6 +796,8 @@ async function loadSettings() {
"activeApiKeyId",
"apiConfigs",
"activeApiConfigId",
"envConfigs",
"activeEnvConfigId",
"apiBaseUrl",
"apiKeyHeader",
"apiKeyPrefix",
@@ -643,7 +808,6 @@ async function loadSettings() {
"theme"
]);
systemPromptInput.value = systemPrompt;
resumeInput.value = resume;
themeSelect.value = theme;
applyTheme(theme);
@@ -727,7 +891,57 @@ async function loadSettings() {
apiConfigsContainer.appendChild(buildApiConfigCard(config));
}
updateApiConfigKeyOptions();
updateApiConfigSelect(resolvedActiveConfigId);
let resolvedEnvConfigs = Array.isArray(envConfigs) ? envConfigs : [];
let resolvedActiveEnvId = activeEnvConfigId;
const fallbackApiConfigId =
resolvedActiveConfigId || resolvedConfigs[0]?.id || "";
if (!resolvedEnvConfigs.length) {
const migrated = {
id: newEnvConfigId(),
name: "Default",
apiConfigId: fallbackApiConfigId,
systemPrompt: systemPrompt || DEFAULT_SYSTEM_PROMPT
};
resolvedEnvConfigs = [migrated];
resolvedActiveEnvId = migrated.id;
await chrome.storage.local.set({
envConfigs: resolvedEnvConfigs,
activeEnvConfigId: resolvedActiveEnvId
});
} else {
const withDefaults = resolvedEnvConfigs.map((config) => ({
...config,
apiConfigId: config.apiConfigId || fallbackApiConfigId,
systemPrompt: config.systemPrompt ?? ""
}));
const needsUpdate = withDefaults.some((config, index) => {
const original = resolvedEnvConfigs[index];
return (
config.apiConfigId !== original.apiConfigId ||
(config.systemPrompt || "") !== (original.systemPrompt || "")
);
});
if (needsUpdate) {
resolvedEnvConfigs = withDefaults;
await chrome.storage.local.set({ envConfigs: resolvedEnvConfigs });
}
const hasActive = resolvedEnvConfigs.some(
(config) => config.id === resolvedActiveEnvId
);
if (!hasActive) {
resolvedActiveEnvId = resolvedEnvConfigs[0].id;
await chrome.storage.local.set({ activeEnvConfigId: resolvedActiveEnvId });
}
}
envConfigsContainer.innerHTML = "";
for (const config of resolvedEnvConfigs) {
envConfigsContainer.appendChild(buildEnvConfigCard(config));
}
updateEnvApiOptions();
updateEnvConfigSelect(resolvedActiveEnvId);
tasksContainer.innerHTML = "";
if (!tasks.length) {
@@ -748,10 +962,14 @@ async function saveSettings() {
const tasks = collectTasks();
const apiKeys = collectApiKeys();
const apiConfigs = collectApiConfigs();
const activeApiConfigId =
apiConfigs.find((entry) => entry.id === activeApiConfigSelect.value)?.id ||
apiConfigs[0]?.id ||
const envConfigs = collectEnvConfigs();
const activeEnvConfigId =
envConfigs.find((entry) => entry.id === activeEnvConfigSelect.value)?.id ||
envConfigs[0]?.id ||
"";
const activeEnv = envConfigs.find((entry) => entry.id === activeEnvConfigId);
const activeApiConfigId =
activeEnv?.apiConfigId || apiConfigs[0]?.id || "";
const activeConfig = apiConfigs.find((entry) => entry.id === activeApiConfigId);
const activeApiKeyId =
activeConfig?.apiKeyId ||
@@ -762,7 +980,9 @@ async function saveSettings() {
activeApiKeyId,
apiConfigs,
activeApiConfigId,
systemPrompt: systemPromptInput.value,
envConfigs,
activeEnvConfigId,
systemPrompt: activeEnv?.systemPrompt || "",
resume: resumeInput.value,
tasks,
theme: themeSelect.value
@@ -821,11 +1041,32 @@ addApiConfigBtn.addEventListener("click", () => {
apiConfigsContainer.appendChild(newCard);
}
updateApiConfigKeyOptions();
updateApiConfigSelect(activeApiConfigSelect.value);
updateEnvApiOptions();
});
activeApiConfigSelect.addEventListener("change", () => {
updateApiConfigSelect(activeApiConfigSelect.value);
addEnvConfigBtn.addEventListener("click", () => {
const name = buildUniqueDefaultName(
collectNames(envConfigsContainer, ".env-config-name")
);
const fallbackApiConfigId = collectApiConfigs()[0]?.id || "";
const newCard = buildEnvConfigCard({
id: newEnvConfigId(),
name,
apiConfigId: fallbackApiConfigId,
systemPrompt: DEFAULT_SYSTEM_PROMPT
});
const first = envConfigsContainer.firstElementChild;
if (first) {
envConfigsContainer.insertBefore(newCard, first);
} else {
envConfigsContainer.appendChild(newCard);
}
updateEnvApiOptions();
updateEnvConfigSelect(newCard.dataset.id);
});
activeEnvConfigSelect.addEventListener("change", () => {
updateEnvConfigSelect(activeEnvConfigSelect.value);
});
themeSelect.addEventListener("change", () => applyTheme(themeSelect.value));