@lobehub/lobehub 2.0.0-next.264 → 2.0.0-next.266

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/features/Conversation/MainChatInput/index.tsx

@@ -11,10 +11,10 @@ import { useSendMenuItems } from './useSendMenuItems';
 const leftActions: ActionKeys[] = [
   'model',
   'search',
-  'typo',
   'fileUpload',
+  'tools',
   '---',
-  ['tools', 'params', 'clear'],
+  ['typo', 'params', 'clear'],
   'mainToken',
 ];
 

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/index.tsx

@@ -13,8 +13,8 @@ import { useGlobalStore } from '@/store/global';
 import { useHomeStore } from '@/store/home';
 
 import Actions from '../Item/Actions';
-import { useDropdownMenu } from '../Item/useDropdownMenu';
 import Editing from './Editing';
+import { useGroupDropdownMenu } from './useDropdownMenu';
 
 interface GroupItemProps {
   className?: string;
@@ -85,13 +85,9 @@ const GroupItem = memo<GroupItemProps>(({ item, style, className }) => {
     return <GroupAvatar avatars={(avatar as any) || []} size={22} />;
   }, [isUpdating, avatar]);
 
-  const dropdownMenu = useDropdownMenu({
-    group: undefined,
+  const dropdownMenu = useGroupDropdownMenu({
     id,
-    openCreateGroupModal: () => {}, // Groups don't need this
-    parentType: 'group',
     pinned: pinned ?? false,
-    sessionType: 'group',
     toggleEditing,
   });
 

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

@@ -0,0 +1,100 @@
+import { Icon, type MenuProps } from '@lobehub/ui';
+import { App } from 'antd';
+import { LucideCopy, Pen, PictureInPicture2Icon, Pin, PinOff, Trash } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { useHomeStore } from '@/store/home';
+
+interface UseGroupDropdownMenuParams {
+  id: string;
+  pinned: boolean;
+  toggleEditing: (visible?: boolean) => void;
+}
+
+export const useGroupDropdownMenu = ({
+  id,
+  pinned,
+  toggleEditing,
+}: UseGroupDropdownMenuParams): (() => MenuProps['items']) => {
+  const { t } = useTranslation('chat');
+  const { modal, message } = App.useApp();
+
+  const openAgentInNewWindow = useGlobalStore((s) => s.openAgentInNewWindow);
+  const [pinAgentGroup, duplicateAgentGroup, removeAgentGroup] = useHomeStore((s) => [
+    s.pinAgentGroup,
+    s.duplicateAgentGroup,
+    s.removeAgentGroup,
+  ]);
+
+  return useMemo(
+    () => () =>
+      [
+        {
+          icon: <Icon icon={pinned ? PinOff : Pin} />,
+          key: 'pin',
+          label: t(pinned ? 'pinOff' : 'pin'),
+          onClick: () => pinAgentGroup(id, !pinned),
+        },
+        {
+          icon: <Icon icon={Pen} />,
+          key: 'rename',
+          label: t('rename', { ns: 'common' }),
+          onClick: (info: any) => {
+            info.domEvent?.stopPropagation();
+            toggleEditing(true);
+          },
+        },
+        {
+          icon: <Icon icon={LucideCopy} />,
+          key: 'duplicate',
+          label: t('duplicate', { ns: 'common' }),
+          onClick: ({ domEvent }: any) => {
+            domEvent.stopPropagation();
+            duplicateAgentGroup(id);
+          },
+        },
+        {
+          icon: <Icon icon={PictureInPicture2Icon} />,
+          key: 'openInNewWindow',
+          label: t('openInNewWindow'),
+          onClick: ({ domEvent }: any) => {
+            domEvent.stopPropagation();
+            openAgentInNewWindow(id);
+          },
+        },
+        { type: 'divider' },
+        {
+          danger: true,
+          icon: <Icon icon={Trash} />,
+          key: 'delete',
+          label: t('delete', { ns: 'common' }),
+          onClick: ({ domEvent }: any) => {
+            domEvent.stopPropagation();
+            modal.confirm({
+              centered: true,
+              okButtonProps: { danger: true },
+              onOk: async () => {
+                await removeAgentGroup(id);
+                message.success(t('confirmRemoveGroupSuccess'));
+              },
+              title: t('confirmRemoveChatGroupItemAlert'),
+            });
+          },
+        },
+      ] as MenuProps['items'],
+    [
+      t,
+      pinned,
+      pinAgentGroup,
+      id,
+      toggleEditing,
+      duplicateAgentGroup,
+      openAgentInNewWindow,
+      modal,
+      removeAgentGroup,
+      message,
+    ],
+  );
+};

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

@@ -15,9 +15,9 @@ import { useHomeStore } from '@/store/home';
 
 import { useAgentModal } from '../../ModalProvider';
 import Actions from '../Item/Actions';
-import { useDropdownMenu } from '../Item/useDropdownMenu';
 import Avatar from './Avatar';
 import Editing from './Editing';
+import { useAgentDropdownMenu } from './useDropdownMenu';
 
 interface AgentItemProps {
   className?: string;
@@ -96,13 +96,11 @@ const AgentItem = memo<AgentItemProps>(({ item, style, className }) => {
     return <Avatar avatar={typeof avatar === 'string' ? avatar : undefined} />;
   }, [isUpdating, avatar]);
 
-  const dropdownMenu = useDropdownMenu({
+  const dropdownMenu = useAgentDropdownMenu({
     group: undefined, // TODO: pass group from parent if needed
     id,
     openCreateGroupModal: handleOpenCreateGroupModal,
-    parentType: 'agent',
     pinned: pinned ?? false,
-    sessionType: 'agent',
     toggleEditing,
   });
 

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

@@ -0,0 +1,149 @@
+import { SessionDefaultGroup } from '@lobechat/types';
+import { Icon, type MenuProps } from '@lobehub/ui';
+import { App } from 'antd';
+import isEqual from 'fast-deep-equal';
+import {
+  Check,
+  FolderInputIcon,
+  LucideCopy,
+  LucidePlus,
+  Pen,
+  PictureInPicture2Icon,
+  Pin,
+  PinOff,
+  Trash,
+} from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { useHomeStore } from '@/store/home';
+import { homeAgentListSelectors } from '@/store/home/selectors';
+
+interface UseAgentDropdownMenuParams {
+  group: string | undefined;
+  id: string;
+  openCreateGroupModal: () => void;
+  pinned: boolean;
+  toggleEditing: (visible?: boolean) => void;
+}
+
+export const useAgentDropdownMenu = ({
+  group,
+  id,
+  openCreateGroupModal,
+  pinned,
+  toggleEditing,
+}: UseAgentDropdownMenuParams): (() => MenuProps['items']) => {
+  const { t } = useTranslation('chat');
+  const { modal, message } = App.useApp();
+
+  const openAgentInNewWindow = useGlobalStore((s) => s.openAgentInNewWindow);
+  const sessionCustomGroups = useHomeStore(homeAgentListSelectors.agentGroups, isEqual);
+  const [pinAgent, duplicateAgent, updateAgentGroup, removeAgent] = useHomeStore((s) => [
+    s.pinAgent,
+    s.duplicateAgent,
+    s.updateAgentGroup,
+    s.removeAgent,
+  ]);
+
+  const isDefault = group === SessionDefaultGroup.Default;
+
+  return useMemo(
+    () => () =>
+      [
+        {
+          icon: <Icon icon={pinned ? PinOff : Pin} />,
+          key: 'pin',
+          label: t(pinned ? 'pinOff' : 'pin'),
+          onClick: () => pinAgent(id, !pinned),
+        },
+        {
+          icon: <Icon icon={Pen} />,
+          key: 'rename',
+          label: t('rename', { ns: 'common' }),
+          onClick: (info: any) => {
+            info.domEvent?.stopPropagation();
+            toggleEditing(true);
+          },
+        },
+        {
+          icon: <Icon icon={LucideCopy} />,
+          key: 'duplicate',
+          label: t('duplicate', { ns: 'common' }),
+          onClick: ({ domEvent }: any) => {
+            domEvent.stopPropagation();
+            duplicateAgent(id);
+          },
+        },
+        {
+          icon: <Icon icon={PictureInPicture2Icon} />,
+          key: 'openInNewWindow',
+          label: t('openInNewWindow'),
+          onClick: ({ domEvent }: any) => {
+            domEvent.stopPropagation();
+            openAgentInNewWindow(id);
+          },
+        },
+        { type: 'divider' },
+        {
+          children: [
+            ...sessionCustomGroups.map(({ id: groupId, name }) => ({
+              icon: group === groupId ? <Icon icon={Check} /> : <div />,
+              key: groupId,
+              label: name,
+              onClick: () => updateAgentGroup(id, groupId),
+            })),
+            {
+              icon: isDefault ? <Icon icon={Check} /> : <div />,
+              key: 'defaultList',
+              label: t('defaultList'),
+              onClick: () => updateAgentGroup(id, SessionDefaultGroup.Default),
+            },
+            { type: 'divider' as const },
+            {
+              icon: <Icon icon={LucidePlus} />,
+              key: 'createGroup',
+              label: <div>{t('sessionGroup.createGroup')}</div>,
+              onClick: ({ domEvent }: any) => {
+                domEvent.stopPropagation();
+                openCreateGroupModal();
+              },
+            },
+          ],
+          icon: <Icon icon={FolderInputIcon} />,
+          key: 'moveGroup',
+          label: t('sessionGroup.moveGroup'),
+        },
+        { type: 'divider' },
+        {
+          danger: true,
+          icon: <Icon icon={Trash} />,
+          key: 'delete',
+          label: t('delete', { ns: 'common' }),
+          onClick: ({ domEvent }: any) => {
+            domEvent.stopPropagation();
+            modal.confirm({
+              centered: true,
+              okButtonProps: { danger: true },
+              onOk: async () => {
+                await removeAgent(id);
+                message.success(t('confirmRemoveSessionSuccess'));
+              },
+              title: t('confirmRemoveSessionItemAlert'),
+            });
+          },
+        },
+      ] as MenuProps['items'],
+    [
+      pinned,
+      id,
+      toggleEditing,
+      sessionCustomGroups,
+      group,
+      isDefault,
+      openCreateGroupModal,
+      message,
+    ],
+  );
+};

package/src/app/[variants]/(main)/home/_layout/hooks/index.ts

@@ -1,4 +1,3 @@
 export { useCreateMenuItems } from './useCreateMenuItems';
 export { useProjectMenuItems } from './useProjectMenuItems';
 export { useSessionGroupMenuItems } from './useSessionGroupMenuItems';
-export { useSessionItemMenuItems } from './useSessionItemMenuItems';

package/src/app/[variants]/(main)/home/features/InputArea/index.tsx

@@ -12,7 +12,7 @@ import ModeHeader from './ModeHeader';
 import StarterList from './StarterList';
 import { useSend } from './useSend';
 
-const leftActions: ActionKeys[] = ['model', 'search', 'fileUpload'];
+const leftActions: ActionKeys[] = ['model', 'search', 'fileUpload', 'tools'];
 
 const InputArea = () => {
   const { loading, send, inboxAgentId } = useSend();

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;

package/src/features/ChatInput/InputEditor/index.tsx

@@ -120,6 +120,7 @@ const InputEditor = memo<{ defaultRows?: number }>(({ defaultRows = 2 }) => {
       className={className}
       content={''}
       editor={editor}
+      pasteAsPlainText
       {...richRenderProps}
       mentionOption={
         enableMention

package/src/features/EditorCanvas/DiffAllToolbar.tsx

@@ -36,7 +36,7 @@ const styles = createStaticStyles(({ css }) => ({
 }));
 
 const useIsEditorInit = (editor: IEditor) => {
-  const [isEditInit, setEditInit] = useState<boolean>(!!editor.getLexicalEditor());
+  const [isEditInit, setEditInit] = useState<boolean>(!!editor?.getLexicalEditor());
 
   useEffect(() => {
     if (!editor) return;

package/src/features/NavPanel/components/NavItem.tsx

@@ -98,7 +98,7 @@ const NavItem = memo<NavItemProps>(
 
         <Flexbox align={'center'} flex={1} gap={8} horizontal style={{ overflow: 'hidden' }}>
           <Text color={textColor} ellipsis style={{ flex: 1 }}>
-            {title || 'LobeHub'}
+            {title}
           </Text>
           <Flexbox
             align={'center'}

package/src/locales/default/setting.ts

@@ -33,6 +33,7 @@ export default {
   'agentCronJobs.maxExecutions': 'Max Executions',
   'agentCronJobs.name': 'Task Name',
   'agentCronJobs.never': 'Never',
+  'agentCronJobs.noExecutionResults': 'No execution results',
   'agentCronJobs.remainingExecutions': 'Remaining: {{count}}',
   'agentCronJobs.save': 'Save',
   'agentCronJobs.schedule': 'Schedule',
@@ -42,6 +43,7 @@ export default {
   'agentCronJobs.timeRange': 'Time Range',
   'agentCronJobs.title': 'Scheduled Tasks',
   'agentCronJobs.unlimited': 'Unlimited',
+  'agentCronJobs.unnamedTask': 'Unnamed Task',
   'agentCronJobs.updateSuccess': 'Scheduled task updated successfully',
   'agentCronJobs.weekdays': 'Weekdays',
   'agentInfoDescription.basic.avatar': 'Avatar',

package/src/server/routers/lambda/agent.ts

@@ -130,6 +130,21 @@ export const agentRouter = router({
       return ctx.agentModel.deleteAgentKnowledgeBase(input.agentId, input.knowledgeBaseId);
     }),
 
+  /**
+   * Duplicate an agent and its associated session.
+   * Returns the new agent ID and session ID.
+   */
+  duplicateAgent: agentProcedure
+    .input(
+      z.object({
+        agentId: z.string(),
+        newTitle: z.string().optional(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return ctx.agentModel.duplicate(input.agentId, input.newTitle);
+    }),
+
   /**
    * Get an agent by marketIdentifier
    * @returns agent id if exists, null otherwise