feat: ai widget - improve style

This commit is contained in:
Azgaar 2024-09-22 14:29:38 +02:00
parent d94defaa18
commit 85a6bc9c66
5 changed files with 24 additions and 7 deletions

View file

@ -2388,8 +2388,10 @@ svg.button {
}
}
#chat-widget-container {
#chat-widget-minimized {
animation: fadeIn 1s ease-in;
transform: scale(0.65);
opacity: var(--bg-opacity);
}
@keyframes fadeIn {
@ -2397,7 +2399,7 @@ svg.button {
opacity: 0;
}
to {
opacity: 1;
opacity: var(--bg-opacity);
}
}

View file

@ -138,7 +138,7 @@
}
</style>
<link rel="preload" href="index.css?v=1.104.0" as="style" onload="this.onload=null; this.rel='stylesheet'" />
<link rel="preload" href="index.css?v=1.105.0" as="style" onload="this.onload=null; this.rel='stylesheet'" />
<link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
<link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
</head>

16
main.js
View file

@ -374,8 +374,20 @@ function toggleAssistant() {
const showAssistant = byId("azgaarAssistant").value === "show";
if (showAssistant) {
if (isAssistantLoaded) assistantContainer.style.display = "block";
else import("./libs/openwidget.min.js").then(() => (isAssistantLoaded = true));
if (isAssistantLoaded) {
assistantContainer.style.display = "block";
} else {
import("./libs/openwidget.min.js").then(() => {
isAssistantLoaded = true;
setTimeout(() => {
const bubble = byId("chat-widget-minimized");
if (bubble) {
bubble.dataset.tip = "Click to open the Assistant";
bubble.on("mouseover", showDataTip);
}
}, 5000);
});
}
} else if (isAssistantLoaded) {
assistantContainer.style.display = "none";
}

View file

@ -447,6 +447,7 @@ function changeDialogsTheme(themeColor, transparency) {
};
const theme = [
{name: "--bg-opacity", value: alpha},
{name: "--bg-main", h, s, l, alpha},
{name: "--bg-lighter", h, s, l: l + 0.02, alpha},
{name: "--bg-light", h, s: s - 0.02, l: l + 0.06, alpha},
@ -459,8 +460,9 @@ function changeDialogsTheme(themeColor, transparency) {
];
const sx = document.documentElement.style;
theme.forEach(({name, h, s, l, alpha}) => {
sx.setProperty(name, getRGBA(h, s, l, alpha));
theme.forEach(({name, value, h, s, l, alpha}) => {
if (value !== undefined) sx.setProperty(name, value);
else sx.setProperty(name, getRGBA(h, s, l, alpha));
});
}

View file

@ -36,6 +36,7 @@ if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format o
<ul>
<strong>Latest changes:</strong>
<li>Azgaar Bot to answer questions and provide help</li>
<li>Labels: ability to set letter spacing</li>
<li>Zones update</li>
<li>Notes Editor: on-demand AI text generation</li>