@lobehub/chat 0.96.0 → 0.96.2

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

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { memo, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useStyles } from '@/app/chat/features/SessionListContent/List/Item';
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
@@ -14,6 +15,7 @@ const { Item } = List;
 
 const Inbox = memo(() => {
   const ref = useRef(null);
+  const { styles } = useStyles();
   const isHovering = useHover(ref);
   const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
@@ -48,8 +50,8 @@ const Inbox = memo(() => {
       <Item
         active={mobile ? false : activeId === INBOX_SESSION_ID}
         avatar={avatarRender}
+        className={styles.container}
         ref={ref}
-        style={{ alignItems: 'center', borderRadius: 8 }}
         title={t('inbox.title')}
       />
     </Link>

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

@@ -14,15 +14,14 @@ import Actions from './Actions';
 
 const { Item } = List;
 
-const useStyles = createStyles(({ css }) => {
+export const useStyles = createStyles(({ css, token, responsive }) => {
   return {
     container: css`
       position: relative;
-      border-radius: 8px;
-    `,
-
-    modalRoot: css`
-      z-index: 2000;
+      border-radius: ${token.borderRadius}px;
+      ${responsive.mobile} {
+        border-radius: 0;
+      }
     `,
   };
 });

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,53 @@
+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 MobilePadding from '@/components/MobilePadding';
+import { AGENTS_INDEX_GITHUB } from '@/const/url';
+
+const Inner = memo(() => {
+  const { t } = useTranslation('market');
+  return (
+    <MobilePadding>
+      <Image
+        alt={'banner'}
+        height={602}
+        src={'/images/banner_market_modal.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>
+    </MobilePadding>
+  );
+});
+
+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/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/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/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/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/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') },*/}

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/common.ts

@@ -30,7 +30,6 @@ export default {
   feedback: '反馈与建议',
   historyRange: '历史范围',
   import: '导入配置',
-
   lang: {
     'en': '英语',
     'en-US': '英语',
@@ -45,7 +44,6 @@ export default {
   noDescription: '暂无描述',
   ok: '确定',
   password: '密码',
-
   pin: '置顶',
   pinOff: '取消置顶',
   regenerate: '重新生成',

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/.github/workflows/issue-remove-inactive.yml

@@ -1,26 +0,0 @@
-name: Issue Remove Inactive
-
-on:
-  issues:
-    types: [edited]
-  issue_comment:
-    types: [created, edited]
-
-permissions:
-  contents: read
-
-jobs:
-  issue-remove-inactive:
-    permissions:
-      issues: write # for actions-cool/issues-helper to update issues
-      pull-requests: write # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
-    steps:
-      - name: remove inactive
-        if: github.event.issue.state == 'open' && github.actor == github.event.issue.user.login
-        uses: actions-cool/issues-helper@v3
-        with:
-          actions: 'remove-labels'
-          token: ${{ secrets.GH_TOKEN }}
-          issue-number: ${{ github.event.issue.number }}
-          labels: 'Inactive'

package/.github/workflows/pr-welcome.yml

@@ -1,27 +0,0 @@
-name: PR Welcome
-
-on:
-  pull_request_target:
-    types:
-      - closed
-
-jobs:
-  if_merged:
-    name: Check merged and add comment
-    if: github.event.pull_request.merged == true
-    permissions:
-      issues: write # for actions-cool/issues-helper to update issues
-      pull-requests: write # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions-cool/pr-welcome@main
-        with:
-          token: ${{ secrets.GH_TOKEN }}
-          comment: |
-            ❤️ Great PR @${{ github.event.pull_request.user.login }} ❤️
-
-            The growth of project is inseparable from user feedback and contribution, thanks for your contribution!
-
-            项目的成长离不开用户反馈和贡献，感谢您的贡献!
-          emoji: 'hooray'
-          pr-emoji: '+1, heart'