0-button-buttons.123kids.us

fold

wrap

ai = {import:ai-text-plugin}
upload = {import:upload-plugin}
commentsPlugin = {import:comments-plugin}
fullscreenButton = {import:fullscreen-button-plugin}

botName = [botNameEl.value.trim() || "Bot"]
userName = [userNameEl.value.trim() || "User"]

instruction 
  $output = [this.joinItems("\n")]
  Please write the next 10 messages for the following chat/RP between [botName] and [userName].
  # Here's [botName]'s description/personality:
  ---
  <<<BOT_DESCRIPTION_PLACEHOLDER>>>
  ---
  # Here's [userName]'s description/personality:
  ---
  <<<USER_DESCRIPTION_PLACEHOLDER>>>
  ---
  # Here's the scenario:
  ---
  <<<SCENARIO_PLACEHOLDER>>>
  ---
  # Here's what has happened so far:
  ---
  <<<CHAT_LOGS_PLACEHOLDER>>>
  ---
  Your task is to write the next 10 messages in this chat/roleplay between [userName] and [botName]. There should be a blank new line between messages.
  [this.nextMessageDraftOrInstruction || writingInstructionsEl.value.trim() ? "You may add '(OOC: ...)' to indicate 'out of character' notes - i.e. rough ideas about what/how you're going to write in the next few messages." : ""] // we trick the AI into thinking that *it* wrote the writing instructions, since we're putting the writing instructions in the response rather than in this instruction prompt.
  Use *asterisks* for actions/thoughts/etc. in usual roleplay style.
  IMPORTANT: Never try to "wrap up" the roleplay. This is a never-ending roleplay/chat. Keep the story going!
  Multi-line messages are not allowed - each individual message must be a single paragraph.
  Avoid unnecessary and unoriginal repetition of previous messages.
  // we tell it to write 10 messages, but we'll actually stop it after the first message via `stopSequences` - this is to make it less likely to try to "wrap up" the chat in the next message because it thinks it has 10 messages to write.
  Write the next 10 messages - remember to make them interesting, authentic, descriptive, natural, engaging, and creative.

getLastMessage() =>
  let lastMessage = chatLogsEl.value.trim().replace(/\n+/g, "\n\n").split("\n\n").pop();
  let name = lastMessage?.split(":")[0].trim();
  let content = lastMessage?.split(":").slice(1).join(":").trim();
  return {name, content};

lastMessageIsEmpty() =>
  return getLastMessage().content === "";

getNextTurnName() =>
  if(chatLogsEl.value.trim() === "") {
    return botName;
  }
  // we need to work out who's turn it is next, so we can set the startWith to "<name>: " where <name> is the character who is going to speak next.
  let {name, content} = getLastMessage();
  if(content === "") {
    return name; // if the message content is empty, then we assume the user wants to generate a message with that name
  } else {
    let nextName;
    if(name === botName) { nextName = userName; } else { nextName = botName; }
    return nextName;
  }

getStarterText(opts) =>
  if(!opts) opts = {};
  // We make the AI start with the last 5 messages, rather than putting all the messages in the instruction. I think this might make the AI less likely to repeat the last message since it can more easily "see" what it just wrote.
  let lastFewMessagesArr = chatLogsEl.value.trim().split("\n\n").slice(-5);
  if(writingInstructionsEl.value.trim() || opts.nextMessageDraftOrInstruction) {
    // Add the writing instructions if they have specified that
    let lastMessage = lastFewMessagesArr.pop();
    
    if(writingInstructionsEl.value.trim()) lastFewMessagesArr.push(`(OOC: I'm going to keep these writing instructions in mind as I write: ${writingInstructionsEl.value.trim().replace(/\n+/g, " ")})`);
    // if(opts.nextMessageDraftOrInstruction) lastFewMessagesArr.push(`(OOC: ${writingInstructionsEl.value.trim() ? "Also, the" : "The"} message below will be a longer, more creative, and much-improved rewrite of this message: "${opts.nextMessageDraftOrInstruction.replace(/\n+/g, " ").replace(/"/g, "'")}" <-- I'm going to make sure the message below contains *all* details of this instruction/idea, and that it's basically a masterpiece of creative writing.)`);
    if(opts.nextMessageDraftOrInstruction) lastFewMessagesArr.push(`(OOC: ${writingInstructionsEl.value.trim() ? "Also, note" : "Note"} that the message below is a longer and better version of this idea: "${opts.nextMessageDraftOrInstruction.replace(/\n+/g, " ").replace(/"/g, "'")}")`);
    
    lastFewMessagesArr.push(lastMessage);
  }
  let lastFewMessagesText = lastFewMessagesArr.join("\n\n").trim();
  if(opts.continueMode) {
    return lastFewMessagesText.trim();
  } else if(lastMessageIsEmpty()) {
    return lastFewMessagesText.trim(); // if last message is empty, then we already have the "\n\n<name>:" part, so we don't need to add it
  } else {
    return lastFewMessagesText.trim() + "\n\n" + getNextTurnName() + ":";
  }
  
updateVisibilityOfReplyButtonsAndSelectors() =>
  if(inputEl.value.trim() === "") {
    sendAsCharacterCtn.style.display = "none";
    autoRespondCtn.style.display = "none";
    quickReplyButtonsCtn.style.display = "flex";
  } else {
    sendAsCharacterCtn.style.display = "flex";
    quickReplyButtonsCtn.style.display = "none";
    if(autoImproveCheckboxEl.checked) {
      autoRespondCtn.style.display = "none";
    } else {
      autoRespondCtn.style.display = "flex";
    }
  }

async handleSendButtonClick(opts) =>
  chatLogsEl.value = chatLogsEl.value.trim();
  
  rateLastMessageBadBtn.disabled = true;
  rateLastMessageGoodBtn.disabled = true;
  rateLastMessageBadBtn.style.opacity = 1;
  rateLastMessageGoodBtn.style.opacity = 1;
  
  let generatedTextAndThereWereNoErrors = false;
  let temporarilyRemovedPrefixChatLogsForStreamingRenderPerformance = null;
  try {
    chatLogsEl.value = chatLogsEl.value.replace(/\n+/g, "\n\n"); // ensure exactly 2 newlines between all messages, and no newlines within a message
    let nextMessageDraftOrInstruction = null;
    
    // if the input box contains some text, then they have explicitely selected a character to reply with, so we need to remove any 'empty' messages from the end of the chat
    if(inputEl.value.trim() !== "" && opts.mode === "normal") {
      let i = 0;
      while(chatLogsEl.value.trim() !== "" && lastMessageIsEmpty()) {
        if(chatLogsEl.value.trim().slice(-1) !== ":") {
          break; // just an extra safety guard to prevent deleting non-empty messages
        }
        chatLogsEl.value = chatLogsEl.value.split("\n\n").slice(0, -1).join("\n\n");
        if(i++ > 10000) return alert("There was an error in the code. Please report this error in the feedback box with error code '243'.");
      }
    }
    
    window.nextMessageDraftOrInstruction_prevMessage = null;
    
    if(opts.mode === "normal" || opts.mode === "regen") {
      // if they're in auto-improve mode, then inputEl actually contains the "instruction" or "draft" for the next message, not the message itself
      if(autoImproveCheckboxEl.checked && inputEl.value.trim() !== "") {
        nextMessageDraftOrInstruction = inputEl.value.trim();
        inputEl.value = "";
        if(!chatLogsEl.value.endsWith(sendAsCharacterSelectEl.value+":")) {
          chatLogsEl.value += '\n\n'+sendAsCharacterSelectEl.value+':';
        }
        updateVisibilityOfReplyButtonsAndSelectors();
        window.nextMessageDraftOrInstruction_prevMessage = nextMessageDraftOrInstruction;
      }
    }
    
    if(opts.mode === "normal") {
      // if there's some text in the input box, we add that text to the chat logs with the user character's name at the start
      if(inputEl.value.trim() !== "") {
        if(chatLogsEl.value.trim() !== "") chatLogsEl.value += "\n\n";
        chatLogsEl.value += (sendAsCharacterSelectEl.value || userName)+": "+inputEl.value.trim();
        
        chatLogsEl.scrollTop = chatLogsEl.scrollHeight;
        inputEl.value = "";
        localStorage.input = "";
        
        // inputEl is now empty, so we appropriately adjust visible reply buttons/selectors:
        updateVisibilityOfReplyButtonsAndSelectors();
        
        if(!autoRespondCheckboxEl.checked) {
          return; // no response needed - user wants to e.g. manually use quick reply buttons to choose responding character
        }
      }

if(chatLogsEl.value.trim() === "") {
        chatLogsEl.value += getNextTurnName() + ":";
      }
      
      if(!lastMessageIsEmpty()) {
        chatLogsEl.value += "\n\n" + getNextTurnName() + ":"; // add two new lines and the name of the person speaking next, ready for the response that the AI is about to write into the chat logs
      }
    }
    
    chatLogsEl.scrollTop = chatLogsEl.scrollHeight;
    
    sendMessageBtn.disabled = true;
    regenMessageBtn.disabled = true;
    deleteLastMessageBtn.disabled = true;
    quickReplyButtonsCtn.querySelectorAll("button").forEach(el => el.disabled=true);
    continueMessageBtn.style.display = 'none';
    undoDeleteLastMessageCtn.style.display = "none";

// note: if this `handleSendButtonClick` function is being called by the regen function, then the regen function will re-enable these as needed:
    regenPrevButton.disabled = true;
    regenNextButton.disabled = true;
    
    let gotFirstChunk = false;
    let pendingObj = ai({
      instruction: () => {
        // the reason we construct this with a function rather than just putting it all in the actual `instruction` list is kind of technical - it's because we don't want to evaluate square/curly blocks that happen to be in the chat logs, scenario, or character descriptions
        instruction.nextMessageDraftOrInstruction = nextMessageDraftOrInstruction;
        let output = instruction.evaluateItem;
        let botDescription = botDescriptionEl.value.trim() || "(Not specified.)";
        let userDescription = userDescriptionEl.value.trim() || "(Not specified.)";
        let scenario = scenarioEl.value.trim() || "(None specified. Freeform.)";
        // for the chat logs, we leave off the last 5 messages, since we'll put them in the `startWith` instead of the `instruction` (I think this might make the AI less likely to repeat itself as the chat gets longer, since if the most recent messages are in the response, then it might be able to more easily "see" what it just wrote)
        let chatLogs = chatLogsEl.value.trim().split("\n\n").slice(0, -5).join("\n\n").trim() || "(No chat messages yet. This is the beginning of the chat.)";
        output = output.replace("<<<BOT_DESCRIPTION_PLACEHOLDER>>>", botDescription.replaceAll("{{user}}", userName).replaceAll("{{char}}", botName));
        output = output.replace("<<<USER_DESCRIPTION_PLACEHOLDER>>>", userDescription.replaceAll("{{user}}", userName).replaceAll("{{char}}", botName));
        output = output.replace("<<<SCENARIO_PLACEHOLDER>>>", scenario);
        output = output.replace("<<<CHAT_LOGS_PLACEHOLDER>>>", chatLogs);
        return output;
      },
      startWith: () => {
        let continueMode = opts.mode === "continue" || opts.mode === "regen";
        return getStarterText({continueMode, nextMessageDraftOrInstruction});
      },
      stopSequences: ["\n"], // <-- This means if the AI generates a new line (i.e. the gap between messages), it'll stop. So it ensures that the AI only generates one message.
      onChunk: (data) => {
        if(data.isFromStartWith) {
          // onChunk gives us all chunks of the AI's response, including the startWith text that we specified, so we skip that text - we only want to output the stuff that the AI actuall wrote into the chat logs
        } else {
          if(!gotFirstChunk) {
            if(chatLogsEl.value.length > 50000) {
              let prevPageScrollTop = document.scrollingElement.scrollTop;
              temporarilyRemovedPrefixChatLogsForStreamingRenderPerformance = chatLogsEl.value.slice(0, -50000)
              chatLogsEl.value = chatLogsEl.value.slice(-50000);
              document.scrollingElement.scrollTop = prevPageScrollTop;
            }
          }
          gotFirstChunk = true;
          
          chatLogsEl.value += data.textChunk; // we're manually adding each chunk of generated text to the "chatLogsEl" text box, rather than using `outputTo`, since `outputTo` would clear all the existing text and only add the *response*, whereas we want to preserve all the existing text, and just add the response to the end. 
          if(chatLogsEl.scrollTop > (chatLogsEl.scrollHeight - chatLogsEl.offsetHeight)-30) { // <-- if the text box is already scrolled near the end of the text
            chatLogsEl.scrollTop = 99999999; // scroll down to bottom of text box as story streams in
          }
        }
      },
    }); // trigger AI to respond
    loaderEl.innerHTML = pendingObj.loadingIndicatorHtml; 
    
    window.lastMessagePendingObj = pendingObj;

setTimeout(() => {
      chatLogsEl.scrollTop = 999999999; // <-- scroll to the bottom of the chat logs
    }, 50); // we do it 50ms after they click send, so that we scroll down *after* the character's name has been added. EDIT: wait, but we add the name above? I think this is old code - probably not needed anymore.

let data = await pendingObj.onFinishPromise;
    if(data.stopReason !== "error") generatedTextAndThereWereNoErrors = true;
    // we're not actually using this data, but I do want to await the promise anyway, since other functions currently expect `await handleSendButtonClick()` to resolve when generation is finished
  } catch(e) {
    console.error(e);
  }
  
  if(temporarilyRemovedPrefixChatLogsForStreamingRenderPerformance) {
    // page scroll messes up when we add prefix logs back, so we need to save + restore:
    let prevPageScrollTop = document.scrollingElement.scrollTop;
    chatLogsEl.value = temporarilyRemovedPrefixChatLogsForStreamingRenderPerformance + chatLogsEl.value;
    chatLogsEl.scrollTop = 999999999;
    document.scrollingElement.scrollTop = prevPageScrollTop;
  }

