@lobehub/lobehub 2.0.0-next.265 → 2.0.0-next.267

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Cron/CronTopicGroup.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { AccordionItem, ActionIcon, Flexbox, Icon, Text } from '@lobehub/ui';
+import { Settings2Icon, TimerIcon, TimerOffIcon } from 'lucide-react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+
+import { useRouter } from '@/app/[variants]/(main)/hooks/useRouter';
+import type { AgentCronJob } from '@/database/schemas/agentCronJob';
+
+import CronTopicItem from './CronTopicItem';
+
+interface CronTopicGroupProps {
+  cronJob: AgentCronJob | null;
+  cronJobId: string;
+  topics: Array<{
+    createdAt: Date | string;
+    favorite?: boolean | null;
+    historySummary?: string | null;
+    id: string;
+    metadata?: any;
+    title?: string | null;
+    trigger?: string | null;
+    updatedAt: Date | string;
+  }>;
+}
+
+const CronTopicGroup = memo<CronTopicGroupProps>(({ cronJob, cronJobId, topics }) => {
+  const { t } = useTranslation('setting');
+  const { aid, cronId } = useParams<{ aid?: string; cronId?: string }>();
+  const router = useRouter();
+
+  const handleOpenCronJob = useCallback(() => {
+    if (!aid) return;
+    router.push(`/agent/${aid}/cron/${cronJobId}`);
+  }, [aid, cronJobId, router]);
+
+  const cronJobName = cronJob?.name || t('agentCronJobs.unnamedTask');
+  const isEnabled = cronJob?.enabled ?? false;
+  const isActive = cronId === cronJobId;
+
+  return (
+    <AccordionItem
+      action={
+        <ActionIcon
+          icon={Settings2Icon}
+          onClick={handleOpenCronJob}
+          size="small"
+          title={t('agentCronJobs.editJob')}
+        />
+      }
+      itemKey={cronJobId}
+      paddingBlock={4}
+      paddingInline={'8px 4px'}
+      title={
+        <Flexbox align="center" gap={6} height={24} horizontal style={{ overflow: 'hidden' }}>
+          <Icon icon={isEnabled ? TimerIcon : TimerOffIcon} style={{ opacity: 0.5 }} />
+          <Text ellipsis style={{ flex: 1 }} type={isActive ? undefined : 'secondary'}>
+            {cronJobName}
+          </Text>
+          {topics.length > 0 && (
+            <Text fontSize={11} type="secondary">
+              {topics.length}
+            </Text>
+          )}
+        </Flexbox>
+      }
+      variant={isActive ? 'filled' : 'borderless'}
+    >
+      <Flexbox gap={1} paddingBlock={1}>
+        {topics.length > 0 ? (
+          topics.map((topic) => <CronTopicItem key={topic.id} topic={topic} />)
+        ) : (
+          <Text fontSize={12} style={{ padding: '8px 12px' }} type="secondary">
+            {t('agentCronJobs.noExecutionResults')}
+          </Text>
+        )}
+      </Flexbox>
+    </AccordionItem>
+  );
+});
+
+export default CronTopicGroup;

package/src/app/[variants]/(main)/agent/_layout/Sidebar/{Topic/CronTopicList → Cron}/CronTopicItem.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
 
