@lobehub/chat 0.53.0 → 0.54.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.54.0](https://github.com/lobehub/lobe-chat/compare/v0.53.0...v0.54.0)
+
+<sup>Released on **2023-08-15**</sup>
+
+#### ✨ Features
+
+- **misc**: Add new features and improve user interface and functionality.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add new features and improve user interface and functionality ([1543bd1](https://github.com/lobehub/lobe-chat/commit/1543bd1))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.53.0](https://github.com/lobehub/lobe-chat/compare/v0.52.1...v0.53.0)
 
 <sup>Released on **2023-08-15**</sup>

package/locales/en_US/setting.json

@@ -72,7 +72,7 @@
     },
     "inputTemplate": {
       "desc": "The latest user message will be filled into this template",
-      "placeholder": "Enter the input template, {text} will be replaced with real-time input information",
+      "placeholder": "{{text}} will be replaced with real-time input information",
       "title": "User Input Preprocessing"
     },
     "title": "Chat Settings"

package/locales/zh_CN/setting.json

@@ -72,7 +72,7 @@
     },
     "inputTemplate": {
       "desc": "用户最新的一条消息会填充到此模板",
-      "placeholder": "输入预处理模版，{text} 将替换为实时输入信息",
+      "placeholder": "预处理模版 {{text}} 将替换为实时输入信息",
       "title": "用户输入预处理"
     },
     "title": "聊天设置"

package/package.json

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

package/src/components/SelectWithImg/index.tsx

@@ -0,0 +1,77 @@
+import { Icon, IconProps } from '@lobehub/ui';
+import { SelectProps } from 'antd';
+import { type CSSProperties, ReactNode, memo, useEffect, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './styles';
+
+export interface SelectWithImgOptionItem {
+  icon?: IconProps['icon'];
+  img: string;
+  label: ReactNode;
+  value: string;
+}
+
+export interface SelectWithImgProps {
+  className?: string;
+  defaultValue?: SelectProps['defaultValue'];
+  imgClassName?: string;
+  imgStyle?: CSSProperties;
+  onChange?: (value: this['value']) => void;
+  options?: SelectWithImgOptionItem[];
+  size?: number;
+  style?: CSSProperties;
+  value?: SelectProps['value'];
+}
+
+const SelectWithImg = memo<SelectWithImgProps>(
+  ({
+    className,
+    style,
+    value,
+    defaultValue,
+    onChange,
+    options,
+    size = 100,
+    imgStyle,
+    imgClassName,
+  }) => {
+    const [currentValue, setCurrentValue] = useState(value || defaultValue);
+    const { styles, cx } = useStyles();
+
+    useEffect(() => {
+      onChange?.(currentValue);
+    }, [currentValue]);
+
+    return (
+      <Flexbox className={className} gap={8} horizontal style={style}>
+        {options?.map((item) => {
+          const isActive = value ? item.value === value : item.value === currentValue;
+          return (
+            <Flexbox
+              align={'center'}
+              className={cx(styles.container, isActive && styles.active)}
+              gap={4}
+              key={item.value}
+              onClick={() => setCurrentValue(item.value)}
+            >
+              <img
+                alt={item.value}
+                className={imgClassName}
+                src={item.img}
+                style={imgStyle}
+                width={size}
+              />
+              <Flexbox align={'center'} gap={4} horizontal>
+                {item.icon && <Icon icon={item.icon} />}
+                {item.label}
+              </Flexbox>
+            </Flexbox>
+          );
+        })}
+      </Flexbox>
+    );
+  },
+);
+
+export default SelectWithImg;

package/src/components/SelectWithImg/styles.ts

@@ -0,0 +1,27 @@
+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};
+    }
+  `,
+  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};
+
+      &:hover {
+        border-color: ${token.colorText};
+        box-shadow: 0 0 0 2px ${token.colorText};
+      }
+    }
+  `,
+}));

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

@@ -1,11 +1,12 @@
 import { Form, ItemGroup, SliderWithInput } from '@lobehub/ui';
-import { ConfigProvider, Input, Segmented, Select, Switch } from 'antd';
-import { useTheme } from 'antd-style';
+import { ConfigProvider, Input, Select, Switch } from 'antd';
+import { useTheme, useThemeMode } from 'antd-style';
 import { debounce } from 'lodash-es';
