@lobehub/chat 1.88.4 → 1.88.6

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+### [Version 1.88.6](https://github.com/lobehub/lobe-chat/compare/v1.88.5...v1.88.6)
+
+<sup>Released on **2025-05-25**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix draggable issue with agent header.
+
+#### 💄 Styles
+
+- **misc**: Fix a few typos in the model tooltips.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix draggable issue with agent header, closes [#7968](https://github.com/lobehub/lobe-chat/issues/7968) ([cd84241](https://github.com/lobehub/lobe-chat/commit/cd84241))
+
+#### Styles
+
+- **misc**: Fix a few typos in the model tooltips, closes [#7952](https://github.com/lobehub/lobe-chat/issues/7952) ([8416fec](https://github.com/lobehub/lobe-chat/commit/8416fec))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.88.5](https://github.com/lobehub/lobe-chat/compare/v1.88.4...v1.88.5)
+
+<sup>Released on **2025-05-25**</sup>
+
+#### 💄 Styles
+
+- **misc**: Support share single message.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Support share single message, closes [#7967](https://github.com/lobehub/lobe-chat/issues/7967) ([660a5ad](https://github.com/lobehub/lobe-chat/commit/660a5ad))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.88.4](https://github.com/lobehub/lobe-chat/compare/v1.88.3...v1.88.4)
 
 <sup>Released on **2025-05-25**</sup>

package/changelog/v1.json

@@ -1,4 +1,25 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Fix draggable issue with agent header."
+      ],
+      "improvements": [
+        "Fix a few typos in the model tooltips."
+      ]
+    },
+    "date": "2025-05-25",
+    "version": "1.88.6"
+  },
+  {
+    "children": {
+      "improvements": [
+        "Support share single message."
+      ]
+    },
+    "date": "2025-05-25",
+    "version": "1.88.5"
+  },
   {
     "children": {
       "improvements": [

package/locales/en-US/components.json

@@ -73,12 +73,12 @@
   },
   "ModelSelect": {
     "featureTag": {
-      "custom": "Custom model, by default, supports both function call and visual recognition. Please verify the availability of the above capabilities based on actual situations.",
+      "custom": "Custom model, by default, supports both function calls and visual recognition. Please verify the availability of the above capabilities based on actual situations.",
       "file": "This model supports file upload for reading and recognition.",
-      "functionCall": "This model supports function call.",
-      "imageOutput": "This model supports image generation",
-      "reasoning": "This model supports deep thinking",
-      "search": "This model supports online search",
+      "functionCall": "This model supports function calls.",
+      "imageOutput": "This model supports image generation.",
+      "reasoning": "This model supports deep thinking.",
+      "search": "This model supports online search.",
       "tokens": "This model supports up to {{tokens}} tokens in a single session.",
       "vision": "This model supports visual recognition."
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.88.4",
+  "version": "1.88.6",
   "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",

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/index.tsx

@@ -4,24 +4,11 @@ import { ChatHeader } from '@lobehub/ui/chat';
 
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
-import { electronStylish } from '@/styles/electron';
-
-import HeaderAction from './HeaderAction';
-import Main from './Main';
 
 const Header = () => {
   const showHeader = useGlobalStore(systemStatusSelectors.showChatHeader);
 
-  return (
-    showHeader && (
-      <ChatHeader
-        className={electronStylish.draggable}
-        left={<Main className={electronStylish.nodrag} />}
-        right={<HeaderAction className={electronStylish.nodrag} />}
-        style={{ paddingInline: 8, position: 'initial', zIndex: 11 }}
-      />
-    )
-  );
+  return showHeader && <ChatHeader style={{ paddingInline: 8, position: 'initial', zIndex: 11 }} />;
 };
 
 export default Header;

package/src/features/Conversation/Actions/Assistant.tsx

@@ -17,8 +17,17 @@ export const AssistantActionsBar: RenderAction = memo(({ onActionClick, error, t
     threadSelectors.hasThreadBySourceMsgId(id)(s),
   ]);
 
-  const { regenerate, edit, delAndRegenerate, copy, divider, del, branching } =
-    useChatListActionsBar({ hasThread });
+  const {
+    regenerate,
+    edit,
+    delAndRegenerate,
+    copy,
+    divider,
+    del,
+    branching,
+    // export: exportPDF,
+    share,
+  } = useChatListActionsBar({ hasThread });
 
   const { translate, tts } = useCustomActions();
   const hasTools = !!tools;
@@ -38,7 +47,20 @@ export const AssistantActionsBar: RenderAction = memo(({ onActionClick, error, t
     <ActionIconGroup
       items={items}
       menu={{
-        items: [edit, copy, divider, tts, translate, divider, regenerate, delAndRegenerate, del],
+        items: [
+          edit,
+          copy,
+          divider,
+          tts,
+          translate,
+          divider,
+          share,
+          // exportPDF,
+          divider,
+          regenerate,
+          delAndRegenerate,
+          del,
+        ],
       }}
       onActionClick={onActionClick}
     />

package/src/features/Conversation/components/ChatItem/ActionsBar.tsx

@@ -1,7 +1,7 @@
 import { ActionIconGroup, type ActionIconGroupEvent, type ActionIconGroupProps } from '@lobehub/ui';
 import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo, use, useCallback } from 'react';
+import { memo, use, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
@@ -11,6 +11,7 @@ import { MessageRoleType } from '@/types/message';
 
 import { renderActions } from '../../Actions';
 import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+import ShareMessageModal from './ShareMessageModal';
 
 export type ActionsBarProps = ActionIconGroupProps;
 
@@ -63,6 +64,8 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
   const { message } = App.useApp();
   const virtuosoRef = use(VirtuosoContext);
 
+  const [showShareModal, setShareModal] = useState(false);
+
   const handleActionClick = useCallback(
     async (action: ActionIconGroupEvent) => {
       switch (action.key) {
@@ -113,6 +116,16 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
           ttsMessage(id);
           break;
         }
+
+        // case 'export': {
+        //   setModal(true);
+        //   break;
+        // }
+
+        case 'share': {
+          setShareModal(true);
+          break;
+        }
       }
 
       if (action.keyPath.at(-1) === 'translate') {
@@ -128,7 +141,23 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
 
   const RenderFunction = renderActions[(item?.role || '') as MessageRoleType] ?? ActionsBar;
 
-  return <RenderFunction {...item!} onActionClick={handleActionClick} />;
+  if (!item) return null;
+
+  return (
+    <>
+      <RenderFunction {...item} onActionClick={handleActionClick} />
+      {/*{showModal && (*/}
+      {/*  <ExportPreview content={item.content} onClose={() => setModal(false)} open={showModal} />*/}
+      {/*)}*/}
+      <ShareMessageModal
+        message={item}
+        onCancel={() => {
+          setShareModal(false);
+        }}
+        open={showShareModal}
+      />
+    </>
+  );
 });
 
 export default Actions;

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareImage/Preview.tsx

@@ -0,0 +1,83 @@
+import { ModelTag } from '@lobehub/icons';
+import { Avatar } from '@lobehub/ui';
+import { ChatHeaderTitle } from '@lobehub/ui/chat';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import pkg from '@/../package.json';
+import { ProductLogo } from '@/components/Branding';
+import { ChatItem } from '@/features/Conversation';
+import PluginTag from '@/features/PluginTag';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
+import { ChatMessage } from '@/types/message';
+
+import { useContainerStyles } from '../style';
+import { useStyles } from './style';
+import { FieldType } from './type';
+
+interface PreviewProps extends FieldType {
+  message: ChatMessage;
+  title?: string;
+}
+
+const Preview = memo<PreviewProps>(({ title, withBackground, withFooter, message }) => {
+  const [model, plugins] = useAgentStore((s) => [
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentPlugins(s),
+  ]);
+
+  const [isInbox, description, avatar, backgroundColor] = useSessionStore((s) => [
+    sessionSelectors.isInboxSession(s),
+    sessionMetaSelectors.currentAgentDescription(s),
+    sessionMetaSelectors.currentAgentAvatar(s),
+    sessionMetaSelectors.currentAgentBackgroundColor(s),
+  ]);
+
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles(withBackground);
+  const { styles: containerStyles } = useContainerStyles();
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+  const displayDesc = isInbox ? t('inbox.desc') : description;
+
+  return (
+    <div className={containerStyles.preview}>
+      <div className={withBackground ? styles.background : undefined} id={'preview'}>
+        <Flexbox className={styles.container} gap={16}>
+          <div className={styles.header}>
+            <Flexbox align={'flex-start'} gap={12} horizontal>
+              <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
+              <ChatHeaderTitle
+                desc={displayDesc}
+                tag={
+                  <Flexbox gap={4} horizontal>
+                    <ModelTag model={model} />
+                    {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+                  </Flexbox>
+                }
+                title={displayTitle}
+              />
+            </Flexbox>
+          </div>
+          <Flexbox height={'100%'} style={{ paddingTop: 24, position: 'relative' }} width={'100%'}>
+            <ChatItem id={message.id} index={0} />
+          </Flexbox>
+          {withFooter ? (
+            <Flexbox align={'center'} className={styles.footer} gap={4}>
+              <ProductLogo type={'combine'} />
+              <div className={styles.url}>{pkg.homepage}</div>
+            </Flexbox>
+          ) : (
+            <div />
+          )}
+        </Flexbox>
+      </div>
+    </div>
+  );
+});
+
+export default Preview;

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareImage/index.tsx

@@ -0,0 +1,106 @@
+import { Button, Form, type FormItemProps, Segmented } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { CopyIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useImgToClipboard } from '@/hooks/useImgToClipboard';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { ImageType, imageTypeOptions, useScreenshot } from '@/hooks/useScreenshot';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
+import { ChatMessage } from '@/types/message';
+
+import { useStyles } from '../style';
+import Preview from './Preview';
+import { FieldType } from './type';
+
+const DEFAULT_FIELD_VALUE: FieldType = {
+  imageType: ImageType.JPG,
+  withBackground: true,
+  withFooter: true,
+};
+
+const ShareImage = memo<{ message: ChatMessage; mobile?: boolean }>(({ message }) => {
+  const currentAgentTitle = useSessionStore(sessionMetaSelectors.currentAgentTitle);
+  const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
+  const { t } = useTranslation(['chat', 'common']);
+  const { styles } = useStyles();
+  const { loading, onDownload, title } = useScreenshot({
+    imageType: fieldValue.imageType,
+    title: currentAgentTitle,
+  });
+  const { loading: copyLoading, onCopy } = useImgToClipboard();
+  const settings: FormItemProps[] = [
+    {
+      children: <Switch />,
+      label: t('shareModal.withBackground'),
+      layout: 'horizontal',
+      minWidth: undefined,
+      name: 'withBackground',
+      valuePropName: 'checked',
+    },
+    {
+      children: <Switch />,
+      label: t('shareModal.withFooter'),
+      layout: 'horizontal',
+      minWidth: undefined,
+      name: 'withFooter',
+      valuePropName: 'checked',
+    },
+    {
+      children: <Segmented options={imageTypeOptions} />,
+      label: t('shareModal.imageType'),
+      layout: 'horizontal',
+      minWidth: undefined,
+      name: 'imageType',
+    },
+  ];
+
+  const isMobile = useIsMobile();
+
+  const button = (
+    <>
+      <Button
+        block
+        icon={CopyIcon}
+        loading={copyLoading}
+        onClick={() => onCopy()}
+        size={isMobile ? undefined : 'large'}
+        type={'primary'}
+      >
+        {t('copy', { ns: 'common' })}
+      </Button>
+      <Button block loading={loading} onClick={onDownload} size={isMobile ? undefined : 'large'}>
+        {t('shareModal.download')}
+      </Button>
+    </>
+  );
+
+  return (
+    <>
+      <Flexbox className={styles.body} gap={16} horizontal={!isMobile}>
+        <Preview title={title} {...fieldValue} message={message} />
+        <Flexbox className={styles.sidebar} gap={12}>
+          <Form
+            initialValues={DEFAULT_FIELD_VALUE}
+            items={settings}
+            itemsType={'flat'}
+            onValuesChange={(_, v) => setFieldValue(v)}
+            {...FORM_STYLE}
+          />
+          {!isMobile && button}
+        </Flexbox>
+      </Flexbox>
+      {isMobile && (
+        <Flexbox className={styles.footer} gap={8} horizontal>
+          {button}
+        </Flexbox>
+      )}
+    </>
+  );
+});
+
+export default ShareImage;

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareImage/style.ts

@@ -0,0 +1,49 @@
+import { createStyles } from 'antd-style';
+
+import { imageUrl } from '@/const/url';
+
+export const useStyles = createStyles(({ css, token, cx }, withBackground: boolean) => ({
+  background: css`
+    padding: 24px;
+
+    background-color: ${token.colorBgLayout};
+    background-image: url(${imageUrl('screenshot_background.webp')});
+    background-position: center;
+    background-size: 120% 120%;
+  `,
+  container: cx(
+    withBackground &&
+      css`
+        overflow: hidden;
+        border: 2px solid ${token.colorBorder};
+        border-radius: ${token.borderRadiusLG}px;
+      `,
+
+    css`
+      background: ${token.colorBgLayout};
+    `,
+  ),
+  footer: css`
+    padding: 16px;
+    border-block-start: 1px solid ${token.colorBorder};
+  `,
+  header: css`
+    margin-block-end: -24px;
+    padding: 16px;
+    border-block-end: 1px solid ${token.colorBorder};
+    background: ${token.colorBgContainer};
+  `,
+  role: css`
+    margin-block-start: 12px;
+    padding-block-start: 12px;
+    border-block-start: 1px dashed ${token.colorBorderSecondary};
+    opacity: 0.75;
+
+    * {
+      font-size: 12px !important;
+    }
+  `,
+  url: css`
+    color: ${token.colorTextDescription};
+  `,
+}));

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareImage/type.ts

@@ -0,0 +1,7 @@
+import { ImageType } from '@/hooks/useScreenshot';
+
+export type FieldType = {
+  imageType: ImageType;
+  withBackground: boolean;
+  withFooter: boolean;
+};

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareText/Preview.tsx

@@ -0,0 +1,19 @@
+import { Markdown } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import { useContainerStyles } from '../style';
+
+const Preview = memo<{ content: string }>(({ content }) => {
+  const { styles } = useContainerStyles();
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.preview} style={{ padding: 12 }}>
+      <Markdown variant={isMobile ? 'chat' : undefined}>{content}</Markdown>
+    </div>
+  );
+});
+
+export default Preview;

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareText/index.tsx

@@ -0,0 +1,81 @@
+import { Button, copyToClipboard } from '@lobehub/ui';
+import { App } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { CopyIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/message';
+import { exportFile } from '@/utils/client/exportFile';
+
+import { useStyles } from '../style';
+import Preview from './Preview';
+import { generateMarkdown } from './template';
+
+interface ShareTextProps {
+  item: ChatMessage;
+}
+
+const ShareText = memo<ShareTextProps>(({ item }) => {
+  const { t } = useTranslation(['chat', 'common']);
+  const { styles } = useStyles();
+  const { message } = App.useApp();
+
+  const messages = [item];
+  const topic = useChatStore(topicSelectors.currentActiveTopic, isEqual);
+
+  const title = topic?.title || t('shareModal.exportTitle');
+  const content = generateMarkdown({
+    messages,
+  }).replaceAll('\n\n\n', '\n');
+
+  const isMobile = useIsMobile();
+
+  const button = (
+    <>
+      <Button
+        block
+        icon={CopyIcon}
+        onClick={async () => {
+          await copyToClipboard(content);
+          message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
+        }}
+        size={isMobile ? undefined : 'large'}
+        type={'primary'}
+      >
+        {t('copy', { ns: 'common' })}
+      </Button>
+      <Button
+        block
+        onClick={() => {
+          exportFile(content, `${title}.md`);
+        }}
+        size={isMobile ? undefined : 'large'}
+      >
+        {t('shareModal.downloadFile')}
+      </Button>
+    </>
+  );
+
+  return (
+    <>
+      <Flexbox className={styles.body} gap={16} horizontal={!isMobile}>
+        <Preview content={content} />
+        <Flexbox className={styles.sidebar} gap={12}>
+          {!isMobile && button}
+        </Flexbox>
+      </Flexbox>
+      {isMobile && (
+        <Flexbox className={styles.footer} gap={8} horizontal>
+          {button}
+        </Flexbox>
+      )}
+    </>
+  );
+});
+
+export default ShareText;

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareText/template.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest';
+
+import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/message';
+
+import { generateMarkdown } from './template';
+
+describe('generateMarkdown', () => {
+  // 创建测试用的消息数据
+  const mockMessages = [
+    {
+      id: '1',
+      content: 'Hello',
+      role: 'user',
+      createdAt: Date.now(),
+    },
+    {
+      id: '2',
+      content: 'Hi there',
+      role: 'assistant',
+      createdAt: Date.now(),
+    },
+    {
+      id: '3',
+      content: LOADING_FLAT,
+      role: 'assistant',
+      createdAt: Date.now(),
+    },
+    {
+      id: '4',
+      content: '{"result": "tool data"}',
+      role: 'tool',
+      createdAt: Date.now(),
+      tool_call_id: 'tool1',
+    },
+    {
+      id: '5',
+      content: 'Message with tools',
+      role: 'assistant',
+      createdAt: Date.now(),
+      tools: [{ name: 'calculator', result: '42' }],
+    },
+  ] as ChatMessage[];
+
+  const defaultParams = {
+    messages: mockMessages,
+    title: 'Chat Title',
+    includeTool: false,
+    includeUser: true,
+    withSystemRole: false,
+    withRole: false,
+    systemRole: '',
+  };
+
+  it('should filter out loading messages', () => {
+    const result = generateMarkdown(defaultParams);
+
+    expect(result).not.toContain(LOADING_FLAT);
+  });
+
+  it('should handle messages with special characters', () => {
+    const messagesWithSpecialChars = [
+      {
+        id: '1',
+        content: '**Bold** *Italic* `Code`',
+        role: 'user',
+        createdAt: Date.now(),
+      },
+    ] as ChatMessage[];
+
+    const result = generateMarkdown({
+      ...defaultParams,
+      messages: messagesWithSpecialChars,
+    });
+
+    expect(result).toContain('**Bold** *Italic* `Code`');
+  });
+});

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareText/template.ts

@@ -0,0 +1,26 @@
+import { template } from 'lodash-es';
+
+import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/message';
+
+const markdownTemplate = template(
+  `<% messages.forEach(function(chat) { %>
+
+{{chat.content}}
+
+<% }); %>
+`,
+  {
+    evaluate: /<%([\S\s]+?)%>/g,
+    interpolate: /{{([\S\s]+?)}}/g,
+  },
+);
+
+interface MarkdownParams {
+  messages: ChatMessage[];
+}
+
+export const generateMarkdown = ({ messages }: MarkdownParams) =>
+  markdownTemplate({
+    messages: messages.filter((m) => m.content !== LOADING_FLAT),
+  });

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareText/type.ts

@@ -0,0 +1,3 @@
+export type FieldType = {
+  includeTool: boolean;
+};

package/src/features/Conversation/components/ChatItem/ShareMessageModal/index.tsx

@@ -0,0 +1,68 @@
+import { Modal, Segmented, type SegmentedProps } from '@lobehub/ui';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { ChatMessage } from '@/types/message';
+
+import ShareImage from './ShareImage';
+import ShareText from './ShareText';
+
+enum Tab {
+  Screenshot = 'screenshot',
+  Text = 'text',
+}
+
+interface ShareModalProps {
+  message: ChatMessage;
+  onCancel: () => void;
+  open: boolean;
+}
+
+const ShareModal = memo<ShareModalProps>(({ onCancel, open, message }) => {
+  const [tab, setTab] = useState<Tab>(Tab.Screenshot);
+  const { t } = useTranslation('chat');
+
+  const options: SegmentedProps['options'] = useMemo(
+    () => [
+      {
+        label: t('shareModal.screenshot'),
+        value: Tab.Screenshot,
+      },
+      {
+        label: t('shareModal.text'),
+        value: Tab.Text,
+      },
+    ],
+    [],
+  );
+
+  const isMobile = useIsMobile();
+  return (
+    <Modal
+      allowFullscreen
+      centered={false}
+      footer={null}
+      onCancel={onCancel}
+      open={open}
+      title={t('share', { ns: 'common' })}
+      width={1440}
+    >
+      <Flexbox gap={isMobile ? 8 : 24}>
+        <Segmented
+          block
+          onChange={(value) => setTab(value as Tab)}
+          options={options}
+          style={{ width: '100%' }}
+          value={tab}
+          variant={'filled'}
+        />
+        {tab === Tab.Screenshot && <ShareImage message={message} mobile={isMobile} />}
+        {tab === Tab.Text && <ShareText item={message} />}
+      </Flexbox>
+    </Modal>
+  );
+});
+
+export default ShareModal;

package/src/features/Conversation/components/ChatItem/ShareMessageModal/style.ts

@@ -0,0 +1,60 @@
+import { createStyles } from 'antd-style';
+
+export const useContainerStyles = createStyles(({ css, token, stylish, cx, responsive }) => ({
+  preview: cx(
+    stylish.noScrollbar,
+    css`
+      overflow: hidden scroll;
+
+      width: 100%;
+      max-height: 70dvh;
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadiusLG}px;
+
+      background: ${token.colorBgLayout};
+
+      * {
+        pointer-events: none;
+
+        ::-webkit-scrollbar {
+          width: 0 !important;
+          height: 0 !important;
+        }
+      }
+
+      ${responsive.mobile} {
+        max-height: 40dvh;
+      }
+    `,
+  ),
+}));
+
+export const useStyles = createStyles(({ responsive, token, css }) => ({
+  body: css`
+    ${responsive.mobile} {
+      padding-block-end: 68px;
+    }
+  `,
+  footer: css`
+    ${responsive.mobile} {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline: 0;
+
+      width: 100%;
+      margin: 0;
+      padding: 16px;
+
+      background: ${token.colorBgContainer};
+    }
+  `,
+  sidebar: css`
+    flex: none;
+    width: max(240px, 25%);
+    ${responsive.mobile} {
+      flex: 1;
+      width: unset;
+      margin-inline: -16px;
+    }
+  `,
+}));

package/src/features/Conversation/hooks/useChatListActionsBar.tsx

@@ -1,5 +1,14 @@
 import type { ActionIconGroupItemType } from '@lobehub/ui';
-import { Copy, Edit, ListRestart, RotateCcw, Split, Trash } from 'lucide-react';
+import {
+  Copy,
+  DownloadIcon,
+  Edit,
+  ListRestart,
+  RotateCcw,
+  Share2,
+  Split,
+  Trash,
+} from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -12,7 +21,9 @@ interface ChatListActionsBar {
   delAndRegenerate: ActionIconGroupItemType;
   divider: { type: 'divider' };
   edit: ActionIconGroupItemType;
+  export: ActionIconGroupItemType;
   regenerate: ActionIconGroupItemType;
+  share: ActionIconGroupItemType;
 }
 
 export const useChatListActionsBar = ({
@@ -59,11 +70,21 @@ export const useChatListActionsBar = ({
         key: 'edit',
         label: t('edit', { defaultValue: 'Edit' }),
       },
+      export: {
+        icon: DownloadIcon,
+        key: 'export',
+        label: '导出为 PDF',
+      },
       regenerate: {
         icon: RotateCcw,
         key: 'regenerate',
         label: t('regenerate', { defaultValue: 'Regenerate' }),
       },
+      share: {
+        icon: Share2,
+        key: 'share',
+        label: t('share', { defaultValue: 'Share' }),
+      },
     }),
     [hasThread],
   );