update-model-context.ts

import { sharedStyles } from "../utils/shared-styles.js";
import { applyHostContextScript } from "../utils/apply-host-context.js";
import { messageHandlerScript } from "../utils/message-handler.js";
import { rpcClientScript } from "../utils/rpc-client.js";

export function UPDATE_MODEL_CONTEXT_HTML(): string {
  return `<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8">
<title>Update Model Context</title>
${sharedStyles()}
</head><body>
  <div class="card">
    <h2>Update Context</h2>
    <textarea id="ctxInput" rows="3" placeholder="Enter context text…"
      class="textarea w-full">The user prefers dark themes and metric units.</textarea>
    <div class="flex gap-2 flex-wrap mt-2">
      <button class="btn-primary" onclick="updateCtx()">Update Context</button>
      <button onclick="clearCtx()">Clear Context</button>
    </div>
    <pre id="result" class="mt-3">No context update sent yet.</pre>
  </div>

  <script>
${rpcClientScript()}

${applyHostContextScript()}

${messageHandlerScript()}

    request('ui/initialize', { protocolVersion: '2025-11-21' }).then((res) => {
      applyHostContext(res?.hostContext);
      notify('ui/notifications/initialized');
    });

    let historyCount = 0;

    async function updateCtx() {
      const text = document.getElementById('ctxInput').value.trim();
      if (!text) return;
      const el = document.getElementById('result');
      el.textContent = 'Sending…';
      try {
        await request('ui/update-model-context', {
          content: [{ type: 'text', text }]
        });
        el.textContent = '✅ Context updated successfully.';
      } catch (err) {
        el.textContent = '❌ Error: ' + JSON.stringify(err);
      }
    }

    async function clearCtx() {
      console.log('[update-model-context] CTA: Clear context');
      const el = document.getElementById('result');
      try {
        await request('ui/update-model-context', { content: [], structuredContent: {} });
        el.textContent = '✅ Context cleared.';
      } catch (err) {
        el.textContent = '❌ Error: ' + JSON.stringify(err);
      }
    }
  <\/script>
</body></html>`;
}