@lobehub/chat 0.95.1 → 0.96.1

package/locales/zh_TW/plugin.json

@@ -2,7 +2,9 @@
   "debug": {
     "arguments": "參數",
     "function_call": "函式呼叫",
-    "response": "回應"
+    "response": "回應",
+    "off": "關閉偵錯",
+    "on": "查看插件呼叫資訊"
   },
   "dev": {
     "confirmDeleteDevPlugin": "您確定要刪除此本機外掛嗎？一旦刪除，將無法復原。",
@@ -89,8 +91,8 @@
     }
   },
   "loading": {
-    "content": "載入中...",
-    "plugin": "外掛執行中..."
+    "plugin": "外掛執行中...",
+    "content": "呼叫插件中..."
   },
   "pluginList": "外掛清單",
   "plugins": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.95.1",
+  "version": "0.96.1",
   "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/(desktop)/features/SessionList.tsx

@@ -7,7 +7,17 @@ import FolderPanel from '@/features/FolderPanel';
 import SessionListContent from '../../features/SessionListContent';
 import Header from './SessionHeader';
 
-const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
+const useStyles = createStyles(({ stylish, css, cx }) =>
+  cx(
+    stylish.noScrollbar,
+    css`
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 0 6px;
+    `,
+  ),
+);
 
 const Sessions = memo(() => {
   const { styles } = useStyles();
@@ -15,7 +25,7 @@ const Sessions = memo(() => {
   return (
     <FolderPanel>
       <Header />
-      <DraggablePanelBody className={styles} style={{ padding: 0 }}>
+      <DraggablePanelBody className={styles}>
         <SessionListContent />
       </DraggablePanelBody>
     </FolderPanel>

package/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx

@@ -130,7 +130,7 @@ const Preview = memo<PreviewProps>(({ withSystemRole, imageType, withBackground,
               </Flexbox>
               {withSystemRole && systemRole && (
                 <div className={styles.role}>
-                  <Markdown>{systemRole}</Markdown>
+                  <Markdown className={styles.markdown}>{systemRole}</Markdown>
                 </div>
               )}
             </div>

package/src/app/chat/features/ChatHeader/ShareButton/style.ts

@@ -31,6 +31,7 @@ export const useStyles = createStyles(({ css, token, stylish, cx }, withBackgrou
     background: ${token.colorBgContainer};
     border-bottom: 1px solid ${token.colorBorder};
   `,
+  markdown: stylish.markdownInChat,
   preview: cx(
     stylish.noScrollbar,
     css`

package/src/app/chat/features/Conversation/ChatList/Extras/Translate.tsx

@@ -12,10 +12,8 @@ import { ChatTranslate } from '@/types/chatMessage';
 
 import BubblesLoading from '../Loading';
 
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    margin-top: 8px;
-  `,
+const useStyles = createStyles(({ stylish }) => ({
+  markdown: stylish.markdownInChat,
 }));
 
 interface TranslateProps extends ChatTranslate {
@@ -24,7 +22,7 @@ interface TranslateProps extends ChatTranslate {
 }
 
 const Translate = memo<TranslateProps>(({ content = '', from, to, id, loading }) => {
-  const { theme } = useStyles();
+  const { theme, styles } = useStyles();
   const { t } = useTranslation('common');
   const [show, setShow] = useState(true);
   const clearTranslate = useSessionStore((s) => s.clearTranslate);
@@ -67,7 +65,11 @@ const Translate = memo<TranslateProps>(({ content = '', from, to, id, loading })
           />
         </Flexbox>
       </Flexbox>
-      {!show ? null : loading && !content ? <BubblesLoading /> : <Markdown>{content}</Markdown>}
+      {!show ? null : loading && !content ? (
+        <BubblesLoading />
+      ) : (
+        <Markdown className={styles.markdown}>{content}</Markdown>
+      )}
     </Flexbox>
   );
 });

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

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

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

@@ -49,7 +49,7 @@ const Inbox = memo(() => {
         active={mobile ? false : activeId === INBOX_SESSION_ID}
         avatar={avatarRender}
         ref={ref}
-        style={{ alignItems: 'center' }}
+        style={{ alignItems: 'center', borderRadius: 8 }}
         title={t('inbox.title')}
       />
     </Link>

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

@@ -18,6 +18,7 @@ const useStyles = createStyles(({ css }) => {
   return {
     container: css`
       position: relative;
+      border-radius: 8px;
     `,
 
     modalRoot: css`
@@ -96,21 +97,23 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   );
 
   return (
-    <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 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>
   );
 }, shallow);
 

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

@@ -1,12 +1,11 @@
 import { createStyles, useResponsive } from 'antd-style';
-import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
 import LazyLoad from 'react-lazy-load';
 
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionHydrated, useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
+import { LobeAgentSession } from '@/types/session';
 
 import AddButton from './AddButton';
 import SessionItem from './Item';
@@ -18,8 +17,10 @@ const useStyles = createStyles(
   `,
 );
 
-const SessionList = memo(() => {
-  const list = useSessionStore(sessionSelectors.sessionList, isEqual);
+interface SessionListProps {
+  dataSource: LobeAgentSession[];
+}
+const SessionList = memo<SessionListProps>(({ dataSource }) => {
   const [activeSession, switchSession] = useSessionStore((s) => [s.activeSession, s.switchSession]);
   const { styles } = useStyles();
   const isInit = useSessionHydrated();
@@ -28,8 +29,8 @@ const SessionList = memo(() => {
 
   return !isInit ? (
     <SkeletonList />
-  ) : list.length > 0 ? (
-    list.map(({ id }) => (
+  ) : dataSource.length > 0 ? (
+    dataSource.map(({ id }) => (
       <LazyLoad className={styles} key={id}>
         <Link
           aria-label={id}

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

@@ -1,28 +1,52 @@
 import { CollapseProps } from 'antd';
-import { memo, useMemo } from 'react';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { preferenceSelectors, useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
 import CollapseGroup from './CollapseGroup';
 import Inbox from './Inbox';
 import SessionList from './List';
 
 const SessionListContent = memo(() => {
-  const { t } = useTranslation('common');
-  const items: CollapseProps['items'] = useMemo(
-    () => [
-      {
-        children: <SessionList />,
-        key: 'sessionList',
-        label: t('sessionList'),
-      },
-    ],
-    [],
-  );
+  const { t } = useTranslation('chat');
+  const unpinnedSessionList = useSessionStore(sessionSelectors.unpinnedSessionList, isEqual);
+  const pinnedList = useSessionStore(sessionSelectors.pinnedSessionList, isEqual);
+  const hasPinnedSessionList = useSessionStore(sessionSelectors.hasPinnedSessionList);
+
+  const [sessionGroupKeys, updatePreference] = useGlobalStore((s) => [
+    preferenceSelectors.sessionGroupKeys(s),
+    s.updatePreference,
+  ]);
+
+  const items = [
+    hasPinnedSessionList && {
+      children: <SessionList dataSource={pinnedList} />,
+      key: 'pinned',
+      label: t('pin'),
+    },
+    {
+      children: <SessionList dataSource={unpinnedSessionList} />,
+      key: 'sessionList',
+      label: t('sessionList'),
+    },
+  ].filter(Boolean) as CollapseProps['items'];
 
   return (
     <>
       <Inbox />
-      <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
+      <CollapseGroup
+        activeKey={sessionGroupKeys}
+        items={items}
+        onChange={(keys) => {
+          const sessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
+
+          updatePreference({ sessionGroupKeys });
+        }}
+      />
     </>
   );
 });

package/src/app/chat/settings/features/SubmitAgentButton/index.tsx

@@ -22,7 +22,6 @@ const SubmitAgentButton = memo(() => {
         title={t('submitAgentModal.tooltips')}
       />
       <Modal
-        centered={false}
         footer={null}
         onCancel={() => setIsModalOpen(false)}
         open={isModalOpen}

package/src/app/market/(desktop)/features/Header.tsx

@@ -1,12 +1,9 @@
-import { ChatHeader, Icon, Logo } from '@lobehub/ui';
-import { Button } from 'antd';
+import { ChatHeader, Logo } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { Bot } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { AGENTS_INDEX_GITHUB } from '@/const/url';
+import ShareAgentButton from '../../features/ShareAgentButton';
 
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`
@@ -17,7 +14,6 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 const Header = memo(() => {
   const { styles } = useStyles();
-  const { t } = useTranslation('market');
 
   return (
     <ChatHeader
@@ -26,14 +22,7 @@ const Header = memo(() => {
           <Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />
         </Link>
       }
-      right={
-        <Button
-          icon={<Icon icon={Bot} />}
-          onClick={() => window.open(AGENTS_INDEX_GITHUB, '__blank')}
-        >
-          {t('submitAgent')}
-        </Button>
-      }
+      right={<ShareAgentButton />}
     />
   );
 });

package/src/app/market/(mobile)/features/Header.tsx

@@ -1,8 +1,10 @@
 import { Logo, MobileNavBar } from '@lobehub/ui';
 import { memo } from 'react';
 
+import ShareAgentButton from '../../features/ShareAgentButton';
+
 const Header = memo(() => {
-  return <MobileNavBar center={<Logo type={'text'} />} />;
+  return <MobileNavBar center={<Logo type={'text'} />} right={<ShareAgentButton mobile />} />;
 });
 
 export default Header;

package/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx

@@ -59,7 +59,11 @@ const AgentModalInner = memo(() => {
         />
       </Flexbox>
       <Flexbox style={{ padding: 16 }}>
-        {tab === InfoTabs.prompt && <Markdown fullFeaturedCodeBlock>{systemRole}</Markdown>}
+        {tab === InfoTabs.prompt && (
+          <Markdown className={styles.markdown} fullFeaturedCodeBlock>
+            {systemRole}
+          </Markdown>
+        )}
         {tab === InfoTabs.comment && <Comment identifier={identifier} />}
       </Flexbox>
     </>

package/src/app/market/features/AgentDetailContent/AgentInfo/style.ts

@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token, prefixCls }) => ({
+export const useStyles = createStyles(({ css, token, prefixCls, stylish }) => ({
   author: css`
     font-size: 12px;
   `,
@@ -27,6 +27,7 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
       flex-direction: column;
     }
   `,
+  markdown: stylish.markdownInChat,
   nav: css`
     padding-top: 4px;
 

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

@@ -0,0 +1,52 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Divider, Tag } from 'antd';
+import { Github, Settings, Share2 } from 'lucide-react';
+import Image from 'next/image';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AGENTS_INDEX_GITHUB } from '@/const/url';
+
+const Inner = memo(() => {
+  const { t } = useTranslation('market');
+  return (
+    <div>
+      <Image
+        alt={'banner'}
+        height={602}
+        src={'/images/market_modal_banner.webp'}
+        style={{ height: 'auto', marginBottom: 24, width: '100%' }}
+        width={1602}
+      />
+      <h3>
+        <Tag color={'cyan'}>{t('guide.func1.tag')}</Tag>
+        <span>{t('guide.func1.title')}</span>
+      </h3>
+      <p>
+        <Icon icon={Settings} />
+        {' - '}
+        {t('guide.func1.desc1')}
+        <br />
+        <Icon icon={Share2} />
+        {' - '}
+        {t('guide.func1.desc2')}
+      </p>
+      <Divider />
+      <h3>
+        <Tag color={'cyan'}>{t('guide.func2.tag')}</Tag>
+        <span>{t('guide.func2.title')}</span>
+      </h3>
+      <p>{t('guide.func2.desc')}</p>
+      <br />
+      <Button
+        icon={<Icon icon={Github} />}
+        onClick={() => window.open(AGENTS_INDEX_GITHUB, '__blank')}
+        type={'primary'}
+      >
+        {t('guide.func2.button')}
+      </Button>
+    </div>
+  );
+});
+
+export default Inner;

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

@@ -0,0 +1,43 @@
+import { ActionIcon, Icon, Modal } from '@lobehub/ui';
+import { Button } from 'antd';
+import { Share2 } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+
+import Inner from './Inner';
+
+const ShareAgentButton = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { t } = useTranslation('market');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const buttonContent = mobile ? (
+    <ActionIcon
+      icon={Share2}
+      onClick={() => setIsModalOpen(true)}
+      size={MOBILE_HEADER_ICON_SIZE}
+      title={t('submitAgent')}
+    />
+  ) : (
+    <Button icon={<Icon icon={Share2} />} onClick={() => setIsModalOpen(true)}>
+      {t('submitAgent')}
+    </Button>
+  );
+
+  return (
+    <>
+      {buttonContent}
+      <Modal
+        footer={null}
+        onCancel={() => setIsModalOpen(false)}
+        open={isModalOpen}
+        title={t('submitAgent')}
+      >
+        <Inner />
+      </Modal>
+    </>
+  );
+});
+
+export default ShareAgentButton;

package/src/features/AgentInfo/index.tsx

@@ -7,7 +7,7 @@ import { Center } from 'react-layout-kit';
 
 import { MetaData } from '@/types/meta';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, stylish }) => ({
   avatar: css`
     flex: none;
   `,
@@ -15,6 +15,7 @@ const useStyles = createStyles(({ css, token }) => ({
     color: ${token.colorTextDescription};
     text-align: center;
   `,
+  markdown: stylish.markdownInChat,
 
   title: css`
     font-size: 20px;
@@ -59,7 +60,7 @@ const AgentInfo = memo<AgentInfoProps>(({ systemRole, style, meta }) => {
       {systemRole && (
         <>
           <Divider style={{ margin: '8px 0' }} />
-          <Markdown>{systemRole}</Markdown>
+          <Markdown className={styles.markdown}>{systemRole}</Markdown>
         </>
       )}
     </Center>

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

@@ -12,12 +12,15 @@ import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 
 import { useStore } from '../store';
 
-const useStyles = createStyles(({ css, token }) => ({
-  md: css`
-    p {
-      color: ${token.colorTextDescription};
-    }
-  `,
+const useStyles = createStyles(({ css, token, cx, stylish }) => ({
+  markdown: cx(
+    stylish.markdownInChat,
+    css`
+      p {
+        color: ${token.colorTextDescription};
+      }
+    `,
+  ),
 }));
 
 const PluginSettings = memo(() => {
@@ -62,7 +65,7 @@ const PluginSettings = memo(() => {
                   type={item.type as any}
                 />
               ),
-              desc: item.desc && <Markdown className={styles.md}>{item.desc}</Markdown>,
+              desc: item.desc && <Markdown className={styles.markdown}>{item.desc}</Markdown>,
             })),
             icon: ToyBrick,
             title: t('settingPlugin.config', { id: pluginHelpers.getPluginTitle(item.meta) }),

package/src/features/PluginSettings/index.tsx

@@ -26,12 +26,15 @@ interface PluginSettingsConfigProps {
   schema: PluginSchema;
 }
 
-const useStyles = createStyles(({ css, token }) => ({
-  md: css`
-    p {
-      color: ${token.colorTextDescription};
-    }
-  `,
+const useStyles = createStyles(({ css, token, stylish, cx }) => ({
+  markdown: cx(
+    stylish.markdownInChat,
+    css`
+      p {
+        color: ${token.colorTextDescription};
+      }
+    `,
+  ),
 }));
 
 const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) => {
@@ -45,7 +48,7 @@ const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) =>
     <Form layout={'vertical'}>
       {items.map((item) => (
         <Form.Item
-          desc={item.desc && <Markdown className={styles.md}>{item.desc as string}</Markdown>}
+          desc={item.desc && <Markdown className={styles.markdown}>{item.desc as string}</Markdown>}
           key={item.label}
           label={item.label}
           tag={item.tag}

package/src/locales/default/chat.ts

@@ -18,12 +18,14 @@ export default {
   newAgent: '新建助手',
   noDescription: '暂无描述',
 
+  pin: '置顶',
+  pinOff: '取消置顶',
   regenerate: '重新生成',
-
   roleAndArchive: '角色与记录',
   searchAgentPlaceholder: '搜索助手和对话...',
   send: '发送',
   sendPlaceholder: '输入聊天内容...',
+  sessionList: '助手列表',
   shareModal: {
     download: '下载截图',
     imageType: '图片格式',

package/src/locales/default/common.ts

@@ -30,7 +30,6 @@ export default {
   feedback: '反馈与建议',
   historyRange: '历史范围',
   import: '导入配置',
-
   lang: {
     'en': '英语',
     'en-US': '英语',
@@ -52,7 +51,6 @@ export default {
   reset: '重置',
   retry: '重试',
   send: '发送',
-  sessionList: '助手列表',
   setting: '设置',
   share: '分享',
   stop: '停止',
@@ -62,7 +60,6 @@ export default {
     setting: '设置',
   },
   temp: '临时',
-
   updateAgent: '更新助理信息',
   upgradeVersion: {
     action: '立即升级',

package/src/locales/default/error.ts

@@ -1,7 +1,7 @@
 export default {
   pluginSettings: {
     desc: '完成以下配置，即可开始使用该插件',
-    title: '{{name}}插件配置',
+    title: '{{name}} 插件配置',
   },
   response: {
     400: '很抱歉，服务器不明白您的请求，请确认您的请求参数是否正确',

package/src/locales/default/market.ts

@@ -1,5 +1,19 @@
 export default {
   addAgent: '添加助手',
+  guide: {
+    func1: {
+      desc1: '在会话窗口中通过右上角设置进入你想提交助手的设置页面;',
+      desc2: '点击右上角提交到助手市场按钮。',
+      tag: '方法一',
+      title: '通过 LobeChat 提交',
+    },
+    func2: {
+      button: '前往 Github 助手仓库',
+      desc: '如果您想将助手添加到索引中，请使用 agent-template.json 或 agent-template-full.json 在 plugins 目录中创建一个条目，编写简短的描述并适当标记，然后创建一个拉取请求。',
+      tag: '方法二',
+      title: '通过 Github 提交',
+    },
+  },
   search: {
     placeholder: '搜索助手名称介绍或关键词...',
   },

package/src/store/global/initialState.ts

@@ -22,6 +22,7 @@ export interface GlobalPreference {
   guide?: Guide;
   inputHeight: number;
   mobileShowTopic?: boolean;
+  sessionGroupKeys: string[];
   sessionsWidth: number;
   showChatSideBar?: boolean;
   showSessionPanel?: boolean;
@@ -49,6 +50,7 @@ export const initialState: GlobalState = {
     guide: {},
     inputHeight: 200,
     mobileShowTopic: false,
+    sessionGroupKeys: ['pinned', 'sessionList'],
     sessionsWidth: 320,
     showChatSideBar: true,
     showSessionPanel: true,