sendMessageBtn.disabled = false;
  regenMessageBtn.disabled = false;
  deleteLastMessageBtn.disabled = false;
  quickReplyButtonsCtn.querySelectorAll("button").forEach(el => el.disabled=false);
  
  if(generatedTextAndThereWereNoErrors) {
    rateLastMessageBadBtn.disabled = false;
    rateLastMessageGoodBtn.disabled = false;
  }

loaderEl.innerHTML = ""; // clear the loading indicator
  let pageScrollTop = document.scrollingElement.scrollTop;
  chatLogsEl.value = chatLogsEl.value.trim(); // remove newlines/spaces from start and end of chatlog
  document.scrollingElement.scrollTop = pageScrollTop; // otherwise chrome's "layout shift prevention" messes with the page scroll height
  localStorage.chatLogs = chatLogsEl.value; // save chat logs to localStorage so it's still there even if the page is reloaded

chatLogsDeleteBtn.style.display = '';
  deleteAndRegenLastMessageCtn.style.display = 'flex';
  updateCharacterNameViews();

if(localStorage.sendCount === undefined || isNaN(Number(localStorage.sendCount))) localStorage.sendCount = "0";
  localStorage.sendCount = Number(localStorage.sendCount) + 1;
  triggerTipIfNeeded();
  updateLastMessageButtonsDisplayIfNeeded();

// async copySessionShareLink() =>
//   if(!botNameEl.value.trim() || !userNameEl.value.trim()) {
//     alert("Please add at least the character names before creating a share link.");
//     return;
//   }
//   shareSessionBtn.textContent = "✅ copied!";
//   setTimeout(() => shareSessionBtn.textContent = "🔗 share this chat", 1500);
//   let shareData = {
//     aiChat: getCurrentChatData(),
//   };
//   navigator.clipboard.writeText(`https://perchance.org/${window.generatorName}#${JSON.stringify(shareData)}`);

updateLastMessageButtonsDisplayIfNeeded() =>
  if(localStorage.sendCount && Number(localStorage.sendCount) > 5) {
    // rating buttons only get shown after several messages to reduce clutter for newbies.
    // and when we show rating buttons, we reduce the size of the others so the buttons fit on mobile (since hopefully they know what those buttons do by now, so they don't need the "full" label)
    rateLastMessageCtn.style.display = ""; 
    askForRatingsNoticeEl.style.display = ""; 
    deleteLastMessageBtn.textContent = deleteLastMessageBtn.dataset.shortContent;
    regenMessageBtn.textContent = regenMessageBtn.dataset.shortContent;
  }

async rateLastMessage(rating) =>
  if(!window.lastMessagePendingObj) return;
  
  if(!localStorage.knowsHowRatingsWork) {
    if(!confirm("Your ratings help improve Perchance's AI plugin, which powers this chat. Please do not submit ratings if your chat includes personal info.\n\nContinue?")) return;
    localStorage.knowsHowRatingsWork = "1";
  }
  
  let score = rating==="good" ? 1 : 0;
  rateLastMessageBadBtn.disabled = true;
  rateLastMessageGoodBtn.disabled = true;
  if(rating === "good") {
    rateLastMessageBadBtn.style.opacity = 0.2;
  } else {
    rateLastMessageGoodBtn.style.opacity = 0.2;
  }
  
  if(!window.recentRatingReasonCounts) window.recentRatingReasonCounts = {};
  let reasonCountEntries = Object.entries(window.recentRatingReasonCounts).sort((a,b) => b[1]-a[1]);
  if(reasonCountEntries.length > 10) reasonCountEntries = reasonCountEntries.slice(0, 10);
  window.recentRatingReasonCounts = Object.fromEntries(reasonCountEntries);
  recentRatingReasonsDataList.innerHTML =  reasonCountEntries.map(e => `<option value="${e[0].replace(/</g, "&lt;").replace(/"/g, "&quot;")}"></option>`).join("");
  
  let reasonResolver;
  let reasonFinishPromise = new Promise(r => reasonResolver=r);
  ratingReasonEl.value = "";
  ratingReasonCtn.style.display = "";
  ratingReasonEl.focus();
  await new Promise(r => setTimeout(r, 100));
  
  // if they click anywhere other than the reason input, then we resolve with the current contents of the reason box
  function windowClickHandler(event) {
    if(!ratingReasonCtn.contains(event.target)) {
      reasonResolver(ratingReasonEl.value);
    }
  }
  window.addEventListener("click", windowClickHandler);
  
  // if they press enter, then we resolve too
  function enterKeydownHandler(event) {
    if(event.key === 'Enter') {
      reasonResolver(ratingReasonEl.value);
    }
  }
  ratingReasonEl.addEventListener("keydown", enterKeydownHandler);
  
  let reason = await reasonFinishPromise;
  if(reason.length < 100) window.recentRatingReasonCounts[reason] = (window.recentRatingReasonCounts[reason] || 0) + 1;
  
  ratingReasonCtn.style.display = 'none';
  window.removeEventListener("click", windowClickHandler);
  ratingReasonEl.removeEventListener("keydown", enterKeydownHandler);
  window.lastMessagePendingObj.submitUserRating({score, reason});

saveChatDataToUsersDevice() => 
  let data = getCurrentChatData();
  let filename = prompt("Choose a filename:", (data.userName+"-"+data.botName).replace(/[^a-zA-Z0-9\-_]/g, ""));
  if(filename === null) return;
  filename += ".ai-chat.json";
  let blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  let url = URL.createObjectURL(blob);
  let a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
  
async loadChatDataFromUsersDevice() =>
  return new Promise((resolve, reject) => {
    let input = document.createElement('input');
    input.type = 'file';
    input.accept = 'application/json, text/json, text/plain, application/JSON, .json';

input.onchange = async (event) => {
      let file = event.target.files[0];
      if (file) {
        try {
          let content = await file.text();
          let data = JSON.parse(content);
          if(data.format === "perchance-ai-chat-v1") {
            if((botDescriptionEl.value+userDescriptionEl.value+scenarioEl.value+chatLogsEl.value+writingInstructionsEl.value).trim() !== "") {
              let confirmed = confirm("Loading this data will overwrite your current chat. Continue?");
              if(!confirmed) return;
            }
            loadDataIntoTextAreasAndLocalStorage(data);
          } else {
            alert("Unknown save file format.");
          }
        } catch (error) {
          alert("There was an error while loading that chat file.");
          reject(error);
        }
      }
    };

input.click();
  });

loadDataIntoTextAreasAndLocalStorage(data) =>
  // put data in input boxes:
  botNameEl.value = data.botName;
  userNameEl.value = data.userName;
  botDescriptionEl.value = data.botDescription;
  userDescriptionEl.value = data.userDescription;
  scenarioEl.value = data.scenario;
  chatLogsEl.value = data.chatLogs;
  writingInstructionsEl.value = data.writingInstructions;
  // put data in localstorage:
  localStorage.botName = data.botName;
  localStorage.userName = data.userName;
  localStorage.botDescription = data.botDescription;
  localStorage.userDescription = data.userDescription;
  localStorage.scenario = data.scenario;
  localStorage.chatLogs = data.chatLogs;
  localStorage.writingInstructions = data.writingInstructions;

