@lobehub/lobehub 2.0.0-next.47 → 2.0.0-next.49

package/src/app/[variants]/(main)/settings/agent/index.tsx

@@ -13,15 +13,16 @@ import { useCategory } from '@/features/AgentSetting/AgentCategory/useCategory';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
-import DesktopLayout from './_layout/Desktop'
-import MobileLayout from './_layout/Mobile'
+
+import DesktopLayout from './_layout/Desktop';
+import MobileLayout from './_layout/Mobile';
 
 type AgentPageType = {
   mobile?: boolean;
-}
+};
 
 const Page = memo((props: AgentPageType) => {
-  const { mobile } = props
+  const { mobile } = props;
   const cateItems = useCategory();
   const [tab, setTab] = useQueryState('tab', {
     defaultValue: ChatSettingsTabs.Prompt,
@@ -37,7 +38,6 @@ const Page = memo((props: AgentPageType) => {
 
   if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
-
   const PageContent = (
     <>
       {mobile && (
@@ -65,12 +65,13 @@ const Page = memo((props: AgentPageType) => {
         tab={tab as ChatSettingsTabs}
       />
     </>
-  )
+  );
 
-  return mobile ? <MobileLayout>
-    {PageContent}
-  </MobileLayout> : <DesktopLayout>
-    {PageContent}</DesktopLayout>;
+  return mobile ? (
+    <MobileLayout>{PageContent}</MobileLayout>
+  ) : (
+    <DesktopLayout>{PageContent}</DesktopLayout>
+  );
 });
 
 Page.displayName = 'AgentSetting';

package/src/app/[variants]/(main)/settings/common/index.tsx

@@ -5,7 +5,7 @@ import Common from './features/Common/Common';
 const Page = () => {
   return (
     <>
-      <Common/>
+      <Common />
       <Appearance />
       <ChatAppearance />
     </>

package/src/app/[variants]/(main)/settings/page.tsx

@@ -1,16 +1,15 @@
 import ServerLayout from '@/components/server/ServerLayout';
+import { serverFeatureFlags } from '@/config/featureFlags';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 import { DynamicLayoutProps } from '@/types/next';
 import { RouteVariants } from '@/utils/server/routeVariants';
 
+import SettingsContextProvider from './_layout/ContextProvider';
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
 import { LayoutProps } from './_layout/type';
 
-import { serverFeatureFlags } from '@/config/featureFlags';
-import SettingsContextProvider from './_layout/ContextProvider';
-
 export const generateMetadata = async (props: DynamicLayoutProps) => {
   const locale = await RouteVariants.getLocale(props);
   const { t } = await translation('setting', locale);
@@ -21,19 +20,23 @@ export const generateMetadata = async (props: DynamicLayoutProps) => {
   });
 };
 
-const SettingsLayout = ServerLayout<LayoutProps & {
-  showLLM?: boolean
-}>({ Desktop, Mobile });
+const SettingsLayout = ServerLayout<
+  LayoutProps & {
+    showLLM?: boolean;
+  }
+>({ Desktop, Mobile });
 
 const SettingsPage = async (props: DynamicLayoutProps) => {
   const showLLM = serverFeatureFlags().showProvider;
   const { showOpenAIProxyUrl, showOpenAIApiKey } = serverFeatureFlags();
 
   return (
-    <SettingsContextProvider value={{
-      showOpenAIApiKey: showOpenAIApiKey,
-      showOpenAIProxyUrl: showOpenAIProxyUrl
-    }}>
+    <SettingsContextProvider
+      value={{
+        showOpenAIApiKey: showOpenAIApiKey,
+        showOpenAIProxyUrl: showOpenAIProxyUrl,
+      }}
+    >
       <SettingsLayout {...props} showLLM={showLLM} />
     </SettingsContextProvider>
   );

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/Item.tsx

@@ -44,42 +44,41 @@ const ProviderItem = memo<ProviderItemProps>(
     const { styles, cx } = useStyles();
     const searchParams = useSearchParams();
 
-    const activeKey = searchParams.get('provider');
+  const activeKey = searchParams.get('provider');
 
-    const isCustom = source === AiProviderSourceEnum.Custom;
-    return (
-      <div
-        className={cx(styles.container, activeKey === id && styles.active)}
-        onClick={() => {
-          onClick(id);
-        }}
-      >
-        <Flexbox gap={8} horizontal>
-          {isCustom && logo ? (
-            <Avatar
-              alt={name || id}
-              avatar={logo}
-              shape={'square'}
-              size={24}
-              style={{ borderRadius: 6 }}
-            />
-          ) : (
-            <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
-          )}
-          {name}
-        </Flexbox>
-        <Flexbox horizontal>
-          {enabled && (
-            <Center width={24}>
-              <Badge status="success" />
-            </Center>
-          )}
-          {/* cloud slot */}
+  const isCustom = source === AiProviderSourceEnum.Custom;
+  return (
+    <div
+      className={cx(styles.container, activeKey === id && styles.active)}
+      onClick={() => {
+        onClick(id);
+      }}
+    >
+      <Flexbox gap={8} horizontal>
+        {isCustom && logo ? (
+          <Avatar
+            alt={name || id}
+            avatar={logo}
+            shape={'square'}
+            size={24}
+            style={{ borderRadius: 6 }}
+          />
+        ) : (
+          <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
+        )}
+        {name}
+      </Flexbox>
+      <Flexbox horizontal>
+        {enabled && (
+          <Center width={24}>
+            <Badge status="success" />
+          </Center>
+        )}
+        {/* cloud slot */}
 
-          {/* cloud slot */}
-        </Flexbox>
-      </div>
-    );
-  },
-);
+        {/* cloud slot */}
+      </Flexbox>
+    </div>
+  );
+});
 export default ProviderItem;

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/SearchResult.tsx

@@ -9,10 +9,8 @@ import { useAiInfraStore } from '@/store/aiInfra';
 
 import ProviderItem from './Item';
 
-const SearchResult = memo((props:{
-  onProviderSelect?: (key: string)=>void
-}) => {
-  const {onProviderSelect =()=>{} } = props
+const SearchResult = memo((props: { onProviderSelect?: (key: string) => void }) => {
+  const { onProviderSelect = () => {} } = props;
   const { t } = useTranslation('modelProvider');
 
   const searchKeyword = useAiInfraStore((s) => s.providerSearchKeyword);
@@ -37,7 +35,9 @@ const SearchResult = memo((props:{
           {t('menu.notFound')}
         </Flexbox>
       ) : (
-        filteredProviders.map((item) => <ProviderItem {...item} key={item.id} onClick={onProviderSelect} />)
+        filteredProviders.map((item) => (
+          <ProviderItem {...item} key={item.id} onClick={onProviderSelect} />
+        ))
       )}
     </Flexbox>
   );

package/src/app/[variants]/(main)/settings/provider/_layout/Desktop/Container.tsx

@@ -5,9 +5,15 @@ import { PropsWithChildren, memo } from 'react';
 import SettingContainer from '@/features/Setting/SettingContainer';
 
 const Container = memo<PropsWithChildren>(({ children }) => {
-  return <SettingContainer style={{
-    paddingBlock: 24,
-    paddingInline: 32
-  }}>{children}</SettingContainer>;
+  return (
+    <SettingContainer
+      style={{
+        paddingBlock: 24,
+        paddingInline: 32,
+      }}
+    >
+      {children}
+    </SettingContainer>
+  );
 });
 export default Container;

package/src/app/market-auth-callback/layout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+const RootLayout = ({ children }: RootLayoutProps) => {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>{children}</body>
+    </html>
+  );
+};
+
+export default RootLayout;

package/src/app/market-auth-callback/page.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Card, Result } from 'antd';
+import { CheckCircle, Clock, ShieldX } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+type CallbackStatus = 'loading' | 'success' | 'error';
+
+/**
+ * Market OIDC 授权回调页面
+ * 处理从 OIDC 服务器返回的授权码
+ */
+const MarketAuthCallbackPage = () => {
+  const { t } = useTranslation('marketAuth');
+  const [status, setStatus] = useState<CallbackStatus>('loading');
+  const [message, setMessage] = useState('');
+  const [countdown, setCountdown] = useState(3);
+
+  useEffect(() => {
+    console.log('[MarketAuthCallback] Processing authorization callback');
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+    const state = urlParams.get('state');
+    const error = urlParams.get('error');
+    const errorDescription = urlParams.get('error_description');
+
+    if (error) {
+      console.error('[MarketAuthCallback] Authorization error:', error, errorDescription);
+      setStatus('error');
+      setMessage(t('callback.messages.authFailed', { error: errorDescription || error }));
+
+      // 向父窗口发送错误消息
+      if (window.opener) {
+        window.opener.postMessage(
+          {
+            error: errorDescription || error,
+            type: 'MARKET_AUTH_ERROR',
+          },
+          window.location.origin,
+        );
+      }
+      return;
+    }
+
+    if (code && state) {
+      console.log('[MarketAuthCallback] Authorization successful, code received');
+      setStatus('success');
+      setMessage(t('callback.messages.successWithRedirect'));
+
+      // 向父窗口发送成功消息
+      if (window.opener) {
+        window.opener.postMessage(
+          {
+            code,
+            state,
+            type: 'MARKET_AUTH_SUCCESS',
+          },
+          window.location.origin,
+        );
+      }
+
+      // 开始倒计时并在3秒后关闭窗口
+      let timeLeft = 3;
+      setCountdown(timeLeft);
+
+      const countdownTimer = setInterval(() => {
+        timeLeft -= 1;
+        setCountdown(timeLeft);
+
+        if (timeLeft <= 0) {
+          clearInterval(countdownTimer);
+          window.close();
+        }
+      }, 1000);
+    } else {
+      console.error('[MarketAuthCallback] Missing code or state parameter');
+      setStatus('error');
+      setMessage(t('callback.messages.missingParams'));
+
+      if (window.opener) {
+        window.opener.postMessage(
+          {
+            error: 'Missing authorization parameters',
+            type: 'MARKET_AUTH_ERROR',
+          },
+          window.location.origin,
+        );
+      }
+    }
+  }, [t]);
+
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'success': {
+        return <Icon icon={CheckCircle} />;
+      }
+      case 'error': {
+        return <Icon icon={ShieldX} />;
+      }
+      default: {
+        return <Icon icon={Clock} />;
+      }
+    }
+  };
+
+  const getResultStatus = () => {
+    switch (status) {
+      case 'success': {
+        return 'success';
+      }
+      case 'error': {
+        return 'error';
+      }
+      default: {
+        return 'info';
+      }
+    }
+  };
+
+  const getTitle = () => {
+    switch (status) {
+      case 'loading': {
+        return t('callback.titles.loading');
+      }
+      case 'success': {
+        return t('callback.titles.success');
+      }
+      case 'error': {
+        return t('callback.titles.error');
+      }
+    }
+  };
+
+  const getSubTitle = () => {
+    if (status === 'loading') {
+      return t('callback.messages.processing');
+    }
+    if (status === 'success') {
+      return t('callback.messages.successWithCountdown', { countdown, message });
+    }
+    return message;
+  };
+
+  const getExtra = () => {
+    if (status === 'error') {
+      return (
+        <button
+          onClick={() => window.close()}
+          style={{
+            backgroundColor: '#ff4d4f',
+            border: 'none',
+            borderRadius: '6px',
+            color: 'white',
+            cursor: 'pointer',
+            fontSize: '14px',
+            padding: '8px 16px',
+          }}
+          type="button"
+        >
+          {t('callback.buttons.close')}
+        </button>
+      );
+    }
+    return undefined;
+  };
+
+  return (
+    <Center height="100vh">
+      <Card
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'center',
+          minHeight: 280,
+          minWidth: 500,
+          width: '100%',
+        }}
+      >
+        <Result
+          extra={getExtra()}
+          icon={getStatusIcon()}
+          status={getResultStatus()}
+          style={{ padding: 0 }}
+          subTitle={getSubTitle()}
+          title={getTitle()}
+        />
+      </Card>
+    </Center>
+  );
+};
+
+export default MarketAuthCallbackPage;

package/src/features/AgentSetting/AgentPrompt/TokenTag.tsx

@@ -1,9 +1,9 @@
 import { Tag } from '@lobehub/ui';
-import { memo } from 'react';
+import React, { memo } from 'react';
 
 import { useTokenCount } from '@/hooks/useTokenCount';
 
-const Tokens = memo<{ value: string }>(({ value }) => {
+const Tokens = memo<{ style?: React.CSSProperties, value: string; }>(({ value, style }) => {
   const systemTokenCount = useTokenCount(value);
   if (!value || !systemTokenCount) return;
 
@@ -12,6 +12,7 @@ const Tokens = memo<{ value: string }>(({ value }) => {
       style={{
         marginTop: 24,
         width: 'fit-content',
+        ...style,
       }}
     >
       Token: {systemTokenCount}

package/src/features/AgentSetting/AgentTTS/SelectWithTTSPreview.tsx

@@ -1,3 +1,4 @@
+import { getMessageError } from '@lobechat/fetch-sse';
 import { ChatMessageError } from '@lobechat/types';
 import { AudioPlayer } from '@lobehub/tts/react';
 import { Alert, Button, Highlighter, Select, SelectProps } from '@lobehub/ui';
@@ -9,7 +10,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useTTS } from '@/hooks/useTTS';
 import { TTSServer } from '@/types/agent';
-import { getMessageError } from '@/utils/fetch';
 
 interface SelectWithTTSPreviewProps extends SelectProps {
   server: TTSServer;

package/src/features/AgentSetting/store/action.ts

@@ -1,3 +1,4 @@
+import { MessageTextChunk } from '@lobechat/fetch-sse';
 import {
   chainPickEmoji,
   chainSummaryAgentName,
@@ -16,7 +17,6 @@ import { systemAgentSelectors } from '@/store/user/slices/settings/selectors';
 import { LobeAgentChatConfig, LobeAgentConfig } from '@/types/agent';
 import { MetaData } from '@/types/meta';
 import { SystemAgentItem } from '@/types/user/settings';
-import { MessageTextChunk } from '@/utils/fetch';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 

package/src/features/ChatInput/ActionBar/STT/browser.tsx

@@ -1,3 +1,4 @@
+import { getMessageError } from '@lobechat/fetch-sse';
 import { ChatMessageError } from '@lobechat/types';
 import { SpeechRecognitionOptions, useSpeechRecognition } from '@lobehub/tts/react';
 import isEqual from 'fast-deep-equal';
@@ -13,7 +14,6 @@ import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
-import { getMessageError } from '@/utils/fetch';
 
 import CommonSTT from './common';
 

package/src/features/ChatInput/ActionBar/STT/openai.tsx

@@ -1,3 +1,4 @@
+import { getMessageError } from '@lobechat/fetch-sse';
 import { ChatMessageError } from '@lobechat/types';
 import { getRecordMineType } from '@lobehub/tts';
 import { OpenAISTTOptions, useOpenAISTT } from '@lobehub/tts/react';
@@ -16,7 +17,6 @@ import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
-import { getMessageError } from '@/utils/fetch';
 
 import CommonSTT from './common';
 

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

@@ -1,9 +1,10 @@
 import { AssistantContentBlock } from '@lobechat/types';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { GroupMessageContext } from './GroupContext';
 import GroupItem from './GroupItem';
 
 const useStyles = createStyles(({ css }) => {
@@ -28,21 +29,25 @@ const GroupChildren = memo<GroupChildrenProps>(
   ({ blocks, contentId, disableEditing, messageIndex, id }) => {
     const { styles } = useStyles();
 
+    const contextValue = useMemo(() => ({ assistantGroupId: id }), [id]);
+
     return (
-      <Flexbox className={styles.container} gap={8}>
-        {blocks.map((item, index) => {
-          return (
-            <GroupItem
-              {...item}
-              contentId={contentId}
-              disableEditing={disableEditing}
-              index={index}
-              key={`${id}_${index}`}
-              messageIndex={messageIndex}
-            />
-          );
-        })}
-      </Flexbox>
+      <GroupMessageContext value={contextValue}>
+        <Flexbox className={styles.container} gap={8}>
+          {blocks.map((item, index) => {
+            return (
+              <GroupItem
+                {...item}
+                contentId={contentId}
+                disableEditing={disableEditing}
+                index={index}
+                key={`${id}_${index}`}
+                messageIndex={messageIndex}
+              />
+            );
+          })}
+        </Flexbox>
+      </GroupMessageContext>
     );
   },
   isEqual,

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

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+interface GroupMessageContextValue {
+  assistantGroupId: string;
+}
+
+export const GroupMessageContext = createContext<GroupMessageContextValue | null>(null);
+
+export const useGroupMessage = () => {
+  const context = useContext(GroupMessageContext);
+  if (!context) {
+    throw new Error('useGroupMessage must be used within GroupMessageContext');
+  }
+  return context;
+};

package/src/features/Conversation/Messages/Group/Tool/Inspector/BuiltinPluginTitle.tsx

@@ -23,20 +23,18 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 interface BuiltinPluginTitleProps {
   apiName: string;
-  hasResult?: boolean;
   icon?: ReactNode;
   identifier: string;
   index: number;
+  isLoading?: boolean;
   messageId: string;
   title: string;
   toolCallId: string;
 }
 
-const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(({ apiName, title, hasResult }) => {
+const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(({ apiName, title, isLoading }) => {
   const { styles } = useStyles();
 
-  const isLoading = !hasResult;
-
   return (
     <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={4} horizontal>
       <div>{title}</div>

package/src/features/Conversation/Messages/Group/Tool/Inspector/ToolTitle.tsx

@@ -31,20 +31,18 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 interface ToolTitleProps {
   apiName: string;
-  hasResult?: boolean;
   identifier: string;
   index: number;
+  isLoading?: boolean;
   messageId: string;
   toolCallId: string;
 }
 
 const ToolTitle = memo<ToolTitleProps>(
-  ({ identifier, apiName, hasResult, index, toolCallId, messageId }) => {
+  ({ identifier, apiName, isLoading, index, toolCallId, messageId }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
 
-    const isLoading = !hasResult;
-
     const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
     const plugins = useMemo(
@@ -69,9 +67,9 @@ const ToolTitle = memo<ToolTitleProps>(
       return (
         <BuiltinPluginTitle
           {...builtinPluginTitle}
-          hasResult={hasResult}
           identifier={identifier}
           index={index}
+          isLoading={isLoading}
           messageId={messageId}
           toolCallId={toolCallId}
         />