Function renderMessageHtml

web/lib/export/html.ts:13–69

(msg: Message, options: ExportOptions)

}

function renderMessageHtml(msg: Message, options: ExportOptions): string {
  const isUser = msg.role === "user";
  const isError = msg.status === "error";

  const roleClass = isUser ? "user" : isError ? "error" : "assistant";
  const roleLabel =
    msg.role.charAt(0).toUpperCase() + msg.role.slice(1);

  let contentHtml = "";

  if (typeof msg.content === "string") {
    contentHtml = `<p class="message-text">${escapeHtml(msg.content)}</p>`;
  } else {
    const parts: string[] = [];
    for (const block of msg.content) {
      if (block.type === "text") {
        parts.push(`<p class="message-text">${escapeHtml(block.text)}</p>`);
      } else if (block.type === "tool_use" && options.includeToolUse) {
        parts.push(`
          <details class="tool-block">
            <summary class="tool-summary">Tool: <code>${escapeHtml(block.name)}</code></summary>
            <pre class="tool-code">${escapeHtml(JSON.stringify(block.input, null, 2))}</pre>
          </details>`);
      } else if (block.type === "tool_result" && options.includeToolUse) {
        const raw =
          typeof block.content === "string"
            ? block.content
            : extractTextContent(block.content);
        const text =
          !options.includeFileContents && raw.length > 500
            ? raw.slice(0, 500) + "\n…[truncated]"
            : raw;
        parts.push(`
          <details class="tool-block${block.is_error ? " tool-error" : ""}">
            <summary class="tool-summary">Tool Result${block.is_error ? " (error)" : ""}</summary>
            <pre class="tool-code">${escapeHtml(text)}</pre>
          </details>`);
      }
    }
    contentHtml = parts.join("\n");
  }

  const timestampHtml = options.includeTimestamps
    ? `<span class="message-time">${new Date(msg.createdAt).toLocaleString()}</span>`
    : "";

  return `
    <div class="message message--${roleClass}">
      <div class="message-header">
        <span class="message-role">${escapeHtml(roleLabel)}</span>
        ${timestampHtml}
      </div>
      <div class="message-content">
        ${contentHtml}
      </div>
    </div>`;
}