@lobehub/lobehub 2.0.0-next.18 → 2.0.0-next.180

package/src/features/Conversation/Messages/Default.tsx

@@ -1,27 +0,0 @@
-import { UIChatMessage } from '@lobechat/types';
-import { ReactNode, memo } from 'react';
-
-import BubblesLoading from '@/components/BubblesLoading';
-import { LOADING_FLAT } from '@/const/message';
-import { useChatStore } from '@/store/chat';
-import { messageStateSelectors } from '@/store/chat/selectors';
-
-export const DefaultMessage = memo<
-  UIChatMessage & {
-    addIdOnDOM?: boolean;
-    editableContent: ReactNode;
-    isToolCallGenerating?: boolean;
-  }
->(({ id, editableContent, content, isToolCallGenerating, addIdOnDOM = true }) => {
-  const editing = useChatStore(messageStateSelectors.isMessageEditing(id));
-
-  if (isToolCallGenerating) return;
-
-  if (content === LOADING_FLAT && !editing) return <BubblesLoading />;
-
-  return <div id={addIdOnDOM ? id : undefined}>{editableContent}</div>;
-});
-
-export const DefaultBelowMessage = memo<UIChatMessage>(() => {
-  return null;
-});

package/src/features/Conversation/Messages/Supervisor/index.tsx

