@lobehub/chat 0.62.1 → 0.63.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.63.1](https://github.com/lobehub/lobe-chat/compare/v0.63.0...v0.63.1)
+
+<sup>Released on **2023-08-27**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the selectors import.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the selectors import, closes [#120](https://github.com/lobehub/lobe-chat/issues/120) ([6646502](https://github.com/lobehub/lobe-chat/commit/6646502))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.63.0](https://github.com/lobehub/lobe-chat/compare/v0.62.1...v0.63.0)
+
+<sup>Released on **2023-08-27**</sup>
+
+#### ✨ Features
+
+- **misc**: support sharing to shareGPT.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: support sharing to shareGPT, closes [#119](https://github.com/lobehub/lobe-chat/issues/119) ([026e9ec](https://github.com/lobehub/lobe-chat/commit/026e9ec))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.62.1](https://github.com/lobehub/lobe-chat/compare/v0.62.0...v0.62.1)
 
 <sup>Released on **2023-08-26**</sup>

package/README.md

@@ -129,7 +129,7 @@ This project is [MIT](./LICENSE) licensed.
 
 <!-- release -->
 
-[release-shield]: https://img.shields.io/npm/v/@lobehub/chat?label=%F0%9F%A4%AF%20NPM
+[release-shield]: https://img.shields.io/npm/v/@lobehub/chat?label=%F0%9F%A4%AF%20Chat
 [release-url]: https://www.npmjs.com/package/@lobehub/chat
 
 <!-- releaseDate -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.62.1",
+  "version": "0.63.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/helpers/export.ts

@@ -1,5 +1,6 @@
 import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { sessionSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
 
 const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());

package/src/pages/chat/SessionList/List/Item/Actions.tsx

@@ -6,7 +6,8 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
-import { sessionSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 
 const useStyles = createStyles(({ css }) => ({
   modalRoot: css`

package/src/pages/chat/SessionList/List/Item/index.tsx

@@ -7,7 +7,8 @@ import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 import Actions from './Actions';
 

package/src/pages/chat/SessionList/List/index.tsx

@@ -2,7 +2,8 @@ import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
 
-import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
+import { useSessionHydrated, useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 
 import AddButton from './AddButton';
 import SessionItem from './Item';

package/src/pages/chat/[id]/index.page.tsx

@@ -3,7 +3,8 @@ import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Conversation from '../features/Conversation';

package/src/pages/chat/[id]/setting/index.page.tsx

@@ -8,7 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import ChatLayout from '../layout';

package/src/pages/chat/features/Conversation/ChatList/MessageExtra.tsx

@@ -4,7 +4,8 @@ import { createStyles } from 'antd-style';
 import { ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/chatMessage';
 
 const useStyles = createStyles(({ css }) => ({

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

@@ -4,12 +4,8 @@ import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import {
-  agentSelectors,
-  chatSelectors,
-  useSessionChatInit,
-  useSessionStore,
-} from '@/store/session';
+import { useSessionChatInit, useSessionStore } from '@/store/session';
+import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/chatMessage';
 import { isFunctionMessage } from '@/utils/message';
 
@@ -49,21 +45,24 @@ const List = () => {
 
       if (message.role === 'function')
         return (
-          <Flexbox gap={12}>
+          <Flexbox gap={12} id={message.id}>
             <FunctionCall {...fcProps} />
             <PluginMessage loading={message.id === chatLoadingId} {...message} />
           </Flexbox>
         );
 
-      if (message.role === 'assistant') {
-        return isFunctionMessage(message.content) || !!message.function_call ? (
-          <FunctionCall {...fcProps} />
-        ) : (
-          content
+      if (
+        message.role === 'assistant' &&
+        // 包含了 function 信息
+        isFunctionMessage(message.content)
+      )
+        return (
+          <div id={message.id}>
+            <FunctionCall {...fcProps} />
+          </div>
         );
-      }
 
-      return content;
+      return <div id={message.id}>{content}</div>;
     },
     [chatLoadingId],
   );

package/src/pages/chat/features/Conversation/Input/Action.tsx

@@ -5,7 +5,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 import { LanguageModel } from '@/types/llm';
 
 const InputActions = memo(() => {

package/src/pages/chat/features/Conversation/Input/Token.tsx

@@ -4,7 +4,8 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ModelTokens } from '@/const/modelTokens';
-import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 
 const Token = memo<{ input: string }>(({ input }) => {
   const { t } = useTranslation('common');

package/src/pages/chat/features/Header/Mobile.tsx

@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 
 const MobileHeader = memo<{ settings?: boolean }>(({ settings = true }) => {
   const { t } = useTranslation('common');

package/src/pages/chat/features/Header/PC.tsx

@@ -9,9 +9,11 @@ import { Flexbox } from 'react-layout-kit';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
-import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
+import { useSessionChatInit, useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 
 import PluginTag from './PluginTag';
+import ShareButton from './ShareButton';
 
 const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
   const init = useSessionChatInit();
@@ -68,14 +70,7 @@ const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
       }
       right={
         <>
-          {/*<ActionIcon*/}
-          {/*  icon={Share2}*/}
-          {/*  onClick={() => {*/}
-          {/*    // genShareUrl();*/}
-          {/*  }}*/}
-          {/*  size={{ fontSize: 24 }}*/}
-          {/*  title={t('share')}*/}
-          {/*/>*/}
+          <ShareButton />
           <ActionIcon
             icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
             onClick={() => toggleConfig()}

package/src/pages/chat/features/Header/ShareButton.tsx

@@ -0,0 +1,29 @@
+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/pages/chat/features/Sidebar/SystemRole.tsx

@@ -7,7 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import Header from '@/pages/chat/features/Sidebar/Header';
-import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
+import { useSessionChatInit, useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 
 const useStyles = createStyles(({ css, token }) => ({
   prompt: css`

package/src/pages/chat/features/Sidebar/Topic/index.tsx

@@ -5,7 +5,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import Empty from '@/components/Empty';
 import { useGlobalStore } from '@/store/global';
-import { topicSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
+import { useSessionChatInit, useSessionStore } from '@/store/session';
+import { topicSelectors } from '@/store/session/selectors';
 
 import SkeletonList from './SkeletonList';
 import TopicItem from './TopicItem';

package/src/pages/index.page.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 
-import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
+import { useSessionHydrated, useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 
 import Chat from './chat/index.page';
 import Loading from './index/Loading';

package/src/services/shareGPT.ts

@@ -0,0 +1,18 @@
+import { ShareGPTConversation } from '@/types/share';
+
+const SHAREGPT_URL = 'https://sharegpt.com/api/conversations';
+
+export const genShareGPTUrl = async (conversation: ShareGPTConversation) => {
+  const res = await fetch(SHAREGPT_URL, {
+    body: JSON.stringify(conversation),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  });
+
+  const { id } = await res.json();
+
+  // short link to the ShareGPT post
+  return `https://shareg.pt/${id}`;
+};

package/src/store/session/index.ts

@@ -1,4 +1,3 @@
 export * from './hooks';
-export * from './selectors';
 export type { SessionStore } from './store';
 export { useSessionStore } from './store';

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

@@ -3,12 +3,13 @@ import { StateCreator } from 'zustand/vanilla';
 import { SessionStore } from '@/store/session';
 
 import { ChatMessageAction, chatMessage } from './message';
+import { ShareAction, chatShare } from './share';
 import { ChatTopicAction, chatTopic } from './topic';
 
 /**
  * 聊天操作
  */
-export interface ChatAction extends ChatTopicAction, ChatMessageAction {}
+export interface ChatAction extends ChatTopicAction, ChatMessageAction, ShareAction {}
 
 export const createChatSlice: StateCreator<
   SessionStore,
@@ -18,4 +19,5 @@ export const createChatSlice: StateCreator<
 > = (...params) => ({
   ...chatTopic(...params),
   ...chatMessage(...params),
+  ...chatShare(...params),
 });

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

@@ -359,11 +359,4 @@ export const chatMessage: StateCreator<
 
     await realFetchAIResponse(chats, message.id);
   },
-  // genShareUrl: () => {
-  //   const session = sessionSelectors.currentSession(get());
-  //   if (!session) return '';
-  //
-  //   const agent = session.config;
-  //   return genShareMessagesUrl(session.chats, agent.systemRole);
-  // },
 });

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

@@ -0,0 +1,91 @@
+import { produce } from 'immer';
+import { StateCreator } from 'zustand/vanilla';
+
+import { genShareGPTUrl } from '@/services/shareGPT';
+import { SessionStore } from '@/store/session';
+import { ShareGPTConversation } from '@/types/share';
+
+import { agentSelectors } from '../../agentConfig';
+import { sessionSelectors } from '../../session/selectors';
+import { chatSelectors } from '../selectors';
+
+// const t = setNamespace('chat/share');
+export interface ShareAction {
+  shareToShareGPT: () => void;
+}
+
+export const chatShare: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  ShareAction
+> = (set, get) => ({
+  // genShareUrl: () => {
+  //   const session = sessionSelectors.currentSession(get());
+  //   if (!session) return '';
+  //
+  //   const agent = session.config;
+  //   return genShareMessagesUrl(session.chats, agent.systemRole);
+  // },
+  shareToShareGPT: async () => {
+    const session = sessionSelectors.currentSession(get());
+    if (!session) return;
+    const messages = chatSelectors.currentChats(get());
+    const config = agentSelectors.currentAgentConfig(get());
+
+    const defaultMsg: ShareGPTConversation['items'] = [];
+
+    const shareMsgs = produce(defaultMsg, (draft) => {
+      if (!!config.systemRole) {
+        draft.push({
+          from: 'human',
+          value: `-------------- ### This is a system settings | 这是一条系统设定
+
+${config.systemRole}`,
+        });
+      }
+
+      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}
+\`\`\``,
+            });
+            break;
+          }
+        }
+      }
+
+      draft.push({
+        from: 'human',
+        value: 'Share from [LobeChat](https://github.com/lobehub/lobe-chat)',
+      });
+    });
+
+    set({ shareLoading: true });
+    const res = await genShareGPTUrl({
+      avatarUrl: 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp',
+      items: shareMsgs,
+    });
+    set({ shareLoading: false });
+
+    window.open(res, '_blank');
+  },
+});

package/src/store/session/slices/chat/initialState.ts

@@ -3,6 +3,7 @@ export interface ChatState {
   activeTopicId?: string;
   chatLoadingId?: string;
   renameTopicId?: string;
+  shareLoading?: boolean;
   topicLoadingId?: string;
 }
 

package/src/types/share.ts

@@ -0,0 +1,7 @@
+export interface ShareGPTConversation {
+  avatarUrl?: string | null;
+  items: Array<{
+    from: 'human' | 'gpt';
+    value: any;
+  }>;
+}