Add branching as distinct from bookmarking

public/index.html

@@ -4123,7 +4123,8 @@
                             <div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush" data-i18n="[title]Generate Image"></div>
                             <div title="Narrate" class="mes_narrate fa-solid fa-bullhorn" data-i18n="[title]Narrate"></div>
                             <div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt"></div>
-                            <div title="Create bookmark" class="mes_create_bookmark fa-regular fa-code-branch" data-i18n="[title]Create Bookmark"></div>
+                            <div title="Create bookmark" class="mes_create_bookmark fa-regular fa-solid fa-book-bookmark" data-i18n="[title]Create Bookmark"></div>
+                            <div title="Create branch" class="mes_create_branch fa-regular fa-code-branch" data-i18n="[title]Create Branch"></div>
                             <div title="Copy" class="mes_copy fa-solid fa-copy " data-i18n="[title]Copy"></div>
                         </div>
                         <div title="Open bookmark chat" class="mes_bookmark fa-solid fa-bookmark" data-i18n="[title]Open bookmark chat"></div>

public/script.js

@@ -103,7 +103,8 @@ import {
 
 import {
     createNewBookmark,
-    showBookmarksButtons
+    showBookmarksButtons,
+    createBranch,
 } from "./scripts/bookmarks.js";
 
 import {
@@ -6525,6 +6526,11 @@ function swipe_left() {      // when we swipe left..but no generation.
     }
 }
 
+async function branchChat(mesID) {
+    let name = await createBranch(mesID);
+    await openCharacterChat(name);
+}
+
 // when we click swipe right button
 const swipe_right = () => {
     if (chat.length - 1 === Number(this_edit_mes_id)) {
@@ -6705,6 +6711,8 @@ const swipe_right = () => {
     }
 }
 
+
+
 function displayOverrideWarnings() {
     if (!this_chid || !selected_group) {
         $('.prompt_overridden').hide();
@@ -8426,6 +8434,13 @@ jQuery(async function () {
         }
     });
 
+    $(document).on("click", ".mes_create_branch", async function () {
+        var selected_mes_id = $(this).closest(".mes").attr("mesid");
+        if (selected_mes_id !== undefined) {
+            branchChat(selected_mes_id);
+        }
+    });
+
     $(document).on("click", ".mes_stop", function () {
         if (streamingProcessor) {
             streamingProcessor.abortController.abort();

public/scripts/bookmarks.js

@@ -133,6 +133,39 @@ async function saveBookmarkMenu() {
     return createNewBookmark(chat.length - 1);
 }
 
+export async function createBranch(mesId) {
+    if (!chat.length) {
+        toastr.warning('The chat is empty.', 'Bookmark creation failed');
+        return;
+    }
+
+    if (mesId < 0 || mesId >= chat.length) {
+        toastr.warning('Invalid message ID.', 'Bookmark creation failed');
+        return;
+    }
+
+    const lastMes = chat[mesId];
+    const mainChat = selected_group ? groups?.find(x => x.id == selected_group)?.chat_id : characters[this_chid].chat;
+    const newMetadata = { main_chat: mainChat };
+    let name = `Branch #${mesId} - ${humanizedDateTime()}`
+
+    if (selected_group) {
+        await saveGroupBookmarkChat(selected_group, name, newMetadata, mesId);
+    } else {
+        await saveChat(name, newMetadata, mesId);
+    }
+    // append to branches list if it exists
+    // otherwise create it
+    if (typeof lastMes.extra !== 'object') {
+        lastMes.extra = {};
+    }
+    if (typeof lastMes.extra['branches'] !== 'object') {
+        lastMes.extra['branches'] = [];
+    }
+    lastMes.extra['branches'].push(name);
+    return name;
+}
+
 async function createNewBookmark(mesId) {
     if (!chat.length) {
         toastr.warning('The chat is empty.', 'Bookmark creation failed');