@lobehub/chat 1.71.4 → 1.72.0

package/src/database/{server/models → models}/__tests__/plugin.test.ts

@@ -1,12 +1,13 @@
 // @vitest-environment node
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { getTestDBInstance } from '@/database/server/core/dbForTest';
+import { LobeChatDatabase } from '@/database/type';
 
-import { NewInstalledPlugin, userInstalledPlugins, users } from '../../../schemas';
-import { PluginModel } from '../plugin';
+import { NewInstalledPlugin, userInstalledPlugins, users } from '../../schemas';
+import { PluginModel } from '../../server/models/plugin';
+import { getTestDB } from './_util';
 
-let serverDB = await getTestDBInstance();
+const serverDB: LobeChatDatabase = await getTestDB();
 
 const userId = 'plugin-db';
 const pluginModel = new PluginModel(serverDB, userId);

package/src/database/{server/models → models}/__tests__/session.test.ts

@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { getTestDBInstance } from '@/database/server/core/dbForTest';
+import { LobeChatDatabase } from '@/database/type';
 import { idGenerator } from '@/database/utils/idGenerator';
 
 import {
@@ -15,10 +16,11 @@ import {
   sessions,
   topics,
   users,
-} from '../../../schemas';
-import { SessionModel } from '../session';
+} from '../../schemas';
+import { SessionModel } from '../../server/models/session';
+import { getTestDB } from './_util';
 
-let serverDB = await getTestDBInstance();
+const serverDB: LobeChatDatabase = await getTestDB();
 
 const userId = 'session-user';
 const sessionModel = new SessionModel(serverDB, userId);
@@ -236,8 +238,8 @@ describe('SessionModel', () => {
       ]);
 
       await serverDB.insert(agentsToSessions).values([
-        { agentId: 'agent-1', sessionId: '1' },
-        { agentId: 'agent-2', sessionId: '2' },
+        { agentId: 'agent-1', sessionId: '1', userId },
+        { agentId: 'agent-2', sessionId: '2', userId },
       ]);
 
       const result = await sessionModel.queryByKeyword('hello');
@@ -265,8 +267,8 @@ describe('SessionModel', () => {
       ]);
 
       await serverDB.insert(agentsToSessions).values([
-        { agentId: 'agent-1', sessionId: '1' },
-        { agentId: 'agent-2', sessionId: '2' },
+        { agentId: 'agent-1', sessionId: '1', userId },
+        { agentId: 'agent-2', sessionId: '2', userId },
       ]);
 
       const result = await sessionModel.queryByKeyword('keyword');
@@ -288,9 +290,9 @@ describe('SessionModel', () => {
       ]);
 
       await serverDB.insert(agentsToSessions).values([
-        { agentId: '1', sessionId: '1' },
-        { agentId: '2', sessionId: '2' },
-        { agentId: '3', sessionId: '3' },
+        { agentId: '1', sessionId: '1', userId },
+        { agentId: '2', sessionId: '2', userId },
+        { agentId: '3', sessionId: '3', userId },
       ]);
 
       const result = await sessionModel.queryByKeyword('keyword');
