@tuturuuu/ui 0.24.0 → 0.25.2

package/src/components/ui/chat/message-list.tsx

@@ -28,6 +28,7 @@ interface MessageListProps {
   onOpenAttachment?: (attachment: ChatAttachment) => void;
   onToggleReaction?: (messageId: string, emoji: string) => void;
   readOnly?: boolean;
+  typingLabel?: string;
   wsId: string;
 }
 
@@ -48,6 +49,7 @@ export function MessageList({
   onOpenAttachment,
   onToggleReaction,
   readOnly,
+  typingLabel,
   wsId,
 }: MessageListProps) {
   const t = useTranslations('chat');
@@ -210,7 +212,7 @@ export function MessageList({
                   </Button>
                 </div>
               ) : item.type === 'typing' ? (
-                <AgentTypingIndicator />
+                <AgentTypingIndicator label={typingLabel} />
               ) : (
                 <MessageRow
                   currentUserId={currentUserId}
@@ -270,7 +272,7 @@ function MessageRow({
   );
 }
 
-function AgentTypingIndicator() {
+function AgentTypingIndicator({ label }: { label?: string }) {
   const t = useTranslations('chat');
 
   return (
@@ -279,7 +281,7 @@ function AgentTypingIndicator() {
         <LoaderCircle className="size-4 animate-spin" />
       </div>
       <div className="rounded-md border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
-        <span className="sr-only">{t('agent_typing')}</span>
+        <span className="sr-only">{label ?? t('agent_typing')}</span>
         <span aria-hidden="true" className="flex items-center gap-1">
           <span className="size-1.5 animate-pulse rounded-full bg-current" />
           <span className="size-1.5 animate-pulse rounded-full bg-current delay-150" />

package/src/components/ui/chat/selection.ts

@@ -8,7 +8,7 @@ type RouterLike = {
   replace: (href: string, options?: { scroll?: boolean }) => void;
 };
 
-export type ChatDetailsTarget = 'agent' | null;
+export type ChatDetailsTarget = 'agent' | 'external' | null;
 
 export function buildChatSelectionHref({
   conversationId,

package/src/components/ui/chat/utils.ts

@@ -8,6 +8,13 @@ import type {
 export type ChatConversationScope = 'external' | 'personal' | 'workspaces';
 export type ChatConversationArchiveFilter = 'active' | 'all' | 'archived';
 
+export type ChatConversationDeliveryState =
+  | 'deleted'
+  | 'failed'
+  | 'seen'
+  | 'sending'
+  | 'sent';
+
 export const DEFAULT_CHAT_SCOPE: ChatConversationScope = 'personal';
 export const CHAT_CONVERSATION_TYPE_FILTERS = [
   'direct',
@@ -87,6 +94,40 @@ export function getChatConversationScope(
   return 'workspaces';
 }
 
+export function getChatConversationQueueDetails(
+  conversation: Pick<
+    ChatConversation,
+    'latestMessage' | 'metadata' | 'updatedAt'
+  >
+) {
+  const latestMessage = conversation.latestMessage;
+  const phone = readNonEmptyString(conversation.metadata.phone);
+
+  return {
+    deliveryState: latestMessage
+      ? getChatConversationDeliveryState(latestMessage)
+      : null,
+    phone,
+    preview: latestMessage?.deletedAt
+      ? null
+      : (readNonEmptyString(latestMessage?.content) ??
+        readNonEmptyString(latestMessage?.attachments[0]?.filename)),
+    timestamp: latestMessage?.createdAt ?? conversation.updatedAt,
+  };
+}
+
+export function getChatConversationDeliveryState(
+  message: Pick<ChatMessage, 'deletedAt' | 'metadata'>
+): ChatConversationDeliveryState {
+  if (message.deletedAt) return 'deleted';
+
+  const status = readNonEmptyString(message.metadata.status)?.toLowerCase();
+  if (status && /fail|error|reject/u.test(status)) return 'failed';
+  if (status && /seen|read/u.test(status)) return 'seen';
+  if (status && /pending|queue|sending/u.test(status)) return 'sending';
+  return 'sent';
+}
+
 export function isChatConversation(value: unknown): value is ChatConversation {
   const conversation = value as Partial<ChatConversation> | null | undefined;
 

package/src/components/ui/custom/__tests__/workspace-select-helpers.test.ts

@@ -115,14 +115,10 @@ describe('mergeWorkspaceSelectWorkspaces', () => {
   });
 
   it('keeps workspace fallback images outside Radix AvatarImage context', () => {
-    const workspaceSelectSource = readFileSync(
-      join(process.cwd(), 'src/components/ui/custom/workspace-select.tsx'),
+    const workspaceIconSource = readFileSync(
+      join(process.cwd(), 'src/components/ui/custom/workspace-select-icon.tsx'),
       'utf8'
     );
-    const workspaceIconSource = workspaceSelectSource.slice(
-      workspaceSelectSource.indexOf('function WorkspaceIcon'),
-      workspaceSelectSource.indexOf('export function WorkspaceSelect')
-    );
 
     expect(workspaceIconSource).toContain('<AvatarFallback');
     expect(workspaceIconSource).toContain('<Image');

package/src/components/ui/custom/__tests__/workspace-select-invitations.test.tsx

@@ -0,0 +1,141 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { WorkspaceInvitationRecord } from '@tuturuuu/internal-api/workspaces';
+import { NextIntlClientProvider } from 'next-intl';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Command, CommandInput, CommandList } from '../../command';
+import {
+  useWorkspaceInvitations,
+  WorkspaceInvitationItems,
+} from '../workspace-select-invitations';
+
+const mocks = vi.hoisted(() => ({
+  acceptWorkspaceInvite: vi.fn(),
+  declineWorkspaceInvite: vi.fn(),
+  listWorkspaceInvitations: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/internal-api/workspaces', () => ({
+  acceptWorkspaceInvite: mocks.acceptWorkspaceInvite,
+  declineWorkspaceInvite: mocks.declineWorkspaceInvite,
+  listWorkspaceInvitations: mocks.listWorkspaceInvitations,
+}));
+
+const invitation: WorkspaceInvitationRecord = {
+  createdAt: null,
+  matchedEmail: 'invitee@example.com',
+  source: 'email',
+  type: 'MEMBER',
+  workspace: {
+    avatar_url: null,
+    handle: 'acme',
+    id: 'workspace-1',
+    logo_url: null,
+    name: 'Acme',
+    personal: false,
+  },
+};
+
+const messages = {
+  common: {
+    guest_access: 'Guest',
+    members: 'Member',
+    retry: 'Retry',
+  },
+  'workspace-invitation': {
+    accept: 'Accept',
+    'accept-error': 'Could not accept',
+    'accept-success': 'Accepted',
+    'decline-error': 'Could not decline',
+    'decline-success': 'Declined',
+    'direct-invite': 'Direct invitation',
+    'email-invite': 'Email invitation',
+    'list-eyebrow': 'Pending invitations',
+    reject: 'Decline',
+  },
+};
+
+function Harness({
+  onAccepted = vi.fn(),
+  onDeclined = vi.fn(),
+}: {
+  onAccepted?: (value: WorkspaceInvitationRecord) => void;
+  onDeclined?: () => void;
+}) {
+  const controller = useWorkspaceInvitations({
+    cacheScope: 'user-1',
+    enabled: true,
+    onAccepted,
+    onDeclined,
+  });
+
+  return (
+    <Command>
+      <CommandInput aria-label="Search" />
+      <CommandList>
+        <WorkspaceInvitationItems
+          controller={controller}
+          fallbackLogoUrl="/logo.svg"
+        />
+      </CommandList>
+    </Command>
+  );
+}
+
+function renderHarness(props: Parameters<typeof Harness>[0] = {}) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <Harness {...props} />
+      </NextIntlClientProvider>
+    </QueryClientProvider>
+  );
+}
+
+describe('workspace invitation picker items', () => {
+  beforeAll(() => {
+    globalThis.ResizeObserver = class ResizeObserver {
+      disconnect() {}
+      observe() {}
+      unobserve() {}
+    };
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.listWorkspaceInvitations.mockResolvedValue({
+      invitations: [invitation],
+    });
+    mocks.acceptWorkspaceInvite.mockResolvedValue(undefined);
+    mocks.declineWorkspaceInvite.mockResolvedValue(undefined);
+  });
+
+  it('accepts the highlighted invitation and reports the accepted workspace', async () => {
+    const onAccepted = vi.fn();
+    renderHarness({ onAccepted });
+
+    const option = await screen.findByRole('option', { name: /Acme/ });
+    fireEvent.click(option);
+
+    await waitFor(() =>
+      expect(mocks.acceptWorkspaceInvite).toHaveBeenCalledWith('workspace-1')
+    );
+    await waitFor(() => expect(onAccepted).toHaveBeenCalledWith(invitation));
+  });
+
+  it('declines in place without activating the accept option', async () => {
+    const onDeclined = vi.fn();
+    renderHarness({ onDeclined });
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Decline' }));
+
+    await waitFor(() =>
+      expect(mocks.declineWorkspaceInvite).toHaveBeenCalledWith('workspace-1')
+    );
+    expect(mocks.acceptWorkspaceInvite).not.toHaveBeenCalled();
+    await waitFor(() => expect(onDeclined).toHaveBeenCalledOnce());
+  });
+});

package/src/components/ui/custom/notification-popover-client.tsx

@@ -22,6 +22,11 @@ import {
   X,
   XCircle,
 } from '@tuturuuu/icons';
+import { updateNotificationMetadata } from '@tuturuuu/internal-api';
+import {
+  acceptWorkspaceInvite,
+  declineWorkspaceInvite,
+} from '@tuturuuu/internal-api/workspaces';
 import { Button } from '@tuturuuu/ui/button';
 import {
   dedupeNotifications,
@@ -61,6 +66,11 @@ interface NotificationPopoverClientProps {
   archiveAllText?: string;
   emptyArchiveText?: string;
   loadingMoreText?: string;
+  retryText?: string;
+  acceptText?: string;
+  declineText?: string;
+  acceptedText?: string;
+  declinedText?: string;
   /** Base URL for external redirect (e.g. 'https://tuturuuu.com'). When set, "View All" links to {webAppUrl}/{wsId}/notifications. */
   webAppUrl?: string;
 }
@@ -93,6 +103,11 @@ export default function NotificationPopoverClient({
   archiveAllText = 'Archive all',
   emptyArchiveText = 'No archived notifications yet.',
   loadingMoreText = 'Loading more...',
+  retryText = 'Retry',
+  acceptText = 'Accept',
+  declineText = 'Decline',
+  acceptedText = 'Joined',
+  declinedText = 'Declined',
   webAppUrl,
 }: NotificationPopoverClientProps) {
   const [open, setOpen] = useState(false);
@@ -111,11 +126,13 @@ export default function NotificationPopoverClient({
 
   // Accurate unread count from dedicated endpoint
   const { data: unreadCount = 0 } = useUnreadCount(wsIdForFiltering, {
+    cacheScope: userId,
     enabled: Boolean(userId),
   });
 
   // Infinite scroll for inbox (unread) and archive (read)
   const inboxQuery = useInfiniteNotifications({
+    cacheScope: userId,
     wsId: wsIdForFiltering,
     unreadOnly: true,
     pageSize: 15,
@@ -123,6 +140,7 @@ export default function NotificationPopoverClient({
   });
 
   const archiveQuery = useInfiniteNotifications({
+    cacheScope: userId,
     wsId: wsIdForFiltering,
     readOnly: true,
     pageSize: 15,
@@ -176,7 +194,9 @@ export default function NotificationPopoverClient({
         <Button
           variant="ghost"
           size="icon"
-          className="group relative hidden flex-none transition-all md:flex"
+          aria-label={notificationsText}
+          title={notificationsText}
+          className="group relative flex size-10 flex-none transition-all"
         >
           <Bell className="h-6 w-6" />
           {unreadCount > 0 && (
@@ -261,6 +281,11 @@ export default function NotificationPopoverClient({
           noNotificationsText={noNotificationsText}
           emptyArchiveText={emptyArchiveText}
           loadingMoreText={loadingMoreText}
+          retryText={retryText}
+          acceptText={acceptText}
+          declineText={declineText}
+          acceptedText={acceptedText}
+          declinedText={declinedText}
           markAsReadText={markAsReadText}
           markAsUnreadText={markAsUnreadText}
           onMarkAsRead={handleMarkAsRead}
@@ -293,6 +318,11 @@ function NotificationList({
   noNotificationsText,
   emptyArchiveText,
   loadingMoreText,
+  retryText,
+  acceptText,
+  declineText,
+  acceptedText,
+  declinedText,
   markAsReadText,
   markAsUnreadText,
   onMarkAsRead,
@@ -307,6 +337,11 @@ function NotificationList({
   noNotificationsText: string;
   emptyArchiveText: string;
   loadingMoreText: string;
+  retryText: string;
+  acceptText: string;
+  declineText: string;
+  acceptedText: string;
+  declinedText: string;
   markAsReadText: string;
   markAsUnreadText: string;
   onMarkAsRead: (id: string, isUnread: boolean) => void;
@@ -357,6 +392,21 @@ function NotificationList({
         <p className="mt-1 text-foreground/40 text-xs">
           {query.error instanceof Error ? query.error.message : 'Unknown error'}
         </p>
+        <Button
+          className="mt-3"
+          disabled={query.isFetching}
+          onClick={() => query.refetch()}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          {query.isFetching ? (
+            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
+          )}
+          {retryText}
+        </Button>
       </div>
     );
   }
@@ -406,6 +456,10 @@ function NotificationList({
             markAsUnreadText={markAsUnreadText}
             queryClient={queryClient}
             onActionComplete={onActionComplete}
+            acceptText={acceptText}
+            declineText={declineText}
+            acceptedText={acceptedText}
+            declinedText={declinedText}
           />
         ))}
 
@@ -431,6 +485,10 @@ interface NotificationCardProps {
   markAsUnreadText: string;
   queryClient: any;
   onActionComplete?: () => void;
+  acceptText: string;
+  declineText: string;
+  acceptedText: string;
+  declinedText: string;
 }
 
 function getWorkspaceInviteWorkspaceId(notification: Notification) {
@@ -456,6 +514,10 @@ function NotificationCard({
   markAsUnreadText,
   queryClient,
   onActionComplete,
+  acceptText,
+  declineText,
+  acceptedText,
+  declinedText,
 }: NotificationCardProps) {
   const isUnread = !notification.read_at;
   const [processingAction, setProcessingAction] = useState<string | null>(null);
@@ -477,58 +539,34 @@ function NotificationCard({
             break;
           }
 
-          const url = `/api/workspaces/${targetWsId}/${
-            accept ? 'accept-invite' : 'decline-invite'
-          }`;
-
-          const res = await fetch(url, { method: 'POST' });
-
-          if (res.ok) {
-            const updateRes = await fetch(
-              `/api/v1/notifications/${notification.id}/metadata`,
-              {
-                method: 'PATCH',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                  action_taken: accept ? 'accepted' : 'declined',
-                  action_timestamp: new Date().toISOString(),
-                }),
-              }
-            );
-
-            if (updateRes.ok) {
-              await Promise.all([
-                queryClient.invalidateQueries({
-                  queryKey: ['workspaces'],
-                  refetchType: 'active',
-                }),
-                queryClient.invalidateQueries({
-                  queryKey: ['notifications'],
-                  refetchType: 'active',
-                }),
-                queryClient.refetchQueries({
-                  queryKey: ['notifications'],
-                  type: 'active',
-                }),
-              ]);
-
-              toast.success(
-                accept
-                  ? 'Workspace invite accepted'
-                  : 'Workspace invite declined'
-              );
-
-              onMarkAsRead(notification.id, true);
-              router.refresh();
-              onActionComplete?.();
-            } else {
-              toast.error('Failed to update notification');
-            }
-          } else {
-            const errorData = await res.json();
-            console.error('Failed to process invite:', errorData);
-            toast.error(errorData.error || 'Failed to process invite');
-          }
+          await (accept
+            ? acceptWorkspaceInvite(targetWsId)
+            : declineWorkspaceInvite(targetWsId));
+          await updateNotificationMetadata(notification.id, {
+            action_taken: accept ? 'accepted' : 'declined',
+            action_timestamp: new Date().toISOString(),
+          });
+
+          await Promise.all([
+            queryClient.invalidateQueries({
+              queryKey: ['workspaces'],
+              refetchType: 'active',
+            }),
+            queryClient.invalidateQueries({
+              queryKey: ['notifications'],
+              refetchType: 'active',
+            }),
+            queryClient.refetchQueries({
+              queryKey: ['notifications'],
+              type: 'active',
+            }),
+          ]);
+
+          toast.success(accept ? acceptedText : declinedText);
+
+          onMarkAsRead(notification.id, true);
+          router.refresh();
+          onActionComplete?.();
           break;
         }
         default:
@@ -597,13 +635,15 @@ function NotificationCard({
               {notification.data.action_taken === 'accepted' ? (
                 <>
                   <CheckCircle2 className="h-3 w-3 text-dynamic-green" />
-                  <span className="font-medium text-dynamic-green">Joined</span>
+                  <span className="font-medium text-dynamic-green">
+                    {acceptedText}
+                  </span>
                 </>
               ) : (
                 <>
                   <XCircle className="h-3 w-3 text-foreground/40" />
                   <span className="font-medium text-foreground/60">
-                    Declined
+                    {declinedText}
                   </span>
                 </>
               )}
@@ -627,7 +667,7 @@ function NotificationCard({
                 ) : (
                   <X className="h-3 w-3" />
                 )}
-                Decline
+                {declineText}
               </Button>
               <Button
                 size="sm"
@@ -644,7 +684,7 @@ function NotificationCard({
                 ) : (
                   <Check className="h-3 w-3" />
                 )}
-                Accept
+                {acceptText}
               </Button>
             </div>
           ) : isTaskEntityNotification ? (

package/src/components/ui/custom/workspace-select-icon.tsx

@@ -0,0 +1,58 @@
+import { cn } from '@tuturuuu/utils/format';
+import Image from 'next/image';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
+import { resolveWorkspaceAvatarUrl } from './workspace-select-helpers';
+
+export function WorkspaceIcon({
+  name,
+  avatarUrl,
+  className,
+  fallbackLogoUrl = TUTURUUU_LOGO_URL,
+}: {
+  name?: string | null;
+  avatarUrl?: string | null;
+  className?: string;
+  fallbackLogoUrl?: string;
+}) {
+  const resolvedAvatarUrl = resolveWorkspaceAvatarUrl(avatarUrl);
+  const shouldSkipFallbackOptimization = /^https?:\/\//u.test(fallbackLogoUrl);
+
+  return (
+    <Avatar
+      className={cn(
+        'h-5 max-h-5 min-h-5 w-5 min-w-5 max-w-5 flex-none overflow-hidden',
+        resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm',
+        className
+      )}
+    >
+      <AvatarImage
+        alt={name || 'Workspace'}
+        className={cn(
+          'h-full w-full object-cover',
+          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
+        )}
+        src={
+          resolvedAvatarUrl ||
+          (name ? `https://avatar.vercel.sh/${name}.png` : undefined)
+        }
+      />
+      <AvatarFallback
+        className={cn(
+          'h-full w-full text-xs',
+          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
+        )}
+      >
+        <Image
+          alt=""
+          aria-hidden="true"
+          className="h-full w-full object-cover"
+          height={20}
+          src={fallbackLogoUrl}
+          unoptimized={shouldSkipFallbackOptimization}
+          width={20}
+        />
+      </AvatarFallback>
+    </Avatar>
+  );
+}