@progress/kendo-ui/migrations/2025-3-812/css/chat-rendering-changes.cjs

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

'use strict';

const fs = require('fs');
const path = require('path');
const { applyChatFileClassRenames } = require('../_shared.cjs');

const aiInstructionsFileClasses = `The Chat file attachment CSS classes were renamed in Kendo UI 2025.3.825 as part of the Chat redesign.

Before:
  .k-chat-file { ... }
  .k-chat-file-info { ... }
  .k-chat-file-name { ... }
  .k-chat-file-size { ... }

After:
  .k-file-box { ... }
  .k-file-info { ... }
  .k-file-name { ... }
  .k-file-size { ... }

Action: This codemod renames these classes automatically.`;

const aiInstructionsAvatars = `The k-avatars class was removed from the k-message-list element in Kendo UI 2025.3.825.

Before:
  .k-message-list.k-avatars { padding-left: 40px; }

After:
  .k-message-list { padding-left: 40px; }

Action: Remove any CSS rules or selectors that target .k-message-list.k-avatars or rely on k-avatars being present on k-message-list.`;

const aiInstructionsFirstLast = `The k-first and k-last classes were removed from the k-message element in Kendo UI 2025.3.825.

Before:
  .k-message.k-first { margin-top: 8px; }
  .k-message.k-last { margin-bottom: 4px; }

After:
  (no equivalent — use :first-child / :last-child pseudo-selectors if needed)

Action: Remove any CSS rules or test assertions that target .k-message.k-first or .k-message.k-last.`;

const aiInstructionsChatHeader = `The Chat header no longer uses the AppBar component (k-appbar / k-appbar-light) in Kendo UI 2025.3.825. It now renders as a div with the k-chat-header class.

Before:
  .k-chat .k-appbar { background: #fff; }
  .k-chat .k-appbar-light { ... }

After:
  .k-chat .k-chat-header { background: #fff; }

Action: Update any CSS rules targeting .k-appbar or .k-appbar-light within .k-chat to target .k-chat-header instead.`;

const aiInstructionsMessageTime = `The k-message-time element is now wrapped in a k-message-info container in Kendo UI 2025.3.825.

Before:
  .k-message > .k-message-time { font-size: 11px; }

After:
  .k-message-info > .k-message-time { font-size: 11px; }
  (k-message-info is a sibling of k-chat-bubble inside k-message)

Action: Update any CSS descendant selectors targeting .k-message-time to account for the new .k-message-info wrapper.`;

const aiInstructionsMessageReference = `The k-message-reference element was moved in Kendo UI 2025.3.825. It is now a sibling of k-chat-bubble-text inside k-bubble-content, rather than a child of k-chat-bubble-text.

Before:
  .k-chat-bubble-text > .k-message-reference { ... }

After:
  .k-bubble-content > .k-message-reference { ... }

Action: Update any CSS descendant selectors like .k-chat-bubble-text .k-message-reference to .k-bubble-content > .k-message-reference.`;

const aiInstructionsMessagePinned = `The k-message-pinned element is now an immediate child of k-message-list in Kendo UI 2025.3.825.

Before:
  .k-message-list .k-message-pinned { ... }

After:
  .k-message-list > .k-message-pinned { ... }

Action: Update any CSS rules that rely on the former position of .k-message-pinned inside the message list.`;

module.exports.aiInstructionsFileClasses = aiInstructionsFileClasses;
module.exports.aiInstructionsAvatars = aiInstructionsAvatars;
module.exports.aiInstructionsFirstLast = aiInstructionsFirstLast;
module.exports.aiInstructionsChatHeader = aiInstructionsChatHeader;
module.exports.aiInstructionsMessageTime = aiInstructionsMessageTime;
module.exports.aiInstructionsMessageReference = aiInstructionsMessageReference;
module.exports.aiInstructionsMessagePinned = aiInstructionsMessagePinned;

module.exports.aiInstructions = `The Chat component was completely redesigned in Kendo UI 2025.3.825. Review your stylesheets and any code that references these Chat-specific CSS classes:

${aiInstructionsFileClasses}

---

${aiInstructionsAvatars}

---

${aiInstructionsFirstLast}

---

${aiInstructionsChatHeader}

---

${aiInstructionsMessageTime}

---

${aiInstructionsMessageReference}

---

${aiInstructionsMessagePinned}`;

const PATTERN_FILE_CLASSES = /k-chat-file/;
const PATTERN_AVATARS = /k-avatars/;
const PATTERN_FIRST_LAST = /k-first|k-last/;
const PATTERN_APPBAR = /k-appbar/;
const PATTERN_MESSAGE_TIME = /k-message-time/;
const PATTERN_MESSAGE_REFERENCE = /k-message-reference|k-chat-bubble-text/;
const PATTERN_MESSAGE_PINNED = /k-message-pinned/;

function writeMarker(filename, instructions) {
  try {
    const markerDir = path.join(process.cwd(), 'node_modules', '.kendo', 'migration');
    fs.mkdirSync(markerDir, { recursive: true });
    fs.writeFileSync(path.join(markerDir, filename), instructions, 'utf8');
  } catch {
  }
}

module.exports = function transformer(fileInfo) {
  if (!/\.(css|scss|sass|less)$/i.test(fileInfo.path)) {
    return undefined;
  }

  const src = fileInfo.source;

  if (PATTERN_FILE_CLASSES.test(src)) {
    writeMarker('chat-file-classes.txt', aiInstructionsFileClasses);
  }
  if (PATTERN_AVATARS.test(src)) {
    writeMarker('chat-avatars.txt', aiInstructionsAvatars);
  }
  if (PATTERN_FIRST_LAST.test(src)) {
    writeMarker('chat-first-last.txt', aiInstructionsFirstLast);
  }
  if (PATTERN_APPBAR.test(src)) {
    writeMarker('chat-header.txt', aiInstructionsChatHeader);
  }
  if (PATTERN_MESSAGE_TIME.test(src)) {
    writeMarker('chat-message-time.txt', aiInstructionsMessageTime);
  }
  if (PATTERN_MESSAGE_REFERENCE.test(src)) {
    writeMarker('chat-message-reference.txt', aiInstructionsMessageReference);
  }
  if (PATTERN_MESSAGE_PINNED.test(src)) {
    writeMarker('chat-message-pinned.txt', aiInstructionsMessagePinned);
  }

  const updated = applyChatFileClassRenames(src);
  return updated !== src ? updated : undefined;
};