async generateShareLinkForChat() => 
  if(!window.CompressionStream) {
    alert("Share links use a feature that's only available in modern browsers. Please upgrade your browser to the latest version to use this feature.");
    return;
  }
  if((botDescriptionEl.value+userDescriptionEl.value+scenarioEl.value).trim() === "") {
    alert("You need to add character descriptions and a scenario before sharing.");
    return;
  }
  shareLinkCtn.style.display = "none";
  
  shareChatBtn.disabled = true;
  shareChatBtn.textContent = "⏳ uploading current chat data...";
  
  let chatDataJson = JSON.stringify(getCurrentChatData());
  
  // convert json text to blob:
  let blob = await fetch("data:text/plain;charset=utf-8,"+chatDataJson).then(res => res.blob());
  
  // compress blob:
  let compressedBlob = await compressBlobWithGzip(blob);
  
  let { url, size, error } = await upload(compressedBlob);
  if(error) {
    shareChatLinkInputEl.value = `error: ${error}`;
  } else {
    shareChatLinkInputEl.value = `https://perchance.org/${window.generatorName}#data=`+url.replace("https://user-uploads.perchance.org/file/", "uup1:");
  }
  shareLinkCtn.style.display = "";
  shareChatBtn.textContent = "🔗 share this chat";
  shareChatBtn.disabled = false;
  shareChatBtn.style.display = "none";

async compressBlobWithGzip(blob) =>
  const cs = new CompressionStream('gzip');
  const compressedStream = blob.stream().pipeThrough(cs);
  let outputBlob = await new Response(compressedStream).blob();
  return new Blob([outputBlob], { type: "application/gzip" }); // <-- to add the correct mime type
 
async loadDataFromUrlHash() => 
  let success = false;
  if(!window.DecompressionStream) {
    alert("Character share links use a browser feature that's only available in modern browsers. Please upgrade your browser to the latest version to allow for loading data from character share links.");
    return {success, error:"browser_compat"};
  }
  
  let loadingModal = document.createElement('div');
  loadingModal.innerHTML = `<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; justify-content: center; align-items: center;">
    <div style="padding: 20px; background-color: var(--box-color); border-radius: 8px;">
      ⏳ loading chat data...
    </div>
  </div>`;
  loadingModal = loadingModal.firstElementChild;
  document.body.append(loadingModal);
  
  try {
    let hashText = window.location.hash.slice(1);
    if(!hashText.startsWith("data=")) {
      throw new Error("Invalid share URL.");
    }
    let fileUrl = hashText.replace(/^data=/, "");
    if(fileUrl.startsWith("uup1:")) {
      fileUrl = fileUrl.replace("uup1:", "https://user-uploads.perchance.org/file/");
    }
    let fetchOptions = {};
    if(window.AbortSignal && AbortSignal.timeout) fetchOptions.signal = AbortSignal.timeout(10000);
    let blob = await fetch(fileUrl, fetchOptions).then(res => res.blob());
    let text;
    if(fileUrl.endsWith(".gz")) {
      let decompressedBlob = await decompressBlobWithGzip(blob);
      text = await decompressedBlob.text();
    } else {
      text = await blob.text();
    }
    let data = JSON.parse(text);
    if(data.format === "perchance-ai-chat-v1") {
      if(( (localStorage.botDescription||"") + (localStorage.userDescription||"") + (localStorage.scenario||"") + (localStorage.chatLogs||"") + (localStorage.writingInstructions||"") ).trim() !== "") {
        let confirmed = confirm("𝗛𝗲𝗮𝗱𝘀 𝘂𝗽: You're loading a chat share link. This will overwrite your existing chat. 𝗖𝗼𝗻𝘁𝗶𝗻𝘂𝗲?\n\n(Note: You can click cancel and then load the share link in your browser's incognito/private mode to avoid overwriting your current chat, or just save your existing chat first.)");
        if(!confirmed) {
          loadingModal.remove();
          return {success, error:"loading_cancelled_by_user"};
        }
      }
      loadDataIntoTextAreasAndLocalStorage(data);
      success = true;
    } else {
      alert("Unknown chat data format.");
    }
  } catch(e) {
    alert(`Failed to load chat data: ${e.message}`);
    console.error(e);
  }
  
  loadingModal.remove();
  return {success};
  
async decompressBlobWithGzip(blob) =>
  const ds = new DecompressionStream("gzip");
  const decompressedStream = blob.stream().pipeThrough(ds);
  return await new Response(decompressedStream).blob();

getCurrentChatData() =>
  return {
    format: "perchance-ai-chat-v1",
    botName: botNameEl.value.trim(),
    userName: userNameEl.value.trim(),
    botDescription: botDescriptionEl.value.trim(),
    userDescription: userDescriptionEl.value.trim(),
    scenario: scenarioEl.value.trim(),
    chatLogs: chatLogsEl.value.trim(),
    writingInstructions: writingInstructionsEl.value.trim(),
  };

deleteLastMessage() =>
  let messages = chatLogsEl.value.trim().split('\n\n');
  chatLogsEl.value = messages.slice(0, -1).join('\n\n');
  window.lastMessageDeleted = messages.at(-1);
  undoDeleteLastMessageCtn.style.display = "";
  clearTimeout(window.hideUndoDeleteLastMessageCtnTimeout);
  window.hideUndoDeleteLastMessageCtnTimeout = setTimeout(() => {
    undoDeleteLastMessageCtn.style.display = "none";
  }, 4000);
  updateDeleteButtonVisibility();
  regenPrevButton.disabled = true;
  regenNextButton.disabled = true;
  window.nextMessageDraftOrInstruction_prevMessage = null;
  
undoDeleteLastMessage() =>
  chatLogsEl.value += '\n\n'+window.lastMessageDeleted;
  undoDeleteLastMessageCtn.style.display = 'none';
  updateRegenPrevNextButtonVisibility();

simpleHash(str) =>
  let sum = 0;
  for(let i = 0; i < str.length; i++) {
    sum = Math.imul(31, sum) + str[i].charCodeAt(0) | 0;
  }
  return sum;
  
updateRegenPrevNextButtonVisibility() =>
  // note that this will clear `window.currentRegenAlternatives` if current context doesn't match its associated `window.currentRegenContextHash`
  regenPrevButton.disabled = true;
  regenNextButton.disabled = true;
  let messages = chatLogsEl.value.trim().split('\n\n');
  let currentLastMessage = messages.at(-1);
  let currentContextMessagesText = messages.slice(0, -1).join('\n\n');
  let currentRegenContextHash = simpleHash(currentContextMessagesText);
  if(currentRegenContextHash !== window.currentRegenContextHash) {
    window.currentRegenAlternatives = [currentLastMessage];
    window.currentRegenContextHash = currentRegenContextHash;
  } else {
    let currentLastMessageRegenIndex = window.currentRegenAlternatives.findIndex(m => m === currentLastMessage);
    if(currentLastMessageRegenIndex === -1) {
      console.error("this shouldn't happen? because the hash matched, so it should at least have the current message in the window.currentRegenAlternatives array");
    } else {
      if(currentLastMessageRegenIndex > 0) regenPrevButton.disabled = false;
      if(currentLastMessageRegenIndex < window.currentRegenAlternatives.length-1) regenNextButton.disabled = false;
    }
  }

async regenLastMessage() =>
  regenMessageBtn.disabled = true;
  if(window.nextMessageDraftOrInstruction_prevMessage && inputEl.value.trim() === "") {
    inputEl.value = window.nextMessageDraftOrInstruction_prevMessage;
  }
  let messages = chatLogsEl.value.trim().split('\n\n');
  let currentLastMessage = messages.at(-1);
  let currentContextMessagesText = messages.slice(0, -1).join('\n\n');
  let currentRegenContextHash = simpleHash(currentContextMessagesText);
  if(currentRegenContextHash !== window.currentRegenContextHash) {
    window.currentRegenAlternatives = [currentLastMessage];
    window.currentRegenContextHash = currentRegenContextHash;
  }
  let {name, content} = getLastMessage();
  chatLogsEl.value = currentContextMessagesText;
  chatLogsEl.value += "\n\n" +  name + ":";
  await handleSendButtonClick({mode:"regen"});
  {
    let {name, content} = getLastMessage();
    window.currentRegenAlternatives.push(`${name}: ${content}`);
  }
  regenPrevButton.disabled = false;
  regenNextButton.disabled = true;
  regenMessageBtn.disabled = false;
  
prevRegenMessage() =>
  let messages = chatLogsEl.value.trim().split('\n\n');
  let currentLastMessage = messages.at(-1);
  let currentLastMessageRegenIndex = window.currentRegenAlternatives.findIndex(m => m === currentLastMessage);
  if(currentLastMessageRegenIndex === 0) {
    console.error("tried to go to prev index when it was already zero");
    return;
  }
  window.currentRegenAlternatives
  chatLogsEl.value = messages.slice(0, -1).join('\n\n') + "\n\n" + window.currentRegenAlternatives[currentLastMessageRegenIndex-1];
  if(currentLastMessageRegenIndex-1 === 0) {
    regenPrevButton.disabled = true;
  }
  regenNextButton.disabled = false;
  
nextRegenMessage() =>
  let messages = chatLogsEl.value.trim().split('\n\n');
  let currentLastMessage = messages.at(-1);
  let currentLastMessageRegenIndex = window.currentRegenAlternatives.findIndex(m => m === currentLastMessage);
  if(currentLastMessageRegenIndex === window.currentRegenAlternatives.length-1) {
    console.error("tried to go to next index when it was already max");
    return;
  }
  window.currentRegenAlternatives
  chatLogsEl.value = messages.slice(0, -1).join('\n\n') + "\n\n" + window.currentRegenAlternatives[currentLastMessageRegenIndex+1];
  if(currentLastMessageRegenIndex+1 === window.currentRegenAlternatives.length-1) {
    regenNextButton.disabled = true;
  }
  regenPrevButton.disabled = false;
  
