@lobehub/chat 0.54.1 → 0.54.2

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # 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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.54.1",
+  "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/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'),