├── LICENSE
├── README.md
├── dist
    └── simbiotico.html
├── gulpfile.js
├── package.json
└── src
    ├── partials
        ├── alert-popup.html
        ├── chat-popup.html
        ├── help-popup.html
        ├── jsmind_draggable.html
        ├── login-popup.html
        ├── mindmap.html
        ├── settings-popup.html
        └── utils.html
    └── simbiotico.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 2-Clause License
 2 | 
 3 | Copyright (c) 2023, qrdlgit
 4 | 
 5 | Redistribution and use in source and binary forms, with or without
 6 | modification, are permitted provided that the following conditions are met:
 7 | 
 8 | 1. Redistributions of source code must retain the above copyright notice, this
 9 |    list of conditions and the following disclaimer.
10 | 
11 | 2. Redistributions in binary form must reproduce the above copyright notice,
12 |    this list of conditions and the following disclaimer in the documentation
13 |    and/or other materials provided with the distribution.
14 | 
15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
16 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
17 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
18 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
19 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
20 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
21 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
22 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
23 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
24 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # simbiotico
 2 | GPT / Human collaboration mindmap tool using OpenAI ChatGPT API.  Brainstorm with ChatGPT to create comprehensive mindmaps.  Not only use ChatGPT to provide suggestions, but also chat with it in depth and extensively about your mindmap.  Ask ChatGPT questions, and have ChatGPT ask you questions about it.
 3 | 
 4 | To use, download the RAW [html file]([https://github.com/qrdlgit/simbiotico/blob/main/dist/simbiotico.html](https://raw.githubusercontent.com/qrdlgit/simbiotico/main/dist/simbiotico.html) onto your local machine and run it in your browser as a local file.  This format was chosen to guarantee that your API key never leaves your computer except to communicate with the OpenAI API server.
 5 | 
 6 | # Help
 7 | 
 8 | Creating a new map and setting the map name:
 9 | - Change the URL to `file://<path>/simbiotico.html?map=[map_name]`
10 | - This format was chosen for easy bookmarking in your web browser
11 | 
12 | Security:
13 | - The security of your OpenAI API key is important. Efforts have been made with this app to ensure its safety.
14 | - This code is open source and not minified, making it easily reviewable.
15 | - Your API key is not stored locally in any persistent storage and must be entered each time you load this page.
16 | - All imports have SRI hashes, and external code has been reviewed for potential issues.
17 | - This app is fairly lightweight in its usage, but make sure you have a spending limit on your OpenAI account. You can see token count usage in the settings page.
18 | 
19 | Interacting with the mindmap:
20 | - Mouse click to select a node, double-click to edit, press Enter to save
21 | - You can either click and drag your mouse to pan the mindmap, or use mousewheel / two-finger gestures on touchpad to scroll the mindmap vertically or horizontally if it's larger in those dimensions (respectively) to the screen.
22 | - Mouse drag nodes to move to another node
23 | - Mouse click small circle to expand/collapse
24 | - Press Enter to create a sibling node
25 | - Press Ctrl-Enter to create a child node
26 | - Press Delete to delete a node
27 | 
28 | Note that maps are autosaved via the IndexedDB API, browser-based storage that is only accessible by the same origin. In other words, your maps can only be accessed from where this page is being served from. Be careful when using other browser-based applications you save/serve from the same location, as they can access the IndexDB API storage. Use only code that is openly reviewable, open source, or from a trusted entity.
29 | 
30 | ![image](https://user-images.githubusercontent.com/129564070/232127191-4db0f0e4-cc71-4b58-aa42-ba2651890a6b.png)
31 | 
32 | ![image](https://user-images.githubusercontent.com/129564070/232118343-50c8f300-19d9-4a94-b08f-b2048b292fb6.png)
33 | 
34 | ![image](https://user-images.githubusercontent.com/129564070/232118552-5c3df61f-de38-4213-b6ce-65d9b736e1f7.png)
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/dist/simbiotico.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html>
   3 |   <head>
   4 |     <meta charset="utf-8" />
   5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6 |     <title>jsMind</title>
   7 |     <link
   8 |       rel="stylesheet"
   9 |       href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
  10 |       integrity="sha384-l06Plad51xhuxEwX9KBVJsB3YBeDeDhvs7QAa0vF9pUb+i2SA40QpPF55L6Rfrzq"
  11 |       crossorigin="anonymous"
  12 |     />
  13 | 
  14 |     <link rel="stylesheet" href="https://unpkg.com/jsmind@0.5.4/style/jsmind.css" integrity="sha384-1nTEMjWXLLPe1f1aBitnnwTmPw8N71MrZQQBMQn7ua9HnvdBZrPzhT1DMp2h+baG" crossorigin="anonymous">
  15 | 
  16 |     <link
  17 |       rel="stylesheet"
  18 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  19 |       integrity="sha384-/frq1SRXYH/bSyou/HUp/hib7RVN1TawQYja658FEOodR/FQBKVqT9Ol+Oz3Olq5"
  20 |       crossorigin="anonymous"
  21 |     />
  22 | 
  23 |     <style type="text/css">
  24 | 
  25 | 
  26 |                 li {
  27 |                     margin-top: 2px;
  28 |                     margin-bottom: 2px;
  29 |                 }
  30 |                 button {
  31 |                     width: 140px;
  32 |                 }
  33 |                 select {
  34 |                     width: 140px;
  35 |                 }
  36 |          .file_input {
  37 |                     width: 100px;
  38 |                 }
  39 |                 button.sub {
  40 |                     width: 100px;
  41 |                 }
  42 | 
  43 |          body {
  44 |       margin: 0; !important
  45 |       padding: 0; !important
  46 |       position: relative;
  47 |       height: 100vh;
  48 |       overflow: hidden;
  49 |          }
  50 |     </style>
  51 | 
  52 | <script src="https://unpkg.com/jsmind-simbiotico@0.5.6/js/jsmind.js" integrity="sha384-R5+m5beLoKFGYYfHYhJjZOFuYIfT3HUmn/8DwFvhVikHnGKsaBes0K45Zme67izm" crossorigin="anonymous"></script>
  53 | <script src="https://unpkg.com/jsmind-simbiotico@0.5.6/js/jsmind.draggable-node.js" integrity="sha384-GFQFZXgSIVm6wgUddmRKVIMyPAd+6Bk2TuUXnwb6U0PUMThttsKrAET9K/JawGTN" crossorigin="anonymous"></script>
  54 |     
  55 | 
  56 |   </head>
  57 |   <body>
  58 |     <style>
  59 |   #main_container {
  60 |     width: 200px;
  61 |     position: relative;
  62 |     z-index: 2;
  63 |   }
  64 | 
  65 |   #jsmind_container {
  66 |     position: absolute;
  67 |     top: 0;
  68 |     left: 0;
  69 |     width: 100%;
  70 |     height: 100%;
  71 |     background: #000000;
  72 |     z-index: 1;
  73 |   }
  74 | 
  75 |   #jsmind_nav ul {
  76 |     padding: 0;
  77 |   }
  78 | 
  79 |   #jsmind_nav li {
  80 |     margin-right: 10px;
  81 |   }
  82 | 
  83 |   #jsmind_nav button {
  84 |     background-color: transparent;
  85 |     border: none;
  86 |     color: #fff;
  87 |     cursor: pointer;
  88 |     font-size: 24px;
  89 |     padding: 5px;
  90 |   }
  91 | 
  92 |   #jsmind_nav button:hover {
  93 |     color: #007bff;
  94 |   }
  95 | 
  96 |   #jsmind_nav label {
  97 |     cursor: pointer;
  98 |     font-size: 18px;
  99 |     padding: 5px;
 100 |     color: #333;
 101 |   }
 102 | 
 103 |   #jsmind_nav label:hover {
 104 |     color: #007bff;
 105 |   }
 106 | 
 107 |   .draggable {
 108 |       position: fixed;
 109 |       bottom: 0;
 110 |       
 111 |       margin-bottom: 2px;
 112 |       margin-left: 4px;
 113 |       background: #34495e;
 114 |       border-radius: 5px;
 115 |       box-shadow: 3px 4px 6px rgba(128, 128, 128, 0.5);
 116 |       display: flex;
 117 |       justify-content: space-around;
 118 |       align-items: center;
 119 |       padding: 5px;
 120 |       cursor: move;
 121 |       min-width: 600px;
 122 |   }
 123 | 
 124 |   .icon-button {
 125 |       background: none;
 126 |       border: none;
 127 |       cursor: pointer;
 128 |       font-size: 24px;
 129 |   }
 130 | 
 131 |   .icon-button:hover {
 132 |       color: #007bff;
 133 |   }
 134 |   
 135 |   body jmnode {
 136 |       font: 12px/1.125 Verdana, Arial, Helvetica, sans-serif;
 137 |       padding: 5px;
 138 |   }
 139 |   
 140 | </style>
 141 | <div id="jsmind_container"></div>
 142 | <div id="main_container">
 143 |   <div id="jsmind_nav">
 144 |     <div id="button-bar" class="draggable">
 145 |               <button  class="icon-button"  onclick="save_file();" title="Save File">
 146 |           <i class="fas fa-download"></i>
 147 |               </button>
 148 | 	      
 149 |               <input
 150 |           id="file_input"
 151 |           class="file_input"
 152 |           type="file"
 153 |           style="display: none"
 154 |         /><label for="file_input" title="Upload File"
 155 |           ><i
 156 |             style="color: #fff; margin-right: 20px; margin-top: 2px; font-size: 24px"
 157 |             class="fas fa-upload"
 158 |           ></i
 159 |         ></label>
 160 |       
 161 |         <button class="icon-button" onclick="add_node();" id="add-node-button" title="Add Node">
 162 |           <i class="fas fa-share-alt"></i>
 163 |         </button>
 164 |       
 165 |         <button  class="icon-button"  onclick="collapse_all();" title="Collapse All">
 166 |           <i class="fas fa-compress-alt"></i>
 167 |         </button>
 168 |       
 169 |         <button  class="icon-button"  onclick="expand_all();" title="Expand All">
 170 |           <i class="fas fa-expand-alt"></i>
 171 |         </button>
 172 |       
 173 |         <button   class="icon-button"  id="zoom-in-button" onclick="zoomIn();" title="Zoom In">
 174 |           <i class="fas fa-search-plus"></i>
 175 |         </button>
 176 |       
 177 |         <button  class="icon-button" id="zoom-out-button" onclick="zoomOut();" title="Zoom Out">
 178 |           <i class="fas fa-search-minus"></i>
 179 |         </button>
 180 |             
 181 |         <button  class="icon-button" onclick="discuss_node()" title="Open Chat">
 182 |           <i class="fas fa-comments"></i>
 183 |         </button>
 184 |       
 185 | <!--        <button  class="icon-button" onclick="restructure()" title="Restructure">
 186 |           <i class="fas fa-random"></i>
 187 |         </button>-->
 188 |       
 189 |         <button  class="icon-button" onclick="undo()" title="Undo">
 190 |           <i class="fas fa-rotate-left"></i>
 191 |         </button>
 192 |       
 193 |         <button  class="icon-button" onclick="redo()" title="Redo">
 194 |           <i class="fas fa-rotate-right"></i>
 195 |         </button>
 196 |       
 197 |         <button  class="icon-button" onclick="openSettingsPopup()" title="Settings">
 198 |           <i class="fas fa-gear"></i>
 199 |         </button>
 200 |         <button  class="icon-button" onclick="openHelpPopup()" title="Help">
 201 |           <i class="fas fa-info-circle"></i>
 202 |         </button>
 203 |         </div>
 204 |   <div style="display: none">
 205 |     <input class="file" type="file" id="image-chooser" accept="image/*" />
 206 |   </div>
 207 | </div>
 208 | 
 209 | <script type="text/javascript">
 210 | 
 211 |   function patch_jm(_jm) {
 212 |       _jm.layout._layout_offset_subnodes = function(nodes) {
 213 | 	  var total_height = 0;
 214 | 	  var nodes_count = nodes.length;
 215 | 	  var i = nodes_count;
 216 | 	  var node = null;
 217 | 	  var node_outer_height = 0;
 218 | 	  var layout_data = null;
 219 | 	  var base_y = 0;
 220 | 	  var pd = null; // parent._data
 221 | 	  while (i--) {
 222 | 	      node = nodes[i];
 223 | 	      layout_data = node._data.layout;
 224 | 	      if (pd == null) {
 225 | 		  pd = node.parent._data;
 226 | 	      }
 227 | 
 228 | 	      node_outer_height = this._layout_offset_subnodes(node.children);
 229 | 	      if (!node.expanded) {
 230 | 		  node_outer_height = 0;
 231 | 		  this.set_visible(node.children, false);
 232 | 	      }
 233 | 	      node_outer_height = Math.max(node._data.view.height, node_outer_height);
 234 | 
 235 | 	      layout_data.outer_height = node_outer_height;
 236 | 	      layout_data.offset_y = base_y - node_outer_height / 2;
 237 | 	      layout_data.offset_x =
 238 | 		  this.opts.hspace * layout_data.direction +
 239 | 		  (pd.view.width * (pd.layout.direction + layout_data.direction)) / 2;
 240 | 	      if (!node.parent.isroot) {
 241 | 		  layout_data.offset_x += this.opts.pspace * layout_data.direction;
 242 | 	      }
 243 | 
 244 | 	      base_y = base_y - node_outer_height - this.opts.vspace;
 245 | 	      total_height += node_outer_height;
 246 | 	  }
 247 | 	  if (nodes_count > 1) {
 248 | 	      total_height += this.opts.vspace * (nodes_count - 1);
 249 | 	  }
 250 | 	  i = nodes_count;
 251 | 	  var middle_height = total_height / 2;
 252 | 	  while (i--) {
 253 | 	      node = nodes[i];
 254 | 	      node._data.layout.offset_y += middle_height;
 255 |   }
 256 | 	  return total_height+10;
 257 |       }
 258 | 
 259 |       _jm.layout._layout_offset_subnodes_height = function(nodes) {
 260 |       var total_height = 0;
 261 |       var nodes_count = nodes.length;
 262 |       var i = nodes_count;
 263 |       var node = null;
 264 |       var node_outer_height = 0;
 265 |       var layout_data = null;
 266 |       var base_y = 0;
 267 |       var pd = null; // parent._data
 268 |       while (i--) {
 269 | 	  node = nodes[i];
 270 | 	  layout_data = node._data.layout;
 271 | 	  if (pd == null) {
 272 | 	      pd = node.parent._data;
 273 | 	  }
 274 | 
 275 | 	  node_outer_height = this._layout_offset_subnodes_height(node.children);
 276 | 	  if (!node.expanded) {
 277 | 	      node_outer_height = 0;
 278 | 	  }
 279 | 	  node_outer_height = Math.max(node._data.view.height, node_outer_height);
 280 | 
 281 | 	  layout_data.outer_height = node_outer_height;
 282 | 	  layout_data.offset_y = base_y - node_outer_height / 2;
 283 | 	  base_y = base_y - node_outer_height - this.opts.vspace;
 284 | 	  total_height += node_outer_height;
 285 |       }
 286 |       if (nodes_count > 1) {
 287 | 	  total_height += this.opts.vspace * (nodes_count - 1);
 288 |       }
 289 |       i = nodes_count;
 290 |       var middle_height = total_height / 2;
 291 |       while (i--) {
 292 | 	  node = nodes[i];
 293 | 	  node._data.layout.offset_y += middle_height;
 294 |       }
 295 |       console.log("layout", total_height);
 296 |       return total_height+10;
 297 |   }
 298 |   }
 299 |   const buttonBar = document.getElementById('button-bar');
 300 | 
 301 |   buttonBar.addEventListener('mousedown', (event) => {
 302 |       const offsetX = event.clientX - buttonBar.getBoundingClientRect().left;
 303 |       const offsetY = buttonBar.getBoundingClientRect().bottom;
 304 |       const onMouseMove = (event) => {
 305 | 	  buttonBar.style.left = `${event.clientX - offsetX}px`;
 306 | 	  buttonBar.style.bottom = `${offsetY - event.clientY}px`;
 307 |       };
 308 | 
 309 |       const onMouseUp = () => {
 310 | 	  document.removeEventListener('mousemove', onMouseMove);
 311 | 	  document.removeEventListener('mouseup', onMouseUp);
 312 |       };
 313 | 
 314 |       document.addEventListener('mousemove', onMouseMove);
 315 |       document.addEventListener('mouseup', onMouseUp);
 316 |   });
 317 |   
 318 |   
 319 |   function showSpinner() {
 320 |     const button = document.getElementById("add-node-button");
 321 |     button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
 322 |   }
 323 | 
 324 |   function hideSpinner() {
 325 |     const button = document.getElementById("add-node-button");
 326 |     button.innerHTML = '<i class="fas fa-share-alt"></i>';
 327 |   }
 328 | 
 329 |   function getParameterFromUrl(paramName) {
 330 |     try {
 331 |       const urlSearchParams = new URLSearchParams(window.location.search);
 332 |       return urlSearchParams.get(paramName);
 333 |     } catch (error) {
 334 |       return null;
 335 |     }
 336 |   }
 337 | 
 338 |   let dbName = getParameterFromUrl("map");
 339 |   if (dbName == null) {
 340 |     dbName = "default";
 341 |   }
 342 | 
 343 |   async function openDatabase(dbName) {
 344 |     return new Promise((resolve, reject) => {
 345 |       const request = indexedDB.open(dbName, 1);
 346 | 
 347 |       request.onupgradeneeded = (event) => {
 348 |         const db = event.target.result;
 349 |         db.createObjectStore("dataStore", { keyPath: "id" });
 350 |       };
 351 | 
 352 |       request.onsuccess = (event) => {
 353 |         resolve(event.target.result);
 354 |       };
 355 | 
 356 |       request.onerror = (event) => {
 357 |         reject(event.target.error);
 358 |       };
 359 |     });
 360 |   }
 361 | 
 362 |   async function loadData(dbName, defaultValue) {
 363 |     try {
 364 |       const db = await openDatabase(dbName);
 365 |       return new Promise((resolve, reject) => {
 366 |         const transaction = db.transaction(["dataStore"], "readonly");
 367 |         const objectStore = transaction.objectStore("dataStore");
 368 |         const request = objectStore.get(1);
 369 | 
 370 |         request.onsuccess = (event) => {
 371 |           const data = event.target.result;
 372 |           resolve(data ? data.value : defaultValue);
 373 |         };
 374 | 
 375 |         request.onerror = (event) => {
 376 |           reject(event.target.error);
 377 |         };
 378 |       });
 379 |     } catch (error) {
 380 |       console.error("Error loading data:", error);
 381 |     }
 382 |   }
 383 | 
 384 |   async function saveData(dbName, data) {
 385 |     try {
 386 |       const db = await openDatabase(dbName);
 387 |       return new Promise((resolve, reject) => {
 388 |         const transaction = db.transaction(["dataStore"], "readwrite");
 389 |         const objectStore = transaction.objectStore("dataStore");
 390 |         const request = objectStore.put({ id: 1, value: data });
 391 | 
 392 |         request.onsuccess = (event) => {
 393 |           resolve();
 394 |         };
 395 | 
 396 |         request.onerror = (event) => {
 397 |           reject(event.target.error);
 398 |         };
 399 |       });
 400 |     } catch (error) {
 401 |       console.error("Error saving data:", error);
 402 |     }
 403 |   }
 404 | 
 405 |   var redo_manager_disabled = false;
 406 |   
 407 |   async function autoSaveData() {
 408 |       var data = _jm.get_data();
 409 |       if (!redo_manager_disabled) {
 410 | 	  console.log("autoSaveData performAction");
 411 | 	  undoRedoManager.performAction(data);
 412 |       }
 413 |     document.title = data.data.topic;
 414 |     recordSettings(data);
 415 |     await saveData(dbName, data);
 416 |   }
 417 | 
 418 |   function undo() {
 419 |       const repeat = undoRedoManager.undo(_jm.get_data());
 420 |       console.log(repeat);
 421 |       if (repeat != null) {
 422 | 	  _jm.show(repeat);
 423 |       }
 424 |   }
 425 |   
 426 |   function redo() {
 427 |       const repeat = undoRedoManager.redo();
 428 |       if (repeat != null) {
 429 | 	  _jm.show(repeat);
 430 |       }
 431 |   }
 432 |   
 433 |   var _jm = null;
 434 | 
 435 |   function get_def_options() {
 436 |     var def_options = {
 437 |       container: "jsmind_container",
 438 |       theme: "asphalt",
 439 |       editable: true,
 440 |       support_html: false,
 441 |       view: {
 442 |         node_overflow: "wrap",
 443 |         engine: "svg",
 444 |           draggable: true,
 445 | 	    line_width:3, 
 446 |       },
 447 | 
 448 | 	layout: {
 449 | 	    hspace: 40,
 450 | 	    vspace: 10,
 451 | 	    pspace: 20,
 452 | 	},
 453 |     };
 454 |       return def_options;
 455 |   }
 456 | 
 457 |   function get_def_mind() {
 458 |     var mind = {
 459 |       meta: {
 460 |         name: "Simbiotico",
 461 |         author: "http://twitter.com/QRDL",
 462 |         version: "0.1",
 463 |       },
 464 | 
 465 |       format: "node_tree",
 466 |       data: {
 467 |         id: "root",
 468 |         topic: "Simbiotico",
 469 |       },
 470 |     };
 471 |       return mind;
 472 |   }
 473 | 
 474 |   function init_jm(def_options, options) {
 475 |       def_options.view.line_width = 3;
 476 |       _jm = new jsMind(def_options);
 477 |       patch_jm(_jm);
 478 |       console.log("open_empty 1", _jm.options);
 479 |       _jm.show(options);
 480 |       console.log("open_empty 2", _jm.options);
 481 |       
 482 |     load_meta_properties(options);
 483 |     _jm.add_event_listener(async function (type, data) {
 484 |       if (
 485 |         ["update_node", "expand_node", "collapse_node", "remove_node"].includes(
 486 |           data.evt
 487 |         )
 488 |       ) {
 489 |         await autoSaveData();
 490 |       } else {
 491 |           console.log("event", data);
 492 |       }
 493 |     });
 494 |       return _jm;
 495 |   }
 496 |   
 497 |   async function open_empty() {
 498 |       const def_options = get_def_options();
 499 |       const mind = get_def_mind();
 500 |       const options = await loadData(dbName, mind);
 501 |       console.log("open_empty performAction");
 502 |     undoRedoManager.performAction(options);
 503 |       _jm = init_jm(def_options, options);
 504 |   }
 505 | 
 506 |   function save_file() {
 507 |     var mind_data = _jm.get_data();
 508 |     var mind_name = mind_data.meta.name;
 509 |     var mind_str = jsMind.util.json.json2string(mind_data);
 510 |     jsMind.util.file.save(mind_str, "text/jsmind", mind_name + ".jm");
 511 |   }
 512 | 
 513 |   function open_file(event) {
 514 |     var files = document.getElementById("file_input").files;
 515 |     console.log(files);
 516 |     if (
 517 |       _jm.get_data().data.children &&
 518 |       _jm.get_data().data.children.length > 0
 519 |     ) {
 520 |       prompt_info(
 521 |         "Please start with an empty mindmap before loading from disk."
 522 |       );
 523 |       event.target.value = null;
 524 |       return;
 525 |     }
 526 |     if (files.length > 0) {
 527 |       var file_data = files[0];
 528 |       jsMind.util.file.read(file_data, function (jsmind_data, jsmind_name) {
 529 |         var mind = jsMind.util.json.string2json(jsmind_data);
 530 |         if (!!mind) {
 531 |           _jm.show(mind);
 532 |           load_meta_properties(mind);
 533 |         } else {
 534 |           prompt_info("can not open this file as mindmap");
 535 |         }
 536 |       });
 537 |     } else {
 538 |       prompt_info("please choose a file first");
 539 |     }
 540 |     event.target.value = null;
 541 |   }
 542 | 
 543 |   document.getElementById("file_input").addEventListener("change", open_file);
 544 | 
 545 |   function get_selected_nodeid() {
 546 |     var selected_node = _jm.get_selected_node();
 547 |     if (!!selected_node) {
 548 |       return selected_node.id;
 549 |     } else {
 550 |       return null;
 551 |     }
 552 |   }
 553 | 
 554 |   function createHyphenatedList(node, depth = 0) {
 555 |     let result = "";
 556 |     let prefix = " ".repeat(depth * 2);
 557 |     result += `${prefix}- ${node.topic}\n`;
 558 |     if (!node.expanded) return result;
 559 | 
 560 |     if (node.children) {
 561 |       for (const child of node.children) {
 562 |         result += createHyphenatedList(child, depth + 1);
 563 |       }
 564 |     }
 565 | 
 566 |     return result;
 567 |   }
 568 | 
 569 |   const API_URL = "https://api.openai.com/v1/chat/completions";
 570 | 
 571 |   async function chatGPTRequest(prompt, curNode = null) {
 572 |       try {
 573 | 
 574 | 	  gptEngine = document.getElementById("gpt-engine").value;
 575 | 	  maxTokens = 4096;//document.getElementById("max-tokens").value;
 576 | 	  temperature = parseFloat(document.getElementById("temperature").value);
 577 | 	  if (isNaN(temperature)){
 578 | 	      temperature = 0.3;
 579 | 	  }
 580 |       const response = await fetch(API_URL, {
 581 |         method: "POST",
 582 |         headers: {
 583 |           "Content-Type": "application/json",
 584 |           Authorization: `Bearer ${API_KEY}`,
 585 |         },
 586 |         body: JSON.stringify({
 587 |             model: gptEngine,
 588 |           messages: [{ role: "user", content: prompt }],
 589 |           temperature: temperature,
 590 |         }),
 591 |       });
 592 | 	  if (!response.ok) {
 593 | 	      console.log(response);
 594 | 	      prompt_info("Error communication with OpenAI API:"+response.status+" 401 means that your API Key is incorrect.");
 595 | 	      throw new Error(`HTTP error: ${response.status}`);
 596 | 	  }
 597 | 	  
 598 | 	const data = await response.json();
 599 | 	console.log("chatGPTRequest", data);
 600 | 	addTokenUsage(data.usage.total_tokens);
 601 |       const resp = data.choices[0].message.content;
 602 |       if (curNode) {
 603 |         dict = curNode.data;
 604 |         if (!dict.hasOwnProperty("chatlog")) {
 605 |           dict["chatlog"] = "";
 606 |         }
 607 | 	  
 608 |         dict["chatlog"] += "user-message:\n" + prompt + "\n";
 609 |         dict["chatlog"] += "gpt-message:\n" + resp + "\n\n";
 610 |         _jm.set_node_color(curNode.id, "#FFA533", null);
 611 |         await autoSaveData();
 612 |       }
 613 | 
 614 |       return resp;
 615 |     } catch (error) {
 616 |       console.error("Error:", error);
 617 |     }
 618 |   }
 619 | 
 620 |   function secureEvaluateTemplate(template, context) {
 621 |     return template.replace(/\$\{(\w+)\}/g, (_, variable) => {
 622 |       return context[variable] || "";
 623 |     });
 624 |   }
 625 | 
 626 |   async function get_children_suggestions(node, _jm, tmpl) {
 627 |     const text_of_node = node.topic;
 628 |     const hyphenated_list = createHyphenatedList(_jm.get_data().data);
 629 |       var prompt = tmpl;
 630 |     prompt = secureEvaluateTemplate(prompt, {
 631 |       hyphenated_list: hyphenated_list,
 632 |       text_of_node: text_of_node,
 633 |     });
 634 |     console.log(prompt);
 635 |       // Make sure you call the chatGPTRequest function with the prompt
 636 |     showSpinner();
 637 |     const data = await chatGPTRequest(prompt);
 638 |     hideSpinner();
 639 |     return data;
 640 |   }
 641 | 
 642 |   function processGptResponse(response, selected_node, _jm, do_scroll = true) {
 643 |     // Step 1: Extract content between <embed> tags
 644 |     const embedContent = response.match(/<embed>([\s\S]*?)<\/embed>/)[1].trim();
 645 | 
 646 |     // Step 2: Process the extracted content and build the hierarchy
 647 |     const lines = embedContent.split("\n");
 648 |     const hierarchy = [];
 649 | 
 650 |     for (const line of lines) {
 651 |       const level = line.search(/\S/);
 652 |       const content = line.trim().replace(/^-/, "").trim();
 653 | 
 654 |       hierarchy.push({
 655 |         level: level / 2,
 656 |         content: content,
 657 |         id: jsMind.util.uuid.newid(),
 658 |       });
 659 |     }
 660 | 
 661 |     console.log(hierarchy);
 662 |     // Step 3: Add nodes to jsMind with the correct connections
 663 |     for (let i = 0; i < hierarchy.length; i++) {
 664 |       const currentNode = hierarchy[i];
 665 |       let parentId = selected_node;
 666 | 
 667 |       if (currentNode.level > 0) {
 668 |         for (let j = i - 1; j >= 0; j--) {
 669 |           if (hierarchy[j].level === currentNode.level - 1) {
 670 |             parentId = hierarchy[j].id;
 671 |             break;
 672 |           }
 673 |         }
 674 |       }
 675 | 
 676 | 	nd = _jm.add_node(parentId, currentNode.id, currentNode.content);
 677 | 	console.log(nd);
 678 | 	if (do_scroll) {
 679 | 	    nd._data.view.element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: "nearest"  });
 680 | 	}
 681 |     }
 682 |   }
 683 | 
 684 |   async function add_node() {
 685 |     var selected_node = _jm.get_selected_node(); // as parent of new node
 686 |     if (!selected_node) {
 687 |       prompt_info("please select a node first.");
 688 |       return;
 689 |     }
 690 | 
 691 |     // Call get_children_suggestions function and wait for the response
 692 |       const response = await get_children_suggestions(selected_node, _jm, document.getElementById("child-node-suggestion").value);
 693 |     console.log(response);
 694 |       // Call processGptResponse function to process the response and add nodes
 695 |       console.log("add_node redo_manager true");
 696 |       redo_manager_disabled = true;
 697 |       processGptResponse(response, selected_node, _jm);
 698 |       console.log("add_node redo_manager false");
 699 |       setTimeout(async () => {
 700 | 	  redo_manager_disabled = false;
 701 | 	  await autoSaveData();
 702 |       }, 1000);
 703 |   }
 704 | 
 705 |   async function restructure() {
 706 |       var selected_node = _jm.get_root();
 707 |       const response = await get_children_suggestions(selected_node, _jm, document.getElementById("restructure-prompt").value);
 708 |       const def_options = get_def_options();
 709 |       const mind = get_def_mind();
 710 |       _jm = init_jm(def_options, mind);
 711 |       var selected_node = _jm.get_root();
 712 | 
 713 | 
 714 |       console.log(response);
 715 |     
 716 |       processGptResponse(response, selected_node, _jm);
 717 | 
 718 |   }
 719 | 
 720 | 
 721 | 
 722 |   var zoomInButton = document.getElementById("zoom-in-button");
 723 |   var zoomOutButton = document.getElementById("zoom-out-button");
 724 | 
 725 |   function zoomIn() {
 726 |     if (_jm.view.zoomIn()) {
 727 |       zoomOutButton.disabled = false;
 728 |     } else {
 729 |       zoomInButton.disabled = true;
 730 |     }
 731 |   }
 732 | 
 733 |   function zoomOut() {
 734 |     if (_jm.view.zoomOut()) {
 735 |       zoomInButton.disabled = false;
 736 |     } else {
 737 |       zoomOutButton.disabled = true;
 738 |     }
 739 |   }
 740 | 
 741 |   function expand_all() {
 742 |     _jm.expand_all();
 743 |   }
 744 | 
 745 |   function collapse_all() {
 746 |     _jm.collapse_all();
 747 |   }
 748 | 
 749 |   function prompt_info(msg) {
 750 |     showCustomAlert(msg);
 751 |   }
 752 | 
 753 |   open_empty();
 754 | </script>
 755 | 
 756 |     <script>
 757 | 
 758 |   class UndoRedoManager {
 759 |       constructor(maxSize) {
 760 | 	  this.undoStack = [];
 761 | 	  this.redoStack = [];
 762 | 	  this.maxSize = maxSize;
 763 |       }
 764 | 
 765 |       performAction(state) {
 766 | 	  this.undoStack.push(JSON.parse(JSON.stringify(state)));
 767 | 
 768 | 	  if (this.undoStack.length > this.maxSize) {
 769 |               this.undoStack.shift();
 770 | 	  }
 771 | 
 772 | 	  this.redoStack = [];
 773 |       }
 774 | 
 775 |       undo(cur) {
 776 | 	  if (this.undoStack.length === 0) {
 777 |               return null;
 778 | 	  }
 779 | 
 780 | 	  var prevState = this.undoStack.pop();
 781 | 	  if (this.undoStack.length === 0) {
 782 | 	      this.undoStack.push(prevState);
 783 | 	  }
 784 | 	  if (prevState == cur) {
 785 | 	      if (this.undoStack.length < 2) {
 786 | 		  return null;
 787 | 	      } else {
 788 | 		  return undo(cur);
 789 | 	      }
 790 | 	  }
 791 | 	  this.redoStack.push(JSON.parse(JSON.stringify(prevState)));
 792 | 	  return prevState;
 793 |       }
 794 | 
 795 |       redo() {
 796 | 	  if (this.redoStack.length === 0) {
 797 |               return null;
 798 | 	  }
 799 | 
 800 | 	  const nextState = this.redoStack.pop();
 801 | 	  this.undoStack.push(JSON.parse(JSON.stringify(nextState)));
 802 | 	  return nextState;
 803 |       }
 804 |   }
 805 | 
 806 | 
 807 |   function createUpdatePopupSize(maxHeight, maxWidth, div) {
 808 |       return function () {
 809 | 	  const windowHeight = window.innerHeight;
 810 | 	  if (windowHeight < maxHeight) {
 811 | 	      div.style.height = (windowHeight * 0.9) + "px"; // Set popup height to 80% of the window height
 812 | 	  } else {
 813 | 	      div.style.height = maxHeight;
 814 | 	  }
 815 | 	  const windowWidth = window.innerWidth;
 816 | 	  if (windowWidth < maxWidth) {
 817 | 	      div.style.width = (windowWidth * 0.9) + "px"; // Set popup height to 80% of the window height
 818 | 	  } else {
 819 | 	      div.style.width = maxWidth; // Reset the popup height to auto when the window is larger
 820 | 	  }
 821 |       };
 822 |   }
 823 |   
 824 | 
 825 |   function setupPopSizeListener(maxHeight, maxWidth, popup) {
 826 |       const updatePopupSize = createUpdatePopupSize(maxHeight, maxWidth, popup);
 827 | 
 828 |       // Call updatePopupHeight on window resize
 829 |       window.addEventListener("resize", updatePopupSize);
 830 | 
 831 |       // Call updatePopupHeight on page load
 832 |       updatePopupSize();
 833 |             
 834 |   }
 835 |   
 836 |   const undoRedoManager = new UndoRedoManager(20);
 837 | 
 838 |  </script>
 839 | 
 840 |     <style>
 841 |   .help-popup {
 842 |     position: fixed;
 843 |     top: 60px;
 844 |     right: 60px;
 845 |     width: 600px;
 846 |     max-height: 750px;
 847 |     background: white;
 848 |     border: 1px solid #ccc;
 849 |     border-radius: 5px;
 850 |     display: flex;
 851 |     flex-direction: column;
 852 |     z-index: 1000;
 853 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 854 |   }
 855 | 
 856 |   .help-popup-header {
 857 |     display: flex;
 858 |     justify-content: space-between;
 859 |     align-items: center;
 860 |     padding: 5px;
 861 |     background: #0066ff;
 862 |     color: white;
 863 |     font-weight: bold;
 864 |     border-top-left-radius: 5px;
 865 |     border-top-right-radius: 5px; 
 866 |     font-family: "Roboto", sans-serif;
 867 |    max-height: 35px;
 868 |   }
 869 | 
 870 |   .help-popup-header h3 {
 871 |     margin: 0;
 872 |     font-family: "Roboto", sans-serif;
 873 |     font-weight: 500;
 874 |     font-size: 18px; /* Adjust the font size according to your design preferences */
 875 |   }
 876 | 
 877 |   .help-close-btn {
 878 |     background: transparent;
 879 |     border: none;
 880 |     color: white;
 881 |     padding: 0;
 882 |     margin: 0;
 883 |     max-width: 30px;
 884 |     align: right;
 885 |     font-weight: bold;
 886 |     font-size: 16px;
 887 |     cursor: pointer;
 888 |   }
 889 | 
 890 |   .help-popup-content {
 891 |     padding: 20px;
 892 |     overflow-y: auto;
 893 |     font-family: "Roboto", sans-serif;
 894 |   }
 895 | 
 896 | </style>
 897 | 
 898 | <div id="help-popup" class="help-popup hidden">
 899 |   <div class="help-popup-header">
 900 |     <h3>Help</h3>
 901 |     <button class="help-close-btn" onclick="closeHelpPopup()">
 902 |       <i class="fas fa-window-close"></i>
 903 |     </button>
 904 |   </div>
 905 | 
 906 |   <div class="help-popup-content">
 907 |     Creating a new map and setting the map name:
 908 |     <ul>
 909 |       <li> Change the URL to file://<path>/simbiotica.html?map=[map_name] </li>
 910 |       <li> This format was chosen for easy bookmarking in your web browser </li>
 911 |     </ul>
 912 |     Security:
 913 |     <ul>
 914 |       <li> The security of your OpenAI API key is important. Efforts have been made with this app to ensure its safety.</li>
 915 |       <li> This code is open source and not minified, making it easily reviewable.</li>
 916 |       <li> Your API key is not stored locally in any persistent storage and must be entered each time you load this page.</li>
 917 |       <li> All imports have SRI hashes, and external code has been reviewed for potential issues.</li>
 918 |       <li> This app is fairly lightweight in its usage, but make sure you have a spending limit on your OpenAI account. You can see token count usage in the settings page.</li>
 919 |     </ul>
 920 |     Interacting with the mindmap:
 921 |     <ul>
 922 |       <li> Mouse click to select a node, double-click to edit, press Enter to save </li>
 923 |       <li> You can either click and drag your mouse to pan the mindmap, or use mousewheel / two-finger guestures on touchpad to scroll the mindmap vertically or horizontally if it's larger in those dimensions (respectively) to the screen. </li>
 924 |       <li> Mouse drag nodes to move to another node</li>
 925 |       <li> Mouse click small circle to expand/collapse</li>
 926 |       <li> Press Enter to create a sibling node</li>
 927 |       <li> Press Ctrl-Enter to create a child node</li>
 928 |       <li> Press Delete to delete a node</li>
 929 |     </ul>
 930 |     Note that maps are autosaved via the IndexedDB API, browser-based storage that is only accessible by the same origin. In other words, your maps can only be accessed from where this page is being served from. Be careful when using other browser-based applications you save/serve from the same location, as they can access the IndexDB API storage. Use only code that is openly reviewable, open source, or from a trusted entity.
 931 |     <br />
 932 |     <br />
 933 |     Button bar:
 934 |     <ul>
 935 |       <li> <i class="fas fa-download"></i> - Make a backup of the map. As mentioned above, the map is already stored in your browser, but this can be used for transferring between computers.</li>
 936 |       <li> <i class="fas fa-upload"></i> - Load a backup of the map. The map must be empty to ensure you don't accidentally overwrite another map.</li>
 937 |       <li> <i class="fas fa-share-alt"></i> - Get suggestions from GPT-3.5, which is what this is all about!  You can configure how this is done in settings.</li>
 938 |       <li> <i class="fas fa-compress-alt"></i> - Collapse all</li>
 939 |       <li> <i class="fas fa-expand-alt"></i> - Expand all</li>
 940 |       <li> <i class="fas fa-search-plus"></i> - Zoom in</li>      
 941 |       <li> <i class="fas fa-search-minus"></i> - Zoom out</li>
 942 |       <li> <i class="fas fa-comments"></i> - Engage in a deeper discussion with GPT-3.5 about a particular node.  The first time you chat about a node both the mindmap and a series of questions will be sent to GPT API.  Subsequently, all messages will be prefixed with the mindmap only.  You can configure these prompts in settings.</li>
 943 |       <li> <i class="fas fa-rotate-left"></i> - Undo, may have to click twice.  This is a bit hard to use right now, working on it.</li>
 944 |       <li> <i class="fas fa-rotate-right"></i> - Redo, may have to click twice</li>
 945 |       <li> <i class="fas fa-gear"></i> - Settings. You can change the prompts used to get suggestions and discuss nodes. Make sure you review them carefully before making changes. Backing up a copy of the prompt for reverting is probably a good idea.</li>
 946 |     </ul>
 947 |       </div>
 948 |   </div>
 949 |     </ul>
 950 |     
 951 |   </div>
 952 | </div>
 953 | 
 954 | <script type="text/javascript">
 955 |   setupPopSizeListener(750, 600, document.getElementById("help-popup"));
 956 |   
 957 |   function openHelpPopup() {
 958 |     document.getElementById("help-popup").classList.remove("hidden");
 959 |   }
 960 | 
 961 |   function closeHelpPopup() {
 962 |     document.getElementById("help-popup").classList.add("hidden");
 963 |   }
 964 | 
 965 | </script>
 966 | 
 967 |     <style>
 968 |   .hidden {
 969 |     display: none;
 970 |   }
 971 | 
 972 |   .custom-alert {
 973 |     position: fixed;
 974 |     left: 0;
 975 |     top: 0;
 976 |     width: 100%;
 977 |     height: 100%;
 978 |     background-color: rgba(0, 0, 0, 0.5);
 979 |     display: flex;
 980 |     justify-content: center;
 981 |     align-items: center;
 982 |     z-index: 20000;
 983 |   }
 984 | 
 985 |   .custom-alert-content {
 986 |     background-color: white;
 987 |     padding: 20px;
 988 |     border-radius: 5px;
 989 |     text-align: center;
 990 |   }
 991 | 
 992 |   .custom-alert-message {
 993 |     display: block;
 994 |     margin-bottom: 20px;
 995 |   }
 996 | 
 997 |   .custom-alert-close {
 998 |     background-color: #0066ff;
 999 |     color: white;
1000 |     border: none;
1001 |     border-radius: 3px;
1002 |     padding: 8px 16px;
1003 |     cursor: pointer;
1004 |     font-weight: bold;
1005 |   }
1006 | </style>
1007 | 
1008 | <div id="custom-alert" class="custom-alert hidden">
1009 |   <div class="custom-alert-content">
1010 |     <span id = "custom-alert-message" class="custom-alert-message"></span>
1011 |     <button class="custom-alert-close" onclick="closeCustomAlert()">OK</button>
1012 |   </div>
1013 | </div>
1014 | 
1015 | <script type="text/javascript">
1016 |   function showCustomAlert(message) {
1017 |     const customAlert = document.getElementById("custom-alert");
1018 |     const customAlertMessage = document.getElementById("custom-alert-message");
1019 |     customAlertMessage.textContent = message;
1020 |     customAlert.classList.remove("hidden");
1021 |   }
1022 | 
1023 |   function closeCustomAlert() {
1024 |     const customAlert = document.getElementById("custom-alert");
1025 |     customAlert.classList.add("hidden");
1026 |   }
1027 | </script>
1028 | 
1029 |     <!-- logindiv -->
1030 | <style>
1031 |   .modal {
1032 |     display: none;
1033 |     position: fixed;
1034 |     z-index: 10000;
1035 |     left: 0;
1036 |     top: 0;
1037 |     width: 100%;
1038 |     height: 100%;
1039 |     overflow: auto;
1040 |     background-color: rgba(0, 0, 0, 0.4);
1041 |   }
1042 | 
1043 |   .modal-content {
1044 |     background-color: #fefefe;
1045 |     margin: 15% auto;
1046 |     padding: 20px;
1047 |     border: 1px solid #888;
1048 |     width: 80%;
1049 |     text-align: center;
1050 |   }
1051 | 
1052 |   input[type="text"] {
1053 |     width: 100%;
1054 |     padding: 12px 20px;
1055 |     margin: 8px 0;
1056 |     display: inline-block;
1057 |     border: 1px solid #ccc;
1058 |     box-sizing: border-box;
1059 |   }
1060 | 
1061 |   button {
1062 |     background-color: #4caf50;
1063 |     color: white;
1064 |     padding: 14px 20px;
1065 |     margin: 8px 0;
1066 |     border: none;
1067 |     cursor: pointer;
1068 |     width: 100%;
1069 |   }
1070 | 
1071 |   button:hover {
1072 |     opacity: 0.8;
1073 |   }
1074 | </style>
1075 | <div id="api-key-modal" class="modal">
1076 |   <div class="modal-content">
1077 |     <h2>Enter GPT3.5-turbo API Key</h2>
1078 |     <p>Please enter your GPT3.5-turbo API key to continue.  This is a browser side application only, no server except for OpenAI.<br/>
1079 |       The key is not persisted in browser storage and only used when sending to OpenAI REST api. <br />
1080 |       Token usage is relatively light and you can find a total usage count via settings (gear) icon. <br />
1081 |       The source code is not minified and should be easily reviewable via developer tools, your filesystem, and/or the github repo.<br />
1082 |       Make sure to follow <a href=http://twitter.com/QRDL>http://twitter.com/QRDL</a> for information and updates.<br />
1083 |     <input type="text" id="api-key-input" style="-webkit-text-security: disc;">
1084 |     <button id="submit-api-key">Submit</button>
1085 |   </div>
1086 | </div>
1087 | 
1088 | <script type="text/javascript">
1089 |   let API_KEY = "";
1090 | 
1091 |   document.addEventListener("DOMContentLoaded", function () {
1092 |     const apiKeyModal = document.getElementById("api-key-modal");
1093 |     const submitApiKeyButton = document.getElementById("submit-api-key");
1094 | 
1095 |     function showApiKeyModal() {
1096 |       apiKeyModal.style.display = "block";
1097 |     }
1098 | 
1099 |       function hideApiKeyModal() {
1100 |       document.getElementById("api-key-input").value = "";
1101 |       apiKeyModal.style.display = "none";
1102 |     }
1103 | 
1104 |     submitApiKeyButton.addEventListener("click", () => {
1105 |       const apiKeyInput = document.getElementById("api-key-input");
1106 |       API_KEY = apiKeyInput.value.trim();  //This is the only place we 'store' the key
1107 |       const apiKey = API_KEY;
1108 |       if (apiKey) {
1109 |         hideApiKeyModal();
1110 |       } else {
1111 |         showCustomAlert("Please enter a valid API key.");
1112 |       }
1113 |     });
1114 | 
1115 |     // Show the modal dialog on page load.
1116 |     showApiKeyModal();
1117 |   });
1118 | </script>
1119 | 
1120 |     <style>
1121 |   .popup {
1122 |     position: fixed;
1123 |     top: 60px;
1124 |     right: 60px;
1125 |     width: 600px;
1126 |     height: 750px;
1127 |     background: white;
1128 |     border: 1px solid #ccc;
1129 |     border-radius: 5px;
1130 |     display: flex;
1131 |     flex-direction: column;
1132 |     z-index: 1000;
1133 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
1134 |   }
1135 | 
1136 |   .popup-header {
1137 |     display: flex;
1138 |     justify-content: space-between;
1139 |     align-items: center;
1140 |     padding: 5px;
1141 |     background: #0066ff;
1142 |     color: white;
1143 |     font-weight: bold;
1144 |     border-top-left-radius: 5px;
1145 |     border-top-right-radius: 5px;
1146 |     font-family: "Roboto", sans-serif;
1147 |   }
1148 | 
1149 |   .popup-header h3 {
1150 |     margin: 0;
1151 |     font-family: "Roboto", sans-serif;
1152 |     font-weight: 500;
1153 |     font-size: 18px; /* Adjust the font size according to your design preferences */
1154 |   }
1155 | 
1156 |   .close-btn {
1157 |     background: transparent;
1158 |     border: none;
1159 |     color: white;
1160 |     font-weight: bold;
1161 |     font-size: 16px;
1162 |     cursor: pointer;
1163 |   }
1164 | 
1165 |   .popup-content {
1166 |     padding: 20px;
1167 |     overflow-y: auto;
1168 |   }
1169 | 
1170 |   .form-group {
1171 |     display: flex;
1172 |     flex-direction: column;
1173 |     margin-bottom: 20px;
1174 |   }
1175 | 
1176 |   label {
1177 |     margin-bottom: 5px;
1178 |     font-family: "Roboto", sans-serif;
1179 |   }
1180 | 
1181 |   textarea,
1182 |   input {
1183 |     padding: 8px;
1184 |     border: 1px solid #ccc;
1185 |     border-radius: 4px;
1186 |     resize: vertical;
1187 |   }
1188 | 
1189 |   .save-btn {
1190 |     background: #0066ff;
1191 |     color: white;
1192 |     border: none;
1193 |     border-radius: 4px;
1194 |     padding: 8px 16px;
1195 |     font-weight: bold;
1196 |     cursor: pointer;
1197 |     align-self: flex-end;
1198 |   }
1199 | </style>
1200 | 
1201 | <!-- settingsdiv -->
1202 | <div id="settings-popup" class="popup hidden">
1203 |   <div class="popup-header">
1204 |     <h3>Settings</h3>
1205 |     <button class="close-btn" onclick="closeSettingsPopup()">
1206 |       <i class="fas fa-window-close"></i>
1207 |     </button>
1208 |   </div>
1209 |   <div class="popup-content">
1210 |     <form id="settings-form">
1211 |       <div class="form-group">
1212 |         <label for="token-usage">Token Usage for this map:</label>
1213 |         <label
1214 |           id="token-usage"
1215 |         ></label>
1216 |       </div>
1217 |       <div class="form-group">
1218 |         <label for="child-node-suggestion">Child Node Suggestion Prompt:</label>
1219 |         <textarea
1220 |           id="child-node-suggestion"
1221 |           rows="8"
1222 |           placeholder="Enter child node suggestion prompt."
1223 |         ></textarea>
1224 |       </div>
1225 |       <div class="form-group">
1226 |         <label for="discuss-node-prompt">Discuss Node Prompt:</label>
1227 |         <textarea
1228 |           id="discuss-node-prompt"
1229 |           rows="18"
1230 |           placeholder="Enter discuss node prompt"
1231 |         ></textarea>
1232 |       </div>
1233 |       <div class="form-group">
1234 |         <label for="prefix-prompt">Discuss Prompt Prefix:</label>
1235 |         <textarea
1236 |           id="prefix-prompt"
1237 |           rows="5"
1238 |           placeholder="Enter prompt prefix"
1239 |         ></textarea>
1240 |       </div>
1241 | <!--      <div class="form-group">
1242 |         <label for="prefix-prompt">Restructure Prompt:</label>
1243 |         <textarea
1244 |           id="restructure-prompt"
1245 |           rows="5"
1246 |           placeholder="Enter restructure"
1247 |         ></textarea>
1248 |       </div>-->
1249 |       <div class="form-group">
1250 |         <label for="gpt-engine">GPT Engine:</label>
1251 |         <input id="gpt-engine" type="text" placeholder="Enter GPT engine" />
1252 |       </div>
1253 | 	    
1254 |       <div class="form-group">
1255 |         <label for="temperature">Temperature:</label>
1256 |         <input id="temperature" type="text" placeholder="Enter temperature" />
1257 |       </div>
1258 | 	    
1259 |       <div class="form-group">
1260 |         <label for="theme">Theme:</label>
1261 |       <select onchange="set_theme(this.value);">
1262 |           <option value="">default</option>
1263 |           <option value="primary">primary</option>
1264 |           <option value="warning">warning</option>
1265 |           <option value="danger">danger</option>
1266 |           <option value="success">success</option>
1267 |           <option value="info">info</option>
1268 |           <option value="greensea" selected="selected">greensea</option>
1269 |           <option value="nephrite">nephrite</option>
1270 |           <option value="belizehole">belizehole</option>
1271 |           <option value="wisteria">wisteria</option>
1272 |           <option value="asphalt">asphalt</option>
1273 |           <option value="orange">orange</option>
1274 |           <option value="pumpkin">pumpkin</option>
1275 |           <option value="pomegranate">pomegranate</option>
1276 |           <option value="clouds">clouds</option>
1277 |           <option value="asbestos">asbestos</option>
1278 |         </select>
1279 |       </div>
1280 |     </form>
1281 |   </div>
1282 | </div>
1283 | 
1284 | <script type="text/javascript">
1285 |   setupPopSizeListener(750, 600, document.getElementById("settings-popup"));
1286 |   
1287 |   function set_theme(theme_name) {
1288 |     _jm.set_theme(theme_name);
1289 |   }
1290 | 
1291 | 
1292 |   function getValueOrDefault(obj, key, defaultValue) {
1293 |     if (!obj.hasOwnProperty(key)) {
1294 |       return defaultValue;
1295 |     }
1296 |     return obj[key];
1297 |   }
1298 | 
1299 |   function openSettingsPopup() {
1300 |     document.getElementById("settings-popup").classList.remove("hidden");
1301 |   }
1302 | 
1303 |   function closeSettingsPopup() {
1304 |     console.log("close");
1305 |     document.getElementById("settings-popup").classList.add("hidden");
1306 |     autoSaveData();
1307 |   }
1308 |   function recordSettings(data) {
1309 |     console.log(data);
1310 |     // Get the values from the form fields
1311 |     data["child-node-suggestion"] = document.getElementById(
1312 |       "child-node-suggestion"
1313 |     ).value;
1314 |     data["discuss-node-prompt"] = document.getElementById(
1315 |       "discuss-node-prompt"
1316 |     ).value;
1317 |     data["prefix-prompt"] = document.getElementById("prefix-prompt").value;
1318 |     //data["restructure-prompt"] = document.getElementById("restructure-prompt").value;
1319 |     data["gpt-engine"] = document.getElementById("gpt-engine").value;
1320 |     data["token-usage"] = document.getElementById("token-usage").textContent;
1321 |     data["temperature"] = document.getElementById("temperature").value;
1322 |     console.log("recordSettings", data);
1323 |   }
1324 | 
1325 |   function addTokenUsage(tokens) {
1326 |       value = document.getElementById("token-usage").textContent;
1327 |       if (value == "" || isNaN(parseInt(value))) {
1328 | 	  count = 0;
1329 |       } else {
1330 | 	  count = parseInt(value);
1331 |       }
1332 |       console.log("addTokenUsage", value, count, tokens, count+tokens);
1333 |       document.getElementById("token-usage").textContent = (count + tokens).toString();
1334 |   }
1335 |   
1336 |   function saveSettings(event) {
1337 |     if (event) event.preventDefault();
1338 |     closeSettingsPopup();
1339 |   }
1340 | 
1341 |   // Attach the event listener to the form
1342 |   document
1343 |     .getElementById("settings-form")
1344 |     .addEventListener("submit", saveSettings);
1345 | 
1346 |   function load_meta_properties(options) {
1347 |     document.getElementById("token-usage").textContent = getValueOrDefault(
1348 | 	options, "token-usage", (0).toString())
1349 |     document.getElementById("discuss-node-prompt").value = getValueOrDefault(
1350 |       options,
1351 |       "discuss-node-prompt",
1352 |       "I am creating a mindmap.  Here is what's currently visible in the mindmap:\n" +
1353 |         "${hyphenated_list}\n" +
1354 |         "I'd like to discuss with you about the '${text_of_node}' node.\n" +
1355 |         "Respond with your thoughts on:\n" +
1356 |         "1. What this node means, both specifically and generally\n" +
1357 |         "2. The relevance of this node, how it contributes individually and holistically\n" +
1358 |         "3. Where it fits in the mindmap (see the indented listed above)\n" +
1359 |         "4. What are some things to consider when adding children, sibling, and parent nodes around it in the mindmap\n" +
1360 |         "5. What are some good questions to ask ChatGPT to get a better understanding of this node?\n" +
1361 |         "6. And finally, just some novel creative ideas to think about in relation to this node.\n" +
1362 |         "When addressing these points, please remember we're talking about the ${text_of_node}' node within the context of the hyphenated mindmap list above."
1363 |     );
1364 | 
1365 |     document.getElementById("child-node-suggestion").value = getValueOrDefault(
1366 |       options,
1367 |       "child-node-suggestion",
1368 |       "I am creating a mindmap.  Here is what's currently visible:\n" +
1369 |         "${hyphenated_list}\n" +
1370 |         "I need some ideas for adding at least two child nodes to '${text_of_node}'.\n" +
1371 |         "Provide a list of suggestions, in the same hyphenated format above, that would be ideal children of '${text_of_node}', with no empty lines. The list should be prioritized by relevance and importance.\n" +
1372 |         "Surround the list of suggestions with <embed></embed>\n" +
1373 |         "Do not make suggestions which are redundant to ones already listed above.\n" +
1374 |         "Do not repeat ${text_of_node}' in the list.\n"+
1375 | 	"There must be at least two suggestions for the immediate child nodes of '${text_of_node}'.\n"+
1376 | 	"Each suggestion must complement, augment, and harmonize with the mindmap listed above.\n"
1377 |     );
1378 |     document.getElementById("prefix-prompt").value = getValueOrDefault(
1379 |       options,
1380 |       "prefix-prompt",
1381 |       "I am creating a mindmap, here's what's currently visible in the mindmap:\n${hyphenated_list}\nI would like to discuss the '${cur_topic}' node.\n\n"
1382 |     );
1383 | 
1384 |    /* document.getElementById("restructure-prompt").value = getValueOrDefault(
1385 |       options,
1386 |       "restructure-prompt",
1387 | 	"I am creating a mindmap, here's what is currently visible in the mindmap:\n${hyphenated_list}\n"+
1388 | 	"Restructure the mindmap listed above into a more cohesive, clear, and impactful mindmap.\n"+
1389 | 	    "The restructured mindmap should have many levels, but no less than 3 children and no more than 6 children per item.\n"+
1390 | 	    "Use the same hyphenated hierarchical format above, with no empty lines.\n"+
1391 | 	    "Ensure that the hierarchical hyphenated list is surrounded by <embed></embed>.\n"+
1392 | 	    "Do not include the top level node.\n"
1393 |     );*/
1394 | 
1395 |     document.getElementById("gpt-engine").value = getValueOrDefault(
1396 |       options,
1397 |       "gpt-engine",
1398 |       "gpt-3.5-turbo"
1399 |     );
1400 |     document.getElementById("temperature").value = getValueOrDefault(
1401 |       options,
1402 |       "temperature",
1403 |       "0.7"
1404 |     );
1405 |   }
1406 | </script>
1407 | 
1408 |     <style>
1409 |   .chat-popup {
1410 |     position: fixed;
1411 |     bottom: 60px;
1412 |     right: 60px;
1413 |     width: 600px;
1414 |     height: 800px;
1415 |     background: white;
1416 |     border: 1px solid #ccc;
1417 |     border-radius: 5px;
1418 |     display: flex;
1419 |     flex-direction: column;
1420 |     z-index: 1000;
1421 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
1422 |   }
1423 | 
1424 |   .chat-header {
1425 |     display: flex;
1426 |     justify-content: space-between;
1427 |     align-items: center;
1428 |     padding: 5px;
1429 |     background: #0066ff;
1430 |     color: white;
1431 |     font-weight: bold;
1432 |     border-top-left-radius: 5px;
1433 |     border-top-right-radius: 5px;
1434 |   }
1435 | 
1436 |   .chat-header h3 {
1437 |     margin: 0;
1438 |     font-family: "Roboto", sans-serif;
1439 |     font-weight: 500;
1440 |     font-size: 18px; /* Adjust the font size according to your design preferences */
1441 |   }
1442 | 
1443 |   .close-btn {
1444 |     background: transparent;
1445 |     border: none;
1446 |     color: white;
1447 |     font-weight: bold;
1448 |     font-size: 16px;
1449 |     cursor: pointer;
1450 |     position: absolute;
1451 |     top: 5px;
1452 |     right: 5px;
1453 |     padding: 0;
1454 |     margin: 0;
1455 |     width: 20px;
1456 |   }
1457 | 
1458 |   .chat-header {
1459 |     display: flex;
1460 |     justify-content: space-between;
1461 |     align-items: center;
1462 |   }
1463 | 
1464 |   .chat-content {
1465 |     flex: 1;
1466 |     padding: 5px;
1467 |     overflow-y: auto;
1468 |     background-color: #f9f9f9;
1469 |   }
1470 | 
1471 |   .chat-messages * {
1472 |     display: flex;
1473 |     flex-direction: column;
1474 |     overflow-anchor: none;
1475 |   }
1476 |   .anchor {
1477 |     overflow-anchor: auto;
1478 |     height: 1px;
1479 |   }
1480 | 
1481 |   .chat-input {
1482 |     display: flex;
1483 |     padding: 5px;
1484 |     border-top: 1px solid #ccc;
1485 |   }
1486 | 
1487 |   .chat-input input {
1488 |     flex: 1;
1489 |     margin-right: 5px;
1490 |     resize: none;
1491 |     overflow: auto;
1492 |     height: 60px;
1493 |     border-radius: 4px;
1494 |     border: 1px solid #ccc;
1495 |     padding: 0 5px;
1496 |   }
1497 | 
1498 |   .chat-input button {
1499 |     border: none;
1500 |     background-color: #0066ff;
1501 |     color: white;
1502 |     padding: 5px 10px;
1503 |     font-weight: bold;
1504 |     border-radius: 4px;
1505 |     cursor: pointer;
1506 |   }
1507 | 
1508 |   .chat-input button:hover {
1509 |     background-color: #0051cc;
1510 |   }
1511 | 
1512 |   .backlog-message,
1513 |   .user-message,
1514 |   .gpt-message {
1515 |     font-family: Arial, sans-serif;
1516 |     font-size: 14px;
1517 |     margin-bottom: 5px;
1518 |     line-height: 1.4;
1519 |   }
1520 | 
1521 |   .backlog-message {
1522 |     font-family: Courier, monospace;
1523 |     font-size: 14px;
1524 |     color: #71797e;
1525 |     margin-bottom: 5px;
1526 |     margin-left: 10px;
1527 |     white-space: pre-wrap;
1528 |   }
1529 | 
1530 |   .user-message {
1531 |     font-family: Courier, monospace;
1532 |     font-size: 14px;
1533 |     color: #1a1a1a;
1534 |     margin-bottom: 5px;
1535 |     margin-left: 10px;
1536 |     white-space: pre-wrap;
1537 |   }
1538 | 
1539 |   .gpt-message {
1540 |     color: #666;
1541 |     margin-left: 20px;
1542 |   }
1543 | 
1544 |   .resize-handle {
1545 |     width: 100%;
1546 |     height: 15px;
1547 |     cursor: nwse-resize;
1548 |     background: #f4f4f4;
1549 |     border-top: 1px solid #ccc;
1550 |     display: flex;
1551 |     justify-content: right;
1552 |     align-items: right;
1553 |     font-size: 12px;
1554 |     user-select: none;
1555 |   }
1556 | 
1557 |   .resize-handle i {
1558 |     color: #71797e;
1559 |     font-size: 16px;
1560 |     transform: rotate(45deg);
1561 |     margin: 0 4px 4px 0; /* Adjust these values to position the icon correctly */
1562 |   }
1563 | 
1564 |   .resize-indicator {
1565 |     width: 70%;
1566 |     height: 1px;
1567 |     background-color: #ccc;
1568 |     border-radius: 1px;
1569 |   }
1570 | 
1571 |   .hidden {
1572 |     display: none !important;
1573 |   }
1574 | 
1575 |   .send-button {
1576 |       width: 100px;
1577 |   }
1578 |   .chat-input textarea {
1579 |     flex: 1;
1580 |     margin-right: 5px;
1581 |     resize: none;
1582 |     overflow: auto;
1583 |     height: 40px;
1584 |     border-radius: 4px;
1585 |     border: 1px solid #ccc;
1586 |     padding: 5px;
1587 |   }
1588 | </style>
1589 | 
1590 | <div id="chat-popup" class="chat-popup hidden">
1591 |   <div class="chat-header">
1592 |     <h3>Chat with GPT</h3>
1593 |     <button class="close-btn" onclick="closeChatPopup()">
1594 |       <i class="fas fa-window-close"></i>
1595 |     </button>
1596 |   </div>
1597 |   <div class="chat-content">
1598 |     <div class="chat-messages" id="chat-messages"></div>
1599 |     <div id="anchor"></div>
1600 |   </div>
1601 |   <div class="chat-input">
1602 |     <textarea
1603 |       id="chat-input-text"
1604 |       rows="3"
1605 |       placeholder="Type your prompt, note the hierarchical list above will be prefixed to your message so you may refer to it in your prompt."
1606 |     ></textarea>
1607 |     <button class="send-button" onclick="submitChatMessage()">Send</button>
1608 |   </div>
1609 |   <div class="resize-handle"><i class="fas fa-arrows-alt"></i></div>
1610 | </div>
1611 | 
1612 | <script>
1613 | 
1614 | 
1615 |   setupPopSizeListener(800, 600, document.getElementById("chat-popup"));
1616 |   
1617 |   function get_node_discussion_prompt(node, _jm) {
1618 |     const text_of_node = node.topic;
1619 |     const hyphenated_list = createHyphenatedList(_jm.get_data().data);
1620 |     var prompt = document.getElementById("discuss-node-prompt").value;
1621 |     prompt = secureEvaluateTemplate(prompt, {
1622 |       hyphenated_list: hyphenated_list,
1623 |       text_of_node: text_of_node,
1624 |     });
1625 |     console.log(prompt);
1626 |     return prompt;
1627 |   }
1628 | 
1629 |   function scrollToBottom() {
1630 |     var anchor = document.getElementById("anchor");
1631 |     anchor.scrollIntoView({ behavior: "smooth", block: "end" });
1632 |   }
1633 | 
1634 |   function observeChatMessages() {
1635 |     const chatMessages = document.getElementById("chat-messages");
1636 |     const observer = new MutationObserver(scrollToBottom);
1637 | 
1638 |     observer.observe(chatMessages, {
1639 |       childList: true, // Observe changes to the children of chatMessages
1640 |       subtree: true, // Observe changes to the descendants of chatMessages
1641 |     });
1642 |   }
1643 | 
1644 |   document.addEventListener("DOMContentLoaded", function () {
1645 |     observeChatMessages();
1646 |   });
1647 | 
1648 |   async function discuss_node() {
1649 |     var selected_node = _jm.get_selected_node(); // as parent of new node
1650 |     if (!selected_node) {
1651 |       prompt_info("please select a node first.");
1652 |       return;
1653 |     }
1654 | 
1655 |     // Call get_children_suggestions function and wait for the response
1656 |     const prompt = get_node_discussion_prompt(selected_node, _jm);
1657 |     openChatPopup(selected_node, prompt, _jm);
1658 |   }
1659 |   let curNode = null;
1660 |   let prompt_prefix = "";
1661 |   async function openChatPopup(_curNode, prompt, _jm) {
1662 |     curNode = _curNode;
1663 |     backlog = "";
1664 |     if (curNode.data.hasOwnProperty("chatlog")) {
1665 |       backlog = curNode.data["chatlog"];
1666 |     }
1667 |     const chatPopup = document.getElementById("chat-popup");
1668 |     chatPopup.classList.remove("hidden");
1669 | 
1670 |     // Clear existing chat messages
1671 |     const chatMessages = document.getElementById("chat-messages");
1672 |     chatMessages.innerHTML = "";
1673 |     const cur_topic = curNode.topic;
1674 |     const hyphenated_list = createHyphenatedList(_jm.get_data().data);
1675 |     var prompt_prefix_tmpl = document.getElementById("prefix-prompt").value;
1676 |     prompt_prefix = secureEvaluateTemplate(prompt_prefix_tmpl, {
1677 |       hyphenated_list: hyphenated_list,
1678 |       cur_topic: cur_topic,
1679 |     });
1680 | 
1681 |     // Display backlog
1682 |     if (backlog != "") {
1683 |       displayChatMessage(
1684 |         "backlog-message",
1685 |         "------backlog-----\n" + backlog + "\n----end backlog---"
1686 |       );
1687 |       displayChatMessage("user-message", "user-message:\n" + prompt_prefix);
1688 |     } else {
1689 |       // Display prompt
1690 |       displayChatMessage("user-message", "user-message:\n" + prompt);
1691 | 
1692 |       // Send prompt to GPT and display response
1693 |       displayChatMessage(
1694 |         "gpt-message",
1695 |         "..prompt sent to GPT api, waiting for response.."
1696 |       );
1697 |       const lastMessage = document.getElementById("chat-messages").lastChild;
1698 |       const response = await chatGPTRequest(prompt, curNode);
1699 |       lastMessage.innerText = "gpt-message:\n" + response;
1700 |     }
1701 |     scrollToBottom();
1702 |   }
1703 | 
1704 |   function closeChatPopup() {
1705 |     const chatPopup = document.getElementById("chat-popup");
1706 |     chatPopup.classList.add("hidden");
1707 |   }
1708 | 
1709 |   function displayChatMessage(sender, message) {
1710 |     const chatMessages = document.getElementById("chat-messages");
1711 |     const messageDiv = document.createElement("div");
1712 |     messageDiv.className = sender;
1713 |     messageDiv.innerText = message;
1714 |     chatMessages.appendChild(messageDiv);
1715 |     scrollToBottom();
1716 |   }
1717 | 
1718 |   // Draggable
1719 |   const chatHeader = document.querySelector(".chat-header");
1720 |   chatHeader.addEventListener("mousedown", dragMouseDown);
1721 | 
1722 |   function dragMouseDown(e) {
1723 |     e.preventDefault();
1724 | 
1725 |     const chatPopup = document.getElementById("chat-popup");
1726 |     const offsetX = e.clientX - chatPopup.getBoundingClientRect().left;
1727 |     const offsetY = e.clientY - chatPopup.getBoundingClientRect().top;
1728 | 
1729 |     document.onmousemove = (e) => {
1730 |       chatPopup.style.left = `${e.clientX - offsetX}px`;
1731 |       chatPopup.style.top = `${e.clientY - offsetY}px`;
1732 |     };
1733 | 
1734 |     document.onmouseup = () => {
1735 |       document.onmousemove = null;
1736 |       document.onmouseup = null;
1737 |     };
1738 |   }
1739 | 
1740 |   // Resizable
1741 |   const resizeHandle = document.querySelector(".resize-handle");
1742 |   resizeHandle.addEventListener("mousedown", resizeMouseDown);
1743 | 
1744 |   function resizeMouseDown(e) {
1745 |     e.preventDefault();
1746 | 
1747 |     const chatPopup = document.getElementById("chat-popup");
1748 |     const initialWidth = chatPopup.clientWidth;
1749 |     const initialHeight = chatPopup.clientHeight;
1750 |     const initialX = e.clientX;
1751 |     const initialY = e.clientY;
1752 | 
1753 |     document.onmousemove = (e) => {
1754 |       const newX = e.clientX;
1755 |       const newY = e.clientY;
1756 | 
1757 |       chatPopup.style.width = `${initialWidth + (newX - initialX)}px`;
1758 |       chatPopup.style.height = `${initialHeight + (newY - initialY)}px`;
1759 |     };
1760 | 
1761 |     document.onmouseup = () => {
1762 |       document.onmousemove = null;
1763 |       document.onmouseup = null;
1764 |     };
1765 |   }
1766 | 
1767 |   // Multiline input field and ".." waiting indicator
1768 |   async function submitChatMessage() {
1769 |     const inputText = document.getElementById("chat-input-text");
1770 |     const message = inputText.value;
1771 |     inputText.value = "";
1772 | 
1773 |     if (message.trim() === "") return;
1774 | 
1775 |     displayChatMessage("user-message", message);
1776 |     displayChatMessage("gpt-message", "..thinking..");
1777 |     const lastMessage = document.getElementById("chat-messages").lastChild;
1778 |     const response = await chatGPTRequest(prompt_prefix + message, curNode);
1779 |     lastMessage.innerText = "gpt-message:\n" + response;
1780 |   }
1781 | </script>
1782 | 
1783 |   </body>
1784 | </html>
1785 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | const { src, dest, series, watch } = require('gulp');
 2 | const concat = require('gulp-concat');
 3 | const inlineSource = require('gulp-inline-source');
 4 | const fileInclude = require('gulp-file-include');
 5 | 
 6 | function html() {
 7 |     return src('src/*.html')
 8 |         .pipe(fileInclude({ prefix: '@@', basepath: '@file' }))
 9 |         .pipe(inlineSource())
10 |         .pipe(dest('dist'));
11 | }
12 | 
13 | function css() {
14 |     return src('src/css/*.css')
15 |         .pipe(concat('styles.css'))
16 |         .pipe(dest('src'));
17 | }
18 | 
19 | function js() {
20 |     return src('src/js/*.js')
21 |         .pipe(concat('scripts.js'))
22 |         .pipe(dest('src'));
23 | }
24 | 
25 | function watchFiles() {
26 |     watch('src/*.html', series(html));
27 |     watch('src/partials/*.html', series(html));
28 |     watch('src/css/*.css', series(css));
29 |     watch('src/js/*.js', series(js));
30 | }
31 | 
32 | async function build() {
33 |     return series(html, css, js);
34 | }
35 | 
36 | 
37 | exports.default = series(html, css, js, watchFiles);
38 | exports.build = build;
39 | 
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "devDependencies": {
  3 |     "gulp": "^4.0.2",
  4 |     "gulp-concat": "^2.6.1",
  5 |     "gulp-file-include": "^2.3.0",
  6 |     "gulp-inline-source": "^4.0.0",
  7 |     "webpack": "^5.78.0",
  8 |     "webpack-cli": "^5.0.1"
  9 |   },
 10 |   "name": "project-folder",
 11 |   "version": "1.0.0",
 12 |   "main": "gulpfile.js",
 13 |   "dependencies": {
 14 |     "ansi-colors": "^1.1.0",
 15 |     "ansi-gray": "^0.1.1",
 16 |     "ansi-regex": "^2.1.1",
 17 |     "ansi-styles": "^3.2.1",
 18 |     "ansi-wrap": "^0.1.0",
 19 |     "anymatch": "^2.0.0",
 20 |     "append-buffer": "^1.0.2",
 21 |     "archy": "^1.0.0",
 22 |     "argparse": "^1.0.10",
 23 |     "arr-diff": "^4.0.0",
 24 |     "arr-filter": "^1.1.2",
 25 |     "arr-flatten": "^1.1.0",
 26 |     "arr-map": "^2.0.2",
 27 |     "arr-union": "^3.1.0",
 28 |     "array-buffer-byte-length": "^1.0.0",
 29 |     "array-each": "^1.0.1",
 30 |     "array-initial": "^1.1.0",
 31 |     "array-last": "^1.3.0",
 32 |     "array-slice": "^1.1.0",
 33 |     "array-sort": "^1.0.0",
 34 |     "array-unique": "^0.3.2",
 35 |     "array.prototype.reduce": "^1.0.5",
 36 |     "assign-symbols": "^1.0.0",
 37 |     "async-done": "^1.3.2",
 38 |     "async-each": "^1.0.6",
 39 |     "async-settle": "^1.0.0",
 40 |     "asynckit": "^0.4.0",
 41 |     "atob": "^2.1.2",
 42 |     "available-typed-arrays": "^1.0.5",
 43 |     "bach": "^1.2.0",
 44 |     "balanced-match": "^1.0.2",
 45 |     "base": "^0.11.2",
 46 |     "binary-extensions": "^1.13.1",
 47 |     "boolbase": "^1.0.0",
 48 |     "brace-expansion": "^1.1.11",
 49 |     "braces": "^2.3.2",
 50 |     "buffer-equal": "^1.0.1",
 51 |     "buffer-from": "^1.1.2",
 52 |     "cache-base": "^1.0.1",
 53 |     "call-bind": "^1.0.2",
 54 |     "camelcase": "^3.0.0",
 55 |     "chalk": "^2.4.2",
 56 |     "chokidar": "^2.1.8",
 57 |     "class-utils": "^0.3.6",
 58 |     "cliui": "^3.2.0",
 59 |     "clone": "^2.1.2",
 60 |     "clone-buffer": "^1.0.0",
 61 |     "clone-stats": "^1.0.0",
 62 |     "cloneable-readable": "^1.1.3",
 63 |     "coa": "^2.0.2",
 64 |     "code-point-at": "^1.1.0",
 65 |     "collection-map": "^1.0.0",
 66 |     "collection-visit": "^1.0.0",
 67 |     "color-convert": "^1.9.3",
 68 |     "color-name": "^1.1.3",
 69 |     "color-support": "^1.1.3",
 70 |     "combined-stream": "^1.0.8",
 71 |     "commander": "^2.20.3",
 72 |     "component-emitter": "^1.3.0",
 73 |     "concat-map": "^0.0.1",
 74 |     "concat-stream": "^1.6.2",
 75 |     "concat-with-sourcemaps": "^1.1.0",
 76 |     "convert-source-map": "^1.9.0",
 77 |     "cookiejar": "^2.1.4",
 78 |     "copy-descriptor": "^0.1.1",
 79 |     "copy-props": "^2.0.5",
 80 |     "core-util-is": "^1.0.3",
 81 |     "css-select": "^2.1.0",
 82 |     "css-select-base-adapter": "^0.1.1",
 83 |     "css-tree": "^1.0.0-alpha.29",
 84 |     "css-url-regex": "^1.1.0",
 85 |     "css-what": "^3.4.2",
 86 |     "csso": "^3.5.1",
 87 |     "d": "^1.0.1",
 88 |     "debug": "^2.6.9",
 89 |     "decamelize": "^1.2.0",
 90 |     "decode-uri-component": "^0.2.2",
 91 |     "default-compare": "^1.0.0",
 92 |     "default-resolution": "^2.0.0",
 93 |     "define-properties": "^1.2.0",
 94 |     "define-property": "^2.0.2",
 95 |     "delayed-stream": "^1.0.0",
 96 |     "detect-file": "^1.0.0",
 97 |     "dom-serializer": "^0.2.2",
 98 |     "domelementtype": "^1.3.1",
 99 |     "domhandler": "^2.4.2",
100 |     "domutils": "^1.7.0",
101 |     "duplexify": "^3.7.1",
102 |     "each-props": "^1.3.2",
103 |     "end-of-stream": "^1.4.4",
104 |     "entities": "^1.1.2",
105 |     "error-ex": "^1.3.2",
106 |     "es-abstract": "^1.21.2",
107 |     "es-array-method-boxes-properly": "^1.0.0",
108 |     "es-set-tostringtag": "^2.0.1",
109 |     "es-to-primitive": "^1.2.1",
110 |     "es5-ext": "^0.10.62",
111 |     "es6-iterator": "^2.0.3",
112 |     "es6-symbol": "^3.1.3",
113 |     "es6-weak-map": "^2.0.3",
114 |     "escape-string-regexp": "^1.0.5",
115 |     "esprima": "^4.0.1",
116 |     "expand-brackets": "^2.1.4",
117 |     "expand-tilde": "^2.0.2",
118 |     "ext": "^1.7.0",
119 |     "extend": "^3.0.2",
120 |     "extend-shallow": "^2.0.1",
121 |     "extglob": "^2.0.4",
122 |     "fancy-log": "^1.3.3",
123 |     "fast-levenshtein": "^1.1.4",
124 |     "fast-safe-stringify": "^2.1.1",
125 |     "fill-range": "^4.0.0",
126 |     "find-up": "^1.1.2",
127 |     "findup-sync": "^3.0.0",
128 |     "fined": "^1.2.0",
129 |     "flagged-respawn": "^1.0.1",
130 |     "flatnest": "^1.0.0",
131 |     "flush-write-stream": "^1.1.1",
132 |     "for-each": "^0.3.3",
133 |     "for-in": "^1.0.2",
134 |     "for-own": "^1.0.0",
135 |     "form-data": "^2.5.1",
136 |     "formidable": "^1.2.6",
137 |     "fragment-cache": "^0.2.1",
138 |     "fs-mkdirp-stream": "^1.0.0",
139 |     "fs.realpath": "^1.0.0",
140 |     "function-bind": "^1.1.1",
141 |     "function.prototype.name": "^1.1.5",
142 |     "functions-have-names": "^1.2.3",
143 |     "get-caller-file": "^1.0.3",
144 |     "get-intrinsic": "^1.2.0",
145 |     "get-symbol-description": "^1.0.0",
146 |     "get-value": "^2.0.6",
147 |     "glob": "^7.2.3",
148 |     "glob-parent": "^3.1.0",
149 |     "glob-stream": "^6.1.0",
150 |     "glob-watcher": "^5.0.5",
151 |     "global-modules": "^1.0.0",
152 |     "global-prefix": "^1.0.2",
153 |     "globalthis": "^1.0.3",
154 |     "glogg": "^1.0.2",
155 |     "gopd": "^1.0.1",
156 |     "graceful-fs": "^4.2.11",
157 |     "gulp-cli": "^2.3.0",
158 |     "gulplog": "^1.0.0",
159 |     "has": "^1.0.3",
160 |     "has-bigints": "^1.0.2",
161 |     "has-flag": "^3.0.0",
162 |     "has-property-descriptors": "^1.0.0",
163 |     "has-proto": "^1.0.1",
164 |     "has-symbols": "^1.0.3",
165 |     "has-tostringtag": "^1.0.0",
166 |     "has-value": "^1.0.0",
167 |     "has-values": "^1.0.0",
168 |     "homedir-polyfill": "^1.0.3",
169 |     "hosted-git-info": "^2.8.9",
170 |     "htmlparser2": "^3.10.1",
171 |     "inflight": "^1.0.6",
172 |     "inherits": "^2.0.4",
173 |     "ini": "^1.3.8",
174 |     "inline-source": "^6.1.10",
175 |     "internal-slot": "^1.0.5",
176 |     "interpret": "^1.4.0",
177 |     "invert-kv": "^1.0.0",
178 |     "is-absolute": "^1.0.0",
179 |     "is-accessor-descriptor": "^1.0.0",
180 |     "is-array-buffer": "^3.0.2",
181 |     "is-arrayish": "^0.2.1",
182 |     "is-bigint": "^1.0.4",
183 |     "is-binary-path": "^1.0.1",
184 |     "is-boolean-object": "^1.1.2",
185 |     "is-buffer": "^1.1.6",
186 |     "is-callable": "^1.2.7",
187 |     "is-core-module": "^2.12.0",
188 |     "is-data-descriptor": "^1.0.0",
189 |     "is-date-object": "^1.0.5",
190 |     "is-descriptor": "^1.0.2",
191 |     "is-extendable": "^0.1.1",
192 |     "is-extglob": "^2.1.1",
193 |     "is-fullwidth-code-point": "^1.0.0",
194 |     "is-glob": "^4.0.3",
195 |     "is-negated-glob": "^1.0.0",
196 |     "is-negative-zero": "^2.0.2",
197 |     "is-number": "^3.0.0",
198 |     "is-number-object": "^1.0.7",
199 |     "is-plain-object": "^5.0.0",
200 |     "is-regex": "^1.1.4",
201 |     "is-relative": "^1.0.0",
202 |     "is-shared-array-buffer": "^1.0.2",
203 |     "is-string": "^1.0.7",
204 |     "is-symbol": "^1.0.4",
205 |     "is-typed-array": "^1.1.10",
206 |     "is-unc-path": "^1.0.0",
207 |     "is-utf8": "^0.2.1",
208 |     "is-valid-glob": "^1.0.0",
209 |     "is-weakref": "^1.0.2",
210 |     "is-windows": "^1.0.2",
211 |     "isarray": "^1.0.0",
212 |     "isexe": "^2.0.0",
213 |     "isobject": "^3.0.1",
214 |     "js-yaml": "^3.14.1",
215 |     "json-stable-stringify-without-jsonify": "^1.0.1",
216 |     "json5": "^2.2.3",
217 |     "just-debounce": "^1.1.0",
218 |     "kind-of": "^5.1.0",
219 |     "last-run": "^1.1.1",
220 |     "lazystream": "^1.0.1",
221 |     "lcid": "^1.0.0",
222 |     "lead": "^1.0.0",
223 |     "liftoff": "^3.1.0",
224 |     "load-json-file": "^1.1.0",
225 |     "make-iterator": "^1.0.1",
226 |     "map-cache": "^0.2.2",
227 |     "map-visit": "^1.0.0",
228 |     "matchdep": "^2.0.0",
229 |     "mdn-data": "^1.1.4",
230 |     "methods": "^1.1.2",
231 |     "micromatch": "^3.1.10",
232 |     "mime": "^2.6.0",
233 |     "mime-db": "^1.52.0",
234 |     "mime-types": "^2.1.35",
235 |     "minimatch": "^3.1.2",
236 |     "minimist": "^1.2.8",
237 |     "mixin-deep": "^1.3.2",
238 |     "mkdirp": "^0.5.6",
239 |     "ms": "^2.0.0",
240 |     "mute-stdout": "^1.0.1",
241 |     "nanomatch": "^1.2.13",
242 |     "next-tick": "^1.1.0",
243 |     "normalize-package-data": "^2.5.0",
244 |     "normalize-path": "^3.0.0",
245 |     "now-and-later": "^2.0.1",
246 |     "nth-check": "^1.0.2",
247 |     "number-is-nan": "^1.0.1",
248 |     "object-copy": "^0.1.0",
249 |     "object-inspect": "^1.12.3",
250 |     "object-keys": "^1.1.1",
251 |     "object-visit": "^1.0.1",
252 |     "object.assign": "^4.1.4",
253 |     "object.defaults": "^1.1.0",
254 |     "object.getownpropertydescriptors": "^2.1.5",
255 |     "object.map": "^1.0.1",
256 |     "object.pick": "^1.3.0",
257 |     "object.reduce": "^1.0.1",
258 |     "object.values": "^1.1.6",
259 |     "once": "^1.4.0",
260 |     "ordered-read-streams": "^1.0.1",
261 |     "os-locale": "^1.4.0",
262 |     "parse-filepath": "^1.0.2",
263 |     "parse-json": "^2.2.0",
264 |     "parse-node-version": "^1.0.1",
265 |     "parse-passwd": "^1.0.0",
266 |     "pascalcase": "^0.1.1",
267 |     "path-dirname": "^1.0.2",
268 |     "path-exists": "^2.1.0",
269 |     "path-is-absolute": "^1.0.1",
270 |     "path-parse": "^1.0.7",
271 |     "path-root": "^0.1.1",
272 |     "path-root-regex": "^0.1.2",
273 |     "path-type": "^1.1.0",
274 |     "pify": "^2.3.0",
275 |     "pinkie": "^2.0.4",
276 |     "pinkie-promise": "^2.0.1",
277 |     "plugin-error": "^1.0.1",
278 |     "posix-character-classes": "^0.1.1",
279 |     "pretty-hrtime": "^1.0.3",
280 |     "process-nextick-args": "^2.0.1",
281 |     "pump": "^2.0.1",
282 |     "pumpify": "^1.5.1",
283 |     "q": "^1.5.1",
284 |     "qs": "^6.11.1",
285 |     "read-pkg": "^1.1.0",
286 |     "read-pkg-up": "^1.0.1",
287 |     "readable-stream": "^2.3.8",
288 |     "readdirp": "^2.2.1",
289 |     "rechoir": "^0.6.2",
290 |     "regex-not": "^1.0.2",
291 |     "regexp.prototype.flags": "^1.4.3",
292 |     "remove-bom-buffer": "^3.0.0",
293 |     "remove-bom-stream": "^1.2.0",
294 |     "remove-trailing-separator": "^1.1.0",
295 |     "repeat-element": "^1.1.4",
296 |     "repeat-string": "^1.6.1",
297 |     "replace-ext": "^1.0.1",
298 |     "replace-homedir": "^1.0.0",
299 |     "require-directory": "^2.1.1",
300 |     "require-main-filename": "^1.0.1",
301 |     "resolve": "^1.22.2",
302 |     "resolve-dir": "^1.0.1",
303 |     "resolve-options": "^1.1.0",
304 |     "resolve-url": "^0.2.1",
305 |     "ret": "^0.1.15",
306 |     "safe-buffer": "^5.1.2",
307 |     "safe-regex": "^1.1.0",
308 |     "safe-regex-test": "^1.0.0",
309 |     "sax": "^1.2.4",
310 |     "semver": "^6.3.0",
311 |     "semver-greatest-satisfied-range": "^1.1.0",
312 |     "set-blocking": "^2.0.0",
313 |     "set-value": "^2.0.1",
314 |     "side-channel": "^1.0.4",
315 |     "snapdragon": "^0.8.2",
316 |     "snapdragon-node": "^2.1.1",
317 |     "snapdragon-util": "^3.0.1",
318 |     "source-map": "^0.6.1",
319 |     "source-map-resolve": "^0.5.3",
320 |     "source-map-support": "^0.5.21",
321 |     "source-map-url": "^0.4.1",
322 |     "sparkles": "^1.0.1",
323 |     "spdx-correct": "^3.2.0",
324 |     "spdx-exceptions": "^2.3.0",
325 |     "spdx-expression-parse": "^3.0.1",
326 |     "spdx-license-ids": "^3.0.13",
327 |     "split-string": "^3.1.0",
328 |     "sprintf-js": "^1.0.3",
329 |     "stable": "^0.1.8",
330 |     "stack-trace": "^0.0.10",
331 |     "static-extend": "^0.1.2",
332 |     "stream-exhaust": "^1.0.2",
333 |     "stream-shift": "^1.0.1",
334 |     "string_decoder": "^1.1.1",
335 |     "string-width": "^1.0.2",
336 |     "string.prototype.trim": "^1.2.7",
337 |     "string.prototype.trimend": "^1.0.6",
338 |     "string.prototype.trimstart": "^1.0.6",
339 |     "strip-ansi": "^3.0.1",
340 |     "strip-bom": "^2.0.0",
341 |     "superagent": "^5.0.9",
342 |     "supports-color": "^5.5.0",
343 |     "supports-preserve-symlinks-flag": "^1.0.0",
344 |     "sver-compat": "^1.5.0",
345 |     "svgo": "^1.2.2",
346 |     "terser": "^3.17.0",
347 |     "through2": "^2.0.5",
348 |     "through2-filter": "^3.0.0",
349 |     "time-stamp": "^1.1.0",
350 |     "to-absolute-glob": "^2.0.2",
351 |     "to-object-path": "^0.3.0",
352 |     "to-regex": "^3.0.2",
353 |     "to-regex-range": "^2.1.1",
354 |     "to-through": "^2.0.0",
355 |     "type": "^1.2.0",
356 |     "typed-array-length": "^1.0.4",
357 |     "typedarray": "^0.0.6",
358 |     "unbox-primitive": "^1.0.2",
359 |     "unc-path-regex": "^0.1.2",
360 |     "undertaker": "^1.3.0",
361 |     "undertaker-registry": "^1.0.1",
362 |     "union-value": "^1.0.1",
363 |     "unique-stream": "^2.3.1",
364 |     "unquote": "^1.1.1",
365 |     "unset-value": "^1.0.0",
366 |     "upath": "^1.2.0",
367 |     "urix": "^0.1.0",
368 |     "use": "^3.1.1",
369 |     "util-deprecate": "^1.0.2",
370 |     "util.promisify": "^1.0.1",
371 |     "v8flags": "^3.2.0",
372 |     "validate-npm-package-license": "^3.0.4",
373 |     "value-or-function": "^3.0.0",
374 |     "vinyl": "^2.2.1",
375 |     "vinyl-fs": "^3.0.3",
376 |     "vinyl-sourcemap": "^1.1.0",
377 |     "which": "^1.3.1",
378 |     "which-boxed-primitive": "^1.0.2",
379 |     "which-module": "^1.0.0",
380 |     "which-typed-array": "^1.1.9",
381 |     "wrap-ansi": "^2.1.0",
382 |     "wrappy": "^1.0.2",
383 |     "xtend": "^4.0.2",
384 |     "y18n": "^3.2.2",
385 |     "yargs": "^7.1.2",
386 |     "yargs-parser": "^5.0.1"
387 |   },
388 |   "scripts": {
389 |     "test": "echo \"Error: no test specified\" && exit 1"
390 |   },
391 |   "keywords": [],
392 |   "author": "",
393 |   "license": "ISC",
394 |   "description": ""
395 | }
396 | 


