@lobehub/chat 0.80.0 → 0.80.2

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.80.2](https://github.com/lobehub/lobe-chat/compare/v0.80.1...v0.80.2)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### 💄 Styles
+
+- **misc**: Switch Modal components to @lobehub/ui.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Switch Modal components to @lobehub/ui ([d056015](https://github.com/lobehub/lobe-chat/commit/d056015))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.80.1](https://github.com/lobehub/lobe-chat/compare/v0.80.0...v0.80.1)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix conversation mobile viewarea.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix conversation mobile viewarea ([6668e11](https://github.com/lobehub/lobe-chat/commit/6668e11))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.80.0](https://github.com/lobehub/lobe-chat/compare/v0.79.8...v0.80.0)
 
 <sup>Released on **2023-09-27**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.80.0",
+  "version": "0.80.2",
   "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",
@@ -96,6 +96,7 @@
     "react-i18next": "^13",
     "react-intersection-observer": "^9",
     "react-layout-kit": "^1",
+    "satori": "^0.10",
     "swr": "^2",
     "systemjs": "^6",
     "ts-md5": "^1",

package/src/app/chat/features/Conversation/ChatList/index.tsx

@@ -1,5 +1,4 @@
 import { ChatList, RenderMessage } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,22 +15,9 @@ import FunctionCall from './Plugins/FunctionCall';
 import PluginMessage from './Plugins/PluginMessage';
 import SkeletonList from './SkeletonList';
 
-const useStyles = createStyles(({ css, responsive, cx, stylish }) =>
-  cx(
-    stylish.noScrollbar,
-    css`
-      overflow-x: hidden;
-      ${responsive.mobile} {
-        width: 100vw;
-      }
-    `,
-  ),
-);
-
 const List = memo(() => {
   const init = useSessionChatInit();
   const { t } = useTranslation('common');
-  const { styles } = useStyles();
   const data = useSessionStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
 
   const [
@@ -96,7 +82,6 @@ const List = memo(() => {
 
   return (
     <ChatList
-      className={styles}
       data={data}
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}

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

@@ -1,4 +1,5 @@
 import { BackBottom } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -10,9 +11,22 @@ import ChatList from './ChatList';
 import ChatInput from './Input';
 import ChatScrollAnchor from './ScrollAnchor';
 
+const useStyles = createStyles(
+  ({ css, responsive, stylish }) => css`
+    overflow-x: hidden;
+    overflow-y: scroll;
+    height: 100%;
+    ${responsive.mobile} {
+      ${stylish.noScrollbar}
+      width: 100vw;
+    }
+  `,
+);
+
 const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
+  const { styles } = useStyles();
 
   const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
   useFetchPluginList();
@@ -20,7 +34,7 @@ const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
-        <div ref={ref} style={{ height: '100%', overflowY: 'scroll' }}>
+        <div className={styles} ref={ref}>
           {!mobile && <SafeSpacing />}
           <ChatList />
           <ChatScrollAnchor />

package/src/app/chat/features/Header/ShareButton/Inner.tsx

@@ -0,0 +1,28 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Loader2, Share2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const ShareButton = memo(() => {
+  const { t } = useTranslation('common');
+
+  const [shareLoading, shareToShareGPT] = useSessionStore((s) => [
+    s.shareLoading,
+    s.shareToShareGPT,
+  ]);
+
+  return shareLoading ? (
+    <Icon icon={Loader2} size={{ fontSize: 24 }} spin />
+  ) : (
+    <ActionIcon
+      icon={Share2}
+      onClick={shareToShareGPT}
+      size={{ fontSize: 24 }}
+      title={t('share')}
+    />
+  );
+});
+
+export default ShareButton;

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

@@ -1,28 +1,31 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Loader2, Share2 } from 'lucide-react';
-import { memo } from 'react';
+import { ActionIcon, Modal } from '@lobehub/ui';
+import { Share2 } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
 
 const ShareButton = memo(() => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const { t } = useTranslation('common');
+  const [shareLoading] = useSessionStore((s) => [s.shareLoading]);
 
-  const [shareLoading, shareToShareGPT] = useSessionStore((s) => [
-    s.shareLoading,
-
-    s.shareToShareGPT,
-  ]);
-
-  return shareLoading ? (
-    <Icon icon={Loader2} size={{ fontSize: 24 }} spin />
-  ) : (
-    <ActionIcon
-      icon={Share2}
-      onClick={shareToShareGPT}
-      size={{ fontSize: 24 }}
-      title={t('share')}
-    />
+  return (
+    <>
+      <ActionIcon
+        icon={Share2}
+        loading={shareLoading}
+        onClick={() => setIsModalOpen(true)}
+        size={{ fontSize: 24 }}
+        title={t('share')}
+      />
+      <Modal
+        footer={null}
+        onCancel={() => setIsModalOpen(false)}
+        open={isModalOpen}
+        title={t('share')}
+      />
+    </>
   );
 });
 

package/src/const/layoutTokens.ts

@@ -4,7 +4,7 @@ export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
 export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
-export const CHAT_TEXTAREA_HEIGHT_MOBILE = 180;
+export const CHAT_TEXTAREA_HEIGHT_MOBILE = 120;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 256;

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

@@ -1,26 +1,11 @@
-import { Icon, Input, Tooltip } from '@lobehub/ui';
-import { ConfigProvider, Form, Modal } from 'antd';
-import { createStyles } from 'antd-style';
-import { LucideSettings } from 'lucide-react';
-import { lighten } from 'polished';
+import { Input, Modal, Tooltip } from '@lobehub/ui';
+import { Form } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { PLUGINS_INDEX_URL } from '@/const/url';
 
-const useStyles = createStyles(({ css, token, prefixCls }) => ({
-  content: css`
-    .${prefixCls}-modal-content {
-      border: 1px solid ${token.colorSplit};
-      border-radius: 12px;
-    }
-  `,
-  root: css`
-    backdrop-filter: blur(2px);
-  `,
-}));
-
 interface MarketSettingModalProps {
   onOpenChange: (open: boolean) => void;
   open?: boolean;
@@ -28,48 +13,24 @@ interface MarketSettingModalProps {
 
 const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }) => {
   const { t } = useTranslation('plugin');
-  const { styles, theme } = useStyles();
 
   return (
-    <ConfigProvider
-      theme={{
-        token: {
-          colorBgElevated: lighten(0.005, theme.colorBgContainer),
-        },
-      }}
+    <Modal
+      footer={null}
+      onCancel={() => onOpenChange(false)}
+      open={open}
+      title={t('settings.title')}
     >
-      <Modal
-        centered
-        closable
-        maskClosable
-        onCancel={() => {
-          onOpenChange(false);
-        }}
-        open={open}
-        title={
-          <Flexbox gap={8} horizontal style={{ marginBottom: 24 }}>
-            <Icon icon={LucideSettings} />
-            {t('settings.title')}
-          </Flexbox>
-        }
-        width={700}
-        wrapClassName={styles.root}
-      >
-        <Flexbox gap={12}>
-          <Form layout={'vertical'}>
-            <Form.Item extra={t('settings.modalDesc')} label={t('settings.indexUrl.title')}>
-              <Tooltip title={t('settings.indexUrl.tooltip')}>
-                <Input
-                  defaultValue={PLUGINS_INDEX_URL}
-                  disabled
-                  placeholder={'https://xxxxx.com'}
-                />
-              </Tooltip>
-            </Form.Item>
-          </Form>
-        </Flexbox>
-      </Modal>
-    </ConfigProvider>
+      <Flexbox gap={12}>
+        <Form layout={'vertical'}>
+          <Form.Item extra={t('settings.modalDesc')} label={t('settings.indexUrl.title')}>
+            <Tooltip title={t('settings.indexUrl.tooltip')}>
+              <Input defaultValue={PLUGINS_INDEX_URL} disabled placeholder={'https://xxxxx.com'} />
+            </Tooltip>
+          </Form.Item>
+        </Form>
+      </Flexbox>
+    </Modal>
   );
 });
 

package/src/features/PluginDevModal/index.tsx

@@ -1,8 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { App, Button, ConfigProvider, Form, Modal, Popconfirm } from 'antd';
-import { createStyles } from 'antd-style';
-import { LucideBlocks } from 'lucide-react';
-import { lighten } from 'polished';
+import { Modal } from '@lobehub/ui';
+import { App, Button, Form, Popconfirm } from 'antd';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -13,18 +10,6 @@ import ManifestForm from './ManifestForm';
 import MetaForm from './MetaForm';
 import PluginPreview from './PluginPreview';
 
-const useStyles = createStyles(({ css, token, prefixCls }) => ({
-  content: css`
-    .${prefixCls}-modal-content {
-      border: 1px solid ${token.colorSplit};
-      border-radius: 12px;
-    }
-  `,
-  root: css`
-    backdrop-filter: blur(2px);
-  `,
-}));
-
 interface DevModalProps {
   mode?: 'edit' | 'create';
   onDelete?: () => void;
@@ -39,7 +24,6 @@ const DevModal = memo<DevModalProps>(
   ({ open, mode = 'create', value, onValueChange, onSave, onOpenChange, onDelete }) => {
     const isEditMode = mode === 'edit';
     const { t } = useTranslation('plugin');
-    const { styles, theme } = useStyles();
     const { message } = App.useApp();
 
     const [submitting, setSubmitting] = useState(false);
@@ -105,49 +89,28 @@ const DevModal = memo<DevModalProps>(
           onOpenChange(false);
         }}
       >
-        <ConfigProvider
-          theme={{
-            token: {
-              colorBgElevated: lighten(0.005, theme.colorBgContainer),
-            },
-          }}
+        <Modal
+          cancelText={t('cancel', { ns: 'common' })}
+          footer={footer}
+          okText={t('dev.save')}
+          onCancel={() => onOpenChange(false)}
+          onOk={() => form.submit()}
+          open={open}
+          title={t('dev.title')}
         >
-          <Modal
-            centered
-            closable
-            footer={footer}
-            maskClosable
-            okText={t('dev.save')}
-            onCancel={() => {
-              onOpenChange(false);
-            }}
-            onOk={() => {
-              form.submit();
-            }}
-            open={open}
-            title={
-              <Flexbox gap={8} horizontal>
-                <Icon icon={LucideBlocks} />
-                {t('dev.title')}
-              </Flexbox>
-            }
-            width={700}
-            wrapClassName={styles.root}
-          >
-            <Flexbox gap={12}>
-              {t('dev.modalDesc')}
-              {/*<Tabs*/}
-              {/*  items={[*/}
-              {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}
-              {/*    { children: <ManifestForm />, key: 'manifest', label: t('dev.tabs.manifest') },*/}
-              {/*  ]}*/}
-              {/*/>*/}
-              <PluginPreview form={form} />
-              <ManifestForm form={form} />
-              <MetaForm form={form} mode={mode} />
-            </Flexbox>
-          </Modal>
-        </ConfigProvider>
+          <Flexbox gap={12}>
+            {t('dev.modalDesc')}
+            {/*<Tabs*/}
+            {/*  items={[*/}
+            {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}
+            {/*    { children: <ManifestForm />, key: 'manifest', label: t('dev.tabs.manifest') },*/}
+            {/*  ]}*/}
+            {/*/>*/}
+            <PluginPreview form={form} />
+            <ManifestForm form={form} />
+            <MetaForm form={form} mode={mode} />
+          </Flexbox>
+        </Modal>
       </Form.Provider>
     );
   },