@lobehub/chat 0.152.0 → 0.152.2

package/src/hooks/useQuery.ts

@@ -0,0 +1,7 @@
+import { useSearchParams } from 'next/navigation';
+import qs from 'query-string';
+
+export const useQuery = () => {
+  const rawQuery = useSearchParams();
+  return qs.parse(rawQuery.toString());
+};

package/src/hooks/useQueryRoute.ts

@@ -0,0 +1,16 @@
+import { useRouter } from 'next/navigation';
+import qs, { type ParsedQuery } from 'query-string';
+
+import { useQuery } from '@/hooks/useQuery';
+
+export const useQueryRoute = () => {
+  const router = useRouter();
+  const parseQuery = useQuery();
+
+  return {
+    push: (url: string, query?: ParsedQuery) =>
+      router.push(qs.stringifyUrl({ query: { ...parseQuery, ...query }, url })),
+    replace: (url: string, query?: ParsedQuery) =>
+      router.replace(qs.stringifyUrl({ query: { ...parseQuery, ...query }, url })),
+  };
+};

package/src/locales/default/common.ts

@@ -133,6 +133,7 @@ export default {
   tab: {
     chat: '会话',
     market: '发现',
+    me: '我',
     setting: '设置',
   },
   telemetry: {
@@ -151,4 +152,17 @@ export default {
     hasNew: '有可用更新',
     newVersion: '有新版本可用：{{version}}',
   },
+  userPanel: {
+    billing: '账单管理',
+    discord: '社区支持',
+    docs: '使用文档',
+    email: '邮件支持',
+    feedback: '反馈与建议',
+    help: '帮助中心',
+    plans: '订阅方案',
+    profile: '账户管理',
+    setting: '应用设置',
+    usages: '用量统计',
+    warn: '此入口即将下线，后续请从左上角头像唤起本菜单',
+  },
 };

package/src/locales/default/setting.ts

@@ -27,9 +27,12 @@ export default {
     },
   },
   header: {
+    desc: '偏好与模型设置。',
     global: '全局设置',
     session: '会话设置',
+    sessionDesc: '角色设定与会话偏好。',
     sessionWithName: '会话设置 · {{name}}',
+    title: '设置',
   },
   llm: {
     checker: {

package/src/locales/resources.ts

@@ -18,6 +18,7 @@ export const locales = [
 ] as const;
 
 export type DefaultResources = typeof resources;
+export type NS = keyof DefaultResources;
 export type Locales = (typeof locales)[number];
 
 export const normalizeLocale = (locale?: string): string => {

package/src/server/redirectHard.ts

@@ -0,0 +1,9 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+// 当不想被路由拦截时请使用此方法绕过
+
+export default async function redirectHard(uri: string) {
+  redirect(uri);
+}

package/src/server/translation.ts

@@ -0,0 +1,20 @@
+'use server';
+
+import { get } from 'lodash-es';
+import { cookies } from 'next/headers';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
+import { NS, normalizeLocale } from '@/locales/resources';
+
+export const translation = async (ns: NS) => {
+  const cookieStore = cookies();
+  const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
+  const lng = defaultLang?.value || DEFAULT_LANG;
+  const filepath = join(process.cwd(), `locales/${normalizeLocale(lng)}/${ns}.json`);
+  const file = readFileSync(filepath, 'utf8');
+  const i18ns = JSON.parse(file);
+
+  return { t: (key: string) => get(i18ns, key) };
+};

package/src/services/__tests__/chat.test.ts

@@ -1,6 +1,6 @@
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { act } from '@testing-library/react';
-import { merge } from 'lodash';
+import { merge } from 'lodash-es';
 import { describe, expect, it, vi } from 'vitest';
 
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';

package/src/store/global/initialState.ts

@@ -6,6 +6,7 @@ import { AsyncLocalStorage } from '@/utils/localStorage';
 export enum SidebarTabKey {
   Chat = 'chat',
   Market = 'market',
+  Me = 'me',
   Setting = 'settings',
 }
 

package/src/store/market/action.ts

@@ -28,7 +28,7 @@ export const createMarketAction: StateCreator<
     set({ currentIdentifier: identifier });
   },
   deactivateAgent: () => {
-    set({ currentIdentifier: undefined }, false, 'deactivateAgent');
+    set({ currentIdentifier: '' }, false, 'deactivateAgent');
   },
   setSearchKeywords: (keywords) => {
     set({ searchKeywords: keywords });

package/src/store/session/slices/session/action.ts

@@ -1,5 +1,5 @@
+import isEqual from 'fast-deep-equal';
 import { t } from 'i18next';
-import { isEqual } from 'lodash-es';
 import useSWR, { SWRResponse, mutate } from 'swr';
 import { DeepPartial } from 'utility-types';
 import { StateCreator } from 'zustand/vanilla';

package/src/utils/difference.ts

@@ -1,4 +1,5 @@
-import { isArray, isEqual, isObject, transform } from 'lodash-es';
+import isEqual from 'fast-deep-equal';
+import { isArray, isObject, transform } from 'lodash-es';
 
 /**
  * Compare two objects and return the difference.

package/src/app/(main)/@nav/_layout/Desktop/Avatar.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-
-import AvatarWithUpload from '@/features/AvatarWithUpload';
-
-const Avatar = memo(() => {
-  return <AvatarWithUpload id={'avatar'} />;
-});
-
-Avatar.displayName = 'Avatar';
-
-export default Avatar;

package/src/app/(main)/chat/settings/(desktop)/index.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import SafeSpacing from '@/components/SafeSpacing';
-import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
-import { HEADER_HEIGHT } from '@/const/layoutTokens';
-
-import EditPage from '../features/EditPage';
-import Header from './Header';
-
-const Desktop = memo(() => (
-  <>
-    <Header />
-    <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'scroll' }}>
-      <SafeSpacing height={HEADER_HEIGHT - 16} />
-      <EditPage />
-    </Flexbox>
-  </>
-));
-
-export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

package/src/app/(main)/chat/settings/(mobile)/index.tsx

@@ -1,16 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-
-import MobileContentLayout from '@/components/server/MobileNavLayout';
-
-import EditPage from '../features/EditPage';
-import Header from './Header';
-
-const ChatSettings = memo(() => (
-  <MobileContentLayout header={<Header />} withNav={false}>
-    <EditPage />
-  </MobileContentLayout>
-));
-
-export default ChatSettings;

package/src/app/(main)/market/(desktop)/index.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { SpotlightCard, SpotlightCardProps } from '@lobehub/ui';
-import { FC, memo, useEffect } from 'react';
-
-import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
-import { useMarketStore } from '@/store/market';
-
-import AgentCard from '../features/AgentCard';
-
-const Desktop = memo(() => {
-  useEffect(() => {
-    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useMarketStore.persist.rehydrate();
-  }, []);
-
-  return <AgentCard CardRender={SpotlightCard as FC<SpotlightCardProps>} />;
-});
-
-export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

package/src/app/(main)/market/(mobile)/features/AgentCard.tsx

@@ -1,31 +0,0 @@
-import { SpotlightCardProps } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  container: css`
-    overflow: hidden;
-    background: ${token.colorBgContainer};
-    border: 1px solid ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
-    border-radius: ${token.borderRadiusLG}px;
-  `,
-}));
-
-const AgentCard = memo<SpotlightCardProps>(({ items, renderItem, gap = 16, ...props }) => {
-  const { styles } = useStyles();
-  return (
-    <Flexbox gap={gap} {...props}>
-      {items.map((item, index) => {
-        const children = renderItem(item);
-        return (
-          <div className={styles.container} key={index}>
-            {children}
-          </div>
-        );
-      })}
-    </Flexbox>
-  );
-});
-
-export default AgentCard;

package/src/app/(main)/market/(mobile)/index.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { memo, useEffect } from 'react';
-
-import { useMarketStore } from '@/store/market';
-
-import AgentCard from '../features/AgentCard';
-import CardRender from './features/AgentCard';
-
-const DetailModal = dynamic(() => import('./features/AgentDetail'), { ssr: false });
-
-export default memo(() => {
-  useEffect(() => {
-    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useMarketStore.persist.rehydrate();
-  }, []);
-
-  return (
-    <>
-      <AgentCard CardRender={CardRender} mobile />
-      <DetailModal />
-    </>
-  );
-});

package/src/app/(main)/market/components/Loading.tsx

@@ -1,13 +0,0 @@
-import { Skeleton } from 'antd';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-const Loading = memo(() => {
-  return (
-    <Flexbox>
-      <Skeleton paragraph={{ rows: 8 }} />
-    </Flexbox>
-  );
-});
-
-export default Loading;

package/src/app/(main)/market/features/AgentCard/AgentCardItem.tsx

@@ -1,54 +0,0 @@
-import { Avatar, Tag } from '@lobehub/ui';
-import { useHover } from 'ahooks';
-import { Typography } from 'antd';
-import { useThemeMode } from 'antd-style';
-import { startCase } from 'lodash-es';
-import { memo, useRef } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { useMarketStore } from '@/store/market';
-import { AgentsMarketIndexItem } from '@/types/market';
-
-import AgentCardBanner from './AgentCardBanner';
-import { useStyles } from './style';
-
-const { Paragraph } = Typography;
-
-const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, identifier }) => {
-  const ref = useRef(null);
-  const isHovering = useHover(ref);
-  const onAgentCardClick = useMarketStore((s) => s.activateAgent);
-  const { styles, theme } = useStyles();
-  const { isDarkMode } = useThemeMode();
-
-  const { avatar, title, description, tags, backgroundColor } = meta;
-
-  return (
-    <Flexbox className={styles.container} onClick={() => onAgentCardClick(identifier)}>
-      <AgentCardBanner meta={meta} style={{ opacity: isDarkMode ? 0.9 : 0.4 }} />
-      <Flexbox className={styles.inner} gap={8} ref={ref}>
-        <Avatar
-          animation={isHovering}
-          avatar={avatar}
-          background={backgroundColor || theme.colorFillTertiary}
-          size={56}
-        />
-        <Paragraph className={styles.title} ellipsis={{ rows: 1, tooltip: title }}>
-          {title}
-        </Paragraph>
-        <Paragraph className={styles.desc} ellipsis={{ rows: 2, tooltip: description }}>
-          {description}
-        </Paragraph>
-        <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-          {(tags as string[]).filter(Boolean).map((tag: string, index) => (
-            <Tag key={index} style={{ margin: 0 }}>
-              {startCase(tag).trim()}
-            </Tag>
-          ))}
-        </Flexbox>
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default AgentCardItem;

package/src/app/(main)/market/features/AgentCard/style.ts

@@ -1,33 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, token, responsive }) => ({
-  container: css`
-    position: relative;
-    overflow: hidden;
-    border-radius: 11px;
-    ${responsive.mobile} {
-      border-radius: unset;
-    }
-  `,
-  desc: css`
-    color: ${token.colorTextDescription};
-  `,
-  inner: css`
-    padding: 16px;
-  `,
-  lazy: css`
-    min-height: 232px;
-  `,
-  subTitle: css`
-    font-size: 24px;
-    font-weight: 600;
-    ${responsive.mobile} {
-      font-size: 20px;
-    }
-  `,
-  title: css`
-    margin-bottom: 0 !important;
-    font-size: 16px;
-    font-weight: 600;
-  `,
-}));

package/src/app/(main)/market/features/AgentDetailContent/index.tsx

@@ -1,12 +0,0 @@
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AgentInfo from './AgentInfo';
-
-const AgentDetailContent = memo(() => (
-  <Flexbox>
-    <AgentInfo />
-  </Flexbox>
-));
-
-export default AgentDetailContent;

package/src/app/(main)/market/features/AgentSearchBar/index.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { SearchBar } from '@lobehub/ui';
-import { memo, useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useIsMobile } from '@/hooks/useIsMobile';
-import { useMarketStore } from '@/store/market';
-
-const AgentSearchBar = memo<{ mobile?: boolean }>(({ mobile: controlledMobile }) => {
-  const { t } = useTranslation('market');
-  const [keywords, setKeywords] = useMarketStore((s) => [s.searchKeywords, s.setSearchKeywords]);
-  const [value, setValue] = useState(keywords);
-  const isMobile = useIsMobile();
-  const mobile = controlledMobile ?? isMobile;
-
-  const handleSearch = useCallback(() => {
-    setKeywords(value);
-  }, [value, setKeywords]);
-
-  return (
-    <Flexbox flex={'none'} paddingBlock={mobile ? 8 : 0}>
-      <SearchBar
-        allowClear
-        enableShortKey={!mobile}
-        onChange={(e) => setValue(e.target.value)}
-        onPressEnter={handleSearch}
-        onSubmit={handleSearch}
-        placeholder={t('search.placeholder')}
-        shortKey={'k'}
-        spotlight={!mobile}
-        type={mobile ? 'block' : 'ghost'}
-        value={value}
-      />
-    </Flexbox>
-  );
-});
-
-export default AgentSearchBar;

package/src/app/(main)/market/features/PageTitle/index.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PageTitle from '@/components/PageTitle';
-
-const Title = memo(() => {
-  const { t } = useTranslation('common');
-
-  return <PageTitle title={t('tab.market')} />;
-});
-export default Title;

package/src/app/(main)/market/features/TagList/Inner.tsx

@@ -1,28 +0,0 @@
-import { Button } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { startCase } from 'lodash-es';
-import { memo } from 'react';
-
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
-
-const Inner = memo(() => {
-  const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
-  const [keywords, setSearchKeywords] = useMarketStore((s) => [
-    s.searchKeywords,
-    s.setSearchKeywords,
-  ]);
-
-  return agentTagList.map((item) => (
-    <Button
-      key={item}
-      onClick={() => setSearchKeywords(item)}
-      shape={'round'}
-      size={'small'}
-      type={keywords === item ? 'primary' : 'default'}
-    >
-      {startCase(item)}
-    </Button>
-  ));
-});
-
-export default Inner;

package/src/app/(main)/market/features/TagList/index.tsx

@@ -1,23 +0,0 @@
-import { Skeleton } from 'antd';
-import { Suspense, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Inner from './Inner';
-
-const TagList = memo(() => {
-  return (
-    <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-      <Suspense
-        fallback={Array.from({ length: 5 })
-          .fill('')
-          .map((_, index) => (
-            <Skeleton.Button key={index} shape={'round'} size={'small'} />
-          ))}
-      >
-        <Inner />
-      </Suspense>
-    </Flexbox>
-  );
-});
-
-export default TagList;

package/src/app/(main)/market/layout.ts

@@ -1,8 +0,0 @@
-import ServerLayout from '@/components/server/ServerLayout';
-
-import Desktop from './_layout/Desktop';
-import Mobile from './_layout/Mobile';
-
-const MarketLayout = ServerLayout({ Desktop, Mobile });
-
-export default MarketLayout;

package/src/app/(main)/settings/(desktop)/index.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { FC, memo } from 'react';
-
-import MobileSwitchLoading from '@/features/MobileSwitchLoading';
-import { useIsMobile } from '@/hooks/useIsMobile';
-
-import Common from '../common';
-import { SettingsCommonProps } from '../common/Common';
-
-const Mobile: FC = dynamic(() => import('../(mobile)'), {
-  loading: MobileSwitchLoading,
-  ssr: false,
-}) as FC;
-
-const Desktop = memo<SettingsCommonProps>((props) => {
-  const mobile = useIsMobile();
-
-  return mobile ? <Mobile /> : <Common {...props} />;
-});
-
-export default Desktop;

package/src/app/(main)/settings/(mobile)/features/AvatarBanner.tsx

@@ -1,68 +0,0 @@
-import { DivProps } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import Image from 'next/image';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  banner: css`
-    position: relative;
-
-    overflow: hidden;
-
-    height: 172px;
-    min-height: 172px;
-    max-height: 172px;
-  `,
-  bannerBox: css`
-    position: relative;
-
-    width: 100%;
-    height: 100%;
-
-    background: ${token.colorBgLayout};
-
-    mask-image: linear-gradient(to bottom, #fff, transparent);
-  `,
-  bannerImg: css`
-    position: absolute;
-    top: -50%;
-    filter: blur(100px) saturate(2);
-  `,
-}));
-
-interface AgentCardBannerProps extends DivProps {
-  avatar: string;
-  size?: number;
-}
-
-const AvatarBanner = memo<AgentCardBannerProps>(
-  ({ avatar, className, size = 200, children, ...props }) => {
-    const { styles, cx } = useStyles();
-
-    return (
-      <Flexbox
-        align={'center'}
-        className={cx(styles.banner, className)}
-        justify={'center'}
-        {...props}
-      >
-        <Flexbox align={'center'} className={styles.bannerBox} justify={'center'}>
-          <Image
-            alt={'banner'}
-            className={styles.bannerImg}
-            height={size}
-            src={avatar || DEFAULT_USER_AVATAR_URL}
-            unoptimized
-            width={size}
-          />
-        </Flexbox>
-        {children}
-      </Flexbox>
-    );
-  },
-);
-
-export default AvatarBanner;