@lobehub/chat 0.151.0 → 0.151.2

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { ActionIcon, Avatar, Grid } from '@lobehub/ui';
+import { Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { RefreshCw } from 'lucide-react';
+import Link from 'next/link';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+const { Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    position: relative;
+
+    height: 100%;
+    min-height: 110px;
+    padding: 16px;
+
+    color: ${token.colorText};
+
+    background: ${token.colorBgContainer};
+    border-radius: ${token.borderRadius}px;
+
+    &:hover {
+      background: ${token.colorBgElevated};
+    }
+  `,
+  cardDesc: css`
+    margin-block: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  cardTitle: css`
+    margin-block: 0 !important;
+    font-size: 16px;
+    font-weight: bold;
+  `,
+  icon: css`
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+const AgentsSuggest = memo(() => {
+  const { t } = useTranslation('welcome');
+  const [sliceStart, setSliceStart] = useState(0);
+  const useFetchAgentList = useMarketStore((s) => s.useFetchAgentList);
+  const { isLoading } = useFetchAgentList();
+  const agentList = useMarketStore((s) => agentMarketSelectors.getAgentList(s), isEqual);
+  const { styles } = useStyles();
+
+  const loadingCards = Array.from({ length: 4 }).map((_, index) => (
+    <Flexbox className={styles.card} key={index}>
+      <Skeleton active avatar paragraph={{ rows: 2 }} title={false} />
+    </Flexbox>
+  ));
+
+  const cards = useMemo(
+    () =>
+      agentList.slice(sliceStart, sliceStart + 4).map((agent) => (
+        <Link href={`/market?agent=${agent.identifier}`} key={agent.identifier}>
+          <Flexbox className={styles.card} gap={8} horizontal>
+            <Avatar avatar={agent.meta.avatar} style={{ flex: 'none' }} />
+            <Flexbox gap={8}>
+              <Paragraph className={styles.cardTitle} ellipsis={{ rows: 1 }}>
+                {agent.meta.title}
+              </Paragraph>
+              <Paragraph className={styles.cardDesc} ellipsis={{ rows: 2 }}>
+                {agent.meta.description}
+              </Paragraph>
+            </Flexbox>
+          </Flexbox>
+        </Link>
+      )),
+    [agentList, sliceStart],
+  );
+
+  const handleRefresh = () => {
+    if (!agentList) return;
+    setSliceStart(Math.floor((Math.random() * agentList.length) / 2));
+  };
+
+  return (
+    <Flexbox gap={8} width={'100%'}>
+      <Flexbox align={'center'} horizontal justify={'space-between'}>
+        <div className={styles.title}>{t('guide.agents.title')}</div>
+        <ActionIcon
+          icon={RefreshCw}
+          onClick={handleRefresh}
+          size={{ blockSize: 24, fontSize: 14 }}
+          title={t('guide.agents.replaceBtn')}
+        />
+      </Flexbox>
+      <Grid gap={8} rows={2}>
+        {isLoading ? loadingCards : cards}
+      </Grid>
+    </Flexbox>
+  );
+});
+
+export default AgentsSuggest;

package/src/features/Conversation/components/InboxWelcome/QuestionSuggest.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { shuffle } from 'lodash-es';
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { USAGE_DOCUMENTS } from '@/const/url';
+import { useSendMessage } from '@/features/ChatInput/useSend';
+import { useChatStore } from '@/store/chat';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    cursor: pointer;
+
+    padding: 12px 24px;
+
+    color: ${token.colorText};
+
+    background: ${token.colorBgContainer};
+    border-radius: 48px;
+
+    &:hover {
+      background: ${token.colorBgElevated};
+    }
+  `,
+  icon: css`
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+const qa = shuffle([
+  'q01',
+  'q02',
+  'q03',
+  'q04',
+  'q05',
+  'q06',
+  'q07',
+  'q08',
+  'q09',
+  'q10',
+  'q11',
+  'q12',
+  'q13',
+  'q14',
+  'q15',
+]).slice(0, 5);
+
+const QuestionSuggest = memo(() => {
+  const [updateInputMessage] = useChatStore((s) => [s.updateInputMessage]);
+  const { t } = useTranslation('welcome');
+  const { styles } = useStyles();
+  const sendMessage = useSendMessage();
+
+  return (
+    <Flexbox gap={8} width={'100%'}>
+      <Flexbox align={'center'} horizontal justify={'space-between'}>
+        <div className={styles.title}>{t('guide.questions.title')}</div>
+        <Link href={USAGE_DOCUMENTS} target={'_blank'}>
+          <ActionIcon
+            icon={ArrowRight}
+            size={{ blockSize: 24, fontSize: 16 }}
+            title={t('guide.questions.moreBtn')}
+          />
+        </Link>
+      </Flexbox>
+      <Flexbox gap={8} horizontal wrap={'wrap'}>
+        {qa.map((item) => {
+          const text = t(`guide.qa.${item}` as any);
+          return (
+            <Flexbox
+              align={'center'}
+              className={styles.card}
+              gap={8}
+              horizontal
+              key={item}
+              onClick={() => {
+                updateInputMessage(text);
+                sendMessage({ isWelcomeQuestion: true });
+              }}
+            >
+              {t(text)}
+            </Flexbox>
+          );
+        })}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default QuestionSuggest;

package/src/features/Conversation/components/InboxWelcome/index.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { FluentEmoji, Markdown } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import AgentsSuggest from './AgentsSuggest';
+import QuestionSuggest from './QuestionSuggest';
+
+const useStyles = createStyles(({ css, responsive }) => ({
+  container: css`
+    align-items: center;
+    ${responsive.mobile} {
+      align-items: flex-start;
+    }
+  `,
+  desc: css`
+    font-size: 14px;
+    text-align: center;
+    ${responsive.mobile} {
+      text-align: left;
+    }
+  `,
+  title: css`
+    margin-top: 0.2em;
+    margin-bottom: 0;
+
+    font-size: 32px;
+    font-weight: bolder;
+    line-height: 1;
+    ${responsive.mobile} {
+      font-size: 24px;
+    }
+  `,
+}));
+
+const InboxWelcome = memo(() => {
+  const { t } = useTranslation('welcome');
+  const [greeting, setGreeting] = useState<'morning' | 'noon' | 'afternoon' | 'night'>();
+  const { styles } = useStyles();
+
+  useEffect(() => {
+    const now = new Date();
+    const hours = now.getHours();
+
+    if (hours >= 4 && hours < 11) {
+      setGreeting('morning');
+    } else if (hours >= 11 && hours < 14) {
+      setGreeting('noon');
+    } else if (hours >= 14 && hours < 18) {
+      setGreeting('afternoon');
+    } else {
+      setGreeting('night');
+    }
+  }, []);
+
+  return (
+    <Center padding={16} width={'100%'}>
+      <Flexbox className={styles.container} gap={16} style={{ maxWidth: 800 }} width={'100%'}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <FluentEmoji emoji={'👋'} size={40} type={'anim'} />
+          <h1 className={styles.title}>{greeting && t(`guide.welcome.${greeting}`)}</h1>
+        </Flexbox>
+        <Markdown className={styles.desc} variant={'chat'}>
+          {t('guide.defaultMessage')}
+        </Markdown>
+        <AgentsSuggest />
+        <QuestionSuggest />
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default InboxWelcome;

package/src/features/Conversation/components/VirtualizedList/index.tsx

@@ -7,12 +7,19 @@ import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { isMobileScreen } from '@/utils/screen';
 
+import { useInitConversation } from '../../hooks/useInitConversation';
 import AutoScroll from '../AutoScroll';
 import Item from '../ChatItem';
+import InboxWelcome from '../InboxWelcome';
+import SkeletonList from '../SkeletonList';
+
+const WELCOME_ID = 'welcome';
 
 const itemContent = (index: number, id: string) => {
   const isMobile = isMobileScreen();
 
+  if (id === WELCOME_ID) return <InboxWelcome />;
+
   return index === 0 ? (
     <div style={{ height: 24 + (isMobile ? 0 : 64) }} />
   ) : (
@@ -24,18 +31,22 @@ interface VirtualizedListProps {
   mobile?: boolean;
 }
 const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
+  useInitConversation();
+
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const [atBottom, setAtBottom] = useState(true);
 
-  const data = useChatStore(
-    (s) => ['empty', ...chatSelectors.currentChatIDsWithGuideMessage(s)],
-    isEqual,
-  );
   const [id, chatLoading] = useChatStore((s) => [
     chatSelectors.currentChatKey(s),
     chatSelectors.currentChatLoadingState(s),
   ]);
 
+  const data = useChatStore((s) => {
+    const showInboxWelcome = chatSelectors.showInboxWelcome(s);
+    const ids = showInboxWelcome ? [WELCOME_ID] : chatSelectors.currentChatIDsWithGuideMessage(s);
+    return ['empty', ...ids];
+  }, isEqual);
+
   useEffect(() => {
     if (virtuosoRef.current) {
       virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
@@ -45,7 +56,9 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
   // overscan should be 1.5 times the height of the window
   const overscan = typeof window !== 'undefined' ? window.innerHeight * 1.5 : 0;
 
-  return chatLoading && data.length === 2 ? null : (
+  return chatLoading ? (
+    <SkeletonList mobile={mobile} />
+  ) : (
     <Flexbox height={'100%'}>
       <Virtuoso
         atBottomStateChange={setAtBottom}

package/src/features/Conversation/index.tsx

@@ -1,13 +1,12 @@
 import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
+import { ReactNode, Suspense, lazy, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ChatHydration from '@/components/StoreHydration/ChatHydration';
-import { useChatStore } from '@/store/chat';
 
 import SkeletonList from './components/SkeletonList';
-import ChatList from './components/VirtualizedList';
-import { useInitConversation } from './hooks/useInitConversation';
+
+const ChatList = lazy(() => import('./components/VirtualizedList'));
 
 const useStyles = createStyles(
   ({ css, responsive, stylish }) => css`
@@ -30,10 +29,6 @@ interface ConversationProps {
 const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
   const { styles } = useStyles();
 
-  useInitConversation();
-
-  const [messagesInit] = useChatStore((s) => [s.messagesInit]);
-
   return (
     <Flexbox
       flex={1}
@@ -41,7 +36,9 @@ const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
       style={{ position: 'relative' }}
     >
       <div className={styles}>
-        {messagesInit ? <ChatList mobile={mobile} /> : <SkeletonList mobile={mobile} />}
+        <Suspense fallback={<SkeletonList mobile={mobile} />}>
+          <ChatList mobile={mobile} />
+        </Suspense>
       </div>
       {chatInput}
       <ChatHydration />

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -5,6 +5,7 @@ import { App } from 'antd';
 import { ThemeAppearance, createStyles } from 'antd-style';
 import 'antd/dist/reset.css';
 import Image from 'next/image';
+import Link from 'next/link';
 import { PropsWithChildren, ReactNode, memo, useEffect } from 'react';
 
 import AntdStaticMethods from '@/components/AntdStaticMethods';
@@ -112,7 +113,7 @@ const AppTheme = memo<AppThemeProps>(
       >
         <GlobalStyle />
         <AntdStaticMethods />
-        <ConfigProvider config={{ imgAs: Image, imgUnoptimized: true }}>
+        <ConfigProvider config={{ aAs: Link, imgAs: Image, imgUnoptimized: true }}>
           <Container>{children}</Container>
         </ConfigProvider>
       </ThemeProvider>

package/src/locales/default/chat.ts

@@ -22,8 +22,6 @@ export default {
   emptyAgent: '暂无助手',
   historyRange: '历史范围',
   inbox: {
-    defaultMessage:
-      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击`+`创建自定义助手',
     desc: '开启大脑集群，激发思维火花。你的智能助理，在这里与你交流一切',
     title: '随便聊聊',
   },

package/src/locales/default/welcome.ts

@@ -4,6 +4,41 @@ export default {
     market: '逛逛市场',
     start: '立即开始',
   },
+  guide: {
+    agents: {
+      replaceBtn: '换一批',
+      title: '新增助理推荐：',
+    },
+    defaultMessage:
+      '我是 LobeChat 你的私人智能助理，我今天能帮你做什么？\n如果需要获得更加专业或定制的助手，可以点击 `+` 创建自定义助手',
+    qa: {
+      q01: 'LobeHub 是什么？',
+      q02: 'LobeChat 是什么？',
+      q03: 'LobeChat 是否有社区支持？',
+      q04: 'LobeChat 支持哪些功能？',
+      q05: 'LobeChat 如何部署和使用？',
+      q06: 'LobeChat 的定价是如何的？',
+      q07: 'LobeChat 是否免费?',
+      q08: '是否有云端服务版？',
+      q09: '是否支持本地语言模型?',
+      q10: '是否支持图像识别和生成?',
+      q11: '是否支持语音合成和语音识别？',
+      q12: '是否支持插件系统？',
+      q13: '是否有自己的市场来获取 GPTs？',
+      q14: '是否支持多种 AI 服务提供商？',
+      q15: '我在使用时遇到问题应该怎么办？',
+    },
+    questions: {
+      moreBtn: '了解更多',
+      title: '大家都在问：',
+    },
+    welcome: {
+      afternoon: '下午好',
+      morning: '早上好',
+      night: '晚上好',
+      noon: '中午好',
+    },
+  },
   header: '欢迎使用',
   pickAgent: '或从下列助手模板选择',
   skip: '跳过创建',

package/src/services/chat.ts

@@ -3,6 +3,8 @@ import { produce } from 'immer';
 import { merge } from 'lodash-es';
 
 import { createErrorResponse } from '@/app/api/errorResponse';
+import { INBOX_GUIDE_SYSTEMROLE } from '@/const/guide';
+import { INBOX_SESSION_ID } from '@/const/session';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { TracePayload, TraceTagMap } from '@/const/trace';
 import { AgentRuntime, ChatCompletionErrorPayload, ModelProvider } from '@/libs/agent-runtime';
@@ -29,6 +31,7 @@ import { createHeaderWithAuth, getProviderAuthPayload } from './_auth';
 import { API_ENDPOINTS } from './_url';
 
 interface FetchOptions {
+  isWelcomeQuestion?: boolean;
   signal?: AbortSignal | undefined;
   trace?: TracePayload;
 }
@@ -63,6 +66,7 @@ interface FetchAITaskResultParams {
 
 interface CreateAssistantMessageStream extends FetchSSEOptions {
   abortController?: AbortController;
+  isWelcomeQuestion?: boolean;
   params: GetChatCompletionPayload;
   trace?: TracePayload;
 }
@@ -183,11 +187,14 @@ class ChatService {
     );
     // ============  1. preprocess messages   ============ //
 
-    const oaiMessages = this.processMessages({
-      messages,
-      model: payload.model,
-      tools: enabledPlugins,
-    });
+    const oaiMessages = this.processMessages(
+      {
+        messages,
+        model: payload.model,
+        tools: enabledPlugins,
+      },
+      options,
+    );
 
     // ============  2. preprocess tools   ============ //
 
@@ -215,10 +222,12 @@ class ChatService {
     onErrorHandle,
     onFinish,
     trace,
+    isWelcomeQuestion,
   }: CreateAssistantMessageStream) => {
     await fetchSSE(
       () =>
         this.createAssistantMessage(params, {
+          isWelcomeQuestion,
           signal: abortController?.signal,
           trace: this.mapTrace(trace, TraceTagMap.Chat),
         }),
@@ -371,15 +380,18 @@ class ChatService {
     return await data?.text();
   };
 
-  private processMessages = ({
-    messages,
-    tools,
-    model,
-  }: {
-    messages: ChatMessage[];
-    model: string;
-    tools?: string[];
-  }): OpenAIChatMessage[] => {
+  private processMessages = (
+    {
+      messages,
+      tools,
+      model,
+    }: {
+      messages: ChatMessage[];
+      model: string;
+      tools?: string[];
+    },
+    options?: FetchOptions,
+  ): OpenAIChatMessage[] => {
     // handle content type for vision model
     // for the models with visual ability, add image url to content
     // refs: https://platform.openai.com/docs/guides/vision/quick-start
@@ -424,22 +436,35 @@ class ChatService {
     });
 
     return produce(postMessages, (draft) => {
-      if (!tools || tools.length === 0) return;
-      const hasFC = modelProviderSelectors.isModelEnabledFunctionCall(model)(
-        useUserStore.getState(),
-      );
-      if (!hasFC) return;
+      // if it's a welcome question, inject InboxGuide SystemRole
+      const inboxGuideSystemRole =
+        options?.isWelcomeQuestion &&
+        options?.trace?.sessionId === INBOX_SESSION_ID &&
+        INBOX_GUIDE_SYSTEMROLE;
+
+      // Inject Tool SystemRole
+      const hasTools = tools && tools?.length > 0;
+      const hasFC =
+        hasTools &&
+        modelProviderSelectors.isModelEnabledFunctionCall(model)(useUserStore.getState());
+      const toolsSystemRoles =
+        hasFC && toolSelectors.enabledSystemRoles(tools)(useToolStore.getState());
+
+      const injectSystemRoles = [inboxGuideSystemRole, toolsSystemRoles]
+        .filter(Boolean)
+        .join('\n\n');
+
+      if (!injectSystemRoles) return;
 
       const systemMessage = draft.find((i) => i.role === 'system');
 
-      const toolsSystemRoles = toolSelectors.enabledSystemRoles(tools)(useToolStore.getState());
-      if (!toolsSystemRoles) return;
-
       if (systemMessage) {
-        systemMessage.content = systemMessage.content + '\n\n' + toolsSystemRoles;
+        systemMessage.content = [systemMessage.content, injectSystemRoles]
+          .filter(Boolean)
+          .join('\n\n');
       } else {
         draft.unshift({
-          content: toolsSystemRoles,
+          content: injectSystemRoles,
           role: 'system',
         });
       }
@@ -451,7 +476,7 @@ class ChatService {
 
     const enabled = preferenceSelectors.userAllowTrace(useUserStore.getState());
 
-    if (!enabled) return { enabled: false };
+    if (!enabled) return { ...trace, enabled: false };
 
     return {
       ...trace,

package/src/store/chat/slices/message/action.test.ts

@@ -385,11 +385,7 @@ describe('chatMessage actions', () => {
       });
 
       expect(messageService.removeMessage).not.toHaveBeenCalledWith(messageId);
-      expect(mockState.coreProcessMessage).toHaveBeenCalledWith(
-        expect.any(Array),
-        messageId,
-        undefined,
-      );
+      expect(mockState.coreProcessMessage).toHaveBeenCalledWith(expect.any(Array), messageId, {});
     });
 
     it('should not perform any action if the message id does not exist', async () => {