@object-ui/plugin-detail 3.1.5 → 3.3.1

package/src/RecordActivityTimeline.tsx

@@ -1,429 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
-import {
-  Activity,
-  Edit,
-  PlusCircle,
-  Trash2,
-  MessageSquare,
-  ArrowRightLeft,
-  Calendar,
-  CheckSquare,
-  Zap,
-  Mail,
-  Phone,
-  ChevronDown,
-  Loader2,
-} from 'lucide-react';
-import type { FeedItem, FeedItemType, RecordActivityComponentProps, RecordSubscription } from '@object-ui/types';
-import { FieldChangeItem } from './FieldChangeItem';
-import { ReactionPicker } from './ReactionPicker';
-import { ThreadedReplies } from './ThreadedReplies';
-import { SubscriptionToggle } from './SubscriptionToggle';
-
-export type FeedFilterMode = 'all' | 'comments_only' | 'changes_only' | 'tasks_only';
-
-export interface RecordActivityTimelineProps {
-  /** Feed items to display */
-  items: FeedItem[];
-  /** Activity configuration from RecordActivityComponentProps */
-  config?: RecordActivityComponentProps;
-  /** Filter mode for the timeline */
-  filterMode?: FeedFilterMode;
-  /** Called when filter mode changes */
-  onFilterChange?: (mode: FeedFilterMode) => void;
-  /** Whether there are more items to load */
-  hasMore?: boolean;
-  /** Called when user wants to load more items */
-  onLoadMore?: () => void | Promise<void>;
-  /** Loading state */
-  loading?: boolean;
-  /** Called when a comment is submitted */
-  onAddComment?: (text: string) => void | Promise<void>;
-  /** Called when a reply is submitted */
-  onAddReply?: (parentId: string | number, text: string) => void | Promise<void>;
-  /** Called when user toggles a reaction */
-  onToggleReaction?: (itemId: string | number, emoji: string) => void | Promise<void>;
-  /** Subscription state */
-  subscription?: RecordSubscription;
-  /** Called when user toggles subscription */
-  onToggleSubscription?: (subscribed: boolean) => void | Promise<void>;
-  /** When true, collapse to only the comment input when there are no items */
-  collapseWhenEmpty?: boolean;
-  className?: string;
-}
-
-const FEED_TYPE_ICONS: Record<FeedItemType, React.ElementType> = {
-  comment: MessageSquare,
-  field_change: Edit,
-  task: CheckSquare,
-  event: Calendar,
-  system: Zap,
-  email: Mail,
-  call: Phone,
-};
-
-const FEED_TYPE_COLORS: Record<FeedItemType, string> = {
-  comment: 'bg-purple-100 text-purple-600',
-  field_change: 'bg-blue-100 text-blue-600',
-  task: 'bg-green-100 text-green-600',
-  event: 'bg-amber-100 text-amber-600',
-  system: 'bg-gray-100 text-gray-600',
-  email: 'bg-indigo-100 text-indigo-600',
-  call: 'bg-teal-100 text-teal-600',
-};
-
-const FILTER_OPTIONS: { value: FeedFilterMode; label: string }[] = [
-  { value: 'all', label: 'All Activity' },
-  { value: 'comments_only', label: 'Comments Only' },
-  { value: 'changes_only', label: 'Field Changes' },
-  { value: 'tasks_only', label: 'Tasks Only' },
-];
-
-function formatTimestamp(timestamp: string): string {
-  try {
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-
-    if (diffMins < 1) return 'just now';
-    if (diffMins < 60) return `${diffMins}m ago`;
-    const diffHours = Math.floor(diffMins / 60);
-    if (diffHours < 24) return `${diffHours}h ago`;
-    const diffDays = Math.floor(diffHours / 24);
-    if (diffDays < 7) return `${diffDays}d ago`;
-    return date.toLocaleDateString();
-  } catch {
-    return timestamp;
-  }
-}
-
-function filterItems(items: FeedItem[], mode: FeedFilterMode): FeedItem[] {
-  switch (mode) {
-    case 'comments_only':
-      return items.filter((i) => i.type === 'comment');
-    case 'changes_only':
-      return items.filter((i) => i.type === 'field_change');
-    case 'tasks_only':
-      return items.filter((i) => i.type === 'task');
-    default:
-      return items;
-  }
-}
-
-/**
- * RecordActivityTimeline — Unified timeline renderer for Airtable-style activity feeds.
- *
- * Renders different feed item types (comment, field_change, task, event, system, etc.)
- * in a unified timeline. Supports filtering, pagination, reactions, and threading.
- *
- * Aligned with @objectstack/spec RecordActivityProps.
- */
-export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
-  items,
-  config,
-  filterMode: controlledFilter,
-  onFilterChange,
-  hasMore = false,
-  onLoadMore,
-  loading: _loading = false,
-  onAddComment,
-  onAddReply,
-  onToggleReaction,
-  subscription,
-  onToggleSubscription,
-  collapseWhenEmpty = false,
-  className,
-}) => {
-  const [internalFilter, setInternalFilter] = React.useState<FeedFilterMode>('all');
-  const [commentText, setCommentText] = React.useState('');
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [isLoadingMore, setIsLoadingMore] = React.useState(false);
-
-  const activeFilter = controlledFilter ?? internalFilter;
-  const showFilter = config?.showFilterToggle !== false;
-  const showCommentInput = config?.showCommentInput !== false && !!onAddComment;
-  const enableReactions = config?.enableReactions ?? false;
-  const enableThreading = config?.enableThreading ?? false;
-  const showSubscription = config?.showSubscriptionToggle ?? false;
-
-  const filtered = React.useMemo(
-    () => filterItems(items, activeFilter),
-    [items, activeFilter],
-  );
-
-  // Group replies by parentId
-  const rootItems = React.useMemo(() => {
-    if (!enableThreading) return filtered;
-    return filtered.filter((i) => !i.parentId);
-  }, [filtered, enableThreading]);
-
-  const repliesByParent = React.useMemo(() => {
-    if (!enableThreading) return new Map<string | number, FeedItem[]>();
-    const map = new Map<string | number, FeedItem[]>();
-    for (const item of filtered) {
-      if (item.parentId) {
-        const existing = map.get(item.parentId) ?? [];
-        existing.push(item);
-        map.set(item.parentId, existing);
-      }
-    }
-    return map;
-  }, [filtered, enableThreading]);
-
-  const handleFilterChange = React.useCallback(
-    (mode: FeedFilterMode) => {
-      if (onFilterChange) {
-        onFilterChange(mode);
-      } else {
-        setInternalFilter(mode);
-      }
-    },
-    [onFilterChange],
-  );
-
-  const handleAddComment = React.useCallback(async () => {
-    const text = commentText.trim();
-    if (!text || !onAddComment) return;
-    setIsSubmitting(true);
-    try {
-      await onAddComment(text);
-      setCommentText('');
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [commentText, onAddComment]);
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-        handleAddComment();
-      }
-    },
-    [handleAddComment],
-  );
-
-  const handleLoadMore = React.useCallback(async () => {
-    if (!onLoadMore) return;
-    setIsLoadingMore(true);
-    try {
-      await onLoadMore();
-    } finally {
-      setIsLoadingMore(false);
-    }
-  }, [onLoadMore]);
-
-  return (
-    <Card className={cn('', className)}>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2 text-base">
-            <Activity className="h-4 w-4" />
-            Activity
-            <span className="text-sm font-normal text-muted-foreground">
-              ({filtered.length})
-            </span>
-          </CardTitle>
-          <div className="flex items-center gap-1">
-            {showSubscription && subscription && (
-              <SubscriptionToggle
-                subscription={subscription}
-                onToggle={onToggleSubscription}
-              />
-            )}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Filter dropdown */}
-        {showFilter && (
-          <div className="flex items-center gap-2">
-            <select
-              className="rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-              value={activeFilter}
-              onChange={(e) => handleFilterChange(e.target.value as FeedFilterMode)}
-              aria-label="Filter activity"
-            >
-              {FILTER_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          </div>
-        )}
-
-        {/* Comment Input */}
-        {showCommentInput && (
-          <div className="flex gap-2">
-            <textarea
-              className="flex-1 min-h-[60px] rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
-              placeholder="Leave a comment… (Ctrl+Enter to submit)"
-              value={commentText}
-              onChange={(e) => setCommentText(e.target.value)}
-              onKeyDown={handleKeyDown}
-              disabled={isSubmitting}
-            />
-            <Button
-              size="icon"
-              variant="default"
-              onClick={handleAddComment}
-              disabled={!commentText.trim() || isSubmitting}
-              className="shrink-0 self-end"
-              aria-label="Submit comment"
-            >
-              <MessageSquare className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
-
-        {/* Timeline */}
-        {filtered.length === 0 ? (
-          collapseWhenEmpty ? null : (
-            <p className="text-sm text-muted-foreground text-center py-4">
-              No activity recorded
-            </p>
-          )
-        ) : (
-          <div className="relative">
-            {/* Timeline line */}
-            <div className="absolute left-4 top-2 bottom-2 w-px bg-border" />
-
-            <div className="space-y-4">
-              {rootItems.map((item) => {
-                const Icon = FEED_TYPE_ICONS[item.type] || Zap;
-                const colorClass =
-                  FEED_TYPE_COLORS[item.type] || 'bg-gray-100 text-gray-600';
-                const replies = repliesByParent.get(item.id) ?? [];
-
-                return (
-                  <div key={item.id}>
-                    <div className="flex gap-3 relative">
-                      {/* Icon */}
-                      <div
-                        className={cn(
-                          'shrink-0 h-8 w-8 rounded-full flex items-center justify-center z-10',
-                          colorClass,
-                        )}
-                      >
-                        {item.actorAvatarUrl ? (
-                          <img
-                            src={item.actorAvatarUrl}
-                            alt={item.actor}
-                            className="h-8 w-8 rounded-full object-cover"
-                          />
-                        ) : (
-                          <Icon className="h-3.5 w-3.5" />
-                        )}
-                      </div>
-                      {/* Content */}
-                      <div className="flex-1 min-w-0 pt-1">
-                        <div className="flex items-center gap-2 mb-0.5">
-                          <span className="text-sm font-medium">{item.actor}</span>
-                          {item.source && (
-                            <span className="text-xs text-muted-foreground">
-                              via {item.source}
-                            </span>
-                          )}
-                          <span className="text-xs text-muted-foreground">
-                            {formatTimestamp(item.createdAt)}
-                          </span>
-                          {item.edited && (
-                            <span className="text-xs text-muted-foreground italic">(edited)</span>
-                          )}
-                          {item.pinned && (
-                            <span className="text-xs text-amber-600">📌 Pinned</span>
-                          )}
-                        </div>
-
-                        {/* Body text */}
-                        {item.body && (
-                          <p className="text-sm whitespace-pre-wrap break-words text-muted-foreground">
-                            {item.body}
-                          </p>
-                        )}
-
-                        {/* Field changes */}
-                        {item.type === 'field_change' && item.fieldChanges && (
-                          <div className="space-y-1 mt-1">
-                            {item.fieldChanges.map((change, idx) => (
-                              <FieldChangeItem key={idx} change={change} />
-                            ))}
-                          </div>
-                        )}
-
-                        {/* Reactions */}
-                        {enableReactions && item.reactions && item.reactions.length > 0 && (
-                          <div className="mt-1.5">
-                            <ReactionPicker
-                              reactions={item.reactions}
-                              onToggleReaction={
-                                onToggleReaction
-                                  ? (emoji) => onToggleReaction(item.id, emoji)
-                                  : undefined
-                              }
-                            />
-                          </div>
-                        )}
-
-                        {/* Add reaction button (even if no reactions yet) */}
-                        {enableReactions && (!item.reactions || item.reactions.length === 0) && onToggleReaction && (
-                          <div className="mt-1.5">
-                            <ReactionPicker
-                              reactions={[]}
-                              onToggleReaction={(emoji) => onToggleReaction(item.id, emoji)}
-                            />
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Threading */}
-                    {enableThreading && (item.replyCount ?? 0) > 0 && (
-                      <ThreadedReplies
-                        parentItem={item}
-                        replies={replies}
-                        onAddReply={onAddReply}
-                        showReplyInput={!!onAddReply}
-                      />
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
-        {/* Load More */}
-        {hasMore && (
-          <div className="text-center pt-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleLoadMore}
-              disabled={isLoadingMore}
-              aria-label="Load more activity"
-            >
-              {isLoadingMore ? (
-                <Loader2 className="h-4 w-4 animate-spin mr-1" />
-              ) : (
-                <ChevronDown className="h-4 w-4 mr-1" />
-              )}
-              Load more
-            </Button>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

package/src/RecordChatterPanel.tsx

@@ -1,207 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import { cn, Button } from '@object-ui/components';
-import { MessageSquare, PanelRightOpen, PanelRightClose, X } from 'lucide-react';
-import type { RecordChatterComponentProps, FeedItem, RecordSubscription } from '@object-ui/types';
-import { RecordActivityTimeline } from './RecordActivityTimeline';
-import type { FeedFilterMode, RecordActivityTimelineProps } from './RecordActivityTimeline';
-
-export interface RecordChatterPanelProps {
-  /** Chatter panel configuration from RecordChatterComponentProps */
-  config?: RecordChatterComponentProps;
-  /** Feed items to display in the embedded timeline */
-  items: FeedItem[];
-  /** Whether there are more items to load */
-  hasMore?: boolean;
-  /** Called when user wants to load more */
-  onLoadMore?: () => void | Promise<void>;
-  /** Loading state */
-  loading?: boolean;
-  /** Called when a comment is submitted */
-  onAddComment?: (text: string) => void | Promise<void>;
-  /** Called when a reply is submitted */
-  onAddReply?: (parentId: string | number, text: string) => void | Promise<void>;
-  /** Called when user toggles a reaction */
-  onToggleReaction?: (itemId: string | number, emoji: string) => void | Promise<void>;
-  /** Subscription state */
-  subscription?: RecordSubscription;
-  /** Called when user toggles subscription */
-  onToggleSubscription?: (subscribed: boolean) => void | Promise<void>;
-  /** Filter mode */
-  filterMode?: FeedFilterMode;
-  /** Called when filter changes */
-  onFilterChange?: (mode: FeedFilterMode) => void;
-  /** When true, auto-collapse panel when there are no feed items */
-  collapseWhenEmpty?: boolean;
-  className?: string;
-}
-
-/**
- * RecordChatterPanel — Side/inline/drawer panel for record discussions.
- *
- * Consumes RecordChatterComponentProps from the spec protocol.
- * Supports three positions: bottom (inline), right (sidebar), left (sidebar).
- * Can be collapsible/expandable.
- *
- * Embeds RecordActivityTimeline as the feed sub-component.
- */
-export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
-  config,
-  items,
-  hasMore,
-  onLoadMore,
-  loading,
-  onAddComment,
-  onAddReply,
-  onToggleReaction,
-  subscription,
-  onToggleSubscription,
-  filterMode,
-  onFilterChange,
-  collapseWhenEmpty = false,
-  className,
-}) => {
-  const position = config?.position ?? 'right';
-  const width = config?.width ?? '360px';
-  const collapsible = config?.collapsible ?? true;
-  const defaultCollapsed = (collapseWhenEmpty && items.length === 0) || (config?.defaultCollapsed ?? false);
-
-  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
-
-  const isSidebar = position === 'right' || position === 'left';
-  const isInline = position === 'bottom';
-
-  // Sidebar mode
-  if (isSidebar) {
-    if (collapsed && collapsible) {
-      return (
-        <div
-          className={cn(
-            'flex items-start pt-4',
-            position === 'right' ? 'border-l' : 'border-r',
-            className,
-          )}
-        >
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 mx-1"
-            onClick={() => setCollapsed(false)}
-            aria-label="Open discussion panel"
-          >
-            <PanelRightOpen className="h-4 w-4" />
-          </Button>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className={cn(
-          'flex flex-col overflow-hidden',
-          position === 'right' ? 'border-l' : 'border-r',
-          className,
-        )}
-        style={{ width, minWidth: width }}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b">
-          <div className="flex items-center gap-2">
-            <MessageSquare className="h-4 w-4" />
-            <span className="text-sm font-medium">Discussion</span>
-          </div>
-          {collapsible && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7"
-              onClick={() => setCollapsed(true)}
-              aria-label="Close discussion panel"
-            >
-              <X className="h-3.5 w-3.5" />
-            </Button>
-          )}
-        </div>
-
-        {/* Embedded Timeline */}
-        <div className="flex-1 overflow-y-auto">
-          <RecordActivityTimeline
-            items={items}
-            config={config?.feed}
-            hasMore={hasMore}
-            onLoadMore={onLoadMore}
-            loading={loading}
-            onAddComment={onAddComment}
-            onAddReply={onAddReply}
-            onToggleReaction={onToggleReaction}
-            subscription={subscription}
-            onToggleSubscription={onToggleSubscription}
-            filterMode={filterMode}
-            onFilterChange={onFilterChange}
-            collapseWhenEmpty={collapseWhenEmpty}
-            className="border-0 shadow-none"
-          />
-        </div>
-      </div>
-    );
-  }
-
-  // Inline / bottom mode
-  return (
-    <div className={cn('', className)}>
-      {collapsible && collapsed ? (
-        <Button
-          variant="ghost"
-          className="w-full justify-start gap-2 text-muted-foreground"
-          onClick={() => setCollapsed(false)}
-          aria-label="Show discussion"
-        >
-          <MessageSquare className="h-4 w-4" />
-          <span>Show Discussion ({items.length})</span>
-        </Button>
-      ) : (
-        <div>
-          {collapsible && (
-            <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2 text-sm font-medium">
-                <MessageSquare className="h-4 w-4" />
-                Discussion
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7"
-                onClick={() => setCollapsed(true)}
-                aria-label="Hide discussion"
-              >
-                <PanelRightClose className="h-3.5 w-3.5" />
-              </Button>
-            </div>
-          )}
-          <RecordActivityTimeline
-            items={items}
-            config={config?.feed}
-            hasMore={hasMore}
-            onLoadMore={onLoadMore}
-            loading={loading}
-            onAddComment={onAddComment}
-            onAddReply={onAddReply}
-            onToggleReaction={onToggleReaction}
-            subscription={subscription}
-            onToggleSubscription={onToggleSubscription}
-            filterMode={filterMode}
-            onFilterChange={onFilterChange}
-            collapseWhenEmpty={collapseWhenEmpty}
-          />
-        </div>
-      )}
-    </div>
-  );
-};