@lobehub/lobehub 2.0.0-next.23 → 2.0.0-next.25

package/src/app/[variants]/(main)/settings/provider/detail/azure/index.tsx

@@ -6,11 +6,11 @@ import { ModelProvider } from 'model-bank';
 import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { AzureProviderCard } from '@/config/modelProviders';
 import { aiModelSelectors, aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/azureai/index.tsx

@@ -4,11 +4,11 @@ import { ModelProvider } from 'model-bank';
 import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { AzureAIProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/bedrock/index.tsx

@@ -4,12 +4,12 @@ import { Select } from '@lobehub/ui';
 import { useTranslation } from 'react-i18next';
 
 import { FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { BedrockProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/cloudflare/index.tsx

@@ -3,12 +3,12 @@
 import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { CloudflareProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/comfyui/index.tsx

@@ -5,12 +5,12 @@ import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
 import KeyValueEditor from '@/components/KeyValueEditor';
+import { SkeletonInput } from '@/components/Skeleton';
 import { ComfyUIProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/github/index.tsx

@@ -5,12 +5,12 @@ import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 
 import { FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { GithubProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/vertexai/index.tsx

@@ -5,12 +5,12 @@ import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 
 import { FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { VertexAIProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -21,6 +21,7 @@ import urlJoin from 'url-join';
 import { z } from 'zod';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
+import { SkeletonInput, SkeletonSwitch } from '@/components/Skeleton';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { isDesktop, isServerMode } from '@/const/version';
@@ -34,7 +35,6 @@ import {
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
 import Checker, { CheckErrorRender } from './Checker';
 import EnableSwitch from './EnableSwitch';
-import { SkeletonInput } from './SkeletonInput';
 import UpdateProviderInfo from './UpdateProviderInfo';
 
 const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
@@ -298,7 +298,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
         (showApiKey && isProviderApiKeyNotEmpty));
     const clientFetchItem = showClientFetch && {
       children: isLoading ? (
-        <Skeleton.Button active className={styles.switchLoading} />
+        <SkeletonSwitch />
       ) : (
         <Switch checked={isFetchOnClient} disabled={configUpdating} />
       ),
@@ -424,5 +424,3 @@ const ProviderConfig = memo<ProviderConfigProps>(
 );
 
 export default ProviderConfig;
-
-export { SkeletonInput } from './SkeletonInput';

package/src/components/Skeleton/SkeletonSwitch.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from 'antd';
+import { css, cx } from 'antd-style';
+
+const switchLoading = cx(css`
+  width: 44px !important;
+  min-width: 44px !important;
+  height: 22px !important;
+  border-radius: 12px !important;
+`);
+
+export const SkeletonSwitch = () => {
+  return <Skeleton.Button active className={switchLoading} />;
+};

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './SkeletonInput';
+export * from './SkeletonSwitch';

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

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
-import { preferenceSelectors } from '@/store/user/slices/preference/selectors';
+import { labPreferSelectors } from '@/store/user/slices/preference/selectors';
 
 import { ActionKeys, actionMap } from '../ActionBar/config';
 import { useChatInputStore } from '../store';
@@ -44,7 +44,7 @@ const ActionToolbar = memo(() => {
     systemStatusSelectors.expandInputActionbar(s),
     s.toggleExpandInputActionbar,
   ]);
-  const enableRichRender = useUserStore(preferenceSelectors.inputMarkdownRender);
+  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
 
   const leftActions = useChatInputStore((s) =>
     s.leftActions.filter((item) => (enableRichRender ? true : item !== 'typo')),

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

@@ -21,7 +21,7 @@ import { useHotkeysContext } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
-import { preferenceSelectors, settingsSelectors } from '@/store/user/selectors';
+import { labPreferSelectors, preferenceSelectors, settingsSelectors } from '@/store/user/selectors';
 
 import { useChatInputStore, useStoreApi } from '../store';
 import Placeholder from './Placeholder';
@@ -69,7 +69,7 @@ const InputEditor = memo<{ defaultRows?: number }>(({ defaultRows = 2 }) => {
     };
   }, [state.isEmpty]);
 
-  const enableRichRender = useUserStore(preferenceSelectors.inputMarkdownRender);
+  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
 
   const richRenderProps = useMemo(
     () =>

package/src/features/Conversation/Messages/Group/Actions/WithContentId.tsx

@@ -0,0 +1,152 @@
+import { AssistantContentBlock, UIChatMessage } from '@lobechat/types';
+import { ActionIconGroup, type ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
+import { App } from 'antd';
+import { useSearchParams } from 'next/navigation';
+import { memo, use, useCallback, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ShareMessageModal from '@/features/Conversation/components/ShareMessageModal';
+import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
+
+interface GroupActionsProps {
+  contentBlock?: AssistantContentBlock;
+  data: UIChatMessage;
+  id: string;
+  index: number;
+}
+
+const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }) => {
+  const { tools } = data;
+  const [isThreadMode, hasThread] = useChatStore((s) => [
+    !!s.activeThreadId,
+    threadSelectors.hasThreadBySourceMsgId(id)(s),
+  ]);
+  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+  const [showShareModal, setShareModal] = useState(false);
+
+  const { edit, delAndRegenerate, copy, divider, del, branching, share } = useChatListActionsBar({
+    hasThread,
+  });
+
+  const hasTools = !!tools;
+
+  const inPortalThread = useContext(InPortalThreadContext);
+  const inThread = isThreadMode || inPortalThread;
+
+  const items = useMemo(() => {
+    if (hasTools) return [delAndRegenerate, copy];
+
+    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
+      Boolean,
+    ) as ActionIconGroupItemType[];
+  }, [inThread, hasTools, isGroupSession]);
+
+  const { t } = useTranslation('common');
+  const searchParams = useSearchParams();
+  const topic = searchParams.get('topic');
+  const [
+    deleteMessage,
+    translateMessage,
+    delAndRegenerateMessage,
+    copyMessage,
+    openThreadCreator,
+    delAndResendThreadMessage,
+    toggleMessageEditing,
+  ] = useChatStore((s) => [
+    s.deleteMessage,
+    s.translateMessage,
+    s.delAndRegenerateMessage,
+    s.copyMessage,
+    s.openThreadCreator,
+    s.delAndResendThreadMessage,
+    s.toggleMessageEditing,
+  ]);
+  const { message } = App.useApp();
+  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 });
+        }
+      }
+      if (!data) return;
+
+      switch (action.key) {
+        case 'copy': {
+          if (!contentBlock) return;
+          await copyMessage(id, contentBlock.content);
+          message.success(t('copySuccess', { defaultValue: 'Copy Success' }));
+          break;
+        }
+        case 'branching': {
+          if (!topic) {
+            message.warning(t('branchingRequiresSavedTopic'));
+            break;
+          }
+          openThreadCreator(id);
+          break;
+        }
+
+        case 'del': {
+          deleteMessage(id);
+          break;
+        }
+
+        case 'delAndRegenerate': {
+          if (inPortalThread) {
+            delAndResendThreadMessage(id);
+          } else {
+            delAndRegenerateMessage(id);
+          }
+          break;
+        }
+
+        case 'share': {
+          setShareModal(true);
+          break;
+        }
+      }
+
+      if (action.keyPath.at(-1) === 'translate') {
+        // click the menu data with translate data, the result is:
+        // key: 'en-US'
+        // keyPath: ['en-US','translate']
+        const lang = action.keyPath[0];
+        translateMessage(id, lang);
+      }
+    },
+    [data, topic],
+  );
+
+  return (
+    <>
+      <ActionIconGroup
+        items={items}
+        menu={{
+          items: [edit, copy, divider, share, divider, delAndRegenerate, del],
+        }}
+        onActionClick={onActionClick}
+      />
+      <ShareMessageModal
+        message={data!}
+        onCancel={() => {
+          setShareModal(false);
+        }}
+        open={showShareModal}
+      />
+    </>
+  );
+});
+
+export default WithContentId;

package/src/features/Conversation/Messages/Group/Actions/WithoutContentId.tsx

@@ -0,0 +1,70 @@
+import { UIChatMessage } from '@lobechat/types';
+import { ActionIconGroup, type ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
+import { useSearchParams } from 'next/navigation';
+import { memo, useCallback, useContext, useMemo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
+
+interface GroupActionsProps {
+  data: UIChatMessage;
+  id: string;
+}
+
+const WithoutContentId = memo<GroupActionsProps>(({ id, data }) => {
+  const [isThreadMode, hasThread] = useChatStore((s) => [
+    !!s.activeThreadId,
+    threadSelectors.hasThreadBySourceMsgId(id)(s),
+  ]);
+  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+
+  const { delAndRegenerate, del } = useChatListActionsBar({ hasThread });
+
+  const inPortalThread = useContext(InPortalThreadContext);
+  const inThread = isThreadMode || inPortalThread;
+
+  const items = useMemo(() => {
+    return [delAndRegenerate, del].filter(Boolean) as ActionIconGroupItemType[];
+  }, [inThread, isGroupSession]);
+
+  const searchParams = useSearchParams();
+  const topic = searchParams.get('topic');
+
+  const [deleteMessage, delAndRegenerateMessage, delAndResendThreadMessage] = useChatStore((s) => [
+    s.deleteMessage,
+    s.delAndRegenerateMessage,
+    s.delAndResendThreadMessage,
+  ]);
+
+  const onActionClick = useCallback(
+    async (action: ActionIconGroupEvent) => {
+      if (!data) return;
+
+      switch (action.key) {
+        case 'del': {
+          deleteMessage(id);
+          break;
+        }
+
+        case 'delAndRegenerate': {
+          if (inPortalThread) {
+            delAndResendThreadMessage(id);
+          } else {
+            delAndRegenerateMessage(id);
+          }
+          break;
+        }
+      }
+    },
+    [data, topic],
+  );
+
+  return <ActionIconGroup items={items} onActionClick={onActionClick} />;
+});
+
+export default WithoutContentId;

package/src/features/Conversation/Messages/Group/Actions/index.tsx

@@ -0,0 +1,21 @@
+import { AssistantContentBlock, UIChatMessage } from '@lobechat/types';
+import { memo } from 'react';
+
+import WithContentId from './WithContentId';
+import WithoutContentId from './WithoutContentId';
+
+interface GroupActionsProps {
+  contentBlock?: AssistantContentBlock;
+  contentId?: string;
+  data: UIChatMessage;
+  id: string;
+  index: number;
+}
+
+export const GroupActionsBar = memo<GroupActionsProps>(
+  ({ id, data, contentBlock, index, contentId }) => {
+    if (!contentId) return <WithoutContentId data={data} id={id} />;
+
+    return <WithContentId contentBlock={contentBlock} data={data} id={contentId} index={index} />;
+  },
+);

package/src/features/Conversation/Messages/Group/ContentBlock.tsx

@@ -0,0 +1,91 @@
+import { AssistantContentBlock } from '@lobechat/types';
+import { MarkdownProps } from '@lobehub/ui';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LOADING_FLAT } from '@/const/message';
+import { markdownElements } from '@/features/Conversation/MarkdownElements';
+import Reasoning from '@/features/Conversation/Messages/Assistant/Reasoning';
+import { useChatStore } from '@/store/chat';
+import { aiChatSelectors, messageStateSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
+
+import ImageFileListViewer from '../User/ImageFileListViewer';
+import ErrorContent from './Error';
+import MessageContent from './MessageContent';
+import { Tools } from './Tools';
+
+const rehypePlugins = markdownElements.map((element) => element.rehypePlugin).filter(Boolean);
+const remarkPlugins = markdownElements.map((element) => element.remarkPlugin).filter(Boolean);
+
+interface ContentBlockProps extends AssistantContentBlock {
+  index: number;
+}
+
+export const ContentBlock = memo<ContentBlockProps>((props) => {
+  const { id, tools, content, imageList, reasoning, error } = props;
+  const showImageItems = !!imageList && imageList.length > 0;
+  const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
+
+  const hasTools = tools && tools.length > 0;
+  const showReasoning =
+    (!!reasoning && reasoning.content?.trim() !== '') || (!reasoning && isReasoning);
+
+  const { transitionMode, highlighterTheme, mermaidTheme } = useUserStore(
+    userGeneralSettingsSelectors.config,
+  );
+
+  const generating = useChatStore(messageStateSelectors.isMessageGenerating(id));
+
+  const animated = transitionMode === 'fadeIn' && generating;
+
+  const components = useMemo(
+    () =>
+      Object.fromEntries(
+        markdownElements.map((element) => {
+          const Component = element.Component;
+
+          return [element.tag, (props: any) => <Component {...props} id={id} />];
+        }),
+      ),
+    [id],
+  );
+
+  const markdownProps: Omit<MarkdownProps, 'className' | 'style' | 'children'> = useMemo(
+    () => ({
+      animated,
+      componentProps: {
+        highlight: {
+          theme: highlighterTheme,
+        },
+        mermaid: { theme: mermaidTheme },
+      },
+      components,
+      enableCustomFootnotes: true,
+      rehypePlugins,
+      remarkPlugins,
+    }),
+    [animated, components, highlighterTheme, mermaidTheme],
+  );
+
+  if (error && (content === LOADING_FLAT || !content))
+    return <ErrorContent error={error} id={id} />;
+
+  return (
+    <Flexbox gap={8} id={id}>
+      {showReasoning && <Reasoning {...reasoning} id={id} />}
+
+      {/* Content - markdown text */}
+      {content && (
+        <MessageContent content={content} hasTools={hasTools} markdownProps={markdownProps} />
+      )}
+
+      {/* Image files */}
+      {showImageItems && <ImageFileListViewer items={imageList} />}
+
+      {/* Tools */}
+      {hasTools && <Tools messageId={id} tools={tools} />}
+    </Flexbox>
+  );
+});

package/src/features/Conversation/Messages/Group/EditState.tsx

@@ -0,0 +1,51 @@
+import { MessageInput } from '@lobehub/ui/chat';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+export interface EditStateProps {
+  content: string;
+  id: string;
+}
+
+const EditState = memo<EditStateProps>(({ id, content }) => {
+  const { t } = useTranslation('common');
+
+  const text = useMemo(
+    () => ({
+      cancel: t('cancel'),
+      confirm: t('ok'),
+      edit: t('edit'),
+    }),
+    [],
+  );
+
+  const [toggleMessageEditing, updateMessageContent] = useChatStore((s) => [
+    s.toggleMessageEditing,
+    s.modifyMessageContent,
+  ]);
+
+  const onEditingChange = (value: string) => {
+    updateMessageContent(id, value);
+    toggleMessageEditing(id, false);
+  };
+
+  return (
+    <Flexbox paddingBlock={'0 8px'}>
+      <MessageInput
+        defaultValue={content ? String(content) : ''}
+        editButtonSize={'small'}
+        onCancel={() => {
+          toggleMessageEditing(id, false);
+        }}
+        onConfirm={onEditingChange}
+        text={text}
+        variant={'outlined'}
+      />
+    </Flexbox>
+  );
+});
+
+export default EditState;

package/src/features/Conversation/Messages/Group/Error/index.tsx

@@ -0,0 +1,53 @@
+import { ChatMessageError } from '@lobechat/types';
+import { Alert } from '@lobehub/ui';
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ErrorMessageExtra, { useErrorContent } from '@/features/Conversation/Error';
+import { useChatStore } from '@/store/chat';
+
+export interface ErrorContentProps {
+  error?: ChatMessageError;
+  id: string;
+}
+
+const ErrorContent = memo<ErrorContentProps>(({ error, id }) => {
+  const { t } = useTranslation('common');
+  const errorProps = useErrorContent(error);
+
+  const [deleteMessage] = useChatStore((s) => [s.deleteMessage]);
+  const message = <ErrorMessageExtra block data={{ error, id }} />;
+
+  if (!error?.message) {
+    if (!message) return null;
+    return <Flexbox>{message}</Flexbox>;
+  }
+
+  return (
+    <Flexbox>
+      <Alert
+        action={
+          <Button
+            color={'default'}
+            onClick={() => {
+              deleteMessage(id);
+            }}
+            size={'small'}
+            variant={'filled'}
+          >
+            {t('delete')}
+          </Button>
+        }
+        closable={false}
+        extra={message}
+        showIcon
+        type={'error'}
+        {...errorProps}
+      />
+    </Flexbox>
+  );
+});
+
+export default ErrorContent;