chore: add emoji pancel

package.json

@@ -35,12 +35,15 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emoji-mart/data": "1.1.2",
+    "@emoji-mart/react": "1.1.1",
     "@reduxjs/toolkit": "1.9.5",
     "@vercel/analytics": "1.0.1",
     "ahooks": "3.7.7",
     "antd": "5.5.0",
     "axios": "1.4.0",
     "dayjs": "1.11.7",
+    "emoji-mart": "5.5.2",
     "github-markdown-css": "5.2.0",
     "i18next": "22.5.0",
     "katex": "0.16.7",
@@ -52,6 +55,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "12.3.1",
+    "react-icons": "4.9.0",
     "react-markdown": "8.0.7",
     "react-redux": "8.0.5",
     "react-syntax-highlighter": "15.5.0",

src/components/EmojiPicker/Button.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Button, Tooltip } from 'antd'
+import EmojiPicker from './index'
+import Image from 'next/image'
+
+const ButtonEmojiPicker = (props: {
+  value?: ''
+  readOnly?: boolean
+  onChange?: (val: any) => void
+  onEmojiClick?: (emoji: any) => void
+  theme?: 'auto' | 'light' | 'dark'
+  style?: 'native' | 'apple' | 'google' | 'facebook'
+}) => {
+  const [_value, setValue] = React.useState(props.value)
+  return (
+    <Tooltip
+      placement="bottom"
+      destroyTooltipOnHide={true}
+      trigger={'click'}
+      overlayStyle={{ maxWidth: 'auto' }}
+      color={'#00000000'}
+      open={props.readOnly ? false : undefined}
+      title={
+        <EmojiPicker
+          theme={props?.theme || 'auto'}
+          style={props?.style || 'apple'}
+          onEmojiClick={(emoji: any) => {
+            props?.onEmojiClick?.(emoji)
+            props?.onChange?.(emoji.imageUrl)
+            setValue(emoji.imageUrl)
+          }}
+        />
+      }
+    >
+      <Button size={'middle'} type="dashed" style={{ height: '38px', overflow: 'hidden', padding: '0 auto' }}>
+        {_value && <Image src={_value} width={30} height={30} style={{ width: 30, height: 30, overflow: 'hidden' }} alt={''} />}
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default ButtonEmojiPicker

src/components/EmojiPicker/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import data from '@emoji-mart/data'
+import Picker from '@emoji-mart/react'
+
+export function getEmojiUrl(unified: string, style: string) {
+  return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`
+}
+
+const EmojiPicker = (props: { onEmojiClick: (emoji: any) => void; theme: 'auto' | 'light' | 'dark'; style: 'native' | 'apple' | 'google' | 'facebook' }) => {
+  return (
+    <Picker
+      theme={props.theme || 'auto'}
+      data={data}
+      onEmojiSelect={(emoji: any) => {
+        // 返回emoji图片链接
+        emoji.imageUrl = getEmojiUrl(emoji.unified, props.style || 'apple')
+        console.log('onEmojiSelect', emoji)
+        props.onEmojiClick(emoji)
+      }}
+    />
+  )
+}
+
+export default EmojiPicker

src/components/pages/plugin/Store.tsx

@@ -275,7 +275,7 @@ function OnlinePlugin() {
         />
       </div>
       <Drawer
-        title={t('c.plugin')}
+        title={(openItem as Plugin)?.name || t('c.plugin')}
         onClose={() => setOpen(false)}
         extra={
           <Space>

src/components/pages/prompt/Edit.tsx

@@ -1,13 +1,14 @@
 import { useSiteContext } from '@/contexts/site'
-import { Button, Form, Input, InputNumber, Popconfirm, Select, Space, theme as antdTheme, Typography, Divider, Tag, message } from 'antd'
-import { DeleteOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import { Button, Form, Input, InputNumber, Popconfirm, Select, Space, theme as antdTheme, Typography, Divider, Tag, message, Tooltip } from 'antd'
+import AntIcon, { DeleteOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import { usePromptContext } from '@/contexts'
 import { Prompt } from '@/types/prompt'
 import { useTranslation } from '@/locales'
 import { uuidv4 } from '@/utils/uuid'
 import { useEffect, useState } from 'react'
 import { Model, ModelList, LanguageList } from '@/config/constant'
 import { useRouter } from 'next/router'
+import ButtonEmojiPicker from '@/components/EmojiPicker/Button'
 
 function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boolean }) {
   // const router = useRouter()
@@ -122,6 +123,9 @@ function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boo
             <Radio value="text">文本</Radio>
           </Radio.Group>
         </Form.Item> */}
+        <Form.Item label="图标" name="image" required>
+          <ButtonEmojiPicker theme={theme} style={'apple'} readOnly={!edit} />
+        </Form.Item>
         <Form.Item label="名称" name="name" required>
           <Input readOnly={!edit} />
         </Form.Item>
@@ -226,16 +230,18 @@ function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boo
         {/* <Form.Item label="是否公开" name="private" valuePropName="private">
           <Switch />
         </Form.Item> */}
-        <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
-          <Space>
-            <Button type="primary" htmlType="submit">
-              保存
-            </Button>
-            <Button type="text" htmlType="button" onClick={onReset}>
-              重置
-            </Button>
-          </Space>
-        </Form.Item>
+        {edit && (
+          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
+            <Space>
+              <Button type="primary" htmlType="submit">
+                保存
+              </Button>
+              <Button type="text" htmlType="button" onClick={onReset}>
+                重置
+              </Button>
+            </Space>
+          </Form.Item>
+        )}
       </Form>
     </div>
   )

src/components/pages/prompt/List.tsx

@@ -132,7 +132,7 @@ function IndexPage(props: { setContent: Function; style?: React.CSSProperties })
                     ellipsis={{ rows: 1 }}
                     style={{ marginBottom: '0.5em', fontSize: 12, textAlign: 'left', color: uuid == item.uuid ? token.colorPrimaryActive : token.colorText }}
                   >
-                    {item.description || 'No description'}
+                    {item.intro || 'No intro'}
                   </Typography.Paragraph>
                 }
               />
@@ -162,7 +162,7 @@ function IndexPage(props: { setContent: Function; style?: React.CSSProperties })
         </Space>
       </div>
       <Drawer
-        title={t('c.prompt')}
+        title={(openItem as Prompt)?.name || t('c.prompt')}
         extra={
           <Space>
             <Popconfirm

src/components/pages/prompt/Store.tsx

@@ -281,7 +281,7 @@ function OnlinePrompt() {
         />
       </div>
       <Drawer
-        title={t('c.prompt')}
+        title={(openItem as Prompt)?.name || t('c.prompt')}
         onClose={() => setOpen(false)}
         extra={
           <Space>