node selector

web/app/components/workflow/panel/chat-variable-panel/components/node-selector.tsx

@@ -1,6 +1,10 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
+import {
+  RiArrowDownSLine,
+  RiCheckLine,
+} from '@remixicon/react'
 import {
   useNodes,
 } from 'reactflow'
@@ -9,14 +13,16 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import BlockIcon from '@/app/components/workflow/block-icon'
 import type {
   CommonNodeType,
 } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
 
 type Props = {
-  value: boolean
-  onChange: (value: boolean) => void
+  value: string
+  onChange: (value: string) => void
   nodeType?: BlockEnum
 }
 
@@ -30,6 +36,8 @@ const NodeSelector: FC<Props> = ({
 
   const filteredNodes = nodeType ? nodes.filter(node => node.data?.type === nodeType) : nodes
 
+  const currentNode = useMemo(() => filteredNodes.find(node => node.id === value), [filteredNodes, value])
+
   return (
     <PortalToFollowElem
       open={open}
@@ -38,13 +46,25 @@ const NodeSelector: FC<Props> = ({
       offset={4}
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <span>Select Node</span>
+        {currentNode && (
+          <div className={cn('flex h-8 w-[208px] cursor-pointer items-center gap-1 rounded-lg bg-components-input-bg-normal px-2 py-1 pl-3 hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt')}>{currentNode.data?.title}</div>
+        )}
+        {!currentNode && (
+          <div className={cn('flex h-8 w-[208px] cursor-pointer items-center gap-1 rounded-lg bg-components-input-bg-normal px-2 py-1 pl-3 hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt')}>
+            <div className='system-sm-regular grow truncate text-components-input-text-placeholder'>Select node...</div>
+            <RiArrowDownSLine className='h-4 w-4 text-text-quaternary' />
+          </div>
+        )}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[25]'>
-        <div className='rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
+        <div className='w-[209px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
           {filteredNodes.map(node => (
-            <div key={node.id} className=''>
-              {node.data?.title}
+            <div key={node.id} className='flex cursor-pointer items-center rounded-lg px-2 py-1 hover:bg-state-base-hover' onClick={() => onChange(node.id)}>
+              <BlockIcon className={cn('mr-2 shrink-0')} type={node.data?.type} />
+              <div className='system-sm-medium grow text-text-secondary'>{node.data?.title}</div>
+              {currentNode?.id === node.id && (
+                <RiCheckLine className='h-4 w-4 shrink-0 text-text-accent' />
+              )}
             </div>
           ))}
         </div>

web/app/components/workflow/panel/chat-variable-panel/hooks/use-form/use-memory-schema.ts

@@ -118,7 +118,6 @@ export const useMemorySchema = () => {
       label: 'Node',
       type: FormTypeEnum.nodeSelector,
       fieldClassName: 'flex justify-between',
-      inputClassName: 'w-[102px]',
       default: '',
       show_on: [
         {