@lobehub/chat 0.151.0 → 0.151.1

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 { useChatInput } from '@/features/ChatInput/useChatInput';
+
+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 { onInput, onSend } = useChatInput();
+  const { t } = useTranslation('welcome');
+  const { styles } = useStyles();
+
+  const handoleSend = (qa: string) => {
+    onInput(qa);
+    onSend();
+  };
+
+  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={() => handoleSend(text)}
+            >
+              {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

@@ -9,10 +9,15 @@ import { isMobileScreen } from '@/utils/screen';
 
 import AutoScroll from '../AutoScroll';
 import Item from '../ChatItem';
+import InboxWelcome from '../InboxWelcome';
+
+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) }} />
   ) : (
@@ -27,15 +32,17 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
   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' });

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';
@@ -183,11 +185,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   ============ //
 
@@ -371,15 +376,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 +432,33 @@ class ChatService {
     });
 
     return produce(postMessages, (draft) => {
-      if (!tools || tools.length === 0) return;
-      const hasFC = modelProviderSelectors.isModelEnabledFunctionCall(model)(
-        useUserStore.getState(),
-      );
-      if (!hasFC) return;
+      // Inject InboxGuide SystemRole
+      const inboxGuideSystemRole =
+        options?.trace?.sessionId === INBOX_SESSION_ID && INBOX_GUIDE_SYSTEMROLE;
 
-      const systemMessage = draft.find((i) => i.role === 'system');
+      // 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 toolsSystemRoles = toolSelectors.enabledSystemRoles(tools)(useToolStore.getState());
-      if (!toolsSystemRoles) return;
+      const injectSystemRoles = [inboxGuideSystemRole, toolsSystemRoles]
+        .filter(Boolean)
+        .join('\n\n');
+
+      if (!injectSystemRoles) return;
+
+      const systemMessage = draft.find((i) => i.role === 'system');
 
       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 +470,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/selectors.test.ts

@@ -225,7 +225,7 @@ describe('chatSelectors', () => {
 
       const chats = chatSelectors.currentChatsWithGuideMessage(metaData)(state);
 
-      expect(chats[0].content).toEqual('inbox.defaultMessage'); // Assuming translation returns a string containing this
+      expect(chats[0].content).toEqual(''); // Assuming translation returns a string containing this
     });
 
     it('should use agent default message for non-inbox sessions', () => {
@@ -260,4 +260,30 @@ describe('chatSelectors', () => {
       vi.restoreAllMocks();
     });
   });
+
+  describe('showInboxWelcome', () => {
+    it('should return false if the active session is not the inbox session', () => {
+      const state = merge(initialStore, { activeId: 'someActiveId' });
+      const result = chatSelectors.showInboxWelcome(state);
+      expect(result).toBe(false);
+    });
+
+    it('should return false if there are existing messages in the inbox session', () => {
+      const state = merge(initialStore, {
+        activeId: INBOX_SESSION_ID,
+        messages: mockMessages,
+      });
+      const result = chatSelectors.showInboxWelcome(state);
+      expect(result).toBe(false);
+    });
+
+    it('should return true if the active session is the inbox session and there are no existing messages', () => {
+      const state = merge(initialStore, {
+        activeId: INBOX_SESSION_ID,
+        messages: [],
+      });
+      const result = chatSelectors.showInboxWelcome(state);
+      expect(result).toBe(true);
+    });
+  });
 });

package/src/store/chat/slices/message/selectors.ts

@@ -52,6 +52,15 @@ const currentChats = (s: ChatStore): ChatMessage[] => {
 };
 
 const initTime = Date.now();
+
+const showInboxWelcome = (s: ChatStore): boolean => {
+  const isInbox = s.activeId === INBOX_SESSION_ID;
+  if (!isInbox) return false;
+  const data = currentChats(s);
+  const isBrandNewChat = data.length === 0;
+  return isBrandNewChat;
+};
+
 // 针对新助手添加初始化时的自定义消息
 const currentChatsWithGuideMessage =
   (meta: MetaData) =>
@@ -64,7 +73,7 @@ const currentChatsWithGuideMessage =
 
     const [activeId, isInbox] = [s.activeId, s.activeId === INBOX_SESSION_ID];
 
-    const inboxMsg = t('inbox.defaultMessage', { ns: 'chat' });
+    const inboxMsg = '';
     const agentSystemRoleMsg = t('agentDefaultMessageWithSystemRole', {
       name: meta.title || t('defaultAgent'),
       ns: 'chat',
@@ -137,4 +146,5 @@ export const chatSelectors = {
   getMessageById,
   getTraceIdByMessageId,
   latestMessage,
+  showInboxWelcome,
 };