@lobehub/lobehub 2.0.0-next.273 → 2.0.0-next.274

package/src/app/[variants]/(main)/group/profile/features/EditorCanvas/TypoBar.tsx

@@ -1,129 +0,0 @@
-import { HotkeyEnum, getHotkeyById } from '@lobehub/editor';
-import { FloatActions } from '@lobehub/editor/react';
-import { type ChatInputActionsProps } from '@lobehub/editor/react';
-import {
-  BoldIcon,
-  CodeXmlIcon,
-  ItalicIcon,
-  ListIcon,
-  ListOrderedIcon,
-  ListTodoIcon,
-  MessageSquareQuote,
-  SigmaIcon,
-  SquareDashedBottomCodeIcon,
-  StrikethroughIcon,
-  UnderlineIcon,
-} from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useProfileStore } from '../store';
-
-const TypoBar = memo(() => {
-  const { t } = useTranslation('editor');
-  const editorState = useProfileStore((s) => s.editorState);
-
-  const items: ChatInputActionsProps['items'] = useMemo(() => {
-    if (!editorState) return [];
-
-    return [
-      {
-        active: editorState.isBold,
-        icon: BoldIcon,
-        key: 'bold',
-        label: t('typobar.bold'),
-        onClick: editorState.bold,
-        tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Bold).keys },
-      },
-      {
-        active: editorState.isItalic,
-        icon: ItalicIcon,
-        key: 'italic',
-        label: t('typobar.italic'),
-        onClick: editorState.italic,
-        tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Italic).keys },
-      },
-      {
-        active: editorState.isUnderline,
-        icon: UnderlineIcon,
-        key: 'underline',
-        label: t('typobar.underline'),
-        onClick: editorState.underline,
-        tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Underline).keys },
-      },
-      {
-        active: editorState.isStrikethrough,
-        icon: StrikethroughIcon,
-        key: 'strikethrough',
-        label: t('typobar.strikethrough'),
-        onClick: editorState.strikethrough,
-        tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Strikethrough).keys },
-      },
-      {
-        type: 'divider',
-      },
-
-      {
-        icon: ListIcon,
-        key: 'bulletList',
-        label: t('typobar.bulletList'),
-        onClick: editorState.bulletList,
-        tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.BulletList).keys },
-      },
-      {
-        icon: ListOrderedIcon,
-        key: 'numberlist',
-        label: t('typobar.numberList'),
-        onClick: editorState.numberList,
-        tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.NumberList).keys },
-      },
-      {
-        icon: ListTodoIcon,
-        key: 'tasklist',
-        label: t('typobar.taskList'),
-        onClick: editorState.checkList,
-      },
-      {
-        type: 'divider',
-      },
-      {
-        active: editorState.isBlockquote,
-        icon: MessageSquareQuote,
-        key: 'blockquote',
-        label: t('typobar.blockquote'),
-        onClick: editorState.blockquote,
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: SigmaIcon,
-        key: 'math',
-        label: t('typobar.tex'),
-        onClick: editorState.insertMath,
-      },
-      {
-        active: editorState.isCode,
-        icon: CodeXmlIcon,
-        key: 'code',
-        label: t('typobar.code'),
-        onClick: editorState.code,
-        tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.CodeInline).keys },
-      },
-      {
-        icon: SquareDashedBottomCodeIcon,
-        key: 'codeblock',
-        label: t('typobar.codeblock'),
-        onClick: editorState.codeblock,
-      },
-    ].filter(Boolean) as ChatInputActionsProps['items'];
-  }, [editorState, t]);
-
-  if (!editorState) return null;
-
-  return <FloatActions items={items} />;
-});
-
-TypoBar.displayName = 'TypoBar';
-
-export default TypoBar;

package/src/app/[variants]/(main)/group/profile/features/EditorCanvas/index.tsx