undoRegenLastMessage() =>
  if(!window.lastMessageDeletedForRegen) {
    console.error("Tried to undo regen when we had already undone it?")
    return;
  }
  let messages = chatLogsEl.value.trim().split('\n\n');
  window.lastMessageDeletedForRegen = null;
  chatLogsEl.value = messages.slice(0, -1).join('\n\n');
  chatLogsEl.value += '\n\n'+window.lastMessageDeletedForRegen;
  undoRegenMessageCtn.style.display = 'none';

loadChatDataFromLocalStorage() =>
  // Notice that we have oninput="localStorage.blah=this.value" on the above input boxes.
  // That saves their value to localStorage whenever they are changed.
  // So during the initial page load, we load those values from localStorage if they exist.
  // NOTE: You could simply use `perchance.org/remember-plugin` like `[remember(root, "@inputs")]` rather than this big mess.
  if(localStorage.userName) userNameEl.value = localStorage.userName;
  if(localStorage.botName) botNameEl.value = localStorage.botName;
  if(localStorage.botDescription) botDescriptionEl.value = localStorage.botDescription;
  if(localStorage.userDescription) userDescriptionEl.value = localStorage.userDescription;
  if(localStorage.scenario) scenarioEl.value = localStorage.scenario;
  if(localStorage.chatLogs) chatLogsEl.value = localStorage.chatLogs;
  if(localStorage.writingInstructions) writingInstructionsEl.value = localStorage.writingInstructions;
  if(localStorage.input) inputEl.value = localStorage.input;

triggerTipIfNeeded() =>
  if(!localStorage.tipsSeen) localStorage.tipsSeen = "";
  // can add tip based on e.g. text that is at the end of the chat logs, or whatever you want.
  // here I'm just using sendCount as a simple way to add "introduction" tips as they go.
  let sendCount = Number(localStorage.sendCount);
  {
    let tipName = "editInitialMessages1";
    if(sendCount === 5 && !localStorage.tipsSeen.includes(`|${tipName}|`)) {
      tipMessageEl.innerHTML = `Tip: A character's first few messages will heavily influence the way that character talks for the rest of the conversation. If the character isn't talking in the style you want, be sure to click the message and edit it to the desired style.`;
      tipEl.style.display = "";
      localStorage.tipsSeen += `|${tipName}|`;
    }
  }
  {
    let tipName = "repetition1";
    if(sendCount === 40 && !localStorage.tipsSeen.includes(`|${tipName}|`)) {
      tipMessageEl.innerHTML = `Tip: If the AI <b>repeats itself</b>, you should click the message and edit it to remove the repetition! Otherwise it'll be more likely to repeat messages in the future. You can edit any message by simply clicking on it. And, in general, if you let the AI write badly, its quality will become worse as the chat goes on, so <b>always edit or delete the messages that you don't like</b>.`;
      tipEl.style.display = "";
      localStorage.tipsSeen += `|${tipName}|`;
    }
  }

getRecentCharacterNames() =>
  let recentMessages = chatLogsEl.value.trim().split("\n\n").slice(-300).filter(m => m.trim());
  let recentNames = recentMessages.filter(m => m.includes(":")).map(m => m.trim().split(":")[0].trim());
  recentNames.push(botName.evaluateItem);
  recentNames.push(userName.evaluateItem);
  recentNames.push("Narrator");
  recentNames = recentNames.filter(n => n.length < 50); // in case of e.g. a manually-added paragraph of writing between messages (i.e. that doesn't have a name at the start, but happens to have a colon)
  // let uniqueNames = Array.from(new Set(recentNames));
  // let uniqueNames = Object.entries(nameHist).sort((a,b) => b[1]-a[1]).map(e => e[0]);
  let nameHist = recentNames.reduce((a,v) => (a[v]=(a[v]||0)+1, a), {});
  // sort them by number first, and then if their number is within 10 of another (to prevent constant order swapping with each new message submitted), use alphabetical
  let sortedUniqueNames = Object.entries(nameHist).map(e => [e[0], Math.round(e[1]/10)]).sort(([aName, aCount], [bName, bCount]) => bCount - aCount || aName.localeCompare(bName)).map(([name]) => name);
  return sortedUniqueNames;

updateCharacterNameViews() =>
  let recentCharacterNames = getRecentCharacterNames();
  quickReplyButtonsCtn.innerHTML = recentCharacterNames.map(n => `<button data-name="${n.replace(/"/g, "&quot;")}" style="font-size:75%;">🗣️ ${n}</button>`).join("");
  quickReplyButtonsCtn.querySelectorAll("button").forEach(btn => {
    btn.onclick = function() {
      chatLogsEl.value = chatLogsEl.value.trim();
      if(!chatLogsEl.value.endsWith('\n\n'+this.dataset.name+':')) {
        chatLogsEl.value += '\n\n'+this.dataset.name+':';
      }
      handleSendButtonClick({mode:"normal"});
    };
  });
  let btn = document.createElement("button");
  btn.style.cssText = "font-size:75%;";
  btn.textContent = "+";
  btn.onclick = function() {
    let characterName = prompt("Enter the name of the new character that you'd like to enter the chat. You can describe extra characters in the 'Scenario' box if needed.");
    if(characterName === null || characterName.trim() === "") return;
    characterName = characterName.trim();
    chatLogsEl.value = chatLogsEl.value.trim();
    chatLogsEl.value += '\n\n'+characterName.trim()+':';
    handleSendButtonClick({mode:"normal"});
    chatLogsDeleteBtn.dataset.mode = 'delete';
  };
  quickReplyButtonsCtn.append(btn);
  
  // update the "send as" <select> element, ensuring user character is first by default, and preserving previously-selected value if that character still 'exists'
  let userNameEvaluated = userName.evaluateItem;
  let existingSendAsValue = sendAsCharacterSelectEl.value;
  sendAsCharacterSelectEl.innerHTML = [userNameEvaluated, ...recentCharacterNames.filter(n => n !== userNameEvaluated)].map(n => `<option>${n}</option>`).join("");
  sendAsCharacterSelectEl.innerHTML += `<option value="~~~NEW_CHAR~~~">𝗡𝗲𝘄...</option>`;
  if(recentCharacterNames.includes(existingSendAsValue)) sendAsCharacterSelectEl.value = existingSendAsValue;
  
  document.querySelectorAll(".containsCharName").forEach(el => update(el));

updateDeleteButtonVisibility() =>
  botDescriptionDeleteBtn.style.display = botDescriptionEl.value.trim() ? "" : "none";
  userDescriptionDeleteBtn.style.display = userDescriptionEl.value.trim() ? "" : "none";
  scenarioDeleteBtn.style.display = scenarioEl.value.trim() ? "" : "none";
  chatLogsDeleteBtn.style.display = chatLogsEl.value.trim() ? "" : "none";
  writingInstructionsDeleteBtn.style.display = writingInstructionsEl.value.trim() ? "" : "none";

generateCharacterDescription(botOrUser, buttonEl) =>
  let descriptionEl = botOrUser=="bot" ? botDescriptionEl : userDescriptionEl;
  let nameEl = botOrUser=="bot" ? botNameEl : userNameEl;
  
  if(botOrUser=="bot") botDescriptionDeleteBtn.dataset.mode='delete';
  else userDescriptionDeleteBtn.dataset.mode='delete';
  
  let warningText = "";
  if(descriptionEl.value.trim() !== "") warningText = "The existing description will be cleared. ";
  let inspiration = prompt(`${warningText}Type some keywords or ideas below (optional), and then click OK.`);
  if(inspiration === null) return; // <-- they clicked cancel
  buttonEl.disabled = true;
  buttonEl.textContent = "⌛ loading...";
  descriptionEl.value = "";
  
  let startWith = "Name:";
  if(nameEl.value.trim()) startWith = `Name: ${nameEl.value.trim()}\nAppearance:`;
  let responseObj = ai({
    instruction: `Write a creative, interesting, description of a character using the following keywords/prompt/ideas as inspiration: ${inspiration || "(None provided. Just be creative!)"}\n\nYour description should include the name, age, appearance, personality, and character background. Keep it short. Be creative!`,
    startWith,
    onChunk: function(data) {
      descriptionEl.value += data.textChunk;
      descriptionEl.scrollTop = 99999999; // scroll down to bottom of text box
    },
    onFinish: function(data) {
      buttonEl.disabled = false;
      buttonEl.textContent = "✨ generate";
      if(botOrUser=="bot") localStorage.botDescription = botDescriptionEl.value;
      else localStorage.userDescription = userDescriptionEl.value;
      updateDeleteButtonVisibility();
      
      if(botOrUser=="bot") resizeTextAreaHeightToFitContent(botDescriptionEl);
      else resizeTextAreaHeightToFitContent(userDescriptionEl);
    },
  });

generateScenarioDescription(buttonEl) =>
  if(botNameEl.value.trim() === "" || userNameEl.value.trim() === "" || botDescriptionEl.value.trim() === "" || userDescriptionEl.value.trim() === "") {
    alert("Please fill in character names and descriptions first.");
    return;
  }
  let warningText = "";
  if(scenarioEl.value.trim() !== "") warningText = "The existing scenario description will be cleared. ";
  window.scenarioInspiration = prompt(`${warningText}Type some keywords or ideas below (optional), and then click OK.`, window.lastScenarioInspirationIdea);
  if(window.scenarioInspiration === null) return; // <-- they clicked cancel
  window.lastScenarioInspirationIdea = window.scenarioInspiration;
  buttonEl.disabled = true;
  buttonEl.textContent = "⌛ loading...";
  scenarioEl.value = "";
  
  let responseObj = ai({
    instruction: scenarioGenerationPrompt.evaluateItem,
    startWith: "The scenario begins with",
    stopSequences: ["\n\n"],
    onChunk: function(data) {
      scenarioEl.value += data.textChunk;
      scenarioEl.scrollTop = 99999999; // scroll down to bottom of text box
    },
    onFinish: function(data) {
      buttonEl.disabled = false;
      buttonEl.textContent = "✨ generate";
      localStorage.scenario = scenarioEl.value;
      updateDeleteButtonVisibility();
      resizeTextAreaHeightToFitContent(scenarioEl);
    },
  });
  
