Function createMessageElement

codeclash/viewer/static/js/trajectory.js:119–175

(message, index)

}

function createMessageElement(message, index) {
  const messageBlock = document.createElement("div");
  messageBlock.className = `message-block ${message.role}`;

  const roleBadge = document.createElement("span");
  roleBadge.className = "message-role-badge";
  roleBadge.textContent =
    message.role.charAt(0).toUpperCase() + message.role.slice(1) + " #" + index;

  const messageContent = document.createElement("div");
  messageContent.className = "message-content";

  // Handle different content types.
  // mini-swe-agent v2 (tool-call) assistant messages keep the command in
  // extra.actions / tool_calls instead of in a ```bash block in the text, so they need
  // their own renderer. v1 messages have neither and fall through to the text paths below.
  const toolActions =
    message.extra && Array.isArray(message.extra.actions)
      ? message.extra.actions
      : [];
  const hasToolCalls =
    Array.isArray(message.tool_calls) && message.tool_calls.length > 0;
  if (toolActions.length > 0 || hasToolCalls) {
    messageContent.innerHTML = createToolCallContentHTML(message);
  } else if (typeof message.content === "string") {
    const lines = message.content.split("\n");
    if (lines.length <= 5) {
      // Show full content
      messageContent.innerHTML = createFullContentHTML(
        message.content,
        message.role,
      );
    } else {
      // Show preview with expand
      messageContent.innerHTML = createPreviewContentHTML(
        message.content,
        lines,
        message.role,
      );
    }
  } else if (Array.isArray(message.content)) {
    // Handle complex content (e.g., user messages with multiple parts)
    messageContent.innerHTML = createComplexContentHTML(message.content);
  } else {
    // Fallback
    messageContent.innerHTML = `<div class="message-content-full"><div class="message-text"><pre>${JSON.stringify(
      message.content,
      null,
      2,
    )}</pre></div></div>`;
  }

  messageBlock.appendChild(roleBadge);
  messageBlock.appendChild(messageContent);

  return messageBlock;
}