Messages
-
-
-
-
-
-
-
+
-
+
+
+
+
+
+ 
-
Alex Chen
+ Select a chat
- Online
+
+ Ready
-
-
+
+
Start a chat with a creator.
';
+ return;
+ }
+
+ chatList.innerHTML = conversations
+ .map((conversation) => `
+
+ `)
+ .join("");
+
+ chatList.querySelectorAll("[data-chat-id]").forEach((button) => {
+ button.addEventListener("click", () => selectConversation(button.dataset.chatId));
+ });
+ }
+
+ function renderMessages() {
+ const conversation = conversations.find((item) => item.id === activeConversationId);
+ if (!conversation) {
+ activeChatAvatar.src = "../images/content/cat.png";
+ activeChatName.textContent = "Select a chat";
+ activeChatStatus.textContent = "Ready";
+ chatMessages.innerHTML = 'Choose a conversation or start a new chat.
';
+ messageInput.disabled = true;
+ chatForm.querySelector("button").disabled = true;
+ return;
+ }
+
+ activeChatAvatar.src = conversation.avatar;
+ activeChatName.textContent = conversation.name;
+ activeChatStatus.textContent = "Online";
+ chatMessages.setAttribute("aria-label", `Conversation with ${conversation.name}`);
+ messageInput.disabled = false;
+ chatForm.querySelector("button").disabled = false;
+
+ chatMessages.innerHTML = conversation.messages
+ .map((message) => `
+
+ `)
+ .join("");
+ chatMessages.scrollTop = chatMessages.scrollHeight;
+ }
+
+ function selectConversation(id) {
+ activeConversationId = id;
+ renderChatList();
+ renderMessages();
+ }
+
+ function startConversation(creator) {
+ const id = `user-${creator.userId}`;
+ let conversation = conversations.find((item) => item.id === id);
+ if (!conversation) {
+ conversation = {
+ id,
+ userId: creator.userId,
+ name: creator.displayName,
+ avatar: creator.avatarUrl || "../images/content/cat.png",
+ updatedAt: Date.now(),
+ messages: [],
+ };
+ conversations.push(conversation);
+ saveConversations();
+ }
+ activeConversationId = id;
+ newChatPanel.hidden = true;
+ newChatBtn.setAttribute("aria-expanded", "false");
+ creatorSearch.value = "";
+ renderCreatorResults();
+ renderChatList();
+ renderMessages();
+ messageInput.focus();
+ }
+
+ function addMessage(text) {
+ const conversation = conversations.find((item) => item.id === activeConversationId);
+ if (!conversation || !text.trim()) return;
+
+ conversation.messages.push({
+ from: "me",
+ text: text.trim(),
+ createdAt: Date.now(),
+ });
+ conversation.updatedAt = Date.now();
+ saveConversations();
+ renderChatList();
+ renderMessages();
+ }
+
+ async function loadCreators() {
+ try {
+ const response = await fetch("/api/v1/profiles?limit=100", {
+ credentials: "same-origin",
+ });
+ if (!response.ok) throw new Error("Creators could not be loaded.");
+ creators = await response.json();
+ } catch {
+ creators = [
+ { userId: "demo-alex", displayName: "Alex Chen", slug: "alex", avatarUrl: "../images/content/creator2.png" },
+ { userId: "demo-mia", displayName: "Mia Wong", slug: "mia", avatarUrl: "../images/content/creator3.png" },
+ { userId: "demo-tom", displayName: "Tom Rivera", slug: "tom", avatarUrl: "../images/content/creator4.png" },
+ ];
+ }
+ renderCreatorResults();
+ }
+
+ function renderCreatorResults() {
+ const search = creatorSearch.value.trim().toLowerCase();
+ const results = creators
+ .filter((creator) =>
+ `${creator.displayName || ""} ${creator.slug || ""}`.toLowerCase().includes(search),
+ )
+ .slice(0, 8);
+
+ if (!results.length) {
+ creatorSearchResults.innerHTML = 'No creators found.
';
+ return;
+ }
+
+ creatorSearchResults.innerHTML = results
+ .map((creator) => `
+
+ `)
+ .join("");
+
+ creatorSearchResults.querySelectorAll("[data-user-id]").forEach((button) => {
+ button.addEventListener("click", () => {
+ const creator = creators.find((item) => item.userId === button.dataset.userId);
+ if (creator) startConversation(creator);
+ });
+ });
+ }
+
+ function openConversationFromUrl() {
+ const params = new URLSearchParams(location.search);
+ const userId = params.get("userId");
+ if (!userId) return false;
+
+ startConversation({
+ userId,
+ displayName: params.get("name") || "Creator",
+ slug: "creator",
+ avatarUrl: params.get("avatar") || "../images/content/cat.png",
+ });
+ history.replaceState(null, "", "/chats.html");
+ return true;
+ }
+
+ newChatBtn.addEventListener("click", () => {
+ const willOpen = newChatPanel.hidden;
+ newChatPanel.hidden = !willOpen;
+ newChatBtn.setAttribute("aria-expanded", String(willOpen));
+ if (willOpen) creatorSearch.focus();
+ });
+
+ creatorSearch.addEventListener("input", renderCreatorResults);
+ chatForm.addEventListener("submit", (event) => {
+ event.preventDefault();
+ addMessage(messageInput.value);
+ messageInput.value = "";
+ });
+
+ loadCreators().then(() => {
+ if (!openConversationFromUrl()) {
+ activeConversationId = conversations[0]?.id || null;
+ renderChatList();
+ renderMessages();
+ }
+ });