scenarioGenerationPrompt
  I'm going to get you to write a creative, interesting chat/roleplay scenario using the following keywords/prompt/ideas as inspiration: [window.scenarioInspiration || "(None provided. Just be creative!)"]
  The scenario should be based on these two characters:
  # Character 1: [botNameEl.value.trim()]
  [botDescriptionEl.value.trim().replaceAll("{{user}}", userName).replaceAll("{{char}}", botName)]
  \n
  # Character 2: [userNameEl.value.trim()]
  [userDescriptionEl.value.trim().replaceAll("{{user}}", userName).replaceAll("{{char}}", botName)]
  \n
  Your task is to write an interesting, creative, engaging chat/roleplay scenario between the above two characters. As mentioned above, it should be based on these keywords/ideas/topics/instructions: [window.scenarioInspiration || "(None provided. Just be creative!)"]
  The scenario should be a single SHORT paragraph that sets up the beginning of the chat/roleplay so it goes in an interesting and fun direction.
  Be creative! Just provide a one-paragraph "spark" to get the chat/roleplay going.
  $output = [this.joinItems("\n")]

resizeTextAreaHeightToFitContent(textArea, opts) =>
  if(!opts) opts = {};
  textArea.style.height = 0+"px";
  let height = textArea.scrollHeight+10;
  if(opts.min !== undefined && height < opts.min) {
    height = opts.min;
  }
  textArea.style.height = `${height}px`;

async generateCharactersAndScenario() =>
  let inspiration = prompt("Enter a few keywords/ideas and the AI will use them to generate the characters and the scenario:", window.lastCharactersAndScenarioInspirationIdea);
  if(inspiration === null) return;
  window.lastCharactersAndScenarioInspirationIdea = inspiration;
  inspiration = inspiration.trim();
  let inspirationInstruction = inspiration ? "You MUST use these instructions/ideas as inspiration: "+inspiration+"\nTry to make your best guess at the intention/idea behind these user-provided instructions/ideas, and then invent a creative and fascinating scenario based on those intentions." : "";

let fullInstruction = charactersAndScenarioGenerationPrompt.evaluateItem.replace("##inspirationPlaceholder##", inspirationInstruction);

botDescriptionDeleteBtn.dataset.mode = 'delete';
  userDescriptionDeleteBtn.dataset.mode = 'delete';
  scenarioDeleteBtn.dataset.mode = 'delete';
  
  generateCharactersAndScenarioBtn.disabled = true;
  generateCharactersAndScenarioBtn.textContent = "⌛ loading...";
  
  function render(text) {
    let lines = text.split("\n").map(l => l.trim()).filter(l => l.includes(":"));
    let char1 = lines.find(l => l.startsWith("CHARACTER 1 NAME:"))?.trim().split(":").slice(1).join(":").trim();
    let char2 = lines.find(l => l.startsWith("CHARACTER 2 NAME:"))?.trim().split(":").slice(1).join(":").trim();
    let desc1 = lines.find(l => l.startsWith("CHARACTER 1 DESCRIPTION:"))?.trim().split(":").slice(1).join(":").trim();
    let desc2 = lines.find(l => l.startsWith("CHARACTER 2 DESCRIPTION:"))?.trim().split(":").slice(1).join(":").trim();
    let scenario = text.split("STARTING SCENARIO:")[1]?.trim().replace(/\n+/g, "\n\n");
    botNameEl.value = char1 || "";
    userNameEl.value = char2 || "";
    botDescriptionEl.value = desc1 || "";
    userDescriptionEl.value = desc2 || "";
    scenarioEl.value = scenario || "";
    resizeTextAreaHeightToFitContent(botDescriptionEl, {min:120});
    resizeTextAreaHeightToFitContent(userDescriptionEl, {min:120});
    resizeTextAreaHeightToFitContent(scenarioEl, {min:120});
    document.querySelectorAll(".containsCharName").forEach(el => update(el));
  }
  
  let outputLength = 0;
  let responseObj = ai({
    instruction: fullInstruction,
    startWith: "CHARACTER 1 NAME:",
    onChunk: function(data) {
      outputLength += data.textChunk.length;
      generateCharactersAndScenarioBtn.textContent = `⌛ ${Math.round(outputLength/5)} words...`; // just an approximation
      try { render(data.fullTextSoFar); } catch(e) { console.error(e); }
    },
  });
  generateCharactersAndScenarioLoaderEl.innerHTML = responseObj.loadingIndicatorHtml;
  
  stopCharAndScenarioGenBtn.style.display = "block";
  stopCharAndScenarioGenBtn.onclick = function() {
    responseObj.stop();
    stopCharAndScenarioGenBtn.style.display = "none";
  };
  
  let data = await responseObj.onFinishPromise;
  console.log("generateCharactersAndScenario text:", data.text);
  render(data.text);
  stopCharAndScenarioGenBtn.onclick = null;
  stopCharAndScenarioGenBtn.style.display = "none";
  // let lines = data.text.split("\n").map(l => l.trim()).filter(l => l.includes(":"));
  // let char1 = lines.find(l => l.startsWith("CHARACTER 1 NAME:"))?.trim().split(":").slice(1).join(":").trim();
  // let char2 = lines.find(l => l.startsWith("CHARACTER 2 NAME:"))?.trim().split(":").slice(1).join(":").trim();
  // let desc1 = lines.find(l => l.startsWith("CHARACTER 1 DESCRIPTION:"))?.trim().split(":").slice(1).join(":").trim();
  // let desc2 = lines.find(l => l.startsWith("CHARACTER 2 DESCRIPTION:"))?.trim().split(":").slice(1).join(":").trim();
  // let scenario = data.text.split("STARTING SCENARIO:")[1]?.trim().replace(/\n+/g, "\n\n");
  // botNameEl.value = char1;
  // userNameEl.value = char2;
  // botDescriptionEl.value = desc1;
  // userDescriptionEl.value = desc2;
  // scenarioEl.value = scenario;
  
  resizeTextAreaHeightToFitContent(botDescriptionEl, {min:120});
  resizeTextAreaHeightToFitContent(userDescriptionEl, {min:120});
  resizeTextAreaHeightToFitContent(scenarioEl, {min:120});
  
  localStorage.botName = botNameEl.value;
  localStorage.userName = userNameEl.value;
  localStorage.botDescription = botDescriptionEl.value;
  localStorage.userDescription = userDescriptionEl.value;
  localStorage.scenario = scenarioEl.value;

generateCharactersAndScenarioLoaderEl.innerHTML = "";
  setTimeout(() => {
    generateCharactersAndScenarioBtn.textContent = "✨ generate characters";
    generateCharactersAndScenarioBtn.disabled = false;
  }, 2000);
  generateCharactersAndScenarioBtn.textContent = "⬇️ finished ⬇️";
  updateCharacterNameViews();
  updateDeleteButtonVisibility();
  update();
  
