fix: select field not work when it is not required (#5101)

api/core/tools/tool_manager.py

@@ -210,7 +210,7 @@ class ToolManager:
         if parameter_rule.type == ToolParameter.ToolParameterType.SELECT:
             # check if tool_parameter_config in options
             options = list(map(lambda x: x.value, parameter_rule.options))
-            if parameter_value not in options:
+            if parameter_value is not None and parameter_value not in options:
                 raise ValueError(
                     f"tool parameter {parameter_rule.name} value {parameter_value} not in options {options}")
 

web/app/components/base/select/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { Fragment, useEffect, useState } from 'react'
 import { Combobox, Listbox, Transition } from '@headlessui/react'
 import classNames from 'classnames'
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'react-i18next'
 import {
   PortalToFollowElem,
@@ -184,11 +184,24 @@ const SimpleSelect: FC<ISelectProps> = ({
       <div className={`relative h-9 ${wrapperClassName}`}>
         <Listbox.Button className={`w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${className}`}>
           <span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
-          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-            <ChevronDownIcon
-              className="h-5 w-5 text-gray-400"
-              aria-hidden="true"
-            />
+          <span className="absolute inset-y-0 right-0 flex items-center pr-2">
+            {selectedItem
+              ? (
+                <XMarkIcon
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setSelectedItem(null)
+                  }}
+                  className="h-5 w-5 text-gray-400 cursor-pointer"
+                  aria-hidden="false"
+                />
+              )
+              : (
+                <ChevronDownIcon
+                  className="h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+                />
+              )}
           </span>
         </Listbox.Button>
         {!disabled && (