@lobehub/lobehub 2.0.13 → 2.1.1

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

@@ -1,17 +1,62 @@
-import { Flexbox, Tag, Text } from '@lobehub/ui';
-import { Card, InputNumber, Select, TimePicker } from 'antd';
+'use client';
+
+import { Checkbox, Flexbox, FormGroup, LobeSelect as Select, Text } from '@lobehub/ui';
+import { Divider, InputNumber, TimePicker } from 'antd';
+import { createStaticStyles, cx } from 'antd-style';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
-  SCHEDULE_TYPE_OPTIONS,
-  type ScheduleType,
-  TIMEZONE_OPTIONS,
-  WEEKDAY_LABELS,
-  WEEKDAY_OPTIONS,
-} from '../CronConfig';
+import { SCHEDULE_TYPE_OPTIONS, type ScheduleType, TIMEZONE_OPTIONS } from '../CronConfig';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  label: css`
+    flex-shrink: 0;
+    width: 120px;
+  `,
+  row: css`
+    min-height: 48px;
+    padding-block: 12px;
+    padding-inline: 0;
+  `,
+  weekdayButton: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 40px;
+    height: 32px;
+    border: 1px solid ${cssVar.colorBorder};
+    border-radius: 6px;
+
+    font-size: 12px;
+    font-weight: 500;
+    color: ${cssVar.colorTextSecondary};
+
+    background: transparent;
+
+    transition: all 0.15s ease;
+
+    &:hover {
+      border-color: ${cssVar.colorPrimary};
+      color: ${cssVar.colorPrimary};
+    }
+  `,
+  weekdayButtonActive: css`
+    border-color: ${cssVar.colorPrimary};
+    color: ${cssVar.colorTextLightSolid};
+    background: ${cssVar.colorPrimary};
+
+    &:hover {
+      border-color: ${cssVar.colorPrimaryHover};
+      color: ${cssVar.colorTextLightSolid};
+      background: ${cssVar.colorPrimaryHover};
+    }
+  `,
+}));
 
 interface CronJobScheduleConfigProps {
   hourlyInterval?: number;
@@ -30,6 +75,16 @@ interface CronJobScheduleConfigProps {
   weekdays: number[];
 }
 
+const WEEKDAYS = [
+  { key: 1, label: 'agentCronJobs.weekdays.mon' },
+  { key: 2, label: 'agentCronJobs.weekdays.tue' },
+  { key: 3, label: 'agentCronJobs.weekdays.wed' },
+  { key: 4, label: 'agentCronJobs.weekdays.thu' },
+  { key: 5, label: 'agentCronJobs.weekdays.fri' },
+  { key: 6, label: 'agentCronJobs.weekdays.sat' },
+  { key: 0, label: 'agentCronJobs.weekdays.sun' },
+];
+
 const CronJobScheduleConfig = memo<CronJobScheduleConfigProps>(
   ({
     hourlyInterval,
@@ -42,172 +97,155 @@ const CronJobScheduleConfig = memo<CronJobScheduleConfigProps>(
   }) => {
     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) => t(WEEKDAY_LABELS[day] as any)).join(', '),
-        });
-      }
-
-      return result;
-    }, [scheduleType, triggerTime, timezone, weekdays, hourlyInterval, t]);
+    const toggleWeekday = (day: number) => {
+      const newWeekdays = weekdays.includes(day)
+        ? weekdays.filter((d) => d !== day)
+        : [...weekdays, day];
+      onScheduleChange({ weekdays: newWeekdays });
+    };
+
+    const isUnlimited = maxExecutions === null || maxExecutions === undefined;
 
     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}
-            />
+      <FormGroup title={t('agentCronJobs.schedule')} variant="filled">
+        {/* Frequency Row */}
+        <Flexbox align="center" className={styles.row} gap={24} horizontal>
+          <Text className={styles.label}>{t('agentCronJobs.form.frequency')}</Text>
+          <Select
+            onChange={(value: ScheduleType) =>
+              onScheduleChange({
+                scheduleType: value,
+                weekdays: value === 'weekly' ? [1, 2, 3, 4, 5] : [],
+              })
+            }
+            options={SCHEDULE_TYPE_OPTIONS.map((opt) => ({
+              label: t(opt.label as any),
+              value: opt.value,
+            }))}
+            style={{ width: 140 }}
+            value={scheduleType}
+            variant="outlined"
+          />
+        </Flexbox>
 
-            {/* Weekdays - show only for weekly */}
-            {scheduleType === 'weekly' && (
-              <Select
-                maxTagCount="responsive"
-                mode="multiple"
-                onChange={(values: number[]) => onScheduleChange({ weekdays: values })}
-                options={WEEKDAY_OPTIONS.map((opt) => ({
-                  label: t(opt.label as any),
-                  value: opt.value,
-                }))}
-                placeholder="Select days"
-                size="small"
-                style={{ minWidth: 150 }}
-                value={weekdays}
-              />
-            )}
+        <Divider style={{ margin: 0 }} />
 
-            {/* Trigger Time - show for daily and weekly */}
-            {scheduleType !== 'hourly' && (
+        {/* Time Row (for daily/weekly) */}
+        {scheduleType !== 'hourly' && (
+          <>
+            <Flexbox align="center" className={styles.row} gap={24} horizontal>
+              <Text className={styles.label}>{t('agentCronJobs.form.time')}</Text>
               <TimePicker
                 format="HH:mm"
-                minuteStep={30}
+                minuteStep={15}
                 onChange={(value) => {
                   if (value) onScheduleChange({ triggerTime: value });
                 }}
-                size="small"
-                style={{ minWidth: 120 }}
-                value={triggerTime ?? dayjs().hour(0).minute(0)}
+                style={{ width: 120 }}
+                value={triggerTime ?? dayjs().hour(9).minute(0)}
               />
-            )}
-
-            {/* Hourly Interval - show only for hourly */}
-            {scheduleType === 'hourly' && (
-              <>
-                <Tag variant={'borderless'}>Every</Tag>
+            </Flexbox>
+            <Divider style={{ margin: 0 }} />
+          </>
+        )}
+
+        {/* Hourly Interval Row */}
+        {scheduleType === 'hourly' && (
+          <>
+            <Flexbox align="center" className={styles.row} gap={24} horizontal>
+              <Text className={styles.label}>{t('agentCronJobs.form.every')}</Text>
+              <Flexbox align="center" gap={8} horizontal>
                 <InputNumber
                   max={24}
                   min={1}
-                  onChange={(value: number | null) =>
-                    onScheduleChange({ hourlyInterval: value ?? 1 })
-                  }
-                  size="small"
-                  style={{ width: 80 }}
+                  onChange={(value) => onScheduleChange({ hourlyInterval: value ?? 1 })}
+                  style={{ width: 70 }}
                   value={hourlyInterval ?? 1}
                 />
-                <Text type="secondary">hour(s) at</Text>
+                <Text type="secondary">{t('agentCronJobs.form.hours')}</Text>
+                <Text type="secondary">{t('agentCronJobs.form.at')}</Text>
                 <Select
                   onChange={(value: number) =>
                     onScheduleChange({ triggerTime: dayjs().hour(0).minute(value) })
                   }
                   options={[
                     { label: ':00', value: 0 },
+                    { label: ':15', value: 15 },
                     { label: ':30', value: 30 },
+                    { label: ':45', value: 45 },
                   ]}
-                  size="small"
-                  style={{ width: 80 }}
+                  style={{ width: '80px' }}
                   value={triggerTime?.minute() ?? 0}
+                  variant="outlined"
                 />
-              </>
-            )}
-
-            {/* Timezone */}
-            <Select
-              onChange={(value: string) => onScheduleChange({ timezone: value })}
-              options={TIMEZONE_OPTIONS}
-              showSearch
-              size="small"
-              style={{ maxWidth: 300, minWidth: 200 }}
-              value={timezone}
-            />
-          </Flexbox>
+              </Flexbox>
+            </Flexbox>
+            <Divider style={{ margin: 0 }} />
+          </>
+        )}
+
+        {/* Weekday Selector (only for weekly) */}
+        {scheduleType === 'weekly' && (
+          <>
+            <Flexbox align="center" className={styles.row} gap={24} horizontal>
+              <Text className={styles.label}>{t('agentCronJobs.weekdays')}</Text>
+              <Flexbox gap={6} horizontal>
+                {WEEKDAYS.map(({ key, label }) => (
+                  <div
+                    className={cx(
+                      styles.weekdayButton,
+                      weekdays.includes(key) && styles.weekdayButtonActive,
+                    )}
+                    key={key}
+                    onClick={() => toggleWeekday(key)}
+                  >
+                    {t(label as any)}
+                  </div>
+                ))}
+              </Flexbox>
+            </Flexbox>
+            <Divider style={{ margin: 0 }} />
+          </>
+        )}
+
+        {/* Timezone Row */}
+        <Flexbox align="center" className={styles.row} gap={24} horizontal>
+          <Text className={styles.label}>{t('agentCronJobs.form.timezone')}</Text>
+          <Select
+            onChange={(value: string) => onScheduleChange({ timezone: value })}
+            options={TIMEZONE_OPTIONS}
+            popupMatchSelectWidth={false}
+            showSearch
+            style={{ minWidth: '200px', width: 'fit-content' }}
+            value={timezone}
+            variant="outlined"
+          />
+        </Flexbox>
+
+        <Divider style={{ margin: 0 }} />
 
-          {/* Max Executions */}
-          <Flexbox align="center" gap={8} horizontal style={{ flexWrap: 'wrap' }}>
-            <Tag variant={'borderless'}>{t('agentCronJobs.maxExecutions')}</Tag>
+        {/* Execution Limit Row */}
+        <Flexbox align="center" className={styles.row} gap={24} horizontal>
+          <Text className={styles.label}>{t('agentCronJobs.maxExecutions')}</Text>
+          <Flexbox align="center" gap={12} horizontal>
             <InputNumber
+              disabled={isUnlimited}
               min={1}
-              onChange={(value: number | null) =>
-                onScheduleChange({ maxExecutions: value ?? null })
-              }
-              placeholder={t('agentCronJobs.form.maxExecutions.placeholder')}
-              size="small"
-              style={{ width: 160 }}
-              value={maxExecutions ?? null}
+              onChange={(value) => onScheduleChange({ maxExecutions: value })}
+              placeholder="100"
+              style={{ width: 100 }}
+              value={maxExecutions ?? undefined}
             />
+            <Text type="secondary">{t('agentCronJobs.form.times')}</Text>
+            <Checkbox
+              checked={isUnlimited}
+              onChange={(checked) => onScheduleChange({ maxExecutions: checked ? null : 100 })}
+            >
+              {t('agentCronJobs.form.unlimited')}
+            </Checkbox>
           </Flexbox>
         </Flexbox>
-      </Card>
+      </FormGroup>
     );
   },
 );

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

@@ -1,4 +1,3 @@
-import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
 import { message } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,7 +9,7 @@ import type {
 } from '@/database/schemas/agentCronJob';
 import { agentCronJobService } from '@/services/agentCronJob';
 
-export const useAgentCronJobs = (agentId?: string) => {
+export const useAgentCronJobs = (agentId?: string, enabled: boolean = true) => {
   const { t } = useTranslation('setting');
 
   // Fetch cron jobs for the agent
@@ -20,8 +19,8 @@ export const useAgentCronJobs = (agentId?: string) => {
     isLoading: loading,
     mutate,
   } = useSWR(
-    ENABLE_BUSINESS_FEATURES && agentId ? `/api/agent-cron-jobs/${agentId}` : null,
-    ENABLE_BUSINESS_FEATURES && agentId ? () => agentCronJobService.getByAgentId(agentId) : null,
+    enabled && agentId ? `/api/agent-cron-jobs/${agentId}` : null,
+    enabled && agentId ? () => agentCronJobService.getByAgentId(agentId) : null,
     {
       onError: (error) => {
         console.error('Failed to fetch cron jobs:', error);

package/src/app/[variants]/(main)/agent/profile/features/AgentCronJobs/index.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
 import { Flexbox } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { Clock } from 'lucide-react';
@@ -10,6 +9,7 @@ import urlJoin from 'url-join';
 
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useAgentStore } from '@/store/agent';
+import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import CronJobCards from './CronJobCards';
 import { useAgentCronJobs } from './hooks/useAgentCronJobs';
@@ -20,8 +20,9 @@ const AgentCronJobs = memo(() => {
   const { t } = useTranslation('setting');
   const agentId = useAgentStore((s) => s.activeAgentId);
   const router = useQueryRoute();
+  const enableBusinessFeatures = useServerConfigStore(serverConfigSelectors.enableBusinessFeatures);
 
-  const { cronJobs, loading, deleteCronJob } = useAgentCronJobs(agentId);
+  const { cronJobs, loading, deleteCronJob } = useAgentCronJobs(agentId, enableBusinessFeatures);
 
   // Edit: Navigate to cron job detail page
   const handleEdit = useCallback(
@@ -40,7 +41,7 @@ const AgentCronJobs = memo(() => {
     [deleteCronJob],
   );
 
-  if (!ENABLE_BUSINESS_FEATURES) return null;
+  if (!enableBusinessFeatures) return null;
 
   if (!agentId) {
     return null;

package/src/app/[variants]/(main)/agent/profile/features/ProfileEditor/index.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
 import { Button, Flexbox } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
@@ -15,6 +14,7 @@ import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
+import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import AgentCronJobs from '../AgentCronJobs';
 import AgentSettings from '../AgentSettings';
@@ -31,6 +31,7 @@ const ProfileEditor = memo(() => {
   const agentId = useAgentStore((s) => s.activeAgentId);
   const switchTopic = useChatStore((s) => s.switchTopic);
   const router = useQueryRoute();
+  const enableBusinessFeatures = useServerConfigStore(serverConfigSelectors.enableBusinessFeatures);
 
   const handleCreateCronJob = useCallback(() => {
     if (!agentId) return;
@@ -95,7 +96,7 @@ const ProfileEditor = memo(() => {
             {t('startConversation')}
           </Button>
           <AgentPublishButton />
-          {ENABLE_BUSINESS_FEATURES && (
+          {enableBusinessFeatures && (
             <Button icon={Clock} onClick={handleCreateCronJob}>
               {t('agentCronJobs.addJob')}
             </Button>
@@ -106,7 +107,7 @@ const ProfileEditor = memo(() => {
       {/* Main Content: Prompt Editor */}
       <EditorCanvas />
       {/* Agent Cron Jobs Display (only show if jobs exist) */}
-      {ENABLE_BUSINESS_FEATURES && <AgentCronJobs />}
+      {enableBusinessFeatures && <AgentCronJobs />}
       {/* Advanced Settings Modal */}
       <AgentSettings />
     </>

package/src/features/Conversation/Messages/AssistantGroup/components/MessageContent.tsx

@@ -31,9 +31,14 @@ const MessageContent = memo<ContentBlockProps>(({ content, hasTools, id }) => {
     return <ContentLoading id={id} />;
   }
 
+  const isSingleLine = (message || '').split('\n').length <= 2;
+
   return (
     content && (
-      <MarkdownMessage {...markdownProps} className={cx(hasTools && styles.pWithTool)}>
+      <MarkdownMessage
+        {...markdownProps}
+        className={cx(hasTools && isSingleLine && styles.pWithTool)}
+      >
         {message}
       </MarkdownMessage>
     )

package/src/locales/default/setting.ts

@@ -37,11 +37,20 @@ export default {
   'agentCronJobs.empty.description': 'Create your first scheduled task to automate your agent',
   'agentCronJobs.empty.title': 'No scheduled tasks yet',
   'agentCronJobs.enable': 'Enable',
+  'agentCronJobs.form.at': 'at',
   'agentCronJobs.form.content.placeholder': 'Enter the prompt or instruction for the agent',
+  'agentCronJobs.form.every': 'Every',
+  'agentCronJobs.form.frequency': 'Frequency',
+  'agentCronJobs.form.hours': 'hour(s)',
+  'agentCronJobs.form.maxExecutions': 'Stop after',
   'agentCronJobs.form.maxExecutions.placeholder': 'Leave empty for unlimited',
   'agentCronJobs.form.name.placeholder': 'Enter task name',
+  'agentCronJobs.form.time': 'Time',
   'agentCronJobs.form.timeRange.end': 'End Time',
   'agentCronJobs.form.timeRange.start': 'Start Time',
+  'agentCronJobs.form.times': 'times',
+  'agentCronJobs.form.timezone': 'Timezone',
+  'agentCronJobs.form.unlimited': 'Run continuously',
   'agentCronJobs.form.validation.contentRequired': 'Task content is required',
   'agentCronJobs.form.validation.invalidTimeRange': 'Start time must be before end time',
   'agentCronJobs.form.validation.nameRequired': 'Task name is required',
@@ -86,6 +95,13 @@ export default {
   'agentCronJobs.weekday.tuesday': 'Tuesday',
   'agentCronJobs.weekday.wednesday': 'Wednesday',
   'agentCronJobs.weekdays': 'Weekdays',
+  'agentCronJobs.weekdays.fri': 'Fri',
+  'agentCronJobs.weekdays.mon': 'Mon',
+  'agentCronJobs.weekdays.sat': 'Sat',
+  'agentCronJobs.weekdays.sun': 'Sun',
+  'agentCronJobs.weekdays.thu': 'Thu',
+  'agentCronJobs.weekdays.tue': 'Tue',
+  'agentCronJobs.weekdays.wed': 'Wed',
   'agentInfoDescription.basic.avatar': 'Avatar',
   'agentInfoDescription.basic.description': 'Description',
   'agentInfoDescription.basic.name': 'Name',

package/src/store/agent/slices/cron/action.ts

@@ -1,4 +1,3 @@
-import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
 import type { SWRResponse } from 'swr';
 import { type StateCreator } from 'zustand/vanilla';
 
@@ -33,7 +32,10 @@ export interface CronTopicGroupWithJobInfo {
 export interface CronSliceAction {
   createAgentCronJob: () => Promise<string | null>;
   internal_refreshCronTopics: () => Promise<void>;
-  useFetchCronTopicsWithJobInfo: (agentId?: string) => SWRResponse<CronTopicGroupWithJobInfo[]>;
+  useFetchCronTopicsWithJobInfo: (
+    agentId?: string,
+    enabled?: boolean,
+  ) => SWRResponse<CronTopicGroupWithJobInfo[]>;
 }
 
 export const createCronSlice: StateCreator<
@@ -69,9 +71,9 @@ export const createCronSlice: StateCreator<
     await mutate([FETCH_CRON_TOPICS_WITH_JOB_INFO_KEY, get().activeAgentId]);
   },
 
-  useFetchCronTopicsWithJobInfo: (agentId) =>
+  useFetchCronTopicsWithJobInfo: (agentId, enabled = true) =>
     useClientDataSWR<CronTopicGroupWithJobInfo[]>(
-      ENABLE_BUSINESS_FEATURES && agentId ? [FETCH_CRON_TOPICS_WITH_JOB_INFO_KEY, agentId] : null,
+      enabled && agentId ? [FETCH_CRON_TOPICS_WITH_JOB_INFO_KEY, agentId] : null,
       async ([, id]: [string, string]) => {
         const [cronJobsResult, cronTopicsGroups] = await Promise.all([
           lambdaClient.agentCronJob.findByAgent.query({ agentId: id }),