From 37c3b8979c0019dd80a66f4331bdc6b6d23de582 Mon Sep 17 00:00:00 2001 From: crazywoola <100913391+crazywoola@users.noreply.github.com> Date: Fri, 19 May 2023 17:36:44 +0800 Subject: [PATCH] Feature/add emoji (#103) --- .../app/(appDetailLayout)/[appId]/layout.tsx | 2 +- web/app/(commonLayout)/apps/AppCard.tsx | 2 +- web/app/(commonLayout)/apps/Apps.tsx | 1 + web/app/(commonLayout)/apps/NewAppCard.tsx | 1 - web/app/(commonLayout)/apps/NewAppDialog.tsx | 28 ++- .../[datasetId]/layout.tsx | 2 + web/app/components/app-sidebar/basic.tsx | 16 +- web/app/components/app-sidebar/index.tsx | 7 +- web/app/components/app/overview/appCard.tsx | 6 +- web/app/components/base/app-icon/index.tsx | 11 +- .../components/base/emoji-picker/index.tsx | 204 ++++++++++++++++++ .../base/emoji-picker/style.module.css | 12 ++ web/app/components/base/modal/index.tsx | 90 ++++---- web/app/components/header/index.tsx | 12 +- .../header/nav/nav-selector/index.tsx | 6 +- web/app/components/share/chat/index.tsx | 2 + web/app/components/share/header.tsx | 6 +- web/models/datasets.ts | 2 + web/models/share.ts | 2 + web/package.json | 2 + web/service/apps.ts | 4 +- web/types/app.ts | 6 + 22 files changed, 350 insertions(+), 74 deletions(-) create mode 100644 web/app/components/base/emoji-picker/index.tsx create mode 100644 web/app/components/base/emoji-picker/style.module.css diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx index 049d908dde..97b0164ea1 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx +++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx @@ -49,7 +49,7 @@ const AppDetailLayout: FC = (props) => { return null return (
- +
{children}
) diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx index eb62cd8899..aec4d6ab6e 100644 --- a/web/app/(commonLayout)/apps/AppCard.tsx +++ b/web/app/(commonLayout)/apps/AppCard.tsx @@ -47,7 +47,7 @@ const AppCard = ({ <>
- +
{app.name}
diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx index b11b0da6a0..fd989edde4 100644 --- a/web/app/(commonLayout)/apps/Apps.tsx +++ b/web/app/(commonLayout)/apps/Apps.tsx @@ -17,6 +17,7 @@ const Apps = () => { {apps.map(app => ())} + ) } diff --git a/web/app/(commonLayout)/apps/NewAppCard.tsx b/web/app/(commonLayout)/apps/NewAppCard.tsx index 7fee93534e..ddbb0f03b9 100644 --- a/web/app/(commonLayout)/apps/NewAppCard.tsx +++ b/web/app/(commonLayout)/apps/NewAppCard.tsx @@ -9,7 +9,6 @@ import NewAppDialog from './NewAppDialog' const CreateAppCard = () => { const { t } = useTranslation() const [showNewAppDialog, setShowNewAppDialog] = useState(false) - return ( setShowNewAppDialog(true)}>
diff --git a/web/app/(commonLayout)/apps/NewAppDialog.tsx b/web/app/(commonLayout)/apps/NewAppDialog.tsx index 3b434fa3b2..10966ba4a4 100644 --- a/web/app/(commonLayout)/apps/NewAppDialog.tsx +++ b/web/app/(commonLayout)/apps/NewAppDialog.tsx @@ -17,6 +17,8 @@ import { createApp, fetchAppTemplates } from '@/service/apps' import AppIcon from '@/app/components/base/app-icon' import AppsContext from '@/context/app-context' +import EmojiPicker from '@/app/components/base/emoji-picker' + type NewAppDialogProps = { show: boolean onClose?: () => void @@ -31,6 +33,11 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => { const [newAppMode, setNewAppMode] = useState() const [isWithTemplate, setIsWithTemplate] = useState(false) const [selectedTemplateIndex, setSelectedTemplateIndex] = useState(-1) + + // Emoji Picker + const [showEmojiPicker, setShowEmojiPicker] = useState(false) + const [emoji, setEmoji] = useState({ icon: '🍌', icon_background: '#FFEAD5' }) + const mutateApps = useContextSelector(AppsContext, state => state.mutateApps) const { data: templates, mutate } = useSWR({ url: '/app-templates' }, fetchAppTemplates) @@ -67,6 +74,8 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => { try { const app = await createApp({ name, + icon: emoji.icon, + icon_background: emoji.icon_background, mode: isWithTemplate ? templates.data[selectedTemplateIndex].mode : newAppMode!, config: isWithTemplate ? templates.data[selectedTemplateIndex].model_config : undefined, }) @@ -80,9 +89,20 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => { notify({ type: 'error', message: t('app.newApp.appCreateFailed') }) } isCreatingRef.current = false - }, [isWithTemplate, newAppMode, notify, router, templates, selectedTemplateIndex]) + }, [isWithTemplate, newAppMode, notify, router, templates, selectedTemplateIndex, emoji]) - return ( + return <> + {showEmojiPicker && { + console.log(icon, icon_background) + setEmoji({ icon, icon_background }) + setShowEmojiPicker(false) + }} + onClose={() => { + setEmoji({ icon: '🍌', icon_background: '#FFEAD5' }) + setShowEmojiPicker(false) + }} + />} {

{t('app.newApp.captionName')}

- + { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
@@ -187,7 +207,7 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => { )}
- ) + } export default NewAppDialog diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx index 1dc6578977..48b0bbc9c5 100644 --- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx +++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx @@ -155,6 +155,8 @@ const DatasetDetailLayout: FC = (props) => {
{!hideSideBar && } diff --git a/web/app/components/app-sidebar/basic.tsx b/web/app/components/app-sidebar/basic.tsx index 4cefafa0c1..55094c6190 100644 --- a/web/app/components/app-sidebar/basic.tsx +++ b/web/app/components/app-sidebar/basic.tsx @@ -15,7 +15,8 @@ export function randomString(length: number) { export type IAppBasicProps = { iconType?: 'app' | 'api' | 'dataset' - iconUrl?: string + icon?: string, + icon_background?: string, name: string type: string | React.ReactNode hoverTip?: string @@ -41,15 +42,20 @@ const ICON_MAP = { 'dataset': } -export default function AppBasic({ iconUrl, name, type, hoverTip, textStyle, iconType = 'app' }: IAppBasicProps) { +export default function AppBasic({ icon, icon_background, name, type, hoverTip, textStyle, iconType = 'app' }: IAppBasicProps) { return (
- {iconUrl && ( + {icon && icon_background && iconType === 'app' && (
- {/* {name} */} - {ICON_MAP[iconType]} +
)} + {iconType !== 'app' && +
+ {ICON_MAP[iconType]} +
+ + }
{name} diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx index cdafcce78e..eb3a444554 100644 --- a/web/app/components/app-sidebar/index.tsx +++ b/web/app/components/app-sidebar/index.tsx @@ -7,6 +7,8 @@ export type IAppDetailNavProps = { iconType?: 'app' | 'dataset' title: string desc: string + icon: string + icon_background: string navigation: Array<{ name: string href: string @@ -16,13 +18,12 @@ export type IAppDetailNavProps = { extraInfo?: React.ReactNode } -const sampleAppIconUrl = 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80' -const AppDetailNav: FC = ({ title, desc, navigation, extraInfo, iconType = 'app' }) => { +const AppDetailNav: FC = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }) => { return (
- +