@@ -1,185 +0,0 @@
-'use client';
-
-import { UIChatMessage } from '@lobechat/types';
-import { ModelIcon } from '@lobehub/icons';
-import { Button, Text } from '@lobehub/ui';
-import { createStyles, useTheme } from 'antd-style';
-import { LucideRefreshCw } from 'lucide-react';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { DEFAULT_SUPERVISOR_AVATAR } from '@/const/meta';
-import { ChatItem } from '@/features/ChatItem';
-import { useChatStore } from '@/store/chat';
-import { ChatErrorType } from '@/types/fetch';
-
-import TodoList, { TodoData } from './TodoList';
-
-const useStyles = createStyles(({ token, css, cx }) => ({
-  modelInfo: cx(css`
-    font-size: 12px;
-    color: ${token.colorTextQuaternary};
-  `),
-}));
-
-// Helper function to parse legacy markdown todo format
-const parseMarkdownTodos = (content: string): TodoData => {
-  const lines = content.split('\n');
-  const todos: Array<{ content: string; finished: boolean }> = [];
-
-  for (const line of lines) {
-    const trimmed = line.trim();
-
-    // Match todo item pattern: - [x] or - [ ] followed by content
-    const todoMatch = trimmed.match(/^-\s*\[([\sx])]\s*(.+)$/i);
-    if (todoMatch) {
-      const [, checkbox, todoContent] = todoMatch;
-      const finished = checkbox.toLowerCase() === 'x';
-
-      // Remove strikethrough formatting if present
-      const content = todoContent.replace(/^~~(.+)~~$/, '$1');
-
-      todos.push({
-        content: content.trim(),
-        finished,
-      });
-    }
-  }
-
-  return {
-    timestamp: Date.now(),
-    todos,
-    type: 'supervisor_todo',
-  };
-};
-
-interface SupervisorMessageProps extends UIChatMessage {
-  disableEditing?: boolean;
-  index: number;
-}
-
-const SupervisorMessage = memo<SupervisorMessageProps>((props) => {
-  const { id, content, error, groupId, role, updatedAt, createdAt } = props;
-  const { t } = useTranslation('chat');
-  const theme = useTheme();
-  const { styles } = useStyles();
-  const [triggerSupervisorDecision, deleteMessage] = useChatStore((s) => [
-    s.internal_triggerSupervisorDecision,
-    s.deleteMessage,
-  ]);
-
-  // Try to parse the message content as JSON for todo data
-  let todoData: TodoData | null = null;
-  let isTodoMessage = false;
-
-  if (content && !error) {
-    try {
-      const parsed = JSON.parse(content);
-      if (parsed.type === 'supervisor_todo' && Array.isArray(parsed.todos)) {
-        todoData = parsed as TodoData;
-        isTodoMessage = true;
-      }
-    } catch {
-      // Not JSON or invalid format, check for legacy markdown format
-      if (role === 'supervisor' && content?.startsWith('### Todo List')) {
-        todoData = parseMarkdownTodos(content);
-        isTodoMessage = true;
-      }
-    }
-  }
-
-  const errorText =
-    error?.type === ChatErrorType.SupervisorDecisionFailed
-      ? t('supervisor.decisionFailed', { ns: 'error' })
-      : error?.message;
-
-  // Retry action for supervisor decision failure
-  const handleRetry = useCallback(async () => {
-    if (!groupId) return;
-
-    // Delete the error message first
-    await deleteMessage(id);
-
-    // Then trigger the supervisor decision
-    triggerSupervisorDecision(groupId, undefined, true);
-  }, [groupId, id, deleteMessage, triggerSupervisorDecision]);
-
-  const errorContentNode = errorText ? (
-    <Flexbox
-      gap={8}
-      style={{
-        background: theme.colorBgContainer,
-        border: `1px solid ${theme.colorBorderSecondary}`,
-        borderRadius: 8,
-        marginBottom: 12,
-        maxWidth: '400px',
-        padding: 12,
-      }}
-    >
-      <Text>{errorText}</Text>
-      {role === 'supervisor' && groupId && (
-        <Button icon={LucideRefreshCw} onClick={handleRetry} type={'primary'}>
-          {t('retry', { ns: 'common' })}
-        </Button>
-      )}
-    </Flexbox>
-  ) : undefined;
-
-  // Render todo message with dedicated component
-  if (isTodoMessage && todoData) {
-    const model = props.extra?.fromModel;
-    const provider = props.extra?.fromProvider;
-    const hasModelInfo = model || provider;
-
-    return (
-      <ChatItem
-        avatar={{
-          avatar: DEFAULT_SUPERVISOR_AVATAR,
-          title: t('groupSidebar.members.orchestrator'),
-        }}
-        loading={false}
-        placement="left"
-        primary={false}
-        renderMessage={() => (
-          <Flexbox gap={8}>
-            <TodoList data={todoData} />
-            {hasModelInfo && (
-              <Flexbox align={'center'} className={styles.modelInfo} gap={4} horizontal>
-                {model && <ModelIcon model={model} type={'mono'} />}
-                {provider && model ? `${provider}/${model}` : provider || model}
-              </Flexbox>
-            )}
-          </Flexbox>
-        )}
-        showTitle={true}
-        time={updatedAt || createdAt}
-        variant="bubble"
-      />
-    );
-  }
-
-  // Render regular supervisor message
-  const renderErrorMessage = error ? () => errorContentNode : undefined;
-
-  return (
-    <ChatItem
-      avatar={{
-        avatar: DEFAULT_SUPERVISOR_AVATAR,
-        title: t('groupSidebar.members.orchestrator'),
-      }}
-      loading={false}
-      message={error ? undefined : content}
-      placement="left"
-      primary={false}
-      renderMessage={renderErrorMessage}
-      showTitle={true}
-      time={updatedAt || createdAt}
-      variant={isTodoMessage || error ? 'docs' : 'bubble'}
-    />
-  );
-});
-
-SupervisorMessage.displayName = 'SupervisorMessage';
-
-export default SupervisorMessage;

package/src/features/Conversation/Messages/User/Actions.tsx