--------------------------------------------------------------------------------
/src/partials/alert-popup.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .hidden {
 3 |     display: none;
 4 |   }
 5 | 
 6 |   .custom-alert {
 7 |     position: fixed;
 8 |     left: 0;
 9 |     top: 0;
10 |     width: 100%;
11 |     height: 100%;
12 |     background-color: rgba(0, 0, 0, 0.5);
13 |     display: flex;
14 |     justify-content: center;
15 |     align-items: center;
16 |     z-index: 20000;
17 |   }
18 | 
19 |   .custom-alert-content {
20 |     background-color: white;
21 |     padding: 20px;
22 |     border-radius: 5px;
23 |     text-align: center;
24 |   }
25 | 
26 |   .custom-alert-message {
27 |     display: block;
28 |     margin-bottom: 20px;
29 |   }
30 | 
31 |   .custom-alert-close {
32 |     background-color: #0066ff;
33 |     color: white;
34 |     border: none;
35 |     border-radius: 3px;
36 |     padding: 8px 16px;
37 |     cursor: pointer;
38 |     font-weight: bold;
39 |   }
40 | </style>
41 | 
42 | <div id="custom-alert" class="custom-alert hidden">
43 |   <div class="custom-alert-content">
44 |     <span id = "custom-alert-message" class="custom-alert-message"></span>
45 |     <button class="custom-alert-close" onclick="closeCustomAlert()">OK</button>
46 |   </div>
47 | </div>
48 | 
49 | <script type="text/javascript">
50 |   function showCustomAlert(message) {
51 |     const customAlert = document.getElementById("custom-alert");
52 |     const customAlertMessage = document.getElementById("custom-alert-message");
53 |     customAlertMessage.textContent = message;
54 |     customAlert.classList.remove("hidden");
55 |   }
56 | 
57 |   function closeCustomAlert() {
58 |     const customAlert = document.getElementById("custom-alert");
59 |     customAlert.classList.add("hidden");
60 |   }
61 | </script>
62 | 


