Feat: Support re-segmentation (#114)

Co-authored-by: John Wang <takatost@gmail.com> Co-authored-by: Jyong <718720800@qq.com> Co-authored-by: 金伟强 <iamjoel007@gmail.com>
2025-12-24 18:23:07 +08:00 · 2023-06-01 23:19:36 +08:00
parent f65a3ad1cc
commit c67f626b66
61 changed files with 1166 additions and 759 deletions
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -1,22 +1,22 @@
 'use client'
-import React, { FC, useEffect } from 'react'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import Toast from '../../base/toast'
+import s from './style.module.css'
 import ExploreContext from '@/context/explore-context'
-import { App } from '@/models/explore'
+import type { App } from '@/models/explore'
 import Category from '@/app/components/explore/category'
 import AppCard from '@/app/components/explore/app-card'
-import { fetchAppList, installApp, fetchAppDetail } from '@/service/explore'
+import { fetchAppDetail, fetchAppList, installApp } from '@/service/explore'
 import { createApp } from '@/service/apps'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
 import Loading from '@/app/components/base/loading'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'

-import s from './style.module.css'
-import Toast from '../../base/toast'
-
-const Apps: FC = ({ }) => {
+const Apps: FC = () => {
  const { t } = useTranslation()
  const router = useRouter()
  const { setControlUpdateInstalledApps, hasEditPermission } = useContext(ExploreContext)
@@ -25,13 +25,14 @@ const Apps: FC = ({ }) => {
  const [isLoaded, setIsLoaded] = React.useState(false)

  const currList = (() => {
-    if(currCategory === '') return allList
+    if (currCategory === '')
+      return allList
    return allList.filter(item => item.category === currCategory)
  })()
  const [categories, setCategories] = React.useState([])
  useEffect(() => {
    (async () => {
-      const {categories, recommended_apps}:any = await fetchAppList()
+      const { categories, recommended_apps }: any = await fetchAppList()
      setCategories(categories)
      setAllList(recommended_apps)
      setIsLoaded(true)
@@ -49,9 +50,9 @@ const Apps: FC = ({ }) => {

  const [currApp, setCurrApp] = React.useState<App | null>(null)
  const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
-  const onCreate = async ({name, icon, icon_background}: any) => {
+  const onCreate = async ({ name, icon, icon_background }: any) => {
    const { app_model_config: model_config } = await fetchAppDetail(currApp?.app.id as string)
-    
+
    try {
      const app = await createApp({
        name,
@@ -67,12 +68,13 @@ const Apps: FC = ({ }) => {
      })
      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
      router.push(`/app/${app.id}/overview`)
-    } catch (e) {
+    }
+    catch (e) {
      Toast.notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
    }
  }

-  if(!isLoaded) {
+  if (!isLoaded) {
    return (
      <div className='flex h-full items-center'>
        <Loading type='area' />
@@ -92,16 +94,16 @@ const Apps: FC = ({ }) => {
        value={currCategory}
        onChange={setCurrCategory}
      />
-      <div 
+      <div
        className='flex mt-6 flex-col overflow-auto bg-gray-100 shrink-0 grow'
        style={{
-          maxHeight: 'calc(100vh - 243px)'
+          maxHeight: 'calc(100vh - 243px)',
        }}
      >
        <nav
          className={`${s.appList} grid content-start grid-cols-1 gap-4 px-12 pb-10grow shrink-0`}>
          {currList.map(app => (
-            <AppCard 
+            <AppCard
              key={app.app_id}
              app={app}
              canCreate={hasEditPermission}
@@ -116,13 +118,13 @@ const Apps: FC = ({ }) => {
      </div>

      {isShowCreateModal && (
-          <CreateAppModal
-            appName={currApp?.app.name || ''}
-            show={isShowCreateModal}
-            onConfirm={onCreate}
-            onHide={() => setIsShowCreateModal(false)}
-          />
-        )}
+        <CreateAppModal
+          appName={currApp?.app.name || ''}
+          show={isShowCreateModal}
+          onConfirm={onCreate}
+          onHide={() => setIsShowCreateModal(false)}
+        />
+      )}
    </div>
  )
 }
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -1,12 +1,13 @@
 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
-import exploreI18n from '@/i18n/lang/explore.en'
 import cn from 'classnames'
+import exploreI18n from '@/i18n/lang/explore.en'

 const categoryI18n = exploreI18n.category

-export interface ICategoryProps {
+export type ICategoryProps = {
  className?: string
  list: string[]
  value: string
@@ -17,23 +18,23 @@ const Category: FC<ICategoryProps> = ({
  className,
  list,
  value,
-  onChange
+  onChange,
 }) => {
  const { t } = useTranslation()

-  const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium','flex items-center h-7 px-3 border cursor-pointer rounded-lg')
-  const itemStyle = (isSelected: boolean) => isSelected ? {boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)'} : {}
+  const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium', 'flex items-center h-7 px-3 border cursor-pointer rounded-lg')
+  const itemStyle = (isSelected: boolean) => isSelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}
  return (
    <div className={cn(className, 'flex space-x-1 text-[13px]')}>
-      <div 
-          className={itemClassName('' === value)}
-          style={itemStyle('' === value)}
-          onClick={() => onChange('')}
-        >
-          {t('explore.apps.allCategories')}
-        </div>
+      <div
+        className={itemClassName(value === '')}
+        style={itemStyle(value === '')}
+        onClick={() => onChange('')}
+      >
+        {t('explore.apps.allCategories')}
+      </div>
      {list.map(name => (
-        <div 
+        <div
          key={name}
          className={itemClassName(name === value)}
          style={itemStyle(name === value)}
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -2,19 +2,18 @@
 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'
 import AppIcon from '@/app/components/base/app-icon'
 import EmojiPicker from '@/app/components/base/emoji-picker'

-import s from './style.module.css'
-
 type IProps = {
-  appName: string,
-  show: boolean,
-  onConfirm: (info: any) => void,
-  onHide: () => void,
+  appName: string
+  show: boolean
+  onConfirm: (info: any) => void
+  onHide: () => void
 }

 const CreateAppModal = ({
@@ -31,7 +30,7 @@ const CreateAppModal = ({
  const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })

  const submit = () => {
-    if(!name.trim()) {
+    if (!name.trim()) {
      Toast.notify({ type: 'error', message: t('explore.appCustomize.nameRequired') })
      return
    }
@@ -44,42 +43,42 @@ const CreateAppModal = ({

  return (
    <>
-    <Modal
-      isShow={show}
-      onClose={onHide}
-      className={cn(s.modal, '!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'
-          />
+      <Modal
+        isShow={show}
+        onClose={onHide}
+        className={cn(s.modal, '!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>
        </div>
-      </div>      
-      <div className='flex flex-row-reverse'>
-        <Button className='w-24 ml-2' type='primary' onClick={submit}>{t('common.operation.create')}</Button>
-        <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
-      </div>
-    </Modal>
-    {showEmojiPicker && <EmojiPicker
-      onSelect={(icon, icon_background) => {
-        console.log(icon, icon_background)
-        setEmoji({ icon, icon_background })
-        setShowEmojiPicker(false)
-      }}
-      onClose={() => {
-        setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
-        setShowEmojiPicker(false)
-      }}
-    />}
+        <div className='flex flex-row-reverse'>
+          <Button className='w-24 ml-2' type='primary' onClick={submit}>{t('common.operation.create')}</Button>
+          <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
+        </div>
+      </Modal>
+      {showEmojiPicker && <EmojiPicker
+        onSelect={(icon, icon_background) => {
+          console.log(icon, icon_background)
+          setEmoji({ icon, icon_background })
+          setShowEmojiPicker(false)
+        }}
+        onClose={() => {
+          setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
+          setShowEmojiPicker(false)
+        }}
+      />}
    </>
-    
+
  )
 }

--- a/web/app/components/explore/index.tsx
+++ b/web/app/components/explore/index.tsx
@@ -1,18 +1,19 @@
 'use client'
-import React, { FC, useEffect, useState } from 'react'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import ExploreContext from '@/context/explore-context'
 import Sidebar from '@/app/components/explore/sidebar'
 import { useAppContext } from '@/context/app-context'
 import { fetchMembers } from '@/service/common'
-import { InstalledApp } from '@/models/explore'
-import { useTranslation } from 'react-i18next'
+import type { InstalledApp } from '@/models/explore'

-export interface IExploreProps {
+export type IExploreProps = {
  children: React.ReactNode
 }

 const Explore: FC<IExploreProps> = ({
-  children
+  children,
 }) => {
  const { t } = useTranslation()
  const [controlUpdateInstalledApps, setControlUpdateInstalledApps] = useState(0)
@@ -23,8 +24,9 @@ const Explore: FC<IExploreProps> = ({
  useEffect(() => {
    document.title = `${t('explore.title')} -  Dify`;
    (async () => {
-      const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {}})
-      if(!accounts) return
+      const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
+      if (!accounts)
+        return
      const currUser = accounts.find(account => account.id === userProfile.id)
      setHasEditPermission(currUser?.role !== 'normal')
    })()
@@ -39,7 +41,7 @@ const Explore: FC<IExploreProps> = ({
            setControlUpdateInstalledApps,
            hasEditPermission,
            installedApps,
-            setInstalledApps
+            setInstalledApps,
          }
        }
      >
--- a/web/app/components/explore/installed-app/index.tsx
+++ b/web/app/components/explore/installed-app/index.tsx
@@ -1,12 +1,13 @@
 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useContext } from 'use-context-selector'
 import ExploreContext from '@/context/explore-context'
 import ChatApp from '@/app/components/share/chat'
 import TextGenerationApp from '@/app/components/share/text-generation'
 import Loading from '@/app/components/base/loading'

-export interface IInstalledAppProps {
+export type IInstalledAppProps = {
  id: string
 }

@@ -14,23 +15,25 @@ const InstalledApp: FC<IInstalledAppProps> = ({
  id,
 }) => {
  const { installedApps } = useContext(ExploreContext)
-  const installedApp  = installedApps.find(item => item.id === id)
-  
-  if(!installedApp) {
+  const installedApp = installedApps.find(item => item.id === id)
+
+  if (!installedApp) {
    return (
      <div className='flex h-full items-center'>
        <Loading type='area' />
      </div>
    )
  }
-  
+
  return (
    <div className='h-full p-2'>
-      {installedApp?.app.mode === 'chat' ? (
-        <ChatApp isInstalledApp installedAppInfo={installedApp}/>
-      ): (
-        <TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>
-      )}
+      {installedApp?.app.mode === 'chat'
+        ? (
+          <ChatApp isInstalledApp installedAppInfo={installedApp}/>
+        )
+        : (
+          <TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>
+        )}
    </div>
  )
 }
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -1,11 +1,12 @@
 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
-import Popover from '@/app/components/base/popover'
 import { TrashIcon } from '@heroicons/react/24/outline'

 import s from './style.module.css'
+import Popover from '@/app/components/base/popover'

 const PinIcon = (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -13,7 +14,7 @@ const PinIcon = (
  </svg>
 )

-export interface IItemOperationProps {
+export type IItemOperationProps = {
  className?: string
  isPinned: boolean
  isShowDelete: boolean
@@ -26,7 +27,7 @@ const ItemOperation: FC<IItemOperationProps> = ({
  isPinned,
  isShowDelete,
  togglePin,
-  onDelete
+  onDelete,
 }) => {
  const { t } = useTranslation()

@@ -42,18 +43,18 @@ const ItemOperation: FC<IItemOperationProps> = ({
          </div>
          {isShowDelete && (
            <div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={onDelete} >
-            <TrashIcon className={'w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
-            <span className={cn(s.actionName, 'group-hover:text-red-500')}>{t('explore.sidebar.action.delete')}</span>
-          </div>
+              <TrashIcon className={'w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
+              <span className={cn(s.actionName, 'group-hover:text-red-500')}>{t('explore.sidebar.action.delete')}</span>
+            </div>
          )}
-          
+
        </div>
      }
      trigger='click'
      position='br'
      btnElement={<div />}
-      btnClassName={(open) => cn(className, s.btn, 'h-6 w-6 rounded-md border-none p-1', open && '!bg-gray-100 !shadow-none')}
-      className={`!w-[120px] h-fit !z-20`}
+      btnClassName={open => cn(className, s.btn, 'h-6 w-6 rounded-md border-none p-1', open && '!bg-gray-100 !shadow-none')}
+      className={'!w-[120px] h-fit !z-20'}
    />
  )
 }
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -1,12 +1,11 @@
 'use client'
 import cn from 'classnames'
 import { useRouter } from 'next/navigation'
+import s from './style.module.css'
 import ItemOperation from '@/app/components/explore/item-operation'
 import AppIcon from '@/app/components/base/app-icon'

-import s from './style.module.css'
-
-export interface IAppNavItemProps {
+export type IAppNavItemProps = {
  name: string
  id: string
  icon: string
@@ -31,7 +30,7 @@ export default function AppNavItem({
 }: IAppNavItemProps) {
  const router = useRouter()
  const url = `/explore/installed/${id}`
-  
+
  return (
    <div
      key={id}
@@ -40,7 +39,7 @@ export default function AppNavItem({
        isSelected ? s.active : 'hover:bg-gray-200',
        'flex h-8 justify-between px-2 rounded-lg text-sm font-normal ',
      )}
-      onClick={() => { 
+      onClick={() => {
        router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
      }}
    >
@@ -53,7 +52,7 @@ export default function AppNavItem({
            borderColor: '0.5px solid rgba(0, 0, 0, 0.05)'
          }}
        /> */}
-        <AppIcon size='tiny'  icon={icon} background={icon_background} />
+        <AppIcon size='tiny' icon={icon} background={icon_background} />
        <div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
      </div>
      {