@lobehub/chat 0.81.0 → 0.82.2

package/src/store/session/slices/chat/actions/share.ts

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
@@ -9,9 +10,45 @@ import { agentSelectors } from '../../agentConfig';
 import { sessionSelectors } from '../../session/selectors';
 import { chatSelectors } from '../selectors';
 
+interface ShareMessage {
+  from: 'human' | 'gpt';
+  value: string;
+}
+export const AVATAR =
+  'data:image/webp;base64,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';
+
+const Footer: ShareMessage = {
+  from: 'gpt',
+  value: `Share from [**🤯 LobeChat**](https://github.com/lobehub/lobe-chat) - ${dayjs().format(
+    'YYYY-MM-DD',
+  )}`,
+};
+
+const PLUGIN_INFO = (plugin: {
+  apiName: string;
+  content: string;
+  identifier: string;
+}): ShareMessage => ({
+  from: 'gpt',
+  value: [
+    `**🧩 Function Calling Plugin**`,
+    `- Identifier: \`${plugin.identifier}\``,
+    `- API name: \`${plugin.apiName}\``,
+    `- Result:`,
+    ``,
+    '```json',
+    plugin.content,
+    '```',
+  ].join('\n'),
+});
+
 // const t = setNamespace('chat/share');
 export interface ShareAction {
-  shareToShareGPT: () => void;
+  shareToShareGPT: (props: {
+    avatar?: string;
+    withPluginInfo?: boolean;
+    withSystemRole?: boolean;
+  }) => void;
 }
 
 export const chatShare: StateCreator<
