@lobehub/lobehub 2.0.0-next.251 → 2.0.0-next.252

package/src/app/[variants]/(main)/chat/profile/features/AgentCronJobs/CronJobCards.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { ActionIcon, Flexbox, Icon } from '@lobehub/ui';
+import { Badge, Card, Col, Popconfirm, Row, Switch, Typography } from 'antd';
+import dayjs from 'dayjs';
+import { Calendar, Clock, Edit, Trash2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { AgentCronJob } from '@/database/schemas/agentCronJob';
+
+import { useAgentCronJobs } from './hooks/useAgentCronJobs';
+
+const { Text } = Typography;
+
+interface CronJobCardsProps {
+  cronJobs: AgentCronJob[];
+  loading?: boolean;
+  onDelete: (jobId: string) => void;
+  onEdit: (jobId: string) => void;
+}
+
+const getIntervalText = (cronPattern: string) => {
+  const intervalMap: Record<string, string> = {
+    '0 */12 * * *': 'agentCronJobs.interval.12hours',
+    '0 */30 * * *': 'agentCronJobs.interval.30min',
+    '0 */6 * * *': 'agentCronJobs.interval.6hours',
+    '0 0 * * *': 'agentCronJobs.interval.1hour',
+    '0 0 0 * *': 'agentCronJobs.interval.daily',
+    '0 0 0 * 0': 'agentCronJobs.interval.weekly',
+  };
+
+  return intervalMap[cronPattern] || cronPattern;
+};
+
+const getStatusInfo = (job: AgentCronJob) => {
+  if (!job.enabled) {
+    return { status: 'default' as const, text: 'agentCronJobs.status.disabled' };
+  }
+
+  if (job.remainingExecutions === 0) {
+    return { status: 'error' as const, text: 'agentCronJobs.status.depleted' };
+  }
+
+  return { status: 'success' as const, text: 'agentCronJobs.status.enabled' };
+};
+
+const CronJobCards = memo<CronJobCardsProps>(({ cronJobs, loading, onDelete, onEdit }) => {
+  const { t } = useTranslation('setting');
+  const { updateCronJob } = useAgentCronJobs();
+
+  const handleToggleEnabled = async (job: AgentCronJob) => {
+    await updateCronJob(job.id, { enabled: !job.enabled });
+  };
+
+  return (
+    <Row gutter={[12, 12]}>
+      {cronJobs.map((job) => {
+        const statusInfo = getStatusInfo(job);
+        const intervalText = getIntervalText(job.cronPattern);
+
+        return (
+          <Col key={job.id} lg={8} md={12} xs={24}>
+            <Card
+              extra={
+                <Flexbox align="center" gap={4} horizontal>
+                  <ActionIcon
+                    icon={Edit}
+                    onClick={() => onEdit(job.id)}
+                    size="small"
+                    title={t('agentCronJobs.editJob')}
+                  />
+                  <Popconfirm
+                    onConfirm={() => onDelete(job.id)}
+                    title={t('agentCronJobs.confirmDelete')}
+                  >
+                    <ActionIcon icon={Trash2} size="small" title={t('agentCronJobs.deleteJob')} />
+                  </Popconfirm>
+                </Flexbox>
+              }
+              loading={loading}
+              size="small"
+              style={{ height: '100%' }}
+              styles={{
+                actions: { marginTop: 0 },
+                body: { paddingBottom: 12, paddingTop: 8 },
+                header: { borderBottom: 'none', marginTop: '8px', minHeight: 0, paddingBottom: 0 },
+              }}
+              title={
+                <Flexbox align="center" horizontal justify="space-between">
+                  <Flexbox align="center" gap={8} horizontal style={{ flex: 1 }}>
+                    <span
+                      style={{
+                        fontSize: '13px',
+                        fontWeight: 500,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {job.name || 'Unnamed Task'}
+                    </span>
+                    <Badge status={statusInfo.status} />
+                  </Flexbox>
+                  <Switch
+                    checked={job.enabled || false}
+                    onChange={() => handleToggleEnabled(job)}
+                    size="small"
+                  />
+                </Flexbox>
+              }
+            >
+              <Flexbox gap={8}>
+                <Text
+                  ellipsis={{ tooltip: job.content }}
+                  style={{
+                    WebkitBoxOrient: 'vertical',
+                    WebkitLineClamp: 2,
+                    color: '#666',
+                    display: '-webkit-box',
+                    fontSize: '12px',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {job.content}
+                </Text>
+
+                <Flexbox gap={8}>
+                  <Flexbox align="center" gap={6} horizontal>
+                    <Icon icon={Clock} size={12} />
+                    <Text style={{ fontSize: '11px' }}>{t(intervalText as any)}</Text>
+                  </Flexbox>
+
+                  {job.remainingExecutions !== null && (
+                    <Flexbox align="center" gap={6} horizontal>
+                      <Text style={{ fontSize: '11px' }}>
+                        {t('agentCronJobs.remainingExecutions', { count: job.remainingExecutions })}
+                      </Text>
+                    </Flexbox>
+                  )}
+
+                  {job.lastExecutedAt && (
+                    <Flexbox align="center" gap={6} horizontal>
+                      <Icon icon={Calendar} size={12} />
+                      <Text style={{ fontSize: '11px' }}>
+                        {dayjs(job.lastExecutedAt).format('MM/DD HH:mm')}
+                      </Text>
+                    </Flexbox>
+                  )}
+                </Flexbox>
+              </Flexbox>
+            </Card>
+          </Col>
+        );
+      })}
+    </Row>
+  );
+});
+
+export default CronJobCards;

package/src/app/[variants]/(main)/chat/profile/features/AgentCronJobs/CronJobForm.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { Checkbox, Form, Input, InputNumber, Select, TimePicker } from 'antd';
+import dayjs from 'dayjs';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { AgentCronJob } from '@/database/schemas/agentCronJob';
+
+// Form data interface - excludes server-managed fields
+interface CronJobFormData {
+  content: string;
+  cronPattern: string;
+  enabled?: boolean;
+  executionConditions?: any;
+  maxExecutions?: number | null;
+  name?: string | null;
+}
+
+const { TextArea } = Input;
+
+interface CronJobFormProps {
+  editingJob?: AgentCronJob;
+  formRef?: any;
+  onCancel?: () => void;
+  onSubmit: (data: CronJobFormData) => void;
+}
+
+const CRON_PATTERNS = [
+  { label: 'agentCronJobs.interval.30min', value: '0 */30 * * *' },
+  { label: 'agentCronJobs.interval.1hour', value: '0 0 * * *' },
+  { label: 'agentCronJobs.interval.6hours', value: '0 */6 * * *' },
+  { label: 'agentCronJobs.interval.12hours', value: '0 */12 * * *' },
+  { label: 'agentCronJobs.interval.daily', value: '0 0 0 * *' },
+  { label: 'agentCronJobs.interval.weekly', value: '0 0 0 * 0' },
+];
+
+const WEEKDAY_OPTIONS = [
+  { label: 'Monday', value: 1 },
+  { label: 'Tuesday', value: 2 },
+  { label: 'Wednesday', value: 3 },
+  { label: 'Thursday', value: 4 },
+  { label: 'Friday', value: 5 },
+  { label: 'Saturday', value: 6 },
+  { label: 'Sunday', value: 0 },
+];
+
+const CronJobForm = memo<CronJobFormProps>(({ editingJob, formRef, onSubmit }) => {
+  const { t } = useTranslation('setting');
+  const [form] = Form.useForm();
+
+  // Expose form instance via ref
+  if (formRef) {
+    formRef.current = form;
+  }
+
+  useEffect(() => {
+    if (editingJob) {
+      const conditions = editingJob.executionConditions;
+      form.setFieldsValue({
+        content: editingJob.content,
+        cronPattern: editingJob.cronPattern,
+        maxExecutions: editingJob.maxExecutions,
+        maxExecutionsPerDay: conditions?.maxExecutionsPerDay,
+        name: editingJob.name,
+        timeRange: conditions?.timeRange
+          ? [dayjs(conditions.timeRange.start, 'HH:mm'), dayjs(conditions.timeRange.end, 'HH:mm')]
+          : undefined,
+        weekdays: conditions?.weekdays || [],
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [editingJob, form]);
+
+  const handleSubmit = async (values: any) => {
+    const executionConditions: any = {};
+
+    if (values.timeRange && values.timeRange.length === 2) {
+      executionConditions.timeRange = {
+        end: values.timeRange[1].format('HH:mm'),
+        start: values.timeRange[0].format('HH:mm'),
+      };
+    }
+
+    if (values.weekdays && values.weekdays.length > 0) {
+      executionConditions.weekdays = values.weekdays;
+    }
+
+    if (values.maxExecutionsPerDay) {
+      executionConditions.maxExecutionsPerDay = values.maxExecutionsPerDay;
+    }
+
+    const data: CronJobFormData = {
+      content: values.content,
+      cronPattern: values.cronPattern,
+      enabled: true,
+      executionConditions: Object.keys(executionConditions).length > 0 ? executionConditions : null,
+      maxExecutions: values.maxExecutions || null,
+      name: values.name,
+    };
+
+    onSubmit(data);
+  };
+
+  const validateTimeRange = (_: any, value: any) => {
+    if (!value || value.length !== 2) {
+      return Promise.resolve();
+    }
+
+    const [start, end] = value;
+    if (start.isAfter(end)) {
+      return Promise.reject(new Error(t('agentCronJobs.form.validation.invalidTimeRange')));
+    }
+
+    return Promise.resolve();
+  };
+
+  return (
+    <Form
+      form={form}
+      initialValues={{
+        cronPattern: '0 */30 * * *', // Default to 30 minutes
+        weekdays: [],
+      }}
+      layout="vertical"
+      onFinish={handleSubmit}
+    >
+      <Form.Item
+        label={t('agentCronJobs.name')}
+        name="name"
+        rules={[{ message: t('agentCronJobs.form.validation.nameRequired'), required: true }]}
+      >
+        <Input placeholder={t('agentCronJobs.form.name.placeholder')} />
+      </Form.Item>
+
+      <Form.Item
+        label={t('agentCronJobs.content')}
+        name="content"
+        rules={[{ message: t('agentCronJobs.form.validation.contentRequired'), required: true }]}
+      >
+        <TextArea
+          maxLength={1000}
+          placeholder={t('agentCronJobs.form.content.placeholder')}
+          rows={3}
+          showCount
+        />
+      </Form.Item>
+
+      <Form.Item
+        label={t('agentCronJobs.schedule')}
+        name="cronPattern"
+        rules={[{ required: true }]}
+      >
+        <Select>
+          {CRON_PATTERNS.map((pattern) => (
+            <Select.Option key={pattern.value} value={pattern.value}>
+              {t(pattern.label as any)}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+
+      <Form.Item label={t('agentCronJobs.maxExecutions')} name="maxExecutions">
+        <InputNumber
+          min={1}
+          placeholder={t('agentCronJobs.form.maxExecutions.placeholder')}
+          style={{ width: '100%' }}
+        />
+      </Form.Item>
+
+      <Form.Item
+        label={t('agentCronJobs.timeRange')}
+        name="timeRange"
+        rules={[{ validator: validateTimeRange }]}
+      >
+        <TimePicker.RangePicker
+          format="HH:mm"
+          placeholder={[
+            t('agentCronJobs.form.timeRange.start'),
+            t('agentCronJobs.form.timeRange.end'),
+          ]}
+          style={{ width: '100%' }}
+        />
+      </Form.Item>
+
+      <Form.Item label={t('agentCronJobs.weekdays')} name="weekdays">
+        <Checkbox.Group options={WEEKDAY_OPTIONS} />
+      </Form.Item>
+
+      <Form.Item label="Max Executions Per Day" name="maxExecutionsPerDay">
+        <InputNumber
+          min={1}
+          placeholder="Leave empty for no daily limit"
+          style={{ width: '100%' }}
+        />
+      </Form.Item>
+    </Form>
+  );
+});
+
+export default CronJobForm;

package/src/app/[variants]/(main)/chat/profile/features/AgentCronJobs/CronJobList.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { ActionIcon, Flexbox, Icon } from '@lobehub/ui';
+import { Badge, List, Popconfirm, Switch, Typography } from 'antd';
+import dayjs from 'dayjs';
+import { Calendar, Clock, Edit, Trash2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { AgentCronJob } from '@/database/schemas/agentCronJob';
+
+import { useAgentCronJobs } from './hooks/useAgentCronJobs';
+
+const { Text, Paragraph } = Typography;
+
+interface CronJobListProps {
+  cronJobs: AgentCronJob[];
+  loading?: boolean;
+  onDelete: (jobId: string) => void;
+  onEdit: (jobId: string) => void;
+}
+
+const getIntervalText = (cronPattern: string) => {
+  const intervalMap: Record<string, string> = {
+    '0 */12 * * *': 'agentCronJobs.interval.12hours',
+    '0 */30 * * *': 'agentCronJobs.interval.30min',
+    '0 */6 * * *': 'agentCronJobs.interval.6hours',
+    '0 0 * * *': 'agentCronJobs.interval.1hour',
+    '0 0 0 * *': 'agentCronJobs.interval.daily',
+    '0 0 0 * 0': 'agentCronJobs.interval.weekly',
+  };
+
+  return intervalMap[cronPattern] || cronPattern;
+};
+
+const getStatusInfo = (job: AgentCronJob) => {
+  if (!job.enabled) {
+    return { status: 'default' as const, text: 'agentCronJobs.status.disabled' };
+  }
+
+  if (job.remainingExecutions === 0) {
+    return { status: 'error' as const, text: 'agentCronJobs.status.depleted' };
+  }
+
+  return { status: 'success' as const, text: 'agentCronJobs.status.enabled' };
+};
+
+const CronJobList = memo<CronJobListProps>(({ cronJobs, loading, onEdit, onDelete }) => {
+  const { t } = useTranslation('setting');
+  const { updateCronJob } = useAgentCronJobs();
+
+  const handleToggleEnabled = async (job: AgentCronJob) => {
+    await updateCronJob(job.id, { enabled: !job.enabled });
+  };
+
+  return (
+    <List
+      dataSource={cronJobs}
+      loading={loading}
+      renderItem={(job) => {
+        const statusInfo = getStatusInfo(job);
+        const intervalText = getIntervalText(job.cronPattern);
+
+        return (
+          <List.Item
+            actions={[
+              <ActionIcon
+                icon={Edit}
+                key="edit"
+                onClick={() => onEdit(job.id)}
+                size="small"
+                title={t('agentCronJobs.editJob')}
+              />,
+              <Popconfirm
+                key="delete"
+                onConfirm={() => onDelete(job.id)}
+                title={t('agentCronJobs.confirmDelete')}
+              >
+                <ActionIcon icon={Trash2} size="small" title={t('agentCronJobs.deleteJob')} />
+              </Popconfirm>,
+            ]}
+          >
+            <List.Item.Meta
+              avatar={
+                <Switch
+                  checked={job.enabled || false}
+                  onChange={() => handleToggleEnabled(job)}
+                  size="small"
+                />
+              }
+              description={
+                <Flexbox gap={4}>
+                  <Paragraph
+                    ellipsis={{ rows: 2, tooltip: job.content }}
+                    style={{ color: '#666', fontSize: '12px', margin: 0 }}
+                  >
+                    {job.content}
+                  </Paragraph>
+
+                  <Flexbox gap={8} horizontal style={{ marginTop: 4 }}>
+                    <Flexbox align="center" gap={4} horizontal>
+                      <Icon icon={Clock} size={12} />
+                      <Text style={{ fontSize: '11px' }}>{t(intervalText as any)}</Text>
+                    </Flexbox>
+
+                    {job.remainingExecutions !== null && (
+                      <Text style={{ fontSize: '11px' }}>
+                        {t('agentCronJobs.remainingExecutions', { count: job.remainingExecutions })}
+                      </Text>
+                    )}
+
+                    {job.lastExecutedAt && (
+                      <Flexbox align="center" gap={4} horizontal>
+                        <Icon icon={Calendar} size={12} />
+                        <Text style={{ fontSize: '11px' }}>
+                          {dayjs(job.lastExecutedAt).format('MM/DD HH:mm')}
+                        </Text>
+                      </Flexbox>
+                    )}
+                  </Flexbox>
+                </Flexbox>
+              }
+              title={
+                <Flexbox align="center" gap={8} horizontal>
+                  <span>{job.name}</span>
+                  <Badge status={statusInfo.status} text={t(statusInfo.text as any)} />
+                </Flexbox>
+              }
+            />
+          </List.Item>
+        );
+      }}
+    />
+  );
+});
+
+export default CronJobList;

package/src/app/[variants]/(main)/chat/profile/features/AgentCronJobs/hooks/useAgentCronJobs.ts

@@ -0,0 +1,138 @@
+import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
+import { message } from 'antd';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+
+import type {
+  CreateAgentCronJobData,
+  UpdateAgentCronJobData,
+} from '@/database/schemas/agentCronJob';
+import { agentCronJobService } from '@/services/agentCronJob';
+
+export const useAgentCronJobs = (agentId?: string) => {
+  const { t } = useTranslation('setting');
+
+  // Fetch cron jobs for the agent
+  const {
+    data: cronJobs,
+    error,
+    isLoading: loading,
+    mutate,
+  } = useSWR(
+    ENABLE_BUSINESS_FEATURES && agentId ? `/api/agent-cron-jobs/${agentId}` : null,
+    ENABLE_BUSINESS_FEATURES && agentId ? () => agentCronJobService.getByAgentId(agentId) : null,
+    {
+      onError: (error) => {
+        console.error('Failed to fetch cron jobs:', error);
+        message.error('Failed to load scheduled tasks');
+      },
+    },
+  );
+
+  // Create a new cron job
+  const createCronJob = useCallback(
+    async (data: Omit<CreateAgentCronJobData, 'userId'>) => {
+      if (!agentId) return;
+
+      try {
+        const result = await agentCronJobService.create({
+          ...data,
+          agentId,
+        });
+
+        if (result.success) {
+          message.success(t('agentCronJobs.createSuccess'));
+          await mutate();
+          return result.data;
+        }
+      } catch (error) {
+        console.error('Failed to create cron job:', error);
+        message.error('Failed to create scheduled task');
+        throw error;
+      }
+    },
+    [agentId, mutate, t],
+  );
+
+  // Update a cron job
+  const updateCronJob = useCallback(
+    async (id: string, data: UpdateAgentCronJobData) => {
+      try {
+        const result = await agentCronJobService.update(id, data);
+
+        if (result.success) {
+          message.success(t('agentCronJobs.updateSuccess'));
+          await mutate();
+          return result.data;
+        }
+      } catch (error) {
+        console.error('Failed to update cron job:', error);
+        message.error('Failed to update scheduled task');
+        throw error;
+      }
+    },
+    [mutate, t],
+  );
+
+  // Delete a cron job
+  const deleteCronJob = useCallback(
+    async (id: string) => {
+      try {
+        const result = await agentCronJobService.delete(id);
+
+        if (result.success) {
+          message.success(t('agentCronJobs.deleteSuccess'));
+          await mutate();
+        }
+      } catch (error) {
+        console.error('Failed to delete cron job:', error);
+        message.error('Failed to delete scheduled task');
+        throw error;
+      }
+    },
+    [mutate, t],
+  );
+
+  // Get execution statistics
+  const getStats = useCallback(async () => {
+    try {
+      return await agentCronJobService.getStats();
+    } catch (error) {
+      console.error('Failed to get cron job stats:', error);
+      throw error;
+    }
+  }, []);
+
+  // Reset execution counts
+  const resetExecutions = useCallback(
+    async (id: string, newMaxExecutions?: number) => {
+      try {
+        const result = await agentCronJobService.resetExecutions(id, newMaxExecutions);
+
+        if (result.success) {
+          message.success('Execution counts reset successfully');
+          await mutate();
+          return result.data;
+        }
+      } catch (error) {
+        console.error('Failed to reset executions:', error);
+        message.error('Failed to reset execution counts');
+        throw error;
+      }
+    },
+    [mutate],
+  );
+
+  return {
+    createCronJob,
+    cronJobs: cronJobs?.data || [],
+    deleteCronJob,
+    error,
+    getStats,
+    loading,
+    refetch: mutate,
+    resetExecutions,
+    updateCronJob,
+  };
+};