ui-message.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 UI_MESSAGE_HTML(): string {
  return `<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8">
<title>ui/message</title>
${sharedStyles()}
</head><body>
  <div class="card">
    <h2>Send a Message</h2>
    <textarea id="msgInput" rows="3" placeholder="Type a message to send to chat…"
      class="textarea w-full">Summarize this conversation so far.</textarea>
    <div class="flex gap-2 flex-wrap mt-2">
      <button class="btn-primary" onclick="sendMsg()">Send to Chat</button>
    </div>
    <div class="flex gap-2 flex-wrap mt-2">
      <button onclick="quickSend('What tools are available?')">Ask tools</button>
      <button onclick="quickSend('Thanks, that looks great!')">Say thanks</button>
    </div>
    <pre id="result" class="mt-3">No message sent yet.</pre>
  </div>
  <script>
${rpcClientScript()}

${applyHostContextScript()}

${messageHandlerScript()}

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

    function quickSend(text) {
      document.getElementById('msgInput').value = text;
      sendMsg();
    }

    async function sendMsg() {
      const text = document.getElementById('msgInput').value.trim();
      if (!text) return;
      const el = document.getElementById('result');
      el.textContent = 'Sending…';
      try {
        await request('ui/message', {
          role: 'user',
          content: [{ type: 'text', text }]  // ✅ array
        });
        el.textContent = '✅ Message sent: "' + text + '"';
      } catch (err) {
        el.textContent = '❌ Error: ' + JSON.stringify(err);
      }
    }
  <\/script>
</body></html>`;
}