features

web/app/components/workflow/features.tsx

@@ -1,37 +1,44 @@
 import { memo } from 'react'
 import { useStore } from './store'
-import Button from '@/app/components/base/button'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import {
-  Plus02,
-  XClose,
-} from '@/app/components/base/icons/src/vender/line/general'
+  FeaturesChoose,
+  FeaturesPanel,
+  FeaturesProvider,
+} from '@/app/components/base/features'
 
 const Features = () => {
-  const showFeatures = useStore(state => state.showFeatures)
-  const setShowFeatures = useStore(state => state.setShowFeatures)
-
-  if (!showFeatures)
-    return null
+  const setShowFeaturesPanel = useStore(state => state.setShowFeaturesPanel)
 
   return (
-    <div className='absolute top-2 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
-      <div className='flex items-center justify-between px-4 pt-3'>
-        Features
-        <div className='flex items-center'>
-          <Button className='px-3 py-0 h-8 rounded-lg border border-primary-100 bg-primary-25 shadow-xs text-xs font-semibold text-primary-600'>
-            <Plus02 className='mr-1 w-4 h-4' />
-            Add Features
-          </Button>
-          <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
-          <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
-            onClick={() => setShowFeatures(false)}
-          >
-            <XClose className='w-4 h-4 text-gray-500' />
+    <FeaturesProvider>
+      <div className='absolute top-2 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
+        <div className='flex items-center justify-between px-4 pt-3'>
+          Features
+          <div className='flex items-center'>
+            <FeaturesChoose />
+            <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
+            <div
+              className='flex items-center justify-center w-6 h-6 cursor-pointer'
+              onClick={() => setShowFeaturesPanel(false)}
+            >
+              <XClose className='w-4 h-4 text-gray-500' />
+            </div>
           </div>
         </div>
+        <div className='p-4'>
+          <FeaturesPanel
+            openingStatementProps={{
+              onAutoAddPromptVariable: () => {},
+            }}
+            annotationProps={{
+              onEmbeddingChange: () => {},
+              onScoreChange: () => {},
+            }}
+          />
+        </div>
       </div>
-    </div>
+    </FeaturesProvider>
   )
 }
 

web/app/components/workflow/header/index.tsx

@@ -13,13 +13,13 @@ import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arr
 
 const Header: FC = () => {
   const mode = useStore(state => state.mode)
-  const setShowFeatures = useStore(state => state.setShowFeatures)
+  const setShowFeaturesPanel = useStore(state => state.setShowFeaturesPanel)
   const runStaus = useStore(state => state.runStaus)
   const setRunStaus = useStore(state => state.setRunStaus)
 
   const handleShowFeatures = useCallback(() => {
-    setShowFeatures(true)
-  }, [setShowFeatures])
+    setShowFeaturesPanel(true)
+  }, [setShowFeaturesPanel])
 
   return (
     <div

web/app/components/workflow/index.tsx

@@ -22,6 +22,7 @@ import CustomEdge from './custom-edge'
 import CustomConnectionLine from './custom-connection-line'
 import Panel from './panel'
 import Features from './features'
+import { useStore } from './store'
 
 const nodeTypes = {
   custom: CustomNode,
@@ -38,6 +39,7 @@ const Workflow: FC<WorkflowProps> = memo(({
   nodes: initialNodes,
   edges: initialEdges,
 }) => {
+  const showFeaturesPanel = useStore(state => state.showFeaturesPanel)
   const [nodes] = useNodesState(initialNodes)
   const [edges, _, onEdgesChange] = useEdgesState(initialEdges)
   const nodesInitialized = useNodesInitialized()
@@ -64,7 +66,9 @@ const Workflow: FC<WorkflowProps> = memo(({
       <Header />
       <Panel />
       <ZoomInOut />
-      <Features />
+      {
+        showFeaturesPanel && <Features />
+      }
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}

web/app/components/workflow/store.ts

@@ -3,13 +3,15 @@ import { create } from 'zustand'
 type State = {
   mode: string
   showRunHistory: boolean
-  showFeatures: boolean
+  showFeaturesPanel: boolean
+  showFeaturesModal: boolean
   runStaus: string
 }
 
 type Action = {
   setShowRunHistory: (showRunHistory: boolean) => void
-  setShowFeatures: (showFeatures: boolean) => void
+  setShowFeaturesPanel: (showFeaturesPanel: boolean) => void
+  setShowFeaturesModal: (showFeaturesModal: boolean) => void
   setRunStaus: (runStaus: string) => void
 }
 
@@ -17,8 +19,10 @@ export const useStore = create<State & Action>(set => ({
   mode: 'workflow',
   showRunHistory: false,
   setShowRunHistory: showRunHistory => set(() => ({ showRunHistory })),
-  showFeatures: false,
-  setShowFeatures: showFeatures => set(() => ({ showFeatures })),
+  showFeaturesPanel: false,
+  setShowFeaturesPanel: showFeaturesPanel => set(() => ({ showFeaturesPanel })),
+  showFeaturesModal: false,
+  setShowFeaturesModal: showFeaturesModal => set(() => ({ showFeaturesModal })),
   runStaus: '',
   setRunStaus: runStaus => set(() => ({ runStaus })),
 }))