@lobehub/chat 0.54.0 → 0.54.2

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.54.2](https://github.com/lobehub/lobe-chat/compare/v0.54.1...v0.54.2)
+
+<sup>Released on **2023-08-16**</sup>
+
+#### 💄 Styles
+
+- **misc**: 修正图片选项的样式问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: 修正图片选项的样式问题 ([5f576cb](https://github.com/lobehub/lobe-chat/commit/5f576cb))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.54.1](https://github.com/lobehub/lobe-chat/compare/v0.54.0...v0.54.1)
+
+<sup>Released on **2023-08-16**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正 i18n 失效的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: 修正 i18n 失效的问题, closes [#80](https://github.com/lobehub/lobe-chat/issues/80) ([b8d957b](https://github.com/lobehub/lobe-chat/commit/b8d957b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.54.0](https://github.com/lobehub/lobe-chat/compare/v0.53.0...v0.54.0)
 
 <sup>Released on **2023-08-15**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.54.0",
+  "version": "0.54.2",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/components/SelectWithImg/index.tsx

@@ -1,7 +1,8 @@
 import { Icon, IconProps } from '@lobehub/ui';
 import { SelectProps } from 'antd';
-import { type CSSProperties, ReactNode, memo, useEffect, useState } from 'react';
+import { type CSSProperties, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
 
 import { useStyles } from './styles';
 
@@ -14,14 +15,20 @@ export interface SelectWithImgOptionItem {
 
 export interface SelectWithImgProps {
   className?: string;
+  classNames?: {
+    img?: string;
+  };
   defaultValue?: SelectProps['defaultValue'];
-  imgClassName?: string;
-  imgStyle?: CSSProperties;
+  height: number;
   onChange?: (value: this['value']) => void;
   options?: SelectWithImgOptionItem[];
-  size?: number;
   style?: CSSProperties;
+
+  styles?: {
+    img?: CSSProperties;
+  };
   value?: SelectProps['value'];
+  width: number;
 }
 
 const SelectWithImg = memo<SelectWithImgProps>(
@@ -32,21 +39,23 @@ const SelectWithImg = memo<SelectWithImgProps>(
     defaultValue,
     onChange,
     options,
-    size = 100,
-    imgStyle,
-    imgClassName,
+    width,
+    height,
+    styles: outStyles = {},
+    classNames = {},
   }) => {
-    const [currentValue, setCurrentValue] = useState(value || defaultValue);
-    const { styles, cx } = useStyles();
+    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {
+      defaultValue,
+      onChange,
+      value,
+    });
 
-    useEffect(() => {
-      onChange?.(currentValue);
-    }, [currentValue]);
+    const { styles, cx } = useStyles();
 
     return (
-      <Flexbox className={className} gap={8} horizontal style={style}>
+      <Flexbox className={className} gap={16} horizontal style={style}>
         {options?.map((item) => {
-          const isActive = value ? item.value === value : item.value === currentValue;
+          const isActive = item.value === currentValue;
           return (
             <Flexbox
               align={'center'}
@@ -55,13 +64,24 @@ const SelectWithImg = memo<SelectWithImgProps>(
               key={item.value}
               onClick={() => setCurrentValue(item.value)}
             >
-              <img
-                alt={item.value}
-                className={imgClassName}
-                src={item.img}
-                style={imgStyle}
-                width={size}
-              />
+              <div
+                className={cx(styles.imgCtn, isActive && styles.imgActive, classNames.img)}
+                style={{
+                  ...outStyles.img,
+                  height,
+                  width,
+                }}
+              >
+                <div
+                  className={styles.img}
+                  style={{
+                    backgroundImage: `url(${item.img})`,
+                    backgroundSize: 'contain',
+                    height,
+                    width,
+                  }}
+                />
+              </div>
               <Flexbox align={'center'} gap={4} horizontal>
                 {item.icon && <Icon icon={item.icon} />}
                 {item.label}

package/src/components/SelectWithImg/styles.ts

@@ -1,27 +1,42 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token }) => ({
-  active: css`
-    color: ${token.colorText};
-
-    > img {
-      box-shadow: 0 0 0 1px ${token.colorTextDescription};
+export const useStyles = createStyles(({ css, token, cx }) => {
+  const hover = css`
+    &:hover {
+      border-color: ${token.colorText};
+      box-shadow: 0 0 0 2px ${token.colorText};
     }
-  `,
-  container: css`
-    cursor: pointer;
-    color: ${token.colorTextDescription};
+  `;
 
-    > img {
-      overflow: hidden;
-      border-radius: ${token.borderRadius}px;
-      box-shadow: 0 0 0 1px ${token.colorBorder};
-      transition: all 100ms ${token.motionEaseOut};
+  const img = cx(css`
+    box-shadow: inset 0 0 0 2px ${token.colorSplit};
+    transition: all 100ms ${token.motionEaseOut};
+    border-radius: ${token.borderRadius}px;
+
+    ${hover}
+  `);
+
+  return {
+    active: css`
+      color: ${token.colorText};
+    `,
+    container: css`
+      cursor: pointer;
+      color: ${token.colorTextDescription};
+    `,
+    img,
+    imgActive: css`
+      box-shadow: 0 0 0 2px ${token.colorTextTertiary};
 
-      &:hover {
-        border-color: ${token.colorText};
-        box-shadow: 0 0 0 2px ${token.colorText};
+      .${img} {
+        box-shadow: none;
       }
-    }
-  `,
-}));
+    `,
+    imgCtn: css`
+      background: ${token.colorFillTertiary};
+      border-radius: ${token.borderRadius}px;
+
+      ${hover}
+    `,
+  };
+});

package/src/features/AgentSetting/AgentConfig/index.tsx

@@ -35,13 +35,7 @@ const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
         {
           children: (
             <SelectWithImg
-              imgStyle={{
-                background: `linear-gradient(
-                  to bottom,
-                ${isDarkMode ? theme.colorBgElevated : theme.colorBgLayout},
-                ${theme.colorBgContainer}
-                )`,
-              }}
+              height={86}
               options={[
                 {
                   icon: MessagesSquare,
@@ -56,7 +50,16 @@ const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
                   value: 'docs',
                 },
               ]}
-              size={144}
+              styles={{
+                img: {
+                  background: `linear-gradient(
+                  to bottom,
+                ${isDarkMode ? theme.colorBgElevated : theme.colorBgLayout},
+                ${theme.colorBgContainer}
+                )`,
+                },
+              }}
+              width={144}
             />
           ),
           label: t('settingChat.chatStyleType.title'),

package/src/layout/index.tsx

@@ -3,22 +3,26 @@ import { App, ConfigProvider } from 'antd';
 import { useThemeMode } from 'antd-style';
 import 'antd/dist/reset.css';
 import Zh_CN from 'antd/locale/zh_CN';
+import { changeLanguage } from 'i18next';
 import { PropsWithChildren, memo, useCallback, useEffect } from 'react';
 
-import { useGlobalStore } from '@/store/global';
+import { createI18nNext } from '@/locales/create';
+import { useGlobalStore, useOnFinishHydrationGlobal } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { GlobalStyle } from '@/styles';
 
-import i18n from '../locales';
 import { useStyles } from './style';
 
+const i18n = createI18nNext();
+
 const Layout = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
 
-  useEffect(() => {
-    // 用一种比较奇怪的方式import 了 18n
-    i18n.finally(() => {});
-  }, []);
+  useOnFinishHydrationGlobal((state) => {
+    i18n.then(() => {
+      changeLanguage(state.settings.language);
+    });
+  });
 
   return (
     <ConfigProvider locale={Zh_CN}>

package/src/locales/create.ts

@@ -7,12 +7,13 @@ import type { Namespaces } from '@/types/locale';
 
 import resources from './resources';
 
-export const createI18nNext = (namespace?: Namespaces[] | Namespaces) => {
-  const ns: Namespaces[] = namespace
-    ? isArray(namespace)
-      ? ['error', 'common', ...namespace]
-      : ['error', 'common', namespace]
-    : ['error', 'common'];
+export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces } = {}) => {
+  const { namespace } = params;
+
+  const ns: Namespaces[] = isArray(namespace)
+    ? ['error', 'common', ...namespace]
+    : (['error', 'common', namespace].filter(Boolean) as Namespaces[]);
+
   return (
     i18n
       // detect user language
@@ -23,9 +24,12 @@ export const createI18nNext = (namespace?: Namespaces[] | Namespaces) => {
       // init i18next
       // for all options read: https://www.i18next.com/overview/configuration-options
       .init({
-        // @ts-ignore
         debug: process.env.NODE_ENV === 'development',
         defaultNS: ns,
+        // LanguageDetector config, refs: https://github.com/i18next/i18next-browser-languageDetector
+        detection: {
+          caches: [],
+        },
         fallbackLng: 'zh-CN',
         interpolation: {
           escapeValue: false, // not needed for react as it escapes by default

package/src/locales/resources/en_US.ts

@@ -1,3 +1,15 @@
-const resources = {} as const;
+import common from '../../../locales/en_US/common.json';
+import empty from '../../../locales/en_US/empty.json';
+import error from '../../../locales/en_US/error.json';
+import plugin from '../../../locales/en_US/plugin.json';
+import setting from '../../../locales/en_US/setting.json';
+
+const resources = {
+  common,
+  empty,
+  error,
+  plugin,
+  setting,
+} as const;
 
 export default resources;

package/src/pages/settings/Settings/Common.tsx

@@ -79,6 +79,7 @@ const Common = memo(() => {
           children: (
             <SelectWithImg
               defaultValue={settings.themeMode}
+              height={60}
               onChange={setThemeMode}
               options={[
                 {
@@ -100,6 +101,7 @@ const Common = memo(() => {
                   value: 'auto',
                 },
               ]}
+              width={100}
             />
           ),
           label: t('settingTheme.themeMode.title'),

package/src/pages/settings/layout.tsx

@@ -1,25 +1,25 @@
 import Head from 'next/head';
-import { ReactNode, memo, useEffect } from 'react';
+import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
-import { useSwitchSideBarOnInit } from '@/store/global';
+import { useOnFinishHydrationGlobal, useSwitchSideBarOnInit } from '@/store/global';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-const initI18n = createI18nNext('setting');
+const initI18n = createI18nNext({ namespace: 'setting' });
 
 const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
   const { t } = useTranslation('setting');
   const pageTitle = genSiteHeadTitle(t('header.global'));
 
-  useEffect(() => {
-    initI18n.finally();
-  }, []);
-
   useSwitchSideBarOnInit('settings');
 
+  useOnFinishHydrationGlobal(() => {
+    initI18n.then(() => {});
+  });
+
   return (
     <>
       <Head>

package/src/store/global/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useHydrated';
+export * from './useOnFinishHydrationGlobal';
 export * from './useSwitchSideBarOnInit';

package/src/store/global/hooks/useHydrated.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { useGlobalStore } from '../store';
 
-export const useSettingsHydrated = () => {
+export const useGlobalHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
   const hasInited = !!Object.values(useGlobalStore.getState().settings).length;
 

package/src/store/global/hooks/useOnFinishHydrationGlobal.ts

@@ -1,18 +1,18 @@
 import { useEffect } from 'react';
 
-import { useGlobalStore } from '../store';
+import { GlobalStore, useGlobalStore } from '../store';
 
 /**
  * 当 Session 水合完毕后才会执行的 useEffect
  * @param fn
  * @param deps
  */
-export const useOnFinishHydrationGlobal = (fn: () => void, deps: any[] = []) => {
+export const useOnFinishHydrationGlobal = (fn: (state: GlobalStore) => void, deps: any[] = []) => {
   useEffect(() => {
     const hasRehydrated = useGlobalStore.persist.hasHydrated();
     // 只有当水合完毕后再开始做操作
     if (!hasRehydrated) return;
 
-    fn();
+    fn(useGlobalStore.getState());
   }, deps);
 };

package/src/locales/index.ts

@@ -1,5 +0,0 @@
-import { createI18nNext } from './create';
-
-const initI18n = createI18nNext();
-
-export default initI18n;