--------------------------------------------------------------------------------
/src/partials/chat-popup.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   .chat-popup {
  3 |     position: fixed;
  4 |     bottom: 60px;
  5 |     right: 60px;
  6 |     width: 600px;
  7 |     height: 800px;
  8 |     background: white;
  9 |     border: 1px solid #ccc;
 10 |     border-radius: 5px;
 11 |     display: flex;
 12 |     flex-direction: column;
 13 |     z-index: 1000;
 14 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 15 |   }
 16 | 
 17 |   .chat-header {
 18 |     display: flex;
 19 |     justify-content: space-between;
 20 |     align-items: center;
 21 |     padding: 5px;
 22 |     background: #0066ff;
 23 |     color: white;
 24 |     font-weight: bold;
 25 |     border-top-left-radius: 5px;
 26 |     border-top-right-radius: 5px;
 27 |   }
 28 | 
 29 |   .chat-header h3 {
 30 |     margin: 0;
 31 |     font-family: "Roboto", sans-serif;
 32 |     font-weight: 500;
 33 |     font-size: 18px; /* Adjust the font size according to your design preferences */
 34 |   }
 35 | 
 36 |   .close-btn {
 37 |     background: transparent;
 38 |     border: none;
 39 |     color: white;
 40 |     font-weight: bold;
 41 |     font-size: 16px;
 42 |     cursor: pointer;
 43 |     position: absolute;
 44 |     top: 5px;
 45 |     right: 5px;
 46 |     padding: 0;
 47 |     margin: 0;
 48 |     width: 20px;
 49 |   }
 50 | 
 51 |   .chat-header {
 52 |     display: flex;
 53 |     justify-content: space-between;
 54 |     align-items: center;
 55 |   }
 56 | 
 57 |   .chat-content {
 58 |     flex: 1;
 59 |     padding: 5px;
 60 |     overflow-y: auto;
 61 |     background-color: #f9f9f9;
 62 |   }
 63 | 
 64 |   .chat-messages * {
 65 |     display: flex;
 66 |     flex-direction: column;
 67 |     overflow-anchor: none;
 68 |   }
 69 |   .anchor {
 70 |     overflow-anchor: auto;
 71 |     height: 1px;
 72 |   }
 73 | 
 74 |   .chat-input {
 75 |     display: flex;
 76 |     padding: 5px;
 77 |     border-top: 1px solid #ccc;
 78 |   }
 79 | 
 80 |   .chat-input input {
 81 |     flex: 1;
 82 |     margin-right: 5px;
 83 |     resize: none;
 84 |     overflow: auto;
 85 |     height: 60px;
 86 |     border-radius: 4px;
 87 |     border: 1px solid #ccc;
 88 |     padding: 0 5px;
 89 |   }
 90 | 
 91 |   .chat-input button {
 92 |     border: none;
 93 |     background-color: #0066ff;
 94 |     color: white;
 95 |     padding: 5px 10px;
 96 |     font-weight: bold;
 97 |     border-radius: 4px;
 98 |     cursor: pointer;
 99 |   }
