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

restructure settings panel with two columns and add model name field to API config

Browse source
This commit is contained in:
Russell Ballestrini 2025-07-10 23:09:47 -04:00
parent 10c5352739
commit d12428c267
3 changed files with 60 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/uncloseai-embed-modal.js
View file

@ -490,12 +490,30 @@ async function openUncloseaiEmbeddedModalNew() {
apiKeyContainer.appendChild(apiKeyLabel);
apiKeyContainer.appendChild(apiKeyInput);
// Model Name input
const modelNameContainer = document.createElement("div");
modelNameContainer.className = "uncloseai-input-container";
const modelNameLabel = document.createElement("label");
modelNameLabel.textContent = "Model Name:";
modelNameLabel.className = "uncloseai-input-label";
const modelNameInput = document.createElement("input");
modelNameInput.type = "text";
modelNameInput.placeholder = "gpt-4";
modelNameInput.value = localStorage.getItem("customModelName") || "";
modelNameInput.className = "uncloseai-input";
modelNameContainer.appendChild(modelNameLabel);
modelNameContainer.appendChild(modelNameInput);
// API Config container for inputs
const apiConfigInputs = document.createElement("div");
apiConfigInputs.className = "uncloseai-api-inputs";
apiConfigInputs.style.display = customAPICheckbox.checked ? "block" : "none";
apiConfigInputs.appendChild(baseURLContainer);
apiConfigInputs.appendChild(apiKeyContainer);
apiConfigInputs.appendChild(modelNameContainer);
// Event handlers
customAPICheckbox.onchange = () => {
@ -512,6 +530,10 @@ async function openUncloseaiEmbeddedModalNew() {
localStorage.setItem("customAPIKey", apiKeyInput.value);
};
modelNameInput.onchange = () => {
localStorage.setItem("customModelName", modelNameInput.value);
};
apiConfigSection.appendChild(apiConfigLabel);
apiConfigSection.appendChild(customAPIToggle);
apiConfigSection.appendChild(apiConfigInputs);
@ -561,11 +583,23 @@ async function openUncloseaiEmbeddedModalNew() {
actionsSection.appendChild(actionsLabel);
actionsSection.appendChild(actionsGrid);
// Create left and right columns
const leftColumn = document.createElement("div");
leftColumn.className = "uncloseai-settings-column";
leftColumn.appendChild(modelSection);
leftColumn.appendChild(voiceSection);
leftColumn.appendChild(languageSection);
const rightColumn = document.createElement("div");
rightColumn.className = "uncloseai-settings-column";
rightColumn.appendChild(apiConfigSection);
// Quick actions span both columns
actionsSection.className = "uncloseai-section uncloseai-actions-full-width";
settingsPanel.appendChild(actionsSection);
settingsPanel.appendChild(modelSection);
settingsPanel.appendChild(voiceSection);
settingsPanel.appendChild(languageSection);
settingsPanel.appendChild(apiConfigSection);
settingsPanel.appendChild(leftColumn);
settingsPanel.appendChild(rightColumn);
// Load and save settings panel state
let settingsOpen = localStorage.getItem("hermesSettingsOpen") === "true";

14
src/uncloseai-modal-builtin.css
View file

@ -109,11 +109,20 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
.uncloseai-modal-settings.open {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 20px;
align-content: start;
}
.uncloseai-actions-full-width {
grid-column: 1 / -1;
}
.uncloseai-settings-column {
display: block;
}
/* Dark theme settings panel */
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
background: rgb(26, 26, 26);
@ -991,7 +1000,8 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
.uncloseai-modal-settings.open {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 20px;
align-content: start;
}

11
src/uncloseai-modal-pico.css
View file

@ -130,11 +130,20 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
.uncloseai-modal-settings.open {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 20px;
align-content: start;
}
.uncloseai-actions-full-width {
grid-column: 1 / -1;
}
.uncloseai-settings-column {
display: block;
}
/* Dark theme settings panel */
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
background: rgb(26, 26, 26);