diff --git a/web/app/components/app/create-app-dialog/appForm.tsx b/web/app/components/app/create-app-dialog/appForm.tsx index 41737110a5..796754caa5 100644 --- a/web/app/components/app/create-app-dialog/appForm.tsx +++ b/web/app/components/app/create-app-dialog/appForm.tsx @@ -15,8 +15,9 @@ 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 { ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication' -import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general' +import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication' +import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback' +import { HelpCircle, InfoCircle } from '@/app/components/base/icons/src/vender/line/general' import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel' import TooltipPlus from '@/app/components/base/tooltip-plus' import { getRedirection } from '@/utils/app-redirection' @@ -85,9 +86,9 @@ const AppForm = ({ return (
{/* app type */} -
+
{t('app.newApp.captionAppType')}
-
+
{ @@ -109,6 +110,33 @@ const AppForm = ({
{t('app.newApp.chatbotDescription')}
 + +
{t('app.newApp.completionDescription')}
+
+
+ +
{t('app.newApp.completionWarning')}
+
+
+ } + > +
{ + setAppMode('completion') + setShowChatBotType(false) + }} + > + +
{t('app.newApp.completeApp')}
+
+
{ @@ -129,19 +157,33 @@ const AppForm = ({
{t('app.types.agent')}
 -
{ - setAppMode('workflow') - setShowChatBotType(false) - }} + +
{t('app.newApp.workflowDescription')}
+
+
+ +
{t('app.newApp.completionWarning')}
+
+
+ } > - -
{t('app.types.workflow')}
-
+
{ + setAppMode('workflow') + setShowChatBotType(false) + }} + > + +
{t('app.types.workflow')}
+
+
{showChatBotType && ( diff --git a/web/app/components/app/create-app-dialog/index.tsx b/web/app/components/app/create-app-dialog/index.tsx index 859b187d4c..08fb957fbb 100644 --- a/web/app/components/app/create-app-dialog/index.tsx +++ b/web/app/components/app/create-app-dialog/index.tsx @@ -25,7 +25,7 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => onClose={() => {}} > {/* blank form */} -
+
{/* Heading */}
{t('app.newApp.startFromBlank')}
{/* app form */} 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 new file mode 100644 index 0000000000..ae3e4474c0 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/communication/ai-text.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/base/icons/assets/vender/solid/communication/chat-bot.svg b/web/app/components/base/icons/assets/vender/solid/communication/chat-bot.svg new file mode 100644 index 0000000000..53ee1bbd49 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/solid/communication/chat-bot.svg @@ -0,0 +1,7 @@ + + + + + + + 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 new file mode 100644 index 0000000000..ca5b113e6d --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/communication/AiText.json @@ -0,0 +1,39 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "24", + "height": "24", + "viewBox": "0 0 24 24", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "ai-text" + }, + "children": [ + { + "type": "element", + "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", + "stroke": "currentColor", + "stroke-width": "1.5", + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + "children": [] + } + ] + } + ] + }, + "name": "AiText" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/communication/AiText.tsx b/web/app/components/base/icons/src/vender/line/communication/AiText.tsx new file mode 100644 index 0000000000..5e156bf3f2 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/communication/AiText.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './AiText.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 = 'AiText' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/communication/index.ts b/web/app/components/base/icons/src/vender/line/communication/index.ts index fa9cbe74f7..1c8c7b6293 100644 --- a/web/app/components/base/icons/src/vender/line/communication/index.ts +++ b/web/app/components/base/icons/src/vender/line/communication/index.ts @@ -1,3 +1,4 @@ +export { default as AiText } from './AiText' export { default as ChatBot } from './ChatBot' export { default as CuteRobot } from './CuteRobot' export { default as MessageCheckRemove } from './MessageCheckRemove' diff --git a/web/app/components/base/icons/src/vender/solid/communication/ChatBot.json b/web/app/components/base/icons/src/vender/solid/communication/ChatBot.json new file mode 100644 index 0000000000..024b0edbeb --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/communication/ChatBot.json @@ -0,0 +1,58 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "13", + "height": "12", + "viewBox": "0 0 13 12", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "chat-bot" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Vector", + "d": "M4.20913 2.76912L4.09542 2.83543L3.98172 2.76912C3.90566 2.72476 3.86328 2.64979 3.86328 2.57101C3.86328 2.44347 3.96789 2.33887 4.09542 2.33887C4.22296 2.33887 4.32757 2.44347 4.32757 2.57101C4.32757 2.64979 4.28519 2.72476 4.20913 2.76912Z", + "fill": "currentColor", + "stroke": "currentColor", + "stroke-width": "1.25" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "id": "Vector_2", + "d": "M10.0174 6.00058C10.0123 5.98686 10.0097 5.97229 10.0046 5.95858C9.81684 5.48158 9.35398 5.14258 8.81056 5.14258H8.66784L7.52484 5.99972C7.33713 6.14029 7.11556 6.21444 6.88284 6.21444C6.29184 6.21444 5.81056 5.73358 5.81056 5.14258H2.81013C2.10127 5.14258 1.52441 5.71944 1.52441 6.42829V9.85686C1.52441 10.5657 2.10127 11.1426 2.81013 11.1426H8.81013C9.51899 11.1426 10.0958 10.5657 10.0958 9.85686V6.42829C10.0958 6.34386 10.0868 6.26158 10.071 6.18186C10.0586 6.11886 10.0384 6.05972 10.0174 6.00058ZM3.88156 8.57115C3.52713 8.57115 3.2387 8.28272 3.2387 7.92829C3.2387 7.57386 3.52713 7.28544 3.88156 7.28544C4.23599 7.28544 4.52441 7.57386 4.52441 7.92829C4.52441 8.28272 4.23599 8.57115 3.88156 8.57115ZM7.7387 8.57115C7.38427 8.57115 7.09584 8.28272 7.09584 7.92829C7.09584 7.57386 7.38427 7.28544 7.7387 7.28544C8.09313 7.28544 8.38156 7.57386 8.38156 7.92829C8.38156 8.28272 8.09313 8.57115 7.7387 8.57115Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "id": "Vector_3", + "d": "M6.66699 5.14314V1.71456C6.66699 1.24099 7.05056 0.857422 7.52413 0.857422H10.9527C11.4263 0.857422 11.8098 1.24099 11.8098 1.71456V3.42885C11.8098 3.90242 11.4263 4.28599 10.9527 4.28599H8.38128L7.00985 5.31456C6.86842 5.42042 6.66699 5.31971 6.66699 5.14314Z", + "fill": "currentColor" + }, + "children": [] + } + ] + } + ] + }, + "name": "ChatBot" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/solid/communication/ChatBot.tsx b/web/app/components/base/icons/src/vender/solid/communication/ChatBot.tsx new file mode 100644 index 0000000000..34c2cd22b6 --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/communication/ChatBot.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './ChatBot.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 = 'ChatBot' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/solid/communication/index.ts b/web/app/components/base/icons/src/vender/solid/communication/index.ts index 63d3fd423b..854953c116 100644 --- a/web/app/components/base/icons/src/vender/solid/communication/index.ts +++ b/web/app/components/base/icons/src/vender/solid/communication/index.ts @@ -1,4 +1,5 @@ export { default as AiText } from './AiText' +export { default as ChatBot } from './ChatBot' export { default as CuteRobote } from './CuteRobote' export { default as EditList } from './EditList' export { default as MessageDotsCircle } from './MessageDotsCircle' diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx index c97174030e..01872323a6 100644 --- a/web/app/components/explore/app-card/index.tsx +++ b/web/app/components/explore/app-card/index.tsx @@ -3,11 +3,10 @@ import cn from 'classnames' import { useTranslation } from 'react-i18next' import { PlusIcon } from '@heroicons/react/20/solid' import Button from '../../base/button' -import s from './style.module.css' import type { App } from '@/models/explore' -import AppModeLabel from '@/app/(commonLayout)/apps/AppModeLabel' import AppIcon from '@/app/components/base/app-icon' - +import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication' +import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel' export type AppCardProps = { app: App canCreate: boolean @@ -24,35 +23,72 @@ const AppCard = ({ const { t } = useTranslation() const { app: appBasicInfo } = app return ( -
+
- -
-
{appBasicInfo.name}
+
+ + + {appBasicInfo.mode === 'advanced-chat' && ( + + )} + {appBasicInfo.mode === 'agent-chat' && ( + + )} + {appBasicInfo.mode === 'chat' && ( + + )} + {appBasicInfo.mode === 'completion' && ( + + )} + {appBasicInfo.mode === 'workflow' && ( + + )} + +
+
+
+
{appBasicInfo.name}
+
+
+ {appBasicInfo.mode === 'advanced-chat' && ( +
{t('app.types.chatbot').toUpperCase()}
+ )} + {appBasicInfo.mode === 'agent-chat' && ( +
{t('app.types.agent').toUpperCase()}
+ )} + {appBasicInfo.mode === 'chat' && ( +
{t('app.types.chatbot').toUpperCase()}
+ )} + {appBasicInfo.mode === 'completion' && ( +
{t('app.types.completion').toUpperCase()}
+ )} + {appBasicInfo.mode === 'workflow' && ( +
{t('app.types.workflow').toUpperCase()}
+ )} +
-
{app.description}
-
-
- -
- {isExplore && canCreate && ( -
+
{app.description}
+ {isExplore && canCreate && ( +
+
- )} - {!isExplore && ( -
+
+ )} + {!isExplore && ( +
+
- )} -
+
+ )}
) } diff --git a/web/app/components/explore/app-card/style.module.css b/web/app/components/explore/app-card/style.module.css deleted file mode 100644 index c36a2e0c8c..0000000000 --- a/web/app/components/explore/app-card/style.module.css +++ /dev/null @@ -1,20 +0,0 @@ -.wrap { - display: flex; -} - -.mode { - display: flex; - height: 28px; -} - -.opWrap { - display: none; -} - -.wrap:hover .mode { - display: none; -} - -.wrap:hover .opWrap { - display: flex; -} \ No newline at end of file diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts index 28de91ce11..934266b44a 100644 --- a/web/i18n/en-US/app.ts +++ b/web/i18n/en-US/app.ts @@ -26,6 +26,8 @@ const translation = { startFromTemplate: 'Start from a template', captionAppType: 'What type of app do you want to create?', chatbotDescription: 'Build a chat-based application. This app uses a question-and-answer format, allowing for multiple rounds of continuous conversation.', + completionDescription: 'Build an application that generates high-quality text based on prompts, such as generating articles, summaries, translations, and more.', + completionWarning: 'This type of app will no longer be supported.', agentDescription: 'Build an intelligent Agent which can autonomously choose tools to complete the tasks', workflowDescription: 'Description text here', chatbotType: 'Chatbot orchestrate method', diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts index 5dcd498619..923cfc3d3b 100644 --- a/web/i18n/zh-Hans/app.ts +++ b/web/i18n/zh-Hans/app.ts @@ -25,6 +25,8 @@ const translation = { startFromTemplate: '从应用模版创建', captionAppType: '想要哪种应用类型？', chatbotDescription: '使用大型语言模型构建基于聊天的助手', + completionDescription: '构建一个根据提示生成高质量文本的应用程序，例如生成文章、摘要、翻译等。', + completionWarning: '该类型不久后将不再支持创建', agentDescription: '构建一个智能Agent，可以自主选择工具来完成任务', workflowDescription: 'Description text here', chatbotType: '聊天助手编排方法',