@@ -20,72 +57,69 @@ export const chatShare: StateCreator<
   [],
   ShareAction
 > = (set, get) => ({
-  // genShareUrl: () => {
-  //   const session = sessionSelectors.currentSession(get());
-  //   if (!session) return '';
-  //
-  //   const agent = session.config;
-  //   return genShareMessagesUrl(session.chats, agent.systemRole);
-  // },
-  shareToShareGPT: async () => {
+  shareToShareGPT: async ({ withSystemRole, withPluginInfo, avatar }) => {
     const session = sessionSelectors.currentSession(get());
     if (!session) return;
     const messages = chatSelectors.currentChats(get());
     const config = agentSelectors.currentAgentConfig(get());
+    const meta = agentSelectors.currentAgentMeta(get());
 
     const defaultMsg: ShareGPTConversation['items'] = [];
-
+    const showSystemRole = withSystemRole && !!config.systemRole;
     const shareMsgs = produce(defaultMsg, (draft) => {
-      if (!!config.systemRole) {
-        draft.push({
-          from: 'human',
-          value: `-------------- ### This is a system settings | 这是一条系统设定
-
-${config.systemRole}`,
-        });
-      }
+      draft.push({
+        from: 'gpt',
+        value: [
+          `${meta.avatar} **${meta.title}** - ${meta.description}`,
+          showSystemRole && '---',
+          showSystemRole && config.systemRole,
+        ]
+          .filter(Boolean)
+          .join('\n\n'),
+      });
 
       for (const i of messages) {
         switch (i.role) {
-          case 'user':
-          default: {
-            draft.push({ from: 'human', value: i.content });
-            break;
-          }
-
           case 'assistant': {
             draft.push({ from: 'gpt', value: i.content });
             break;
           }
           case 'function': {
-            draft.push({
-              from: 'gpt',
-              value: `-------------- ### This is a function call | 这是一次插件调用
-plugin name: ${i.plugin?.identifier}
-function call name: ${i.plugin?.apiName}
-result:
-\`\`\`json
-${i.content}
-\`\`\``,
-            });
+            if (withPluginInfo)
+              draft.push(
+                PLUGIN_INFO({
+                  apiName: i.plugin?.apiName || 'undefined',
+                  content: i.content,
+                  identifier: i.plugin?.identifier || 'undefined',
+                }),
+              );
+            break;
+          }
+          case 'user': {
+            draft.push({ from: 'human', value: i.content });
             break;
           }
         }
       }
 
-      draft.push({
-        from: 'human',
-        value: 'Share from [LobeChat](https://github.com/lobehub/lobe-chat)',
-      });
+      draft.push(Footer);
     });
 
     set({ shareLoading: true });
+
     const res = await genShareGPTUrl({
-      avatarUrl: 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp',
+      avatarUrl: avatar || AVATAR,
       items: shareMsgs,
     });
     set({ shareLoading: false });
 
     window.open(res, '_blank');
   },
+  // genShareUrl: () => {
+  //   const session = sessionSelectors.currentSession(get());
+  //   if (!session) return '';
+  //
+  //   const agent = session.config;
+  //   return genShareMessagesUrl(session.chats, agent.systemRole);
+  // },
 });

package/src/styles/antdOverride.ts

@@ -1,31 +1,7 @@
 import { Theme, css } from 'antd-style';
-import { readableColor } from 'polished';
 
-export default ({ token, prefixCls }: { prefixCls: string; token: Theme }) => css`
-  .${prefixCls}-btn {
-    box-shadow: none;
-  }
-
-  .${prefixCls}-popover {
+export default ({ token }: { prefixCls: string; token: Theme }) => css`
+  .${token.prefixCls}-popover {
     z-index: 1100;
   }
-
-  .${prefixCls}-slider-track, .${prefixCls}-tabs-ink-bar, .${prefixCls}-switch-checked {
-    background: ${token.colorPrimary} !important;
-  }
-
-  .${prefixCls}-btn-primary:not(.${prefixCls}-btn-dangerous) {
-    color: ${readableColor(token.colorPrimary)};
-    background: ${token.colorPrimary};
-
-    &:hover {
-      color: ${readableColor(token.colorPrimary)} !important;
-      background: ${token.colorPrimaryHover} !important;
-    }
-
-    &:active {
-      color: ${readableColor(token.colorPrimaryActive)} !important;
-      background: ${token.colorPrimaryActive} !important;
-    }
-  }
 `;

package/src/styles/global.ts

@@ -20,4 +20,13 @@ export default ({ prefixCls }: { prefixCls: string }) => css`
   p {
     margin-bottom: 0;
   }
+
+  @media (max-width: 575px) {
+    * {
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+  }
 `;

package/src/utils/imageToBase64.ts

@@ -0,0 +1,37 @@
+export const imageToBase64 = ({
+  size,
+  img,
+  type = 'image/webp',
+}: {
+  img: HTMLImageElement;
+  size: number;
+  type?: string;
+}) => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  let startX = 0;
+  let startY = 0;
+
+  if (img.width > img.height) {
+    startX = (img.width - img.height) / 2;
+  } else {
+    startY = (img.height - img.width) / 2;
+  }
+
+  canvas.width = size;
+  canvas.height = size;
+
+  ctx.drawImage(
+    img,
+    startX,
+    startY,
+    Math.min(img.width, img.height),
+    Math.min(img.width, img.height),
+    0,
+    0,
+    size,
+    size,
+  );
+
+  return canvas.toDataURL(type);
+};

package/src/utils/parseMarkdown.ts

@@ -0,0 +1,9 @@
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import remarkHtml from 'remark-html';
+
+export const parseMarkdown = async (content: string) => {
+  const file = await remark().use(remarkGfm).use(remarkHtml).process(content.trim());
+
+  return String(file);
+};

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

@@ -1,94 +0,0 @@
-import { GridBackground, Icon, Logo } from '@lobehub/ui';
-import { createStyles, useResponsive } from 'antd-style';
-import { PackageCheck } from 'lucide-react';
-import { rgba } from 'polished';
-import { ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import pkg from '@/../package.json';
-
-const useStyles = createStyles(({ css, token, isDarkMode, prefixCls }) => ({
-  background: css`
-    position: absolute;
-    bottom: -10%;
-    left: 0;
-    width: 100%;
-  `,
-  banner: css`
-    position: relative;
-
-    overflow: hidden;
-
-    width: 100%;
-    max-width: 1024px;
-    height: 160px;
-    padding: 4px;
-
-    background: radial-gradient(
-      120% 120% at 20% 100%,
-      ${isDarkMode ? rgba(token.colorBgContainer, 0.5) : token.colorBgContainer} 32%,
-      ${isDarkMode ? token.colorPrimaryBgHover : rgba(token.colorPrimaryBgHover, 0.3)} 50%,
-      ${isDarkMode ? token.colorPrimaryHover : rgba(token.colorPrimaryHover, 0.3)} 100%
-    );
-    border: 1px solid ${token.colorBorderSecondary};
-    border-radius: ${token.borderRadiusLG}px;
-  `,
-  logo: css`
-    position: absolute;
-    top: 50%;
-    left: 32px;
-    transform: translateY(-50%);
-  `,
-  mobile: css`
-    margin-top: -16px;
-
-    .${prefixCls}-tabs-tab, .${prefixCls}-tabs-tab + .${prefixCls}-tabs-tab {
-      margin: 4px 8px !important;
-    }
-  `,
-  tag: css`
-    position: absolute;
-    top: 6px;
-    right: 12px;
-
-    font-family: ${token.fontFamilyCode};
-    font-size: 12px;
-    color: ${isDarkMode ? token.colorPrimaryBg : token.colorPrimaryActive};
-
-    opacity: 0.5;
-  `,
-}));
-
-const Banner = memo<{ nav: ReactNode }>(({ nav }) => {
-  const { styles, theme } = useStyles();
-  const { mobile } = useResponsive();
-
-  if (mobile)
-    return (
-      <Flexbox align={'flex-end'} className={styles.mobile} horizontal justify={'center'}>
-        {nav}
-      </Flexbox>
-    );
-
-  return (
-    <Flexbox align={'flex-end'} className={styles.banner} horizontal justify={'center'}>
-      <GridBackground
-        animation
-        className={styles.background}
-        colorBack={theme.colorFillSecondary}
-        colorFront={theme.colorPrimary}
-        random
-      />
-      {nav}
-      <div className={styles.logo}>
-        <Logo extra={'Chat'} type={'text'} />
-      </div>
-      <Flexbox align={'center'} className={styles.tag} gap={4} horizontal>
-        <Icon icon={PackageCheck} />
-        <div>{`${pkg.version}`}</div>
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default Banner;

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

@@ -1,53 +0,0 @@
-import { TabsNav } from '@lobehub/ui';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
-
-import { useGlobalStore } from '@/store/global';
-
-import Banner from '../Banner';
-import Agent from './Agent';
-import Common from './Common';
-import LLM from './LLM';
-
-const Settings = memo(() => {
-  const { t } = useTranslation('setting');
-
-  const [tab, setTab] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]);
-
-  const content = useMemo(() => {
-    switch (tab) {
-      case 'llm': {
-        return <LLM />;
-      }
-      case 'agent': {
-        return <Agent />;
-      }
-      default:
-      case 'common': {
-        return <Common />;
-      }
-    }
-  }, [tab]);
-
-  return (
-    <Center gap={16} width={'100%'}>
-      <Banner
-        nav={
-          <TabsNav
-            activeKey={tab}
-            items={[
-              { key: 'common', label: t('tab.common') },
-              { key: 'llm', label: t('tab.llm') },
-              { key: 'agent', label: t('tab.agent') },
-            ]}
-            onChange={(e) => setTab(e as any)}
-          />
-        }
-      />
-      {content}
-    </Center>
-  );
-});
-
-export default Settings;