@@ -361,7 +363,8 @@ describe('SessionModel', () => {
       const result = await sessionModel.batchCreate(sessions);
 
       // 断言结果
-      expect(result.rowCount).toEqual(2);
+      // pglite return affectedRows while postgres return rowCount
+      expect((result as any).affectedRows || result.rowCount).toEqual(2);
     });
 
     it.skip('should set group to default if group does not exist', async () => {
@@ -391,7 +394,7 @@ describe('SessionModel', () => {
           .insert(sessions)
           .values({ id: '1', userId, type: 'agent', title: 'Original Session', pinned: true });
         await trx.insert(agents).values({ id: 'agent-1', userId, model: 'gpt-3.5-turbo' });
-        await trx.insert(agentsToSessions).values({ agentId: 'agent-1', sessionId: '1' });
+        await trx.insert(agentsToSessions).values({ agentId: 'agent-1', sessionId: '1', userId });
       });
 
       // 调用 duplicate 方法
@@ -801,9 +804,9 @@ describe('SessionModel', () => {
 
         // Link agents to sessions
         await trx.insert(agentsToSessions).values([
-          { sessionId: '1', agentId: 'a1' },
-          { sessionId: '2', agentId: 'a2' },
-          { sessionId: '3', agentId: 'a3' },
+          { sessionId: '1', agentId: 'a1', userId },
+          { sessionId: '2', agentId: 'a2', userId },
+          { sessionId: '3', agentId: 'a3', userId },
         ]);
 
         // Create topics (different counts for ranking)
@@ -863,9 +866,9 @@ describe('SessionModel', () => {
         ]);
 
         await trx.insert(agentsToSessions).values([
-          { sessionId: '1', agentId: 'a1' },
-          { sessionId: '2', agentId: 'a2' },
-          { sessionId: '3', agentId: 'a3' },
+          { sessionId: '1', agentId: 'a1', userId },
+          { sessionId: '2', agentId: 'a2', userId },
+          { sessionId: '3', agentId: 'a3', userId },
         ]);
 
         await trx.insert(topics).values([
@@ -899,8 +902,8 @@ describe('SessionModel', () => {
         ]);
 
         await trx.insert(agentsToSessions).values([
-          { sessionId: '1', agentId: 'a1' },
-          { sessionId: '2', agentId: 'a2' },
+          { sessionId: '1', agentId: 'a1', userId },
+          { sessionId: '2', agentId: 'a2', userId },
         ]);
 
         // No topics created

package/src/database/{server/models → models}/__tests__/sessionGroup.test.ts

@@ -2,12 +2,13 @@
 import { eq } from 'drizzle-orm/expressions';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { getTestDBInstance } from '@/database/server/core/dbForTest';
+import { LobeChatDatabase } from '@/database/type';
 
-import { sessionGroups, users } from '../../../schemas';
-import { SessionGroupModel } from '../sessionGroup';
+import { sessionGroups, users } from '../../schemas';
+import { SessionGroupModel } from '../../server/models/sessionGroup';
+import { getTestDB } from './_util';
 
-let serverDB = await getTestDBInstance();
+const serverDB: LobeChatDatabase = await getTestDB();
 
 const userId = 'session-group-model-test-user-id';
 const sessionGroupModel = new SessionGroupModel(serverDB, userId);

package/src/database/{server/models → models}/__tests__/topic.test.ts

@@ -1,12 +1,13 @@
 import { eq, inArray } from 'drizzle-orm/expressions';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { getTestDBInstance } from '@/database/server/core/dbForTest';
+import { LobeChatDatabase } from '@/database/type';
 
-import { messages, sessions, topics, users } from '../../../schemas';
-import { CreateTopicParams, TopicModel } from '../topic';
+import { messages, sessions, topics, users } from '../../schemas';
+import { CreateTopicParams, TopicModel } from '../../server/models/topic';
+import { getTestDB } from './_util';
 
-let serverDB = await getTestDBInstance();
+const serverDB: LobeChatDatabase = await getTestDB();
 
 const userId = 'topic-user-test';
 const sessionId = 'topic-session';

package/src/database/repositories/dataImporter/index.ts

@@ -138,6 +138,7 @@ export class DataImporterRepos {
             shouldInsertSessionAgents.map(({ id }, index) => ({
               agentId: agentMapArray[index].id,
               sessionId: sessionIdMap[id],
+              userId: this.userId,
             })),
           );
         }
@@ -291,6 +292,7 @@ export class DataImporterRepos {
                 state: msg.pluginState,
                 toolCallId: msg.tool_call_id,
                 type: msg.plugin?.type,
+                userId: this.userId,
               })),
             );
           }
@@ -302,6 +304,7 @@ export class DataImporterRepos {
               translateInserts.map((msg) => ({
                 id: messageIdMap[msg.id],
                 ...msg.extra?.translate,
+                userId: this.userId,
               })),
             );
           }

package/src/database/schemas/file.ts

