version nice

app/utils/highlightEntities.tsx

@@ -0,0 +1,31 @@
+export const highlightEntities = (text: string) => {
+  if (!text) return text;
+
+  const entityPattern = /\[([^\]]+)\]/g;
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+
+  while ((match = entityPattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+
+    parts.push(
+      <span
+        key={match.index}
+        className="bg-[#f7ab6e] text-[#092727] px-1 py-0.5 rounded font-medium"
+      >
+        {match[0]}
+      </span>
+    );
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  return parts.length > 0 ? parts : text;
+};