@@ -1,158 +0,0 @@
-import { UIChatMessage } from '@lobechat/types';
-import { ActionIconGroup } from '@lobehub/ui';
-import { ActionIconGroupItemType } from '@lobehub/ui/es/ActionIconGroup';
-import { ActionIconGroupEvent } from '@lobehub/ui/es/ActionIconGroup/type';
-import { App } from 'antd';
-import { useSearchParams } from 'next/navigation';
-import { memo, use, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
-
-import { VirtuosoContext } from '../../components/VirtualizedList/VirtuosoContext';
-import { InPortalThreadContext } from '../../context/InPortalThreadContext';
-import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
-
-interface UserActionsProps {
-  data: UIChatMessage;
-  id: string;
-  index: number;
-}
-
-export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
-  const { t } = useTranslation('common');
-  const searchParams = useSearchParams();
-  const topic = searchParams.get('topic');
-
-  const [
-    isThreadMode,
-    hasThread,
-    toggleMessageEditing,
-    deleteMessage,
-    regenerateMessage,
-    translateMessage,
-    ttsMessage,
-    delAndRegenerateMessage,
-    copyMessage,
-    openThreadCreator,
-    resendThreadMessage,
-    delAndResendThreadMessage,
-  ] = useChatStore((s) => [
-    !!s.activeThreadId,
-    threadSelectors.hasThreadBySourceMsgId(id)(s),
-
-    s.toggleMessageEditing,
-    s.deleteMessage,
-    s.regenerateMessage,
-    s.translateMessage,
-    s.ttsMessage,
-    s.delAndRegenerateMessage,
-    s.copyMessage,
-    s.openThreadCreator,
-    s.resendThreadMessage,
-    s.delAndResendThreadMessage,
-  ]);
-
-  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
-
-  const { regenerate, edit, copy, divider, del, branching, tts, translate } = useChatListActionsBar(
-    { hasThread },
-  );
-
-  const inPortalThread = use(InPortalThreadContext);
-  const inThread = isThreadMode || inPortalThread;
-
-  const items = useMemo(
-    () =>
-      [regenerate, edit, inThread || isGroupSession ? null : branching].filter(
-        Boolean,
-      ) as ActionIconGroupItemType[],
-    [inThread, isGroupSession],
-  );
-
-  const { message } = App.useApp();
-
-  // remove line breaks in artifact tag to make the ast transform easier
-
-  const virtuosoRef = use(VirtuosoContext);
-
-  const onActionClick = useCallback(
-    async (action: ActionIconGroupEvent) => {
-      switch (action.key) {
-        case 'edit': {
-          toggleMessageEditing(id, true);
-
-          virtuosoRef?.current?.scrollIntoView({ align: 'start', behavior: 'auto', index });
-        }
-      }
-
-      switch (action.key) {
-        case 'copy': {
-          await copyMessage(id, data.content);
-          message.success(t('copySuccess'));
-          break;
-        }
-
-        case 'branching': {
-          if (!topic) {
-            message.warning(t('branchingRequiresSavedTopic'));
-            break;
-          }
-          openThreadCreator(id);
-          break;
-        }
-
-        case 'del': {
-          deleteMessage(id);
-          break;
-        }
-
-        case 'regenerate': {
-          if (inPortalThread) {
-            resendThreadMessage(id);
-          } else regenerateMessage(id);
-
-          // if this message is an error message, we need to delete it
-          if (data.error) deleteMessage(id);
-          break;
-        }
-
-        case 'delAndRegenerate': {
-          if (inPortalThread) {
-            delAndResendThreadMessage(id);
-          } else {
-            delAndRegenerateMessage(id);
-          }
-          break;
-        }
-
-        case 'tts': {
-          ttsMessage(id);
-          break;
-        }
-      }
-
-      if (action.keyPath.at(-1) === 'translate') {
-        // click the menu item with translate item, the result is:
-        // key: 'en-US'
-        // keyPath: ['en-US','translate']
-        const lang = action.keyPath[0];
-        translateMessage(id, lang);
-      }
-    },
-    [data.content, data.error, inPortalThread, topic],
-  );
-
-  return (
-    <ActionIconGroup
-      items={items}
-      menu={{
-        items: [edit, copy, divider, tts, translate, divider, regenerate, del],
-      }}
-      onActionClick={onActionClick}
-    />
-  );
-});