charactersAndScenarioGenerationPrompt
  Your task is to come up with an interesting and creative chat/RP scenario with two characters. Ensure that what you write is creative, subtle, authentic, interesting, descriptive, and at the level of an internationally acclaimed, award-winning fiction author. Try to be creative and avoid boring cliches.
  [""]
  You must use this EXACT template for your response:
  ---
  CHARACTER 1 NAME: (the first character's given name or nickname)
  CHARACTER 1 DESCRIPTION: (a 4-sentence description and personality of the first character)
  CHARACTER 2 NAME: (the second character's given name or nickname)
  CHARACTER 2 DESCRIPTION: (a 4-sentence description and personality of the second character)
  STARTING SCENARIO: (a one-paragraph roleplay starter - i.e. a starting scenario for the above two characters that is interesting, creative and engaging. This paragraph is the "spark" to get the chat/roleplay going - i.e. it "sets the scene".)
  ---
  Follow the above template EXACTLY, replacing the parentheticals with actual content.
  ##inspirationPlaceholder##
  $output = [this.joinItems("\n")]

$meta
  title = AI Chat & Roleplay (free, no sign-up, fast, unlimited)
  description = A free "Character AI" chat using Perchance's new AI text generation feature - chat with AI characters. Just create a character and a scenario for the chat/roleplay, and send a message. Talk to AI characters, no login/sign-up needed - completely free! 😌 An AI chat generator that's fast and has no limits on daily usage. Can do basically any character/scenario type - stories, anime characters, warrior cats roleplay, funny/silly/cute/wholesome, friend/companion/romantic/boyfriend/girlfriend AI/chatbot, movie and TV show characters - if you can describe it, then you can probably create your own chat bot for it. Basically a CAI / Character AI alternative. WARNINGS: (1) Everything the AI says is made up. (2) Inappropriate content (i.e. 18+ chat messages) should only be produced if explicitely prompted. If needed, guide the AI using the 'scenario' input - i.e. you can describe your own 'filter' / restrictions to the AI.

commentsBannedUsers
  4dafd569d9ba2925c9e7
  61fb1f2cdce8b2a45566
  077e8a3a7070ef8753ee
  c6176e59a16e56d6ebd1
  475f01f601f7296e1795
  1ef522bfc0e0b04726fe
  30743893ff00cac07b40
  207b4a86b9c8cf8e3f7a
  1b99cb216e4ccab2e621
  7d13d56eb4d0e0476a97
  0e074e1bd613d069d222
  edd8e65b646ae9e2e068
  f741f6b9ee39352986fc
  5ad3f7d1b0304bf72082
  eec997bbbc9f046f8ff8
  ca7a57165f5787cf88a4
  d7d170b1bbf548ae3638
  be637eaa304797119acd
  0e78c74c5f9a77d4db5a
  438c28dc386894293503
  aa961bb79a20734840e5
  ff052ab022e5ef70a068
  a8c2ac60554d819cb8f5
  11251530e81ee31356e0
  acff28b65738ae8bdd45
  8fa4467352d56da8cb36
  9b7cd52d178c29f9a345
  b7056ab30c71eef50bad
  efc383c36880dd1e1d04
  8ff54b7e7c86df34299c
  1543f059d555546cee00
  7af28ae824cf24ad6ba6
  abf3df5c8248fecdc19b
  4aa0853d3220fa2de451
  f1f84a99c8cc6e05a7df
  612f7c65807081b466ef
  525bef02fcc597ede909
  91136fa2eddb04aa4486
  6a949f353ac7c00de62f
  11e3f9e3e7067cbb39bb
  078c511806780b093c1c
  59c3c5f536176c8e7f33
  e0a872fbcbdecbcb1f5a
  cb3b92a5a0daf3041074
  82565d73d3edeabee4b2
  feaf485e320453c7d3a8
  0c2f42261e9cb646beab
  c3c44c783c49d7d24d2d
  f9a8c3bdb0826bbbacfb
  805ea82081d3e35a3a29
  0a355460c1fc87d21b43
  18aa714f6d54b732b82d
  2efe053c0743ced16387
  ca52d7634fccf9138a35
  e99a04469c4ff70dcba0
  87ba81889f3bbb4f8938
  50960ba005b0b20ac164
  ca11e183b0b05f99ffb0
  6ef2c2771cfc05ae4e61
  4457a3a800a01a953839
  59ee95c2fe69dc025355
  7d2ee53550cfc0e01acd
  867d7fc56fa2d5164383

                 description = A free "Character AI" chat using Perchance's new AI text generation feature - chat with AI characters. Just create a character and a scenario for the chat/roleplay, and send a message. Talk to AI characters, no login/sign-up needed - completely free! 😌 An AI chat generator that's fast and has no limits on daily usage. Can do basically any character/scenario type - stories, anime characters, warrior cats roleplay, funny/silly/cute/wholesome, friend/companion/romantic/boyfriend/girlfriend AI/chatbot, movie and TV show characters - if you can describe it, then you can probably create your own chat bot for it. Basically a CAI / Character AI alternative. WARNINGS: (1) Everything the AI says is made up. (2) Inappropriate content (i.e. 18+ chat messages) should only be produced if explicitely prompted. If needed, guide the AI using the 'scenario' input - i.e. you can describe your own 'filter' / restrictions to the AI.
              

wrap

<h1 style="margin-bottom:0.5rem">AI Chat</h1> 
<p style="font-size:80%;">psst. <a href="https://perchance.org/ai-character-chat" target="_blank" style="font-weight:bold; color:#2bbb00;">click here</a> to try out a different character chat interface.</p> 
<div style="display:flex; flex-direction:column; justify-content:center; align-items:center; max-width:98%; width:700px; margin:0 auto;"> 
  
  <p style="font-size:80%; margin-bottom:0rem; text-align:justify;">This is a demonstration of what's possible with Perchance's new <a href="/ai-text-plugin" target="_blank">AI Text Plugin</a>. I'll improve the interface a bit at some point, but for now it's pretty minimal. Try creating a character and a scenario below, and see what's possible using this new plugin! You can also try <a href="https://perchance.org/ai-story-generator" target="_blank" style="font-weight:bold;">writing a story</a> or <a href="https://perchance.org/ai-text-adventure" target="_blank" style="font-weight:bold;">going on an adventure</a> or <a href="https://perchance.org/ai-generated-hierarchical-world" target="_blank" style="font-weight:bold;">exploring a new planet</a>. Then head to the <a href="/ai-text-plugin" target="_blank">plugin page</a> to see some simple examples that you can use as starting points to create your own generators.</p>
  <p style="font-size:80%; margin-bottom:0.5rem; text-align:justify;">Need some character ideas for this demo? Try <a href="https://perchance.org/ai-character-description" target="_blank" style="font-weight:bold;">creating a character</a>. Or click the 'generate characters' button below to get the AI to come up with characters and a scenario for you based on a prompt:</p>
  <p style="font-size:160%; margin:0.5rem;">↓</p>
  <div style="font-size:85%; margin-bottom:1rem; margin-top:1rem;">
    <button id="stopCharAndScenarioGenBtn" style="display:none; font-size:80%; margin:0 auto; margin-bottom:0.25rem;">🛑 stop</button>
    <button id="generateCharactersAndScenarioBtn" onclick="generateCharactersAndScenario()" style="margin-bottom:0.25rem;">✨ generate characters</button>

    <div id="generateCharactersAndScenarioLoaderEl"></div>
  </div>
  
  <div>— Names —</div> 
  <input id="botNameEl" tabindex="1" placeholder="The bot's nickname" oninput="localStorage.botName=this.value, update(), updateCharacterNameViews()">
  <input id="userNameEl" tabindex="1" placeholder="Your nickname" oninput="localStorage.userName=this.value, update(), updateCharacterNameViews()">
  
  <div style="margin-top:2rem;">— <b class="containsCharName">[botName]</b> Character Description —</div>
  <div style="position:relative; width:100%;">
    <textarea id="botDescriptionEl" tabindex="1" placeholder="Describe who the bot is and what personality you want them to have." style="width:100%; height:120px; resize:vertical; display:block; padding-bottom:0.5rem; padding-top:0.25rem;" oninput="localStorage.botDescription=this.value; botDescriptionDeleteBtn.dataset.mode='delete'; botDescriptionDeleteBtn.style.display='';"></textarea>
    <div style="position:absolute; bottom:0.5rem; width:100%; height:0;">
      <button id="generateBotDescriptionBtn" onclick="generateCharacterDescription('bot', this); botDescriptionDeleteBtn.dataset.mode='delete';" style="font-size:70%;">✨ generate</button>
    </div>
    <button id="botDescriptionDeleteBtn" data-mode="delete" onclick="if(this.dataset.mode==='delete') { window.deletedBotDescription=botDescriptionEl.value; botDescriptionEl.value=''; this.dataset.mode='undo'; } else { botDescriptionEl.value=window.deletedBotDescription; this.dataset.mode='delete'; }; localStorage.botDescription=botDescriptionEl.value;" style="position:absolute; top:-0.75rem; right:0.5rem; font-size:60%; display:none;"></button>
    <style>
      #botDescriptionDeleteBtn[data-mode='delete']:before { content:'🗑️ delete'; }
      #botDescriptionDeleteBtn[data-mode='undo']:before { content:'↩️ undo'; }
    </style>
  </div>
  
  
  <div style="margin-top:2rem;">— <b class="containsCharName">[userName]</b> Character Description —</div>
  <div style="position:relative; width:100%;">
    <textarea id="userDescriptionEl" tabindex="1" placeholder="Describe the character that *you* will be in this chat." style="width:100%; height:120px; resize:vertical; display:block; padding-bottom:0.5rem; padding-top:0.25rem;" oninput="localStorage.userDescription=this.value; userDescriptionDeleteBtn.dataset.mode='delete'; userDescriptionDeleteBtn.style.display='';"></textarea>
    <div style="position:absolute; bottom:0.5rem; width:100%; height:0;">
      <button id="generateUserDescriptionBtn" onclick="generateCharacterDescription('user', this); userDescriptionDeleteBtn.dataset.mode='delete';" style="font-size:70%;">✨ generate</button>
    </div>
    <button id="userDescriptionDeleteBtn" data-mode="delete" onclick="if(this.dataset.mode==='delete') { window.deletedUserDescription=userDescriptionEl.value; userDescriptionEl.value=''; this.dataset.mode='undo'; } else { userDescriptionEl.value=window.deletedUserDescription; this.dataset.mode='delete'; }; localStorage.userDescription=userDescriptionEl.value;" style="position:absolute; top:-0.75rem; right:0.5rem; font-size:60%; display:none;"></button>
    <style>
      #userDescriptionDeleteBtn[data-mode='delete']:before { content:'🗑️ delete'; }
      #userDescriptionDeleteBtn[data-mode='undo']:before { content:'↩️ undo'; }
    </style>
  </div>
  
  <div style="margin-top:2rem;">— Scenario &amp; Lore —</div>
  <div style="position:relative; width:100%;">
    <textarea id="scenarioEl" tabindex="1" placeholder="Describe the scenario, lore, side characters, and any other relevant information." style="width:100%; height:120px; resize:vertical; display:block; padding-bottom:0.5rem; padding-top:0.25rem;" oninput="localStorage.scenario=this.value; scenarioDeleteBtn.dataset.mode='delete'; scenarioDeleteBtn.style.display=''; "></textarea>
    <div style="position:absolute; bottom:0.5rem; width:100%; height:0;">
      <button id="generateScenarioBtn" onclick="generateScenarioDescription(this); scenarioDeleteBtn.dataset.mode='delete';" style="font-size:70%;">✨ generate</button>
    </div>
    <button id="scenarioDeleteBtn" data-mode="delete" onclick="if(this.dataset.mode==='delete') { window.deletedScenario=scenarioEl.value; scenarioEl.value=''; this.dataset.mode='undo'; } else { scenarioEl.value=window.deletedScenario; this.dataset.mode='delete'; }; localStorage.scenario=scenarioEl.value;" style="position:absolute; top:-0.75rem; right:0.5rem; font-size:60%; display:none;"></button>
    <style>
      #scenarioDeleteBtn[data-mode='delete']:before { content:'🗑️ delete'; }
      #scenarioDeleteBtn[data-mode='undo']:before { content:'↩️ undo'; }
    </style>
  </div>
  
  <div style="margin-top:2rem;">— Chat Logs —</div>
  <div style="position:relative; width:100%;">
    <textarea id="chatLogsEl" placeholder="The chat logs will show up here, and you can edit them.&#10;&#10;The text here is completely freeform - for example, if you wanted to add a narrator that comes in every now and then, you could just write something like:&#10;&#10;Narrator: Later that day...&#10;&#10;And you can use *asterisks* for actions, and stuff like that." style="width:100%; height:450px; max-height:70vh; resize:vertical; display:block; padding-bottom:1.5rem;" oninput="localStorage.chatLogs=this.value; chatLogsDeleteBtn.dataset.mode='delete'; chatLogsDeleteBtn.style.display='';" spellcheck="false"></textarea>
    <div id="loaderEl" style="position:absolute; bottom:1.5rem; right:0.5rem;"></div>
    <div id="tipEl" style="display:none; position:absolute;top:0;left: 0;right: 0; font-size:85%;">
      <div style="background: var(--box-color);padding: 0.5rem;box-shadow: rgba(0, 0, 0, 0.75) 0px 1px 4px 0px; border:1px solid #676767; border-radius:3px; width:95%; max-width:600px; margin:0px auto; margin-top:1rem;">
        <div id="tipMessageEl" style="text-align:left;"></div>
        <button id="tipDismissBtn" style="margin-top:0.5rem;" onclick="tipEl.style.display='none';">✅ understood</button>
      </div>
    </div>
    <button id="chatLogsDeleteBtn" data-mode="delete" onclick="if(this.dataset.mode==='delete') { window.deletedChatLogs=chatLogsEl.value; chatLogsEl.value=''; this.dataset.mode='undo'; } else { chatLogsEl.value=window.deletedChatLogs; this.dataset.mode='delete'; }; localStorage.chatLogs=chatLogsEl.value;" style="position:absolute; top:-0.75rem; right:0.5rem; font-size:60%; display:none;"></button>
    <style>
      #chatLogsDeleteBtn[data-mode='delete']:before { content:'🗑️ delete'; }
      #chatLogsDeleteBtn[data-mode='undo']:before { content:'↩️ undo'; }
    </style>
    <div id="deleteAndRegenLastMessageCtn" style="display:[chatLogsEl.value ? 'flex' : 'none']; margin-top:0.5rem; align-items:center; justify-content:center; position:relative; top:-0.5rem; height:0.25rem;">
      <div id="rateLastMessageCtn" style="display:none; position:relative; height:min-content; margin-right:1rem;">
        <div id="ratingReasonCtn" style="display:none; position:absolute; text-align:center; width:100%; font-size:80%; top:0; height:0px;">
          <div style="position:absolute; bottom:0.25rem; text-align:center; width:max-content;">
            <input id="ratingReasonEl" list="recentRatingReasonsDataList" placeholder="(Optional) Reason" style="width:150px;">
            <datalist id="recentRatingReasonsDataList"></datalist>
          </div>
        </div>
        <button id="rateLastMessageBadBtn" disabled onclick="rateLastMessage('bad');" style="font-size:75%; filter:hue-rotate(300deg);">👎</button>
        <button id="rateLastMessageGoodBtn" disabled onclick="rateLastMessage('good');" style="font-size:75%; margin-left:0.25rem; filter:hue-rotate(35deg) saturate(0.9);">👍</button>
      </div>
      <div style="position:relative; height:min-content; margin-left:0.5rem; display:flex;">
        <div id="undoRegenMessageCtn" style="display:none; position:absolute; text-align:center; width:100%; font-size:80%; top:0; height:0px;"><div style="position:absolute; bottom:0.25rem; text-align:center; width:100%;"><button style="width:max-content;" onclick="undoRegenLastMessage();">↩️ undo</button></div></div>
        <button id="regenPrevButton" class="regenBtn" onclick="prevRegenMessage(); chatLogsDeleteBtn.dataset.mode='delete';" disabled style="margin-left:0rem; ">⬅️</button>
        <button id="regenMessageBtn" class="regenBtn" onclick="regenLastMessage(); chatLogsDeleteBtn.dataset.mode='delete';" style="margin-left:0.5rem; min-width:4rem;" data-short-content="🔁">🔁 regen last</button>
        <button id="regenNextButton" class="regenBtn" onclick="nextRegenMessage(); chatLogsDeleteBtn.dataset.mode='delete';" disabled style="margin-left:0.5rem;">➡️</button>
        <style>
          .regenBtn {
            font-size: 75%;
            height: min-content;
            backdrop-filter: blur(200px); /* this is a hack to prevent background from being transparent (due to user agent styles - in Chrome, at least) when button is disabled */
          }
        </style>
      </div>
      <div style="position:relative; height:min-content; margin-left:1.5rem;">
        <div id="undoDeleteLastMessageCtn" style="display:none; position:absolute; text-align:center; width:100%; font-size:80%; top:0; height:0px;"><div style="position:absolute; bottom:0.25rem; text-align:center; width:100%;"><button style="width:max-content;" onclick="undoDeleteLastMessage();">↩️ undo</button></div></div>
        <button id="deleteLastMessageBtn" onclick="deleteLastMessage(); localStorage.chatLogs=chatLogsEl.value; chatLogsDeleteBtn.dataset.mode='delete';" style="font-size:75%; min-width:3rem;" data-short-content="🗑️">🗑️ delete last</button>
      </div>
    </div>
    <script>
      updateLastMessageButtonsDisplayIfNeeded();
    </script>
  </div>
  
  
  <div style="position:relative; width:100%;">
    <textarea id="inputEl" tabindex="1" placeholder="Write a message here and click send, or just click send to get the AI to generate the next message for you. You can also directly edit the chat log text above." style="width:100%; height:85px; margin-top:0.5rem; resize:vertical; display:block; font-size:85%;" onkeydown="if(event.which === 13) { event.preventDefault(); handleSendButtonClick({mode:'normal'}); }" oninput="localStorage.input=this.value; updateVisibilityOfReplyButtonsAndSelectors();"></textarea>
    <div style="position:absolute; bottom:0.5rem; width:100%; height:0;">
      <div oninput="if(!localStorage.knowsWhatAutoImproveFeatureDoes) { alert(this.title); localStorage.knowsWhatAutoImproveFeatureDoes='1'; }" title="This 'auto-improve' feature allows you write a very short/simple message (like 'pick up the apple') and the AI will expand that into a nicely-written message for you." style="display:flex; align-items:center; border-radius:3px; border:1px solid grey; width:min-content; background:var(--box-color); padding:0.125rem; position:absolute; bottom:0; right:0.5rem; font-size:80%;">
        <input id="autoImproveCheckboxEl" type="checkbox" style="cursor:pointer;" onclick="setTimeout(updateVisibilityOfReplyButtonsAndSelectors, 10)">
        <span style="margin-left:0.25rem; width:max-content; cursor:pointer;" onclick="autoImproveCheckboxEl.click();">auto-improve</span>
      </div>
    </div>
  </div>
  <div style="display:flex; flex-direction:column; margin-top:0.5rem; align-items:center;">
    <div style="display:flex;margin-bottom:0.5rem;align-items: center;">
      <button id="sendMessageBtn" tabindex="1" onclick="handleSendButtonClick({mode:'normal'}); chatLogsDeleteBtn.dataset.mode='delete';" style="display:flex; font-weight:bold; font-size:110%;">📨 send message</button>
      <div id="sendAsCharacterCtn" style="display:none;">
        <span style="padding:0 0.25rem; display:flex; align-items:center; font-size:80%; opacity:0.7;">as</span>
        <select id="sendAsCharacterSelectEl" style="height:min-content; font-size:80%; max-width:90px;" onchange="if(this.value === '~~~NEW_CHAR~~~') { let name = prompt(`Enter the new character's name:`); if(name === null) { this.value=this.options[0].value; } else if(name.trim()) { let newOption = document.createElement('option'); newOption.textContent=name; this.insertBefore(newOption, this.options[this.selectedIndex]); this.value=name; } }"></select>
      </div>
    </div>
    <div id="autoRespondCtn" style="display:flex; align-items:center; justify-content:center; font-size:80%; margin-bottom:0.5rem; border:1px solid grey; padding:0.125rem; border-radius:3px;">
      <input id="autoRespondCheckboxEl" type="checkbox" style="cursor:pointer;" checked onchange="localStorage.user_autoRespond=this.checked||'';"> <span style="opacity:0.7; margin-left:0.25rem; cursor:pointer; user-select:none;" onclick="autoRespondCheckboxEl.checked=!autoRespondCheckboxEl.checked;">auto-respond</span>
    </div>
    <script>if(localStorage.user_autoResponder) autoRespondCheckboxEl.checked = !!localStorage.user_autoResponder;</script>
    <div id="quickReplyButtonsCtn" style="display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center;"></div>
    <div id="futureSuggestionsCtn" style="display:none; gap:0.5rem; flex-wrap:wrap; justify-content:center;"></div>
  </div>
  
  <div style="position:relative; width:100%; margin-top:1rem;">
    <textarea id="writingInstructionsEl" placeholder="(Optional) Brief writing instructions for the AI - e.g. writing style, what should happen next, message length, general reminders, things to avoid, etc." style="width:100%; height:80px; resize:vertical; font-size:85%; display:block;" oninput="localStorage.writingInstructions=this.value; writingInstructionsDeleteBtn.dataset.mode='delete'; writingInstructionsDeleteBtn.style.display='';" onchange="this.value=this.value.replace(/\n+/g, ' ')" onkeydown="if(event.keyCode == 13) { event.preventDefault(); }"></textarea>
    <script>if(window.innerWidth > 600) writingInstructionsEl.placeholder += " Keep this pretty short and 'to the point'. Use the scenario/lore box for longer stuff."</script>
    <button id="writingInstructionsDeleteBtn" data-mode="delete" onclick="if(this.dataset.mode==='delete') { window.deletedWritingInstructions=writingInstructionsEl.value; writingInstructionsEl.value=''; this.dataset.mode='undo'; } else { writingInstructionsEl.value=window.deletedWritingInstructions; this.dataset.mode='delete'; }; localStorage.writingInstructions=writingInstructionsEl.value;" style="position:absolute; top:-0.75rem; right:0.5rem; font-size:60%; display:none;"></button>
    <div style="font-size:75%; opacity:0.7; margin-top:0.125rem;">(remember to keep the "what happens next" part up-to-date if you include that in the above instructions)</div>
    <style>
      #writingInstructionsDeleteBtn[data-mode='delete']:before { content:'🗑️ delete'; } 
      #writingInstructionsDeleteBtn[data-mode='undo']:before { content:'↩️ undo'; }
    </style>
  </div>
  
  <div style="margin-top:3rem;">
    <button onclick="saveChatDataToUsersDevice()">💾 save this chat</button>
    <button onclick="loadChatDataFromUsersDevice()">📁 load a chat</button>
  </div>
  
  <div style="margin-top:1rem;">
    <button id="shareChatBtn" onclick="generateShareLinkForChat()">🔗 share this chat</button>
    <div id="shareLinkCtn" style="display:none; margin-top:0.5rem;">
      <input style="width:300px;" id="shareChatLinkInputEl" disabled> <button style="min-width:80px;" onclick="navigator.clipboard.writeText(shareChatLinkInputEl.value).then(r => this.innerHTML='✅'); setTimeout(() => this.innerHTML='copy link', 2000);">copy link</button>
      <div style="font-size:70%; opacity:0.7;">(this link contains a snapshot of the chat data at the time the link was generated)</div>
    </div>
  </div>
</div>

let resizeObserver = new ResizeObserver(() => updateShadowPositionAndSize());
    resizeObserver.observe(textArea);

function createCopy(textArea) {
      let copy = document.createElement('div');
      let style = getComputedStyle(textArea);

let propertiesToCopy = ['overflow-x', 'overflow-y', 'display', 'font-family', 'font-size', 'font-weight', 'word-wrap', 'white-space', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom', 'border-left-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-style', 'text-align'];
      propertiesToCopy.forEach(key => copy.style[key] = style[key]);

Object.assign(copy.style, {
        position: 'absolute',
        left: `${textArea.offsetLeft}px`,
        top: `${textArea.offsetTop}px`,
      });

document.body.appendChild(copy);
      return copy;
    }

function getCaretPosition(textArea, copy) {
      let { selectionStart, selectionEnd } = textArea;
      let value = textArea.value;
      let phantomNewline = false;

if(selectionStart === selectionEnd && value[selectionStart - 1] === '\n') {
        phantomNewline = true;
      }

copy.textContent = phantomNewline ? value.substring(0, selectionStart) + ' ' + value.substring(selectionStart) : value;

if(!copy.firstChild) {
        let style = getComputedStyle(textArea);
        return {
          x: textArea.offsetLeft + parseFloat(style.paddingLeft),
          y: textArea.offsetTop + parseFloat(style.paddingTop),
        };
      }

let range = document.createRange();
      range.setStart(copy.firstChild, phantomNewline ? selectionStart + 1 : selectionStart);
      range.setEnd(copy.firstChild, phantomNewline ? selectionEnd + 1 : selectionEnd);

const rect = range.getBoundingClientRect();
      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

return {
        x: rect.left + scrollLeft, // - textArea.scrollLeft,
        y: rect.top + scrollTop, // - textArea.scrollTop,
      };
    }

}

if(typeof continueMessageBtn === "undefined") { // <-- just so, while generator is being edited, multiple buttons aren't created
    let tmp = document.createElement("div");
    tmp.innerHTML = `<button id="continueMessageBtn" style="position:absolute; cursor:pointer; font-size:65%; display:none;">▶️</button>`;
    let btn = tmp.firstElementChild;
    btn.onmousedown = function() {
      handleSendButtonClick({mode:'continue'});
    };
    document.body.append(btn); // must be in the body, so it's position is relative to the body, and not e.g. the chatLogs container element
  }
  let chatLogsLineHeightPixels = getLineHeightInPixels(chatLogsEl);
  chatLogsEl.addEventListener('keydown', function(e) {
    continueMessageBtn.style.display = 'none';
  });
  trackCaretPosition(chatLogsEl, pos => {
    if(!pos) { // since we passed onlyComputePositionWhenAtEndOfText:true, we get updates when cursor moves, but only get position if at end of text (for performance reasons)
      continueMessageBtn.style.display = 'none';
      return;
    }
    // console.log(pos.x, pos.y);
    let thereIsOnlyWhiteSpaceAfterCaret = /^\s*$/.test(chatLogsEl.value.slice(chatLogsEl.selectionStart));
    if(document.activeElement === chatLogsEl && thereIsOnlyWhiteSpaceAfterCaret && pageXYIsInsideElement(pos.x, pos.y, chatLogsEl)) {
      continueMessageBtn.style.display = 'block';
      let buttonHeight = continueMessageBtn.offsetHeight;
      continueMessageBtn.style.left = `${pos.x + 10}px`;
      continueMessageBtn.style.top = `${pos.y - 0.5*(buttonHeight-chatLogsLineHeightPixels)}px`;
    } else {
      continueMessageBtn.style.display = 'none';
    }
  }, {onlyComputePositionWhenAtEndOfText:true});
  chatLogsEl.addEventListener('blur', () => {
    continueMessageBtn.style.display = 'none';
  });
  document.addEventListener('click', (event) => {
    if(event.target !== chatLogsEl) {
      continueMessageBtn.style.display = 'none'; // not sure why this is required in Chrome Android (blur event handler should be enough)
    }
  });

chatLogsEl.scrollTop = 999999999; // scroll to the bottom of the chat logs
    setTimeout(() => { chatLogsEl.scrollTop = 999999999; }, 3000); // <-- because ad load on mobile causes screen height to change which causes text area height to change. not full-proof, but it'll do for now
  })();
