cpee 2.1.134 → 2.1.136

data/cockpit/js/llm.js

@@ -1,19 +1,14 @@
-var last_generated_model = undefined;
-var last_model_before_generation =undefined;
-var default_llm = "gemini-2.5-flash-lite";
-
-function clean_llm_ui(status) { //{{{
-  status.empty();
-  status.removeClass('error').removeClass('success');
-  status.removeClass('error').removeClass('error');
-  status.removeClass('error').removeClass('loading');
-} //}}}
+var last_model_before_generation = undefined;
+var default_llm = "gemini-3.1-flash-lite";
 
-function querying_llm_ui(status,llm,what) { //{{{
-  let myllm = llm.find(":selected").val();
-  if (myllm === undefined){ myllm = default_llm; }
-  status.addClass('loading');
-  status.text('Agent ' + what + ' (' + myllm + ')');
+function xhr_error(xhr) { //{{{
+  if (xhr.responseJSON && xhr.responseJSON.error) {
+    return xhr.responseJSON.error;
+  }
+  if (xhr.responseText) {
+    return 'LLM Service not reachable (request status ' + xhr.status + ')!'
+  }
+  return xhr.statusText;
 } //}}}
 
 function add_prompt(input,content) { //{{{
@@ -25,6 +20,104 @@ function add_prompt(input,content) { //{{{
   document.execCommand('insertText', false, content);
 } //}}}
 
+function call_llm_service_intent(input, llm, llms, dslx, messages, documents, depth=0) { //{{{
+  let def = new $.Deferred();
+
+  (async () => {
+    try {
+      const intent_form = new FormData();
+      intent_form.append("user_input", new Blob([input], { type: "text/plain" }));
+      intent_form.append("llm", new Blob([llm], { type: "text/plain" }));
+
+      let intent = await $.ajax({
+        url: $('body').attr('current-llm-service') + '/intent/',
+        data: intent_form,
+        contentType: false,
+        processData: false,
+        cache: false,
+        method: 'POST'
+      });
+
+      if (intent === null) {
+        // no intent matched at all
+        ui.success(llms,"Your request seems to be not about process modelling (or anything covered by the installed plugins).");
+        def.resolve(null);
+        return;
+      }
+
+      if (typeof intent === 'object' && Object.keys(intent).length === 0) {
+        // no specific plugin matched: proceed normally with the original input
+        def.resolve(input);
+        return;
+      }
+
+      const call_form = new FormData();
+      call_form.append("user_input", new Blob([input], { type: "text/plain" }));
+      call_form.append("llm", new Blob([llm], { type: "text/plain" }));
+      (intent.required_input || []).forEach(function(name){
+        if (name === 'model') {
+          call_form.append("dslx", new Blob([dslx], { type: "text/xml" }));
+        } else if (name === 'documents') {
+          call_form.append("documents", new Blob([JSON.stringify(documents)], { type: "application/json" }));
+        } else if (name === 'messages') {
+          call_form.append("messages", new Blob([messages], { type: "text/plain" }));
+        }
+      });
+
+      let response;
+      console.log(intent.url);
+      try {
+        response = await $.ajax({
+          url: intent.url,
+          data: call_form,
+          cache: false,
+          contentType: false,
+          processData: false,
+          method: 'PUT'
+        });
+      } catch (xhr) {
+        let trimmed_url = intent.url.replace(/\/+$/, '');
+        ui.error(llms,"The intent plugin \'" + trimmed_url.substr(trimmed_url.lastIndexOf('/') + 1) + "\' is not working properly.");
+        def.resolve(null);
+        return;
+      }
+
+      let filled_output;
+      if (intent.output_template) {
+        filled_output = intent.output_template;
+        if (response !== null && typeof response === 'object') {
+          Object.keys(response).forEach(function(key){
+            filled_output = filled_output.split('%%%' + key).join(response[key]);
+          });
+        } else {
+          filled_output = filled_output.replace('%%%', response);
+        }
+      } else {
+        filled_output = response;
+      }
+
+      if (intent.output == 'chat') {
+        ui.success(llms,filled_output);
+        def.resolve(null);
+      } else if (intent.output == 'reintent' && filled_output !== input && depth < 3) {
+        // repeat the process of looking for a plugin/intent, using the filled output as the new input
+        // (at most 3 times, to avoid endless plugin loops)
+        call_llm_service_intent(filled_output,llm,llms,dslx,messages,documents,depth + 1).done((result) => {
+          def.resolve(result);
+        }).fail((xhr) => {
+          def.reject(xhr);
+        });
+      } else {
+        def.resolve(filled_output);
+      }
+    } catch (xhr) {
+      def.reject(xhr);
+    }
+  })();
+
+  return def.promise();
+} //}}}
+
 function call_llm_service_model(dslx,input,llm,prompt_type) { //{{{
   const formData = new FormData();
   const blob1 = new Blob([dslx], { type: "text/xml" });
@@ -112,7 +205,7 @@ function call_llm_service_validation(model,llm) { //{{{
   return def.promise();
 } //}}}
 
-function call_llm_text_service(status,prompt,llms,action) { //{{{
+function call_llm_text_service(prompt,llms,action) { //{{{
   let myllm = llms.find(":selected").val();
   if (myllm === undefined){ myllm = default_llm; }
   const info = save.attributes_raw.info;
@@ -140,16 +233,256 @@ function call_llm_text_service(status,prompt,llms,action) { //{{{
         link.href = dataUri;
         link.click();
       };
-      last_model_before_generation = save['dslx'];
-      set_success(status,data.status);
+      ui.success(llms,data.status);
     },
     error:  function(xhr, stat, data) {
-      set_error(status,xhr.responseJSON.error);
+      ui.error(llms,xhr_error(xhr));
     }
   });
 } //}}}
 
+function diff_summary_rec(el, nodes) { //{{{
+  function hash_str(str) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < str.length; i++) {
+      h ^= str.charCodeAt(i);
+      h = Math.imul(h, 0x01000193);
+    }
+    return (h >>> 0).toString(36);
+  }
+
+  function serialize_clean(node) {
+    let clone = node.cloneNode(true);
+    (function strip(n){
+      for (let i = n.childNodes.length - 1; i >= 0; i--) {
+        let c = n.childNodes[i];
+        if (c.nodeType === 3 && /^\s*$/.test(c.nodeValue)) { n.removeChild(c); }
+        else if (c.nodeType === 1) { strip(c); }
+      }
+    })(clone);
+    return new XMLSerializer().serializeToString(clone);
+  }
+
+  $(el).children().each(function(){
+    let child = this;
+    let id = child.getAttribute('id');
+    let eid = child.getAttribute('eid');
+    if (id !== null) {
+      let fields = {};
+      for (let i = 0; i < child.attributes.length; i++) {
+        fields[child.attributes[i].name] = child.attributes[i].value;
+      }
+      $(child).children().each(function(){
+        let name = this.localName || this.nodeName;
+        if (name === 'parameters') {
+          $(this).children().each(function(){
+            let pname = this.localName || this.nodeName;
+            fields[pname] = serialize_clean(this);
+          });
+        } else {
+          fields[name] = serialize_clean(this);
+        }
+      });
+      nodes.push({ id: id, type: 'task', fingerprint: hash_str(serialize_clean(child)), fields: fields });
+    } else if (eid !== null) {
+      let fields = {};
+      for (let i = 0; i < child.attributes.length; i++) {
+        fields[child.attributes[i].name] = child.attributes[i].value;
+      }
+      let attr_parts = Object.keys(fields).sort().map(function(k){ return k + '=' + fields[k]; });
+      let child_parts = [];
+      $(child).children().each(function(){
+        let name = this.localName || this.nodeName;
+        if (name.charAt(0) === '_') {
+          let serialized = serialize_clean(this);
+          fields[name] = serialized;
+          child_parts.push(serialized);
+        }
+      });
+      let branch_names = ['parallel_branch','alternative','otherwise'];
+      let tag_name = child.localName || child.nodeName;
+      let type = branch_names.indexOf(tag_name) !== -1 ? 'branch' : 'gateway';
+      nodes.push({ id: eid, type: type, fingerprint: hash_str(attr_parts.concat(child_parts).join('|')), fields: fields });
+    }
+    diff_summary_rec(child, nodes);
+  });
+} //}}}
+function diff_summary(model_old, model_new) { //{{{
+  // depth_first traverse both model_old and model_new:
+  // all elements with an attribute @id are tasks
+  // all elements with an attribute @eid are a gateway, except parallel_branch, alternative and otherwise elements, which are a branch
+  // these are the ones included in the list that results from traversal
+  // while traversing:
+  // for any element that has an @id calculate a fingerprint that contains the whole content
+  // for any element that has an @eid calculate a fingerprint for all its attributes and direct children elements whos name starts with a _
+
+  // after traversal: compare the old_nodes with the new_nodes list by their ids and types (task, gateway)
+  // if nodes are in the old_nodes but not in the new_nodes they have been deleted
+  // if nodes are in the new_nodes but not in the old_nodes they have been added
+  // if nodes of the old_nodes are in a new position in the new_nodes they have been moved
+  // if the fingerprint of nodes is not identical, their parameters have been changed
+  // if the fingerprint of nodes is not identical, investigate which children or attributes of the nodes have differnt text content
+
+  // collect all the changes
+
+  // if more that 3 nodes are affected by any change summarize, combining types that share the same operation: "7 tasks, 3 gateways, and 2 branches have been added, 1 task has been changed"
+  // if 3 or less nodes are affected name them "Tasks a3, a2 and a1 have been moved. Parameters of node a1 have been changed."
+  // More examples: Task a1 had the attribute "color" changed.
+  // More examples: Task a1 had its "color" changed.
+  // More examples: Task a1 had its "parameters" changed.
+
+  // the function returns the textual summary of the differences.
+
+  function to_root(model) {
+    if (typeof model === 'string') { return $X(model).get(0); }
+    if (model && model.jquery) { return model.get(0); }
+    return model;
+  }
+
+  let old_nodes = [];
+  let new_nodes = [];
+  diff_summary_rec(to_root(model_old), old_nodes);
+  diff_summary_rec(to_root(model_new), new_nodes);
+
+  let old_index = {};
+  old_nodes.forEach(function(n,i){ old_index[n.type + ':' + n.id] = { pos: i, node: n }; });
+  let new_index = {};
+  new_nodes.forEach(function(n,i){ new_index[n.type + ':' + n.id] = { pos: i, node: n }; });
+
+  let added = [];
+  let deleted = [];
+  let moved = [];
+  let changed = [];
+
+  old_nodes.forEach(function(n){
+    if (!(n.type + ':' + n.id in new_index)) { deleted.push({ id: n.id, type: n.type }); }
+  });
+  new_nodes.forEach(function(n){
+    if (!(n.type + ':' + n.id in old_index)) { added.push({ id: n.id, type: n.type }); }
+  });
+
+  let common_old_order = old_nodes.filter(function(n){ return (n.type + ':' + n.id) in new_index; }).map(function(n){ return n.type + ':' + n.id; });
+  let common_new_order = new_nodes.filter(function(n){ return (n.type + ':' + n.id) in old_index; }).map(function(n){ return n.type + ':' + n.id; });
+  let new_pos_of = {};
+  common_new_order.forEach(function(key,i){ new_pos_of[key] = i; });
+
+  // longest increasing subsequence of new-positions (in old order): the nodes that
+  // stay in relative order across both versions, i.e. did NOT move. Everything else
+  // did move. This avoids flagging every node between an actually-moved node's old
+  // and new position as "moved" too.
+  let seq = common_old_order.map(function(key){ return new_pos_of[key]; });
+  let dp = new Array(seq.length).fill(1);
+  let prev = new Array(seq.length).fill(-1);
+  let best = -1;
+  for (let i = 0; i < seq.length; i++) {
+    for (let j = 0; j < i; j++) {
+      if (seq[j] < seq[i] && dp[j] + 1 > dp[i]) {
+        dp[i] = dp[j] + 1;
+        prev[i] = j;
+      }
+    }
+    if (best === -1 || dp[i] > dp[best]) { best = i; }
+  }
+  let in_lis = new Array(seq.length).fill(false);
+  for (let k = best; k !== -1; k = prev[k]) { in_lis[k] = true; }
+
+  common_old_order.forEach(function(key,i){
+    let old_entry = old_index[key];
+    let new_entry = new_index[key];
+    let id = old_entry.node.id;
+    let type = old_entry.node.type;
+    if (!in_lis[i]) { moved.push({ id: id, type: type }); }
+    if (old_entry.node.fingerprint !== new_entry.node.fingerprint) {
+      let old_fields = old_entry.node.fields;
+      let new_fields = new_entry.node.fields;
+      let field_names = Array.from(new Set(Object.keys(old_fields).concat(Object.keys(new_fields))));
+      let diff_fields = field_names.filter(function(f){ return old_fields[f] !== new_fields[f]; });
+      changed.push({ id: id, type: type, fields: diff_fields });
+    }
+  });
+
+  // when the llm fucks up the ids or eids, this result is fucked as well. And
+  // by fucking up i mean, omitting the ids, or changing them all. Oh well.
+  // Better than nothing.
+
+  let affected = new Set(added.concat(deleted,moved,changed).map(function(e){ return e.type + ':' + e.id; }));
+  if (affected.size === 0) {
+    return "No changes to the model have been made.";
+  }
+
+  // constructing the output
+  function join_names(names) {
+    if (names.length <= 1) { return names.join(''); }
+    if (names.length === 2) { return names[0] + ' and ' + names[1]; }
+    return names.slice(0,-1).join(', ') + ' and ' + names[names.length-1];
+  }
+
+  function type_word(type, count) {
+    if (type === 'task') { return count === 1 ? 'task' : 'tasks'; }
+    if (type === 'branch') { return count === 1 ? 'branch' : 'branches'; }
+    return count === 1 ? 'gateway' : 'gateways';
+  }
+
+  const categories = ['added','deleted','moved','changed'];
+  const lists = { added: added, deleted: deleted, moved: moved, changed: changed };
+
+  if (affected.size > 3) {
+    const action = { added: 'been added', deleted: 'been deleted', moved: 'been moved', changed: 'been changed' };
+    function join_oxford(items) {
+      if (items.length <= 1) { return items.join(''); }
+      if (items.length === 2) { return items[0] + ' and ' + items[1]; }
+      return items.slice(0,-1).join(', ') + ', and ' + items[items.length-1];
+    }
+    let parts = [];
+    categories.forEach(function(c){
+      let type_counts = ['task','gateway','branch'].map(function(t){
+        return { type: t, count: lists[c].filter(function(e){ return e.type === t; }).length };
+      }).filter(function(tc){ return tc.count > 0; });
+      if (type_counts.length === 0) { return; }
+      let pieces = type_counts.map(function(tc){ return tc.count + ' ' + type_word(tc.type, tc.count); });
+      let total = type_counts.reduce(function(sum,tc){ return sum + tc.count; }, 0);
+      let verb = total === 1 ? 'has' : 'have';
+      parts.push(join_oxford(pieces) + ' ' + verb + ' ' + action[c]);
+    });
+    let text = parts.join(', ') + '.';
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  } else {
+    let sentences = [];
+    const action = { added: 'added', deleted: 'deleted', moved: 'moved', changed: 'changed' };
+    categories.forEach(function(c){
+      ['task','gateway','branch'].forEach(function(t){
+        let entries = lists[c].filter(function(e){ return e.type === t; });
+        if (entries.length === 0) { return; }
+        if (c === 'changed' && entries.length === 1) {
+          let e = entries[0];
+          let subj = e.type === 'task' ? 'Task ' : (e.type === 'branch' ? 'Branch ' : 'Gateway ');
+          let field_text;
+          if (e.fields.length === 0) {
+            field_text = '"parameters"';
+          } else {
+            field_text = join_names(e.fields.map(function(f){ return '"' + f + '"'; }));
+          }
+          sentences.push(subj + e.id + ' had its ' + field_text + ' changed.');
+          return;
+        }
+        let names = join_names(entries.map(function(e){ return e.id; }));
+        let subj = type_word(t, entries.length);
+        subj = subj.charAt(0).toUpperCase() + subj.slice(1) + ' ';
+        let verb = entries.length === 1 ? ' has been ' : ' have been ';
+        sentences.push(subj + names + verb + action[c] + '.');
+      });
+    });
+    return sentences.join(' ');
+  }
+} //}}}
+
 function set_cpee_model(cpee_xml,expositions=[]) { //{{{
+  let root = $X(cpee_xml).get(0);
+  if (root.childElementCount === 0) {
+    root.textContent = '';
+    cpee_xml = new XMLSerializer().serializeToString(root);
+  }
+
   const form_data = new FormData();
   const blob = new Blob([cpee_xml], { type: "text/xml" });
   form_data.append("dslx", blob);
@@ -159,42 +492,24 @@ function set_cpee_model(cpee_xml,expositions=[]) { //{{{
     form_data.append("exposition", blobi);
   }
 
-  $.ajax({
+  return $.ajax({
     type: "PUT",
     url: url + "/properties/dslx/",
     contentType: false,
     processData: false,
-    data: form_data
+    data: form_data,
+    error: report_model_failure
   });
 } //}}}
 
-function set_success(status,success_text) { //{{{
-  status.text(success_text);
-  status.addClass('success');
-  status.removeClass('loading');
-  status.removeClass('error');
-} //}}}
-
-function set_error(status,error_text) { //{{{
-  status.text(error_text);
-  status.addClass('error');
-  status.removeClass('success');
-  status.removeClass('loading');
-} //}}}
-
 function empty_model(){ //{{{
+  details_leave(false);
   set_cpee_model('<description xmlns="http://cpee.org/ns/description/1.0" xmlns:a="http://cpee.org/ns/annotation/1.0"/>',["Reset Context!"]);
   $('#dat_details').empty();
 } //}}}
-function load_last_generated_model() { //{{{
-  set_cpee_model(last_generated_model === undefined ? save['dslx'] : last_generated_model);
-} //}}}
-function load_last_generated_model() { //{{{
-  set_cpee_model(last_generated_model === undefined ? save['dslx'] : last_generated_model);
-} //}}}
 
 function load_last_model_before_generation() { //{{{
-  set_cpee_model(last_model_before_generation === undefined ? save['dslx'] : last_model_before_generation);
+  return set_cpee_model(last_model_before_generation === undefined ? save['dslx'] : last_model_before_generation);
 } //}}}
 
 function load_file_content(files) { //{{{
@@ -204,23 +519,26 @@ function load_file_content(files) { //{{{
   }
   var reader = new FileReader();
   reader.onload = function(){
-    clean_llm_ui($('#status'));
-    add_prompt('prompt',reader.result);
+    ui.clean();
+    add_prompt($('#prompt'),reader.result);
   }
   reader.onerror = function(){ console.log("reader error"); }
   reader.onabort = function(){ console.log("reader abort"); }
   reader.readAsText(files[0]);
 } //}}}
 
-function create(status,prompt,llms,generation,mode) {
-  clean_llm_ui(status);
+function create(prompt,llms,generation,mode) {
+  ui.clean();
 
   // Imagine I want to implement a smart home system to control the lights in
   // the dining room.  Depending on the current lighting conditions, the
   // system would automatically adjust the brightness—either increasing or
   // reducing it as needed—and turn the lights off completely at night.
 
-  let input = prompt.text(); prompt.empty();
+  let input = prompt.text();
+  if (input.trim() === '') { return; }
+  prompt.empty();
+  ui.input(llms,input);
   let myllm = llms.find(":selected").val();
   let prompt_type = mode.find(":selected").val();
   let gen = generation.find(":selected").val();
@@ -234,70 +552,88 @@ function create(status,prompt,llms,generation,mode) {
     if (gen == 'dataflow') { prompt_type = 'adapt_endpoints'; }
   }
 
-  querying_llm_ui(status,llms,'creates model');
-  call_llm_service_model(save['dslx'],input,myllm,prompt_type).done((data) => {
-    let expositions = ["<!-- Input CPEE-Tree -->\n"+data.input_cpee,"# User Input:\n"+data.user_input,"# Used LLM:\n"+data.used_llm,"%% Input Intermediate\n"+data.input_intermediate,"%% Output Intermediate\n"+data.output_intermediate,"<!-- Output CPEE-Tree -->\n"+data.output_cpee];
-    if (prompt_type == 'adapt_endpoints') {
-      let testset = $X(data.output_cpee);
-      let model = $('> dslx > description',testset);
-      let endpoints = $('> endpoints',testset);
-      $.ajax({
-        type: "PATCH",
-        url: url + "/properties/endpoints/",
-        contentType: 'text/xml',
-        headers: {
-          'Content-ID': 'endpoints',
-          'CPEE-Event-Source': myid
-        },
-        data: endpoints.serializePrettyXML()
-      });
-
-      last_model_before_generation = save['dslx'];
-      last_generated_model = model.serializePrettyXML();
-      set_cpee_model(model.serializePrettyXML(),expositions);
-      set_success(status,data.status);
-    } else {
-      if (gen == "dataflow") {
-        querying_llm_ui(status,llms,'selects endpoints and calculates dataflow');
-        call_llm_service_dataflow($X(data.output_cpee).serializePrettyXML(),myllm).done((data) => {
-          let url = $('body').attr('current-instance');
-          $.ajax({
-            type: "PATCH",
-            url: url + "/properties/endpoints/",
-            contentType: 'text/xml',
-            headers: {
-              'Content-ID': 'endpoints',
-              'CPEE-Event-Source': myid
-            },
-            data: data.endpoints
-          });
+  ui.querying(llms,'analyses user intent');
+
+  let documents = save['documents'] ? save['documents'].save_object() : {};
+  let history_promise = (typeof($('body').attr('current-document-store')) != "undefined" && documents && ('chat_history' in documents))
+    ? do_parameters_get_document_exec('chat_history',10)
+    : $.Deferred().resolve([]).promise();
+
+  history_promise.then(function(history){
+    let messages = JSON.stringify(history);
+    call_llm_service_intent(input,myllm,llms,save['dslx'],messages,documents).done((piped) => {
+      console.log(piped);
+      if (piped !== null) {
+        ui.querying(llms,'creates model');
+        call_llm_service_model(save['dslx'],piped,myllm,prompt_type).done((data) => {
+          let expositions = ["<!-- Input CPEE-Tree -->\n"+data.input_cpee,"# User Input:\n"+data.user_input,"# Used LLM:\n"+data.used_llm,"%% Input Intermediate\n"+data.input_intermediate,"%% Output Intermediate\n"+data.output_intermediate,"<!-- Output CPEE-Tree -->\n"+data.output_cpee];
+          if (prompt_type == 'adapt_endpoints') {
+            let testset = $X(data.output_cpee); //{{{
+            let model = $('> dslx > description',testset);
+            let endpoints = $('> endpoints',testset);
+            $.ajax({
+              type: "PATCH",
+              url: url + "/properties/endpoints/",
+              contentType: 'text/xml',
+              headers: {
+                'Content-ID': 'endpoints',
+                'CPEE-Event-Source': myid
+              },
+              data: endpoints.serializePrettyXML()
+            });
 
-          querying_llm_ui(status,llms,'validates dataflow');
-          expositions.push("# Dataflow:\n"+data.dataflow);
-          call_llm_service_validation($X(data.output_cpee).serializePrettyXML(),myllm).done((data) => {
-            // for undo button
             last_model_before_generation = save['dslx'];
-            last_generated_model = data.output_cpee;
-            set_cpee_model($X(data.output_cpee).serializePrettyXML(),expositions);
-            set_success(status,data.status);
-          });
-
+            set_cpee_model(model.serializePrettyXML(),expositions);
+
+            ui.success(llms,diff_summary(last_model_before_generation,model)); //}}}
+          } else {
+            if (gen == "dataflow") {
+              ui.querying(llms,'selects endpoints and calculates dataflow'); //{{{
+              call_llm_service_dataflow($X(data.output_cpee).serializePrettyXML(),myllm).done((data) => {
+                let url = $('body').attr('current-instance');
+                $.ajax({
+                  type: "PATCH",
+                  url: url + "/properties/endpoints/",
+                  contentType: 'text/xml',
+                  headers: {
+                    'Content-ID': 'endpoints',
+                    'CPEE-Event-Source': myid
+                  },
+                  data: data.endpoints
+                });
+
+                ui.querying(llms,'validates dataflow');
+                expositions.push("# Dataflow:\n"+data.dataflow);
+                call_llm_service_validation($X(data.output_cpee).serializePrettyXML(),myllm).done((data) => {
+                  // for undo button
+                  last_model_before_generation = save['dslx'];
+                  set_cpee_model($X(data.output_cpee).serializePrettyXML(),expositions);
+                  ui.success(llms,diff_summary(last_model_before_generation,data.output_cpee));
+                })
+                .fail((xhr) => {
+                  ui.error(llms,xhr_error(xhr));
+                });
+
+              })
+              .fail((xhr) => {
+                ui.error(llms,xhr_error(xhr));
+              }); //}}}
+            } else if (gen == "model") {
+              last_model_before_generation = save['dslx']; //{{{
+              set_cpee_model(data.output_cpee,expositions);
+              ui.success(llms,diff_summary(last_model_before_generation,data.output_cpee)); //}}}
+            } else {
+              ui.success(llms,"Successfully done nothing");
+            }
+          }
         })
         .fail((xhr) => {
-          set_error(status,xhr.responseJSON.error);
+          ui.error(llms,xhr_error(xhr));
         });
-      } else if (gen == "model") {
-        last_model_before_generation = save['dslx'];
-        last_generated_model = data.output_cpee;
-        set_cpee_model(data.output_cpee,expositions);
-        set_success(status,data.status);
-      } else {
-        set_success(status,"Successfully done nothing");
       }
-    }
-  })
-  .fail((xhr) => {
-    set_error(status,xhr.responseJSON.error);
+    }).fail((xhr) => {
+      ui.error(llms,xhr_error(xhr));
+    });
   });
 }
 
@@ -309,32 +645,37 @@ $(document).ready(async function() { //{{{
   let mode_active = await $.get('css/mode_active.svg', 'xml').then(function(data) { return $(data.documentElement); });
 
   $(document).on('keydown','#prompt',function(e){
-    clean_llm_ui($('#status'));
+    ui.clean();
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      create($('#status'),$('#prompt'),$('#llms'),$('#generation'),$('#mode'));
+      create($('#prompt'),$('#llms'),$('#generation'),$('#mode'));
     }
   });
   $(document).on('click','#prompt_submit_button',function(e){
-    create($('#status'),$('#prompt'),$('#llms'),$('#generation'),$('#mode'));
+    create($('#prompt'),$('#llms'),$('#generation'),$('#mode'));
   });
   $(document).on('click','#prompt_reset_button',function(e){
-    clean_llm_ui($('#status'));
+    ui.clean();
     empty_model();
   });
   $(document).on('click','#generate_itext_button',function(e){
-    clean_llm_ui($('#status'));
-    querying_llm_ui($('#status'),$('#llms'),'thinks');
-    call_llm_text_service($('#status'),'prompt','#llms','file');
+    ui.clean();
+    ui.querying($('#llms'),'thinks');
+    call_llm_text_service($('#prompt'),$('#llms'),'file');
   });
   $(document).on('click','#generate_text_button',function(e){
-    clean_llm_ui($('#status'));
-    querying_llm_ui($('#status'),$('#llms'),'thinks');
-    call_llm_text_service($('#status'),$('#prompt'),$('#llms'),'show');
+    ui.clean();
+    ui.querying($('#llms'),'thinks');
+    call_llm_text_service($('#prompt'),$('#llms'),'show');
   });
   $(document).on('click','#prompt_undo_button',function(e){
-    clean_llm_ui($('#status'));
-    querying_llm_ui($('#status'),$('#llms'),'thinks');
-    load_last_model_before_generation();
+    ui.clean();
+    ui.input($('#llms'),'Undo');
+    ui.querying($('#llms'),'thinks');
+    load_last_model_before_generation().done(() => {
+      ui.success($('#llms'),'Previous model restored.');
+    }).fail((xhr) => {
+      ui.error($('#llms'),xhr_error(xhr));
+    });
   });
   $(document).on('click','#prompt_attach_button',function(e){
     document.getElementById('loadtxt').click();
@@ -389,4 +730,8 @@ $(document).ready(async function() { //{{{
     e.stopPropagation();
     load_file_content(e.originalEvent.dataTransfer.files);
   });
+
+  document.addEventListener('documents:loaded', function (e) {
+    ui.init();
+  }, { capture: false, once: true } );
 }); //}}}