@@ -1,138 +0,0 @@
-'use client';
-
-import {
-  ReactCodePlugin,
-  ReactCodemirrorPlugin,
-  ReactHRPlugin,
-  ReactLinkHighlightPlugin,
-  ReactListPlugin,
-  ReactMathPlugin,
-  ReactMentionPlugin,
-  ReactTablePlugin,
-  ReactToolbarPlugin,
-} from '@lobehub/editor';
-import { Editor } from '@lobehub/editor/react';
-import isEqual from 'fast-deep-equal';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useAgentGroupStore } from '@/store/agentGroup';
-import { agentGroupSelectors } from '@/store/agentGroup/selectors';
-
-import { useMentionOptions } from '../ProfileEditor/MentionList';
-import { EMPTY_EDITOR_STATE } from '../constants';
-import { useProfileStore } from '../store';
-import TypoBar from './TypoBar';
-import { useSlashItems } from './useSlashItems';
-
-const EditorCanvas = memo(() => {
-  const { t } = useTranslation('setting');
-  const [editorInit, setEditorInit] = useState(false);
-  const [contentInit, setContentInit] = useState(false);
-
-  // Get systemPrompt from agentGroup store (groupMap.config.systemPrompt)
-  const groupConfig = useAgentGroupStore(agentGroupSelectors.currentGroupConfig, isEqual);
-  const systemRole = groupConfig?.systemPrompt;
-  const updateGroupConfig = useAgentGroupStore((s) => s.updateGroupConfig);
-
-  // Get streaming state from agentGroup store
-  const streamingInProgress = useAgentGroupStore((s) => s.streamingSystemPromptInProgress);
-  const streamingSystemRole = useAgentGroupStore((s) => s.streamingSystemPrompt);
-
-  // For group profile, we don't use editorData - just systemPrompt
-  const editorData = undefined;
-  const [initialLoad] = useState(EMPTY_EDITOR_STATE);
-  const mentionOptions = useMentionOptions();
-  const editor = useProfileStore((s) => s.editor);
-  const handleContentChange = useProfileStore((s) => s.handleContentChange);
-  const slashItems = useSlashItems();
-
-  const prevStreamingRef = useRef<string | undefined>(undefined);
-
-  // Wrap handleContentChange with updateGroupConfig
-  const handleChange = useCallback(() => {
-    // Don't trigger save during streaming
-    if (streamingInProgress) return;
-    handleContentChange(async (config) => {
-      // Only update systemPrompt in group config
-      if (config.systemRole !== undefined) {
-        await updateGroupConfig({ systemPrompt: config.systemRole });
-      }
-    });
-  }, [handleContentChange, updateGroupConfig, streamingInProgress]);
-
-  // Handle streaming updates - update editor with streaming content
-  useEffect(() => {
-    if (!editor || !editorInit) return;
-    if (!streamingInProgress) {
-      prevStreamingRef.current = undefined;
-      return;
-    }
-
-    // Only update if content has changed
-    if (streamingSystemRole !== prevStreamingRef.current) {
-      prevStreamingRef.current = streamingSystemRole;
-      try {
-        editor.setDocument('markdown', streamingSystemRole || '');
-      } catch {
-        // Ignore errors during streaming updates
-      }
-    }
-  }, [editor, editorInit, streamingSystemRole, streamingInProgress]);
-
-  useEffect(() => {
-    if (!editorInit || !editor || contentInit) return;
-    // Don't init if streaming is in progress
-    if (streamingInProgress) return;
-    try {
-      if (editorData) {
-        editor.setDocument('json', editorData);
-      } else if (systemRole) {
-        editor.setDocument('markdown', systemRole);
-      }
-      // If no editorData and no systemRole, leave editor empty to show placeholder
-      setContentInit(true);
-    } catch (error) {
-      console.error('[EditorCanvas] Failed to init editor content:', error);
-    }
-  }, [editorInit, contentInit, editor, editorData, systemRole, streamingInProgress]);
-
-  return (
-    <div
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      <Editor
-        content={initialLoad}
-        editor={editor!}
-        lineEmptyPlaceholder={t('settingAgent.prompt.placeholder')}
-        mentionOption={mentionOptions}
-        onInit={() => setEditorInit(true)}
-        onTextChange={handleChange}
-        placeholder={t('settingAgent.prompt.templatePlaceholder')}
-        plugins={[
-          ReactListPlugin,
-          ReactCodePlugin,
-          ReactCodemirrorPlugin,
-          ReactHRPlugin,
-          ReactLinkHighlightPlugin,
-          ReactTablePlugin,
-          ReactMathPlugin,
-          ReactMentionPlugin,
-          Editor.withProps(ReactToolbarPlugin, {
-            children: <TypoBar />,
-          }),
-        ]}
-        slashOption={{
-          items: slashItems,
-        }}
-        style={{
-          paddingBottom: 64,
-        }}
-      />
-    </div>
-  );
-});
-
-export default EditorCanvas;

