feat(workflow): persist RAG recommendation panel collapse state

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,9 +76,16 @@ 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>
+      <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 && (
+        <>
           {/* For first time loading, show loading */}
           {isLoadingRAGRecommendedPlugins && (
             <div className='py-2'>
@@ -99,6 +130,8 @@ const RAGToolRecommendations = ({
               </div>
             </>
           )}
+        </>
+      )}
     </div>
   )
 }