package/src/features/Conversation/Messages/User/Extra.tsx

@@ -1,39 +0,0 @@
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import ExtraContainer from '@/features/Conversation/components/Extras/ExtraContainer';
-import TTS from '@/features/Conversation/components/Extras/TTS';
-import Translate from '@/features/Conversation/components/Extras/Translate';
-import { useChatStore } from '@/store/chat';
-import { messageStateSelectors } from '@/store/chat/selectors';
-
-interface UserMessageExtraProps {
-  content: string;
-  extra: any;
-  id: string;
-}
-export const UserMessageExtra = memo<UserMessageExtraProps>(({ extra, id, content }) => {
-  const loading = useChatStore(messageStateSelectors.isMessageGenerating(id));
-
-  const showTranslate = !!extra?.translate;
-  const showTTS = !!extra?.tts;
-
-  const showExtra = showTranslate || showTTS;
-
-  if (!showExtra) return;
-
-  return (
-    <Flexbox gap={8} style={{ marginTop: 8 }}>
-      {extra?.tts && (
-        <ExtraContainer>
-          <TTS content={content} id={id} loading={loading} {...extra?.tts} />
-        </ExtraContainer>
-      )}
-      {extra?.translate && (
-        <ExtraContainer>
-          <Translate id={id} {...extra?.translate} loading={loading} />
-        </ExtraContainer>
-      )}
-    </Flexbox>
-  );
-});

package/src/features/Conversation/Messages/User/index.tsx

