@lobehub/lobehub 2.0.0-next.276 → 2.0.0-next.277

package/src/app/[variants]/(main)/agent/cron/[cronId]/CronConfig.ts

@@ -0,0 +1,179 @@
+import type { Dayjs } from 'dayjs';
+
+export type ScheduleType = 'daily' | 'hourly' | 'weekly';
+
+// Schedule type options
+export const SCHEDULE_TYPE_OPTIONS = [
+  { label: 'agentCronJobs.scheduleType.daily', value: 'daily' },
+  { label: 'agentCronJobs.scheduleType.hourly', value: 'hourly' },
+  { label: 'agentCronJobs.scheduleType.weekly', value: 'weekly' },
+] as const;
+
+// Timezone options - covering major cities worldwide
+export const TIMEZONE_OPTIONS = [
+  { label: 'UTC', value: 'UTC' },
+
+  // Americas
+  { label: 'America/New_York (EST/EDT, UTC-5/-4)', value: 'America/New_York' },
+  { label: 'America/Chicago (CST/CDT, UTC-6/-5)', value: 'America/Chicago' },
+  { label: 'America/Denver (MST/MDT, UTC-7/-6)', value: 'America/Denver' },
+  { label: 'America/Los_Angeles (PST/PDT, UTC-8/-7)', value: 'America/Los_Angeles' },
+  { label: 'America/Toronto (EST/EDT, UTC-5/-4)', value: 'America/Toronto' },
+  { label: 'America/Vancouver (PST/PDT, UTC-8/-7)', value: 'America/Vancouver' },
+  { label: 'America/Mexico_City (CST, UTC-6)', value: 'America/Mexico_City' },
+  { label: 'America/Sao_Paulo (BRT, UTC-3)', value: 'America/Sao_Paulo' },
+  { label: 'America/Buenos_Aires (ART, UTC-3)', value: 'America/Buenos_Aires' },
+
+  // Europe
+  { label: 'Europe/London (GMT/BST, UTC+0/+1)', value: 'Europe/London' },
+  { label: 'Europe/Paris (CET/CEST, UTC+1/+2)', value: 'Europe/Paris' },
+  { label: 'Europe/Berlin (CET/CEST, UTC+1/+2)', value: 'Europe/Berlin' },
+  { label: 'Europe/Madrid (CET/CEST, UTC+1/+2)', value: 'Europe/Madrid' },
+  { label: 'Europe/Rome (CET/CEST, UTC+1/+2)', value: 'Europe/Rome' },
+  { label: 'Europe/Amsterdam (CET/CEST, UTC+1/+2)', value: 'Europe/Amsterdam' },
+  { label: 'Europe/Brussels (CET/CEST, UTC+1/+2)', value: 'Europe/Brussels' },
+  { label: 'Europe/Moscow (MSK, UTC+3)', value: 'Europe/Moscow' },
+  { label: 'Europe/Istanbul (TRT, UTC+3)', value: 'Europe/Istanbul' },
+
+  // Asia
+  { label: 'Asia/Dubai (GST, UTC+4)', value: 'Asia/Dubai' },
+  { label: 'Asia/Kolkata (IST, UTC+5:30)', value: 'Asia/Kolkata' },
+  { label: 'Asia/Shanghai (CST, UTC+8)', value: 'Asia/Shanghai' },
+  { label: 'Asia/Hong_Kong (HKT, UTC+8)', value: 'Asia/Hong_Kong' },
+  { label: 'Asia/Taipei (CST, UTC+8)', value: 'Asia/Taipei' },
+  { label: 'Asia/Singapore (SGT, UTC+8)', value: 'Asia/Singapore' },
+  { label: 'Asia/Tokyo (JST, UTC+9)', value: 'Asia/Tokyo' },
+  { label: 'Asia/Seoul (KST, UTC+9)', value: 'Asia/Seoul' },
+  { label: 'Asia/Bangkok (ICT, UTC+7)', value: 'Asia/Bangkok' },
+  { label: 'Asia/Jakarta (WIB, UTC+7)', value: 'Asia/Jakarta' },
+
+  // Oceania
+  { label: 'Australia/Sydney (AEDT/AEST, UTC+11/+10)', value: 'Australia/Sydney' },
+  { label: 'Australia/Melbourne (AEDT/AEST, UTC+11/+10)', value: 'Australia/Melbourne' },
+  { label: 'Australia/Brisbane (AEST, UTC+10)', value: 'Australia/Brisbane' },
+  { label: 'Australia/Perth (AWST, UTC+8)', value: 'Australia/Perth' },
+  { label: 'Pacific/Auckland (NZDT/NZST, UTC+13/+12)', value: 'Pacific/Auckland' },
+
+  // Africa & Middle East
+  { label: 'Africa/Cairo (EET, UTC+2)', value: 'Africa/Cairo' },
+  { label: 'Africa/Johannesburg (SAST, UTC+2)', value: 'Africa/Johannesburg' },
+];
+
+// Weekday options for checkbox group
+export const WEEKDAY_OPTIONS = [
+  { label: 'Mon', value: 1 },
+  { label: 'Tue', value: 2 },
+  { label: 'Wed', value: 3 },
+  { label: 'Thu', value: 4 },
+  { label: 'Fri', value: 5 },
+  { label: 'Sat', value: 6 },
+  { label: 'Sun', value: 0 },
+];
+
+// Weekday labels for display
+export const WEEKDAY_LABELS: Record<number, string> = {
+  0: 'Sunday',
+  1: 'Monday',
+  2: 'Tuesday',
+  3: 'Wednesday',
+  4: 'Thursday',
+  5: 'Friday',
+  6: 'Saturday',
+};
+
+/**
+ * Parse cron pattern to extract schedule info
+ * Format: minute hour day month weekday
+ */
+export const parseCronPattern = (
+  cronPattern: string,
+): {
+  hourlyInterval?: number;
+  scheduleType: ScheduleType;
+  triggerHour: number;
+  triggerMinute: number;
+  weekdays?: number[];
+} => {
+  const parts = cronPattern.split(' ');
+  if (parts.length !== 5) {
+    return { scheduleType: 'daily', triggerHour: 0, triggerMinute: 0 };
+  }
+
+  // eslint-disable-next-line unicorn/no-unreadable-array-destructuring
+  const [minute, hour, , , weekday] = parts;
+  const rawMinute = minute === '*' ? 0 : Number.parseInt(minute);
+  // Normalize to nearest 30-minute interval (0 or 30)
+  const triggerMinute = rawMinute >= 15 && rawMinute < 45 ? 30 : 0;
+
+  // Hourly: 0 * * * * or 0 */N * * *
+  if (hour.startsWith('*/')) {
+    const interval = Number.parseInt(hour.slice(2));
+    return {
+      hourlyInterval: interval,
+      scheduleType: 'hourly',
+      triggerHour: 0,
+      triggerMinute,
+    };
+  }
+  if (hour === '*') {
+    return {
+      hourlyInterval: 1,
+      scheduleType: 'hourly',
+      triggerHour: 0,
+      triggerMinute,
+    };
+  }
+
+  const triggerHour = Number.parseInt(hour);
+
+  // Weekly: has specific weekday(s)
+  if (weekday !== '*') {
+    const weekdays = weekday.split(',').map((d) => Number.parseInt(d));
+    return {
+      scheduleType: 'weekly',
+      triggerHour,
+      triggerMinute,
+      weekdays,
+    };
+  }
+
+  // Daily: specific hour, any weekday
+  return {
+    scheduleType: 'daily',
+    triggerHour,
+    triggerMinute,
+  };
+};
+
+/**
+ * Build cron pattern from schedule info
+ * Format: minute hour day month weekday
+ */
+export const buildCronPattern = (
+  scheduleType: ScheduleType,
+  triggerTime: Dayjs,
+  hourlyInterval?: number,
+  weekdays?: number[],
+): string => {
+  const rawMinute = triggerTime.minute();
+  // Normalize to 0 or 30
+  const minute = rawMinute >= 15 && rawMinute < 45 ? 30 : 0;
+  const hour = triggerTime.hour();
+
+  switch (scheduleType) {
+    case 'hourly': {
+      const interval = hourlyInterval || 1;
+      if (interval === 1) {
+        return `${minute} * * * *`;
+      }
+      return `${minute} */${interval} * * *`;
+    }
+    case 'daily': {
+      return `${minute} ${hour} * * *`;
+    }
+    case 'weekly': {
+      const days = weekdays && weekdays.length > 0 ? weekdays.sort().join(',') : '0,1,2,3,4,5,6';
+      return `${minute} ${hour} * * ${days}`;
+    }
+  }
+};

