@servicetitan/titan-chatbot-ui-anvil2 4.3.2 → 4.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/components/chatbot/filters/chatbot-filter-button.d.ts +1 -0
- package/dist/components/chatbot/filters/chatbot-filter-button.d.ts.map +1 -1
- package/dist/components/chatbot/filters/chatbot-filter-button.js +2 -1
- package/dist/components/chatbot/filters/chatbot-filter-button.js.map +1 -1
- package/dist/components/chatbot/filters/chatbot-filter.d.ts +2 -2
- package/dist/components/chatbot/filters/chatbot-filter.d.ts.map +1 -1
- package/dist/components/chatbot/filters/chatbot-filter.js +21 -19
- package/dist/components/chatbot/filters/chatbot-filter.js.map +1 -1
- package/dist/components/chatbot/filters/chatbot-filter.module.css +5 -0
- package/dist/components/chatbot/filters/chatbot-filters.js +1 -1
- package/package.json +6 -6
- package/src/components/chatbot/filters/chatbot-filter-button.tsx +4 -3
- package/src/components/chatbot/filters/chatbot-filter.module.css +5 -0
- package/src/components/chatbot/filters/chatbot-filter.module.css.d.ts +1 -0
- package/src/components/chatbot/filters/chatbot-filter.tsx +31 -25
- package/src/components/chatbot/filters/chatbot-filters.tsx +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v4.4.0 (Thu Oct 23 2025)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- SPA-7397: Filters changed from hiding to disabling inactive ones [#67](https://github.com/servicetitan/titan-chatbot-client/pull/67) ([@AlexYarmolchuk](https://github.com/AlexYarmolchuk))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Alexandr Yarmolchuk ([@AlexYarmolchuk](https://github.com/AlexYarmolchuk))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v4.3.1 (Fri Oct 17 2025)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chatbot-filter-button.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/filters/chatbot-filter-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAE,aAAa,EAAsD,MAAM,OAAO,CAAC;AAG9F,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAChC,aAAa,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"chatbot-filter-button.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/filters/chatbot-filter-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAE,aAAa,EAAsD,MAAM,OAAO,CAAC;AAG9F,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAChC,aAAa,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAoD/F,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { Chip } from '@servicetitan/anvil2';
|
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
|
|
5
5
|
import * as Styles from './chatbot-filter.module.css';
|
|
6
|
-
export const ChatbotFilterButton = forwardRef(({ className, count, open, ...chipProps }, ref) => {
|
|
6
|
+
export const ChatbotFilterButton = forwardRef(({ className, count, disabled, open, ...chipProps }, ref) => {
|
|
7
7
|
const buttonRef = useRef(null);
|
|
8
8
|
useImperativeHandle(ref, () => buttonRef.current, []);
|
|
9
9
|
useEffect(() => {
|
|
@@ -32,6 +32,7 @@ export const ChatbotFilterButton = forwardRef(({ className, count, open, ...chip
|
|
|
32
32
|
}
|
|
33
33
|
}, [count]);
|
|
34
34
|
return (_jsx(Chip, { ref: buttonRef, className: classNames(Styles.filterButton, {
|
|
35
|
+
[Styles.disabled]: disabled,
|
|
35
36
|
[Styles.filterButtonActive]: count > 0,
|
|
36
37
|
[Styles.filterButtonOpen]: open,
|
|
37
38
|
}, className), ...chipProps }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chatbot-filter-button.js","sourceRoot":"","sources":["../../../../src/components/chatbot/filters/chatbot-filter-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,sBAAsB,CAAC;AACvD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAqB,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9F,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAE5B,UAAU,CACV,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"chatbot-filter-button.js","sourceRoot":"","sources":["../../../../src/components/chatbot/filters/chatbot-filter-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,sBAAsB,CAAC;AACvD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAqB,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9F,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAE5B,UAAU,CACV,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACxD,MAAM,SAAS,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAEnD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACX,2GAA2G;QAC3G,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QAED,oCAAoC;QACpC,IAAI,SAAS,GAAuB,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,SAAS,CAAC,SAAS,GAAG,eAAe,CAAC;YAEtC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC3B,CAAC;QACD,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;QACzC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QAEtD,kCAAkC;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACjD,IAAI,CAAC,MAAM,EAAE,CAAC;YACV,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;YAC9B,IAAI,CAAC,GAAG;gBACJ,wQAAwQ,CAAC;YAC7Q,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACH,KAAC,IAAI,IACD,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,YAAY,EACnB;YACI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,KAAK,GAAG,CAAC;YACtC,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,IAAI;SAClC,EACD,SAAS,CACZ,KACG,SAAS,GACf,CACL,CAAC;AACN,CAAC,CACJ,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IUiFilterOption } from '@servicetitan/titan-chatbot-api';
|
|
2
2
|
import { FC } from 'react';
|
|
3
3
|
interface IChatFilterProps {
|
|
4
|
-
filter:
|
|
4
|
+
filter: IUiFilterOption;
|
|
5
5
|
}
|
|
6
6
|
export declare const ChatFilter: FC<IChatFilterProps>;
|
|
7
7
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chatbot-filter.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/filters/chatbot-filter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,
|
|
1
|
+
{"version":3,"file":"chatbot-filter.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/filters/chatbot-filter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAE1F,OAAO,EAAe,EAAE,EAA0D,MAAM,OAAO,CAAC;AAGhG,UAAU,gBAAgB;IACtB,MAAM,EAAE,eAAe,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAgK1C,CAAC"}
|
|
@@ -7,26 +7,22 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
|
7
7
|
import { ChatbotFilterButton } from './chatbot-filter-button';
|
|
8
8
|
export const ChatFilter = observer(({ filter }) => {
|
|
9
9
|
var _a, _b, _c;
|
|
10
|
-
const triggerRef = useRef();
|
|
10
|
+
const triggerRef = useRef(null);
|
|
11
11
|
const [filterText, setFilterText] = useState('');
|
|
12
12
|
const [open, setOpen] = useState(false);
|
|
13
13
|
const [listMaxHeight, setListMaxHeight] = useState(400);
|
|
14
14
|
const [{ filterStore }] = useDependencies(CHATBOT_UI_STORE_TOKEN);
|
|
15
15
|
const filterLabel = filterStore.getFilterLabel((_a = filter.displayName) !== null && _a !== void 0 ? _a : filter.key).trim();
|
|
16
|
-
const selectedOptionsCount = (_c = (_b = filterStore.
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
return ((_b = (_a = filter.subOptions) === null || _a === void 0 ? void 0 : _a.map(filterSelectable => {
|
|
20
|
-
var _a;
|
|
21
|
-
return ({
|
|
22
|
-
text: filterStore.getFilterLabel((_a = filterSelectable.displayName) !== null && _a !== void 0 ? _a : filterSelectable.key),
|
|
23
|
-
value: filterSelectable.key,
|
|
24
|
-
});
|
|
25
|
-
})) !== null && _b !== void 0 ? _b : []);
|
|
26
|
-
}, [filterStore, filter.subOptions]);
|
|
16
|
+
const selectedOptionsCount = (_c = (_b = filterStore.selected.get(filter.key)) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
|
|
17
|
+
const allFilterOptions = useMemo(() => filterStore.getFilterOptions(filter.key), [filterStore, filter.key]);
|
|
18
|
+
const allOptionsDisabled = allFilterOptions.every(opt => filterStore.isOptionDisabled(filter.key, opt.key));
|
|
27
19
|
const filteredOptions = useMemo(() => {
|
|
28
|
-
return
|
|
29
|
-
|
|
20
|
+
return allFilterOptions.filter(opt => {
|
|
21
|
+
var _a, _b;
|
|
22
|
+
return ((_a = opt.displayName) !== null && _a !== void 0 ? _a : opt.key) &&
|
|
23
|
+
((_b = opt.displayName) !== null && _b !== void 0 ? _b : opt.key).toLowerCase().indexOf(filterText.toLowerCase()) > -1;
|
|
24
|
+
});
|
|
25
|
+
}, [filterText, allFilterOptions]);
|
|
30
26
|
useEffect(() => {
|
|
31
27
|
if (!triggerRef.current) {
|
|
32
28
|
return;
|
|
@@ -37,6 +33,9 @@ export const ChatFilter = observer(({ filter }) => {
|
|
|
37
33
|
setListMaxHeight(boundingRect.top - headerFooterSize);
|
|
38
34
|
}, []);
|
|
39
35
|
const handleToggle = () => {
|
|
36
|
+
if (allOptionsDisabled) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
40
39
|
setOpen(prev => !prev);
|
|
41
40
|
};
|
|
42
41
|
const handleCancel = (e) => {
|
|
@@ -62,10 +61,13 @@ export const ChatFilter = observer(({ filter }) => {
|
|
|
62
61
|
popoverRef,
|
|
63
62
|
triggerRef,
|
|
64
63
|
]);
|
|
65
|
-
return (_jsx(ChatbotFilterButton, { ...props, ref: mergedRef, count: selectedOptionsCount, open: open, label: filterLabel, onClick: handleToggle, "data-cy": "titan-chatbot-filter-button" }));
|
|
66
|
-
} }), _jsx(Popover.Content, { children: _jsxs(Flex, { direction: "column", className: "p-4", gap: "4", "data-cy": "titan-chatbot-filter-content", children: [_jsx(Flex, { children: _jsx(TextField, { onChange: handleFilterChange, value: filterText, size: "small", placeholder: "Search", "data-cy": "titan-chatbot-filter-search" }) }),
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
return (_jsx(ChatbotFilterButton, { ...props, ref: mergedRef, disabled: allOptionsDisabled, count: selectedOptionsCount, open: open, label: filterLabel, onClick: handleToggle, "data-cy": "titan-chatbot-filter-button" }));
|
|
65
|
+
} }), _jsx(Popover.Content, { children: _jsxs(Flex, { direction: "column", className: "p-4", gap: "4", "data-cy": "titan-chatbot-filter-content", children: [_jsx(Flex, { children: _jsx(TextField, { onChange: handleFilterChange, value: filterText, size: "small", placeholder: "Search", "data-cy": "titan-chatbot-filter-search" }) }), allFilterOptions.length > 0 ? (_jsx(Flex, { direction: "column", gap: "2", "data-cy": "titan-chatbot-filter-options", children: filteredOptions.map(option => {
|
|
66
|
+
var _a;
|
|
67
|
+
return (_jsx(Checkbox, { value: option.key, label: filterStore.getFilterLabel((_a = option.displayName) !== null && _a !== void 0 ? _a : option.key), checked: filterStore.isOptionChecked(filter.key, option.key), disabled: filterStore.isOptionDisabled(filter.key, option.key), onChange: (_, state) => {
|
|
68
|
+
var _a;
|
|
69
|
+
handleItemChecked(String((_a = state === null || state === void 0 ? void 0 : state.value) !== null && _a !== void 0 ? _a : ''), !(state === null || state === void 0 ? void 0 : state.checked));
|
|
70
|
+
} }, option.key));
|
|
71
|
+
}) })) : (_jsx(Text, { className: "ta-center", size: "small", subdued: true, children: "No items available" })), _jsxs(Flex, { direction: "row", alignItems: "baseline", gap: "2", children: [_jsx(Text, { size: "small", children: "Select" }), _jsx(Text, { size: "small", children: _jsx(Link, { appearance: "primary", onClick: () => filterStore.selectAll(filter.key), "data-cy": "titan-chatbot-filter-all", children: "All" }) }), _jsx(Text, { size: "small", children: _jsx(Link, { appearance: "primary", onClick: () => filterStore.deselectAll(filter.key), "data-cy": "titan-chatbot-filter-none", children: "None" }) })] })] }) })] }));
|
|
70
72
|
});
|
|
71
73
|
//# sourceMappingURL=chatbot-filter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chatbot-filter.js","sourceRoot":"","sources":["../../../../src/components/chatbot/filters/chatbot-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"chatbot-filter.js","sourceRoot":"","sources":["../../../../src/components/chatbot/filters/chatbot-filter.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,6 @@ import { observer } from 'mobx-react';
|
|
|
6
6
|
import { ChatFilter } from './chatbot-filter';
|
|
7
7
|
export const ChatFilters = observer(({ className }) => {
|
|
8
8
|
const [{ filterStore }] = useDependencies(CHATBOT_UI_STORE_TOKEN);
|
|
9
|
-
return filterStore.filters.length > 0 ? (_jsx(Flex, { className: className, gap: "2", "data-cy": "titan-chatbot-filters", children: filterStore.filters.map(filter => (_jsx(ChatFilter, { filter: filter }, filter.
|
|
9
|
+
return filterStore.filters.length > 0 ? (_jsx(Flex, { className: className, gap: "2", "data-cy": "titan-chatbot-filters", children: filterStore.filters.map(filter => (_jsx(ChatFilter, { filter: filter }, filter.uid))) })) : null;
|
|
10
10
|
});
|
|
11
11
|
//# sourceMappingURL=chatbot-filters.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/titan-chatbot-ui-anvil2",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.0",
|
|
4
4
|
"description": "Chatbot experience UI package (Anvil2 version)",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"push:local": "yalc push"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@servicetitan/titan-chat-ui-anvil2": "^4.
|
|
21
|
-
"@servicetitan/titan-chat-ui-common": "^4.
|
|
22
|
-
"@servicetitan/titan-chatbot-api": "^4.
|
|
20
|
+
"@servicetitan/titan-chat-ui-anvil2": "^4.4.0",
|
|
21
|
+
"@servicetitan/titan-chat-ui-common": "^4.4.0",
|
|
22
|
+
"@servicetitan/titan-chatbot-api": "^4.4.0",
|
|
23
23
|
"nanoid": "^5.1.5"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"react-dom": ">=18"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@servicetitan/cypress-shared": "^4.
|
|
39
|
+
"@servicetitan/cypress-shared": "^4.4.0",
|
|
40
40
|
"cypress": "^15.2.0"
|
|
41
41
|
},
|
|
42
42
|
"keywords": [
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"cli": {
|
|
50
50
|
"webpack": false
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "b4dbc388479b90931319b63bb222da62d5b0df72"
|
|
53
53
|
}
|
|
@@ -4,9 +4,9 @@ import { FC, RefAttributes, forwardRef, useEffect, useImperativeHandle, useRef }
|
|
|
4
4
|
import * as Styles from './chatbot-filter.module.css';
|
|
5
5
|
|
|
6
6
|
export const ChatbotFilterButton: FC<
|
|
7
|
-
RefAttributes<HTMLElement> & ChipProps & { count: number; open: boolean }
|
|
8
|
-
> = forwardRef<HTMLElement, ChipProps & { open: boolean; count: number }>(
|
|
9
|
-
({ className, count, open, ...chipProps }, ref) => {
|
|
7
|
+
RefAttributes<HTMLElement> & ChipProps & { disabled: boolean; count: number; open: boolean }
|
|
8
|
+
> = forwardRef<HTMLElement, ChipProps & { disabled: boolean; open: boolean; count: number }>(
|
|
9
|
+
({ className, count, disabled, open, ...chipProps }, ref) => {
|
|
10
10
|
const buttonRef = useRef<HTMLElement | null>(null);
|
|
11
11
|
|
|
12
12
|
useImperativeHandle(ref, () => buttonRef.current!, []);
|
|
@@ -46,6 +46,7 @@ export const ChatbotFilterButton: FC<
|
|
|
46
46
|
className={classNames(
|
|
47
47
|
Styles.filterButton,
|
|
48
48
|
{
|
|
49
|
+
[Styles.disabled]: disabled,
|
|
49
50
|
[Styles.filterButtonActive]: count > 0,
|
|
50
51
|
[Styles.filterButtonOpen]: open,
|
|
51
52
|
},
|
|
@@ -1,39 +1,40 @@
|
|
|
1
1
|
import { Checkbox, Flex, Link, Popover, Text, TextField, useMergeRefs } from '@servicetitan/anvil2';
|
|
2
2
|
import { useDependencies } from '@servicetitan/react-ioc';
|
|
3
|
-
import { CHATBOT_UI_STORE_TOKEN,
|
|
3
|
+
import { CHATBOT_UI_STORE_TOKEN, IUiFilterOption } from '@servicetitan/titan-chatbot-api';
|
|
4
4
|
import { observer } from 'mobx-react';
|
|
5
5
|
import { ChangeEvent, FC, Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import { ChatbotFilterButton } from './chatbot-filter-button';
|
|
7
7
|
|
|
8
8
|
interface IChatFilterProps {
|
|
9
|
-
filter:
|
|
9
|
+
filter: IUiFilterOption;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
export const ChatFilter: FC<IChatFilterProps> = observer(({ filter }
|
|
13
|
-
const triggerRef = useRef<HTMLButtonElement>();
|
|
12
|
+
export const ChatFilter: FC<IChatFilterProps> = observer(({ filter }) => {
|
|
13
|
+
const triggerRef = useRef<HTMLButtonElement>(null);
|
|
14
14
|
const [filterText, setFilterText] = useState('');
|
|
15
15
|
const [open, setOpen] = useState(false);
|
|
16
16
|
const [listMaxHeight, setListMaxHeight] = useState(400);
|
|
17
17
|
const [{ filterStore }] = useDependencies(CHATBOT_UI_STORE_TOKEN);
|
|
18
18
|
const filterLabel = filterStore.getFilterLabel(filter.displayName ?? filter.key).trim();
|
|
19
|
-
const selectedOptionsCount = filterStore.selectedOptions[filter.key]?.length ?? 0;
|
|
20
19
|
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
)
|
|
30
|
-
|
|
20
|
+
const selectedOptionsCount = filterStore.selected.get(filter.key)?.length ?? 0;
|
|
21
|
+
|
|
22
|
+
const allFilterOptions = useMemo(
|
|
23
|
+
() => filterStore.getFilterOptions(filter.key),
|
|
24
|
+
[filterStore, filter.key]
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
const allOptionsDisabled = allFilterOptions.every(opt =>
|
|
28
|
+
filterStore.isOptionDisabled(filter.key, opt.key)
|
|
29
|
+
);
|
|
31
30
|
|
|
32
31
|
const filteredOptions = useMemo(() => {
|
|
33
|
-
return
|
|
34
|
-
opt =>
|
|
32
|
+
return allFilterOptions.filter(
|
|
33
|
+
opt =>
|
|
34
|
+
(opt.displayName ?? opt.key) &&
|
|
35
|
+
(opt.displayName ?? opt.key).toLowerCase().indexOf(filterText.toLowerCase()) > -1
|
|
35
36
|
);
|
|
36
|
-
}, [filterText,
|
|
37
|
+
}, [filterText, allFilterOptions]);
|
|
37
38
|
|
|
38
39
|
useEffect(() => {
|
|
39
40
|
if (!triggerRef.current) {
|
|
@@ -46,6 +47,9 @@ export const ChatFilter: FC<IChatFilterProps> = observer(({ filter }: IChatFilte
|
|
|
46
47
|
}, []);
|
|
47
48
|
|
|
48
49
|
const handleToggle = () => {
|
|
50
|
+
if (allOptionsDisabled) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
49
53
|
setOpen(prev => !prev);
|
|
50
54
|
};
|
|
51
55
|
|
|
@@ -89,6 +93,7 @@ export const ChatFilter: FC<IChatFilterProps> = observer(({ filter }: IChatFilte
|
|
|
89
93
|
<ChatbotFilterButton
|
|
90
94
|
{...props}
|
|
91
95
|
ref={mergedRef}
|
|
96
|
+
disabled={allOptionsDisabled}
|
|
92
97
|
count={selectedOptionsCount}
|
|
93
98
|
open={open}
|
|
94
99
|
label={filterLabel}
|
|
@@ -114,16 +119,17 @@ export const ChatFilter: FC<IChatFilterProps> = observer(({ filter }: IChatFilte
|
|
|
114
119
|
data-cy="titan-chatbot-filter-search"
|
|
115
120
|
/>
|
|
116
121
|
</Flex>
|
|
117
|
-
{
|
|
122
|
+
{allFilterOptions.length > 0 ? (
|
|
118
123
|
<Flex direction="column" gap="2" data-cy="titan-chatbot-filter-options">
|
|
119
124
|
{filteredOptions.map(option => (
|
|
120
125
|
<Checkbox
|
|
121
|
-
key={option.
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
126
|
+
key={option.key}
|
|
127
|
+
value={option.key}
|
|
128
|
+
label={filterStore.getFilterLabel(
|
|
129
|
+
option.displayName ?? option.key
|
|
130
|
+
)}
|
|
131
|
+
checked={filterStore.isOptionChecked(filter.key, option.key)}
|
|
132
|
+
disabled={filterStore.isOptionDisabled(filter.key, option.key)}
|
|
127
133
|
onChange={(_, state) => {
|
|
128
134
|
handleItemChecked(
|
|
129
135
|
String(state?.value ?? ''),
|
|
@@ -10,7 +10,7 @@ export const ChatFilters: FC<{ className?: string }> = observer(({ className })
|
|
|
10
10
|
return filterStore.filters.length > 0 ? (
|
|
11
11
|
<Flex className={className} gap="2" data-cy="titan-chatbot-filters">
|
|
12
12
|
{filterStore.filters.map(filter => (
|
|
13
|
-
<ChatFilter key={filter.
|
|
13
|
+
<ChatFilter key={filter.uid} filter={filter} />
|
|
14
14
|
))}
|
|
15
15
|
</Flex>
|
|
16
16
|
) : null;
|