You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/web/src/components/ChatBox/ChatInputBox/Emotion.tsx

39 lines
984 B
TypeScript

import { Icon } from '@/components/Icon';
import { Dropdown } from 'antd';
import React, { useCallback, useState } from 'react';
import { useChatInputActionContext } from './context';
import { EmojiPanel } from '@/components/Emoji';
export const ChatInputEmotion: React.FC = React.memo(() => {
const actionContext = useChatInputActionContext();
const { appendMsg } = actionContext;
const [visible, setVisible] = useState(false);
const handleSelect = useCallback(
async (code: string) => {
appendMsg(code);
setVisible(false);
},
[appendMsg]
);
const menu = <EmojiPanel onSelect={handleSelect} />;
return (
<Dropdown
visible={visible}
onVisibleChange={setVisible}
overlay={menu}
placement="topRight"
trigger={['click']}
>
<Icon
className="text-2xl cursor-pointer"
icon="mdi:emoticon-happy-outline"
/>
</Dropdown>
);
});
ChatInputEmotion.displayName = 'ChatInputEmotion';