</script>

<p id="askForRatingsNoticeEl" style="display:none; font-size:80%; max-width:600px; margin:1rem auto; text-align:justify;">If an AI response <b>makes you happy 👍</b> or <b>makes you bored or makes mistakes 👎</b>, please rate it! Each vote helps to improve the AI. There's no need to vote on "average" responses.</p>
<p style="font-size:80%; max-width:600px; margin:1rem auto; text-align:justify;">This page uses your browser's 'localStorage' to <b>remember your messages/descriptions/etc.</b> even after you refresh to page. To remove the data, use the delete buttons, or just manually select the text in the text boxes and delete it.</p>
<hr> 
<p>Have questions about this demo, or the <a href="/ai-text-plugin" target="_blank">AI Text Plugin</a>? Ask them in the comments:</p>

<div id="commentsCtn"></div>
<p style="font-size:80%; max-width:700px; width:95%; margin:0 auto; text-align:justify;"><b style="color:red;">Note</b>: I've decided to hide the comments by default for now because I noticed that there were some trolls and I don't have time to moderate right now. I'll try to sweep through and permaban spammers/trolls/bullies/racists/homophobes/etc. as often as possible, but in the meantime I suggest that you <b>immediately block trolls, bullies, and shady people. Do not talk to them.</b> Please encourage other chat participants to block them instead of engaging with them.</p>
<p style="font-size:80%; max-width:700px; width:95%; margin:0.5rem auto; text-align:justify;"><b>Note:</b> If you are reporting a bug/issue in the comments, please give as much detail as you can. For example, if it's not working, then was it working originally? If it never worked, what browser are you using? And on what operating system? E.g. "Chrome on Windows 10" or "Chrome on Chromebook". If it was originally working, but then stopped working suddenly, then try deleting some messages to see if it has something to do with the length of the chat. Also try refreshing the page, and let me know if that didn't help. Is the "Loading..." thing in the top-right corner of the page? The more details you add, the quicker I can fix it :) Thank you to the pioneers who are testing this! There'll likely be a few annoying issues while this plugin is new.</p>
<br>

