46 lines
2.3 KiB
JavaScript
46 lines
2.3 KiB
JavaScript
import {get} from "./api.js";
|
|
|
|
const grid = document.getElementById("personalityGrid");
|
|
const icons = {spark:"✥", quill:"✒", code:"⌘", flask:"⚗", "book-open":"▤", logic:"∴"};
|
|
const result = await get("/personalities");
|
|
if (result.error) {
|
|
grid.textContent = result.error;
|
|
} else {
|
|
for (const item of result.personalities || []) {
|
|
const card = document.createElement("article");
|
|
card.className = "settings-panel personality-card";
|
|
card.style.setProperty("--personality-accent", item.accentColor);
|
|
const icon = document.createElement("div");
|
|
icon.className = "personality-icon";
|
|
icon.textContent = icons[item.icon] || "✦";
|
|
icon.title = item.name;
|
|
icon.setAttribute("aria-hidden", "true");
|
|
const specialization = document.createElement("p");
|
|
specialization.className = "personality-specialization";
|
|
specialization.textContent = `${item.specialization}${item.isDefault ? " · Default" : ""}`;
|
|
const name = document.createElement("h2");
|
|
name.textContent = item.name;
|
|
name.title = `Inspired by ${item.historicalInspiration}`;
|
|
const description = document.createElement("p");
|
|
description.className = "subtitle";
|
|
description.textContent = item.description;
|
|
const details = document.createElement("details");
|
|
details.className = "personality-details";
|
|
const summary = document.createElement("summary");
|
|
summary.textContent = "Learn more";
|
|
const longDescription = document.createElement("p");
|
|
longDescription.textContent = item.longDescription;
|
|
const inspiration = document.createElement("p");
|
|
inspiration.className = "personality-inspiration";
|
|
inspiration.textContent = `Thematic inspiration: ${item.historicalInspiration}`;
|
|
details.append(summary, longDescription, inspiration);
|
|
const action = document.createElement("a");
|
|
action.className = "primary-action";
|
|
action.textContent = "Start Chat";
|
|
action.setAttribute("aria-label", `Start a chat with ${item.name}, ${item.specialization}`);
|
|
action.href = `/app/chats/new?personality=${encodeURIComponent(item.id)}`;
|
|
card.append(icon, specialization, name, description, details, action);
|
|
grid.append(card);
|
|
}
|
|
}
|