@@ -1,188 +0,0 @@
-import { UIChatMessage } from '@lobechat/types';
-import { Tag } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
-import { ReactNode, memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import Avatar from '@/features/ChatItem/components/Avatar';
-import BorderSpacing from '@/features/ChatItem/components/BorderSpacing';
-import MessageContent from '@/features/ChatItem/components/MessageContent';
-import Title from '@/features/ChatItem/components/Title';
-import { useStyles } from '@/features/ChatItem/style';
-import { markdownElements } from '@/features/Conversation/MarkdownElements';
-import { useUserAvatar } from '@/hooks/useUserAvatar';
-import { useAgentStore } from '@/store/agent';
-import { agentChatConfigSelectors } from '@/store/agent/selectors';
-import { useChatStore } from '@/store/chat';
-import { messageStateSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
-import { useUserStore } from '@/store/user';
-import { userProfileSelectors } from '@/store/user/selectors';
-
-import { useDoubleClickEdit } from '../../hooks/useDoubleClickEdit';
-import { UserActionsBar } from './Actions';
-import { UserBelowMessage } from './BelowMessage';
-import { UserMessageExtra } from './Extra';
-import { MarkdownRender as UserMarkdownRender } from './MarkdownRender';
-import { UserMessageContent } from './MessageContent';
-
-interface UserMessageProps extends UIChatMessage {
-  disableEditing?: boolean;
-  index: number;
-}
-
-const rehypePlugins = markdownElements
-  .filter((s) => s.scope !== 'assistant')
-  .map((element) => element.rehypePlugin)
-  .filter(Boolean);
-
-const remarkPlugins = markdownElements
-  .filter((s) => s.scope !== 'assistant')
-  .map((element) => element.remarkPlugin)
-  .filter(Boolean);
-
-const UserMessage = memo<UserMessageProps>((props) => {
-  const { id, ragQuery, content, createdAt, error, role, index, extra, disableEditing, targetId } =
-    props;
-
-  const { t } = useTranslation('chat');
-  const { mobile } = useResponsive();
-  const avatar = useUserAvatar();
-  const title = useUserStore(userProfileSelectors.displayUserName);
-
-  const displayMode = useAgentStore(agentChatConfigSelectors.displayMode);
-
-  const [editing, generating, isInRAGFlow] = useChatStore((s) => [
-    messageStateSelectors.isMessageEditing(id)(s),
-    messageStateSelectors.isMessageGenerating(id)(s),
-    messageStateSelectors.isMessageInRAGFlow(id)(s),
-  ]);
-
-  const loading = isInRAGFlow || generating;
-
-  // Get target name for DM indicator
-  const userName = useUserStore(userProfileSelectors.nickName) || 'User';
-  const agents = useSessionStore(sessionSelectors.currentGroupAgents);
-
-  const dmIndicator = useMemo(() => {
-    if (!targetId) return undefined;
-
-    let targetName = targetId;
-    if (targetId === 'user') {
-      targetName = userName;
-    } else {
-      const targetAgent = agents?.find((agent) => agent.id === targetId);
-      targetName = targetAgent?.title || targetId;
-    }
-
-    return <Tag>{t('dm.visibleTo', { target: targetName })}</Tag>;
-  }, [targetId, userName, agents, t]);
-
-  const placement = displayMode === 'chat' ? 'right' : 'left';
-  const variant = displayMode === 'chat' ? 'bubble' : 'docs';
-
-  const { styles } = useStyles({
-    editing,
-    placement,
-    primary: true,
-    showTitle: false,
-    time: createdAt,
-    title,
-    variant,
-  });
-
-  const onDoubleClick = useDoubleClickEdit({ disableEditing, error, id, index, role });
-
-  const renderMessage = useCallback(
-    (editableContent: ReactNode) => (
-      <UserMessageContent {...props} editableContent={editableContent} />
-    ),
-    [props],
-  );
-
-  const components = useMemo(
-    () =>
-      Object.fromEntries(
-        markdownElements.map((element) => {
-          const Component = element.Component;
-
-          return [element.tag, (props: any) => <Component {...props} id={id} />];
-        }),
-      ),
-    [id],
-  );
-
-  const markdownProps = useMemo(
-    () => ({
-      components,
-      customRender: (dom: ReactNode, { text }: { text: string }) => (
-        <UserMarkdownRender displayMode={displayMode} dom={dom} id={id} text={text} />
-      ),
-      rehypePlugins,
-      remarkPlugins,
-    }),
-    [displayMode],
-  );
-
-  return (
-    <Flexbox
-      className={styles.container}
-      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
-      gap={mobile ? 6 : 12}
-    >
-      <Avatar
-        alt={title}
-        avatar={{ avatar, title }}
-        loading={loading}
-        placement={placement}
-        size={mobile ? 32 : undefined}
-        style={{ marginTop: 6 }}
-      />
-      <Flexbox
-        align={placement === 'left' ? 'flex-start' : 'flex-end'}
-        className={styles.messageContainer}
-      >
-        <Title
-          avatar={{ avatar, title }}
-          placement={placement}
-          showTitle={false}
-          time={createdAt}
-          titleAddon={dmIndicator}
-        />
-        <Flexbox
-          align={placement === 'left' ? 'flex-start' : 'flex-end'}
-          className={styles.messageContent}
-          direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
-          gap={8}
-        >
-          <Flexbox flex={1} style={{ maxWidth: '100%', minWidth: 0 }}>
-            <MessageContent
-              editing={editing}
-              id={id}
-              markdownProps={markdownProps}
-              message={content}
-              messageExtra={<UserMessageExtra content={content} extra={extra} id={id} />}
-              onDoubleClick={onDoubleClick}
-              placement={placement}
-              primary
-              renderMessage={renderMessage}
-              variant={variant}
-            />
-          </Flexbox>
-
-          {!disableEditing && !editing && (
-            <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
-              <UserActionsBar data={props} id={id} index={index} />
-            </Flexbox>
-          )}
-        </Flexbox>
-        <UserBelowMessage content={content} id={id} ragQuery={ragQuery} />
-      </Flexbox>
-      {mobile && variant === 'bubble' && <BorderSpacing borderSpacing={32} />}
-    </Flexbox>
-  );
-});
-
-export default UserMessage;