@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/channels/ChannelMessageList.tsx

@@ -0,0 +1,463 @@
+/**
+ * ChannelMessageList Component
+ *
+ * Displays messages in a channel with:
+ * - Unread separator
+ * - Date dividers
+ * - Auto-scroll to new messages
+ * - Infinite scroll for history
+ */
+
+import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
+import type { ChannelMessage, ChannelMessageListProps, UnreadState } from './types';
+import { formatMessageBody } from '../utils/messageFormatting';
+
+export function ChannelMessageList({
+  messages,
+  unreadState,
+  currentUser,
+  isLoadingMore = false,
+  hasMore = false,
+  onLoadMore,
+  onThreadClick,
+  onMemberClick,
+}: ChannelMessageListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const [isNearBottom, setIsNearBottom] = useState(true);
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+
+  // Group messages by date
+  const groupedMessages = useMemo(() => {
+    const groups: { date: string; messages: ChannelMessage[] }[] = [];
+    let currentDate = '';
+
+    messages.forEach(message => {
+      const messageDate = formatDateKey(message.timestamp);
+      if (messageDate !== currentDate) {
+        currentDate = messageDate;
+        groups.push({ date: messageDate, messages: [message] });
+      } else {
+        groups[groups.length - 1].messages.push(message);
+      }
+    });
+
+    return groups;
+  }, [messages]);
+
+  // Handle scroll events
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    const nearBottom = distanceFromBottom < 100;
+
+    setIsNearBottom(nearBottom);
+    setShowScrollToBottom(!nearBottom && distanceFromBottom > 500);
+
+    // Load more when scrolling near top
+    if (scrollTop < 100 && hasMore && !isLoadingMore && onLoadMore) {
+      onLoadMore();
+    }
+  }, [hasMore, isLoadingMore, onLoadMore]);
+
+  // Scroll to bottom when new messages arrive (if near bottom)
+  useEffect(() => {
+    if (isNearBottom && bottomRef.current) {
+      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages.length, isNearBottom]);
+
+  // Initial scroll to bottom
+  useEffect(() => {
+    if (bottomRef.current) {
+      bottomRef.current.scrollIntoView();
+    }
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  return (
+    <div className="relative flex-1 overflow-hidden">
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="h-full overflow-y-auto px-4 py-2"
+      >
+        {/* Loading more indicator */}
+        {isLoadingMore && (
+          <div className="flex justify-center py-4">
+            <LoadingSpinner />
+          </div>
+        )}
+
+        {/* Load more button */}
+        {hasMore && !isLoadingMore && (
+          <div className="flex justify-center py-4">
+            <button
+              onClick={onLoadMore}
+              className="text-sm text-accent-cyan hover:underline"
+            >
+              Load earlier messages
+            </button>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {messages.length === 0 && !isLoadingMore && (
+          <div className="flex flex-col items-center justify-center h-full text-center py-12">
+            <div className="text-4xl mb-3">
+              <MessageIcon className="w-12 h-12 text-text-muted" />
+            </div>
+            <h3 className="text-lg font-medium text-text-primary mb-1">
+              No messages yet
+            </h3>
+            <p className="text-sm text-text-muted">
+              Be the first to send a message in this channel
+            </p>
+          </div>
+        )}
+
+        {/* Message groups */}
+        {groupedMessages.map(({ date, messages: dateMessages }) => (
+          <div key={date}>
+            {/* Date divider */}
+            <DateDivider date={date} />
+
+            {/* Messages for this date */}
+            {dateMessages.map((message, index) => {
+              const isFirstUnread = unreadState?.firstUnreadMessageId === message.id;
+              const showUnreadSeparator = isFirstUnread && unreadState && unreadState.count > 0;
+
+              return (
+                <React.Fragment key={message.id}>
+                  {/* Unread separator */}
+                  {showUnreadSeparator && (
+                    <UnreadSeparator count={unreadState.count} />
+                  )}
+
+                  {/* Message */}
+                  <MessageItem
+                    message={message}
+                    isOwn={message.from === currentUser}
+                    onThreadClick={onThreadClick}
+                    onMemberClick={onMemberClick}
+                    showAvatar={shouldShowAvatar(dateMessages, index)}
+                  />
+                </React.Fragment>
+              );
+            })}
+          </div>
+        ))}
+
+        {/* Scroll anchor */}
+        <div ref={bottomRef} />
+      </div>
+
+      {/* Scroll to bottom button */}
+      {showScrollToBottom && (
+        <button
+          onClick={scrollToBottom}
+          className="absolute bottom-4 right-4 p-3 bg-bg-elevated border border-border-subtle rounded-full shadow-lg hover:bg-bg-hover transition-colors"
+          title="Scroll to bottom"
+        >
+          <ChevronDownIcon className="w-5 h-5 text-text-primary" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// Sub-components
+// =============================================================================
+
+interface MessageItemProps {
+  message: ChannelMessage;
+  isOwn: boolean;
+  onThreadClick?: (messageId: string) => void;
+  onMemberClick?: (memberId: string, entityType: 'user' | 'agent') => void;
+  showAvatar: boolean;
+}
+
+function MessageItem({
+  message,
+  isOwn,
+  onThreadClick,
+  onMemberClick,
+  showAvatar,
+}: MessageItemProps) {
+  const hasThread = message.threadSummary && message.threadSummary.replyCount > 0;
+
+  return (
+    <div className={`group relative py-1 ${showAvatar ? 'mt-3' : ''}`}>
+      <div className="flex gap-3">
+        {/* Avatar column */}
+        <div className="w-9 flex-shrink-0">
+          {showAvatar && (
+            <Avatar
+              name={message.from}
+              avatarUrl={message.fromAvatarUrl}
+              entityType={message.fromEntityType}
+            />
+          )}
+        </div>
+
+        {/* Content column */}
+        <div className="flex-1 min-w-0">
+          {/* Header (only show with avatar) */}
+          {showAvatar && (
+            <div className="flex items-center gap-2 mb-0.5">
+              <button
+                type="button"
+                onClick={() => {
+                  if (!isOwn && onMemberClick) {
+                    onMemberClick(message.from, message.fromEntityType || 'agent');
+                  }
+                }}
+                disabled={isOwn || !onMemberClick}
+                className={`text-sm font-semibold ${
+                  isOwn ? 'text-accent-cyan cursor-default' : 'text-text-primary hover:underline cursor-pointer'
+                } disabled:cursor-default disabled:hover:no-underline`}
+              >
+                {message.from}
+              </button>
+              <span className="text-xs text-text-muted">
+                {formatTime(message.timestamp)}
+              </span>
+              {message.editedAt && (
+                <span className="text-xs text-text-muted">(edited)</span>
+              )}
+
+              {/* Thread button */}
+              <button
+                className={`
+                  inline-flex items-center gap-1.5 p-1.5 rounded-lg transition-all duration-150 cursor-pointer border-none
+                  ${hasThread || message.threadId
+                    ? 'text-accent-cyan bg-accent-cyan/10 hover:bg-accent-cyan/20'
+                    : 'text-text-muted bg-transparent opacity-0 group-hover:opacity-100 hover:text-accent-cyan hover:bg-accent-cyan/10'}
+                `}
+                onClick={() => onThreadClick?.(message.threadId || message.id)}
+                title={message.threadId ? `View thread` : (hasThread ? `${message.threadSummary!.replyCount} ${message.threadSummary!.replyCount === 1 ? 'reply' : 'replies'}` : 'Reply in thread')}
+              >
+                <ThreadIcon className="w-3.5 h-3.5" />
+                {hasThread && (
+                  <span className="text-xs font-medium">{message.threadSummary!.replyCount}</span>
+                )}
+              </button>
+            </div>
+          )}
+
+          {/* Message content */}
+          <div className="text-sm text-text-primary whitespace-pre-wrap break-words">
+            {formatMessageBody(message.content, { mentions: message.mentions })}
+          </div>
+
+          {/* Attachments */}
+          {message.attachments && message.attachments.length > 0 && (
+            <div className="mt-2 flex flex-wrap gap-2">
+              {message.attachments.map(attachment => (
+                <AttachmentPreview key={attachment.id} attachment={attachment} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Avatar({
+  name,
+  avatarUrl,
+  entityType,
+}: {
+  name: string;
+  avatarUrl?: string;
+  entityType: 'agent' | 'user';
+}) {
+  if (avatarUrl) {
+    return (
+      <img
+        src={avatarUrl}
+        alt={name}
+        className="w-9 h-9 rounded-full object-cover"
+      />
+    );
+  }
+
+  return (
+    <div className={`
+      w-9 h-9 rounded-full flex items-center justify-center text-sm font-medium
+      ${entityType === 'user'
+        ? 'bg-purple-500/30 text-purple-300'
+        : 'bg-accent-cyan/30 text-accent-cyan'}
+    `}>
+      {name.charAt(0).toUpperCase()}
+    </div>
+  );
+}
+
+function AttachmentPreview({ attachment }: { attachment: NonNullable<ChannelMessage['attachments']>[0] }) {
+  const isImage = attachment.mimeType.startsWith('image/');
+
+  if (isImage) {
+    return (
+      <a
+        href={attachment.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block max-w-xs rounded-lg overflow-hidden border border-border-subtle hover:border-accent-cyan/30 transition-colors"
+      >
+        <img
+          src={attachment.thumbnailUrl || attachment.url}
+          alt={attachment.filename}
+          className="max-w-full max-h-48 object-cover"
+        />
+      </a>
+    );
+  }
+
+  return (
+    <a
+      href={attachment.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-2 px-3 py-2 bg-bg-tertiary rounded-lg border border-border-subtle hover:border-accent-cyan/30 transition-colors"
+    >
+      <FileIcon className="w-5 h-5 text-text-muted" />
+      <div className="min-w-0">
+        <p className="text-sm text-text-primary truncate">{attachment.filename}</p>
+        <p className="text-xs text-text-muted">{formatFileSize(attachment.size)}</p>
+      </div>
+    </a>
+  );
+}
+
+function DateDivider({ date }: { date: string }) {
+  return (
+    <div className="flex items-center gap-3 py-3">
+      <div className="flex-1 h-px bg-border-subtle" />
+      <span className="text-xs font-medium text-text-muted px-2">
+        {formatDateDisplay(date)}
+      </span>
+      <div className="flex-1 h-px bg-border-subtle" />
+    </div>
+  );
+}
+
+function UnreadSeparator({ count }: { count: number }) {
+  return (
+    <div className="flex items-center gap-3 py-2 my-2">
+      <div className="flex-1 h-px bg-red-500/50" />
+      <span className="text-xs font-semibold text-red-400 px-2 flex items-center gap-1">
+        <span className="w-2 h-2 bg-red-500 rounded-full" />
+        {count} new {count === 1 ? 'message' : 'messages'}
+      </span>
+      <div className="flex-1 h-px bg-red-500/50" />
+    </div>
+  );
+}
+
+function LoadingSpinner() {
+  return (
+    <div className="w-5 h-5 border-2 border-accent-cyan/30 border-t-accent-cyan rounded-full animate-spin" />
+  );
+}
+
+// =============================================================================
+// Helper functions
+// =============================================================================
+
+function shouldShowAvatar(messages: ChannelMessage[], index: number): boolean {
+  if (index === 0) return true;
+  const current = messages[index];
+  const previous = messages[index - 1];
+
+  // Show avatar if different sender
+  if (current.from !== previous.from) return true;
+
+  // Show avatar if more than 5 minutes since last message
+  const currentTime = new Date(current.timestamp).getTime();
+  const previousTime = new Date(previous.timestamp).getTime();
+  return currentTime - previousTime > 5 * 60 * 1000;
+}
+
+function formatDateKey(isoString: string): string {
+  return new Date(isoString).toDateString();
+}
+
+function formatDateDisplay(dateKey: string): string {
+  const date = new Date(dateKey);
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  if (date.toDateString() === today.toDateString()) {
+    return 'Today';
+  }
+  if (date.toDateString() === yesterday.toDateString()) {
+    return 'Yesterday';
+  }
+  return date.toLocaleDateString(undefined, {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+function formatTime(isoString: string): string {
+  return new Date(isoString).toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// =============================================================================
+// Icons
+// =============================================================================
+
+function MessageIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+function ThreadIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+function FileIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+    </svg>
+  );
+}
+
+export default ChannelMessageList;

package/src/components/channels/ChannelViewV1.tsx

@@ -0,0 +1,146 @@
+/**
+ * ChannelViewV1 Component
+ *
+ * Composed channel view that combines:
+ * - ChannelHeader
+ * - ChannelMessageList
+ * - MessageInput
+ *
+ * This is the main view component for displaying a channel's content.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { ChannelHeader } from './ChannelHeader';
+import { ChannelMessageList } from './ChannelMessageList';
+import { MessageInput } from './MessageInput';
+import type {
+  Channel,
+  ChannelMember,
+  ChannelMessage,
+  UnreadState,
+} from './types';
+
+export interface ChannelViewV1Props {
+  /** Current channel to display */
+  channel: Channel;
+  /** Channel members */
+  members?: ChannelMember[];
+  /** Messages in the channel */
+  messages: ChannelMessage[];
+  /** Unread state for the channel */
+  unreadState?: UnreadState;
+  /** Current user's name */
+  currentUser: string;
+  /** Whether user can edit the channel */
+  canEditChannel?: boolean;
+  /** Whether loading more messages */
+  isLoadingMore?: boolean;
+  /** Whether there are more messages to load */
+  hasMoreMessages?: boolean;
+  /** Available users/agents for @-mentions */
+  mentionSuggestions?: string[];
+  /** Callback to load more messages */
+  onLoadMore?: () => void;
+  /** Callback to send a message */
+  onSendMessage: (content: string) => void;
+  /** Callback when editing channel settings */
+  onEditChannel?: () => void;
+  /** Callback to show member list */
+  onShowMembers?: () => void;
+  /** Callback to show pinned messages */
+  onShowPinned?: () => void;
+  /** Callback to search in channel */
+  onSearch?: () => void;
+  /** Callback when clicking thread button */
+  onThreadClick?: (messageId: string) => void;
+  /** Callback when typing status changes */
+  onTyping?: (isTyping: boolean) => void;
+  /** Callback to mark messages as read */
+  onMarkRead?: (upToTimestamp: string) => void;
+  /** Callback when clicking on a member name (for DM navigation) */
+  onMemberClick?: (memberId: string, entityType: 'user' | 'agent') => void;
+}
+
+export function ChannelViewV1({
+  channel,
+  members = [],
+  messages,
+  unreadState,
+  currentUser,
+  canEditChannel = false,
+  isLoadingMore = false,
+  hasMoreMessages = false,
+  mentionSuggestions = [],
+  onLoadMore,
+  onSendMessage,
+  onEditChannel,
+  onShowMembers,
+  onShowPinned,
+  onSearch,
+  onThreadClick,
+  onTyping,
+  onMarkRead,
+  onMemberClick,
+}: ChannelViewV1Props) {
+  // Handle send
+  const handleSend = useCallback((content: string) => {
+    onSendMessage(content);
+  }, [onSendMessage]);
+
+  // Get placeholder text based on channel type
+  const inputPlaceholder = useMemo(() => {
+    if (channel.isDm) {
+      return `Message ${channel.name}`;
+    }
+    return `Message #${channel.name}`;
+  }, [channel]);
+
+  // Check if channel is archived (disable input)
+  const isArchived = channel.status === 'archived';
+
+  return (
+    <div className="flex flex-col h-full bg-bg-primary">
+      {/* Header */}
+      <ChannelHeader
+        channel={channel}
+        members={members}
+        canEdit={canEditChannel}
+        onEditChannel={onEditChannel}
+        onShowMembers={onShowMembers}
+        onShowPinned={onShowPinned}
+        onSearch={onSearch}
+      />
+
+      {/* Message List */}
+      <ChannelMessageList
+        messages={messages}
+        unreadState={unreadState}
+        currentUser={currentUser}
+        isLoadingMore={isLoadingMore}
+        hasMore={hasMoreMessages}
+        onLoadMore={onLoadMore}
+        onThreadClick={onThreadClick}
+        onMemberClick={onMemberClick}
+      />
+
+      {/* Message Input */}
+      {isArchived ? (
+        <div className="px-4 py-3 bg-bg-secondary border-t border-border-subtle text-center">
+          <p className="text-sm text-text-muted">
+            This channel is archived. Unarchive it to send messages.
+          </p>
+        </div>
+      ) : (
+        <MessageInput
+          channelId={channel.id}
+          placeholder={inputPlaceholder}
+          onSend={handleSend}
+          onTyping={onTyping}
+          mentionSuggestions={mentionSuggestions}
+        />
+      )}
+    </div>
+  );
+}
+
+export default ChannelViewV1;