@lobehub/chat 0.62.1 → 0.63.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [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.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

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

@@ -49,21 +49,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/Header/PC.tsx

@@ -12,6 +12,7 @@ import { useGlobalStore } from '@/store/global';
 import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
 
 import PluginTag from './PluginTag';
+import ShareButton from './ShareButton';
 
 const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
   const init = useSessionChatInit();
@@ -68,14 +69,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/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/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;
+  }>;
+}