@@ -1,6 +1,7 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix  */
 import {
   boolean,
+  index,
   integer,
   jsonb,
   pgTable,
@@ -23,7 +24,9 @@ export const globalFiles = pgTable('global_files', {
   size: integer('size').notNull(),
   url: text('url').notNull(),
   metadata: jsonb('metadata'),
-
+  creator: text('creator')
+    .references(() => users.id, { onDelete: 'set null' })
+    .notNull(),
   createdAt: createdAt(),
   accessedAt: accessedAt(),
 });
@@ -31,31 +34,38 @@ export const globalFiles = pgTable('global_files', {
 export type NewGlobalFile = typeof globalFiles.$inferInsert;
 export type GlobalFileItem = typeof globalFiles.$inferSelect;
 
-export const files = pgTable('files', {
-  id: text('id')
-    .$defaultFn(() => idGenerator('files'))
-    .primaryKey(),
-
-  userId: text('user_id')
-    .references(() => users.id, { onDelete: 'cascade' })
-    .notNull(),
-  fileType: varchar('file_type', { length: 255 }).notNull(),
-  fileHash: varchar('file_hash', { length: 64 }).references(() => globalFiles.hashId, {
-    onDelete: 'no action',
-  }),
-  name: text('name').notNull(),
-  size: integer('size').notNull(),
-  url: text('url').notNull(),
-
-  metadata: jsonb('metadata'),
-  chunkTaskId: uuid('chunk_task_id').references(() => asyncTasks.id, { onDelete: 'set null' }),
-  embeddingTaskId: uuid('embedding_task_id').references(() => asyncTasks.id, {
-    onDelete: 'set null',
-  }),
+export const files = pgTable(
+  'files',
+  {
+    id: text('id')
+      .$defaultFn(() => idGenerator('files'))
+      .primaryKey(),
 
-  ...timestamps,
-});
+    userId: text('user_id')
+      .references(() => users.id, { onDelete: 'cascade' })
+      .notNull(),
+    fileType: varchar('file_type', { length: 255 }).notNull(),
+    fileHash: varchar('file_hash', { length: 64 }).references(() => globalFiles.hashId, {
+      onDelete: 'no action',
+    }),
+    name: text('name').notNull(),
+    size: integer('size').notNull(),
+    url: text('url').notNull(),
+
+    metadata: jsonb('metadata'),
+    chunkTaskId: uuid('chunk_task_id').references(() => asyncTasks.id, { onDelete: 'set null' }),
+    embeddingTaskId: uuid('embedding_task_id').references(() => asyncTasks.id, {
+      onDelete: 'set null',
+    }),
 
+    ...timestamps,
+  },
+  (table) => {
+    return {
+      fileHashIdx: index('file_hash_idx').on(table.fileHash),
+    };
+  },
+);
 export type NewFile = typeof files.$inferInsert;
 export type FileItem = typeof files.$inferSelect;
 
@@ -97,19 +107,15 @@ export const knowledgeBaseFiles = pgTable(
       .references(() => files.id, { onDelete: 'cascade' })
       .notNull(),
 
-    // userId: text('user_id')
-    //   .references(() => users.id, { onDelete: 'cascade' })
-    //   .notNull(),
+    userId: text('user_id')
+      .references(() => users.id, { onDelete: 'cascade' })
+      .notNull(),
 
     createdAt: createdAt(),
   },
   (t) => ({
     pk: primaryKey({
-      columns: [
-        t.knowledgeBaseId,
-        t.fileId,
-        // t.userId
-      ],
+      columns: [t.knowledgeBaseId, t.fileId],
     }),
   }),
 );

package/src/database/schemas/message.ts

@@ -95,6 +95,9 @@ export const messagePlugins = pgTable('message_plugins', {
   identifier: text('identifier'),
   state: jsonb('state'),
   error: jsonb('error'),
+  userId: text('user_id')
+    .references(() => users.id, { onDelete: 'cascade' })
+    .notNull(),
 });
 
 export type MessagePluginItem = typeof messagePlugins.$inferSelect;
@@ -107,6 +110,9 @@ export const messageTTS = pgTable('message_tts', {
   contentMd5: text('content_md5'),
   fileId: text('file_id').references(() => files.id, { onDelete: 'cascade' }),
   voice: text('voice'),
+  userId: text('user_id')
+    .references(() => users.id, { onDelete: 'cascade' })
+    .notNull(),
 });
 
 export const messageTranslates = pgTable('message_translates', {
@@ -116,6 +122,9 @@ export const messageTranslates = pgTable('message_translates', {
   content: text('content'),
   from: text('from'),
   to: text('to'),
+  userId: text('user_id')
+    .references(() => users.id, { onDelete: 'cascade' })
+    .notNull(),
 });
 
 // if the message contains a file
@@ -129,6 +138,9 @@ export const messagesFiles = pgTable(
     messageId: text('message_id')
       .notNull()
       .references(() => messages.id, { onDelete: 'cascade' }),
+    userId: text('user_id')
+      .references(() => users.id, { onDelete: 'cascade' })
+      .notNull(),
   },
   (t) => ({
     pk: primaryKey({ columns: [t.fileId, t.messageId] }),
@@ -142,6 +154,9 @@ export const messageQueries = pgTable('message_queries', {
     .notNull(),
   rewriteQuery: text('rewrite_query'),
   userQuery: text('user_query'),
+  userId: text('user_id')
+    .references(() => users.id, { onDelete: 'cascade' })
+    .notNull(),
   embeddingsId: uuid('embeddings_id').references(() => embeddings.id, { onDelete: 'set null' }),
 });
 
@@ -154,6 +169,9 @@ export const messageQueryChunks = pgTable(
     queryId: uuid('query_id').references(() => messageQueries.id, { onDelete: 'cascade' }),
     chunkId: uuid('chunk_id').references(() => chunks.id, { onDelete: 'cascade' }),
     similarity: numeric('similarity', { precision: 6, scale: 5 }),
+    userId: text('user_id')
+      .references(() => users.id, { onDelete: 'cascade' })
+      .notNull(),
   },
   (t) => ({
     pk: primaryKey({ columns: [t.chunkId, t.messageId, t.queryId] }),
@@ -168,6 +186,9 @@ export const messageChunks = pgTable(
   {
     messageId: text('message_id').references(() => messages.id, { onDelete: 'cascade' }),
     chunkId: uuid('chunk_id').references(() => chunks.id, { onDelete: 'cascade' }),
+    userId: text('user_id')
+      .references(() => users.id, { onDelete: 'cascade' })
+      .notNull(),
   },
   (t) => ({
     pk: primaryKey({ columns: [t.chunkId, t.messageId] }),

package/src/database/schemas/relations.ts

@@ -11,6 +11,7 @@ import { messages, messagesFiles } from './message';
 import { chunks, unstructuredChunks } from './rag';
 import { sessionGroups, sessions } from './session';
 import { threads, topics } from './topic';
+import { users } from './user';
 
 export const agentsToSessions = pgTable(
   'agents_to_sessions',
@@ -21,6 +22,9 @@ export const agentsToSessions = pgTable(
     sessionId: text('session_id')
       .notNull()
       .references(() => sessions.id, { onDelete: 'cascade' }),
+    userId: text('user_id')
+      .references(() => users.id, { onDelete: 'cascade' })
+      .notNull(),
   },
   (t) => ({
     pk: primaryKey({ columns: [t.agentId, t.sessionId] }),
@@ -36,6 +40,9 @@ export const filesToSessions = pgTable(
     sessionId: text('session_id')
       .notNull()
       .references(() => sessions.id, { onDelete: 'cascade' }),
+    userId: text('user_id')
+      .references(() => users.id, { onDelete: 'cascade' })
+      .notNull(),
   },
   (t) => ({
     pk: primaryKey({ columns: [t.fileId, t.sessionId] }),
@@ -48,6 +55,9 @@ export const fileChunks = pgTable(
     fileId: varchar('file_id').references(() => files.id, { onDelete: 'cascade' }),
     chunkId: uuid('chunk_id').references(() => chunks.id, { onDelete: 'cascade' }),
     createdAt: createdAt(),
+    userId: text('user_id')
+      .references(() => users.id, { onDelete: 'cascade' })
+      .notNull(),
   },
   (t) => ({
     pk: primaryKey({ columns: [t.fileId, t.chunkId] }),

package/src/database/server/models/__tests__/nextauth.test.ts

@@ -16,9 +16,11 @@ import {
   users,
 } from '@/database/schemas';
 import { getTestDBInstance } from '@/database/server/core/dbForTest';
+import { LobeChatDatabase } from '@/database/type';
 import { LobeNextAuthDbAdapter } from '@/libs/next-auth/adapter';
 
 let serverDB = await getTestDBInstance();
+
 let nextAuthAdapter = LobeNextAuthDbAdapter(serverDB);
 
 const userId = 'user-db';

package/src/database/server/models/__tests__/user.test.ts

@@ -1,15 +1,17 @@
+import { TRPCError } from '@trpc/server';
 import dayjs from 'dayjs';
 import { eq } from 'drizzle-orm/expressions';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { getTestDBInstance } from '@/database/server/core/dbForTest';
+import { LobeChatDatabase } from '@/database/type';
 import { KeyVaultsGateKeeper } from '@/server/modules/KeyVaultsEncrypt';
 import { UserGuide, UserPreference } from '@/types/user';
 
 import { UserSettingsItem, userSettings, users } from '../../../schemas';
 import { SessionModel } from '../session';
-import { UserModel } from '../user';
+import { UserModel, UserNotFoundError } from '../user';
 
 let serverDB = await getTestDBInstance();
 
@@ -408,3 +410,13 @@ describe('UserModel', () => {
     });
   });
 });
+
+describe('UserNotFoundError', () => {
+  it('should extend TRPCError with correct code and message', () => {
+    const error = new UserNotFoundError();
+
+    expect(error).toBeInstanceOf(TRPCError);
+    expect(error.code).toBe('UNAUTHORIZED');
+    expect(error.message).toBe('user not found');
+  });
+});

package/src/database/server/models/chunk.ts

@@ -31,7 +31,11 @@ export class ChunkModel {
 
       const result = await trx.insert(chunks).values(params).returning();
 
-      const fileChunksData = result.map((chunk) => ({ chunkId: chunk.id, fileId }));
+      const fileChunksData = result.map((chunk) => ({
+        chunkId: chunk.id,
+        fileId,
+        userId: this.userId,
+      }));
 
       if (fileChunksData.length > 0) {
         await trx.insert(fileChunks).values(fileChunksData);

package/src/database/server/models/file.ts

@@ -33,6 +33,7 @@ export class FileModel {
     const result = await this.db.transaction(async (trx) => {
       if (insertToGlobalFiles) {
         await trx.insert(globalFiles).values({
+          creator: this.userId,
           fileType: params.fileType,
           hashId: params.fileHash!,
           metadata: params.metadata,
@@ -49,9 +50,11 @@ export class FileModel {
       const item = result[0];
 
       if (params.knowledgeBaseId) {
-        await trx
-          .insert(knowledgeBaseFiles)
-          .values({ fileId: item.id, knowledgeBaseId: params.knowledgeBaseId });
+        await trx.insert(knowledgeBaseFiles).values({
+          fileId: item.id,
+          knowledgeBaseId: params.knowledgeBaseId,
+          userId: this.userId,
+        });
       }
 
       return item;

package/src/database/server/models/message.ts

@@ -21,6 +21,7 @@ import {
   CreateMessageParams,
   MessageItem,
   ModelRankItem,
+  NewMessageQueryParams,
   UpdateMessageParams,
 } from '@/types/message';
 import { merge } from '@/utils/merge';
@@ -28,7 +29,6 @@ import { today } from '@/utils/time';
 
 import {
   MessagePluginItem,
-  NewMessageQuery,
   chunks,
   embeddings,
   fileChunks,
@@ -458,13 +458,14 @@ export class MessageModel {
           state: pluginState,
           toolCallId: message.tool_call_id,
           type: plugin?.type,
+          userId: this.userId,
         });
       }
 
       if (files && files.length > 0) {
         await trx
           .insert(messagesFiles)
-          .values(files.map((file) => ({ fileId: file, messageId: id })));
+          .values(files.map((file) => ({ fileId: file, messageId: id, userId: this.userId })));
       }
 
       if (fileChunks && fileChunks.length > 0 && ragQueryId) {
@@ -474,6 +475,7 @@ export class MessageModel {
             messageId: id,
             queryId: ragQueryId,
             similarity: chunk.similarity?.toString(),
+            userId: this.userId,
           })),
         );
       }
@@ -491,8 +493,11 @@ export class MessageModel {
     return this.db.insert(messages).values(messagesToInsert);
   };
 
-  createMessageQuery = async (params: NewMessageQuery) => {
-    const result = await this.db.insert(messageQueries).values(params).returning();
+  createMessageQuery = async (params: NewMessageQueryParams) => {
+    const result = await this.db
+      .insert(messageQueries)
+      .values({ ...params, userId: this.userId })
+      .returning();
 
     return result[0];
   };
@@ -504,7 +509,9 @@ export class MessageModel {
       if (imageList && imageList.length > 0) {
         await trx
           .insert(messagesFiles)
-          .values(imageList.map((file) => ({ fileId: file.id, messageId: id })));
+          .values(
+            imageList.map((file) => ({ fileId: file.id, messageId: id, userId: this.userId })),
+          );
       }
 
       return trx
@@ -547,7 +554,7 @@ export class MessageModel {
 
     // If the message does not exist in the translate table, insert it
     if (!result) {
-      return this.db.insert(messageTranslates).values({ ...translate, id });
+      return this.db.insert(messageTranslates).values({ ...translate, id, userId: this.userId });
     }
 
     // or just update the existing one
@@ -561,9 +568,13 @@ export class MessageModel {
 
     // If the message does not exist in the translate table, insert it
     if (!result) {
-      return this.db
-        .insert(messageTTS)
-        .values({ contentMd5: tts.contentMd5, fileId: tts.file, id, voice: tts.voice });
+      return this.db.insert(messageTTS).values({
+        contentMd5: tts.contentMd5,
+        fileId: tts.file,
+        id,
+        userId: this.userId,
+        voice: tts.voice,
+      });
     }
 
     // or just update the existing one
@@ -618,13 +629,19 @@ export class MessageModel {
       .where(and(eq(messages.userId, this.userId), inArray(messages.id, ids)));
 
   deleteMessageTranslate = async (id: string) =>
-    this.db.delete(messageTranslates).where(and(eq(messageTranslates.id, id)));
+    this.db
+      .delete(messageTranslates)
+      .where(and(eq(messageTranslates.id, id), eq(messageTranslates.userId, this.userId)));
 
   deleteMessageTTS = async (id: string) =>
-    this.db.delete(messageTTS).where(and(eq(messageTTS.id, id)));
+    this.db
+      .delete(messageTTS)
+      .where(and(eq(messageTTS.id, id), eq(messageTTS.userId, this.userId)));
 
   deleteMessageQuery = async (id: string) =>
-    this.db.delete(messageQueries).where(and(eq(messageQueries.id, id)));
+    this.db
+      .delete(messageQueries)
+      .where(and(eq(messageQueries.id, id), eq(messageQueries.userId, this.userId)));
 
   deleteMessagesBySession = async (sessionId?: string | null, topicId?: string | null) =>
     this.db

package/src/database/server/models/session.ts

@@ -220,6 +220,7 @@ export class SessionModel {
       await trx.insert(agentsToSessions).values({
         agentId: newAgents[0].id,
         sessionId: id,
+        userId: this.userId,
       });
 
       return result[0];

package/src/features/ShareModal/ShareImage/index.tsx

@@ -1,10 +1,12 @@
-import { Form, type FormItemProps } from '@lobehub/ui';
+import { Form, type FormItemProps, Icon } from '@lobehub/ui';
 import { Button, Segmented, 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';
@@ -32,7 +34,9 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
     title: currentAgentTitle,
     width: mobile ? 720 : undefined,
   });
-
+  const { loading: copyLoading, onCopy } = useImgToClipboard({
+    width: mobile ? 720 : undefined,
+  });
   const settings: FormItemProps[] = [
     {
       children: <Switch />,
@@ -66,15 +70,27 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
   const isMobile = useIsMobile();
 
   const button = (
-    <Button
-      block
-      loading={loading}
-      onClick={onDownload}
-      size={isMobile ? undefined : 'large'}
-      type={'primary'}
-    >
-      {t('shareModal.download')}
-    </Button>
+    <>
+      <Button
+        block
+        icon={<Icon 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'}
+        variant={'filled'}
+      >
+        {t('shareModal.download')}
+      </Button>
+    </>
   );
 
   return (