@lobehub/chat 0.96.1 → 0.96.3

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.96.3](https://github.com/lobehub/lobe-chat/compare/v0.96.2...v0.96.3)
+
+<sup>Released on **2023-10-28**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix SessionList on mobile.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix SessionList on mobile ([e7e7b80](https://github.com/lobehub/lobe-chat/commit/e7e7b80))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.96.2](https://github.com/lobehub/lobe-chat/compare/v0.96.1...v0.96.2)
+
+<sup>Released on **2023-10-28**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix some styles and make updates to various files.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix some styles and make updates to various files ([44a5f0a](https://github.com/lobehub/lobe-chat/commit/44a5f0a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.96.1](https://github.com/lobehub/lobe-chat/compare/v0.96.0...v0.96.1)
 
 <sup>Released on **2023-10-28**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.96.1",
+  "version": "0.96.3",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",

package/src/app/chat/features/SessionListContent/CollapseGroup/index.tsx

@@ -4,12 +4,16 @@ import { createStyles } from 'antd-style';
 import { ChevronDown } from 'lucide-react';
 import { memo } from 'react';
 
-const useStyles = createStyles(({ css, prefixCls, token }) => ({
+const useStyles = createStyles(({ css, prefixCls, token, responsive }) => ({
   container: css`
     .${prefixCls}-collapse-header {
-      padding-inline: 16px !important;
+      padding-inline: 16px 10px !important;
       color: ${token.colorTextDescription} !important;
-      border-radius: 8px !important;
+      border-radius: ${token.borderRadius}px !important;
+
+      ${responsive.mobile} {
+        border-radius: 0 !important;
+      }
 
       &:hover {
         color: ${token.colorText} !important;

package/src/app/chat/features/SessionListContent/Inbox/index.tsx

@@ -1,8 +1,6 @@
-import { Avatar, List } from '@lobehub/ui';
-import { useHover } from 'ahooks';
 import { useResponsive } from 'antd-style';
 import Link from 'next/link';
-import { memo, useMemo, useRef } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
@@ -10,11 +8,9 @@ import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionStore } from '@/store/session';
 
-const { Item } = List;
+import ListItem from '../ListItem';
 
 const Inbox = memo(() => {
-  const ref = useRef(null);
-  const isHovering = useHover(ref);
   const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
   const [activeId, activeSession, switchSession] = useSessionStore((s) => [
@@ -23,18 +19,6 @@ const Inbox = memo(() => {
     s.switchSession,
   ]);
 
-  const avatarRender = useMemo(
-    () => (
-      <Avatar
-        animation={isHovering}
-        avatar={DEFAULT_INBOX_AVATAR}
-        size={46}
-        style={{ padding: 3 }}
-      />
-    ),
-    [isHovering],
-  );
-
   return (
     <Link
       aria-label={t('inbox.title')}
@@ -45,11 +29,9 @@ const Inbox = memo(() => {
         else activeSession(INBOX_SESSION_ID);
       }}
     >
-      <Item
-        active={mobile ? false : activeId === INBOX_SESSION_ID}
-        avatar={avatarRender}
-        ref={ref}
-        style={{ alignItems: 'center', borderRadius: 8 }}
+      <ListItem
+        active={activeId === INBOX_SESSION_ID}
+        avatar={DEFAULT_INBOX_AVATAR}
         title={t('inbox.title')}
       />
     </Link>

package/src/app/chat/features/SessionListContent/List/Item/index.tsx

@@ -1,8 +1,6 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { Avatar, List, Tag } from '@lobehub/ui';
-import { useHover } from 'ahooks';
-import { createStyles, useResponsive } from 'antd-style';
-import { memo, useMemo, useRef, useState } from 'react';
+import { Tag } from '@lobehub/ui';
+import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
@@ -10,33 +8,16 @@ import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
+import ListItem from '../../ListItem';
 import Actions from './Actions';
 
-const { Item } = List;
-
-const useStyles = createStyles(({ css }) => {
-  return {
-    container: css`
-      position: relative;
-      border-radius: 8px;
-    `,
-
-    modalRoot: css`
-      z-index: 2000;
-    `,
-  };
-});
-
 interface SessionItemProps {
   id: string;
 }
 
 const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  const isHovering = useHover(ref);
-  const { mobile } = useResponsive();
-  const { styles } = useStyles();
+
   const [defaultModel] = useGlobalStore((s) => [settingsSelectors.defaultAgentConfig(s).model]);
 
   const [
@@ -73,19 +54,6 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
 
   const actions = useMemo(() => <Actions id={id} setOpen={setOpen} />, [id]);
 
-  const avatarRender = useMemo(
-    () => (
-      <Avatar
-        animation={isHovering}
-        avatar={avatar}
-        background={avatarBackground}
-        shape="circle"
-        size={46}
-      />
-    ),
-    [isHovering, avatar, avatarBackground],
-  );
-
   const addon = useMemo(
     () =>
       !showModel ? undefined : (
@@ -97,23 +65,19 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   );
 
   return (
-    <Flexbox paddingBlock={1}>
-      <Item
-        actions={actions}
-        // needn't active state in mobile
-        active={mobile ? false : active}
-        addon={addon}
-        avatar={avatarRender}
-        className={styles.container}
-        date={updateAt}
-        description={description || systemRole}
-        loading={loading}
-        pin={pin}
-        ref={ref}
-        showAction={open || isHovering}
-        title={title}
-      />
-    </Flexbox>
+    <ListItem
+      actions={actions}
+      active={active}
+      addon={addon}
+      avatar={avatar}
+      avatarBackground={avatarBackground}
+      date={updateAt}
+      description={description || systemRole}
+      loading={loading}
+      pin={pin}
+      showAction={open}
+      title={title}
+    />
   );
 }, shallow);
 

package/src/app/chat/features/SessionListContent/ListItem/index.tsx

@@ -0,0 +1,61 @@
+import { Avatar, List, ListItemProps } from '@lobehub/ui';
+import { useHover } from 'ahooks';
+import { createStyles, useResponsive } from 'antd-style';
+import { memo, useMemo, useRef } from 'react';
+
+const { Item } = List;
+
+const useStyles = createStyles(({ css, token, responsive }) => {
+  return {
+    container: css`
+      position: relative;
+
+      margin-block: 2px;
+      padding-right: 16px;
+      padding-left: 8px;
+
+      border-radius: ${token.borderRadius}px;
+      ${responsive.mobile} {
+        margin-block: 0;
+        padding-left: 12px;
+        border-radius: 0;
+      }
+    `,
+  };
+});
+
+const ListItem = memo<ListItemProps & { avatar: string; avatarBackground?: string }>(
+  ({ avatar, avatarBackground, active, showAction, actions, ...props }) => {
+    const ref = useRef(null);
+    const isHovering = useHover(ref);
+    const { mobile } = useResponsive();
+    const { styles } = useStyles();
+
+    const avatarRender = useMemo(
+      () => (
+        <Avatar
+          animation={isHovering}
+          avatar={avatar}
+          background={avatarBackground}
+          shape="circle"
+          size={46}
+        />
+      ),
+      [isHovering, avatar, avatarBackground],
+    );
+
+    return (
+      <Item
+        actions={actions}
+        active={mobile ? false : active}
+        avatar={avatarRender}
+        className={styles.container}
+        ref={ref}
+        showAction={actions && (isHovering || showAction)}
+        {...(props as any)}
+      />
+    );
+  },
+);
+
+export default ListItem;

package/src/app/market/features/ShareAgentButton/Inner.tsx

@@ -5,16 +5,17 @@ import Image from 'next/image';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MobilePadding from '@/components/MobilePadding';
 import { AGENTS_INDEX_GITHUB } from '@/const/url';
 
 const Inner = memo(() => {
   const { t } = useTranslation('market');
   return (
-    <div>
+    <MobilePadding>
       <Image
         alt={'banner'}
         height={602}
-        src={'/images/market_modal_banner.webp'}
+        src={'/images/banner_market_modal.webp'}
         style={{ height: 'auto', marginBottom: 24, width: '100%' }}
         width={1602}
       />
@@ -45,7 +46,7 @@ const Inner = memo(() => {
       >
         {t('guide.func2.button')}
       </Button>
-    </div>
+    </MobilePadding>
   );
 });
 

package/src/app/settings/features/SideBar/Item.tsx

@@ -5,10 +5,15 @@ import { CSSProperties, ReactNode, memo } from 'react';
 
 const { Item } = List;
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
+    position: relative;
     padding-top: 20px;
     padding-bottom: 20px;
+    border-radius: ${token.borderRadius}px;
+    ${responsive.mobile} {
+      border-radius: 0;
+    }
   `,
 }));
 

package/src/app/settings/features/SideBar/index.tsx

@@ -31,7 +31,9 @@ const SideBar = memo(() => {
           </div>
         </Flexbox>
         <UpgradeAlert />
-        <List />
+        <Flexbox gap={2} style={{ paddingInline: 6 }}>
+          <List />
+        </Flexbox>
       </DraggablePanelBody>
     </FolderPanel>
   );

package/src/const/url.ts

@@ -10,6 +10,7 @@ import { INBOX_SESSION_ID } from './session';
 export const GITHUB = pkg.homepage;
 export const CHANGELOG = urlJoin(GITHUB, 'blob/master/CHANGELOG.md');
 export const WIKI = urlJoin(GITHUB, 'wiki');
+export const WIKI_PLUGIN_GUIDE = urlJoin(WIKI, 'Plugin-Development');
 export const ABOUT = pkg.homepage;
 export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';

package/src/features/AgentSetting/AgentPlugin/MarketList.tsx

@@ -181,7 +181,17 @@ const MarketList = memo(() => {
           {
             children: isEmpty ? loadingList : [...deprecatedList, ...customList, ...list],
             extra: (
-              <Flexbox align={'center'} gap={8} horizontal>
+              <Space.Compact style={{ width: 'auto' }}>
+                <Button
+                  icon={<Icon icon={LucideBlocks} />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setModal(true);
+                  }}
+                  size={'small'}
+                >
+                  {t('settingPlugin.addTooltip')}
+                </Button>
                 {hasDeprecated ? (
                   <Tooltip title={t('settingPlugin.clearDeprecated')}>
                     <Button
@@ -193,34 +203,20 @@ const MarketList = memo(() => {
                         }
                       }}
                       size={'small'}
-                      type={'text'}
                     />
                   </Tooltip>
                 ) : null}
-
-                <Space.Compact style={{ width: 'auto' }}>
-                  <Tooltip title={t('settingPlugin.addTooltip')}>
-                    <Button
-                      icon={<Icon icon={LucideBlocks} />}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setModal(true);
-                      }}
-                      size={'small'}
-                    />
-                  </Tooltip>
-                  <Tooltip title={t('settingPlugin.settings')}>
-                    <Button
-                      icon={<Icon icon={LucideSettings} />}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setShowSettings(true);
-                      }}
-                      size={'small'}
-                    />
-                  </Tooltip>
-                </Space.Compact>
-              </Flexbox>
+                <Tooltip title={t('settingPlugin.settings')}>
+                  <Button
+                    icon={<Icon icon={LucideSettings} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowSettings(true);
+                    }}
+                    size={'small'}
+                  />
+                </Tooltip>
+              </Space.Compact>
             ),
             icon: LucideStore,
             title: t('settingPlugin.title'),

package/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import MobilePadding from '@/components/MobilePadding';
-import { PLUGINS_INDEX_URL } from '@/const/url';
+import { PLUGINS_INDEX_URL, WIKI_PLUGIN_GUIDE } from '@/const/url';
 
 interface MarketSettingModalProps {
   onOpenChange: (open: boolean) => void;
@@ -34,7 +34,14 @@ const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }
                       style={{ width: '100%' }}
                     />
                   ),
-                  desc: t('settings.modalDesc'),
+                  desc: (
+                    <>
+                      {t('dev.modalDesc')}
+                      <a href={WIKI_PLUGIN_GUIDE} rel="noreferrer" target={'_blank'}>
+                        {WIKI_PLUGIN_GUIDE}
+                      </a>
+                    </>
+                  ),
                   label: t('settings.indexUrl.title'),
                 },
               ],

package/src/features/PluginDevModal/index.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import MobilePadding from '@/components/MobilePadding';
+import { WIKI_PLUGIN_GUIDE } from '@/const/url';
 import { CustomPlugin } from '@/types/plugin';
 
 import ManifestForm from './ManifestForm';
@@ -102,7 +103,18 @@ const DevModal = memo<DevModalProps>(
         >
           <Flexbox gap={mobile ? 0 : 16}>
             <MobilePadding bottom={0} gap={16}>
-              <Alert message={t('dev.modalDesc')} showIcon type={'info'} />
+              <Alert
+                message={
+                  <>
+                    {t('dev.modalDesc')}
+                    <a href={WIKI_PLUGIN_GUIDE} rel="noreferrer" target={'_blank'}>
+                      {WIKI_PLUGIN_GUIDE}
+                    </a>
+                  </>
+                }
+                showIcon
+                type={'info'}
+              />
               {/*<Tabs*/}
               {/*  items={[*/}
               {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}