-import TopicItem from '../List/Item';
+import TopicItem from '../Topic/List/Item';
 
 interface CronTopicItemProps {
   topic: {

package/src/app/[variants]/(main)/agent/_layout/Sidebar/{Topic/CronTopicList → Cron}/index.tsx

@@ -1,9 +1,8 @@
 'use client';
 
 import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
-import { AccordionItem, ActionIcon, Flexbox, Icon, Text } from '@lobehub/ui';
-import { message } from 'antd';
-import { Calendar, Plus } from 'lucide-react';
+import { Accordion, AccordionItem, ActionIcon, Flexbox, Text } from '@lobehub/ui';
+import { Plus } from 'lucide-react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -11,9 +10,7 @@ import urlJoin from 'url-join';
 import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
 import EmptyNavItem from '@/features/NavPanel/components/EmptyNavItem';
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
-import { useFetchCronTopicsWithJobInfo } from '@/hooks/useFetchCronTopicsWithJobInfo';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { agentCronJobService } from '@/services/agentCronJob';
 import { useAgentStore } from '@/store/agent';
 
 import CronTopicGroup from './CronTopicGroup';
@@ -25,33 +22,22 @@ interface CronTopicListProps {
 const CronTopicList = memo<CronTopicListProps>(({ itemKey }) => {
   const { t } = useTranslation('setting');
   const router = useQueryRoute();
-  const agentId = useAgentStore((s) => s.activeAgentId);
-  const { cronTopicsGroupsWithJobInfo, isLoading, mutate } = useFetchCronTopicsWithJobInfo();
-  const totalTopics = cronTopicsGroupsWithJobInfo.reduce(
-    (acc, group) => acc + group.topics.length,
-    0,
-  );
+  const [agentId, createAgentCronJob, useFetchCronTopicsWithJobInfo] = useAgentStore((s) => [
+    s.activeAgentId,
+    s.createAgentCronJob,
+    s.useFetchCronTopicsWithJobInfo,
+  ]);
+  const { data: cronTopicsGroupsWithJobInfo = [], isLoading } =
+    useFetchCronTopicsWithJobInfo(agentId);
 
   const handleCreateCronJob = useCallback(async () => {
     if (!agentId) return;
-    try {
-      const result = await agentCronJobService.create({
-        agentId,
-        content: t('agentCronJobs.form.content.placeholder') || 'This is a cron job',
-        cronPattern: '*/30 * * * *',
-        enabled: true,
-        name: t('agentCronJobs.addJob') || 'Cron Job Task',
-      });
 
-      if (result.success) {
-        await mutate();
-        router.push(urlJoin('/agent', agentId, 'cron', result.data.id));
-      }
-    } catch (error) {
-      console.error('Failed to create cron job:', error);
-      message.error('Failed to create scheduled task');
+    const cronJobId = await createAgentCronJob();
+    if (cronJobId) {
+      router.push(urlJoin('/agent', agentId, 'cron', cronJobId));
     }
-  }, [agentId, mutate, router, t]);
+  }, [agentId, createAgentCronJob, router]);
 
   if (!ENABLE_BUSINESS_FEATURES) return null;
 
@@ -74,7 +60,6 @@ const CronTopicList = memo<CronTopicListProps>(({ itemKey }) => {
         paddingInline={'8px 4px'}
         title={
           <Flexbox align="center" gap={4} horizontal>
-            <Icon icon={Calendar} size={12} />
             <Text ellipsis fontSize={12} type={'secondary'} weight={500}>
               {t('agentCronJobs.title')}
             </Text>
@@ -96,7 +81,6 @@ const CronTopicList = memo<CronTopicListProps>(({ itemKey }) => {
         paddingInline={'8px 4px'}
         title={
           <Flexbox align="center" gap={4} horizontal>
-            <Icon icon={Calendar} size={12} />
             <Text ellipsis fontSize={12} type={'secondary'} weight={500}>
               {t('agentCronJobs.title')}
             </Text>
@@ -108,6 +92,8 @@ const CronTopicList = memo<CronTopicListProps>(({ itemKey }) => {
     );
   }
 
+  const totalCronJobs = cronTopicsGroupsWithJobInfo.length;
+
   return (
     <AccordionItem
       action={addAction}
@@ -116,14 +102,18 @@ const CronTopicList = memo<CronTopicListProps>(({ itemKey }) => {
       paddingInline={'8px 4px'}
       title={
         <Flexbox align="center" gap={4} horizontal>
-          <Icon icon={Calendar} size={12} />
           <Text ellipsis fontSize={12} type={'secondary'} weight={500}>
-            {`${t('agentCronJobs.title')} ${totalTopics > 0 ? totalTopics : ''}`}
+            {t('agentCronJobs.title')}
           </Text>
+          {totalCronJobs > 0 && (
+            <Text fontSize={11} type="secondary">
+              {totalCronJobs}
+            </Text>
+          )}
         </Flexbox>
       }
     >
-      <Flexbox gap={2} paddingBlock={2}>
+      <Accordion defaultExpandedKeys={cronTopicsGroupsWithJobInfo.map((g) => g.cronJobId)} gap={2}>
         {cronTopicsGroupsWithJobInfo.map((group) => (
           <CronTopicGroup
             cronJob={group.cronJob}
@@ -132,7 +122,7 @@ const CronTopicList = memo<CronTopicListProps>(({ itemKey }) => {
             topics={group.topics}
           />
         ))}
-      </Flexbox>
+      </Accordion>
     </AccordionItem>
   );
 });

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Topic/List/Item/Editing.tsx

@@ -1,7 +1,6 @@
-import { Input, type InputProps, Popover } from '@lobehub/ui';
-import type { InputRef } from 'antd';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback } from 'react';
 
+import InlineRename from '@/components/InlineRename';
 import { useChatStore } from '@/store/chat';
 
 interface EditingProps {
@@ -10,27 +9,14 @@ interface EditingProps {
   toggleEditing: (visible?: boolean) => void;
 }
 
-function FocusableInput({ ...props }: InputProps) {
-  const ref = useRef<InputRef>(null);
-  useEffect(() => {
-    queueMicrotask(() => {
-      if (ref.current) {
-        ref.current.input?.focus();
-      }
-    });
-  }, []);
-  return <Input {...props} ref={ref} />;
-}
-
 const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
-  const [newTitle, setNewTitle] = useState(title);
   const [editing, updateTopicTitle] = useChatStore((s) => [
     s.topicRenamingId === id,
     s.updateTopicTitle,
   ]);
 
-  const handleUpdate = useCallback(async () => {
-    if (newTitle && title !== newTitle) {
+  const handleSave = useCallback(
+    async (newTitle: string) => {
       try {
         // Set loading state
         useChatStore.setState(
@@ -53,40 +39,17 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
           'clearTopicUpdating',
         );
       }
-    }
-  }, [newTitle, title, id, updateTopicTitle, toggleEditing]);
+    },
+    [id, updateTopicTitle],
+  );
 
   return (
-    <Popover
-      content={
-        <FocusableInput
-          defaultValue={title}
-          onBlur={handleUpdate}
-          onChange={(e) => setNewTitle(e.target.value)}
-          onClick={(e) => e.stopPropagation()}
-          onPressEnter={() => {
-            handleUpdate();
-            toggleEditing(false);
-          }}
-        />
-      }
-      onOpenChange={(open) => {
-        if (!open) handleUpdate();
-
-        toggleEditing(open);
-      }}
+    <InlineRename
+      onOpenChange={(open) => toggleEditing(open)}
+      onSave={handleSave}
       open={editing}
-      placement="bottomLeft"
-      styles={{
-        content: {
-          padding: 4,
-          width: 320,
-        },
-      }}
-      trigger="click"
-    >
-      <div />
-    </Popover>
+      title={title}
+    />
   );
 });
 

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Topic/List/index.tsx

@@ -18,6 +18,8 @@ import AllTopicsDrawer from '../AllTopicsDrawer';
 import ByTimeMode from '../TopicListContent/ByTimeMode';
 import FlatMode from '../TopicListContent/FlatMode';
 
+const fetchParams = { excludeTriggers: ['cron'] };
+
 const TopicList = memo(() => {
   const { t } = useTranslation('topic');
   const router = useQueryRoute();
@@ -32,7 +34,7 @@ const TopicList = memo(() => {
 
   const [topicDisplayMode] = useUserStore((s) => [preferenceSelectors.topicDisplayMode(s)]);
 
-  useFetchTopics({ excludeTriggers: ['cron'] });
+  useFetchTopics(fetchParams);
 
   // Show skeleton when current session's topic data is not yet loaded
   if (isUndefinedTopics) return <SkeletonList />;

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Editing.tsx

@@ -1,6 +1,6 @@
-import { Input, Popover } from '@lobehub/ui';
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback } from 'react';
 
+import InlineRename from '@/components/InlineRename';
 import { useChatStore } from '@/store/chat';
 
 interface EditingProps {
@@ -10,53 +10,25 @@ interface EditingProps {
 }
 
 const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
-  const [newTitle, setNewTitle] = useState(title);
   const [editing, updateThreadTitle] = useChatStore((s) => [
     s.threadRenamingId === id,
     s.updateThreadTitle,
   ]);
 
-  const handleUpdate = useCallback(async () => {
-    if (newTitle && title !== newTitle) {
+  const handleSave = useCallback(
+    async (newTitle: string) => {
       await updateThreadTitle(id, newTitle);
-    }
-    toggleEditing(false);
-  }, [newTitle, title, id, updateThreadTitle, toggleEditing]);
+    },
+    [id, updateThreadTitle],
+  );
 
   return (
-    <Popover
-      content={
-        <Input
-          autoFocus
-          defaultValue={title}
-          onBlur={() => {
-            handleUpdate();
-            toggleEditing(false);
-          }}
-          onChange={(e) => setNewTitle(e.target.value)}
-          onClick={(e) => e.stopPropagation()}
-          onPressEnter={() => {
-            handleUpdate();
-            toggleEditing(false);
-          }}
-        />
-      }
-      onOpenChange={(open) => {
-        if (!open) handleUpdate();
-        toggleEditing(open);
-      }}
+    <InlineRename
+      onOpenChange={(open) => toggleEditing(open)}
+      onSave={handleSave}
       open={editing}
-      placement="bottomLeft"
-      styles={{
-        content: {
-          padding: 4,
-          width: 320,
-        },
-      }}
-      trigger="click"
-    >
-      <div />
-    </Popover>
+      title={title}
+    />
   );
 });
 

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Topic/hooks/useTopicNavigation.ts

@@ -32,7 +32,11 @@ export const useTopicNavigation = () => {
     (topicId?: string) => {
       // If in agent sub-route, navigate back to agent chat first
       if (isInAgentSubRoute() && activeAgentId) {
-        router.push(urlJoin('/agent', activeAgentId as string));
+        const basePath = urlJoin('/agent', activeAgentId as string);
+        // Include topicId in URL when navigating from sub-route
+        router.push(topicId ? `${basePath}?topic=${topicId}` : basePath);
+        toggleConfig(false);
+        return;
       }
 
       switchTopic(topicId);

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

@@ -99,7 +99,7 @@ const CronJobCards = memo<CronJobCardsProps>(({ cronJobs, loading, onDelete, onE
                         whiteSpace: 'nowrap',
                       }}
                     >
-                      {job.name || 'Unnamed Task'}
+                      {job.name || t('agentCronJobs.unnamedTask')}
                     </span>
                     <Badge status={statusInfo.status} />
                   </Flexbox>

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

@@ -96,7 +96,7 @@ const CronJobForm = memo<CronJobFormProps>(({ editingJob, formRef, onSubmit }) =
     const data: CronJobFormData = {
       content: values.content,
       cronPattern: values.cronPattern,
-      enabled: true,
+      enabled: false,
       executionConditions: Object.keys(executionConditions).length > 0 ? executionConditions : null,
       maxExecutions: values.maxExecutions || null,
       name: values.name,

package/src/app/[variants]/(main)/group/_layout/Sidebar/AddGroupMemberModal/AvailableAgentList.tsx

@@ -21,7 +21,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     padding-block: ${cssVar.paddingSM}px 0;
     padding-inline: ${cssVar.paddingSM}px;
-    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
   `,
 }));
 

package/src/app/[variants]/(main)/group/_layout/Sidebar/AddGroupMemberModal/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button, Flexbox, Modal } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { createStaticStyles } from 'antd-style';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +20,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     flex-direction: row;
 
     height: 500px;
+    padding: 12px;
     border: 1px solid ${cssVar.colorBorderSecondary};
     border-radius: ${cssVar.borderRadius}px;
   `,
@@ -104,10 +106,12 @@ const AddGroupMemberModal = memo<AddGroupMemberModalProps>(
         title={t('memberSelection.addMember')}
         width={800}
       >
-        <Flexbox className={styles.container} horizontal>
+        <Flexbox className={styles.container} gap={8} horizontal>
           {/* Left Column - Available Agents */}
           <AvailableAgentList agents={availableAgents} isLoading={isLoadingAgents} />
 
+          <Divider orientation={'vertical'} style={{ height: '100%' }} />
+
           {/* Right Column - Selected Agents */}
           <SelectedAgentList agents={allAgents} />
         </Flexbox>

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/AgentGroupItem/Editing.tsx

@@ -10,7 +10,7 @@ interface EditingProps {
 }
 
 const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
-  const editing = useHomeStore((s) => s.agentRenamingId === id);
+  const editing = useHomeStore((s) => s.groupRenamingId === id);
 
   const [newTitle, setNewTitle] = useState(title);
 
@@ -19,17 +19,10 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
 
     if (hasChanges) {
       try {
-        // Set loading state
-        useHomeStore.getState().setAgentUpdatingId(id);
-
-        // TODO: Add group title update logic here
-        // await updateGroupTitle(id, newTitle);
-
-        // Refresh agent list to update sidebar display
-        await useHomeStore.getState().refreshAgentList();
+        useHomeStore.getState().setGroupUpdatingId(id);
+        await useHomeStore.getState().renameAgentGroup(id, newTitle);
       } finally {
-        // Clear loading state
-        useHomeStore.getState().setAgentUpdatingId(null);
+        useHomeStore.getState().setGroupUpdatingId(null);
       }
     }
     toggleEditing(false);

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/AgentGroupItem/index.tsx

@@ -30,8 +30,8 @@ const GroupItem = memo<GroupItemProps>(({ item, style, className }) => {
 
   // Get UI state from homeStore (editing, updating)
   const [editing, isUpdating] = useHomeStore((s) => [
-    s.agentRenamingId === id,
-    s.agentUpdatingId === id,
+    s.groupRenamingId === id,
+    s.groupUpdatingId === id,
   ]);
 
   // Get display title with fallback
@@ -63,7 +63,7 @@ const GroupItem = memo<GroupItemProps>(({ item, style, className }) => {
 
   const toggleEditing = useCallback(
     (visible?: boolean) => {
-      useHomeStore.getState().setAgentRenamingId(visible ? id : null);
+      useHomeStore.getState().setGroupRenamingId(visible ? id : null);
     },
     [id],
   );

package/src/components/InlineRename/index.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { Input, type InputProps, Popover } from '@lobehub/ui';
+import type { InputRef, PopoverProps } from 'antd';
+import { KeyboardEvent, memo, useCallback, useEffect, useRef, useState } from 'react';
+
+function FocusableInput(props: InputProps) {
+  const ref = useRef<InputRef>(null);
+  useEffect(() => {
+    queueMicrotask(() => {
+      ref.current?.input?.focus();
+    });
+  }, []);
+  return <Input {...props} ref={ref} />;
+}
+
+export interface InlineRenameProps {
+  /**
+   * Callback when editing is cancelled (Escape key)
+   */
+  onCancel?: () => void;
+  /**
+   * Callback when open state changes
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Callback to save the new title
+   */
+  onSave: (newTitle: string) => void | Promise<void>;
+  /**
+   * Whether the popover is open (editing mode)
+   */
+  open: boolean;
+  /**
+   * Popover placement
+   */
+  placement?: PopoverProps['placement'];
+  /**
+   * Current title
+   */
+  title: string;
+  /**
+   * Popover width
+   */
+  width?: number;
+}
+
+const InlineRename = memo<InlineRenameProps>(
+  ({ open, title, onOpenChange, onSave, onCancel, placement = 'bottomLeft', width = 320 }) => {
+    const [newTitle, setNewTitle] = useState(title);
+    const savedRef = useRef(false);
+
+    // Reset state when opening
+    useEffect(() => {
+      if (open) {
+        setNewTitle(title);
+        savedRef.current = false;
+      }
+    }, [open, title]);
+
+    const handleSave = useCallback(async () => {
+      if (savedRef.current) return;
+
+      if (newTitle && title !== newTitle) {
+        savedRef.current = true;
+        await onSave(newTitle);
+      }
+    }, [newTitle, title, onSave]);
+
+    const handleClose = useCallback(() => {
+      onOpenChange(false);
+    }, [onOpenChange]);
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          e.stopPropagation();
+          onCancel?.();
+          handleClose();
+        }
+      },
+      [onCancel, handleClose],
+    );
+
+    return (
+      <Popover
+        content={
+          <FocusableInput
+            defaultValue={title}
+            onBlur={handleSave}
+            onChange={(e) => setNewTitle(e.target.value)}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={handleKeyDown}
+            onPressEnter={() => {
+              handleSave();
+              handleClose();
+            }}
+          />
+        }
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) handleSave();
+          onOpenChange(nextOpen);
+        }}
+        open={open}
+        placement={placement}
+        styles={{
+          content: {
+            padding: 4,
+            width,
+          },
+        }}
+        trigger="click"
+      >
+        <div />
+      </Popover>
+    );
+  },
+);
+
+export default InlineRename;