-import { BrainCog, MessagesSquare } from 'lucide-react';
+import { BrainCog, LayoutList, MessageSquare, MessagesSquare } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import SelectWithImg from '@/components/SelectWithImg';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LanguageModel } from '@/types/llm';
@@ -26,17 +27,36 @@ export interface AgentConfigProps {
 const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
   const theme = useTheme();
+  const { isDarkMode } = useThemeMode();
 
   const chat: SettingItemGroup = useMemo(
     () => ({
       children: [
         {
           children: (
-            <Segmented
+            <SelectWithImg
+              imgStyle={{
+                background: `linear-gradient(
+                  to bottom,
+                ${isDarkMode ? theme.colorBgElevated : theme.colorBgLayout},
+                ${theme.colorBgContainer}
+                )`,
+              }}
               options={[
-                { label: t('settingChat.chatStyleType.type.chat'), value: 'chat' },
-                { label: t('settingChat.chatStyleType.type.docs'), value: 'docs' },
+                {
+                  icon: MessagesSquare,
+                  img: `/images/chatmode_chat_${isDarkMode ? 'dark' : 'light'}.webp`,
+                  label: t('settingChat.chatStyleType.type.chat'),
+                  value: 'chat',
+                },
+                {
+                  icon: LayoutList,
+                  img: `/images/chatmode_docs_${isDarkMode ? 'dark' : 'light'}.webp`,
+                  label: t('settingChat.chatStyleType.type.docs'),
+                  value: 'docs',
+                },
               ]}
+              size={144}
             />
           ),
           label: t('settingChat.chatStyleType.title'),
@@ -80,7 +100,7 @@ const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
           name: 'compressThreshold',
         },
       ],
-      icon: MessagesSquare,
+      icon: MessageSquare,
       title: t('settingChat.title'),
     }),
     [config],

package/src/locales/default/setting.ts

@@ -72,7 +72,7 @@ export default {
     },
     inputTemplate: {
       desc: '用户最新的一条消息会填充到此模板',
-      placeholder: '输入预处理模版，{text} 将替换为实时输入信息',
+      placeholder: '预处理模版 {{text}} 将替换为实时输入信息',
       title: '用户输入预处理',
     },
     title: '聊天设置',

package/src/pages/chat/SessionList/CollapseGroup.tsx

@@ -16,6 +16,9 @@ const useStyles = createStyles(({ css, prefixCls, token }) => ({
         background: ${token.colorFillTertiary};
       }
     }
+    .${prefixCls}-collapse-content {
+      border-radius: 0 !important;
+    }
     .${prefixCls}-collapse-content-box {
       padding: 0 !important;
     }

package/src/pages/chat/features/Conversation/ChatList/Error/style.tsx

@@ -35,7 +35,7 @@ export const FormAction = memo<{
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>
-      <Avatar avatar={avatar} background={theme.colorText} gap={12} size={80} />
+      <Avatar avatar={avatar} background={theme.colorFillContent} gap={12} size={80} />
       <Flexbox style={{ fontSize: 20 }}>{title}</Flexbox>
       <Flexbox className={styles.desc}>{description}</Flexbox>
       {children}

package/src/pages/settings/Header.tsx

@@ -1,16 +1,14 @@
-import { ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
+import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import pkg from '@/../package.json';
-
 const Header = memo(() => {
   const { t } = useTranslation('setting');
 
   return (
     <ChatHeader
-      left={<ChatHeaderTitle tag={<Tag>{`v${pkg.version}`}</Tag>} title={t('header.global')} />}
+      left={<ChatHeaderTitle title={t('header.global')} />}
       onBackClick={() => Router.back()}
       showBackButton
     />

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

@@ -1,12 +1,13 @@
-import { Form, type ItemGroup, SliderWithInput, ThemeSwitch } from '@lobehub/ui';
+import { Form, type ItemGroup, SliderWithInput } from '@lobehub/ui';
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { changeLanguage } from 'i18next';
 import { debounce } from 'lodash-es';
-import { AppWindow, Palette, Webhook } from 'lucide-react';
+import { AppWindow, Monitor, Moon, Palette, Sun, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import SelectWithImg from '@/components/SelectWithImg';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
@@ -76,18 +77,33 @@ const Common = memo(() => {
         },
         {
           children: (
-            <ThemeSwitch
-              labels={{
-                auto: t('settingTheme.themeMode.auto'),
-                dark: t('settingTheme.themeMode.dark'),
-                light: t('settingTheme.themeMode.light'),
-              }}
-              onThemeSwitch={setThemeMode}
-              themeMode={settings.themeMode}
-              type={'select'}
+            <SelectWithImg
+              defaultValue={settings.themeMode}
+              onChange={setThemeMode}
+              options={[
+                {
+                  icon: Sun,
+                  img: '/images/theme_light.webp',
+                  label: t('settingTheme.themeMode.light'),
+                  value: 'light',
+                },
+                {
+                  icon: Moon,
+                  img: '/images/theme_dark.webp',
+                  label: t('settingTheme.themeMode.dark'),
+                  value: 'dark',
+                },
+                {
+                  icon: Monitor,
+                  img: '/images/theme_auto.webp',
+                  label: t('settingTheme.themeMode.auto'),
+                  value: 'auto',
+                },
+              ]}
             />
           ),
           label: t('settingTheme.themeMode.title'),
+          minWidth: undefined,
         },
         {
           children: (

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

@@ -1,46 +1,97 @@
-import { Segmented } from 'antd';
+import { GridBackground, Icon, Logo, TabsNav } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { PackageCheck } from 'lucide-react';
+import { rgba } from 'polished';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import pkg from '@/../package.json';
 
 import Agent from './Agent';
 import Common from './Common';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  background: css`
+    position: absolute;
+    bottom: -10%;
+    left: 0;
+    width: 100%;
+  `,
+  logo: css`
+    position: absolute;
+    top: 50%;
+    left: 32px;
+    transform: translateY(-50%);
+  `,
   tabs: css`
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    max-width: 1024px;
+    height: 160px;
     padding: 4px;
+
+    background: radial-gradient(
+      120% 120% at 20% 100%,
+      ${isDarkMode ? rgba(token.colorBgContainer, 0.5) : token.colorBgContainer} 32%,
+      ${isDarkMode ? token.colorPrimaryBgHover : rgba(token.colorPrimaryBgHover, 0.3)} 50%,
+      ${isDarkMode ? token.colorPrimaryHover : rgba(token.colorPrimaryHover, 0.3)} 100%
+    );
     border: 1px solid ${token.colorBorderSecondary};
     border-radius: ${token.borderRadiusLG}px;
+  `,
+  tag: css`
+    position: absolute;
+    top: 6px;
+    right: 12px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    color: ${isDarkMode ? token.colorPrimaryBg : token.colorPrimaryActive};
 
-    &:hover {
-      border-color: ${token.colorBorder};
-    }
+    opacity: 0.5;
   `,
 }));
 
 enum Tabs {
-  common,
-  agent,
+  agent = 'agent',
+  common = 'common',
 }
 
 const Settings = memo(() => {
   const [tab, setTab] = useState<Tabs>(Tabs.common);
-  const { styles } = useStyles();
+  const { styles, theme } = useStyles();
   const { t } = useTranslation('setting');
 
   return (
     <Center gap={16} width={'100%'}>
-      <div className={styles.tabs}>
-        <Segmented
-          onChange={(e) => setTab(e as Tabs)}
-          options={[
-            { label: t('tab.common'), value: Tabs.common },
-            { label: t('tab.agent'), value: Tabs.agent },
+      <Flexbox align={'flex-end'} className={styles.tabs} horizontal justify={'center'}>
+        <GridBackground
+          animation
+          className={styles.background}
+          colorBack={theme.colorFillSecondary}
+          colorFront={theme.colorPrimary}
+          random
+        />
+        <TabsNav
+          activeKey={tab}
+          items={[
+            { key: Tabs.common, label: t('tab.common') },
+            { key: Tabs.agent, label: t('tab.agent') },
           ]}
-          value={tab}
+          onChange={(e) => setTab(e as Tabs)}
         />
-      </div>
+        <div className={styles.logo}>
+          <Logo extra={'Chat'} type={'text'} />
+        </div>
+        <Flexbox align={'center'} className={styles.tag} gap={4} horizontal>
+          <Icon icon={PackageCheck} />
+          <div>{`${pkg.version}`}</div>
+        </Flexbox>
+      </Flexbox>
       {tab === Tabs.common && <Common />}
       {tab === Tabs.agent && <Agent />}
     </Center>