Knowledge optimization (#3755)

Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: JzoNg <jzongcode@gmail.com>
2024-04-24 15:02:29 +08:00
parent 3cd8e6f5c6
commit f257f2c396
75 changed files with 2756 additions and 266 deletions
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -2,7 +2,7 @@

 import { useContext, useContextSelector } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import s from './style.module.css'
@@ -22,9 +22,12 @@ import { useProviderContext } from '@/context/provider-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
+import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import EditAppModal from '@/app/components/explore/create-app-modal'
 import SwitchAppModal from '@/app/components/app/switch-app-modal'
+import type { Tag } from '@/app/components/base/tag-management/constant'
+import TagSelector from '@/app/components/base/tag-management/selector'

 export type AppCardProps = {
  app: App
@@ -142,6 +145,9 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
  }

  const Operations = (props: HtmlContentProps) => {
+    const onMouseLeave = async () => {
+      props.onClose?.()
+    }
    const onClickSettings = async (e: React.MouseEvent<HTMLButtonElement>) => {
      e.stopPropagation()
      props.onClick?.()
@@ -173,7 +179,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
      setShowConfirmDelete(true)
    }
    return (
-      <div className="relative w-full py-1">
+      <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
        <button className={s.actionItem} onClick={onClickSettings}>
          <span className={s.actionName}>{t('app.editApp')}</span>
        </button>
@@ -208,6 +214,11 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
    )
  }

+  const [tags, setTags] = useState<Tag[]>(app.tags)
+  useEffect(() => {
+    setTags(app.tags)
+  }, [app.tags])
+
  return (
    <>
      <div
@@ -254,27 +265,71 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
              {app.mode === 'completion' && <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>}
            </div>
          </div>
-          {isCurrentWorkspaceManager && <CustomPopover
-            htmlContent={<Operations />}
-            position="br"
-            trigger="click"
-            btnElement={<div className={cn(s.actionIcon, s.commonIcon)} />}
-            btnClassName={open =>
-              cn(
-                open ? '!bg-gray-100 !shadow-none' : '!bg-transparent',
-                '!hidden h-8 w-8 !p-2 rounded-md border-none hover:!bg-gray-100 group-hover:!inline-flex',
-              )
-            }
-            className={'!w-[128px] h-fit !z-20'}
-            popupClassName={
-              (app.mode === 'completion' || app.mode === 'chat')
-                ? '!w-[238px] translate-x-[-110px]'
-                : ''
-            }
-            manualClose
-          />}
        </div>
-        <div className='mb-1 px-[14px] text-xs leading-normal text-gray-500 line-clamp-4'>{app.description}</div>
+        <div
+          className={cn(
+            'grow mb-2 px-[14px] max-h-[72px] text-xs leading-normal text-gray-500 group-hover:line-clamp-2 group-hover:max-h-[36px]',
+            tags.length ? 'line-clamp-2' : 'line-clamp-4',
+          )}
+          title={app.description}
+        >
+          {app.description}
+        </div>
+        <div className={cn(
+          'items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
+          tags.length ? 'flex' : '!hidden group-hover:!flex',
+        )}>
+          <div className={cn('grow flex items-center gap-1 w-0')} onClick={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+          }}>
+            <div className={cn(
+              'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
+              tags.length ? '!block' : '!hidden',
+            )}>
+              <TagSelector
+                position='bl'
+                type='app'
+                targetID={app.id}
+                value={tags.map(tag => tag.id)}
+                selectedTags={tags}
+                onCacheUpdate={setTags}
+                onChange={onRefresh}
+              />
+            </div>
+          </div>
+          {isCurrentWorkspaceManager && (
+            <>
+              <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200'/>
+              <div className='!hidden group-hover:!flex shrink-0'>
+                <CustomPopover
+                  htmlContent={<Operations />}
+                  position="br"
+                  trigger="click"
+                  btnElement={
+                    <div
+                      className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
+                    >
+                      <DotsHorizontal className='w-4 h-4 text-gray-700' />
+                    </div>
+                  }
+                  btnClassName={open =>
+                    cn(
+                      open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
+                      'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
+                    )
+                  }
+                  popupClassName={
+                    (app.mode === 'completion' || app.mode === 'chat')
+                      ? '!w-[238px] translate-x-[-110px]'
+                      : ''
+                  }
+                  className={'!w-[128px] h-fit !z-20'}
+                />
+              </div>
+            </>
+          )}
+        </div>
        {showEditModal && (
          <EditAppModal
            isEditModal
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@@ -13,19 +13,22 @@ 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 { DotsGrid, SearchLg } from '@/app/components/base/icons/src/vender/line/general'
-import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import { DotsGrid } from '@/app/components/base/icons/src/vender/line/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'
+import SearchInput from '@/app/components/base/search-input'
+import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
+import TagManagementModal from '@/app/components/base/tag-management'
+import TagFilter from '@/app/components/base/tag-management/filter'

 const getKey = (
  pageIndex: number,
  previousPageData: AppListResponse,
  activeTab: string,
+  tags: string[],
  keywords: string,
 ) => {
  if (!pageIndex || previousPageData.has_more) {
@@ -36,6 +39,9 @@ const getKey = (
    else
      delete params.params.mode

+    if (tags.length)
+      params.params.tag_ids = tags
+
    return params
  }
  return null
@@ -44,14 +50,17 @@ const getKey = (
 const Apps = () => {
  const { t } = useTranslation()
  const { isCurrentWorkspaceManager } = useAppContext()
+  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
  const [activeTab, setActiveTab] = useTabSearchParams({
    defaultTab: 'all',
  })
+  const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
+  const [tagIDs, setTagIDs] = useState<string[]>([])
  const [keywords, setKeywords] = useState('')
  const [searchKeywords, setSearchKeywords] = useState('')

  const { data, isLoading, setSize, mutate } = useSWRInfinite(
-    (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, activeTab, searchKeywords),
+    (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, activeTab, tagIDs, searchKeywords),
    fetchAppList,
    { revalidateFirstPage: true },
  )
@@ -61,7 +70,6 @@ const Apps = () => {
    { value: 'all', text: t('app.types.all'), icon: <DotsGrid className='w-[14px] h-[14px] mr-1'/> },
    { value: 'chat', text: t('app.types.chatbot'), icon: <ChatBot className='w-[14px] h-[14px] mr-1'/> },
    { value: 'agent-chat', text: t('app.types.agent'), icon: <CuteRobot className='w-[14px] h-[14px] mr-1'/> },
-    // { value: 'completion', text: t('app.newApp.completeApp'), icon: <AiText className='w-[14px] h-[14px] mr-1'/> },
    { value: 'workflow', text: t('app.types.workflow'), icon: <Route className='w-[14px] h-[14px] mr-1'/> },
  ]

@@ -88,14 +96,17 @@ const Apps = () => {
  const { run: handleSearch } = useDebounceFn(() => {
    setSearchKeywords(keywords)
  }, { wait: 500 })
-
  const handleKeywordsChange = (value: string) => {
    setKeywords(value)
    handleSearch()
  }

-  const handleClear = () => {
-    handleKeywordsChange('')
+  const { run: handleTagsUpdate } = useDebounceFn(() => {
+    setTagIDs(tagFilterValue)
+  }, { wait: 500 })
+  const handleTagsChange = (value: string[]) => {
+    setTagFilterValue(value)
+    handleTagsUpdate()
  }

  return (
@@ -106,31 +117,9 @@ const Apps = () => {
          onChange={setActiveTab}
          options={options}
        />
-        <div className="flex items-center px-2 w-[200px] h-8 rounded-lg bg-gray-200">
-          <div className="pointer-events-none shrink-0 flex items-center mr-1.5 justify-center w-4 h-4">
-            <SearchLg className="h-3.5 w-3.5 text-gray-500" aria-hidden="true" />
-          </div>
-          <input
-            type="text"
-            name="query"
-            className="grow block h-[18px] bg-gray-200 rounded-md border-0 text-gray-600 text-[13px] placeholder:text-gray-500 appearance-none outline-none"
-            placeholder={t('common.operation.search')!}
-            value={keywords}
-            onChange={(e) => {
-              handleKeywordsChange(e.target.value)
-            }}
-            autoComplete="off"
-          />
-          {
-            keywords && (
-              <div
-                className='shrink-0 flex items-center justify-center w-4 h-4 cursor-pointer'
-                onClick={handleClear}
-              >
-                <XCircle className='w-3.5 h-3.5 text-gray-400' />
-              </div>
-            )
-          }
+        <div className='flex items-center gap-2'>
+          <TagFilter type='app' value={tagFilterValue} onChange={handleTagsChange} />
+          <SearchInput className='w-[200px]' value={keywords} onChange={handleKeywordsChange} />
        </div>
      </div>
      <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
@@ -142,6 +131,9 @@ const Apps = () => {
        <CheckModal />
      </nav>
      <div ref={anchorRef} className='h-0'> </div>
+      {showTagManagementModal && (
+        <TagManagementModal type='app' show={showTagManagementModal} />
+      )}
    </>
  )
 }