100 | 
101 |   .chat-input button:hover {
102 |     background-color: #0051cc;
103 |   }
104 | 
105 |   .backlog-message,
106 |   .user-message,
107 |   .gpt-message {
108 |     font-family: Arial, sans-serif;
109 |     font-size: 14px;
110 |     margin-bottom: 5px;
111 |     line-height: 1.4;
112 |   }
113 | 
114 |   .backlog-message {
115 |     font-family: Courier, monospace;
116 |     font-size: 14px;
117 |     color: #71797e;
118 |     margin-bottom: 5px;
119 |     margin-left: 10px;
120 |     white-space: pre-wrap;
121 |   }
122 | 
123 |   .user-message {
124 |     font-family: Courier, monospace;
125 |     font-size: 14px;
126 |     color: #1a1a1a;
127 |     margin-bottom: 5px;
128 |     margin-left: 10px;
129 |     white-space: pre-wrap;
130 |   }
131 | 
132 |   .gpt-message {
133 |     color: #666;
134 |     margin-left: 20px;
135 |   }
136 | 
137 |   .resize-handle {
138 |     width: 100%;
139 |     height: 15px;
140 |     cursor: nwse-resize;
141 |     background: #f4f4f4;
142 |     border-top: 1px solid #ccc;
143 |     display: flex;
144 |     justify-content: right;
145 |     align-items: right;
146 |     font-size: 12px;
147 |     user-select: none;
148 |   }
149 | 
150 |   .resize-handle i {
151 |     color: #71797e;
152 |     font-size: 16px;
153 |     transform: rotate(45deg);
154 |     margin: 0 4px 4px 0; /* Adjust these values to position the icon correctly */
155 |   }
156 | 
157 |   .resize-indicator {
158 |     width: 70%;
159 |     height: 1px;
160 |     background-color: #ccc;
161 |     border-radius: 1px;
162 |   }
163 | 
164 |   .hidden {
165 |     display: none !important;
166 |   }
167 | 
168 |   .send-button {
169 |       width: 100px;
170 |   }
171 |   .chat-input textarea {
172 |     flex: 1;
173 |     margin-right: 5px;
174 |     resize: none;
175 |     overflow: auto;
176 |     height: 40px;
177 |     border-radius: 4px;
178 |     border: 1px solid #ccc;
179 |     padding: 5px;
180 |   }
181 | </style>
182 | 
183 | <div id="chat-popup" class="chat-popup hidden">
184 |   <div class="chat-header">
185 |     <h3>Chat with GPT</h3>
186 |     <button class="close-btn" onclick="closeChatPopup()">
187 |       <i class="fas fa-window-close"></i>
188 |     </button>
189 |   </div>
190 |   <div class="chat-content">
191 |     <div class="chat-messages" id="chat-messages"></div>
192 |     <div id="anchor"></div>
193 |   </div>
194 |   <div class="chat-input">
195 |     <textarea
196 |       id="chat-input-text"
197 |       rows="3"
198 |       placeholder="Type your prompt, note the hierarchical list above will be prefixed to your message so you may refer to it in your prompt."
199 |     ></textarea>
200 |     <button class="send-button" onclick="submitChatMessage()">Send</button>
201 |   </div>
202 |   <div class="resize-handle"><i class="fas fa-arrows-alt"></i></div>
203 | </div>
204 | 
205 | <script>
206 | 
207 | 
208 |   setupPopSizeListener(800, 600, document.getElementById("chat-popup"));
209 |   
210 |   function get_node_discussion_prompt(node, _jm) {
211 |     const text_of_node = node.topic;
212 |     const hyphenated_list = createHyphenatedList(_jm.get_data().data);
213 |     var prompt = document.getElementById("discuss-node-prompt").value;
214 |     prompt = secureEvaluateTemplate(prompt, {
215 |       hyphenated_list: hyphenated_list,
216 |       text_of_node: text_of_node,
217 |     });
218 |     console.log(prompt);
219 |     return prompt;
220 |   }
221 | 
222 |   function scrollToBottom() {
223 |     var anchor = document.getElementById("anchor");
224 |     anchor.scrollIntoView({ behavior: "smooth", block: "end" });
225 |   }
226 | 
227 |   function observeChatMessages() {
228 |     const chatMessages = document.getElementById("chat-messages");
229 |     const observer = new MutationObserver(scrollToBottom);
230 | 
231 |     observer.observe(chatMessages, {
232 |       childList: true, // Observe changes to the children of chatMessages
233 |       subtree: true, // Observe changes to the descendants of chatMessages
234 |     });
235 |   }
236 | 
237 |   document.addEventListener("DOMContentLoaded", function () {
238 |     observeChatMessages();
239 |   });
240 | 
241 |   async function discuss_node() {
242 |     var selected_node = _jm.get_selected_node(); // as parent of new node
243 |     if (!selected_node) {
244 |       prompt_info("please select a node first.");
245 |       return;
246 |     }
247 | 
248 |     // Call get_children_suggestions function and wait for the response
249 |     const prompt = get_node_discussion_prompt(selected_node, _jm);
250 |     openChatPopup(selected_node, prompt, _jm);
251 |   }
252 |   let curNode = null;
253 |   let prompt_prefix = "";
254 |   async function openChatPopup(_curNode, prompt, _jm) {
255 |     curNode = _curNode;
256 |     backlog = "";
257 |     if (curNode.data.hasOwnProperty("chatlog")) {
258 |       backlog = curNode.data["chatlog"];
259 |     }
260 |     const chatPopup = document.getElementById("chat-popup");
261 |     chatPopup.classList.remove("hidden");
262 | 
263 |     // Clear existing chat messages
264 |     const chatMessages = document.getElementById("chat-messages");
265 |     chatMessages.innerHTML = "";
266 |     const cur_topic = curNode.topic;
267 |     const hyphenated_list = createHyphenatedList(_jm.get_data().data);
268 |     var prompt_prefix_tmpl = document.getElementById("prefix-prompt").value;
269 |     prompt_prefix = secureEvaluateTemplate(prompt_prefix_tmpl, {
270 |       hyphenated_list: hyphenated_list,
271 |       cur_topic: cur_topic,
272 |     });
273 | 
274 |     // Display backlog
275 |     if (backlog != "") {
276 |       displayChatMessage(
277 |         "backlog-message",
278 |         "------backlog-----\n" + backlog + "\n----end backlog---"
279 |       );
280 |       displayChatMessage("user-message", "user-message:\n" + prompt_prefix);
281 |     } else {
282 |       // Display prompt
283 |       displayChatMessage("user-message", "user-message:\n" + prompt);
284 | 
285 |       // Send prompt to GPT and display response
286 |       displayChatMessage(
287 |         "gpt-message",
288 |         "..prompt sent to GPT api, waiting for response.."
289 |       );
290 |       const lastMessage = document.getElementById("chat-messages").lastChild;
291 |       const response = await chatGPTRequest(prompt, curNode);
292 |       lastMessage.innerText = "gpt-message:\n" + response;
293 |     }
294 |     scrollToBottom();
295 |   }
296 | 
297 |   function closeChatPopup() {
298 |     const chatPopup = document.getElementById("chat-popup");
299 |     chatPopup.classList.add("hidden");
300 |   }
301 | 
302 |   function displayChatMessage(sender, message) {
303 |     const chatMessages = document.getElementById("chat-messages");
304 |     const messageDiv = document.createElement("div");
305 |     messageDiv.className = sender;
306 |     messageDiv.innerText = message;
307 |     chatMessages.appendChild(messageDiv);
308 |     scrollToBottom();
309 |   }
310 | 
311 |   // Draggable
312 |   const chatHeader = document.querySelector(".chat-header");
313 |   chatHeader.addEventListener("mousedown", dragMouseDown);
314 | 
315 |   function dragMouseDown(e) {
316 |     e.preventDefault();
317 | 
318 |     const chatPopup = document.getElementById("chat-popup");
319 |     const offsetX = e.clientX - chatPopup.getBoundingClientRect().left;
320 |     const offsetY = e.clientY - chatPopup.getBoundingClientRect().top;
321 | 
322 |     document.onmousemove = (e) => {
323 |       chatPopup.style.left = `${e.clientX - offsetX}px`;
324 |       chatPopup.style.top = `${e.clientY - offsetY}px`;
325 |     };
326 | 
327 |     document.onmouseup = () => {
328 |       document.onmousemove = null;
329 |       document.onmouseup = null;
330 |     };
331 |   }
332 | 
333 |   // Resizable
334 |   const resizeHandle = document.querySelector(".resize-handle");
335 |   resizeHandle.addEventListener("mousedown", resizeMouseDown);
336 | 
337 |   function resizeMouseDown(e) {
338 |     e.preventDefault();
339 | 
340 |     const chatPopup = document.getElementById("chat-popup");
341 |     const initialWidth = chatPopup.clientWidth;
342 |     const initialHeight = chatPopup.clientHeight;
343 |     const initialX = e.clientX;
344 |     const initialY = e.clientY;
345 | 
346 |     document.onmousemove = (e) => {
347 |       const newX = e.clientX;
348 |       const newY = e.clientY;
349 | 
350 |       chatPopup.style.width = `${initialWidth + (newX - initialX)}px`;
351 |       chatPopup.style.height = `${initialHeight + (newY - initialY)}px`;
352 |     };
353 | 
354 |     document.onmouseup = () => {
355 |       document.onmousemove = null;
356 |       document.onmouseup = null;
357 |     };
358 |   }
359 | 
360 |   // Multiline input field and ".." waiting indicator
361 |   async function submitChatMessage() {
362 |     const inputText = document.getElementById("chat-input-text");
363 |     const message = inputText.value;
364 |     inputText.value = "";
365 | 
366 |     if (message.trim() === "") return;
367 | 
368 |     displayChatMessage("user-message", message);
369 |     displayChatMessage("gpt-message", "..thinking..");
370 |     const lastMessage = document.getElementById("chat-messages").lastChild;
371 |     const response = await chatGPTRequest(prompt_prefix + message, curNode);
372 |     lastMessage.innerText = "gpt-message:\n" + response;
373 |   }
374 | </script>
375 | 