package/src/app/[variants]/(main)/agent/cron/[cronId]/features/CronJobContentEditor.tsx

@@ -0,0 +1,111 @@
+import {
+  ReactCodePlugin,
+  ReactCodemirrorPlugin,
+  ReactHRPlugin,
+  ReactLinkPlugin,
+  ReactListPlugin,
+  ReactMathPlugin,
+  ReactTablePlugin,
+} from '@lobehub/editor';
+import { Editor, useEditor } from '@lobehub/editor/react';
+import { Flexbox, Icon, Text } from '@lobehub/ui';
+import { Card } from 'antd';
+import { Clock } from 'lucide-react';
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface CronJobContentEditorProps {
+  enableRichRender: boolean;
+  initialValue: string;
+  onChange: (value: string) => void;
+}
+
+const CronJobContentEditor = memo<CronJobContentEditorProps>(
+  ({ enableRichRender, initialValue, onChange }) => {
+    const { t } = useTranslation('setting');
+    const editor = useEditor();
+    const currentValueRef = useRef(initialValue);
+
+    // Update currentValueRef when initialValue changes
+    useEffect(() => {
+      currentValueRef.current = initialValue;
+    }, [initialValue]);
+
+    // Initialize editor content when editor is ready
+    useEffect(() => {
+      if (!editor) return;
+      try {
+        setTimeout(() => {
+          if (initialValue) {
+            editor.setDocument(enableRichRender ? 'markdown' : 'text', initialValue);
+          }
+        }, 100);
+      } catch (error) {
+        console.error('[CronJobContentEditor] Failed to initialize editor content:', error);
+        setTimeout(() => {
+          editor.setDocument(enableRichRender ? 'markdown' : 'text', initialValue);
+        }, 100);
+      }
+    }, [editor, enableRichRender, initialValue]);
+
+    // Handle content changes
+    const handleContentChange = useCallback(
+      (e: any) => {
+        const nextContent = enableRichRender
+          ? (e.getDocument('markdown') as unknown as string)
+          : (e.getDocument('text') as unknown as string);
+
+        const finalContent = nextContent || '';
+
+        // Only call onChange if content actually changed
+        if (finalContent !== currentValueRef.current) {
+          currentValueRef.current = finalContent;
+          onChange(finalContent);
+        }
+      },
+      [enableRichRender, onChange],
+    );
+
+    return (
+      <Flexbox gap={12}>
+        <Flexbox align="center" gap={6} horizontal>
+          <Icon icon={Clock} size={16} />
+          <Text style={{ fontWeight: 600 }}>{t('agentCronJobs.content')}</Text>
+        </Flexbox>
+        <Card
+          size="small"
+          style={{ borderRadius: 12, overflow: 'hidden' }}
+          styles={{ body: { padding: 0 } }}
+        >
+          <Flexbox padding={16} style={{ minHeight: 220 }}>
+            <Editor
+              content={''}
+              editor={editor}
+              lineEmptyPlaceholder={t('agentCronJobs.form.content.placeholder')}
+              onTextChange={handleContentChange}
+              placeholder={t('agentCronJobs.form.content.placeholder')}
+              plugins={
+                enableRichRender
+                  ? [
+                      ReactListPlugin,
+                      ReactCodePlugin,
+                      ReactCodemirrorPlugin,
+                      ReactHRPlugin,
+                      ReactLinkPlugin,
+                      ReactTablePlugin,
+                      ReactMathPlugin,
+                    ]
+                  : undefined
+              }
+              style={{ paddingBottom: 48 }}
+              type={'text'}
+              variant={'chat'}
+            />
+          </Flexbox>
+        </Card>
+      </Flexbox>
+    );
+  },
+);
+
+export default CronJobContentEditor;

