diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx index 0814e4c095..754f1ffdc2 100644 --- a/web/app/(commonLayout)/apps/AppCard.tsx +++ b/web/app/(commonLayout)/apps/AppCard.tsx @@ -226,16 +226,16 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => { /> {app.mode === 'advanced-chat' && ( - + )} {app.mode === 'agent-chat' && ( )} {app.mode === 'chat' && ( - + )} {app.mode === 'completion' && ( - + )} {app.mode === 'workflow' && ( @@ -246,21 +246,21 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
{app.name}
-
+
{app.mode === 'advanced-chat' && ( -
{t('app.types.chatbot').toUpperCase()}
+
{t('app.types.chatbot').toUpperCase()}
)} {app.mode === 'agent-chat' && ( -
{t('app.types.agent').toUpperCase()}
+
{t('app.types.agent').toUpperCase()}
)} {app.mode === 'chat' && ( -
{t('app.types.chatbot').toUpperCase()}
+
{t('app.types.chatbot').toUpperCase()}
)} {app.mode === 'completion' && ( -
{t('app.types.completion').toUpperCase()}
+
{t('app.newApp.completeApp').toUpperCase()}
)} {app.mode === 'workflow' && ( -
{t('app.types.workflow').toUpperCase()}
+
{t('app.types.workflow').toUpperCase()}
)}
diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx index 4080c5fcb9..b753a6f8e4 100644 --- a/web/app/(commonLayout)/apps/Apps.tsx +++ b/web/app/(commonLayout)/apps/Apps.tsx @@ -13,8 +13,14 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config' import { CheckModal } from '@/hooks/use-pay' import TabSliderNew from '@/app/components/base/tab-slider-new' import { useTabSearchParams } from '@/hooks/use-tab-searchparams' -import { SearchLg } from '@/app/components/base/icons/src/vender/line/general' +import { DotsGrid, SearchLg } from '@/app/components/base/icons/src/vender/line/general' import { XCircle } from '@/app/components/base/icons/src/vender/solid/general' +import { + // AiText, + ChatBot, + CuteRobot, +} from '@/app/components/base/icons/src/vender/line/communication' +import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel' const getKey = ( pageIndex: number, @@ -52,10 +58,11 @@ const Apps = () => { const anchorRef = useRef(null) const options = [ - { value: 'all', text: t('app.types.all') }, - { value: 'chat', text: t('app.types.chatbot') }, - { value: 'agent-chat', text: t('app.types.agent') }, - { value: 'workflow', text: t('app.types.workflow') }, + { value: 'all', text: t('app.types.all'), icon: }, + { value: 'chat', text: t('app.types.chatbot'), icon: }, + { value: 'agent-chat', text: t('app.types.agent'), icon: }, + // { value: 'completion', text: t('app.newApp.completeApp'), icon: }, + { value: 'workflow', text: t('app.types.workflow'), icon: }, ] useEffect(() => { diff --git a/web/app/(commonLayout)/apps/NewAppCard.tsx b/web/app/(commonLayout)/apps/NewAppCard.tsx index d4f3f86d43..5f92fcef4a 100644 --- a/web/app/(commonLayout)/apps/NewAppCard.tsx +++ b/web/app/(commonLayout)/apps/NewAppCard.tsx @@ -2,11 +2,11 @@ import { forwardRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import CreateAppDialog from '@/app/components/app/create-app-dialog' +import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog' +import CreateAppModal from '@/app/components/app/create-app-modal' import CreateFromDSLModal from '@/app/components/app/create-from-dsl-modal' import { useProviderContext } from '@/context/provider-context' -import { Plus } from '@/app/components/base/icons/src/vender/line/general' -import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows' +import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files' export type CreateAppCardProps = { onSuccess?: () => void @@ -17,42 +17,55 @@ const CreateAppCard = forwardRef(({ onSuc const { t } = useTranslation() const { onPlanInfoChanged } = useProviderContext() - const [showNewAppDialog, setShowNewAppDialog] = useState(false) + const [showNewAppTemplateDialog, setShowNewAppTemplateDialog] = useState(false) + const [showNewAppModal, setShowNewAppModal] = useState(false) const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false) return ( -
setShowNewAppDialog(true)}> -
- - - -
- {t('app.createApp')} -
+
+
{t('app.createApp')}
+
setShowNewAppModal(true)}> + + {t('app.newApp.startFromBlank')} +
+
setShowNewAppTemplateDialog(true)}> + + {t('app.newApp.startFromTemplate')}
setShowCreateFromDSLModal(true)} > - {t('app.createFromConfigFile')} - +
+ + {t('app.importDSL')} +
- setShowCreateFromDSLModal(false)} + setShowNewAppModal(false)} onSuccess={() => { onPlanInfoChanged() if (onSuccess) onSuccess() }} /> - setShowNewAppDialog(false)} + setShowNewAppTemplateDialog(false)} + onSuccess={() => { + onPlanInfoChanged() + if (onSuccess) + onSuccess() + }} + /> + setShowCreateFromDSLModal(false)} onSuccess={() => { onPlanInfoChanged() if (onSuccess) diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx index 8f906c25a2..cae044d7a6 100644 --- a/web/app/components/app-sidebar/app-info.tsx +++ b/web/app/components/app-sidebar/app-info.tsx @@ -296,7 +296,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => { {t('app.newApp.advanced')} BETA
-
{t('app.newApp.advancedFor')}
+
{t('app.newApp.advancedFor').toLocaleUpperCase()}
{t('app.newApp.advancedDescription')}
diff --git a/web/app/components/app/create-app-dialog/index.tsx b/web/app/components/app/create-app-dialog/index.tsx index 0b2eb4808a..8883cc2662 100644 --- a/web/app/components/app/create-app-dialog/index.tsx +++ b/web/app/components/app/create-app-dialog/index.tsx @@ -1,10 +1,6 @@ 'use client' -import { useState } from 'react' import { useTranslation } from 'react-i18next' -import cn from 'classnames' -import s from './style.module.css' import NewAppDialog from './newAppDialog' -import AppForm from './appForm' import AppList, { PageType } from '@/app/components/explore/app-list' import { XClose } from '@/app/components/base/icons/src/vender/line/general' @@ -14,9 +10,8 @@ type CreateAppDialogProps = { onClose: () => void } -const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => { +const CreateAppTemplateDialog = ({ show, onClose }: CreateAppDialogProps) => { const { t } = useTranslation() - const [showInstruction, setShowInstruction] = useState('') return ( show={show} onClose={() => {}} > - {/* blank form */} -
- {/* Heading */} -
{t('app.newApp.startFromBlank')}
- {/* app form */} - -
{/* template list */}
{t('app.newApp.startFromTemplate')}
-
- {showInstruction === 'BASIC' && ( - <> -
-
-
{t('app.newApp.basic')}
-
{t('app.newApp.basicFor')}
-
{t('app.newApp.basicDescription')}
-
- - )} - {showInstruction === 'ADVANCED' && ( - <> -
-
-
- {t('app.newApp.advanced')} - BETA -
-
{t('app.newApp.advancedFor')}
-
{t('app.newApp.advancedDescription')}
-
- - )} -
-
OR
@@ -74,4 +31,4 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => ) } -export default CreateAppDialog +export default CreateAppTemplateDialog diff --git a/web/app/components/app/create-app-dialog/style.module.css b/web/app/components/app/create-app-dialog/style.module.css deleted file mode 100644 index 931a0ee851..0000000000 --- a/web/app/components/app/create-app-dialog/style.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.basicPic { - background-image: url('./basic.png') -} - -.advancedPic { - background-image: url('./advanced.png') -} diff --git a/web/app/components/app/create-app-dialog/advanced.png b/web/app/components/app/create-app-modal/advanced.png similarity index 100% rename from web/app/components/app/create-app-dialog/advanced.png rename to web/app/components/app/create-app-modal/advanced.png diff --git a/web/app/components/app/create-app-dialog/basic.png b/web/app/components/app/create-app-modal/basic.png similarity index 100% rename from web/app/components/app/create-app-dialog/basic.png rename to web/app/components/app/create-app-modal/basic.png diff --git a/web/app/components/app/create-app-modal/grid-bg-agent-chat.svg b/web/app/components/app/create-app-modal/grid-bg-agent-chat.svg new file mode 100644 index 0000000000..971d5c39ab --- /dev/null +++ b/web/app/components/app/create-app-modal/grid-bg-agent-chat.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/web/app/components/app/create-app-modal/grid-bg-chat.svg b/web/app/components/app/create-app-modal/grid-bg-chat.svg new file mode 100644 index 0000000000..7a3e1a83ec --- /dev/null +++ b/web/app/components/app/create-app-modal/grid-bg-chat.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/web/app/components/app/create-app-modal/grid-bg-completion.svg b/web/app/components/app/create-app-modal/grid-bg-completion.svg new file mode 100644 index 0000000000..9f80a6c440 --- /dev/null +++ b/web/app/components/app/create-app-modal/grid-bg-completion.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/web/app/components/app/create-app-modal/grid-bg-workflow.svg b/web/app/components/app/create-app-modal/grid-bg-workflow.svg new file mode 100644 index 0000000000..144beda82c --- /dev/null +++ b/web/app/components/app/create-app-modal/grid-bg-workflow.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/web/app/components/app/create-app-dialog/appForm.tsx b/web/app/components/app/create-app-modal/index.tsx similarity index 55% rename from web/app/components/app/create-app-dialog/appForm.tsx rename to web/app/components/app/create-app-modal/index.tsx index ef0e0432fd..e06a0e0f45 100644 --- a/web/app/components/app/create-app-dialog/appForm.tsx +++ b/web/app/components/app/create-app-modal/index.tsx @@ -1,45 +1,41 @@ 'use client' - import type { MouseEventHandler } from 'react' import { useCallback, useRef, useState } from 'react' -import cn from 'classnames' import { useTranslation } from 'react-i18next' +import cn from 'classnames' import { useRouter } from 'next/navigation' import { useContext, useContextSelector } from 'use-context-selector' +import s from './style.module.css' +import AppsContext, { useAppContext } from '@/context/app-context' import { useProviderContext } from '@/context/provider-context' import { ToastContext } from '@/app/components/base/toast' -import AppsContext, { useAppContext } from '@/context/app-context' import type { AppMode } from '@/types/app' import { createApp } from '@/service/apps' +import Modal from '@/app/components/base/modal' import Button from '@/app/components/base/button' import AppIcon from '@/app/components/base/app-icon' import EmojiPicker from '@/app/components/base/emoji-picker' import AppsFull from '@/app/components/billing/apps-full-in-dialog' -import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication' -import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general' -import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel' +import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication' +import { HelpCircle, XClose } from '@/app/components/base/icons/src/vender/line/general' +import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel' import TooltipPlus from '@/app/components/base/tooltip-plus' import { getRedirection } from '@/utils/app-redirection' -export type AppFormProps = { - onConfirm: () => void - onHide: () => void - onTipChange: (tip: string) => void +type CreateAppDialogProps = { + show: boolean + onSuccess: () => void + onClose: () => void } -const AppForm = ({ - onConfirm, - onHide, - onTipChange, -}: AppFormProps) => { +const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => { const { t } = useTranslation() const { push } = useRouter() const { notify } = useContext(ToastContext) - const mutateApps = useContextSelector(AppsContext, state => state.mutateApps) - const [appMode, setAppMode] = useState() - const [showChatBotType, setShowChatBotType] = useState(false) + const [appMode, setAppMode] = useState('chat') + const [showChatBotType, setShowChatBotType] = useState(true) const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' }) const [showEmojiPicker, setShowEmojiPicker] = useState(false) const [name, setName] = useState('') @@ -71,8 +67,8 @@ const AppForm = ({ mode: appMode, }) notify({ type: 'success', message: t('app.newApp.appCreated') }) - onConfirm() - onHide() + onSuccess() + onClose() mutateApps() getRedirection(isCurrentWorkspaceManager, app, push) } @@ -80,14 +76,24 @@ const AppForm = ({ notify({ type: 'error', message: t('app.newApp.appCreateFailed') }) } isCreatingRef.current = false - }, [name, notify, t, appMode, emoji.icon, emoji.icon_background, description, onConfirm, onHide, mutateApps, push, isCurrentWorkspaceManager]) + }, [name, notify, t, appMode, emoji.icon, emoji.icon_background, description, onSuccess, onClose, mutateApps, push, isCurrentWorkspaceManager]) return ( -
+ {}} + > + {/* Heading */} +
+
{t('app.newApp.startFromBlank')}
+
{/* app type */} -
+
{t('app.newApp.captionAppType')}
-
+
{ setAppMode('chat') setShowChatBotType(true) }} > - +
{t('app.types.chatbot')}
-
{t('app.newApp.chatbotDescription')}
{ setAppMode('completion') setShowChatBotType(false) }} > - +
{t('app.newApp.completeApp')}
 @@ -139,15 +146,16 @@ const AppForm = ({ >
{ setAppMode('agent-chat') setShowChatBotType(false) }} > - +
{t('app.types.agent')}
@@ -161,15 +169,16 @@ const AppForm = ({ >
{ setAppMode('workflow') setShowChatBotType(false) }} > - +
{t('app.types.workflow')}
BETA
@@ -182,42 +191,76 @@ const AppForm = ({
{ setAppMode('chat') }} > -
{t('app.newApp.basic')}
-
onTipChange('BASIC')} - onMouseLeave={() => onTipChange('')} - > - +
+
{t('app.newApp.basic')}
+
+ +
+
+
+
+
{t('app.newApp.basic')}
+
{t('app.newApp.basicFor')}
+
+
{t('app.newApp.basicDescription')}
+
+
+
+
{t('app.newApp.basicTip')}
{ setAppMode('advanced-chat') }} > -
{t('app.newApp.advanced')}
-
onTipChange('ADVANCED')} - onMouseLeave={() => onTipChange('')} - > - +
+
+
{t('app.newApp.advanced')}
+ BETA +
+
+ +
+
+
+
+
+
{t('app.newApp.advanced')}
+ BETA +
+
{t('app.newApp.advancedFor').toLocaleUpperCase()}
+
+
{t('app.newApp.advancedDescription')}
+
+
+
- BETA +
{t('app.newApp.advancedFor')}
)} + {/* icon & name */}
{t('app.newApp.captionName')}
@@ -257,12 +300,14 @@ const AppForm = ({
)}
- +
-
- +
+ +
+ ) } -export default AppForm +export default CreateAppModal diff --git a/web/app/components/app/create-app-modal/style.module.css b/web/app/components/app/create-app-modal/style.module.css new file mode 100644 index 0000000000..9a503a8cdd --- /dev/null +++ b/web/app/components/app/create-app-modal/style.module.css @@ -0,0 +1,23 @@ +.grid-bg-chat { + background-image: url('./grid-bg-chat.svg'); + background-repeat: repeat-x; +} +.grid-bg-completion { + background-image: url('./grid-bg-completion.svg'); + background-repeat: repeat-x; +} +.grid-bg-agent-chat { + background-image: url('./grid-bg-agent-chat.svg'); + background-repeat: repeat-x; +} +.grid-bg-workflow { + background-image: url('./grid-bg-workflow.svg'); + background-repeat: repeat-x; +} +.basicPic { + background-image: url('./basic.png') +} + +.advancedPic { + background-image: url('./advanced.png') +} diff --git a/web/app/components/base/icons/assets/vender/line/communication/ai-text.svg b/web/app/components/base/icons/assets/vender/line/communication/ai-text.svg index ae3e4474c0..709ede7d56 100644 --- a/web/app/components/base/icons/assets/vender/line/communication/ai-text.svg +++ b/web/app/components/base/icons/assets/vender/line/communication/ai-text.svg @@ -1,5 +1,5 @@ - + - + diff --git a/web/app/components/base/icons/assets/vender/line/communication/chat-bot.svg b/web/app/components/base/icons/assets/vender/line/communication/chat-bot.svg index e752d4abf2..ef29114913 100644 --- a/web/app/components/base/icons/assets/vender/line/communication/chat-bot.svg +++ b/web/app/components/base/icons/assets/vender/line/communication/chat-bot.svg @@ -1,9 +1,14 @@ - - - + + + - - + + + + + + + diff --git a/web/app/components/base/icons/assets/vender/line/communication/cute-robot.svg b/web/app/components/base/icons/assets/vender/line/communication/cute-robot.svg index d1b722cbcd..8273dc88e1 100644 --- a/web/app/components/base/icons/assets/vender/line/communication/cute-robot.svg +++ b/web/app/components/base/icons/assets/vender/line/communication/cute-robot.svg @@ -1,5 +1,5 @@ - + - + diff --git a/web/app/components/base/icons/assets/vender/line/files/file-arrow-01.svg b/web/app/components/base/icons/assets/vender/line/files/file-arrow-01.svg new file mode 100644 index 0000000000..e8db3420fe --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/files/file-arrow-01.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/base/icons/assets/vender/line/files/file-plus-01.svg b/web/app/components/base/icons/assets/vender/line/files/file-plus-01.svg new file mode 100644 index 0000000000..e312cd9536 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/files/file-plus-01.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/base/icons/assets/vender/line/general/dots-grid.svg b/web/app/components/base/icons/assets/vender/line/general/dots-grid.svg new file mode 100644 index 0000000000..b572f6ad86 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/general/dots-grid.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/app/components/base/icons/assets/vender/line/mapsAndTravel/route.svg b/web/app/components/base/icons/assets/vender/line/mapsAndTravel/route.svg index c8360fe88c..b1543ccc13 100644 --- a/web/app/components/base/icons/assets/vender/line/mapsAndTravel/route.svg +++ b/web/app/components/base/icons/assets/vender/line/mapsAndTravel/route.svg @@ -1,5 +1,10 @@ - - - + + + + + + + + diff --git a/web/app/components/base/icons/src/vender/line/communication/AiText.json b/web/app/components/base/icons/src/vender/line/communication/AiText.json index ca5b113e6d..0f5ff57837 100644 --- a/web/app/components/base/icons/src/vender/line/communication/AiText.json +++ b/web/app/components/base/icons/src/vender/line/communication/AiText.json @@ -4,9 +4,9 @@ "isRootNode": true, "name": "svg", "attributes": { - "width": "24", - "height": "24", - "viewBox": "0 0 24 24", + "width": "14", + "height": "14", + "viewBox": "0 0 14 14", "fill": "none", "xmlns": "http://www.w3.org/2000/svg" }, @@ -23,9 +23,9 @@ "name": "path", "attributes": { "id": "Vector", - "d": "M4 18H7M4 12H9M4 6H20M17 10L18.5 13.5L22 15L18.5 16.5L17 20L15.5 16.5L12 15L15.5 13.5L17 10Z", + "d": "M2.33301 10.5H4.08301M2.33301 7H5.24967M2.33301 3.5H11.6663M9.91634 5.83333L10.7913 7.875L12.833 8.75L10.7913 9.625L9.91634 11.6667L9.04134 9.625L6.99967 8.75L9.04134 7.875L9.91634 5.83333Z", "stroke": "currentColor", - "stroke-width": "1.5", + "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }, diff --git a/web/app/components/base/icons/src/vender/line/communication/ChatBot.json b/web/app/components/base/icons/src/vender/line/communication/ChatBot.json index 438584c553..69547f9353 100644 --- a/web/app/components/base/icons/src/vender/line/communication/ChatBot.json +++ b/web/app/components/base/icons/src/vender/line/communication/ChatBot.json @@ -4,9 +4,9 @@ "isRootNode": true, "name": "svg", "attributes": { - "width": "25", - "height": "24", - "viewBox": "0 0 25 24", + "width": "14", + "height": "14", + "viewBox": "0 0 14 14", "fill": "none", "xmlns": "http://www.w3.org/2000/svg" }, @@ -15,7 +15,8 @@ "type": "element", "name": "g", "attributes": { - "id": "chat-bot" + "id": "Icon", + "clip-path": "url(#clip0_3167_27725)" }, "children": [ { @@ -23,9 +24,9 @@ "name": "path", "attributes": { "id": "Vector", - "d": "M10.8488 11.0909H4.48517C3.48063 11.0909 2.66699 11.9045 2.66699 12.9091V20.1818C2.66699 21.1864 3.48063 22 4.48517 22H17.2124C18.217 22 19.0306 21.1864 19.0306 20.1818V12.9091M7.21245 7.99989V5.63636M7.21245 5.63636C7.71452 5.63636 8.12154 5.22935 8.12154 4.72727C8.12154 4.2252 7.71452 3.81818 7.21245 3.81818C6.71037 3.81818 6.30336 4.2252 6.30336 4.72727C6.30336 5.22935 6.71037 5.63636 7.21245 5.63636ZM14.4852 2.90909C14.4852 2.40727 14.8924 2 15.3943 2H21.7579C22.2597 2 22.667 2.40727 22.667 2.90909V7.45455C22.667 7.95636 22.2597 8.36364 21.7579 8.36364H17.2124L14.4852 10.1818V2.90909Z", + "d": "M5.93972 6.47002H2.2276C1.64161 6.47002 1.16699 6.94464 1.16699 7.53063V11.7731C1.16699 12.359 1.64161 12.8337 2.2276 12.8337H9.65184C10.2378 12.8337 10.7124 12.359 10.7124 11.7731V7.53063M3.81851 4.66693V3.2882M3.81851 3.2882C4.11139 3.2882 4.34881 3.05078 4.34881 2.7579C4.34881 2.46502 4.11139 2.2276 3.81851 2.2276C3.52563 2.2276 3.2882 2.46502 3.2882 2.7579C3.2882 3.05078 3.52563 3.2882 3.81851 3.2882ZM8.06093 1.6973C8.06093 1.40457 8.29851 1.16699 8.59123 1.16699H12.3034C12.5961 1.16699 12.8337 1.40457 12.8337 1.6973V4.34881C12.8337 4.64154 12.5961 4.87911 12.3034 4.87911H9.65184L8.06093 5.93972V1.6973Z", "stroke": "currentColor", - "stroke-width": "1.5", + "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }, @@ -42,7 +43,7 @@ "type": "element", "name": "path", "attributes": { - "d": "M7.66735 16.5456C8.42046 16.5456 9.03098 15.9351 9.03098 15.182C9.03098 14.4289 8.42046 13.8184 7.66735 13.8184C6.91423 13.8184 6.30371 14.4289 6.30371 15.182C6.30371 15.9351 6.91423 16.5456 7.66735 16.5456Z", + "d": "M4.08354 9.65146C4.52286 9.65146 4.87899 9.29532 4.87899 8.856C4.87899 8.41668 4.52286 8.06055 4.08354 8.06055C3.64422 8.06055 3.28809 8.41668 3.28809 8.856C3.28809 9.29532 3.64422 9.65146 4.08354 9.65146Z", "fill": "currentColor" }, "children": [] @@ -51,7 +52,7 @@ "type": "element", "name": "path", "attributes": { - "d": "M14.031 16.5456C14.7841 16.5456 15.3946 15.9351 15.3946 15.182C15.3946 14.4289 14.7841 13.8184 14.031 13.8184C13.2779 13.8184 12.6673 14.4289 12.6673 15.182C12.6673 15.9351 13.2779 16.5456 14.031 16.5456Z", + "d": "M7.79566 9.65146C8.23498 9.65146 8.59112 9.29532 8.59112 8.856C8.59112 8.41668 8.23498 8.06055 7.79566 8.06055C7.35634 8.06055 7.00021 8.41668 7.00021 8.856C7.00021 9.29532 7.35634 9.65146 7.79566 9.65146Z", "fill": "currentColor" }, "children": [] @@ -59,6 +60,32 @@ ] } ] + }, + { + "type": "element", + "name": "defs", + "attributes": {}, + "children": [ + { + "type": "element", + "name": "clipPath", + "attributes": { + "id": "clip0_3167_27725" + }, + "children": [ + { + "type": "element", + "name": "rect", + "attributes": { + "width": "14", + "height": "14", + "fill": "white" + }, + "children": [] + } + ] + } + ] } ] }, diff --git a/web/app/components/base/icons/src/vender/line/communication/CuteRobot.json b/web/app/components/base/icons/src/vender/line/communication/CuteRobot.json index 891f995f4c..4ae74d2a77 100644 --- a/web/app/components/base/icons/src/vender/line/communication/CuteRobot.json +++ b/web/app/components/base/icons/src/vender/line/communication/CuteRobot.json @@ -4,9 +4,9 @@ "isRootNode": true, "name": "svg", "attributes": { - "width": "24", - "height": "24", - "viewBox": "0 0 24 24", + "width": "14", + "height": "14", + "viewBox": "0 0 14 14", "fill": "none", "xmlns": "http://www.w3.org/2000/svg" }, @@ -23,9 +23,9 @@ "name": "path", "attributes": { "id": "Vector", - "d": "M12 4H7C5.89543 4 5 4.89543 5 6V11C5 12.1046 5.89543 13 7 13H17C18.1046 13 19 12.1046 19 11V6C19 4.89543 18.1046 4 17 4H12ZM12 4V2M6 15L4 17M6 15C6 18.3137 8.68629 21 12 21C15.3137 21 18 18.3137 18 15M6 15V13M18 15L20 17M18 15V13M9 8V9M15 8V9", + "d": "M6.99967 2.33366H4.08301C3.43868 2.33366 2.91634 2.85599 2.91634 3.50033V6.41699C2.91634 7.06134 3.43868 7.58366 4.08301 7.58366H9.91634C10.5607 7.58366 11.083 7.06134 11.083 6.41699V3.50033C11.083 2.85599 10.5607 2.33366 9.91634 2.33366H6.99967ZM6.99967 2.33366V1.16699M3.49967 8.75033L2.33301 9.91699M3.49967 8.75033C3.49967 10.6833 5.06668 12.2503 6.99967 12.2503C8.93267 12.2503 10.4997 10.6833 10.4997 8.75033M3.49967 8.75033V7.58366M10.4997 8.75033L11.6663 9.91699M10.4997 8.75033V7.58366M5.24967 4.66699V5.25033M8.74967 4.66699V5.25033", "stroke": "currentColor", - "stroke-width": "1.5", + "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }, diff --git a/web/app/components/base/icons/src/vender/line/files/FileArrow01.json b/web/app/components/base/icons/src/vender/line/files/FileArrow01.json new file mode 100644 index 0000000000..189f0814df --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/files/FileArrow01.json @@ -0,0 +1,39 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "16", + "height": "16", + "viewBox": "0 0 16 16", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "file-arrow-01" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Vector", + "d": "M3.33333 12.333C3.33333 12.6426 3.33333 12.7974 3.35044 12.9274C3.4686 13.8249 4.17481 14.5311 5.07228 14.6492C5.20225 14.6663 5.35705 14.6663 5.66667 14.6663H10.8C11.9201 14.6663 12.4802 14.6663 12.908 14.4484C13.2843 14.2566 13.5903 13.9506 13.782 13.5743C14 13.1465 14 12.5864 14 11.4663V6.65849C14 6.16931 14 5.92472 13.9447 5.69454C13.8957 5.49047 13.8149 5.29538 13.7053 5.11644C13.5816 4.91461 13.4086 4.74165 13.0627 4.39575L10.9373 2.27027C10.5914 1.92436 10.4184 1.75141 10.2166 1.62773C10.0376 1.51807 9.84254 1.43726 9.63846 1.38827C9.40829 1.33301 9.1637 1.33301 8.67452 1.33301H5.66667C5.35705 1.33301 5.20225 1.33301 5.07228 1.35012C4.17481 1.46827 3.4686 2.17449 3.35044 3.07196M5.33333 5.99967L7.33333 7.99967M7.33333 7.99967L5.33333 9.99967M7.33333 7.99967H2", + "stroke": "currentColor", + "stroke-width": "1.5", + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + "children": [] + } + ] + } + ] + }, + "name": "FileArrow01" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/files/FileArrow01.tsx b/web/app/components/base/icons/src/vender/line/files/FileArrow01.tsx new file mode 100644 index 0000000000..f3fa5c1156 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/files/FileArrow01.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './FileArrow01.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase' + +const Icon = React.forwardRef, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'FileArrow01' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/files/FilePlus01.json b/web/app/components/base/icons/src/vender/line/files/FilePlus01.json new file mode 100644 index 0000000000..67d8784494 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/files/FilePlus01.json @@ -0,0 +1,39 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "16", + "height": "16", + "viewBox": "0 0 16 16", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "file-plus-01" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Icon", + "d": "M13.3332 6.99967V4.53301C13.3332 3.4129 13.3332 2.85285 13.1152 2.42503C12.9234 2.0487 12.6175 1.74274 12.2412 1.55099C11.8133 1.33301 11.2533 1.33301 10.1332 1.33301H5.8665C4.7464 1.33301 4.18635 1.33301 3.75852 1.55099C3.3822 1.74274 3.07624 2.0487 2.88449 2.42503C2.6665 2.85285 2.6665 3.4129 2.6665 4.53301V11.4663C2.6665 12.5864 2.6665 13.1465 2.88449 13.5743C3.07624 13.9506 3.3822 14.2566 3.75852 14.4484C4.18635 14.6663 4.7464 14.6663 5.8665 14.6663H7.99984M11.9998 13.9997V9.99967M9.99984 11.9997H13.9998", + "stroke": "currentColor", + "stroke-width": "1.5", + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + "children": [] + } + ] + } + ] + }, + "name": "FilePlus01" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/files/FilePlus01.tsx b/web/app/components/base/icons/src/vender/line/files/FilePlus01.tsx new file mode 100644 index 0000000000..fdb978e42d --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/files/FilePlus01.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './FilePlus01.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase' + +const Icon = React.forwardRef, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'FilePlus01' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/files/index.ts b/web/app/components/base/icons/src/vender/line/files/index.ts index 0b018cf7ca..663f5e85b5 100644 --- a/web/app/components/base/icons/src/vender/line/files/index.ts +++ b/web/app/components/base/icons/src/vender/line/files/index.ts @@ -1,6 +1,8 @@ export { default as ClipboardCheck } from './ClipboardCheck' export { default as Clipboard } from './Clipboard' export { default as File02 } from './File02' +export { default as FileArrow01 } from './FileArrow01' export { default as FileCheck02 } from './FileCheck02' export { default as FileDownload02 } from './FileDownload02' +export { default as FilePlus01 } from './FilePlus01' export { default as FilePlus02 } from './FilePlus02' diff --git a/web/app/components/base/icons/src/vender/line/general/DotsGrid.json b/web/app/components/base/icons/src/vender/line/general/DotsGrid.json new file mode 100644 index 0000000000..9aafed2f7b --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/general/DotsGrid.json @@ -0,0 +1,134 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "14", + "height": "14", + "viewBox": "0 0 14 14", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "Icon" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "Solid" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M5.83333 2.91667C5.83333 2.27233 6.35567 1.75 7 1.75C7.64433 1.75 8.16667 2.27233 8.16667 2.91667C8.16667 3.561 7.64433 4.08333 7 4.08333C6.35567 4.08333 5.83333 3.561 5.83333 2.91667Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M5.83333 7C5.83333 6.35567 6.35567 5.83333 7 5.83333C7.64433 5.83333 8.16667 6.35567 8.16667 7C8.16667 7.64433 7.64433 8.16667 7 8.16667C6.35567 8.16667 5.83333 7.64433 5.83333 7Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M5.83333 11.0833C5.83333 10.439 6.35567 9.91667 7 9.91667C7.64433 9.91667 8.16667 10.439 8.16667 11.0833C8.16667 11.7277 7.64433 12.25 7 12.25C6.35567 12.25 5.83333 11.7277 5.83333 11.0833Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M9.91667 2.91667C9.91667 2.27233 10.439 1.75 11.0833 1.75C11.7277 1.75 12.25 2.27233 12.25 2.91667C12.25 3.561 11.7277 4.08333 11.0833 4.08333C10.439 4.08333 9.91667 3.561 9.91667 2.91667Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M9.91667 7C9.91667 6.35567 10.439 5.83333 11.0833 5.83333C11.7277 5.83333 12.25 6.35567 12.25 7C12.25 7.64433 11.7277 8.16667 11.0833 8.16667C10.439 8.16667 9.91667 7.64433 9.91667 7Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M9.91667 11.0833C9.91667 10.439 10.439 9.91667 11.0833 9.91667C11.7277 9.91667 12.25 10.439 12.25 11.0833C12.25 11.7277 11.7277 12.25 11.0833 12.25C10.439 12.25 9.91667 11.7277 9.91667 11.0833Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M1.75 2.91667C1.75 2.27233 2.27233 1.75 2.91667 1.75C3.561 1.75 4.08333 2.27233 4.08333 2.91667C4.08333 3.561 3.561 4.08333 2.91667 4.08333C2.27233 4.08333 1.75 3.561 1.75 2.91667Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M1.75 7C1.75 6.35567 2.27233 5.83333 2.91667 5.83333C3.561 5.83333 4.08333 6.35567 4.08333 7C4.08333 7.64433 3.561 8.16667 2.91667 8.16667C2.27233 8.16667 1.75 7.64433 1.75 7Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M1.75 11.0833C1.75 10.439 2.27233 9.91667 2.91667 9.91667C3.561 9.91667 4.08333 10.439 4.08333 11.0833C4.08333 11.7277 3.561 12.25 2.91667 12.25C2.27233 12.25 1.75 11.7277 1.75 11.0833Z", + "fill": "currentColor" + }, + "children": [] + } + ] + } + ] + } + ] + }, + "name": "DotsGrid" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/general/DotsGrid.tsx b/web/app/components/base/icons/src/vender/line/general/DotsGrid.tsx new file mode 100644 index 0000000000..232c8a6f23 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/general/DotsGrid.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './DotsGrid.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase' + +const Icon = React.forwardRef, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'DotsGrid' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/general/index.ts b/web/app/components/base/icons/src/vender/line/general/index.ts index 545979d848..98599bc60f 100644 --- a/web/app/components/base/icons/src/vender/line/general/index.ts +++ b/web/app/components/base/icons/src/vender/line/general/index.ts @@ -3,6 +3,7 @@ export { default as Bookmark } from './Bookmark' export { default as CheckCircle } from './CheckCircle' export { default as CheckDone01 } from './CheckDone01' export { default as Check } from './Check' +export { default as DotsGrid } from './DotsGrid' export { default as DotsHorizontal } from './DotsHorizontal' export { default as Edit02 } from './Edit02' export { default as Edit03 } from './Edit03' diff --git a/web/app/components/base/icons/src/vender/line/mapsAndTravel/Route.json b/web/app/components/base/icons/src/vender/line/mapsAndTravel/Route.json index f9e5a84a57..19cb837362 100644 --- a/web/app/components/base/icons/src/vender/line/mapsAndTravel/Route.json +++ b/web/app/components/base/icons/src/vender/line/mapsAndTravel/Route.json @@ -4,9 +4,9 @@ "isRootNode": true, "name": "svg", "attributes": { - "width": "25", - "height": "24", - "viewBox": "0 0 25 24", + "width": "14", + "height": "14", + "viewBox": "0 0 14 14", "fill": "none", "xmlns": "http://www.w3.org/2000/svg" }, @@ -15,7 +15,8 @@ "type": "element", "name": "g", "attributes": { - "id": "route" + "id": "route", + "clip-path": "url(#clip0_3167_28693)" }, "children": [ { @@ -23,15 +24,41 @@ "name": "path", "attributes": { "id": "Icon", - "d": "M12.167 5H12.6014C15.6486 5 17.1723 5 17.7506 5.54729C18.2506 6.02037 18.4721 6.71728 18.3372 7.39221C18.181 8.17302 16.9371 9.05285 14.4493 10.8125L10.3847 13.6875C7.8969 15.4471 6.65298 16.327 6.49683 17.1078C6.36185 17.7827 6.58341 18.4796 7.08335 18.9527C7.66173 19.5 9.18535 19.5 12.2326 19.5H13.167M8.66699 5C8.66699 6.65685 7.32385 8 5.66699 8C4.01014 8 2.66699 6.65685 2.66699 5C2.66699 3.34315 4.01014 2 5.66699 2C7.32385 2 8.66699 3.34315 8.66699 5ZM22.667 19C22.667 20.6569 21.3238 22 19.667 22C18.0101 22 16.667 20.6569 16.667 19C16.667 17.3431 18.0101 16 19.667 16C21.3238 16 22.667 17.3431 22.667 19Z", + "d": "M6.70866 2.91699H6.96206C8.73962 2.91699 9.6284 2.91699 9.96578 3.23624C10.2574 3.51221 10.3867 3.91874 10.3079 4.31245C10.2168 4.76792 9.49122 5.28116 8.03999 6.30763L5.66899 7.98468C4.21777 9.01116 3.49215 9.5244 3.40106 9.97987C3.32233 10.3736 3.45157 10.7801 3.7432 11.0561C4.08059 11.3753 4.96937 11.3753 6.74693 11.3753H7.29199M4.66699 2.91699C4.66699 3.88349 3.88349 4.66699 2.91699 4.66699C1.95049 4.66699 1.16699 3.88349 1.16699 2.91699C1.16699 1.95049 1.95049 1.16699 2.91699 1.16699C3.88349 1.16699 4.66699 1.95049 4.66699 2.91699ZM12.8337 11.0837C12.8337 12.0502 12.0502 12.8337 11.0837 12.8337C10.1172 12.8337 9.33366 12.0502 9.33366 11.0837C9.33366 10.1172 10.1172 9.33366 11.0837 9.33366C12.0502 9.33366 12.8337 10.1172 12.8337 11.0837Z", "stroke": "currentColor", - "stroke-width": "1.5", + "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }, "children": [] } ] + }, + { + "type": "element", + "name": "defs", + "attributes": {}, + "children": [ + { + "type": "element", + "name": "clipPath", + "attributes": { + "id": "clip0_3167_28693" + }, + "children": [ + { + "type": "element", + "name": "rect", + "attributes": { + "width": "14", + "height": "14", + "fill": "white" + }, + "children": [] + } + ] + } + ] } ] }, diff --git a/web/app/components/base/tab-slider-new/index.tsx b/web/app/components/base/tab-slider-new/index.tsx index a0e67806e9..d39ff8bd4f 100644 --- a/web/app/components/base/tab-slider-new/index.tsx +++ b/web/app/components/base/tab-slider-new/index.tsx @@ -4,6 +4,7 @@ import cn from 'classnames' type Option = { value: string text: string + icon?: React.ReactNode } type TabSliderProps = { className?: string @@ -24,10 +25,11 @@ const TabSliderNew: FC = ({ key={option.value} onClick={() => onChange(option.value)} className={cn( - 'mr-1 px-3 py-[5px] h-[28px] rounded-lg border-[0.5px] border-transparent text-gray-700 text-[13px] font-medium leading-[18px] cursor-pointer hover:bg-gray-200', + 'mr-1 px-3 py-[5px] h-[28px] flex items-center rounded-lg border-[0.5px] border-transparent text-gray-700 text-[13px] font-medium leading-[18px] cursor-pointer hover:bg-gray-200', value === option.value && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white', )} > + {option.icon} {option.text}
))} diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx index 2bd9c9af18..1d7b30f32f 100644 --- a/web/app/components/explore/app-card/index.tsx +++ b/web/app/components/explore/app-card/index.tsx @@ -29,16 +29,16 @@ const AppCard = ({ {appBasicInfo.mode === 'advanced-chat' && ( - + )} {appBasicInfo.mode === 'agent-chat' && ( )} {appBasicInfo.mode === 'chat' && ( - + )} {appBasicInfo.mode === 'completion' && ( - + )} {appBasicInfo.mode === 'workflow' && ( @@ -49,21 +49,21 @@ const AppCard = ({
{appBasicInfo.name}
-
+
{appBasicInfo.mode === 'advanced-chat' && ( -
{t('app.types.chatbot').toUpperCase()}
+
{t('app.types.chatbot').toUpperCase()}
)} {appBasicInfo.mode === 'agent-chat' && ( -
{t('app.types.agent').toUpperCase()}
+
{t('app.types.agent').toUpperCase()}
)} {appBasicInfo.mode === 'chat' && ( -
{t('app.types.chatbot').toUpperCase()}
+
{t('app.types.chatbot').toUpperCase()}
)} {appBasicInfo.mode === 'completion' && ( -
{t('app.types.completion').toUpperCase()}
+
{t('app.newApp.completeApp').toUpperCase()}
)} {appBasicInfo.mode === 'workflow' && ( -
{t('app.types.workflow').toUpperCase()}
+
{t('app.types.workflow').toUpperCase()}
)}
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx index 5ad0f48040..c81f02c1c0 100644 --- a/web/app/components/explore/app-list/index.tsx +++ b/web/app/components/explore/app-list/index.tsx @@ -133,7 +133,7 @@ const Apps = ({ className={cn( s.appList, 'grid content-start shrink-0', - pageType === PageType.EXPLORE ? 'gap-4 px-6 sm:px-12' : 'gap-3 px-8', + pageType === PageType.EXPLORE ? 'gap-4 px-6 sm:px-12' : 'gap-3 px-8 sm:!grid-cols-2 md:!grid-cols-3 lg:!grid-cols-4', )}> {currList.map(app => (