FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Yeuoly <admin@srmxy.cn> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: StyleZhang <jasonapring2015@outlook.com> Co-authored-by: jyong <jyong@dify.ai> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: jyong <718720800@qq.com>
2024-04-08 18:51:46 +08:00
parent 2fb9850af5
commit 7753ba2d37
1161 changed files with 103836 additions and 10327 deletions
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -3,48 +3,82 @@ 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/solid/mapsAndTravel'
 export type AppCardProps = {
  app: App
  canCreate: boolean
  onCreate: () => void
+  isExplore: boolean
 }

 const AppCard = ({
  app,
  canCreate,
  onCreate,
+  isExplore,
 }: AppCardProps) => {
  const { t } = useTranslation()
-  const { app: appBasicInfo, is_agent } = app
+  const { app: appBasicInfo } = app
  return (
-    <div className={cn(s.wrap, 'col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
+    <div className={cn('group flex col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
-        <AppIcon size='small' icon={app.app.icon} background={app.app.icon_background} />
-        <div className='relative h-8 text-sm font-medium leading-8 grow'>
-          <div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
+        <div className='relative shrink-0'>
+          <AppIcon size='large' icon={app.app.icon} background={app.app.icon_background} />
+          <span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
+            {appBasicInfo.mode === 'advanced-chat' && (
+              <ChatBot className='w-3 h-3 text-[#1570EF]' />
+            )}
+            {appBasicInfo.mode === 'agent-chat' && (
+              <CuteRobote className='w-3 h-3 text-indigo-600' />
+            )}
+            {appBasicInfo.mode === 'chat' && (
+              <ChatBot className='w-3 h-3 text-[#1570EF]' />
+            )}
+            {appBasicInfo.mode === 'completion' && (
+              <AiText className='w-3 h-3 text-[#0E9384]' />
+            )}
+            {appBasicInfo.mode === 'workflow' && (
+              <Route className='w-3 h-3 text-[#f79009]' />
+            )}
+          </span>
+        </div>
+        <div className='grow w-0 py-[1px]'>
+          <div className='flex items-center text-sm leading-5 font-semibold text-gray-800'>
+            <div className='truncate' title={appBasicInfo.name}>{appBasicInfo.name}</div>
+          </div>
+          <div className='flex items-center text-[10px] leading-[18px] text-gray-500 font-medium'>
+            {appBasicInfo.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
+            {appBasicInfo.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
+            {appBasicInfo.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
+            {appBasicInfo.mode === 'workflow' && <div className='truncate'>{t('app.types.workflow').toUpperCase()}</div>}
+            {appBasicInfo.mode === 'completion' && <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>}
+          </div>
        </div>
      </div>
-      <div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
-      <div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
-        <div className={s.mode}>
-          <AppModeLabel mode={appBasicInfo.mode} isAgent={is_agent} />
+      <div className='mb-1 px-[14px] text-xs leading-normal text-gray-500 line-clamp-4 group-hover:line-clamp-2 group-hover:h-9'>{app.description}</div>
+      {isExplore && canCreate && (
+        <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
+          <div className={cn('flex items-center w-full space-x-2')}>
+            <Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
+              <PlusIcon className='w-4 h-4 mr-1' />
+              <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
+            </Button>
+          </div>
        </div>
-        {
-          canCreate && (
-            <div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
-              <Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
-                <PlusIcon className='w-4 h-4 mr-1' />
-                <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
-              </Button>
-            </div>
-          )
-        }
-      </div>
+      )}
+      {!isExplore && (
+        <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
+          <div className={cn('flex items-center w-full space-x-2')}>
+            <Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
+              <PlusIcon className='w-4 h-4 mr-1' />
+              <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
+            </Button>
+          </div>
+        </div>
+      )}
    </div>
  )
 }
--- a/web/app/components/explore/app-card/style.module.css
+++ b/web/app/components/explore/app-card/style.module.css
@@ -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;
-}
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -1,6 +1,7 @@
 'use client'
-import type { FC } from 'react'
-import React from 'react'
+
+import React, { useMemo, useState } from 'react'
+import cn from 'classnames'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -12,25 +13,42 @@ import type { App } from '@/models/explore'
 import Category from '@/app/components/explore/category'
 import AppCard from '@/app/components/explore/app-card'
 import { fetchAppDetail, fetchAppList } from '@/service/explore'
-import { createApp } from '@/service/apps'
+import { importApp } from '@/service/apps'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
+import AppTypeSelector from '@/app/components/app/type-selector'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import Loading from '@/app/components/base/loading'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
-import { type AppMode } from '@/types/app'
 import { useAppContext } from '@/context/app-context'
+import { getRedirection } from '@/utils/app-redirection'

-const Apps: FC = () => {
+type AppsProps = {
+  pageType?: PageType
+  onSuccess?: () => void
+}
+
+export enum PageType {
+  EXPLORE = 'explore',
+  CREATE = 'create',
+}
+
+const Apps = ({
+  pageType = PageType.EXPLORE,
+  onSuccess,
+}: AppsProps) => {
  const { t } = useTranslation()
  const { isCurrentWorkspaceManager } = useAppContext()
-  const router = useRouter()
+  const { push } = useRouter()
  const { hasEditPermission } = useContext(ExploreContext)
  const allCategoriesEn = t('explore.apps.allCategories', { lng: 'en' })

+  const [currentType, setCurrentType] = useState<string>('')
  const [currCategory, setCurrCategory] = useTabSearchParams({
    defaultTab: allCategoriesEn,
+    disableSearchParams: pageType !== PageType.EXPLORE,
  })
+
  const {
    data: { categories, allList },
  } = useSWR(
@@ -48,10 +66,28 @@ const Apps: FC = () => {
    },
  )

-  const currList
-    = currCategory === allCategoriesEn
-      ? allList
-      : allList.filter(item => item.category === currCategory)
+  const filteredList = useMemo(() => {
+    if (currCategory === allCategoriesEn) {
+      if (!currentType)
+        return allList
+      else if (currentType === 'chatbot')
+        return allList.filter(item => (item.app.mode === 'chat' || item.app.mode === 'advanced-chat'))
+      else if (currentType === 'agent')
+        return allList.filter(item => (item.app.mode === 'agent-chat'))
+      else
+        return allList.filter(item => (item.app.mode === 'workflow'))
+    }
+    else {
+      if (!currentType)
+        return allList.filter(item => item.category === currCategory)
+      else if (currentType === 'chatbot')
+        return allList.filter(item => (item.app.mode === 'chat' || item.app.mode === 'advanced-chat') && item.category === currCategory)
+      else if (currentType === 'agent')
+        return allList.filter(item => (item.app.mode === 'agent-chat') && item.category === currCategory)
+      else
+        return allList.filter(item => (item.app.mode === 'workflow') && item.category === currCategory)
+    }
+  }, [currentType, currCategory, allCategoriesEn, allList])

  const [currApp, setCurrApp] = React.useState<App | null>(null)
  const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
@@ -59,30 +95,28 @@ const Apps: FC = () => {
    name,
    icon,
    icon_background,
+    description,
  }) => {
-    const { app_model_config: model_config } = await fetchAppDetail(
+    const { export_data } = await fetchAppDetail(
      currApp?.app.id as string,
    )
-
    try {
-      const app = await createApp({
+      const app = await importApp({
+        data: export_data,
        name,
        icon,
        icon_background,
-        mode: currApp?.app.mode as AppMode,
-        config: model_config,
+        description,
      })
      setIsShowCreateModal(false)
      Toast.notify({
        type: 'success',
        message: t('app.newApp.appCreated'),
      })
+      if (onSuccess)
+        onSuccess()
      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
-      router.push(
-        `/app/${app.id}/${
-          isCurrentWorkspaceManager ? 'configuration' : 'overview'
-        }`,
-      )
+      getRedirection(isCurrentWorkspaceManager, app, push)
    }
    catch (e) {
      Toast.notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
@@ -98,29 +132,47 @@ const Apps: FC = () => {
  }

  return (
-    <div className="h-full flex flex-col border-l border-gray-200">
-      <div className="shrink-0 pt-6 px-12">
-        <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>
-          {t('explore.apps.title')}
-        </div>
-        <div className="text-gray-500 text-sm">
-          {t('explore.apps.description')}
+    <div className={cn(
+      'flex flex-col',
+      pageType === PageType.EXPLORE ? 'h-full border-l border-gray-200' : 'h-[calc(100%-56px)]',
+    )}>
+      {pageType === PageType.EXPLORE && (
+        <div className='shrink-0 pt-6 px-12'>
+          <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
+          <div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div>
        </div>
+      )}
+      <div className={cn(
+        'flex items-center mt-6',
+        pageType === PageType.EXPLORE ? 'px-12' : 'px-8',
+      )}>
+        {pageType !== PageType.EXPLORE && (
+          <>
+            <AppTypeSelector value={currentType} onChange={setCurrentType} />
+            <div className='mx-2 w-[1px] h-3.5 bg-gray-200'/>
+          </>
+        )}
+        <Category
+          list={categories}
+          value={currCategory}
+          onChange={setCurrCategory}
+          allCategoriesEn={allCategoriesEn}
+        />
      </div>
-      <Category
-        className="mt-6 px-12"
-        list={categories}
-        value={currCategory}
-        onChange={setCurrCategory}
-        allCategoriesEn={allCategoriesEn}
-      />
-      <div className="relative flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow">
+      <div className={cn(
+        'relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow',
+        pageType === PageType.EXPLORE ? 'mt-6' : 'mt-0 pt-2',
+      )}>
        <nav
-          className={`${s.appList} grid content-start gap-4 px-6 sm:px-12 shrink-0`}
-        >
-          {currList.map(app => (
+          className={cn(
+            s.appList,
+            'grid content-start shrink-0',
+            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',
+          )}>
+          {filteredList.map(app => (
            <AppCard
              key={app.app_id}
+              isExplore={pageType === PageType.EXPLORE}
              app={app}
              canCreate={hasEditPermission}
              onCreate={() => {
@@ -131,10 +183,12 @@ const Apps: FC = () => {
          ))}
        </nav>
      </div>
-
      {isShowCreateModal && (
        <CreateAppModal
+          appIcon={currApp?.app.icon || ''}
+          appIconBackground={currApp?.app.icon_background || ''}
          appName={currApp?.app.name || ''}
+          appDescription={currApp?.app.description || ''}
          show={isShowCreateModal}
          onConfirm={onCreate}
          onHide={() => setIsShowCreateModal(false)}
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import exploreI18n from '@/i18n/en-US/explore'
 import type { AppCategory } from '@/models/explore'
+import { ThumbsUp } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'

 const categoryI18n = exploreI18n.category

@@ -29,13 +30,10 @@ const Category: FC<ICategoryProps> = ({
  const { t } = useTranslation()
  const isAllCategories = !list.includes(value)

-  const itemClassName = (isSelected: boolean) =>
-    cn(
-      isSelected
-        ? 'bg-white text-primary-600 border-gray-200 font-semibold shadow-[0px_1px_2px_rgba(16,24,40,0.05)]'
-        : 'border-transparent font-medium',
-      'flex items-center h-7 px-3 border cursor-pointer rounded-lg',
-    )
+  const itemClassName = (isSelected: boolean) => cn(
+    'flex items-center px-3 py-[7px] h-[32px] rounded-lg border-[0.5px] border-transparent text-gray-700 font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
+    isSelected && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white',
+  )

  return (
    <div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}>
@@ -43,6 +41,7 @@ const Category: FC<ICategoryProps> = ({
        className={itemClassName(isAllCategories)}
        onClick={() => onChange(allCategoriesEn)}
      >
+        <ThumbsUp className='mr-1 w-3.5 h-3.5'/>
        {t('explore.apps.allCategories')}
      </div>
      {list.map(name => (
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -1,8 +1,6 @@
 'use client'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
-import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
@@ -10,29 +8,40 @@ import AppIcon from '@/app/components/base/app-icon'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import { useProviderContext } from '@/context/provider-context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+
 export type CreateAppModalProps = {
-  appName: string
  show: boolean
+  isEditModal?: boolean
+  appName: string
+  appDescription: string
+  appIcon: string
+  appIconBackground: string
  onConfirm: (info: {
    name: string
    icon: string
    icon_background: string
+    description: string
  }) => Promise<void>
  onHide: () => void
 }

 const CreateAppModal = ({
-  appName,
  show = false,
+  isEditModal = false,
+  appIcon,
+  appIconBackground,
+  appName,
+  appDescription,
  onConfirm,
  onHide,
 }: CreateAppModalProps) => {
  const { t } = useTranslation()

  const [name, setName] = React.useState(appName)
-
  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
-  const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })
+  const [emoji, setEmoji] = useState({ icon: appIcon, icon_background: appIconBackground })
+  const [description, setDescription] = useState(appDescription || '')

  const { plan, enableBilling } = useProviderContext()
  const isAppsFull = (enableBilling && plan.usage.buildApps >= plan.total.buildApps)
@@ -45,6 +54,7 @@ const CreateAppModal = ({
    onConfirm({
      name,
      ...emoji,
+      description,
    })
    onHide()
  }
@@ -53,25 +63,47 @@ const CreateAppModal = ({
    <>
      <Modal
        isShow={show}
-        onClose={() => { }}
-        className={cn(s.modal, '!max-w-[480px]', 'px-8')}
+        onClose={() => {}}
+        wrapperClassName='z-40'
+        className='relative !max-w-[480px] px-8'
      >
-        <span className={s.close} onClick={onHide} />
-        <div className={s.title}>{t('explore.appCustomize.title', { name: appName })}</div>
-        <div className={s.content}>
-          <div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
-          <div className='flex items-center justify-between space-x-3'>
-            <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
-            <input
-              value={name}
-              onChange={e => setName(e.target.value)}
-              className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
+        <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
+          <XClose className='w-4 h-4 text-gray-500' />
+        </div>
+        {isEditModal && (
+          <div className='mb-9 font-semibold text-xl leading-[30px] text-gray-900'>{t('app.editAppTitle')}</div>
+        )}
+        {!isEditModal && (
+          <div className='mb-9 font-semibold text-xl leading-[30px] text-gray-900'>{t('explore.appCustomize.title', { name: appName })}</div>
+        )}
+        <div className='mb-9'>
+          {/* icon & name */}
+          <div className='pt-2'>
+            <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionName')}</div>
+            <div className='flex items-center justify-between space-x-2'>
+              <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
+              <input
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder={t('app.newApp.appNamePlaceholder') || ''}
+                className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+              />
+            </div>
+          </div>
+          {/* description */}
+          <div className='pt-2'>
+            <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionDescription')}</div>
+            <textarea
+              className='w-full h-10 px-3 py-2 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs h-[80px] resize-none'
+              placeholder={t('app.newApp.appDescriptionPlaceholder') || ''}
+              value={description}
+              onChange={e => setDescription(e.target.value)}
            />
          </div>
-          {isAppsFull && <AppsFull loc='app-explore-create' />}
+          {!isEditModal && isAppsFull && <AppsFull loc='app-explore-create' />}
        </div>
        <div className='flex flex-row-reverse'>
-          <Button disabled={isAppsFull} className='w-24 ml-2' type='primary' onClick={submit}>{t('common.operation.create')}</Button>
+          <Button disabled={!isEditModal && isAppsFull} className='w-24 ml-2' type='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
          <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
        </div>
      </Modal>
@@ -81,7 +113,7 @@ const CreateAppModal = ({
          setShowEmojiPicker(false)
        }}
        onClose={() => {
-          setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
+          setEmoji({ icon: appIcon, icon_background: appIconBackground })
          setShowEmojiPicker(false)
        }}
      />}
--- a/web/app/components/explore/create-app-modal/style.module.css
+++ b/web/app/components/explore/create-app-modal/style.module.css
@@ -1,36 +0,0 @@
-.modal {
-  position: relative;
-}
-
-.modal .close {
-  position: absolute;
-  right: 16px;
-  top: 25px;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: center no-repeat url(~@/app/components/datasets/create/assets/close.svg);
-  background-size: 16px;
-  cursor: pointer;
-}
-
-.modal .title {
-  @apply mb-9;
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 30px;
-  color: #101828;
-}
-
-.modal .content {
-  @apply mb-9;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: #101828;
-}
-
-.subTitle {
-  margin-bottom: 8px;
-  font-weight: 500;
-}
--- a/web/app/components/explore/installed-app/index.tsx
+++ b/web/app/components/explore/installed-app/index.tsx
@@ -27,13 +27,15 @@ const InstalledApp: FC<IInstalledAppProps> = ({

  return (
    <div className='h-full py-2 pl-0 pr-2 sm:p-2'>
-      {installedApp?.app.mode === 'chat'
-        ? (
-          <ChatWithHistory installedAppInfo={installedApp} className='rounded-2xl shadow-md overflow-hidden' />
-        )
-        : (
-          <TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>
-        )}
+      {installedApp.app.mode !== 'completion' && installedApp.app.mode !== 'workflow' && (
+        <ChatWithHistory installedAppInfo={installedApp} className='rounded-2xl shadow-md overflow-hidden' />
+      )}
+      {installedApp.app.mode === 'completion' && (
+        <TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>
+      )}
+      {installedApp.app.mode === 'workflow' && (
+        <TextGenerationApp isWorkflow isInstalledApp installedAppInfo={installedApp}/>
+      )}
    </div>
  )
 }