--------------------------------------------------------------------------------
/src/partials/help-popup.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   .help-popup {
  3 |     position: fixed;
  4 |     top: 60px;
  5 |     right: 60px;
  6 |     width: 600px;
  7 |     max-height: 750px;
  8 |     background: white;
  9 |     border: 1px solid #ccc;
 10 |     border-radius: 5px;
 11 |     display: flex;
 12 |     flex-direction: column;
 13 |     z-index: 1000;
 14 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 15 |   }
 16 | 
 17 |   .help-popup-header {
 18 |     display: flex;
 19 |     justify-content: space-between;
 20 |     align-items: center;
 21 |     padding: 5px;
 22 |     background: #0066ff;
 23 |     color: white;
 24 |     font-weight: bold;
 25 |     border-top-left-radius: 5px;
 26 |     border-top-right-radius: 5px; 
 27 |     font-family: "Roboto", sans-serif;
 28 |    max-height: 35px;
 29 |   }
 30 | 
 31 |   .help-popup-header h3 {
 32 |     margin: 0;
 33 |     font-family: "Roboto", sans-serif;
 34 |     font-weight: 500;
 35 |     font-size: 18px; /* Adjust the font size according to your design preferences */
 36 |   }
 37 | 
 38 |   .help-close-btn {
 39 |     background: transparent;
 40 |     border: none;
 41 |     color: white;
 42 |     padding: 0;
 43 |     margin: 0;
 44 |     max-width: 30px;
 45 |     align: right;
 46 |     font-weight: bold;
 47 |     font-size: 16px;
 48 |     cursor: pointer;
 49 |   }
 50 | 
 51 |   .help-popup-content {
 52 |     padding: 20px;
 53 |     overflow-y: auto;
 54 |     font-family: "Roboto", sans-serif;
 55 |   }
 56 | 
 57 | </style>
 58 | 
 59 | <div id="help-popup" class="help-popup hidden">
 60 |   <div class="help-popup-header">
 61 |     <h3>Help</h3>
 62 |     <button class="help-close-btn" onclick="closeHelpPopup()">
 63 |       <i class="fas fa-window-close"></i>
 64 |     </button>
 65 |   </div>
 66 | 
 67 |   <div class="help-popup-content">
 68 |     Creating a new map and setting the map name:
 69 |     <ul>
 70 |       <li> Change the URL to file://<path>/simbiotica.html?map=[map_name] </li>
 71 |       <li> This format was chosen for easy bookmarking in your web browser </li>
 72 |     </ul>
 73 |     Security:
 74 |     <ul>
 75 |       <li> The security of your OpenAI API key is important. Efforts have been made with this app to ensure its safety.</li>
 76 |       <li> This code is open source and not minified, making it easily reviewable.</li>
 77 |       <li> Your API key is not stored locally in any persistent storage and must be entered each time you load this page.</li>
 78 |       <li> All imports have SRI hashes, and external code has been reviewed for potential issues.</li>
 79 |       <li> This app is fairly lightweight in its usage, but make sure you have a spending limit on your OpenAI account. You can see token count usage in the settings page.</li>
 80 |     </ul>
 81 |     Interacting with the mindmap:
 82 |     <ul>
 83 |       <li> Mouse click to select a node, double-click to edit, press Enter to save </li>
 84 |       <li> You can either click and drag your mouse to pan the mindmap, or use mousewheel / two-finger guestures on touchpad to scroll the mindmap vertically or horizontally if it's larger in those dimensions (respectively) to the screen. </li>
 85 |       <li> Mouse drag nodes to move to another node</li>
 86 |       <li> Mouse click small circle to expand/collapse</li>
 87 |       <li> Press Enter to create a sibling node</li>
 88 |       <li> Press Ctrl-Enter to create a child node</li>
 89 |       <li> Press Delete to delete a node</li>
 90 |     </ul>
 91 |     Note that maps are autosaved via the IndexedDB API, browser-based storage that is only accessible by the same origin. In other words, your maps can only be accessed from where this page is being served from. Be careful when using other browser-based applications you save/serve from the same location, as they can access the IndexDB API storage. Use only code that is openly reviewable, open source, or from a trusted entity.
 92 |     <br />
 93 |     <br />
 94 |     Button bar:
 95 |     <ul>
 96 |       <li> <i class="fas fa-download"></i> - Make a backup of the map. As mentioned above, the map is already stored in your browser, but this can be used for transferring between computers.</li>
 97 |       <li> <i class="fas fa-upload"></i> - Load a backup of the map. The map must be empty to ensure you don't accidentally overwrite another map.</li>
 98 |       <li> <i class="fas fa-share-alt"></i> - Get suggestions from GPT-3.5, which is what this is all about!  You can configure how this is done in settings.</li>
 99 |       <li> <i class="fas fa-compress-alt"></i> - Collapse all</li>
