@tuturuuu/ui 0.30.2 → 0.32.0

package/src/components/ui/calendar-app/components/calendar-sync-attention-button.tsx

@@ -0,0 +1,47 @@
+import { AlertTriangle } from '@tuturuuu/icons';
+import { useState } from 'react';
+import { Button } from '../../button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../../dialog';
+import { CalendarConnectionsSettingsContent } from './calendar-connections-settings-content';
+import { needsCalendarSyncAttention } from './calendar-sync-recovery';
+import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
+
+/** Keep recovery visible when the sidebar replaces the header calendar picker. */
+export function CalendarSyncAttentionButton({
+  state,
+}: {
+  state: CalendarConnectionsManagerState;
+}) {
+  const [open, setOpen] = useState(false);
+  if (!open && !needsCalendarSyncAttention(state)) return null;
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5 border-dynamic-orange/40 text-dynamic-orange"
+        >
+          <AlertTriangle className="size-4 shrink-0" />
+          {state.t('sync_recovery.attention')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-h-[85dvh] overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{state.t('manage_calendar_accounts')}</DialogTitle>
+          <DialogDescription>
+            {state.t('manage_calendar_accounts_desc')}
+          </DialogDescription>
+        </DialogHeader>
+        <CalendarConnectionsSettingsContent state={state} />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/calendar-app/components/calendar-sync-recovery.test.tsx

@@ -0,0 +1,112 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  CalendarSyncRecovery,
+  needsCalendarSyncAttention,
+} from './calendar-sync-recovery';
+import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
+
+function state(overrides: Partial<CalendarConnectionsManagerState> = {}) {
+  return {
+    accounts: [],
+    failedCalendars: [],
+    pauseFailedCalendarMutation: { mutate: vi.fn(), isPending: false },
+    providerAccountStatuses: {},
+    syncStatusError: false,
+    syncHealth: {
+      state: 'degraded',
+      reason: 'sync_stalled',
+      currentlyRunning: false,
+      lastSuccessAt: null,
+      lastFailureAt: null,
+      retryAfterSeconds: null,
+    },
+    retrySyncStatus: vi.fn(),
+    syncMutation: { mutate: vi.fn(), isPending: false },
+    manualSyncDisabled: false,
+    googleAuthMutation: { mutate: vi.fn(), isPending: false },
+    microsoftAuthMutation: { mutate: vi.fn(), isPending: false },
+    t: (key: string) => key,
+    ...overrides,
+  } as unknown as CalendarConnectionsManagerState;
+}
+describe('calendar sync recovery actions', () => {
+  it('shows a persistent warning with a working retry for the stalled-run case', () => {
+    const value = state();
+    render(<CalendarSyncRecovery state={value} />);
+    expect(screen.getByRole('alert').textContent).toContain(
+      'sync_recovery.stalled'
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'sync_now' }));
+    expect(value.syncMutation.mutate).toHaveBeenCalledOnce();
+    expect(screen.queryByText('sync_recovery.reconnect_google')).toBeNull();
+  });
+  it('rechecks failed status requests instead of starting an unobserved sync', () => {
+    const value = state({ syncStatusError: true });
+    render(<CalendarSyncRecovery state={value} />);
+    fireEvent.click(
+      screen.getByRole('button', { name: 'sync_recovery.check_again' })
+    );
+    expect(value.retrySyncStatus).toHaveBeenCalledOnce();
+    expect(value.syncMutation.mutate).not.toHaveBeenCalled();
+  });
+  it('offers Google reconnection for the affected account', () => {
+    const value = state({
+      accounts: [
+        {
+          id: 'google-account',
+          provider: 'google',
+          account_email: 'test@example.com',
+        } as never,
+      ],
+      providerAccountStatuses: {
+        'google-account': { state: 'reconnect_required' },
+      },
+    });
+    render(<CalendarSyncRecovery state={value} />);
+    fireEvent.click(
+      screen.getByRole('button', { name: 'sync_recovery.reconnect_google' })
+    );
+    expect(value.googleAuthMutation.mutate).toHaveBeenCalledOnce();
+  });
+  it('does not send users through OAuth for a temporary provider outage', () => {
+    const value = state({
+      providerAccountStatuses: { google: { state: 'temporarily_unavailable' } },
+    });
+    render(<CalendarSyncRecovery state={value} />);
+    expect(screen.getByRole('alert').textContent).toContain(
+      'sync_recovery.provider_unavailable'
+    );
+    expect(screen.queryByText('sync_recovery.reconnect_google')).toBeNull();
+  });
+  it('hides the warning after a healthy sync', () => {
+    const value = state();
+    value.syncHealth!.state = 'healthy';
+    expect(needsCalendarSyncAttention(value)).toBe(false);
+    render(<CalendarSyncRecovery state={value} />);
+    expect(screen.queryByRole('alert')).toBeNull();
+  });
+});
+
+it('can pause an identified calendar during the retry cooldown without deleting saved events', () => {
+  const value = state({
+    manualSyncDisabled: true,
+    failedCalendars: [
+      {
+        connectionId: 'broken',
+        calendarName: 'Unavailable calendar',
+        code: 'not_found',
+      },
+    ],
+  });
+  render(<CalendarSyncRecovery state={value} />);
+  expect(screen.getByRole('button', { name: 'sync_now' })).toBeDisabled();
+  expect(screen.getByText('Unavailable calendar')).toBeVisible();
+  fireEvent.click(
+    screen.getByRole('button', { name: 'sync_recovery.pause_calendar' })
+  );
+  expect(value.pauseFailedCalendarMutation.mutate).toHaveBeenCalledWith(
+    'broken'
+  );
+  expect(value.syncMutation.mutate).not.toHaveBeenCalled();
+});

