Maintain consistent and clean code formatting to improve readability and maintainability. Follow these guidelines:

  1. Use correct syntax for utility classes:
    // ❌ Bad
    className="gap 1.5 flex-row"
    className={`${toolsSupported ? "md:flex" : "int:flex"} hover:underline"`}
       
    // ✅ Good
    className="gap-1.5 flex-row"
    className={`hover:underline ${toolsSupported ? "md:flex" : ""}`}
    
  2. Keep class strings organized and manageable:
  3. Avoid inline comments in expressions:
    // ❌ Bad
    ) : item.message.role === "tool" ? null : item.message.role === // comment here
       
    // ✅ Good
    // Comment above the expression
    ) : item.message.role === "tool" ? null : item.message.role === "assistant"
    
  4. Use appropriate import paths:

These rules help maintain code consistency, improve readability, and make the codebase easier to maintain and refactor.