100 |       <li> <i class="fas fa-expand-alt"></i> - Expand all</li>
101 |       <li> <i class="fas fa-search-plus"></i> - Zoom in</li>      
102 |       <li> <i class="fas fa-search-minus"></i> - Zoom out</li>
103 |       <li> <i class="fas fa-comments"></i> - Engage in a deeper discussion with GPT-3.5 about a particular node.  The first time you chat about a node both the mindmap and a series of questions will be sent to GPT API.  Subsequently, all messages will be prefixed with the mindmap only.  You can configure these prompts in settings.</li>
104 |       <li> <i class="fas fa-rotate-left"></i> - Undo, may have to click twice.  This is a bit hard to use right now, working on it.</li>
105 |       <li> <i class="fas fa-rotate-right"></i> - Redo, may have to click twice</li>
106 |       <li> <i class="fas fa-gear"></i> - Settings. You can change the prompts used to get suggestions and discuss nodes. Make sure you review them carefully before making changes. Backing up a copy of the prompt for reverting is probably a good idea.</li>
107 |     </ul>
108 |       </div>
109 |   </div>
110 |     </ul>
111 |     
112 |   </div>
113 | </div>
114 | 
115 | <script type="text/javascript">
116 |   setupPopSizeListener(750, 600, document.getElementById("help-popup"));
117 |   
118 |   function openHelpPopup() {
119 |     document.getElementById("help-popup").classList.remove("hidden");
120 |   }
121 | 
122 |   function closeHelpPopup() {
123 |     document.getElementById("help-popup").classList.add("hidden");
124 |   }
125 | 
126 | </script>
127 | 


--------------------------------------------------------------------------------
/src/partials/jsmind_draggable.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   /**
  3 |  * @license BSD
  4 |  * @copyright 2014-2023 hizzgdev@163.com
  5 |  *
  6 |  * Project Home:
  7 |  *   https://github.com/hizzgdev/jsmind/
  8 |  */
  9 | 
 10 |   if (!jsMind) {
 11 |       throw new Error('jsMind is not defined');
 12 |   }
 13 | 
 14 |   const jm = jsMind;
 15 |   const $ = jm.$;
 16 |   
 17 |   const clear_selection =
 18 | 	console.log("clear_selection vars", jm.$);
 19 | 
 20 | 	'getSelection' in $.w
 21 |         ? function () {
 22 | 	    $.w.getSelection().removeAllRanges();
 23 | 	}
 24 |         : function () {
 25 | 	    $.d.selection.empty();
 26 | 	};
 27 | 
 28 |   const options = {
 29 |       line_width: 5,
 30 |       lookup_delay: 500,
 31 |       lookup_interval: 80,
 32 |   };
 33 | 
 34 |   class DraggableNode {
 35 |       constructor(jm) {
 36 | 	  this.jm = jm;
 37 | 	  this.e_canvas = null;
 38 | 	  this.canvas_ctx = null;
 39 | 	  this.shadow = null;
 40 | 	  this.shadow_w = 0;
 41 | 	  this.shadow_h = 0;
 42 | 	  this.active_node = null;
 43 | 	  this.target_node = null;
 44 | 	  this.target_direct = null;
 45 | 	  this.client_w = 0;
 46 | 	  this.client_h = 0;
 47 | 	  this.offset_x = 0;
 48 | 	  this.offset_y = 0;
 49 | 	  this.hlookup_delay = 0;
 50 | 	  this.hlookup_timer = 0;
 51 | 	  this.capture = false;
 52 | 	  this.moved = false;
 53 | 	  this.canvas_draggable = this.jm.get_view_draggable();
 54 |       }
 55 |       init() {
 56 | 	  this._create_canvas();
 57 | 	  this._create_shadow();
 58 | 	  this._event_bind();
 59 |       }
 60 |       resize() {
 61 | 	  this.jm.view.e_nodes.appendChild(this.shadow);
 62 | 	  this.e_canvas.width = this.jm.view.size.w;
 63 | 	  this.e_canvas.height = this.jm.view.size.h;
 64 |       }
 65 |       _create_canvas() {
 66 | 	  var c = $.c('canvas');
 67 | 	  this.jm.view.e_panel.appendChild(c);
 68 | 	  var ctx = c.getContext('2d');
 69 | 	  this.e_canvas = c;
 70 | 	  this.canvas_ctx = ctx;
 71 |       }
 72 |       _create_shadow() {
 73 | 	  var s = $.c('jmnode');
 74 | 	  s.style.visibility = 'hidden';
 75 | 	  s.style.zIndex = '3';
 76 | 	  s.style.cursor = 'move';
 77 | 	  s.style.opacity = '0.7';
 78 | 	  this.shadow = s;
 79 |       }
 80 |       reset_shadow(el) {
 81 | 	  var s = this.shadow.style;
 82 | 	  this.shadow.innerHTML = el.innerHTML;
 83 | 	  s.left = el.style.left;
 84 | 	  s.top = el.style.top;
 85 | 	  s.width = el.style.width;
 86 | 	  s.height = el.style.height;
 87 | 	  s.backgroundImage = el.style.backgroundImage;
 88 | 	  s.backgroundSize = el.style.backgroundSize;
 89 | 	  s.transform = el.style.transform;
 90 | 	  this.shadow_w = this.shadow.clientWidth;
 91 | 	  this.shadow_h = this.shadow.clientHeight;
 92 |       }
 93 |       show_shadow() {
 94 | 	  if (!this.moved) {
 95 | 	      this.shadow.style.visibility = 'visible';
 96 | 	  }
 97 |       }
 98 |       hide_shadow() {
 99 | 	  this.shadow.style.visibility = 'hidden';
100 |       }
101 |       _magnet_shadow(node) {
102 | 	  if (!!node) {
103 | 	      this.canvas_ctx.lineWidth = options.line_width;
104 | 	      this.canvas_ctx.strokeStyle = 'rgba(255,255,255,0.3)';
105 | 	      this.canvas_ctx.lineCap = 'round';
106 | 	      this._clear_lines();
107 | 	      this._canvas_lineto(node.sp.x, node.sp.y, node.np.x, node.np.y);
108 | 	  }
109 |       }
110 |       _clear_lines() {
111 | 	  this.canvas_ctx.clearRect(0, 0, this.jm.view.size.w, this.jm.view.size.h);
112 |       }
113 |       _canvas_lineto(x1, y1, x2, y2) {
114 | 	  this.canvas_ctx.beginPath();
115 | 	  this.canvas_ctx.moveTo(x1, y1);
116 | 	  this.canvas_ctx.lineTo(x2, y2);
117 | 	  this.canvas_ctx.stroke();
118 |       }
119 |       _lookup_close_node() {
120 | 	  var root = this.jm.get_root();
121 | 	  var root_location = root.get_location();
122 | 	  var root_size = root.get_size();
123 | 	  var root_x = root_location.x + root_size.w / 2;
124 | 
125 | 	  var sw = this.shadow_w;
126 | 	  var sh = this.shadow_h;
127 | 	  var sx = this.shadow.offsetLeft;
128 | 	  var sy = this.shadow.offsetTop;
129 | 
130 | 	  var ns, nl;
131 | 
132 | 	  var direct = sx + sw / 2 >= root_x ? jsMind.direction.right : jsMind.direction.left;
133 | 	  var nodes = this.jm.mind.nodes;
134 | 	  var node = null;
135 | 	  var layout = this.jm.layout;
136 | 	  var min_distance = Number.MAX_VALUE;
137 | 	  var distance = 0;
138 | 	  var closest_node = null;
139 | 	  var closest_p = null;
140 | 	  var shadow_p = null;
141 | 	  for (var nodeid in nodes) {
142 | 	      var np, sp;
143 | 	      node = nodes[nodeid];
144 | 	      if (node.isroot || node.direction == direct) {
145 | 		  if (node.id == this.active_node.id) {
146 | 		      continue;
147 | 		  }
148 | 		  if (!layout.is_visible(node)) {
149 | 		      continue;
150 | 		  }
151 | 		  ns = node.get_size();
152 | 		  nl = node.get_location();
153 | 		  if (direct == jsMind.direction.right) {
154 | 		      if (sx - nl.x - ns.w <= 0) {
155 | 			  continue;
156 | 		      }
157 | 		      distance = Math.abs(sx - nl.x - ns.w) + Math.abs(sy + sh / 2 - nl.y - ns.h / 2);
158 | 		      np = { x: nl.x + ns.w - options.line_width, y: nl.y + ns.h / 2 };
159 | 		      sp = { x: sx + options.line_width, y: sy + sh / 2 };
160 | 		  } else {
161 | 		      if (nl.x - sx - sw <= 0) {
162 | 			  continue;
163 | 		      }
164 | 		      distance = Math.abs(sx + sw - nl.x) + Math.abs(sy + sh / 2 - nl.y - ns.h / 2);
165 | 		      np = { x: nl.x + options.line_width, y: nl.y + ns.h / 2 };
166 | 		      sp = { x: sx + sw - options.line_width, y: sy + sh / 2 };
167 | 		  }
168 | 		  if (distance < min_distance) {
169 | 		      closest_node = node;
170 | 		      closest_p = np;
171 | 		      shadow_p = sp;
172 | 		      min_distance = distance;
173 | 		  }
174 | 	      }
175 | 	  }
176 | 	  var result_node = null;
177 | 	  if (!!closest_node) {
178 | 	      result_node = {
179 | 		  node: closest_node,
180 | 		  direction: direct,
181 | 		  sp: shadow_p,
182 | 		  np: closest_p,
183 | 	      };
184 | 	  }
185 | 	  return result_node;
186 |       }
187 |       lookup_close_node() {
188 | 	  var node_data = this._lookup_close_node();
189 | 	  if (!!node_data) {
190 | 	      this._magnet_shadow(node_data);
191 | 	      this.target_node = node_data.node;
192 | 	      this.target_direct = node_data.direction;
193 | 	  }
194 |       }
195 |       _event_bind() {
196 | 	  var jd = this;
197 | 	  var container = this.jm.view.container;
198 | 	  $.on(container, 'mousedown', function (e) {
199 | 	      var evt = e || event;
200 | 	      jd.dragstart.call(jd, evt);
201 | 	  });
202 | 	  $.on(container, 'mousemove', function (e) {
203 | 	      var evt = e || event;
204 | 	      jd.drag.call(jd, evt);
205 | 	  });
206 | 	  $.on(container, 'mouseup', function (e) {
207 | 	      var evt = e || event;
208 | 	      jd.dragend.call(jd, evt);
209 | 	  });
210 | 	  $.on(container, 'touchstart', function (e) {
211 | 	      var evt = e || event;
212 | 	      jd.dragstart.call(jd, evt);
213 | 	  });
214 | 	  $.on(container, 'touchmove', function (e) {
215 | 	      var evt = e || event;
216 | 	      jd.drag.call(jd, evt);
217 | 	  });
218 | 	  $.on(container, 'touchend', function (e) {
219 | 	      var evt = e || event;
220 | 	      jd.dragend.call(jd, evt);
221 | 	  });
222 |       }
223 |       dragstart(e) {
224 | 	  if (!this.jm.get_editable()) {
225 | 	      return;
226 | 	  }
227 | 	  if (this.capture) {
228 | 	      return;
229 | 	  }
230 | 	  this.active_node = null;
231 | 	  this.view_draggable = this.jm.get_view_draggable();
232 | 
233 | 	  var jview = this.jm.view;
234 | 	  var el = e.target || event.srcElement;
235 | 	  if (el.tagName.toLowerCase() != 'jmnode') {
236 | 	      return;
237 | 	  }
238 | 	  if (this.view_draggable) {
239 | 	      this.jm.disable_view_draggable();
240 | 	  }
241 | 	  var nodeid = jview.get_binded_nodeid(el);
242 | 	  if (!!nodeid) {
243 | 	      var node = this.jm.get_node(nodeid);
244 | 	      if (!node.isroot) {
245 | 		  this.reset_shadow(el);
246 | 		  this.active_node = node;
247 | 		  this.offset_x =
248 | 		      (e.clientX || e.touches[0].clientX) / jview.actualZoom - el.offsetLeft;
249 | 		  this.offset_y =
250 | 		      (e.clientY || e.touches[0].clientY) / jview.actualZoom - el.offsetTop;
251 | 		  this.client_hw = Math.floor(el.clientWidth / 2);
252 | 		  this.client_hh = Math.floor(el.clientHeight / 2);
253 | 		  if (this.hlookup_delay != 0) {
254 | 		      $.w.clearTimeout(this.hlookup_delay);
255 | 		  }
256 | 		  if (this.hlookup_timer != 0) {
257 | 		      $.w.clearInterval(this.hlookup_timer);
258 | 		  }
259 | 		  var jd = this;
260 | 		  this.hlookup_delay = $.w.setTimeout(function () {
261 | 		      jd.hlookup_delay = 0;
262 | 		      jd.hlookup_timer = $.w.setInterval(function () {
263 | 			  jd.lookup_close_node.call(jd);
264 | 		      }, options.lookup_interval);
265 | 		  }, options.lookup_delay);
266 | 		  this.capture = true;
267 | 	      }
268 | 	  }
269 |       }
270 |       drag(e) {
271 | 	  if (!this.jm.get_editable()) {
272 | 	      return;
273 | 	  }
274 | 	  if (this.capture) {
275 | 	      e.preventDefault();
276 | 	      this.show_shadow();
277 | 	      this.moved = true;
278 | 	      clear_selection();
279 | 	      var jview = this.jm.view;
280 | 	      var px = (e.clientX || e.touches[0].clientX) / jview.actualZoom - this.offset_x;
281 | 	      var py = (e.clientY || e.touches[0].clientY) / jview.actualZoom - this.offset_y;
282 | 	      this.shadow.style.left = px + 'px';
283 | 	      this.shadow.style.top = py + 'px';
284 | 	      clear_selection();
285 | 	  }
286 |       }
287 |       dragend(e) {
288 | 	  if (!this.jm.get_editable()) {
289 | 	      return;
290 | 	  }
291 | 	  if (this.view_draggable) {
292 | 	      this.jm.enable_view_draggable();
293 | 	  }
294 | 	  if (this.capture) {
295 | 	      if (this.hlookup_delay != 0) {
296 | 		  $.w.clearTimeout(this.hlookup_delay);
297 | 		  this.hlookup_delay = 0;
298 | 		  this._clear_lines();
299 | 	      }
300 | 	      if (this.hlookup_timer != 0) {
301 | 		  $.w.clearInterval(this.hlookup_timer);
302 | 		  this.hlookup_timer = 0;
303 | 		  this._clear_lines();
304 | 	      }
305 | 	      if (this.moved) {
306 | 		  var src_node = this.active_node;
307 | 		  var target_node = this.target_node;
308 | 		  var target_direct = this.target_direct;
309 | 		  this.move_node(src_node, target_node, target_direct);
310 | 	      }
311 | 	      this.hide_shadow();
312 | 	  }
313 | 	  this.moved = false;
314 | 	  this.capture = false;
315 |       }
316 |       move_node(src_node, target_node, target_direct) {
317 | 	  var shadow_h = this.shadow.offsetTop;
318 | 	  if (!!target_node && !!src_node && !jsMind.node.inherited(src_node, target_node)) {
319 | 	      // lookup before_node
320 | 	      var sibling_nodes = target_node.children;
321 | 	      var sc = sibling_nodes.length;
322 | 	      var node = null;
323 | 	      var delta_y = Number.MAX_VALUE;
324 | 	      var node_before = null;
325 | 	      var beforeid = '_last_';
326 | 	      while (sc--) {
327 | 		  node = sibling_nodes[sc];
328 | 		  if (node.direction == target_direct && node.id != src_node.id) {
329 | 		      var dy = node.get_location().y - shadow_h;
330 | 		      if (dy > 0 && dy < delta_y) {
331 | 			  delta_y = dy;
332 | 			  node_before = node;
333 | 			  beforeid = '_first_';
334 | 		      }
335 | 		  }
336 | 	      }
337 | 	      if (!!node_before) {
338 | 		  beforeid = node_before.id;
339 | 	      }
340 | 	      this.jm.move_node(src_node.id, beforeid, target_node.id, target_direct);
341 | 	  }
342 | 	  this.active_node = null;
343 | 	  this.target_node = null;
344 | 	  this.target_direct = null;
345 |       }
346 |       jm_event_handle(type, data) {
347 | 	  if (type === jsMind.event_type.resize) {
348 | 	      this.resize();
349 | 	  }
350 |       }
351 |   }
352 | 
353 |   var draggable_plugin = new jm.plugin('draggable_node', function (jm) {
354 |       var jd = new DraggableNode(jm);
355 |       jd.init();
356 |       jm.add_event_listener(function (type, data) {
357 | 	  jd.jm_event_handle.call(jd, type, data);
358 |       });
359 |   });
360 | 
361 |   jsMind.register_plugin(draggable_plugin);
362 |   
363 | </script>
364 | 


