[improvement](webapp) optimize filter css styles and modify menu name

Co-authored-by: williamhliu <williamhliu@tencent.com>

webapp/packages/chat-sdk/package.json

@@ -192,4 +192,4 @@
   "engines": {
     "node": ">=14.18.0"
   }
-}
+}

webapp/packages/chat-sdk/src/common/type.ts

@@ -49,7 +49,7 @@ export type FilterItemType = {
   bizName: string;
   operator: string;
   type: string;
-  value: string;
+  value: any;
 };
 
 export type ModelType = {

webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx

@@ -4,6 +4,7 @@ import { FilterItemType } from '../../common/type';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { queryDimensionValues } from '../../service';
 import debounce from 'lodash/debounce';
+import isArray from 'lodash/isArray';
 
 type Props = {
   modelId: number;
@@ -60,10 +61,13 @@ const FilterItem: React.FC<Props> = ({ modelId, filters, filter, onFiltersChange
     return debounce(loadOptions, 800);
   }, [queryDimensionValues]);
 
-  const onChange = (value: string) => {
+  const onChange = (value: string | string[]) => {
+    if (isArray(value) && value.length === 0) {
+      return;
+    }
     const newFilters = filters.map(item => {
       if (item.bizName === filter.bizName) {
-        item.value = `${value}`;
+        item.value = isArray(value) ? value : `${value}`;
       }
       return item;
     });
@@ -72,20 +76,20 @@ const FilterItem: React.FC<Props> = ({ modelId, filters, filter, onFiltersChange
 
   return (
     <span className={prefixCls}>
-      {typeof filter.value === 'string' ? (
+      {typeof filter.value === 'string' || isArray(filter.value) ? (
         <Select
           bordered={false}
           value={filter.value}
           options={options}
           className={`${prefixCls}-select-control`}
-          popupClassName={`${prefixCls}-select-popup`}
           onSearch={debounceFetcher}
           notFoundContent={loading ? <Spin size="small" /> : null}
           onChange={onChange}
+          mode={isArray(filter.value) ? 'multiple' : undefined}
           showSearch
         />
       ) : (
-        <span>{filter.value}</span>
+        <span className={`${prefixCls}-filter-value`}>{filter.value}</span>
       )}
     </span>
   );

webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx

@@ -96,7 +96,9 @@ const ParseTip: React.FC<Props> = ({
             <div className={`${prefixCls}-tip-item-option`}>
               <span>
                 <span className={`${prefixCls}-tip-item-filter-name`}>{filter.name}</span>
-                {filter.operator !== '=' ? ` ${filter.operator} ` : '：'}
+                {filter.operator !== '=' && filter.operator !== 'IN'
+                  ? ` ${filter.operator} `
+                  : '：'}
               </span>
               {queryMode !== 'DSL' && !filter.bizName?.includes('_id') ? (
                 <FilterItem

webapp/packages/chat-sdk/src/components/ChatItem/style.less

@@ -297,10 +297,21 @@
 .@{filter-item-prefix-cls} {
   &-select-control {
     min-width: 120px;
+    background-color: #f5f8fb;
+    border-radius: 6px;
   }
 
   .ant-select-selection-item {
     color: var(--chat-blue);
     font-weight: 500;
   }
+
+  .ant-select-multiple .ant-select-selection-item {
+    background-color: var(--light-blue-background);
+  }
+
+  &-filter-value {
+    color: var(--chat-blue);
+    font-weight: 500;
+  }
 }