package/src/components/ui/calendar-app/components/calendar-sync-recovery.tsx

@@ -0,0 +1,206 @@
+import { AlertTriangle, RefreshCw } from '@tuturuuu/icons';
+import { Alert, AlertDescription, AlertTitle } from '../../alert';
+import { Button } from '../../button';
+import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
+
+type RecoveryState = Pick<
+  CalendarConnectionsManagerState,
+  | 'failedCalendars'
+  | 'pauseFailedCalendarMutation'
+  | 'accounts'
+  | 'providerAccountStatuses'
+  | 'syncHealth'
+  | 'syncStatusError'
+  | 'retrySyncStatus'
+  | 'syncMutation'
+  | 'manualSyncDisabled'
+  | 'googleAuthMutation'
+  | 'microsoftAuthMutation'
+  | 't'
+>;
+
+export function needsCalendarSyncAttention(
+  state: Pick<
+    RecoveryState,
+    | 'syncHealth'
+    | 'syncStatusError'
+    | 'providerAccountStatuses'
+    | 'syncMutation'
+  >
+) {
+  const lastSuccess = state.syncHealth?.lastSuccessAt;
+  const failedAttemptIsNewer =
+    !lastSuccess || Date.parse(lastSuccess) < state.syncMutation.submittedAt;
+  return (
+    state.syncStatusError ||
+    (failedAttemptIsNewer &&
+      (state.syncMutation.isError || state.syncMutation.data?.ok === false)) ||
+    state.syncHealth?.state === 'degraded' ||
+    Object.values(state.providerAccountStatuses).some(
+      (status) => status.state !== 'connected'
+    )
+  );
+}
+
+export function CalendarSyncRecovery({ state }: { state: RecoveryState }) {
+  const { t, syncHealth, syncStatusError, providerAccountStatuses } = state;
+  if (!needsCalendarSyncAttention(state) && !state.syncMutation.isPending)
+    return null;
+  const reconnectAccounts = state.accounts.filter(
+    (account) =>
+      providerAccountStatuses[account.id]?.state === 'reconnect_required'
+  );
+  const reason = syncStatusError
+    ? 'unavailable'
+    : reconnectAccounts.length
+      ? 'reconnect_required'
+      : Object.values(providerAccountStatuses).some(
+            (status) => status.state === 'temporarily_unavailable'
+          )
+        ? 'provider_unavailable'
+        : syncHealth?.state === 'degraded'
+          ? syncHealth.reason
+          : 'last_run_failed';
+  const description =
+    reason === 'sync_stalled'
+      ? 'sync_recovery.stalled'
+      : reason === 'sync_stale'
+        ? 'sync_recovery.stale'
+        : reason === 'not_synced'
+          ? 'sync_recovery.not_synced'
+          : reason === 'unavailable'
+            ? 'sync_recovery.status_failed'
+            : reason === 'reconnect_required' || reason === 'auth'
+              ? 'sync_recovery.reconnect_description'
+              : reason === 'configuration'
+                ? 'sync_recovery.configuration'
+                : reason === 'api_limit'
+                  ? 'sync_recovery.rate_limited'
+                  : reason === 'provider_unavailable'
+                    ? 'sync_recovery.provider_unavailable'
+                    : 'sync_recovery.failed';
+  const reconnectProviders = new Set(
+    reconnectAccounts.map((account) => account.provider)
+  );
+  if (
+    !reconnectProviders.size &&
+    (reason === 'auth' || reason === 'reconnect_required')
+  ) {
+    for (const provider of state.accounts.length
+      ? state.accounts.map((account) => account.provider)
+      : (['google', 'microsoft'] as const))
+      reconnectProviders.add(provider);
+  }
+  return (
+    <Alert className="border-dynamic-orange/30 bg-dynamic-orange/5 text-foreground">
+      <AlertTriangle className="size-4 text-dynamic-orange" />
+      <AlertTitle>{t('sync_recovery.attention')}</AlertTitle>
+      <AlertDescription className="space-y-3">
+        <p>
+          {t(
+            state.syncMutation.isPending
+              ? 'sync_recovery.syncing_description'
+              : description
+          )}
+        </p>
+        <p className="text-muted-foreground text-xs">
+          {t('sync_recovery.saved_events')}
+        </p>
+        {!!state.failedCalendars?.length && (
+          <ul className="space-y-2">
+            {state.failedCalendars.map((failure) => (
+              <li
+                key={failure.connectionId}
+                className="space-y-2 rounded-md border p-3"
+              >
+                <p className="break-words font-medium">
+                  {failure.calendarName}
+                </p>
+                <p className="text-muted-foreground text-xs">
+                  {t(
+                    failure.code === 'not_found' ||
+                      failure.code === 'access_denied'
+                      ? 'sync_recovery.calendar_unavailable'
+                      : 'sync_recovery.calendar_failed'
+                  )}
+                </p>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  disabled={state.pauseFailedCalendarMutation.isPending}
+                  onClick={() =>
+                    state.pauseFailedCalendarMutation.mutate(
+                      failure.connectionId
+                    )
+                  }
+                >
+                  {t('sync_recovery.pause_calendar')}
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+        {syncHealth?.lastSuccessAt && (
+          <p className="text-xs">
+            {t('last_synced_at', {
+              time: new Date(syncHealth.lastSuccessAt).toLocaleString(),
+            })}
+          </p>
+        )}
+        {reconnectAccounts.map((account) => (
+          <p key={account.id} className="break-all text-xs">
+            {account.account_email}
+          </p>
+        ))}
+        <div className="flex flex-wrap gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={syncStatusError ? false : state.manualSyncDisabled}
+            onClick={() =>
+              syncStatusError
+                ? void state.retrySyncStatus()
+                : state.syncMutation.mutate()
+            }
+          >
+            <RefreshCw
+              className={
+                state.syncMutation.isPending ? 'size-4 animate-spin' : 'size-4'
+              }
+            />
+            {syncStatusError
+              ? t('sync_recovery.check_again')
+              : state.syncMutation.isPending
+                ? t('syncing_calendars')
+                : t('sync_now')}
+          </Button>
+          {reconnectProviders.has('google') && (
+            <Button
+              size="sm"
+              disabled={state.googleAuthMutation.isPending}
+              onClick={() => state.googleAuthMutation.mutate()}
+            >
+              {t('sync_recovery.reconnect_google')}
+            </Button>
+          )}
+          {reconnectProviders.has('microsoft') && (
+            <Button
+              size="sm"
+              disabled={state.microsoftAuthMutation.isPending}
+              onClick={() => state.microsoftAuthMutation.mutate()}
+            >
+              {t('sync_recovery.reconnect_microsoft')}
+            </Button>
+          )}
+        </div>
+        {(syncHealth?.retryAfterSeconds ?? 0) > 0 && (
+          <p className="text-xs">
+            {t('sync_recovery.retry_after', {
+              seconds: syncHealth!.retryAfterSeconds!,
+            })}
+          </p>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+}

package/src/components/ui/calendar-app/components/calendar-types.ts

@@ -37,7 +37,7 @@ export interface CalendarAuthToken {
 }
 
 export interface CalendarSyncHealth {
-  state: 'disconnected' | 'syncing' | 'healthy' | 'degraded';
+  state: 'paused' | 'disconnected' | 'syncing' | 'healthy' | 'degraded';
   reason: string;
   lastSuccessAt: string | null;
   lastFailureAt: string | null;

package/src/components/ui/calendar-app/components/use-calendar-connections-manager.ts

@@ -3,6 +3,10 @@ import {
   getGoogleCalendarAuthUrl,
   getWorkspaceCalendarDefaultSource,
   getWorkspaceCalendarSyncPreferences,
+  getWorkspaceCalendarSyncStatus,
+  listCalendarAccounts,
+  listProviderCalendars,
+  syncWorkspaceCalendar,
   updateCalendarConnection as updateCalendarConnectionRequest,
   updateWorkspaceCalendarDefaultSource,
   updateWorkspaceCalendarSyncPreferences,
@@ -16,18 +20,16 @@ import { toast } from '../../sonner';
 import {
   type AccountsResponse,
   getCalendarColor,
-  type ManualSyncResponse,
   sourceInputFromOption,
   type WorkspaceCalendarsResponse,
 } from './calendar-connections-manager-helpers';
-import type {
-  AuthResponse,
-  CalendarSyncHealth,
-  ProviderCalendar,
-} from './calendar-types';
+import type { AuthResponse } from './calendar-types';
 import { mergeProviderCalendarsByAccount } from './merge-provider-calendars';
 
-export type CalendarConnectionsUnifiedVariant = 'compact' | 'settings';
+export type CalendarConnectionsUnifiedVariant =
+  | 'compact'
+  | 'settings'
+  | 'status';
 
 export function useCalendarConnectionsManager(wsId: string) {
   const t = useTranslations('calendar');
@@ -59,81 +61,73 @@ export function useCalendarConnectionsManager(wsId: string) {
   } = useCalendarSync();
 
   const syncMutation = useMutation({
-    mutationFn: async () => {
-      const response = await fetch(`/api/v1/workspaces/${wsId}/calendar/sync`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ direction: 'inbound', source: 'manual' }),
-      });
-
-      const result = (await response.json()) as ManualSyncResponse &
-        Record<string, unknown>;
-      if (!response.ok) {
-        throw new Error(
-          typeof result.error === 'string'
-            ? result.error
-            : 'Failed to sync calendars'
-        );
-      }
-
-      return result;
+    mutationFn: () => syncWorkspaceCalendar(wsId),
+    onSuccess: (result) => {
+      if (!result.ok) toast.error(t('sync_recovery.partial_failure'));
+      else if (result.alreadyRunning) toast.info(t('syncing_calendars'));
+      else toast.success(t('sync_recovery.completed'));
+    },
+    onError: () => toast.error(t('sync_recovery.failed')),
+    onSettled: async () => {
+      await Promise.all(
+        [
+          ['calendar-sync-status', wsId],
+          ['provider-calendar-list', wsId],
+          ['databaseCalendarEvents', wsId],
+        ].map((queryKey) => queryClient.invalidateQueries({ queryKey }))
+      );
     },
-    onSuccess: async (result) => {
-      await queryClient.invalidateQueries({
-        queryKey: ['calendar-sync-status', wsId],
-      });
-      await queryClient.invalidateQueries({
-        queryKey: ['databaseCalendarEvents', wsId],
-        exact: false,
-      });
+  });
 
-      if (!result.alreadyRunning) {
-        toast.success(t('calendar_sync_started') || 'Calendar sync started');
-      }
-    },
-    onError: (error: Error) => {
-      toast.error(error.message);
+  const pauseFailedCalendarMutation = useMutation({
+    mutationFn: (connectionId: string) =>
+      updateCalendarConnectionRequest({
+        id: connectionId,
+        wsId,
+        syncInboundEnabled: false,
+      }),
+    onSuccess: async (_, connectionId) => {
+      setCalendarConnections((current) =>
+        current.map((connection) =>
+          connection.id === connectionId
+            ? { ...connection, sync_inbound_enabled: false }
+            : connection
+        )
+      );
+      await Promise.all(
+        [
+          ['calendar-sync-status', wsId],
+          ['calendar-connections', wsId],
+          ['provider-calendar-list', wsId],
+        ].map((queryKey) => queryClient.invalidateQueries({ queryKey }))
+      );
+      toast.success(t('sync_recovery.calendar_paused'));
     },
+    onError: () => toast.error(t('sync_recovery.pause_failed')),
   });
 
   // Fetch connected accounts
-  const { data: accountsData, isLoading: isLoadingAccounts } = useQuery({
+  const accountsQuery = useQuery({
     queryKey: ['calendar-accounts', wsId],
-    queryFn: async () => {
-      const response = await fetch(
-        `/api/v1/calendar/auth/accounts?wsId=${wsId}`,
-        { cache: 'no-store' }
-      );
-      if (!response.ok)
-        return {
-          accounts: [],
-          grouped: { google: [], microsoft: [] },
-          total: 0,
-        };
-      return response.json() as Promise<AccountsResponse>;
-    },
+    queryFn: () => listCalendarAccounts(wsId) as Promise<AccountsResponse>,
     staleTime: 30_000,
+    retry: 1,
   });
-
-  const accounts = accountsData?.accounts || [];
+  const accounts = accountsQuery.data?.accounts || [];
+  const isLoadingAccounts = accountsQuery.isLoading;
   const hasConnectedAccounts = accounts.length > 0;
-
-  const { data: syncStatusData } = useQuery({
+  const syncStatusQuery = useQuery({
     queryKey: ['calendar-sync-status', wsId],
-    queryFn: async () => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/calendar/sync-status`,
-        { cache: 'no-store' }
-      );
-      if (!response.ok) return null;
-      return response.json() as Promise<{
-        health: CalendarSyncHealth;
-        accountsSummary: { total: number; google: number; microsoft: number };
-        connectionsSummary: { total: number; enabled: number };
-      }>;
-    },
+    queryFn: () => getWorkspaceCalendarSyncStatus(wsId),
     staleTime: 15_000,
+    retry: 1,
+    refetchInterval: (query) =>
+      query.state.data?.health.currentlyRunning ||
+      query.state.data?.health.retryAfterSeconds
+        ? 5_000
+        : 30_000,
   });
+  const syncStatusData = syncStatusQuery.data;
 
   const { data: defaultSourceData } = useQuery({
     queryKey: ['calendar-default-source', wsId],
@@ -571,37 +565,35 @@ export function useCalendarConnectionsManager(wsId: string) {
       ? 'bg-dynamic-blue/10 text-dynamic-blue'
       : syncHealth?.state === 'healthy'
         ? 'bg-dynamic-green/10 text-dynamic-green'
-        : syncHealth?.state === 'disconnected'
+        : syncHealth?.state === 'disconnected' || syncHealth?.state === 'paused'
           ? 'bg-muted text-muted-foreground'
           : syncHealth?.state === 'degraded'
             ? 'bg-dynamic-orange/10 text-dynamic-orange'
             : 'bg-dynamic-red/10 text-dynamic-red';
 
   // Fetch Google calendars from API (must be before any conditional returns)
-  const { data: googleCalendarsData } = useQuery({
+  const providerCalendarsQuery = useQuery({
     queryKey: ['provider-calendar-list', wsId],
     enabled: hasConnectedAccounts,
-    queryFn: async () => {
-      const response = await fetch(
-        `/api/v1/calendar/auth/provider-calendars?wsId=${wsId}`,
-        { cache: 'no-store' }
-      );
-      if (!response.ok)
-        return { calendars: [], byAccount: {}, accountStatuses: {} };
-      return response.json() as Promise<{
-        calendars: ProviderCalendar[];
-        byAccount: Record<string, ProviderCalendar[]>;
-        accountStatuses: Record<
-          string,
-          { state: 'connected' | 'reconnect_required' }
-        >;
-      }>;
-    },
+    queryFn: () => listProviderCalendars(wsId),
     staleTime: 30_000,
+    refetchInterval: 60_000,
+    retry: 1,
   });
-
-  const calendarsByAccountFromAPI = googleCalendarsData?.byAccount || {};
-  const providerAccountStatuses = googleCalendarsData?.accountStatuses || {};
+  const calendarsByAccountFromAPI =
+    providerCalendarsQuery.data?.byAccount || {};
+  const providerAccountStatuses =
+    providerCalendarsQuery.data?.accountStatuses || {};
+  const syncStatusError =
+    accountsQuery.isError ||
+    syncStatusQuery.isError ||
+    providerCalendarsQuery.isError;
+  const retrySyncStatus = () =>
+    Promise.all([
+      accountsQuery.refetch(),
+      syncStatusQuery.refetch(),
+      providerCalendarsQuery.refetch(),
+    ]);
 
   const calendarsByAccount = mergeProviderCalendarsByAccount({
     accounts,
@@ -614,6 +606,8 @@ export function useCalendarConnectionsManager(wsId: string) {
 
   return {
     accounts,
+    failedCalendars: syncStatusData?.failedCalendars ?? [],
+    pauseFailedCalendarMutation,
     calendarConnections,
     calendarsByAccount,
     providerAccountStatuses,
@@ -642,6 +636,8 @@ export function useCalendarConnectionsManager(wsId: string) {
     setShowCreateCalendarDialog,
     showCreateCalendarDialog,
     syncHealth,
+    syncStatusError,
+    retrySyncStatus,
     syncMutation,
     syncPreferencesData,
     syncPreferencesMutation,

package/src/components/ui/chat/ai-message-markdown.tsx

@@ -4,8 +4,13 @@ import { cjk } from '@streamdown/cjk';
 import { code } from '@streamdown/code';
 import { createMathPlugin } from '@streamdown/math';
 import { mermaid as mermaidPlugin } from '@streamdown/mermaid';
-import { Component, type ErrorInfo, type ReactNode } from 'react';
-import { Streamdown } from 'streamdown';
+import {
+  Component,
+  type ComponentProps,
+  type ErrorInfo,
+  type ReactNode,
+} from 'react';
+import { defaultRemarkPlugins, Streamdown } from 'streamdown';
 
 const math = createMathPlugin({ singleDollarTextMath: true });
 const markdownPlugins = {
@@ -40,9 +45,13 @@ class AiMarkdownErrorBoundary extends Component<
 export function AssistantMarkdown({
   isAnimating,
   text,
+  components,
+  remarkPlugins,
 }: {
   isAnimating?: boolean;
   text: string;
+  components?: ComponentProps<typeof Streamdown>['components'];
+  remarkPlugins?: ComponentProps<typeof Streamdown>['remarkPlugins'];
 }) {
   return (
     <div className="wrap-break-word [&_pre]:overflow-x-hidden! [&_pre]:whitespace-pre-wrap! [&_pre_code]:whitespace-pre-wrap! min-w-0 max-w-full overflow-hidden [&_a]:break-all [&_pre]:max-w-full">
@@ -50,6 +59,12 @@ export function AssistantMarkdown({
         fallback={<p className="whitespace-pre-wrap">{text}</p>}
       >
         <Streamdown
+          components={components}
+          remarkPlugins={
+            remarkPlugins
+              ? [...Object.values(defaultRemarkPlugins), ...remarkPlugins]
+              : undefined
+          }
           caret="block"
           controls={{ code: !isAnimating, mermaid: !isAnimating }}
           isAnimating={isAnimating}