--------------------------------------------------------------------------------
/src/partials/login-popup.html:
--------------------------------------------------------------------------------
 1 | <!-- logindiv -->
 2 | <style>
 3 |   .modal {
 4 |     display: none;
 5 |     position: fixed;
 6 |     z-index: 10000;
 7 |     left: 0;
 8 |     top: 0;
 9 |     width: 100%;
10 |     height: 100%;
11 |     overflow: auto;
12 |     background-color: rgba(0, 0, 0, 0.4);
13 |   }
14 | 
15 |   .modal-content {
16 |     background-color: #fefefe;
17 |     margin: 15% auto;
18 |     padding: 20px;
19 |     border: 1px solid #888;
20 |     width: 80%;
21 |     text-align: center;
22 |   }
23 | 
24 |   input[type="text"] {
25 |     width: 100%;
26 |     padding: 12px 20px;
27 |     margin: 8px 0;
28 |     display: inline-block;
29 |     border: 1px solid #ccc;
30 |     box-sizing: border-box;
31 |   }
32 | 
33 |   button {
34 |     background-color: #4caf50;
35 |     color: white;
36 |     padding: 14px 20px;
37 |     margin: 8px 0;
38 |     border: none;
39 |     cursor: pointer;
40 |     width: 100%;
41 |   }
42 | 
43 |   button:hover {
44 |     opacity: 0.8;
45 |   }
46 | </style>
47 | <div id="api-key-modal" class="modal">
48 |   <div class="modal-content">
49 |     <h2>Enter GPT3.5-turbo API Key</h2>
50 |     <p>Please enter your GPT3.5-turbo API key to continue.  This is a browser side application only, no server except for OpenAI.<br/>
51 |       The key is not persisted in browser storage and only used when sending to OpenAI REST api. <br />
52 |       Token usage is relatively light and you can find a total usage count via settings (gear) icon. <br />
53 |       The source code is not minified and should be easily reviewable via developer tools, your filesystem, and/or the github repo.<br />
54 |       Make sure to follow <a href=http://twitter.com/QRDL>http://twitter.com/QRDL</a> for information and updates.<br />
55 |     <input type="text" id="api-key-input" style="-webkit-text-security: disc;">
56 |     <button id="submit-api-key">Submit</button>
57 |   </div>
58 | </div>
59 | 
60 | <script type="text/javascript">
61 |   let API_KEY = "";
62 | 
63 |   document.addEventListener("DOMContentLoaded", function () {
64 |     const apiKeyModal = document.getElementById("api-key-modal");
65 |     const submitApiKeyButton = document.getElementById("submit-api-key");
66 | 
67 |     function showApiKeyModal() {
68 |       apiKeyModal.style.display = "block";
69 |     }
70 | 
71 |       function hideApiKeyModal() {
72 |       document.getElementById("api-key-input").value = "";
73 |       apiKeyModal.style.display = "none";
74 |     }
75 | 
76 |     submitApiKeyButton.addEventListener("click", () => {
77 |       const apiKeyInput = document.getElementById("api-key-input");
78 |       API_KEY = apiKeyInput.value.trim();  //This is the only place we 'store' the key
79 |       const apiKey = API_KEY;
80 |       if (apiKey) {
81 |         hideApiKeyModal();
82 |       } else {
83 |         showCustomAlert("Please enter a valid API key.");
84 |       }
85 |     });
86 | 
87 |     // Show the modal dialog on page load.
88 |     showApiKeyModal();
89 |   });
90 | </script>
91 | 


--------------------------------------------------------------------------------
/src/partials/mindmap.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   #main_container {
  3 |     width: 200px;
  4 |     position: relative;
  5 |     z-index: 2;
  6 |   }
  7 | 
  8 |   #jsmind_container {
  9 |     position: absolute;
 10 |     top: 0;
 11 |     left: 0;
 12 |     width: 100%;
 13 |     height: 100%;
 14 |     background: #000000;
 15 |     z-index: 1;
 16 |   }
 17 | 
 18 |   #jsmind_nav ul {
 19 |     padding: 0;
 20 |   }
 21 | 
 22 |   #jsmind_nav li {
 23 |     margin-right: 10px;
 24 |   }
 25 | 
 26 |   #jsmind_nav button {
 27 |     background-color: transparent;
 28 |     border: none;
 29 |     color: #fff;
 30 |     cursor: pointer;
 31 |     font-size: 24px;
 32 |     padding: 5px;
 33 |   }
 34 | 
 35 |   #jsmind_nav button:hover {
 36 |     color: #007bff;
 37 |   }
 38 | 
 39 |   #jsmind_nav label {
 40 |     cursor: pointer;
 41 |     font-size: 18px;
 42 |     padding: 5px;
 43 |     color: #333;
 44 |   }
 45 | 
 46 |   #jsmind_nav label:hover {
 47 |     color: #007bff;
 48 |   }
 49 | 
 50 |   .draggable {
 51 |       position: fixed;
 52 |       bottom: 0;
 53 |       
 54 |       margin-bottom: 2px;
 55 |       margin-left: 4px;
 56 |       background: #34495e;
 57 |       border-radius: 5px;
 58 |       box-shadow: 3px 4px 6px rgba(128, 128, 128, 0.5);
 59 |       display: flex;
 60 |       justify-content: space-around;
 61 |       align-items: center;
 62 |       padding: 5px;
 63 |       cursor: move;
 64 |       min-width: 600px;
 65 |   }
 66 | 
 67 |   .icon-button {
 68 |       background: none;
 69 |       border: none;
 70 |       cursor: pointer;
 71 |       font-size: 24px;
 72 |   }
 73 | 
 74 |   .icon-button:hover {
 75 |       color: #007bff;
 76 |   }
 77 |   
 78 |   body jmnode {
 79 |       font: 12px/1.125 Verdana, Arial, Helvetica, sans-serif;
 80 |       padding: 5px;
 81 |   }
 82 |   
 83 | </style>
 84 | <div id="jsmind_container"></div>
 85 | <div id="main_container">
 86 |   <div id="jsmind_nav">
 87 |     <div id="button-bar" class="draggable">
 88 |               <button  class="icon-button"  onclick="save_file();" title="Save File">
 89 |           <i class="fas fa-download"></i>
 90 |               </button>
 91 | 	      
 92 |               <input
 93 |           id="file_input"
 94 |           class="file_input"
 95 |           type="file"
 96 |           style="display: none"
 97 |         /><label for="file_input" title="Upload File"
 98 |           ><i
 99 |             style="color: #fff; margin-right: 20px; margin-top: 2px; font-size: 24px"
100 |             class="fas fa-upload"
101 |           ></i
102 |         ></label>
103 |       
104 |         <button class="icon-button" onclick="add_node();" id="add-node-button" title="Add Node">
105 |           <i class="fas fa-share-alt"></i>
106 |         </button>
107 |       
108 |         <button  class="icon-button"  onclick="collapse_all();" title="Collapse All">
109 |           <i class="fas fa-compress-alt"></i>
110 |         </button>
111 |       
112 |         <button  class="icon-button"  onclick="expand_all();" title="Expand All">
113 |           <i class="fas fa-expand-alt"></i>
114 |         </button>
115 |       
116 |         <button   class="icon-button"  id="zoom-in-button" onclick="zoomIn();" title="Zoom In">
117 |           <i class="fas fa-search-plus"></i>
118 |         </button>
119 |       
120 |         <button  class="icon-button" id="zoom-out-button" onclick="zoomOut();" title="Zoom Out">
121 |           <i class="fas fa-search-minus"></i>
122 |         </button>
123 |             
124 |         <button  class="icon-button" onclick="discuss_node()" title="Open Chat">
125 |           <i class="fas fa-comments"></i>
126 |         </button>
127 |       
128 | <!--        <button  class="icon-button" onclick="restructure()" title="Restructure">
129 |           <i class="fas fa-random"></i>
130 |         </button>-->
131 |       
132 |         <button  class="icon-button" onclick="undo()" title="Undo">
133 |           <i class="fas fa-rotate-left"></i>
134 |         </button>
135 |       
136 |         <button  class="icon-button" onclick="redo()" title="Redo">
137 |           <i class="fas fa-rotate-right"></i>
138 |         </button>
139 |       
140 |         <button  class="icon-button" onclick="openSettingsPopup()" title="Settings">
141 |           <i class="fas fa-gear"></i>
142 |         </button>
143 |         <button  class="icon-button" onclick="openHelpPopup()" title="Help">
144 |           <i class="fas fa-info-circle"></i>
145 |         </button>
146 |         </div>
147 |   <div style="display: none">
148 |     <input class="file" type="file" id="image-chooser" accept="image/*" />
149 |   </div>
150 | </div>
151 | 
152 | <script type="text/javascript">
153 | 
154 |   function patch_jm(_jm) {
155 |       _jm.layout._layout_offset_subnodes = function(nodes) {
156 | 	  var total_height = 0;
157 | 	  var nodes_count = nodes.length;
158 | 	  var i = nodes_count;
159 | 	  var node = null;
160 | 	  var node_outer_height = 0;
161 | 	  var layout_data = null;
162 | 	  var base_y = 0;
163 | 	  var pd = null; // parent._data
164 | 	  while (i--) {
165 | 	      node = nodes[i];
166 | 	      layout_data = node._data.layout;
167 | 	      if (pd == null) {
168 | 		  pd = node.parent._data;
169 | 	      }
170 | 
171 | 	      node_outer_height = this._layout_offset_subnodes(node.children);
172 | 	      if (!node.expanded) {
173 | 		  node_outer_height = 0;
174 | 		  this.set_visible(node.children, false);
175 | 	      }
176 | 	      node_outer_height = Math.max(node._data.view.height, node_outer_height);
177 | 
178 | 	      layout_data.outer_height = node_outer_height;
179 | 	      layout_data.offset_y = base_y - node_outer_height / 2;
180 | 	      layout_data.offset_x =
181 | 		  this.opts.hspace * layout_data.direction +
182 | 		  (pd.view.width * (pd.layout.direction + layout_data.direction)) / 2;
183 | 	      if (!node.parent.isroot) {
184 | 		  layout_data.offset_x += this.opts.pspace * layout_data.direction;
185 | 	      }
186 | 
187 | 	      base_y = base_y - node_outer_height - this.opts.vspace;
188 | 	      total_height += node_outer_height;
189 | 	  }
190 | 	  if (nodes_count > 1) {
191 | 	      total_height += this.opts.vspace * (nodes_count - 1);
192 | 	  }
193 | 	  i = nodes_count;
194 | 	  var middle_height = total_height / 2;
195 | 	  while (i--) {
196 | 	      node = nodes[i];
197 | 	      node._data.layout.offset_y += middle_height;
198 |   }
199 | 	  return total_height+10;
200 |       }
201 | 
202 |       _jm.layout._layout_offset_subnodes_height = function(nodes) {
203 |       var total_height = 0;
204 |       var nodes_count = nodes.length;
205 |       var i = nodes_count;
206 |       var node = null;
207 |       var node_outer_height = 0;
208 |       var layout_data = null;
209 |       var base_y = 0;
210 |       var pd = null; // parent._data
211 |       while (i--) {
212 | 	  node = nodes[i];
213 | 	  layout_data = node._data.layout;
214 | 	  if (pd == null) {
215 | 	      pd = node.parent._data;
216 | 	  }
217 | 
218 | 	  node_outer_height = this._layout_offset_subnodes_height(node.children);
219 | 	  if (!node.expanded) {
220 | 	      node_outer_height = 0;
221 | 	  }
222 | 	  node_outer_height = Math.max(node._data.view.height, node_outer_height);
223 | 
224 | 	  layout_data.outer_height = node_outer_height;
225 | 	  layout_data.offset_y = base_y - node_outer_height / 2;
226 | 	  base_y = base_y - node_outer_height - this.opts.vspace;
227 | 	  total_height += node_outer_height;
228 |       }
229 |       if (nodes_count > 1) {
230 | 	  total_height += this.opts.vspace * (nodes_count - 1);
231 |       }
232 |       i = nodes_count;
233 |       var middle_height = total_height / 2;
234 |       while (i--) {
235 | 	  node = nodes[i];
236 | 	  node._data.layout.offset_y += middle_height;
237 |       }
238 |       console.log("layout", total_height);
239 |       return total_height+10;
240 |   }
241 |   }
242 |   const buttonBar = document.getElementById('button-bar');
243 | 
244 |   buttonBar.addEventListener('mousedown', (event) => {
245 |       const offsetX = event.clientX - buttonBar.getBoundingClientRect().left;
246 |       const offsetY = buttonBar.getBoundingClientRect().bottom;
247 |       const onMouseMove = (event) => {
248 | 	  buttonBar.style.left = `${event.clientX - offsetX}px`;
249 | 	  buttonBar.style.bottom = `${offsetY - event.clientY}px`;
250 |       };
251 | 
252 |       const onMouseUp = () => {
253 | 	  document.removeEventListener('mousemove', onMouseMove);
254 | 	  document.removeEventListener('mouseup', onMouseUp);
255 |       };
256 | 
257 |       document.addEventListener('mousemove', onMouseMove);
258 |       document.addEventListener('mouseup', onMouseUp);
259 |   });
260 |   
261 |   
262 |   function showSpinner() {
263 |     const button = document.getElementById("add-node-button");
264 |     button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
265 |   }
266 | 
267 |   function hideSpinner() {
268 |     const button = document.getElementById("add-node-button");
269 |     button.innerHTML = '<i class="fas fa-share-alt"></i>';
270 |   }
271 | 
272 |   function getParameterFromUrl(paramName) {
273 |     try {
274 |       const urlSearchParams = new URLSearchParams(window.location.search);
275 |       return urlSearchParams.get(paramName);
276 |     } catch (error) {
277 |       return null;
278 |     }
279 |   }
280 | 
281 |   let dbName = getParameterFromUrl("map");
282 |   if (dbName == null) {
283 |     dbName = "default";
284 |   }
285 | 
286 |   async function openDatabase(dbName) {
287 |     return new Promise((resolve, reject) => {
288 |       const request = indexedDB.open(dbName, 1);
289 | 
290 |       request.onupgradeneeded = (event) => {
291 |         const db = event.target.result;
292 |         db.createObjectStore("dataStore", { keyPath: "id" });
293 |       };
294 | 
295 |       request.onsuccess = (event) => {
296 |         resolve(event.target.result);
297 |       };
298 | 
299 |       request.onerror = (event) => {
300 |         reject(event.target.error);
301 |       };
302 |     });
303 |   }
304 | 
305 |   async function loadData(dbName, defaultValue) {
306 |     try {
307 |       const db = await openDatabase(dbName);
308 |       return new Promise((resolve, reject) => {
309 |         const transaction = db.transaction(["dataStore"], "readonly");
310 |         const objectStore = transaction.objectStore("dataStore");
311 |         const request = objectStore.get(1);
312 | 
313 |         request.onsuccess = (event) => {
314 |           const data = event.target.result;
315 |           resolve(data ? data.value : defaultValue);
316 |         };
317 | 
318 |         request.onerror = (event) => {
319 |           reject(event.target.error);
320 |         };
321 |       });
322 |     } catch (error) {
323 |       console.error("Error loading data:", error);
324 |     }
325 |   }
326 | 
327 |   async function saveData(dbName, data) {
328 |     try {
329 |       const db = await openDatabase(dbName);
330 |       return new Promise((resolve, reject) => {
331 |         const transaction = db.transaction(["dataStore"], "readwrite");
332 |         const objectStore = transaction.objectStore("dataStore");
333 |         const request = objectStore.put({ id: 1, value: data });
334 | 
335 |         request.onsuccess = (event) => {
336 |           resolve();
337 |         };
338 | 
339 |         request.onerror = (event) => {
340 |           reject(event.target.error);
341 |         };
342 |       });
343 |     } catch (error) {
344 |       console.error("Error saving data:", error);
345 |     }
346 |   }
347 | 
348 |   var redo_manager_disabled = false;
349 |   
350 |   async function autoSaveData() {
351 |       var data = _jm.get_data();
352 |       if (!redo_manager_disabled) {
353 | 	  console.log("autoSaveData performAction");
354 | 	  undoRedoManager.performAction(data);
355 |       }
356 |     document.title = data.data.topic;
357 |     recordSettings(data);
358 |     await saveData(dbName, data);
359 |   }
360 | 
361 |   function undo() {
362 |       const repeat = undoRedoManager.undo(_jm.get_data());
363 |       console.log(repeat);
364 |       if (repeat != null) {
365 | 	  _jm.show(repeat);
366 |       }
367 |   }
368 |   
369 |   function redo() {
370 |       const repeat = undoRedoManager.redo();
371 |       if (repeat != null) {
372 | 	  _jm.show(repeat);
373 |       }
374 |   }
375 |   
376 |   var _jm = null;
377 | 
378 |   function get_def_options() {
379 |     var def_options = {
380 |       container: "jsmind_container",
381 |       theme: "asphalt",
382 |       editable: true,
383 |       support_html: false,
384 |       view: {
385 |         node_overflow: "wrap",
386 |         engine: "svg",
387 |           draggable: true,
388 | 	    line_width:3, 
389 |       },
390 | 
391 | 	layout: {
392 | 	    hspace: 40,
393 | 	    vspace: 10,
394 | 	    pspace: 20,
395 | 	},
396 |     };
397 |       return def_options;
398 |   }
399 | 
400 |   function get_def_mind() {
401 |     var mind = {
402 |       meta: {
403 |         name: "Simbiotico",
404 |         author: "http://twitter.com/QRDL",
405 |         version: "0.1",
406 |       },
407 | 
408 |       format: "node_tree",
409 |       data: {
410 |         id: "root",
411 |         topic: "Simbiotico",
412 |       },
413 |     };
414 |       return mind;
415 |   }
416 | 
417 |   function init_jm(def_options, options) {
418 |       def_options.view.line_width = 3;
419 |       _jm = new jsMind(def_options);
420 |       patch_jm(_jm);
421 |       console.log("open_empty 1", _jm.options);
422 |       _jm.show(options);
423 |       console.log("open_empty 2", _jm.options);
424 |       
425 |     load_meta_properties(options);
426 |     _jm.add_event_listener(async function (type, data) {
427 |       if (
428 |         ["update_node", "expand_node", "collapse_node", "remove_node"].includes(
429 |           data.evt
430 |         )
431 |       ) {
432 |         await autoSaveData();
433 |       } else {
434 |           console.log("event", data);
435 |       }
436 |     });
437 |       return _jm;
438 |   }
439 |   
440 |   async function open_empty() {
441 |       const def_options = get_def_options();
442 |       const mind = get_def_mind();
443 |       const options = await loadData(dbName, mind);
444 |       console.log("open_empty performAction");
445 |     undoRedoManager.performAction(options);
446 |       _jm = init_jm(def_options, options);
447 |   }
448 | 
449 |   function save_file() {
450 |     var mind_data = _jm.get_data();
451 |     var mind_name = mind_data.meta.name;
452 |     var mind_str = jsMind.util.json.json2string(mind_data);
453 |     jsMind.util.file.save(mind_str, "text/jsmind", mind_name + ".jm");
454 |   }
455 | 
456 |   function open_file(event) {
457 |     var files = document.getElementById("file_input").files;
458 |     console.log(files);
459 |     if (
460 |       _jm.get_data().data.children &&
461 |       _jm.get_data().data.children.length > 0
462 |     ) {
463 |       prompt_info(
464 |         "Please start with an empty mindmap before loading from disk."
465 |       );
466 |       event.target.value = null;
467 |       return;
468 |     }
469 |     if (files.length > 0) {
470 |       var file_data = files[0];
471 |       jsMind.util.file.read(file_data, function (jsmind_data, jsmind_name) {
472 |         var mind = jsMind.util.json.string2json(jsmind_data);
473 |         if (!!mind) {
474 |           _jm.show(mind);
475 |           load_meta_properties(mind);
476 |         } else {
477 |           prompt_info("can not open this file as mindmap");
478 |         }
479 |       });
480 |     } else {
481 |       prompt_info("please choose a file first");
482 |     }
483 |     event.target.value = null;
484 |   }
485 | 
486 |   document.getElementById("file_input").addEventListener("change", open_file);
487 | 
488 |   function get_selected_nodeid() {
489 |     var selected_node = _jm.get_selected_node();
490 |     if (!!selected_node) {
491 |       return selected_node.id;
492 |     } else {
493 |       return null;
494 |     }
495 |   }
496 | 
497 |   function createHyphenatedList(node, depth = 0) {
498 |     let result = "";
499 |     let prefix = " ".repeat(depth * 2);
500 |     result += `${prefix}- ${node.topic}\n`;
501 |     if (!node.expanded) return result;
502 | 
503 |     if (node.children) {
504 |       for (const child of node.children) {
505 |         result += createHyphenatedList(child, depth + 1);
506 |       }
507 |     }
508 | 
509 |     return result;
510 |   }
511 | 
512 |   const API_URL = "https://api.openai.com/v1/chat/completions";
513 | 
514 |   async function chatGPTRequest(prompt, curNode = null) {
515 |       try {
516 | 
517 | 	  gptEngine = document.getElementById("gpt-engine").value;
518 | 	  maxTokens = 4096;//document.getElementById("max-tokens").value;
519 | 	  temperature = parseFloat(document.getElementById("temperature").value);
520 | 	  if (isNaN(temperature)){
521 | 	      temperature = 0.3;
522 | 	  }
523 |       const response = await fetch(API_URL, {
524 |         method: "POST",
525 |         headers: {
526 |           "Content-Type": "application/json",
527 |           Authorization: `Bearer ${API_KEY}`,
528 |         },
529 |         body: JSON.stringify({
530 |             model: gptEngine,
531 |           messages: [{ role: "user", content: prompt }],
532 |           temperature: temperature,
533 |         }),
534 |       });
535 | 	  if (!response.ok) {
536 | 	      console.log(response);
537 | 	      prompt_info("Error communication with OpenAI API:"+response.status+" 401 means that your API Key is incorrect.");
538 | 	      throw new Error(`HTTP error: ${response.status}`);
539 | 	  }
540 | 	  
541 | 	const data = await response.json();
542 | 	console.log("chatGPTRequest", data);
543 | 	addTokenUsage(data.usage.total_tokens);
544 |       const resp = data.choices[0].message.content;
545 |       if (curNode) {
546 |         dict = curNode.data;
547 |         if (!dict.hasOwnProperty("chatlog")) {
548 |           dict["chatlog"] = "";
549 |         }
550 | 	  
551 |         dict["chatlog"] += "user-message:\n" + prompt + "\n";
552 |         dict["chatlog"] += "gpt-message:\n" + resp + "\n\n";
553 |         _jm.set_node_color(curNode.id, "#FFA533", null);
554 |         await autoSaveData();
555 |       }
556 | 
557 |       return resp;
558 |     } catch (error) {
559 |       console.error("Error:", error);
560 |     }
561 |   }
562 | 
563 |   function secureEvaluateTemplate(template, context) {
564 |     return template.replace(/\$\{(\w+)\}/g, (_, variable) => {
565 |       return context[variable] || "";
566 |     });
567 |   }
568 | 
569 |   async function get_children_suggestions(node, _jm, tmpl) {
570 |     const text_of_node = node.topic;
571 |     const hyphenated_list = createHyphenatedList(_jm.get_data().data);
572 |       var prompt = tmpl;
573 |     prompt = secureEvaluateTemplate(prompt, {
574 |       hyphenated_list: hyphenated_list,
575 |       text_of_node: text_of_node,
576 |     });
577 |     console.log(prompt);
578 |       // Make sure you call the chatGPTRequest function with the prompt
579 |     showSpinner();
580 |     const data = await chatGPTRequest(prompt);
581 |     hideSpinner();
582 |     return data;
583 |   }
584 | 
585 |   function processGptResponse(response, selected_node, _jm, do_scroll = true) {
586 |     // Step 1: Extract content between <embed> tags
587 |     const embedContent = response.match(/<embed>([\s\S]*?)<\/embed>/)[1].trim();
588 | 
589 |     // Step 2: Process the extracted content and build the hierarchy
590 |     const lines = embedContent.split("\n");
591 |     const hierarchy = [];
592 | 
593 |     for (const line of lines) {
594 |       const level = line.search(/\S/);
595 |       const content = line.trim().replace(/^-/, "").trim();
596 | 
597 |       hierarchy.push({
598 |         level: level / 2,
599 |         content: content,
600 |         id: jsMind.util.uuid.newid(),
601 |       });
602 |     }
603 | 
604 |     console.log(hierarchy);
605 |     // Step 3: Add nodes to jsMind with the correct connections
606 |     for (let i = 0; i < hierarchy.length; i++) {
607 |       const currentNode = hierarchy[i];
608 |       let parentId = selected_node;
609 | 
610 |       if (currentNode.level > 0) {
611 |         for (let j = i - 1; j >= 0; j--) {
612 |           if (hierarchy[j].level === currentNode.level - 1) {
613 |             parentId = hierarchy[j].id;
614 |             break;
615 |           }
616 |         }
617 |       }
618 | 
619 | 	nd = _jm.add_node(parentId, currentNode.id, currentNode.content);
620 | 	console.log(nd);
621 | 	if (do_scroll) {
622 | 	    nd._data.view.element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: "nearest"  });
623 | 	}
624 |     }
625 |   }
626 | 
627 |   async function add_node() {
628 |     var selected_node = _jm.get_selected_node(); // as parent of new node
629 |     if (!selected_node) {
630 |       prompt_info("please select a node first.");
631 |       return;
632 |     }
633 | 
634 |     // Call get_children_suggestions function and wait for the response
635 |       const response = await get_children_suggestions(selected_node, _jm, document.getElementById("child-node-suggestion").value);
636 |     console.log(response);
637 |       // Call processGptResponse function to process the response and add nodes
638 |       console.log("add_node redo_manager true");
639 |       redo_manager_disabled = true;
640 |       processGptResponse(response, selected_node, _jm);
641 |       console.log("add_node redo_manager false");
642 |       setTimeout(async () => {
643 | 	  redo_manager_disabled = false;
644 | 	  await autoSaveData();
645 |       }, 1000);
646 |   }
647 | 
648 |   async function restructure() {
649 |       var selected_node = _jm.get_root();
650 |       const response = await get_children_suggestions(selected_node, _jm, document.getElementById("restructure-prompt").value);
651 |       const def_options = get_def_options();
652 |       const mind = get_def_mind();
653 |       _jm = init_jm(def_options, mind);
654 |       var selected_node = _jm.get_root();
655 | 
656 | 
657 |       console.log(response);
658 |     
659 |       processGptResponse(response, selected_node, _jm);
660 | 
661 |   }
662 | 
663 | 
664 | 
665 |   var zoomInButton = document.getElementById("zoom-in-button");
666 |   var zoomOutButton = document.getElementById("zoom-out-button");
667 | 
668 |   function zoomIn() {
669 |     if (_jm.view.zoomIn()) {
670 |       zoomOutButton.disabled = false;
671 |     } else {
672 |       zoomInButton.disabled = true;
673 |     }
674 |   }
675 | 
676 |   function zoomOut() {
677 |     if (_jm.view.zoomOut()) {
678 |       zoomInButton.disabled = false;
679 |     } else {
680 |       zoomOutButton.disabled = true;
681 |     }
682 |   }
683 | 
684 |   function expand_all() {
685 |     _jm.expand_all();
686 |   }
687 | 
688 |   function collapse_all() {
689 |     _jm.collapse_all();
690 |   }
691 | 
692 |   function prompt_info(msg) {
693 |     showCustomAlert(msg);
694 |   }
695 | 
696 |   open_empty();
697 | </script>
698 | 


