Add user defined system message

internal/service/templates/static/modal/settings.gohtml

@@ -0,0 +1,83 @@
+{{ define "modal/settings" }}
+  <div class="settings-overlay" id="settings-overlay">
+    <div class="settings-panel" role="dialog" aria-modal="true"
+         aria-labelledby="settings-title">
+      <div class="settings-panel__header">
+        <h2 class="settings-panel__title" id="settings-title">Settings</h2>
+        <button
+          type="button"
+          class="footer__toolbar-btn"
+          id="settings-close"
+          aria-label="Close settings"
+        >
+          <svg class="icon"><use href="/static/icons.svg#close"></use></svg>
+        </button>
+      </div>
+
+      <div class="settings-tabs" role="tablist">
+        <button
+          type="button"
+          class="settings-tab active"
+          role="tab"
+          data-tab="model-voice"
+          aria-selected="true"
+          aria-controls="panel-model-voice"
+        >Model &amp; Voice</button>
+        <button
+          type="button"
+          class="settings-tab"
+          role="tab"
+          data-tab="system-message"
+          aria-selected="false"
+          aria-controls="panel-system-message"
+        >System Message</button>
+      </div>
+
+      <div class="settings-tab-panels">
+        <div
+          class="settings-tab-panel active"
+          role="tabpanel"
+          data-tab-panel="model-voice"
+          id="panel-model-voice"
+          aria-labelledby="tab-model-voice"
+        >
+          <label class="settings-label" for="model">Model</label>
+          <select id="model" class="settings-select" aria-label="Model">
+            <option value="" disabled selected>Loading...</option>
+          </select>
+
+          <label class="settings-label" for="voice">Voice</label>
+          <select id="voice" class="settings-select" aria-label="Voice">
+            <option value="" disabled selected>Loading...</option>
+          </select>
+        </div>
+
+        <div
+          class="settings-tab-panel"
+          role="tabpanel"
+          data-tab-panel="system-message"
+          id="panel-system-message"
+          aria-labelledby="tab-system-message"
+          hidden
+        >
+          <label class="settings-label" for="system-message-input">
+            System Message
+          </label>
+          <textarea
+            id="system-message-input"
+            class="settings-textarea"
+            rows="8"
+            placeholder="Enter system message..."
+          ></textarea>
+          <div class="settings-save-row">
+            <button
+              type="button"
+              class="settings-save-btn"
+              id="save-system-message"
+            >Save</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{{ end }}