chordia-ui 3.4.7 → 3.4.8

package/src/components/UpdatedInteractionDetails/UpdatedThreads.jsx

@@ -0,0 +1,739 @@
+"use client";
+
+import React, { useState, useRef, useMemo, useEffect } from "react";
+import {
+  MessageSquareMore,
+  MessagesSquare,
+  ChevronDown,
+  Ellipsis,
+  CircleCheck,
+  CornerDownRight,
+  Plus,
+} from "lucide-react";
+
+/* ============================================
+   Figma node: 237-5557 — Comments / Thread section
+   Parent layout (237-5555):
+     display: flex
+     flex-direction: column
+     align-items: flex-start
+     gap: 24px
+     background: var(--Grey-White, #FFF)
+   ============================================ */
+
+/* ─── helpers ─── */
+
+const roleColorMap = (role) => {
+  if (!role) return null;
+  const n = String(role).toLowerCase();
+  if (n === "supervisor") return "var(--rail-compliance, #C98A5A)";
+  if (n === "admin" || n === "administrator") return "var(--rail-discovery, #5E88B0)";
+  if (n === "agent") return "var(--rail-outcome, #6B7C93)";
+  return null;
+};
+
+const getInitials = (name) =>
+  (name || "")
+    .split(" ")
+    .map((w) => w[0])
+    .join("")
+    .toUpperCase() || "U";
+
+const formatTimestamp = (value) => {
+  if (!value) return "";
+  if (!/^\d{4}-\d{2}-\d{2}T/.test(value)) return value;
+  try {
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) return value;
+    const now = new Date();
+    const diffMs = now.getTime() - d.getTime();
+    const diffMin = Math.floor(diffMs / 60000);
+    const diffHr = Math.floor(diffMs / 3600000);
+    if (diffMin < 1) return "Just now";
+    if (diffMin < 60) return `${diffMin} min`;
+    if (diffHr < 24) return `${diffHr} h`;
+    return `${Math.floor(diffHr / 24)} d`;
+  } catch {
+    return value;
+  }
+};
+
+/* ─── Avatar (36 × 36, circular, initials) ─── */
+const Avatar = ({ name, initials, color, size = 36 }) => (
+  <div
+    style={{
+      width: size,
+      height: size,
+      borderRadius: "50%",
+      background: color || "#6B7C93",
+      color: "#FFF",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: size <= 32 ? "10px" : "11px",
+      fontWeight: 650,
+      flexShrink: 0,
+      fontFamily: "var(--default-font-family)",
+      letterSpacing: "0.02em",
+    }}
+    title={name}
+  >
+    {initials || getInitials(name)}
+  </div>
+);
+
+/* ============================================
+   THREAD CARD — Figma node 426-1904
+   Horizontal scroll card
+
+   Container row (each card):
+     display: flex; align-items: center; gap: 12px;
+     align-self: stretch;
+     border-bottom: 1px solid var(--Grey-absent, #D9D9D9)
+
+   Icons: circle-check 16×16 | Divider 0×48 | message-square-more 16×16
+   ============================================ */
+const ThreadCard = ({ thread, isActive, onClick }) => {
+  const [hovered, setHovered] = useState(false);
+  const isResolved = thread.status === "resolved";
+  const commentCount = thread.comments?.length || thread.commentCount || 0;
+
+  return (
+    <div
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: "flex",
+        width: 264,
+        padding: "12px 12px",
+        flexDirection: isActive ? "column" : "row",
+        justifyContent: isActive ? "center" : "flex-start",
+        alignItems: isActive ? "flex-start" : "center",
+        gap: isActive ? 6 : 8,
+        borderBottom: isActive
+          ? "3px solid var(--Grey-Strong, #2E3236)"
+          : "1px solid var(--Grey-absent, #D9D9D9)",
+        background: isActive
+          ? "var(--Grey-Hover, #F3F7F7)"
+          : hovered
+          ? "var(--surface-hover, #F3F7F7)"
+          : "var(--Grey-White, #FFF)",
+        cursor: "pointer",
+        flexShrink: 0,
+        transition: "all 0.15s ease",
+        boxSizing: "border-box",
+      }}
+    >
+      {/* Left: title + count stacked */}
+      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+        {/* Title — 13px / 500 / #2E3236, truncated */}
+        <span
+          style={{
+            fontSize: 13,
+            fontWeight: 500,
+            color: "var(--Grey-Strong, #2E3236)",
+            lineHeight: "150%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            fontFamily: "var(--default-font-family)",
+          }}
+        >
+          {thread.title || "Untitled Thread"}
+        </span>
+        <span
+          style={{
+            fontSize: 12,
+            fontWeight: 400,
+            color: "var(--Grey-Muted, #808183)",
+            lineHeight: "150%",
+            fontFamily: "var(--default-font-family)",
+          }}
+        >
+          {commentCount} Comment{commentCount !== 1 ? "s" : ""}
+        </span>
+      </div>
+
+      {/* Divider — Figma: 0 × 48 (scaled down to match card height) */}
+      <div
+        style={{
+          width: 0,
+          height: 32,
+          borderLeft: "1px solid var(--Grey-absent, #D9D9D9)",
+          flexShrink: 0,
+        }}
+      />
+
+      {/* Right: status icon 16×16 + label */}
+      <div style={{ display: "flex", alignItems: "center", gap: 4, flexShrink: 0 }}>
+        {isResolved ? (
+          <>
+            <CircleCheck size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
+            <span
+              style={{
+                fontSize: 12,
+                fontWeight: 500,
+                color: "var(--Grey-Muted, #808183)",
+                fontFamily: "var(--default-font-family)",
+              }}
+            >
+              Resolved
+            </span>
+          </>
+        ) : (
+          <>
+            <MessageSquareMore size={16} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.5} />
+            <span
+              style={{
+                fontSize: 12,
+                fontWeight: 500,
+                color: "var(--Grey-Strong, #2E3236)",
+                fontFamily: "var(--default-font-family)",
+              }}
+            >
+              Open
+            </span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/* ============================================
+   COMMENT BUBBLE — single message
+   Figma: flex row, gap: 12
+   Avatar 36×36 + content column
+   ============================================ */
+const CommentBubble = ({
+  comment,
+  isReply = false,
+  onReply,
+  onMenuClick,
+  showReply = true,
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const author = comment.author || {};
+  const authorName = author.name || comment.author_name || "Unknown";
+  const initials = author.initials || getInitials(authorName);
+  const role = author.role || comment.author_role;
+  const avatarColor = author.color || roleColorMap(role) || "#6B7C93";
+  const timestamp = formatTimestamp(comment.timestamp || comment.created_at);
+
+  const paragraphs = Array.isArray(comment.content)
+    ? comment.content
+    : [comment.content || comment.text || ""];
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: "flex",
+        gap: 12,
+        alignItems: "flex-start",
+        marginLeft: isReply ? 48 : 0,
+        position: "relative",
+      }}
+    >
+      {/* Avatar — 36 × 36 */}
+      <Avatar name={authorName} initials={initials} color={avatarColor} />
+
+      {/* Content column */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        {/* Header: name + time + ••• */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: 6,
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
+            {/* Name — 13px / 650 */}
+            <span
+              style={{
+                fontSize: 13,
+                fontWeight: 650,
+                color: "var(--text-ink, #1E2125)",
+                lineHeight: "150%",
+                fontFamily: "var(--default-font-family)",
+              }}
+            >
+              {authorName}
+            </span>
+            {/* Timestamp — 12px / 400 */}
+            <span
+              style={{
+                fontSize: 12,
+                fontWeight: 400,
+                color: "var(--Grey-Muted, #808183)",
+                lineHeight: "150%",
+                fontFamily: "var(--default-font-family)",
+              }}
+            >
+              {timestamp}
+            </span>
+          </div>
+
+          {/* Three-dot menu — Ellipsis 24 × 24 */}
+          <button
+            type="button"
+            onClick={() => onMenuClick?.(comment)}
+            style={{
+              padding: 2,
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              borderRadius: 4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              opacity: hovered ? 1 : 0,
+              transition: "opacity 0.15s",
+              flexShrink: 0,
+            }}
+          >
+            <Ellipsis size={24} color="var(--Grey-Muted, #808183)" />
+          </button>
+        </div>
+
+        {/* Message bubbles — stacked, gap: 4px */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+          {paragraphs.map((paragraph, idx) => (
+            <div
+              key={idx}
+              style={{
+                fontSize: 13,
+                fontWeight: 400,
+                color: "var(--text-ink, #1E2125)",
+                lineHeight: "160%",
+                fontFamily: "var(--default-font-family)",
+                padding: "8px 12px",
+                background: isReply
+                  ? "var(--surface-hover, #F3F7F7)"
+                  : "var(--surface-warm-40, rgba(243, 241, 229, 0.40))",
+                borderRadius: 8,
+                wordBreak: "break-word",
+              }}
+            >
+              {paragraph}
+            </div>
+          ))}
+        </div>
+
+        {/* Reply action — CornerDownRight 20×20 + "Reply" */}
+        {showReply && onReply && (
+          <button
+            type="button"
+            onClick={() => onReply(comment)}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              marginTop: 8,
+              padding: 0,
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              fontSize: 13,
+              fontWeight: 400,
+              color: "var(--Grey-Muted, #808183)",
+              fontFamily: "var(--default-font-family)",
+              transition: "color 0.15s",
+            }}
+          >
+            <CornerDownRight size={20} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
+            Reply
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+
+/* ============================================
+   COMMENT INPUT
+   Figma: Avatar + bordered box
+     ┌── toolbar (B I S Link | ⊕) ──┐
+     │   "Add a comment"     [Post]  │
+     └──────────────────────────────┘
+   ============================================ */
+const CommentInput = ({ currentUser, onSubmit }) => {
+  const [value, setValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const textareaRef = useRef(null);
+
+  const handleSubmit = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSubmit?.(trimmed);
+    setValue("");
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  const initials = currentUser?.initials || getInitials(currentUser?.name);
+  const color =
+    currentUser?.color || roleColorMap(currentUser?.role) || "#6B7C93";
+
+  return (
+    <div style={{ display: "flex", gap: 12, alignItems: "flex-start", width: "100%" }}>
+      {/* Current user avatar */}
+      <Avatar name={currentUser?.name} initials={initials} color={color} />
+
+      {/* Input container */}
+      <div
+        style={{
+          flex: 1,
+          border: isFocused
+            ? "1px solid var(--Grey-Strong, #2E3236)"
+            : "1px solid var(--Grey-absent, #D9D9D9)",
+          borderRadius: 8,
+          background: "var(--Grey-White, #FFF)",
+          transition: "border-color 0.15s",
+          overflow: "hidden",
+        }}
+      >
+        {/* Textarea row + Post button */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "flex-end",
+            padding: "10px 12px",
+            gap: 8,
+          }}
+        >
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onKeyDown={handleKeyDown}
+            placeholder="Add a comment"
+            rows={1}
+            style={{
+              flex: 1,
+              border: "none",
+              outline: "none",
+              resize: "none",
+              fontSize: 13,
+              fontWeight: 400,
+              color: "var(--text-ink, #1E2125)",
+              fontFamily: "var(--default-font-family)",
+              lineHeight: "160%",
+              background: "transparent",
+              padding: 0,
+              minHeight: 24,
+            }}
+          />
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!value.trim()}
+            style={{
+              display: "flex",
+              padding: "6px 16px",
+              justifyContent: "center",
+              alignItems: "center",
+              fontSize: 13,
+              fontWeight: 600,
+              color: value.trim()
+                ? "var(--Grey-White, #FFF)"
+                : "var(--Grey-Muted, #808183)",
+              background: value.trim()
+                ? "var(--Grey-Strong, #2E3236)"
+                : "var(--grey-light, #e9e8e8a1)",
+              border: "none",
+              borderRadius: 6,
+              cursor: value.trim() ? "pointer" : "not-allowed",
+              fontFamily: "var(--default-font-family)",
+              transition: "all 0.15s",
+              flexShrink: 0,
+              lineHeight: "150%",
+            }}
+          >
+            Post
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/* CommentsIcon — lucide/messages-square 24×24 orange */
+
+/* ============================================
+   MAIN COMPONENT: UpdatedThreads
+   Figma node 237-5557 — Thread conversation area
+
+   Layout:
+     display: flex
+     flex-direction: column
+     align-items: flex-start
+     gap: 24px
+     background: var(--Grey-White, #FFF)
+   ============================================ */
+const UpdatedThreads = ({
+  threads = [],
+  activeThreadId,
+  onThreadSelect,
+  onNewThread,
+  onSendComment,
+  onReply,
+  onMenuClick,
+  onMarkResolved,
+  onViewPreviousComments,
+  currentUser,
+  filterValue = "all",
+  onFilterChange,
+}) => {
+  const [internalActiveId, setInternalActiveId] = useState(
+    activeThreadId || threads[0]?.id || null
+  );
+  const [filterOpen, setFilterOpen] = useState(false);
+  const filterRef = useRef(null);
+
+  const currentActiveId = activeThreadId ?? internalActiveId;
+
+  const activeThread = useMemo(
+    () => threads.find((t) => t.id === currentActiveId) || threads[0],
+    [threads, currentActiveId]
+  );
+
+  const comments = activeThread?.comments || [];
+
+  // Group comments: top-level + their replies
+  const groupedComments = useMemo(() => {
+    const topLevel = comments.filter((c) => !c.parentId);
+    const repliesByParent = {};
+    comments.forEach((c) => {
+      if (c.parentId) {
+        if (!repliesByParent[c.parentId]) repliesByParent[c.parentId] = [];
+        repliesByParent[c.parentId].push(c);
+      }
+    });
+    return topLevel.map((c) => ({
+      ...c,
+      replies: repliesByParent[c.id] || [],
+    }));
+  }, [comments]);
+
+  useEffect(() => {
+    if (activeThreadId) setInternalActiveId(activeThreadId);
+  }, [activeThreadId]);
+
+  // Close filter dropdown on outside click
+  useEffect(() => {
+    if (!filterOpen) return;
+    const handler = (e) => {
+      if (filterRef.current && !filterRef.current.contains(e.target)) {
+        setFilterOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [filterOpen]);
+
+  const handleThreadClick = (threadId) => {
+    setInternalActiveId(threadId);
+    onThreadSelect?.(threadId);
+  };
+
+  const displayCurrentUser = useMemo(() => {
+    if (!currentUser) return { name: "You", initials: "YO", color: "#6B7C93" };
+    const name = currentUser.name || "You";
+    const initials = currentUser.initials || getInitials(name);
+    const role = currentUser.role && String(currentUser.role).toLowerCase();
+    const color = currentUser.color || roleColorMap(role) || "#6B7C93";
+    return { ...currentUser, name, initials, color };
+  }, [currentUser]);
+
+  const filterOptions = [
+    { label: "All", value: "all" },
+    { label: "Open", value: "open" },
+    { label: "Resolved", value: "resolved" },
+  ];
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 24,
+        background: "var(--Grey-White, #FFF)",
+        width: "100%",
+        fontFamily: "var(--default-font-family)",
+      }}
+    >
+      {/* ═══════════════════════════════════════════
+          HEADER — icon + "COMMENTS" | All ▾ | + New Thread
+          Figma: flex row, space-between, center
+          ═══════════════════════════════════════════ */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
+      >
+        {/* Left: Icon (24×24 orange) + COMMENTS title */}
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <MessagesSquare size={24} color="var(--rail-orange, #C98A5A)" strokeWidth={1.5} />
+          <span
+            style={{
+              fontSize: 14,
+              fontWeight: 650,
+              color: "var(--Grey-Strong, #2E3236)",
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              lineHeight: "150%",
+            }}
+          >
+            COMMENTS
+          </span>
+        </div>
+
+      </div>
+
+      {/* ═══════════════════════════════════════════
+          THREAD CARDS — horizontal scroll row
+          ═══════════════════════════════════════════ */}
+      {threads.length > 0 && (
+        <div
+          style={{
+            display: "flex",
+            gap: 0,
+            width: "100%",
+            overflowX: "auto",
+          }}
+          className="custom-thin-scrollbar-library"
+        >
+          {threads.map((thread) => (
+            <ThreadCard
+              key={thread.id}
+              thread={thread}
+              isActive={thread.id === currentActiveId}
+              onClick={() => handleThreadClick(thread.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* ═══════════════════════════════════════════
+          VIEW PREVIOUS COMMENTS — bordered button
+          Figma: padding 8px 16px, border-radius 8px
+          ═══════════════════════════════════════════ */}
+      {onViewPreviousComments && (
+        <button
+          type="button"
+          onClick={onViewPreviousComments}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "8px 16px",
+            fontSize: 13,
+            fontWeight: 500,
+            color: "var(--Grey-Strong, #2E3236)",
+            background: "var(--Grey-White, #FFF)",
+            border: "1px solid var(--Grey-absent, #D9D9D9)",
+            borderRadius: 8,
+            cursor: "pointer",
+            fontFamily: "var(--default-font-family)",
+            transition: "background 0.15s",
+            lineHeight: "150%",
+          }}
+        >
+          View Previous Comments
+        </button>
+      )}
+
+      {/* ═══════════════════════════════════════════
+          COMMENTS LIST — grouped by parent/reply
+          Figma: flex column, gap: 20px
+          ═══════════════════════════════════════════ */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
+          width: "100%",
+        }}
+      >
+        {groupedComments.map((comment) => (
+          <div key={comment.id} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+            {/* Top-level comment — no Reply button when it has replies below */}
+            <CommentBubble
+              comment={comment}
+              isReply={false}
+              onReply={onReply}
+              onMenuClick={onMenuClick}
+              showReply={comment.replies.length === 0}
+            />
+
+            {/* Replies — indented, last reply shows Reply button */}
+            {comment.replies.map((reply, idx) => (
+              <CommentBubble
+                key={reply.id}
+                comment={reply}
+                isReply
+                onReply={onReply}
+                onMenuClick={onMenuClick}
+                showReply={idx === comment.replies.length - 1}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* ═══════════════════════════════════════════
+          COMMENT INPUT — avatar + rich text box
+          ═══════════════════════════════════════════ */}
+      <CommentInput currentUser={displayCurrentUser} onSubmit={onSendComment} />
+
+      {/* ═══════════════════════════════════════════
+          MARK AS RESOLVED — pill button
+          Figma: CircleCheck 16×16 + text, border-radius 20px
+          ═══════════════════════════════════════════ */}
+      {onMarkResolved && activeThread && activeThread.status !== "resolved" && (
+        <button
+          type="button"
+          onClick={onMarkResolved}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "8px 16px",
+            fontSize: 13,
+            fontWeight: 500,
+            color: "var(--Grey-Strong, #2E3236)",
+            background: "var(--Grey-White, #FFF)",
+            border: "1px solid var(--Grey-absent, #D9D9D9)",
+            borderRadius: 20,
+            cursor: "pointer",
+            fontFamily: "var(--default-font-family)",
+            transition: "background 0.15s",
+            lineHeight: "150%",
+          }}
+        >
+          <CircleCheck size={16} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.5} />
+          Mark as Resolved
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default UpdatedThreads;