package/src/app/[variants]/(main)/group/profile/features/EditorCanvas/useSlashItems.tsx

@@ -1,139 +0,0 @@
-import {
-  INSERT_CHECK_LIST_COMMAND,
-  INSERT_HEADING_COMMAND,
-  INSERT_HORIZONTAL_RULE_COMMAND,
-  INSERT_MATH_COMMAND,
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_TABLE_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  type SlashOptions,
-} from '@lobehub/editor';
-import { Text } from '@lobehub/ui';
-import {
-  Heading1Icon,
-  Heading2Icon,
-  Heading3Icon,
-  ListIcon,
-  ListOrderedIcon,
-  ListTodoIcon,
-  MinusIcon,
-  SigmaIcon,
-  SquareDashedBottomCodeIcon,
-  Table2Icon,
-} from 'lucide-react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useProfileStore } from '../store';
-
-export const useSlashItems = (): SlashOptions['items'] => {
-  const { t } = useTranslation('editor');
-  const editorState = useProfileStore((s) => s.editorState);
-  return useMemo(() => {
-    const data: SlashOptions['items'] = [
-      {
-        icon: Heading1Icon,
-        key: 'h1',
-        label: t('slash.h1'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_HEADING_COMMAND, { tag: 'h1' });
-        },
-      },
-      {
-        icon: Heading2Icon,
-        key: 'h2',
-        label: t('slash.h2'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_HEADING_COMMAND, { tag: 'h2' });
-        },
-      },
-      {
-        icon: Heading3Icon,
-        key: 'h3',
-        label: t('slash.h3'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_HEADING_COMMAND, { tag: 'h3' });
-        },
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: ListTodoIcon,
-        key: 'tl',
-        label: t('typobar.taskList'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
-        },
-      },
-      {
-        icon: ListIcon,
-        key: 'ul',
-        label: t('typobar.bulletList'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-        },
-      },
-      {
-        icon: ListOrderedIcon,
-        key: 'ol',
-        label: t('typobar.numberList'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-        },
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: MinusIcon,
-        key: 'hr',
-        label: t('slash.hr'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, {});
-        },
-      },
-      {
-        icon: Table2Icon,
-        key: 'table',
-        label: t('slash.table'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns: '3', rows: '3' });
-        },
-      },
-      {
-        icon: SquareDashedBottomCodeIcon,
-        key: 'codeblock',
-        label: t('typobar.codeblock'),
-        onSelect: () => {
-          editorState.codeblock();
-        },
-      },
-      {
-        icon: SigmaIcon,
-        key: 'tex',
-        label: t('slash.tex'),
-        onSelect: (editor) => {
-          editor.dispatchCommand(INSERT_MATH_COMMAND, { code: 'x^2 + y^2 = z^2' });
-          queueMicrotask(() => {
-            editor.focus();
-          });
-        },
-      },
-    ];
-    return data.map((item) => {
-      if (item.type === 'divider') return item;
-      return {
-        ...item,
-        extra: (
-          <Text code fontSize={12} type={'secondary'}>
-            {item.key}
-          </Text>
-        ),
-        style: {
-          minWidth: 200,
-        },
-      };
-    });
-  }, [t]);
-};

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