--------------------------------------------------------------------------------
/src/partials/settings-popup.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   .popup {
  3 |     position: fixed;
  4 |     top: 60px;
  5 |     right: 60px;
  6 |     width: 600px;
  7 |     height: 750px;
  8 |     background: white;
  9 |     border: 1px solid #ccc;
 10 |     border-radius: 5px;
 11 |     display: flex;
 12 |     flex-direction: column;
 13 |     z-index: 1000;
 14 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 15 |   }
 16 | 
 17 |   .popup-header {
 18 |     display: flex;
 19 |     justify-content: space-between;
 20 |     align-items: center;
 21 |     padding: 5px;
 22 |     background: #0066ff;
 23 |     color: white;
 24 |     font-weight: bold;
 25 |     border-top-left-radius: 5px;
 26 |     border-top-right-radius: 5px;
 27 |     font-family: "Roboto", sans-serif;
 28 |   }
 29 | 
 30 |   .popup-header h3 {
 31 |     margin: 0;
 32 |     font-family: "Roboto", sans-serif;
 33 |     font-weight: 500;
 34 |     font-size: 18px; /* Adjust the font size according to your design preferences */
 35 |   }
 36 | 
 37 |   .close-btn {
 38 |     background: transparent;
 39 |     border: none;
 40 |     color: white;
 41 |     font-weight: bold;
 42 |     font-size: 16px;
 43 |     cursor: pointer;
 44 |   }
 45 | 
 46 |   .popup-content {
 47 |     padding: 20px;
 48 |     overflow-y: auto;
 49 |   }
 50 | 
 51 |   .form-group {
 52 |     display: flex;
 53 |     flex-direction: column;
 54 |     margin-bottom: 20px;
 55 |   }
 56 | 
 57 |   label {
 58 |     margin-bottom: 5px;
 59 |     font-family: "Roboto", sans-serif;
 60 |   }
 61 | 
 62 |   textarea,
 63 |   input {
 64 |     padding: 8px;
 65 |     border: 1px solid #ccc;
 66 |     border-radius: 4px;
 67 |     resize: vertical;
 68 |   }
 69 | 
 70 |   .save-btn {
 71 |     background: #0066ff;
 72 |     color: white;
 73 |     border: none;
 74 |     border-radius: 4px;
 75 |     padding: 8px 16px;
 76 |     font-weight: bold;
 77 |     cursor: pointer;
 78 |     align-self: flex-end;
 79 |   }
 80 | </style>
 81 | 
 82 | <!-- settingsdiv -->
 83 | <div id="settings-popup" class="popup hidden">
 84 |   <div class="popup-header">
 85 |     <h3>Settings</h3>
 86 |     <button class="close-btn" onclick="closeSettingsPopup()">
 87 |       <i class="fas fa-window-close"></i>
 88 |     </button>
 89 |   </div>
 90 |   <div class="popup-content">
 91 |     <form id="settings-form">
 92 |       <div class="form-group">
 93 |         <label for="token-usage">Token Usage for this map:</label>
 94 |         <label
 95 |           id="token-usage"
 96 |         ></label>
 97 |       </div>
 98 |       <div class="form-group">
 99 |         <label for="child-node-suggestion">Child Node Suggestion Prompt:</label>
100 |         <textarea
101 |           id="child-node-suggestion"
102 |           rows="8"
103 |           placeholder="Enter child node suggestion prompt."
104 |         ></textarea>
105 |       </div>
106 |       <div class="form-group">
107 |         <label for="discuss-node-prompt">Discuss Node Prompt:</label>
108 |         <textarea
109 |           id="discuss-node-prompt"
110 |           rows="18"
111 |           placeholder="Enter discuss node prompt"
112 |         ></textarea>
113 |       </div>
114 |       <div class="form-group">
115 |         <label for="prefix-prompt">Discuss Prompt Prefix:</label>
116 |         <textarea
117 |           id="prefix-prompt"
118 |           rows="5"
119 |           placeholder="Enter prompt prefix"
120 |         ></textarea>
121 |       </div>
122 | <!--      <div class="form-group">
123 |         <label for="prefix-prompt">Restructure Prompt:</label>
124 |         <textarea
125 |           id="restructure-prompt"
126 |           rows="5"
127 |           placeholder="Enter restructure"
128 |         ></textarea>
129 |       </div>-->
130 |       <div class="form-group">
131 |         <label for="gpt-engine">GPT Engine:</label>
132 |         <input id="gpt-engine" type="text" placeholder="Enter GPT engine" />
133 |       </div>
134 | 	    
135 |       <div class="form-group">
136 |         <label for="temperature">Temperature:</label>
137 |         <input id="temperature" type="text" placeholder="Enter temperature" />
138 |       </div>
139 | 	    
140 |       <div class="form-group">
141 |         <label for="theme">Theme:</label>
142 |       <select onchange="set_theme(this.value);">
143 |           <option value="">default</option>
144 |           <option value="primary">primary</option>
145 |           <option value="warning">warning</option>
146 |           <option value="danger">danger</option>
147 |           <option value="success">success</option>
148 |           <option value="info">info</option>
149 |           <option value="greensea" selected="selected">greensea</option>
150 |           <option value="nephrite">nephrite</option>
151 |           <option value="belizehole">belizehole</option>
152 |           <option value="wisteria">wisteria</option>
153 |           <option value="asphalt">asphalt</option>
154 |           <option value="orange">orange</option>
155 |           <option value="pumpkin">pumpkin</option>
156 |           <option value="pomegranate">pomegranate</option>
157 |           <option value="clouds">clouds</option>
158 |           <option value="asbestos">asbestos</option>
159 |         </select>
160 |       </div>
161 |     </form>
162 |   </div>
163 | </div>
164 | 
165 | <script type="text/javascript">
166 |   setupPopSizeListener(750, 600, document.getElementById("settings-popup"));
167 |   
168 |   function set_theme(theme_name) {
169 |     _jm.set_theme(theme_name);
170 |   }
171 | 
172 | 
173 |   function getValueOrDefault(obj, key, defaultValue) {
174 |     if (!obj.hasOwnProperty(key)) {
175 |       return defaultValue;
176 |     }
177 |     return obj[key];
178 |   }
179 | 
180 |   function openSettingsPopup() {
181 |     document.getElementById("settings-popup").classList.remove("hidden");
182 |   }
183 | 
184 |   function closeSettingsPopup() {
185 |     console.log("close");
186 |     document.getElementById("settings-popup").classList.add("hidden");
187 |     autoSaveData();
188 |   }
189 |   function recordSettings(data) {
190 |     console.log(data);
191 |     // Get the values from the form fields
192 |     data["child-node-suggestion"] = document.getElementById(
193 |       "child-node-suggestion"
194 |     ).value;
195 |     data["discuss-node-prompt"] = document.getElementById(
196 |       "discuss-node-prompt"
197 |     ).value;
198 |     data["prefix-prompt"] = document.getElementById("prefix-prompt").value;
199 |     //data["restructure-prompt"] = document.getElementById("restructure-prompt").value;
200 |     data["gpt-engine"] = document.getElementById("gpt-engine").value;
201 |     data["token-usage"] = document.getElementById("token-usage").textContent;
202 |     data["temperature"] = document.getElementById("temperature").value;
203 |     console.log("recordSettings", data);
204 |   }
205 | 
206 |   function addTokenUsage(tokens) {
207 |       value = document.getElementById("token-usage").textContent;
208 |       if (value == "" || isNaN(parseInt(value))) {
209 | 	  count = 0;
210 |       } else {
211 | 	  count = parseInt(value);
212 |       }
213 |       console.log("addTokenUsage", value, count, tokens, count+tokens);
214 |       document.getElementById("token-usage").textContent = (count + tokens).toString();
215 |   }
216 |   
217 |   function saveSettings(event) {
218 |     if (event) event.preventDefault();
219 |     closeSettingsPopup();
220 |   }
221 | 
222 |   // Attach the event listener to the form
223 |   document
224 |     .getElementById("settings-form")
225 |     .addEventListener("submit", saveSettings);
226 | 
227 |   function load_meta_properties(options) {
228 |     document.getElementById("token-usage").textContent = getValueOrDefault(
229 | 	options, "token-usage", (0).toString())
230 |     document.getElementById("discuss-node-prompt").value = getValueOrDefault(
231 |       options,
232 |       "discuss-node-prompt",
233 |       "I am creating a mindmap.  Here is what's currently visible in the mindmap:\n" +
234 |         "${hyphenated_list}\n" +
235 |         "I'd like to discuss with you about the '${text_of_node}' node.\n" +
236 |         "Respond with your thoughts on:\n" +
237 |         "1. What this node means, both specifically and generally\n" +
238 |         "2. The relevance of this node, how it contributes individually and holistically\n" +
239 |         "3. Where it fits in the mindmap (see the indented listed above)\n" +
240 |         "4. What are some things to consider when adding children, sibling, and parent nodes around it in the mindmap\n" +
241 |         "5. What are some good questions to ask ChatGPT to get a better understanding of this node?\n" +
242 |         "6. And finally, just some novel creative ideas to think about in relation to this node.\n" +
243 |         "When addressing these points, please remember we're talking about the ${text_of_node}' node within the context of the hyphenated mindmap list above."
244 |     );
245 | 
246 |     document.getElementById("child-node-suggestion").value = getValueOrDefault(
247 |       options,
248 |       "child-node-suggestion",
249 |       "I am creating a mindmap.  Here is what's currently visible:\n" +
250 |         "${hyphenated_list}\n" +
251 |         "I need some ideas for adding at least two child nodes to '${text_of_node}'.\n" +
252 |         "Provide a list of suggestions, in the same hyphenated format above, that would be ideal children of '${text_of_node}', with no empty lines. The list should be prioritized by relevance and importance.\n" +
253 |         "Surround the list of suggestions with <embed></embed>\n" +
254 |         "Do not make suggestions which are redundant to ones already listed above.\n" +
255 |         "Do not repeat ${text_of_node}' in the list.\n"+
256 | 	"There must be at least two suggestions for the immediate child nodes of '${text_of_node}'.\n"+
257 | 	"Each suggestion must complement, augment, and harmonize with the mindmap listed above.\n"
258 |     );
259 |     document.getElementById("prefix-prompt").value = getValueOrDefault(
260 |       options,
261 |       "prefix-prompt",
262 |       "I am creating a mindmap, here's what's currently visible in the mindmap:\n${hyphenated_list}\nI would like to discuss the '${cur_topic}' node.\n\n"
263 |     );
264 | 
265 |    /* document.getElementById("restructure-prompt").value = getValueOrDefault(
266 |       options,
267 |       "restructure-prompt",
268 | 	"I am creating a mindmap, here's what is currently visible in the mindmap:\n${hyphenated_list}\n"+
269 | 	"Restructure the mindmap listed above into a more cohesive, clear, and impactful mindmap.\n"+
270 | 	    "The restructured mindmap should have many levels, but no less than 3 children and no more than 6 children per item.\n"+
271 | 	    "Use the same hyphenated hierarchical format above, with no empty lines.\n"+
272 | 	    "Ensure that the hierarchical hyphenated list is surrounded by <embed></embed>.\n"+
273 | 	    "Do not include the top level node.\n"
274 |     );*/
275 | 
276 |     document.getElementById("gpt-engine").value = getValueOrDefault(
277 |       options,
278 |       "gpt-engine",
279 |       "gpt-3.5-turbo"
280 |     );
281 |     document.getElementById("temperature").value = getValueOrDefault(
282 |       options,
283 |       "temperature",
284 |       "0.7"
285 |     );
286 |   }
287 | </script>
288 | 


--------------------------------------------------------------------------------
/src/partials/utils.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 |   class UndoRedoManager {
 4 |       constructor(maxSize) {
 5 | 	  this.undoStack = [];
 6 | 	  this.redoStack = [];
 7 | 	  this.maxSize = maxSize;
 8 |       }
 9 | 
10 |       performAction(state) {
11 | 	  this.undoStack.push(JSON.parse(JSON.stringify(state)));
12 | 
13 | 	  if (this.undoStack.length > this.maxSize) {
14 |               this.undoStack.shift();
15 | 	  }
16 | 
17 | 	  this.redoStack = [];
18 |       }
19 | 
20 |       undo(cur) {
21 | 	  if (this.undoStack.length === 0) {
22 |               return null;
23 | 	  }
24 | 
25 | 	  var prevState = this.undoStack.pop();
26 | 	  if (this.undoStack.length === 0) {
27 | 	      this.undoStack.push(prevState);
28 | 	  }
29 | 	  if (prevState == cur) {
30 | 	      if (this.undoStack.length < 2) {
31 | 		  return null;
32 | 	      } else {
33 | 		  return undo(cur);
34 | 	      }
35 | 	  }
36 | 	  this.redoStack.push(JSON.parse(JSON.stringify(prevState)));
37 | 	  return prevState;
38 |       }
39 | 
40 |       redo() {
41 | 	  if (this.redoStack.length === 0) {
42 |               return null;
43 | 	  }
44 | 
45 | 	  const nextState = this.redoStack.pop();
46 | 	  this.undoStack.push(JSON.parse(JSON.stringify(nextState)));
47 | 	  return nextState;
48 |       }
49 |   }
50 | 
51 | 
52 |   function createUpdatePopupSize(maxHeight, maxWidth, div) {
53 |       return function () {
54 | 	  const windowHeight = window.innerHeight;
55 | 	  if (windowHeight < maxHeight) {
56 | 	      div.style.height = (windowHeight * 0.9) + "px"; // Set popup height to 80% of the window height
57 | 	  } else {
58 | 	      div.style.height = maxHeight;
59 | 	  }
60 | 	  const windowWidth = window.innerWidth;
61 | 	  if (windowWidth < maxWidth) {
62 | 	      div.style.width = (windowWidth * 0.9) + "px"; // Set popup height to 80% of the window height
63 | 	  } else {
64 | 	      div.style.width = maxWidth; // Reset the popup height to auto when the window is larger
65 | 	  }
66 |       };
67 |   }
68 |   
69 | 
70 |   function setupPopSizeListener(maxHeight, maxWidth, popup) {
71 |       const updatePopupSize = createUpdatePopupSize(maxHeight, maxWidth, popup);
72 | 
73 |       // Call updatePopupHeight on window resize
74 |       window.addEventListener("resize", updatePopupSize);
75 | 
76 |       // Call updatePopupHeight on page load
77 |       updatePopupSize();
78 |             
79 |   }
80 |   
81 |   const undoRedoManager = new UndoRedoManager(20);
82 | 
83 |  </script>
84 | 


--------------------------------------------------------------------------------
/src/simbiotico.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 |     <title>jsMind</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
10 |       integrity="sha384-l06Plad51xhuxEwX9KBVJsB3YBeDeDhvs7QAa0vF9pUb+i2SA40QpPF55L6Rfrzq"
11 |       crossorigin="anonymous"
12 |     />
13 | 
14 |     <link rel="stylesheet" href="https://unpkg.com/jsmind@0.5.4/style/jsmind.css" integrity="sha384-1nTEMjWXLLPe1f1aBitnnwTmPw8N71MrZQQBMQn7ua9HnvdBZrPzhT1DMp2h+baG" crossorigin="anonymous">
15 | 
16 |     <link
17 |       rel="stylesheet"
18 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
19 |       integrity="sha384-/frq1SRXYH/bSyou/HUp/hib7RVN1TawQYja658FEOodR/FQBKVqT9Ol+Oz3Olq5"
20 |       crossorigin="anonymous"
21 |     />
22 | 
23 |     <style type="text/css">
24 | 
25 | 
26 |                 li {
27 |                     margin-top: 2px;
28 |                     margin-bottom: 2px;
29 |                 }
30 |                 button {
31 |                     width: 140px;
32 |                 }
33 |                 select {
34 |                     width: 140px;
35 |                 }
36 |          .file_input {
37 |                     width: 100px;
38 |                 }
39 |                 button.sub {
40 |                     width: 100px;
41 |                 }
42 | 
43 |          body {
44 |       margin: 0; !important
45 |       padding: 0; !important
46 |       position: relative;
47 |       height: 100vh;
48 |       overflow: hidden;
49 |          }
50 |     </style>
51 | 
52 | <script src="https://unpkg.com/jsmind-simbiotico@0.5.6/js/jsmind.js" integrity="sha384-R5+m5beLoKFGYYfHYhJjZOFuYIfT3HUmn/8DwFvhVikHnGKsaBes0K45Zme67izm" crossorigin="anonymous"></script>
53 | <script src="https://unpkg.com/jsmind-simbiotico@0.5.6/js/jsmind.draggable-node.js" integrity="sha384-GFQFZXgSIVm6wgUddmRKVIMyPAd+6Bk2TuUXnwb6U0PUMThttsKrAET9K/JawGTN" crossorigin="anonymous"></script>
54 |     
55 | 
56 |   </head>
57 |   <body>
58 |     @@include('./partials/mindmap.html')
59 |     @@include('./partials/utils.html')
60 |     @@include('./partials/help-popup.html')
61 |     @@include('./partials/alert-popup.html')
62 |     @@include('./partials/login-popup.html')
63 |     @@include('./partials/settings-popup.html')
64 |     @@include('./partials/chat-popup.html')
65 |   </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------