<script>
  function createCommentsSectionHtml() {
    let startVisible = false;
    if(window.commentsEl && window.commentsEl.style.display !== 'none') startVisible = true;
    commentsCtn.innerHTML = ""; // must delete existing comments section first because comments plugin has code which cause it to not output any HTML if that comments section already exists on the page
    let commentsPluginHtml = root.commentsPlugin({bannedUsers:root.commentsBannedUsers, width:"min(750px, 100%)", height:"min(70vh, 600px)", forceColorScheme:localStorage.forceColorScheme || null});
    commentsCtn.innerHTML = `
      <p><button onclick="if(commentsEl.style.display == 'none') { commentsEl.style.display=''; this.textContent='hide comments'; } else { commentsEl.style.display='none'; this.textContent='💬 show comments'; }">${startVisible ? "hide comments" : "💬 show comments"}</button></p>
      <p id="commentsEl" style="${startVisible ? "" : "display:none;"}">
        ${commentsPluginHtml}
      </p>
    `;
  }
  createCommentsSectionHtml();
</script>

<div style="position:fixed; bottom:0.5rem; left:0.5rem; z-index:10;">
  <button id="darkModeBtn" style="cursor:pointer;" onclick="window.toggleManualDarkMode(); createCommentsSectionHtml();">🌃</button>
  <div style="display:inline-block;">[fullscreenButton("⇱", "⇲")]</div>
</div>
<script>
  function toggleManualDarkMode() {
    let newColorScheme = (getCurrentColorScheme() === "dark" ? "light" : "dark");
    localStorage.forceColorScheme = newColorScheme;
    setColorScheme(newColorScheme);
    // if chosen mode matches current OS default, we remove manual "forced" mode:
    let systemColorScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
    if(systemColorScheme === newColorScheme) {
      localStorage.removeItem("forceColorScheme");
    }
  }
  function getCurrentColorScheme() {
    if(localStorage.forceColorScheme !== undefined) {
      return localStorage.forceColorScheme;
    } else {
      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
    }
  }
  function setColorScheme(scheme) {
    if(scheme !== "dark" && scheme !== "light") throw new Error("scheme should be 'light' or 'dark'");
    document.querySelector("#darkModeBtn").textContent = (scheme === "dark" ? "🌄" : "🌃");
    if(scheme === "dark") {
      document.documentElement.style.colorScheme = "dark";
      document.body.style.color = "#d8d4cf";
      document.body.style.backgroundColor = "#131516";
      document.documentElement.style.setProperty('--box-color', '#2a2a2a');
    } else {
      document.documentElement.style.colorScheme = "light";
      document.body.style.color = "black";
      document.body.style.backgroundColor = "white";
      document.documentElement.style.setProperty('--box-color', '#ebebeb');
    }
  }
  // during page load, set the chosen mode based on localStorage value if it exists:
  if(localStorage.forceColorScheme !== undefined) {
    setColorScheme(localStorage.forceColorScheme);
  } else {
    // user has not manually overwritten, so we use OS default:
    let systemIsInDarkMode = !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
    setColorScheme(systemIsInDarkMode ? "dark" : "light");
  }
</script>
 

<div style="position:fixed; bottom:0.5rem; right:0.5rem; text-align:right; z-index:100;">
  <div id="feedbackCommentsCtn"></div>
  <button id="feedbackBtn893745ykfuhd" onclick="if(feedbackCommentsCtn.innerHTML.length === 0) { feedbackCommentsCtn.innerHTML=generateFeedbackCommentsHtml(); this.innerHTML='✖ close'; } else {  feedbackCommentsCtn.innerHTML='';  this.innerHTML='🗨️ feedback'; }">🗨️ feedback</button>
</div>
<script>
  function generateFeedbackCommentsHtml() {
    let options = {channel:"feedback", hideComments:location.hash.includes("#showfeedback") || localStorage.showFeedback ? false : true, height:location.hash.includes("#showfeedback") || localStorage.showFeedback ? 500 : 120, commentPlaceholderText: "Share some feedback. Do not share personal info, feedback data is public.", submitButtonText: "submit feedback"};
    if(localStorage.forceColorScheme) options.forceColorScheme = localStorage.forceColorScheme;
    return root.commentsPlugin(options);
  }
</script>

                 <p style="font-size:80%; margin-bottom:0rem; text-align:justify;">This is a demonstration of what's possible with Perchance's new <a href="/ai-text-plugin" target="_blank">AI Text Plugin</a>. I'll improve the interface a bit at some point, but for now it's pretty minimal. Try creating a character and a scenario below, and see what's possible using this new plugin! You can also try <a href="https://perchance.org/ai-story-generator" target="_blank" style="font-weight:bold;">writing a story</a> or <a href="https://perchance.org/ai-text-adventure" target="_blank" style="font-weight:bold;">going on an adventure</a> or <a href="https://perchance.org/ai-generated-hierarchical-world" target="_blank" style="font-weight:bold;">exploring a new planet</a>. Then head to the <a href="/ai-text-plugin" target="_blank">plugin page</a> to see some simple examples that you can use as starting points to create your own generators.</p>
              

AI Chat

BLANK