package/src/app/[variants]/(main)/agent/cron/[cronId]/features/CronJobHeader.tsx

@@ -0,0 +1,45 @@
+import { Flexbox, Input } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface CronJobHeaderProps {
+  enabled?: boolean;
+  isNewJob?: boolean;
+  name: string;
+  onNameChange: (name: string) => void;
+  onToggleEnabled?: (enabled: boolean) => void;
+}
+
+const CronJobHeader = memo<CronJobHeaderProps>(
+  ({ enabled, isNewJob, name, onNameChange, onToggleEnabled }) => {
+    const { t } = useTranslation(['setting', 'common']);
+
+    return (
+      <Flexbox gap={16}>
+        {/* Title Input */}
+        <Input
+          onChange={(e) => onNameChange(e.target.value)}
+          placeholder={t('agentCronJobs.form.name.placeholder')}
+          style={{
+            fontSize: 28,
+            fontWeight: 600,
+            padding: 0,
+          }}
+          value={name}
+          variant={'borderless'}
+        />
+
+        {/* Controls Row */}
+        {!isNewJob && (
+          <Flexbox align="center" gap={12} horizontal>
+            {/* Enable/Disable Switch */}
+            <Switch checked={enabled ?? false} onChange={onToggleEnabled} />
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default CronJobHeader;

package/src/app/[variants]/(main)/agent/cron/[cronId]/features/CronJobSaveButton.tsx

@@ -0,0 +1,31 @@
+import { Button, Flexbox } from '@lobehub/ui';
+import { Save } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface CronJobSaveButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+  onSave: () => void;
+}
+
+const CronJobSaveButton = memo<CronJobSaveButtonProps>(({ disabled, loading, onSave }) => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <Flexbox paddingBlock={16}>
+      <Button
+        disabled={disabled}
+        icon={Save}
+        loading={loading}
+        onClick={onSave}
+        style={{ width: 200 }}
+        type="primary"
+      >
+        {t('agentCronJobs.saveAsNew', { defaultValue: 'Save as New Scheduled Task' })}
+      </Button>
+    </Flexbox>
+  );
+});
+
+export default CronJobSaveButton;

package/src/app/[variants]/(main)/agent/cron/[cronId]/features/CronJobScheduleConfig.tsx

@@ -0,0 +1,213 @@
+import { Flexbox, Tag, Text } from '@lobehub/ui';
+import { Card, InputNumber, Select, TimePicker } from 'antd';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  SCHEDULE_TYPE_OPTIONS,
+  type ScheduleType,
+  TIMEZONE_OPTIONS,
+  WEEKDAY_LABELS,
+  WEEKDAY_OPTIONS,
+} from '../CronConfig';
+
+interface CronJobScheduleConfigProps {
+  hourlyInterval?: number;
+  maxExecutions?: number | null;
+  onScheduleChange: (updates: {
+    hourlyInterval?: number;
+    maxExecutions?: number | null;
+    scheduleType?: ScheduleType;
+    timezone?: string;
+    triggerTime?: Dayjs;
+    weekdays?: number[];
+  }) => void;
+  scheduleType: ScheduleType;
+  timezone: string;
+  triggerTime: Dayjs;
+  weekdays: number[];
+}
+
+const CronJobScheduleConfig = memo<CronJobScheduleConfigProps>(
+  ({
+    hourlyInterval,
+    maxExecutions,
+    onScheduleChange,
+    scheduleType,
+    timezone,
+    triggerTime,
+    weekdays,
+  }) => {
+    const { t } = useTranslation('setting');
+
+    // Compute summary tags
+    const summaryTags = useMemo(() => {
+      const result: Array<{ key: string; label: string }> = [];
+
+      // Schedule type
+      const scheduleTypeLabel = SCHEDULE_TYPE_OPTIONS.find(
+        (opt) => opt.value === scheduleType,
+      )?.label;
+      if (scheduleTypeLabel) {
+        result.push({
+          key: 'scheduleType',
+          label: t(scheduleTypeLabel as any),
+        });
+      }
+
+      // Trigger time
+      if (scheduleType === 'hourly') {
+        const minute = triggerTime.minute();
+        result.push({
+          key: 'interval',
+          label: `Every ${hourlyInterval || 1} hour(s) at :${minute.toString().padStart(2, '0')}`,
+        });
+      } else {
+        result.push({
+          key: 'triggerTime',
+          label: triggerTime.format('HH:mm'),
+        });
+      }
+
+      // Timezone
+      result.push({
+        key: 'timezone',
+        label: timezone,
+      });
+
+      // Weekdays for weekly schedule
+      if (scheduleType === 'weekly' && weekdays.length > 0) {
+        result.push({
+          key: 'weekdays',
+          label: weekdays.map((day) => WEEKDAY_LABELS[day]).join(', '),
+        });
+      }
+
+      return result;
+    }, [scheduleType, triggerTime, timezone, weekdays, hourlyInterval, t]);
+
+    return (
+      <Card size="small" style={{ borderRadius: 12 }} styles={{ body: { padding: 12 } }}>
+        <Flexbox gap={12}>
+          {/* Summary Tags */}
+          {summaryTags.length > 0 && (
+            <Flexbox align="center" gap={8} horizontal style={{ flexWrap: 'wrap' }}>
+              {summaryTags.map((tag) => (
+                <Tag key={tag.key} variant={'filled'}>
+                  {tag.label}
+                </Tag>
+              ))}
+            </Flexbox>
+          )}
+          {/* Schedule Configuration - All in one row */}
+          <Flexbox align="center" gap={8} horizontal style={{ flexWrap: 'wrap' }}>
+            <Tag variant={'borderless'}>{t('agentCronJobs.schedule')}</Tag>
+            <Select
+              onChange={(value: ScheduleType) =>
+                onScheduleChange({
+                  scheduleType: value,
+                  weekdays: value === 'weekly' ? [0, 1, 2, 3, 4, 5, 6] : [],
+                })
+              }
+              options={SCHEDULE_TYPE_OPTIONS.map((opt) => ({
+                label: t(opt.label as any),
+                value: opt.value,
+              }))}
+              size="small"
+              style={{ minWidth: 120 }}
+              value={scheduleType}
+            />
+
+            {/* Weekdays - show only for weekly */}
+            {scheduleType === 'weekly' && (
+              <Select
+                maxTagCount="responsive"
+                mode="multiple"
+                onChange={(values: number[]) => onScheduleChange({ weekdays: values })}
+                options={WEEKDAY_OPTIONS}
+                placeholder="Select days"
+                size="small"
+                style={{ minWidth: 150 }}
+                value={weekdays}
+              />
+            )}
+
+            {/* Trigger Time - show for daily and weekly */}
+            {scheduleType !== 'hourly' && (
+              <TimePicker
+                format="HH:mm"
+                minuteStep={30}
+                onChange={(value) => {
+                  if (value) onScheduleChange({ triggerTime: value });
+                }}
+                size="small"
+                style={{ minWidth: 120 }}
+                value={triggerTime ?? dayjs().hour(0).minute(0)}
+              />
+            )}
+
+            {/* Hourly Interval - show only for hourly */}
+            {scheduleType === 'hourly' && (
+              <>
+                <Tag variant={'borderless'}>Every</Tag>
+                <InputNumber
+                  max={24}
+                  min={1}
+                  onChange={(value: number | null) =>
+                    onScheduleChange({ hourlyInterval: value ?? 1 })
+                  }
+                  size="small"
+                  style={{ width: 80 }}
+                  value={hourlyInterval ?? 1}
+                />
+                <Text type="secondary">hour(s) at</Text>
+                <Select
+                  onChange={(value: number) =>
+                    onScheduleChange({ triggerTime: dayjs().hour(0).minute(value) })
+                  }
+                  options={[
+                    { label: ':00', value: 0 },
+                    { label: ':30', value: 30 },
+                  ]}
+                  size="small"
+                  style={{ width: 80 }}
+                  value={triggerTime?.minute() ?? 0}
+                />
+              </>
+            )}
+
+            {/* Timezone */}
+            <Select
+              onChange={(value: string) => onScheduleChange({ timezone: value })}
+              options={TIMEZONE_OPTIONS}
+              showSearch
+              size="small"
+              style={{ maxWidth: 300, minWidth: 200 }}
+              value={timezone}
+            />
+
+          </Flexbox>
+
+          {/* Max Executions */}
+          <Flexbox align="center" gap={8} horizontal style={{ flexWrap: 'wrap' }}>
+            <Tag variant={'borderless'}>{t('agentCronJobs.maxExecutions')}</Tag>
+            <InputNumber
+              min={1}
+              onChange={(value: number | null) =>
+                onScheduleChange({ maxExecutions: value ?? null })
+              }
+              placeholder={t('agentCronJobs.form.maxExecutions.placeholder')}
+              size="small"
+              style={{ width: 160 }}
+              value={maxExecutions ?? null}
+            />
+          </Flexbox>
+        </Flexbox>
+      </Card>
+    );
+  },
+);
+
+export default CronJobScheduleConfig;