@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/ReactionChips.tsx

@@ -0,0 +1,70 @@
+import React, { useState, useRef } from 'react';
+import type { Reaction } from '../types';
+import { ReactionPicker } from './ReactionPicker';
+
+interface ReactionChipsProps {
+  reactions: Reaction[];
+  messageId: string;
+  currentUser?: string;
+  onToggleReaction: (messageId: string, emoji: string, hasReacted: boolean) => void;
+}
+
+export function ReactionChips({
+  reactions,
+  messageId,
+  currentUser,
+  onToggleReaction,
+}: ReactionChipsProps) {
+  const [showPicker, setShowPicker] = useState(false);
+  const addBtnRef = useRef<HTMLButtonElement>(null);
+
+  const hasReactions = reactions && reactions.length > 0;
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 mt-1.5">
+      {hasReactions && reactions.map((reaction) => {
+        const hasReacted = currentUser
+          ? (reaction.agents || []).includes(currentUser)
+          : false;
+        return (
+          <button
+            key={reaction.emoji}
+            type="button"
+            onClick={() => onToggleReaction(messageId, reaction.emoji, hasReacted)}
+            className={`
+              inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border cursor-pointer transition-colors
+              ${
+                hasReacted
+                  ? 'bg-accent-cyan/15 border-accent-cyan/40 text-accent-cyan'
+                  : 'bg-bg-tertiary border-border-subtle text-text-muted hover:bg-bg-hover'
+              }
+            `}
+          >
+            <span>{reaction.emoji}</span>
+            <span className="font-medium">{reaction.count}</span>
+          </button>
+        );
+      })}
+      <button
+        ref={addBtnRef}
+        type="button"
+        onClick={() => setShowPicker(!showPicker)}
+        className="inline-flex items-center justify-center w-6 h-6 rounded-full text-xs text-text-muted bg-transparent border border-border-subtle hover:bg-bg-hover cursor-pointer transition-colors"
+        title="Add reaction"
+      >
+        +
+      </button>
+      {showPicker && (
+        <ReactionPicker
+          anchorRef={addBtnRef}
+          onSelect={(emoji) => {
+            const existing = reactions.find((r) => r.emoji === emoji);
+            const alreadyReacted = !!(currentUser && existing?.agents.includes(currentUser));
+            onToggleReaction(messageId, emoji, alreadyReacted);
+          }}
+          onClose={() => setShowPicker(false)}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/ReactionPicker.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+const EMOJIS = [
+  '👍', '👎', '❤️', '🔥', '👀',
+  '🎉', '😂', '🤔', '✅', '❌',
+  '🚀', '💯', '⚡', '🙏', '👏',
+  '🤖',
+];
+
+interface ReactionPickerProps {
+  onSelect: (emoji: string) => void;
+  onClose: () => void;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+}
+
+export function ReactionPicker({ onSelect, onClose, anchorRef }: ReactionPickerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        ref.current && !ref.current.contains(e.target as Node) &&
+        !(anchorRef?.current?.contains(e.target as Node))
+      ) {
+        onClose();
+      }
+    }
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [onClose]);
+
+  // Track position from anchor element, updating on scroll/resize
+  const [pos, setPos] = React.useState<{ top: number; left: number } | null>(null);
+
+  const updatePosition = React.useCallback(() => {
+    if (!anchorRef?.current) return;
+    const rect = anchorRef.current.getBoundingClientRect();
+    const pickerHeight = 80; // approximate height of 2-row grid
+    const top = rect.top > pickerHeight + 8
+      ? rect.top - pickerHeight - 4
+      : rect.bottom + 4;
+    setPos({ top, left: rect.left });
+  }, [anchorRef]);
+
+  useEffect(() => {
+    updatePosition();
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [updatePosition]);
+
+  return createPortal(
+    <div
+      ref={ref}
+      style={{
+        position: 'fixed',
+        top: pos?.top ?? 0,
+        left: pos?.left ?? 0,
+        zIndex: 9999,
+        visibility: pos ? 'visible' : 'hidden',
+        background: 'var(--color-bg-elevated, #202030)',
+        border: '1px solid var(--color-border-subtle, rgba(255,255,255,0.06))',
+        borderRadius: 8,
+        padding: 8,
+        boxShadow: '0 10px 25px rgba(0,0,0,0.5)',
+      }}
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(8, 1fr)',
+          gap: 2,
+        }}
+      >
+        {EMOJIS.map((emoji) => (
+          <button
+            key={emoji}
+            type="button"
+            onClick={() => {
+              onSelect(emoji);
+              onClose();
+            }}
+            style={{
+              width: 32,
+              height: 32,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 6,
+              fontSize: 18,
+              cursor: 'pointer',
+              border: 'none',
+              background: 'transparent',
+              transition: 'background 150ms',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = 'var(--color-bg-hover, rgba(255,255,255,0.08))';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = 'transparent';
+            }}
+          >
+            {emoji}
+          </button>
+        ))}
+      </div>
+    </div>,
+    document.body
+  );
+}