feat: introduce trigger functionality (#27644)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>
Co-authored-by: Harry <xh001x@hotmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: WTW0313 <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import type { Dispatch, SetStateAction } from 'react'
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
 import type { ViewType } from '@/app/components/workflow/block-selector/view-type-select'
@@ -10,6 +11,7 @@ import { getMarketplaceUrl } from '@/utils/var'
 import { useRAGRecommendedPlugins } from '@/service/use-tools'
 import List from './list'
 import { getFormattedPlugin } from '@/app/components/plugins/marketplace/utils'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
 
 type RAGToolRecommendationsProps = {
   viewType: ViewType
@@ -17,12 +19,34 @@ type RAGToolRecommendationsProps = {
   onTagsChange: Dispatch<SetStateAction<string[]>>
 }
 
+const STORAGE_KEY = 'workflow_rag_recommendations_collapsed'
+
 const RAGToolRecommendations = ({
   viewType,
   onSelect,
   onTagsChange,
 }: RAGToolRecommendationsProps) => {
   const { t } = useTranslation()
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
+    if (typeof window === 'undefined')
+      return false
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    return stored === 'true'
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined')
+      return
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    if (stored !== null)
+      setIsCollapsed(stored === 'true')
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined')
+      return
+    window.localStorage.setItem(STORAGE_KEY, String(isCollapsed))
+  }, [isCollapsed])
 
   const {
     data: ragRecommendedPlugins,
@@ -52,51 +76,60 @@ const RAGToolRecommendations = ({
 
   return (
     <div className='flex flex-col p-1'>
-      <div className='system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary'>
-        {t('pipeline.ragToolSuggestions.title')}
-      </div>
-      {/* For first time loading, show loading */}
-      {isLoadingRAGRecommendedPlugins && (
-        <div className='py-2'>
-          <Loading type='app' />
-        </div>
-      )}
-      {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length === 0 && unInstalledPlugins.length === 0 && (
-        <p className='system-xs-regular px-3 py-1 text-text-tertiary'>
-          <Trans
-            i18nKey='pipeline.ragToolSuggestions.noRecommendationPlugins'
-            components={{
-              CustomLink: (
-                <Link
-                  className='text-text-accent'
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  href={getMarketplaceUrl('', { tags: 'rag' })}
-                />
-              ),
-            }}
-          />
-        </p>
-      )}
-      {(recommendedPlugins.length > 0 || unInstalledPlugins.length > 0) && (
+      <button
+        type='button'
+        className='flex w-full items-center rounded-md px-3 pb-0.5 pt-1 text-left text-text-tertiary'
+        onClick={() => setIsCollapsed(prev => !prev)}
+      >
+        <span className='system-xs-medium text-text-tertiary'>{t('pipeline.ragToolSuggestions.title')}</span>
+        <ArrowDownRoundFill className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
+      </button>
+      {!isCollapsed && (
         <>
-          <List
-            tools={recommendedPlugins}
-            unInstalledPlugins={unInstalledPlugins}
-            onSelect={onSelect}
-            viewType={viewType}
-          />
-          <div
-            className='flex cursor-pointer items-center gap-x-2 py-1 pl-3 pr-2'
-            onClick={loadMore}
-          >
-            <div className='px-1'>
-              <RiMoreLine className='size-4 text-text-tertiary' />
+          {/* For first time loading, show loading */}
+          {isLoadingRAGRecommendedPlugins && (
+            <div className='py-2'>
+              <Loading type='app' />
             </div>
-            <div className='system-xs-regular text-text-tertiary'>
-              {t('common.operation.more')}
-            </div>
-          </div>
+          )}
+          {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length === 0 && unInstalledPlugins.length === 0 && (
+            <p className='system-xs-regular px-3 py-1 text-text-tertiary'>
+              <Trans
+                i18nKey='pipeline.ragToolSuggestions.noRecommendationPlugins'
+                components={{
+                  CustomLink: (
+                    <Link
+                      className='text-text-accent'
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      href={getMarketplaceUrl('', { tags: 'rag' })}
+                    />
+                  ),
+                }}
+              />
+            </p>
+          )}
+          {(recommendedPlugins.length > 0 || unInstalledPlugins.length > 0) && (
+            <>
+              <List
+                tools={recommendedPlugins}
+                unInstalledPlugins={unInstalledPlugins}
+                onSelect={onSelect}
+                viewType={viewType}
+              />
+              <div
+                className='flex cursor-pointer items-center gap-x-2 py-1 pl-3 pr-2'
+                onClick={loadMore}
+              >
+                <div className='px-1'>
+                  <RiMoreLine className='size-4 text-text-tertiary' />
+                </div>
+                <div className='system-xs-regular text-text-tertiary'>
+                  {t('common.operation.more')}
+                </div>
+              </div>
+            </>
+          )}
         </>
       )}
     </div>

web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx

@@ -1,7 +1,4 @@
-import {
-  useMemo,
-  useRef,
-} from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import type { BlockEnum, ToolWithProvider } from '../../types'
 import type { ToolDefaultValue } from '../types'
 import { ViewType } from '../view-type-select'
@@ -12,9 +9,10 @@ import ToolListTreeView from '../tool/tool-list-tree-view/list'
 import ToolListFlatView from '../tool/tool-list-flat-view/list'
 import UninstalledItem from './uninstalled-item'
 import type { Plugin } from '@/app/components/plugins/types'
+import type { OnSelectBlock } from '@/app/components/workflow/types'
 
 type ListProps = {
-  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  onSelect: OnSelectBlock
   tools: ToolWithProvider[]
   viewType: ViewType
   unInstalledPlugins: Plugin[]
@@ -62,6 +60,10 @@ const List = ({
 
   const toolRefs = useRef({})
 
+  const handleSelect = useCallback((type: BlockEnum, tool: ToolDefaultValue) => {
+    onSelect(type, tool)
+  }, [onSelect])
+
   return (
     <div className={cn('max-w-[100%] p-1', className)}>
       {!!tools.length && (
@@ -72,7 +74,7 @@ const List = ({
             payload={listViewToolData}
             isShowLetterIndex={false}
             hasSearchText={false}
-            onSelect={onSelect}
+            onSelect={handleSelect}
             canNotSelectMultiple
             indexBar={null}
           />
@@ -80,7 +82,7 @@ const List = ({
           <ToolListTreeView
             payload={treeViewToolsData}
             hasSearchText={false}
-            onSelect={onSelect}
+            onSelect={handleSelect}
             canNotSelectMultiple
           />
         )