Skip to content

Commit 25491e7

Browse files
canisminor1990canisminor1990
authored
✨ feat: Emoji picker support select model and provider icon (#501)
1 parent cf3f509 commit 25491e7

5 files changed

Lines changed: 52 additions & 21 deletions

File tree

‎.dumirc.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export default defineConfig({
101101
favicons: ['https://lobehub.com/favicon.ico'],
102102
jsMinifier: 'swc',
103103
locales: [{ id: 'en-US', name: 'English' }],
104-
mako: isWin || isProduction ? false : {},
104+
// mako: isWin || isProduction ? false : {},
105105
mfsu: isWin ? undefined : {},
106106
npmClient: 'pnpm',
107107
publicPath: '/',

‎src/EmojiPicker/EmojiPicker.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import data from '@emoji-mart/data';
44
import Picker from '@emoji-mart/react';
5+
import { getLobeIconCDN, toc } from '@lobehub/icons';
56
import { cx, useTheme } from 'antd-style';
67
import chroma from 'chroma-js';
78
import { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';
@@ -33,6 +34,7 @@ const EmojiPicker = memo<EmojiPickerProps>(
3334
locale = 'en-US',
3435
allowUpload,
3536
allowDelete,
37+
allowModelAvatar,
3638
texts,
3739
onDelete,
3840
compressSize = 256,
@@ -87,6 +89,26 @@ const EmojiPicker = memo<EmojiPickerProps>(
8789
setVisible(false);
8890
};
8991

92+
// Generate model avatars from @lobehub/icons when allowModelAvatar is enabled
93+
const mergedCustomEmojis = useMemo(() => {
94+
if (!allowModelAvatar) return customEmojis;
95+
96+
const modelIcons = toc.filter((item) => item.group !== 'application');
97+
98+
const modelEmojisCategory = {
99+
id: 'models',
100+
name: 'Models / Providers',
101+
emojis: modelIcons.map((item) => ({
102+
id: item.id.toLowerCase(),
103+
name: item.title,
104+
keywords: [item.title, item.id, item.fullTitle],
105+
skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],
106+
})),
107+
};
108+
109+
return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];
110+
}, [allowModelAvatar, customEmojis]);
111+
90112
const emojiText = texts?.emoji ?? t('emojiPicker.emoji');
91113
const uploadText = texts?.upload ?? t('emojiPicker.upload');
92114
const deleteText = texts?.delete ?? t('emojiPicker.delete');
@@ -160,7 +182,7 @@ const EmojiPicker = memo<EmojiPickerProps>(
160182
)}
161183
{tab === 'emoji' && (
162184
<Picker
163-
custom={customEmojis}
185+
custom={mergedCustomEmojis}
164186
data={data}
165187
i18n={i18n}
166188
icons={'outline'}

‎src/EmojiPicker/demos/ModelAvatar.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { EmojiPicker } from '@lobehub/ui';
2+
3+
export default () => <EmojiPicker allowModelAvatar onChange={console.log} />;

‎src/EmojiPicker/index.md‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
nav: Components
33
group: Data Entry
44
title: EmojiPicker
5-
description: EmojiPicker is a component that allows users to select emoji icons or upload custom avatars. It supports multiple tabs, custom emoji sets, and includes options for uploading and deleting avatars.
5+
description: EmojiPicker is a component that allows users to select emoji icons or upload custom avatars. It supports multiple tabs, custom emoji sets, model avatars from @lobehub/icons, and includes options for uploading and deleting avatars.
66
---
77

88
## Default
@@ -21,30 +21,35 @@ description: EmojiPicker is a component that allows users to select emoji icons
2121

2222
<code src="./demos/CustomTabs.tsx" center></code>
2323

24+
## Model Avatar
25+
26+
<code src="./demos/ModelAvatar.tsx" center></code>
27+
2428
## Controlled
2529

2630
<code src="./demos/Control.tsx" center></code>
2731

2832
## APIs
2933

30-
| Property | Description | Type | Default |
31-
| -------------- | ----------------------------------------- | ------------------------------------------------------- | ------- |
32-
| value | Selected emoji or avatar | `string` | - |
33-
| defaultAvatar | Default avatar to display | `string` | - |
34-
| onChange | Callback when emoji is selected | `(emoji: string) => void` | - |
35-
| size | Size of the avatar | `number` | - |
36-
| allowUpload | Whether to allow avatar uploads | `boolean` | `false` |
37-
| allowDelete | Whether to allow avatar deletion | `boolean` | `false` |
38-
| onDelete | Callback when avatar is deleted | `() => void` | - |
39-
| onUpload | Callback when avatar is uploaded | `(file: File) => Promise<string>` | - |
40-
| compressSize | Maximum size for image compression | `number` | - |
41-
| loading | Whether the component is in loading state | `boolean` | `false` |
42-
| locale | Locale for the emoji picker | `string` | - |
43-
| customEmojis | Custom emoji sets | `EmojiPickerCustomEmoji[]` | - |
44-
| customTabs | Custom tabs for the picker | `EmojiPickerCustomTab[]` | - |
45-
| popupClassName | Class name for the popup | `string` | - |
46-
| popupStyle | Style for the popup | `CSSProperties` | - |
47-
| texts | Customizable text labels | `{ delete?: string; emoji?: string; upload?: string; }` | - |
34+
| Property | Description | Type | Default |
35+
| ---------------- | ------------------------------------------------- | ------------------------------------------------------- | ------- |
36+
| value | Selected emoji or avatar | `string` | - |
37+
| defaultAvatar | Default avatar to display | `string` | - |
38+
| onChange | Callback when emoji is selected | `(emoji: string) => void` | - |
39+
| size | Size of the avatar | `number` | - |
40+
| allowUpload | Whether to allow avatar uploads | `boolean` | `false` |
41+
| allowDelete | Whether to allow avatar deletion | `boolean` | `false` |
42+
| allowModelAvatar | Whether to show model avatars from @lobehub/icons | `boolean` | `false` |
43+
| onDelete | Callback when avatar is deleted | `() => void` | - |
44+
| onUpload | Callback when avatar is uploaded | `(file: File) => Promise<string>` | - |
45+
| compressSize | Maximum size for image compression | `number` | - |
46+
| loading | Whether the component is in loading state | `boolean` | `false` |
47+
| locale | Locale for the emoji picker | `string` | - |
48+
| customEmojis | Custom emoji sets | `EmojiPickerCustomEmoji[]` | - |
49+
| customTabs | Custom tabs for the picker | `EmojiPickerCustomTab[]` | - |
50+
| popupClassName | Class name for the popup | `string` | - |
51+
| popupStyle | Style for the popup | `CSSProperties` | - |
52+
| texts | Customizable text labels | `{ delete?: string; emoji?: string; upload?: string; }` | - |
4853

4954
### EmojiPickerCustomEmoji
5055

‎src/EmojiPicker/type.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export interface EmojiPickerCustomTab {
3939

4040
export interface EmojiPickerProps extends Omit<AvatarProps, 'onChange' | 'avatar'> {
4141
allowDelete?: boolean;
42+
allowModelAvatar?: boolean;
4243
allowUpload?:
4344
| boolean
4445
| {

0 commit comments

Comments
 (0)