Add conversation system message

internal/service/static/main.js

@@ -83,6 +83,7 @@ class Odidere {
     this._currentRun = null;
     this.currentController = null;
     this.totalTokens = 0;
+    this.systemMessage = '';
 
     // Attachments & location
     this.attachments = [];
@@ -122,6 +123,8 @@ class Odidere {
 
   init() {
     this.conversation.load();
+    this.systemMessage = localStorage.getItem(SYSTEM_MESSAGE_KEY) || '';
+    this.renderer.renderSystemMessage(this.systemMessage);
     if (this.conversation.size > 0) {
       this.renderer.renderMessages(this.conversation.getActivePath());
     }
@@ -172,6 +175,8 @@ class Odidere {
     this.conversation.clear();
     this.renderer.setAutoScroll(true);
     this.renderer.clearChat();
+    this.systemMessage = localStorage.getItem(SYSTEM_MESSAGE_KEY) || '';
+    this.renderer.renderSystemMessage(this.systemMessage);
     this.clearAttachments();
     this.clearLocation();
     this.$textInput.value = '';
@@ -628,9 +633,8 @@ class Odidere {
 
         const { provider, model } = this.settings.getModel();
         const payload = { messages, provider, model };
-        const systemMessage = localStorage.getItem(SYSTEM_MESSAGE_KEY);
-        if (systemMessage) {
-          payload.system_message = systemMessage;
+        if (this.systemMessage) {
+          payload.system_message = this.systemMessage;
         }
         const maxTurns = this._getMaxTurns();
         if (maxTurns > 0) {
@@ -1342,10 +1346,67 @@ class Odidere {
   // ====================
 
   async _openEdit(messageId, field, toolCallId) {
+    if (messageId === 'system') {
+      const saved = await this._openSystemEdit();
+      if (saved) {
+        this.renderer.reRenderSystemMessage(this.systemMessage);
+      }
+      return;
+    }
     const saved = await this.editModal.open(messageId, field, toolCallId);
     if (saved) this.renderer.reRenderActivePath();
   }
 
+  async _openSystemEdit() {
+    return new Promise((resolve) => {
+      const $tpl = this.document.getElementById('tpl-edit-modal');
+      if (!$tpl) return resolve(false);
+
+      const $modal = $tpl.content.cloneNode(true).firstElementChild;
+      const $overlay = this.document.createElement('div');
+      $overlay.className = 'modal-overlay';
+      $overlay.appendChild($modal);
+
+      $modal.querySelector('h2').textContent = 'Edit System Message';
+
+      const textarea = $modal.querySelector('#edit-textarea');
+      textarea.value = this.systemMessage || '';
+
+      const saveBtn = $modal.querySelector('#edit-save');
+      const closeBtn = $modal.querySelector('.modal__close');
+
+      const close = () => {
+        $overlay.remove();
+        this.document.removeEventListener('keydown', handleEscape);
+        resolve(false);
+      };
+
+      const save = () => {
+        const newText = textarea.value.trim();
+        const settingsDefault = localStorage.getItem(SYSTEM_MESSAGE_KEY) || '';
+        this.systemMessage = newText || settingsDefault;
+        $overlay.remove();
+        this.document.removeEventListener('keydown', handleEscape);
+        resolve(true);
+      };
+
+      closeBtn.addEventListener('click', close);
+      saveBtn.addEventListener('click', save);
+
+      $overlay.addEventListener('click', (e) => {
+        if (e.target === $overlay) close();
+      });
+
+      const handleEscape = (e) => {
+        if (e.key === 'Escape') close();
+      };
+      this.document.addEventListener('keydown', handleEscape);
+
+      this.document.body.appendChild($overlay);
+      textarea.focus();
+    });
+  }
+
   // ====================
   // STOP CONVERSATION
   // ====================