@@ -1,82 +0,0 @@
-'use client';
-
-import { Button, Flexbox } from '@lobehub/ui';
-import { Divider } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { PlayIcon } from 'lucide-react';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import urlJoin from 'url-join';
-
-import ModelSelect from '@/features/ModelSelect';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
-import { useAgentGroupStore } from '@/store/agentGroup';
-import { agentGroupSelectors } from '@/store/agentGroup/selectors';
-
-import EditorCanvas from '../EditorCanvas';
-import AgentHeader from './AgentHeader';
-import AgentTool from './AgentTool';
-
-const ProfileEditor = memo(() => {
-  const { t } = useTranslation('setting');
-  const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
-  const updateConfig = useAgentStore((s) => s.updateAgentConfig);
-  const groupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
-  const router = useQueryRoute();
-
-  return (
-    <>
-      <Flexbox
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-        style={{ cursor: 'default', marginBottom: 12 }}
-      >
-        {/* Header: Avatar + Name + Description */}
-        <AgentHeader />
-        {/* Config Bar: Model Selector */}
-        <Flexbox
-          align={'center'}
-          gap={8}
-          horizontal
-          justify={'flex-start'}
-          style={{ marginBottom: 12 }}
-        >
-          <ModelSelect
-            onChange={updateConfig}
-            value={{
-              model: config?.model,
-              provider: config?.provider,
-            }}
-          />
-        </Flexbox>
-        <AgentTool />
-        <Flexbox
-          align={'center'}
-          gap={8}
-          horizontal
-          justify={'flex-start'}
-          style={{ marginTop: 16 }}
-        >
-          <Button
-            icon={PlayIcon}
-            onClick={() => {
-              if (!groupId) return;
-              router.push(urlJoin('/group', groupId));
-            }}
-            type={'primary'}
-          >
-            {t('startConversation')}
-          </Button>
-        </Flexbox>
-      </Flexbox>
-      <Divider />
-      {/* Main Content: Prompt Editor */}
-      <EditorCanvas />
-    </>
-  );
-});
-
-export default ProfileEditor;

package/src/app/[variants]/(main)/group/profile/features/ProfileProvider.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { useEditor } from '@lobehub/editor/react';
-import { type PropsWithChildren, memo } from 'react';
-
-import StoreUpdater from './StoreUpdater';
-import { Provider, createStore } from './store';
-
-const ProfileProvider = memo<PropsWithChildren>(({ children }) => {
-  const editor = useEditor();
-
-  return (
-    <Provider createStore={() => createStore({ editor })}>
-      <StoreUpdater />
-      {children}
-    </Provider>
-  );
-});
-
-export default ProfileProvider;

package/src/app/[variants]/(main)/group/profile/features/StoreUpdater.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import { useEditorState } from '@lobehub/editor/react';
-import { memo, useEffect } from 'react';
-
-import { type PublicState, useProfileStore, useStoreApi } from './store';
-
-export type StoreUpdaterProps = Partial<PublicState>;
-
-const StoreUpdater = memo<StoreUpdaterProps>(() => {
-  const storeApi = useStoreApi();
-
-  const editor = useProfileStore((s) => s.editor);
-  const editorState = useEditorState(editor);
-
-  // Update editorState in store
-  useEffect(() => {
-    storeApi.setState({ editorState });
-  }, [editorState, storeApi]);
-
-  return null;
-});
-
-export default StoreUpdater;

package/src/app/[variants]/(main)/group/profile/features/store/action.ts

