@lobehub/chat 0.116.0 → 0.116.2

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.116.2](https://github.com/lobehub/lobe-chat/compare/v0.116.1...v0.116.2)
+
+<sup>Released on **2023-12-26**</sup>
+
+#### 💄 Styles
+
+- **misc**: Update Modal style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Update Modal style ([ac7d309](https://github.com/lobehub/lobe-chat/commit/ac7d309))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.116.1](https://github.com/lobehub/lobe-chat/compare/v0.116.0...v0.116.1)
+
+<sup>Released on **2023-12-26**</sup>
+
+#### 💄 Styles
+
+- **misc**: Support slider and select plugin setting render.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Support slider and select plugin setting render, closes [#819](https://github.com/lobehub/lobe-chat/issues/819) ([3190b44](https://github.com/lobehub/lobe-chat/commit/3190b44))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.116.0](https://github.com/lobehub/lobe-chat/compare/v0.115.13...v0.116.0)
 
 <sup>Released on **2023-12-26**</sup>

package/README.md

@@ -37,6 +37,7 @@ Supports one-click free deployment of your private ChatGPT/LLM web application.
 [![][share-reddit-shield]][share-reddit-link]
 [![][share-weibo-shield]][share-weibo-link]
 [![][share-mastodon-shield]][share-mastodon-link]
+[![][share-linkedin-shield]][share-linkedin-link]
 
 <sup>Pioneering the new age of thinking and creating. Built for you, the Super Individual.</sup>
 
@@ -626,6 +627,8 @@ This project is [MIT](./LICENSE) licensed.
 [pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
 [pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
 [profile-link]: https://github.com/lobehub
+[share-linkedin-link]: https://linkedin.com/feed
+[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black&logo=linkedin&logoColor=white&style=flat-square
 [share-mastodon-link]: https://mastodon.social/share?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source,%20extensible%20(Function%20Calling),%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT/LLM%20web%20application.%20https://github.com/lobehub/lobe-chat%20#chatbot%20#chatGPT%20#openAI
 [share-mastodon-shield]: https://img.shields.io/badge/-share%20on%20mastodon-black?labelColor=black&logo=mastodon&logoColor=white&style=flat-square
 [share-reddit-link]: https://www.reddit.com/submit?title=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.116.0",
+  "version": "0.116.2",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -140,6 +140,7 @@
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
+    "@types/json-schema": "^7.0.15",
     "@types/lodash": "^4",
     "@types/lodash-es": "^4",
     "@types/node": "^20",

package/src/app/chat/(mobile)/features/TopicList.tsx

@@ -15,7 +15,12 @@ const Topics = memo(() => {
   const { t } = useTranslation('chat');
 
   return (
-    <Modal onCancel={() => toggleConfig(false)} open={showAgentSettings} title={t('topic.title')}>
+    <Modal
+      allowFullscreen
+      onCancel={() => toggleConfig(false)}
+      open={showAgentSettings}
+      title={t('topic.title')}
+    >
       <TopicListContent mobile />
     </Modal>
   );

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

@@ -1,9 +1,7 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { Avatar, ChatHeaderTitle, Logo, Markdown, Tag } from '@lobehub/ui';
-import { Button, SegmentedProps } from 'antd';
-import dayjs from 'dayjs';
-import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
-import { memo, useCallback, useState } from 'react';
+import { SegmentedProps } from 'antd';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -14,6 +12,7 @@ import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 import PluginTag from '../../ChatHeader/PluginTag';
 import { useStyles } from './style';
+import { FieldType } from './type';
 
 export enum ImageType {
   JPG = 'jpg',
@@ -41,75 +40,25 @@ export const imageTypeOptions: SegmentedProps['options'] = [
   },
 ];
 
-interface PreviewProps {
-  imageType: ImageType;
-  withBackground: boolean;
-  withFooter: boolean;
-  withSystemRole: boolean;
-}
-
-const Preview = memo<PreviewProps>(({ withSystemRole, imageType, withBackground, withFooter }) => {
-  const [loading, setLoading] = useState(false);
-  const [isInbox, title, description, avatar, backgroundColor, model, plugins, systemRole] =
-    useSessionStore((s) => [
-      sessionSelectors.isInboxSession(s),
-      agentSelectors.currentAgentTitle(s),
-      agentSelectors.currentAgentDescription(s),
-      agentSelectors.currentAgentAvatar(s),
-      agentSelectors.currentAgentBackgroundColor(s),
-      agentSelectors.currentAgentModel(s),
-      agentSelectors.currentAgentPlugins(s),
-      agentSelectors.currentAgentSystemRole(s),
-    ]);
-  const { t } = useTranslation('chat');
-  const { styles } = useStyles(withBackground);
-
-  const displayTitle = isInbox ? t('inbox.title') : title;
-  const displayDesc = isInbox ? t('inbox.desc') : description;
+const Preview = memo<FieldType & { title?: string }>(
+  ({ title, withSystemRole, withBackground, withFooter }) => {
+    const [isInbox, description, avatar, backgroundColor, model, plugins, systemRole] =
+      useSessionStore((s) => [
+        sessionSelectors.isInboxSession(s),
+        agentSelectors.currentAgentDescription(s),
+        agentSelectors.currentAgentAvatar(s),
+        agentSelectors.currentAgentBackgroundColor(s),
+        agentSelectors.currentAgentModel(s),
+        agentSelectors.currentAgentPlugins(s),
+        agentSelectors.currentAgentSystemRole(s),
+      ]);
+    const { t } = useTranslation('chat');
+    const { styles } = useStyles(withBackground);
 
-  const handleDownload = useCallback(async () => {
-    setLoading(true);
-    try {
-      let screenshotFn: any;
-      switch (imageType) {
-        case ImageType.JPG: {
-          screenshotFn = domToJpeg;
-          break;
-        }
-        case ImageType.PNG: {
-          screenshotFn = domToPng;
-          break;
-        }
-        case ImageType.SVG: {
-          screenshotFn = domToSvg;
-          break;
-        }
-        case ImageType.WEBP: {
-          screenshotFn = domToWebp;
-          break;
-        }
-      }
+    const displayTitle = isInbox ? t('inbox.title') : title;
+    const displayDesc = isInbox ? t('inbox.desc') : description;
 
-      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement, {
-        features: {
-          // 不启用移除控制符，否则会导致 safari emoji 报错
-          removeControlCharacter: false,
-        },
-        scale: 2,
-      });
-      const link = document.createElement('a');
-      link.download = `LobeChat_${title}_${dayjs().format('YYYY-MM-DD')}.${imageType}`;
-      link.href = dataUrl;
-      link.click();
-      setLoading(false);
-    } catch (error) {
-      console.error('Failed to download image', error);
-      setLoading(false);
-    }
-  }, [imageType, title]);
-
-  return (
-    <>
+    return (
       <div className={styles.preview}>
         <div className={withBackground ? styles.background : undefined} id={'preview'}>
           <Flexbox className={styles.container} gap={16}>
@@ -145,11 +94,8 @@ const Preview = memo<PreviewProps>(({ withSystemRole, imageType, withBackground,
           </Flexbox>
         </div>
       </div>
-      <Button block loading={loading} onClick={handleDownload} size={'large'} type={'primary'}>
-        {t('shareModal.download')}
-      </Button>
-    </>
-  );
-});
+    );
+  },
+);
 
 export default Preview;

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

@@ -0,0 +1,141 @@
+import { Form, type FormItemProps, Modal, type ModalProps } from '@lobehub/ui';
+import { Button, Segmented, SegmentedProps, Switch } from 'antd';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useScreenshot } from '@/app/chat/features/ChatHeader/ShareButton/useScreenshot';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+
+import Preview, { ImageType, imageTypeOptions } from './Preview';
+import { FieldType } from './type';
+
+enum Tab {
+  Screenshot = 'screenshot',
+  ShareGPT = 'sharegpt',
+}
+
+const DEFAULT_FIELD_VALUE: FieldType = {
+  imageType: ImageType.JPG,
+  withBackground: true,
+  withFooter: false,
+  withPluginInfo: false,
+  withSystemRole: false,
+};
+
+const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
+  const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
+  const [tab, setTab] = useState<Tab>(Tab.Screenshot);
+  const { t } = useTranslation('chat');
+  const avatar = useGlobalStore((s) => s.settings.avatar);
+  const [shareLoading, shareToShareGPT] = useChatStore((s) => [s.shareLoading, s.shareToShareGPT]);
+  const { loading, onDwnload, title } = useScreenshot(fieldValue.imageType);
+
+  const options: SegmentedProps['options'] = useMemo(
+    () => [
+      {
+        label: t('shareModal.screenshot'),
+        value: Tab.Screenshot,
+      },
+      {
+        label: 'ShareGPT',
+        value: Tab.ShareGPT,
+      },
+    ],
+    [],
+  );
+
+  const settings: FormItemProps[] = useMemo(
+    () =>
+      [
+        {
+          children: <Switch />,
+          label: t('shareModal.withSystemRole'),
+          minWidth: undefined,
+          name: 'withSystemRole',
+          valuePropName: 'checked',
+        },
+        tab === Tab.Screenshot && {
+          children: <Switch />,
+          label: t('shareModal.withBackground'),
+          minWidth: undefined,
+          name: 'withBackground',
+          valuePropName: 'checked',
+        },
+        tab === Tab.Screenshot && {
+          children: <Switch />,
+          label: t('shareModal.withFooter'),
+          minWidth: undefined,
+          name: 'withFooter',
+          valuePropName: 'checked',
+        },
+        tab === Tab.Screenshot && {
+          children: <Segmented options={imageTypeOptions} />,
+          label: t('shareModal.imageType'),
+          minWidth: undefined,
+          name: 'imageType',
+        },
+        tab === Tab.ShareGPT && {
+          children: <Switch />,
+          label: t('shareModal.withPluginInfo'),
+          minWidth: undefined,
+          name: 'withPluginInfo',
+          valuePropName: 'checked',
+        },
+      ].filter(Boolean) as FormItemProps[],
+    [],
+  );
+
+  return (
+    <Modal
+      allowFullscreen
+      centered={false}
+      footer={
+        <>
+          {tab === Tab.Screenshot && (
+            <Button block loading={loading} onClick={onDwnload} size={'large'} type={'primary'}>
+              {t('shareModal.download')}
+            </Button>
+          )}
+          {tab === Tab.ShareGPT && (
+            <Button
+              block
+              loading={shareLoading}
+              onClick={() => shareToShareGPT({ avatar, ...fieldValue })}
+              size={'large'}
+              type={'primary'}
+            >
+              {t('shareModal.shareToShareGPT')}
+            </Button>
+          )}
+        </>
+      }
+      maxHeight={false}
+      onCancel={onCancel}
+      open={open}
+      title={t('share', { ns: 'common' })}
+    >
+      <Flexbox gap={16}>
+        <Segmented
+          block
+          onChange={(value) => setTab(value as Tab)}
+          options={options}
+          style={{ width: '100%' }}
+          value={tab}
+        />
+        <Form
+          initialValues={DEFAULT_FIELD_VALUE}
+          items={settings}
+          itemsType={'flat'}
+          onValuesChange={(_, v) => setFieldValue(v)}
+          {...FORM_STYLE}
+        />
+        {tab === Tab.Screenshot && <Preview title={title} {...fieldValue} />}
+      </Flexbox>
+    </Modal>
+  );
+});
+
+export default ShareModal;

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

@@ -1,4 +1,4 @@
-import { ActionIcon, Modal } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
 import { Share2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
@@ -8,7 +8,7 @@ import useMergeState from 'use-merge-value';
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
 
-const Inner = dynamic(() => import('./Inner'));
+const ShareModal = dynamic(() => import('./ShareModal'));
 interface ShareButtonProps {
   mobile?: boolean;
   open?: boolean;
@@ -34,15 +34,7 @@ const ShareButton = memo<ShareButtonProps>(({ mobile, setOpen, open }) => {
         title={t('share')}
       />
 
-      <Modal
-        centered={false}
-        footer={null}
-        onCancel={() => setIsModalOpen(false)}
-        open={isModalOpen}
-        title={t('share')}
-      >
-        <Inner />
-      </Modal>
+      <ShareModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
     </>
   );
 });

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

@@ -0,0 +1,14 @@
+export enum ImageType {
+  JPG = 'jpg',
+  PNG = 'png',
+  SVG = 'svg',
+  WEBP = 'webp',
+}
+
+export type FieldType = {
+  imageType: ImageType;
+  withBackground: boolean;
+  withFooter: boolean;
+  withPluginInfo: boolean;
+  withSystemRole: boolean;
+};

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

@@ -0,0 +1,60 @@
+import dayjs from 'dayjs';
+import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
+import { useCallback, useState } from 'react';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agent';
+
+import { ImageType } from './type';
+
+export const useScreenshot = (imageType: ImageType) => {
+  const [loading, setLoading] = useState(false);
+  const title = useSessionStore(agentSelectors.currentAgentTitle);
+
+  const handleDownload = useCallback(async () => {
+    setLoading(true);
+    try {
+      let screenshotFn: any;
+      switch (imageType) {
+        case ImageType.JPG: {
+          screenshotFn = domToJpeg;
+          break;
+        }
+        case ImageType.PNG: {
+          screenshotFn = domToPng;
+          break;
+        }
+        case ImageType.SVG: {
+          screenshotFn = domToSvg;
+          break;
+        }
+        case ImageType.WEBP: {
+          screenshotFn = domToWebp;
+          break;
+        }
+      }
+
+      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement, {
+        features: {
+          // 不启用移除控制符，否则会导致 safari emoji 报错
+          removeControlCharacter: false,
+        },
+        scale: 2,
+      });
+      const link = document.createElement('a');
+      link.download = `LobeChat_${title}_${dayjs().format('YYYY-MM-DD')}.${imageType}`;
+      link.href = dataUrl;
+      link.click();
+      setLoading(false);
+    } catch (error) {
+      console.error('Failed to download image', error);
+      setLoading(false);
+    }
+  }, [imageType, title]);
+
+  return {
+    loading,
+    onDwnload: handleDownload,
+    title,
+  };
+};

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

@@ -78,7 +78,6 @@ const SystemRole = memo(() => {
             <EditableMessage
               classNames={{ markdown: styles.prompt }}
               editing={editing}
-              height={editing ? 'calc(70vh - 108px)' : 'calc(70vh - 357.43px)'}
               model={{
                 extra: (
                   <AgentInfo

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

@@ -7,17 +7,11 @@ import TopicSearchBar from './TopicSearchBar';
 
 const TopicListContent = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
-    <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
-      {mobile ? (
-        <Flexbox padding={'12px 16px'}>
-          <TopicSearchBar />
-        </Flexbox>
-      ) : (
-        <Header />
-      )}
+    <Flexbox gap={mobile ? 8 : 0} height={'100%'} style={{ overflow: 'hidden' }}>
+      {mobile ? <TopicSearchBar /> : <Header />}
       <Flexbox
         gap={16}
-        paddingInline={mobile ? 16 : 8}
+        paddingInline={mobile ? 0 : 8}
         style={{ overflowY: 'auto', paddingTop: 6, position: 'relative' }}
       >
         <Topic />

package/src/app/chat/settings/features/SubmitAgentButton/{Inner.tsx → SubmitAgentModal.tsx}

@@ -1,4 +1,4 @@
-import { Alert } from '@lobehub/ui';
+import { Alert, Modal, type ModalProps } from '@lobehub/ui';
 import { Button, Divider, Input } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -8,14 +8,13 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import MobilePadding from '@/components/MobilePadding';
 import { AGENTS_INDEX_GITHUB_ISSUE } from '@/const/url';
 import AgentInfo from '@/features/AgentInfo';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 
-const Inner = memo(() => {
+const SubmitAgentModal = memo<ModalProps>(({ open, onCancel }) => {
   const { t } = useTranslation('setting');
   const [identifier, setIdentifier] = useState('');
   const systemRole = useSessionStore(agentSelectors.currentAgentSystemRole);
@@ -54,8 +53,24 @@ const Inner = memo(() => {
   };
 
   return (
-    <Flexbox gap={16}>
-      <MobilePadding gap={16}>
+    <Modal
+      allowFullscreen
+      footer={
+        <Button
+          block
+          disabled={!isMetaPass || !identifier}
+          onClick={handleSubmit}
+          size={'large'}
+          type={'primary'}
+        >
+          {t('submitAgentModal.button')}
+        </Button>
+      }
+      onCancel={onCancel}
+      open={open}
+      title={t('submitAgentModal.tooltips')}
+    >
+      <Flexbox gap={16}>
         {!isMetaPass && (
           <Alert message={t('submitAgentModal.metaMiss')} showIcon type={'warning'} />
         )}
@@ -70,18 +85,9 @@ const Inner = memo(() => {
           placeholder={t('submitAgentModal.placeholder')}
           value={identifier}
         />
-        <Button
-          block
-          disabled={!isMetaPass || !identifier}
-          onClick={handleSubmit}
-          size={'large'}
-          type={'primary'}
-        >
-          {t('submitAgentModal.button')}
-        </Button>
-      </MobilePadding>
-    </Flexbox>
+      </Flexbox>
+    </Modal>
   );
 });
 
-export default Inner;
+export default SubmitAgentModal;

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

@@ -1,4 +1,4 @@
-import { ActionIcon, Modal } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
 
-import Inner from './Inner';
+import SubmitAgentModal from './SubmitAgentModal';
 
 const SubmitAgentButton = memo(() => {
   const { t } = useTranslation('setting');
@@ -20,14 +20,7 @@ const SubmitAgentButton = memo(() => {
         size={HEADER_ICON_SIZE(mobile)}
         title={t('submitAgentModal.tooltips')}
       />
-      <Modal
-        footer={null}
-        onCancel={() => setIsModalOpen(false)}
-        open={isModalOpen}
-        title={t('submitAgentModal.tooltips')}
-      >
-        <Inner />
-      </Modal>
+      <SubmitAgentModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
     </>
   );
 });

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

@@ -15,7 +15,13 @@ const AgentDetail = memo(() => {
   const { t } = useTranslation('market');
 
   return (
-    <Modal onCancel={deactivateAgent} open={showAgentSidebar} title={t('sidebar.title')}>
+    <Modal
+      allowFullscreen
+      onCancel={deactivateAgent}
+      open={showAgentSidebar}
+      styles={{ body: { padding: 0 } }}
+      title={t('sidebar.title')}
+    >
       <AgentDetailContent />
     </Modal>
   );

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

@@ -5,13 +5,12 @@ 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}
@@ -46,7 +45,7 @@ const Inner = memo(() => {
       >
         {t('guide.func2.button')}
       </Button>
-    </MobilePadding>
+    </>
   );
 });