fix: Tooltip shows trailing space for formatters without keyboard shortcut

packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js

@@ -216,7 +216,7 @@ const ChatInputFormattingToolbar = ({
           </React.Fragment>
         ) : (
           <Tooltip
-            text={`${item.name} ${item.shortcut && `(${item.shortcut})`}`}
+            text={item.shortcut ? `${item.name} (${item.shortcut})` : item.name}
             position="top"
             key={`formatter-${item.name}`}
           >
@@ -296,9 +296,11 @@ const ChatInputFormattingToolbar = ({
           if (itemInFormatter) {
             return (
               <Tooltip
-                text={`${itemInFormatter.name} ${
-                  itemInFormatter.shortcut && `(${itemInFormatter.shortcut})`
-                }`}
+                text={
+                  itemInFormatter.shortcut
+                    ? `${itemInFormatter.name} (${itemInFormatter.shortcut})`
+                    : itemInFormatter.name
+                }
                 position="top"
                 key={`formatter-${itemInFormatter.name}`}
               >

packages/react/src/views/Message/MessageAIBadges.js

@@ -0,0 +1,100 @@
+import React, { useEffect, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { Box } from '@embeddedchat/ui-elements';
+import RCContext from '../../context/RCInstance';
+
+const CATEGORY_COLORS = {
+  question: '#6366f1',
+  greeting: '#22c55e',
+  request: '#f59e0b',
+  statement: '#64748b',
+  other: '#94a3b8',
+};
+
+const SENTIMENT_COLORS = {
+  positive: '#22c55e',
+  negative: '#ef4444',
+  neutral: '#94a3b8',
+};
+
+const badgeStyle = (bg) => css`
+  font-size: 0.6rem;
+  font-weight: 600;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: ${bg};
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+`;
+
+// Simple in-memory cache so we don't re-call the API for the same message
+const badgeCache = new Map();
+
+// Only process messages sent in the last 60 seconds to avoid hammering the API
+const isRecent = (ts) => {
+  const msgTime = new Date(ts).getTime();
+  return Date.now() - msgTime < 60000;
+};
+
+const MessageAIBadges = ({ message }) => {
+  const { ECOptions } = useContext(RCContext);
+  const adapter = ECOptions?.aiAdapter ?? null;
+  const [badges, setBadges] = useState(
+    () => badgeCache.get(message._id) || null
+  );
+
+  useEffect(() => {
+    if (!adapter || !message.msg || message.t) return;
+    // Skip old messages — only classify recent ones
+    if (!isRecent(message.ts)) return;
+    // Already cached
+    if (badgeCache.has(message._id)) {
+      setBadges(badgeCache.get(message._id));
+      return;
+    }
+
+    let cancelled = false;
+
+    adapter
+      .processMessage(message.msg)
+      .then((result) => {
+        if (!cancelled) {
+          badgeCache.set(message._id, result);
+          setBadges(result);
+        }
+      })
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  }, [adapter, message._id, message.msg, message.t, message.ts]);
+
+  if (!badges) return null;
+
+  return (
+    <Box
+      css={css`
+        display: flex;
+        gap: 0.3rem;
+        margin-top: 0.2rem;
+      `}
+    >
+      <span css={badgeStyle(CATEGORY_COLORS[badges.category] || '#94a3b8')}>
+        {badges.category}
+      </span>
+      <span css={badgeStyle(SENTIMENT_COLORS[badges.sentiment] || '#94a3b8')}>
+        {badges.sentiment}
+      </span>
+    </Box>
+  );
+};
+
+MessageAIBadges.propTypes = {
+  message: PropTypes.object.isRequired,
+};
+
+export default MessageAIBadges;