@@ -1,163 +0,0 @@
-import { EDITOR_DEBOUNCE_TIME, EDITOR_MAX_WAIT } from '@lobechat/const';
-import { debounce } from 'es-toolkit/compat';
-import { type StateCreator } from 'zustand';
-
-import { type State, initialState } from './initialState';
-
-type SaveConfigPayload = {
-  editorData: Record<string, any>;
-  systemRole: string;
-};
-
-export interface Action {
-  /**
-   * Append content to streaming buffer (called during streaming)
-   */
-  appendStreamingContent: (chunk: string) => void;
-  /**
-   * Finalize streaming and save to config
-   */
-  finishStreaming: (updateConfig: (payload: SaveConfigPayload) => Promise<void>) => Promise<void>;
-  flushSave: () => void;
-  handleContentChange: (updateConfig: (payload: SaveConfigPayload) => Promise<void>) => void;
-  setChatPanelExpanded: (expanded: boolean | ((prev: boolean) => boolean)) => void;
-  /**
-   * Start streaming mode - clears editor and prepares for streaming content
-   */
-  startStreaming: () => void;
-}
-
-export type Store = State & Action;
-
-// Create debounced save function outside of store for reuse
-const createDebouncedSave = (
-  get: () => Store,
-  updateConfig: (payload: SaveConfigPayload) => Promise<void>,
-) =>
-  debounce(
-    async (payload: SaveConfigPayload) => {
-      try {
-        await updateConfig(payload);
-      } catch (error) {
-        console.error('[ProfileEditor] Failed to save:', error);
-      }
-    },
-    EDITOR_DEBOUNCE_TIME,
-    { leading: false, maxWait: EDITOR_MAX_WAIT, trailing: true },
-  );
-
-export const store: (initState?: Partial<State>) => StateCreator<Store> =
-  (initState) => (set, get) => {
-    let debouncedSave: ReturnType<typeof createDebouncedSave> | null = null;
-
-    return {
-      ...initialState,
-      ...initState,
-
-      appendStreamingContent: (chunk) => {
-        const currentContent = get().streamingContent || '';
-        const newContent = currentContent + chunk;
-        set({ streamingContent: newContent });
-
-        // Update editor with streaming content
-        const { editor } = get();
-        if (editor) {
-          try {
-            editor.setDocument('markdown', newContent);
-          } catch {
-            // Ignore errors during streaming updates
-          }
-        }
-      },
-
-      finishStreaming: async (updateConfig) => {
-        const { editor, streamingContent } = get();
-        if (!streamingContent) {
-          set({ streamingInProgress: false });
-          return;
-        }
-
-        // Get the final content from editor
-        let finalContent = streamingContent;
-        let editorData = {};
-
-        if (editor) {
-          try {
-            finalContent =
-              (editor.getDocument('markdown') as unknown as string) || streamingContent;
-            editorData = editor.getDocument('json') as unknown as Record<string, any>;
-          } catch {
-            // Use streaming content if editor read fails
-          }
-        }
-
-        // Save to config
-        try {
-          await updateConfig({
-            editorData: structuredClone(editorData || {}),
-            systemRole: finalContent,
-          });
-        } catch (error) {
-          console.error('[ProfileEditor] Failed to save streaming content:', error);
-        }
-
-        // Reset streaming state
-        set({
-          streamingContent: undefined,
-          streamingInProgress: false,
-        });
-      },
-
-      flushSave: () => {
-        debouncedSave?.flush();
-      },
-
-      handleContentChange: (updateConfig) => {
-        const { editor } = get();
-        if (!editor) return;
-
-        // Create debounced save on first use
-        if (!debouncedSave) {
-          debouncedSave = createDebouncedSave(get, updateConfig);
-        }
-
-        try {
-          const markdownContent = (editor.getDocument('markdown') as unknown as string) || '';
-          const jsonContent = editor.getDocument('json') as unknown as Record<string, any>;
-
-          debouncedSave({
-            editorData: structuredClone(jsonContent || {}),
-            systemRole: markdownContent || '',
-          });
-        } catch (error) {
-          console.error('[ProfileEditor] Failed to read editor content:', error);
-        }
-      },
-
-      setChatPanelExpanded: (expanded) => {
-        if (typeof expanded === 'function') {
-          set((state) => ({ chatPanelExpanded: expanded(state.chatPanelExpanded) }));
-        } else {
-          set({ chatPanelExpanded: expanded });
-        }
-      },
-
-      startStreaming: () => {
-        const { editor } = get();
-
-        // Clear editor content and prepare for streaming
-        if (editor) {
-          try {
-            editor.setDocument('markdown', '');
-          } catch {
-            // Ignore errors
-          }
-        }
-
-        set({
-          streamingContent: '',
-          streamingInProgress: true,
-        });
-      },
-    };
-  };