@capillarytech/blaze-ui 5.20.0 → 5.22.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/CapAskAira/CapAiMediaGeneration/saga.js +1446 -0
- package/CapAskAira/CapAiMediaGeneration/saga.js.map +1 -0
- package/CapCollapsibleLeftNavigation/saga.js +1441 -0
- package/CapCollapsibleLeftNavigation/saga.js.map +1 -0
- package/CapLanguageProvider/actions.js +125 -0
- package/CapLanguageProvider/actions.js.map +1 -0
- package/CapLanguageProvider/constants.js +37 -0
- package/CapLanguageProvider/constants.js.map +1 -0
- package/CapLanguageProvider/reducer.js +130 -0
- package/CapLanguageProvider/reducer.js.map +1 -0
- package/CapLanguageProvider/saga.js +1457 -0
- package/CapLanguageProvider/saga.js.map +1 -0
- package/CapLanguageProvider/selector.js +186 -0
- package/CapLanguageProvider/selector.js.map +1 -0
- package/CapSupportVideosWrapper/utils.js +34 -0
- package/CapSupportVideosWrapper/utils.js.map +1 -0
- package/package.json +1 -1
- package/CapActionBar/README.md +0 -11
- package/CapAdvancedIcon/README.md +0 -185
- package/CapAdvancedIcon/use-cases.md +0 -44
- package/CapAlert/README.md +0 -144
- package/CapAppNotEnabled/README.md +0 -84
- package/CapAskAira/README.md +0 -328
- package/CapBanner/README.md +0 -4
- package/CapBlock/README.md +0 -175
- package/CapBorderedBox/Status.md +0 -40
- package/CapCSVFileUploader/README.md +0 -124
- package/CapCSVFileUploader/Status.md +0 -47
- package/CapCard/README.md +0 -85
- package/CapCard/Status.md +0 -41
- package/CapCardBox/README.md +0 -169
- package/CapCardBox/Status.md +0 -52
- package/CapCarousel/README.md +0 -190
- package/CapCarousel/Status.md +0 -73
- package/CapCheckbox/README.md +0 -254
- package/CapCheckbox/Status.md +0 -41
- package/CapColorPicker/README.md +0 -112
- package/CapColorPicker/Status.md +0 -52
- package/CapColorPicker/tests/USE_CASES_ANALYSIS.md +0 -92
- package/CapColoredTag/README.md +0 -167
- package/CapColoredTag/Status.md +0 -49
- package/CapConditionPreview/MIGRATION_ANALYSIS.md +0 -70
- package/CapConditionPreview/README.md +0 -40
- package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md +0 -65
- package/CapCustomCard/README.md +0 -182
- package/CapCustomCard/Status.md +0 -40
- package/CapCustomCarousel/Status.md +0 -69
- package/CapCustomCheckboxList/README.md +0 -178
- package/CapCustomCheckboxList/Status.md +0 -52
- package/CapCustomCheckboxList/tests/USE_CASES_ANALYSIS.md +0 -174
- package/CapCustomList/README.md +0 -117
- package/CapCustomList/Status.md +0 -77
- package/CapCustomList/tests/USE_CASES_ANALYSIS.md +0 -124
- package/CapCustomSelect/README.md +0 -38
- package/CapDatePicker/README.md +0 -139
- package/CapDateRangePicker/README.md +0 -159
- package/CapDateTimePicker/README.md +0 -136
- package/CapDateTimeRangePicker/README.md +0 -243
- package/CapDivider/README.md +0 -122
- package/CapDrawer/README.md +0 -207
- package/CapDrawer/Status.md +0 -52
- package/CapDrawer/tests/MISSING_USE_CASES.md +0 -170
- package/CapDropdown/README.md +0 -515
- package/CapDropdown/Status.md +0 -45
- package/CapDropdown/tests/USE_CASES_ANALYSIS.md +0 -137
- package/CapError/README.md +0 -88
- package/CapErrorBoundary/CapErrorBoundary-use-cases.md +0 -89
- package/CapErrorBoundary/README.md +0 -150
- package/CapErrorStateIllustration/README.md +0 -222
- package/CapErrorStateIllustration/USE_CASES.md +0 -33
- package/CapExpressionEditor/README.md +0 -32
- package/CapForm/README.md +0 -132
- package/CapForm/Status.md +0 -40
- package/CapForm/tests/PHASE1_UNFULFILLED_USE_CASES.md +0 -113
- package/CapForm/tests/USE_CASES_ANALYSIS.md +0 -119
- package/CapFormItem/README.md +0 -320
- package/CapFormItem/Status.md +0 -73
- package/CapFormItem/tests/USE_CASES_ANALYSIS.md +0 -84
- package/CapGraph/README.md +0 -69
- package/CapGraph/USE_CASES.md +0 -66
- package/CapHamburgerMenu/README.md +0 -234
- package/CapHamburgerMenu/USE_CASES.md +0 -48
- package/CapHeader/Status.md +0 -41
- package/CapHeading/README.md +0 -220
- package/CapHeading/Status.md +0 -41
- package/CapIcon/README.md +0 -207
- package/CapIllustration/Status.md +0 -41
- package/CapImage/README.md +0 -50
- package/CapImportMFEComponent/README.md +0 -121
- package/CapInfoNote/Status.md +0 -40
- package/CapInfoNote/tests/USE_CASES_ANALYSIS.md +0 -114
- package/CapInput/README.md +0 -196
- package/CapInput/Status.md +0 -123
- package/CapInput/tests/USE_CASES_ANALYSIS.md +0 -169
- package/CapLanguageProvider/CapLanguageProvider-use-cases.md +0 -56
- package/CapLanguageProvider/README.md +0 -206
- package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md +0 -50
- package/CapLevelGraphRenderer/README.md +0 -123
- package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md +0 -120
- package/CapLink/README.md +0 -203
- package/CapLink/Status.md +0 -32
- package/CapLink/tests/CapLink.missingUseCases.md +0 -95
- package/CapList/README.md +0 -129
- package/CapList/Status.md +0 -69
- package/CapListLayout/README.md +0 -7
- package/CapLogin/README.md +0 -7
- package/CapMenu/README.md +0 -86
- package/CapModal/README.md +0 -357
- package/CapModal/Status.md +0 -52
- package/CapModal/tests/USE_CASES_GAPS.md +0 -207
- package/CapMultiSelect/README.md +0 -170
- package/CapMultiSelect/tests/USE_CASES_ANALYSIS.md +0 -29
- package/CapMultiSelectDatePicker/README.md +0 -11
- package/CapNavigation/README.md +0 -72
- package/CapNotification/README.md +0 -228
- package/CapNotificationDropdown/README.md +0 -5
- package/CapPopover/README.md +0 -234
- package/CapProgress/Status.md +0 -40
- package/CapRadio/Status.md +0 -54
- package/CapRadioButton/README.md +0 -152
- package/CapRadioButton/Status.md +0 -70
- package/CapRadioButton/tests/USE_CASES_ANALYSIS.md +0 -120
- package/CapRadioCard/README.md +0 -161
- package/CapRadioCard/Status.md +0 -78
- package/CapRadioGroup/README.md +0 -141
- package/CapRadioGroup/Status.md +0 -59
- package/CapReorderComponent/README.md +0 -179
- package/CapReorderComponent/Status.md +0 -41
- package/CapRoadMap/README.md +0 -126
- package/CapRoadMap/Status.md +0 -53
- package/CapRoadMap/tests/USE_CASE_GAPS.md +0 -92
- package/CapRow/README.md +0 -424
- package/CapSKUUploader/README.md +0 -189
- package/CapSKUUploader/Status.md +0 -66
- package/CapSecondaryTopBar/README.md +0 -7
- package/CapSelect/README.md +0 -243
- package/CapSelectFilter/README.md +0 -121
- package/CapShape/README.md +0 -96
- package/CapShape/Status.md +0 -36
- package/CapShape/tests/USE_CASES_ANALYSIS.md +0 -120
- package/CapSideBar/README.md +0 -298
- package/CapSideBar/Status.md +0 -5
- package/CapSlideBox/README.md +0 -68
- package/CapSlider/README.md +0 -423
- package/CapSlider/Status.md +0 -48
- package/CapSlider/tests/TEST_COVERAGE.md +0 -118
- package/CapSnackBar/README.md +0 -222
- package/CapSnackBar/Status.md +0 -41
- package/CapSomethingWentWrong/README.md +0 -97
- package/CapSplit/README.md +0 -19
- package/CapStatisticCard/README.md +0 -138
- package/CapStatus/README.md +0 -148
- package/CapStatus/Status.md +0 -40
- package/CapSteps/Status.md +0 -40
- package/CapStepsAccordian/README.md +0 -305
- package/CapStepsAccordian/Status.md +0 -48
- package/CapSupportVideosWrapper/README.md +0 -14
- package/CapSwitch/README.md +0 -351
- package/CapTab/README.md +0 -406
- package/CapTab/Status.md +0 -104
- package/CapTab/tests/USE_CASE_GAPS.md +0 -143
- package/CapTabV3/ANALYSIS.md +0 -60
- package/CapTabV3/README.md +0 -156
- package/CapTabV3/Status.md +0 -52
- package/CapTabV3/tests/USE_CASE_GAPS.md +0 -149
- package/CapTable/README.md +0 -160
- package/CapTable/Status.md +0 -41
- package/CapTag/README.md +0 -16
- package/CapTagDropdown/README.md +0 -171
- package/CapTagDropdown/Status.md +0 -55
- package/CapTimePicker/README.md +0 -170
- package/CapTooltip/README.md +0 -336
- package/CapTooltipWithInfo/Status.md +0 -75
- package/CapTopBar/README.md +0 -146
- package/CapTree/README.md +0 -124
- package/CapTree/Status.md +0 -48
- package/CapTree/tests/STATUS.md +0 -154
- package/CapTreeSelect/README.md +0 -217
- package/CapTreeSelect/Status.md +0 -52
- package/CapTruncateList/README.md +0 -13
- package/CapUnifiedSelect/README.md +0 -40
- package/CapUploader/README.md +0 -313
- package/CapUploader/Status.md +0 -76
- package/CapUploader/tests/USE_CASES_ANALYSIS.md +0 -225
- package/CapUserProfile/README.md +0 -105
- package/CapUserProfile/Status.md +0 -95
- package/CapVirtualList/README.md +0 -162
- package/CapVirtualList/Status.md +0 -71
- package/assets/HOCs/ComponentWithLabelHOC/README.md +0 -230
package/CapAlert/README.md
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
# CapAlert
|
|
2
|
-
|
|
3
|
-
An extended version of Ant Design's Alert component with Capillary-specific styling and enhancements.
|
|
4
|
-
|
|
5
|
-
## Migration from cap-ui-library
|
|
6
|
-
|
|
7
|
-
This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
|
|
8
|
-
|
|
9
|
-
### Breaking Changes
|
|
10
|
-
|
|
11
|
-
**No breaking changes** - The component maintains backward compatibility with the previous version.
|
|
12
|
-
|
|
13
|
-
### Deprecated Props
|
|
14
|
-
|
|
15
|
-
The following props are deprecated but still supported for backward compatibility:
|
|
16
|
-
|
|
17
|
-
#### `message` (deprecated)
|
|
18
|
-
|
|
19
|
-
- **Status:** Deprecated
|
|
20
|
-
- **Replacement:** Use `title` prop instead
|
|
21
|
-
- **Migration:** Replace `message="..."` with `title="..."`
|
|
22
|
-
- **Removal:** Will be removed in next major version
|
|
23
|
-
|
|
24
|
-
**Example:**
|
|
25
|
-
|
|
26
|
-
```tsx
|
|
27
|
-
// ❌ Deprecated
|
|
28
|
-
<CapAlert message="Alert message" />
|
|
29
|
-
|
|
30
|
-
// ✅ Recommended
|
|
31
|
-
<CapAlert title="Alert message" />
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
**Note:** If both `title` and `message` are provided, `title` takes precedence. A console warning will be shown in development mode when using the deprecated `message` prop.
|
|
35
|
-
|
|
36
|
-
### Prop Changes
|
|
37
|
-
|
|
38
|
-
| Prop | Status | Notes |
|
|
39
|
-
|------|--------|-------|
|
|
40
|
-
| `title` | ✅ New | Preferred prop name for alert message content |
|
|
41
|
-
| `message` | ⚠️ Deprecated | Use `title` instead. Still supported for backward compatibility |
|
|
42
|
-
| `description` | ✅ Unchanged | Additional description text below the title |
|
|
43
|
-
| `type` | ✅ Unchanged | Alert type: `'success'` \| `'info'` \| `'warning'` \| `'error'` |
|
|
44
|
-
| `showIcon` | ✅ Unchanged | Whether to show icon |
|
|
45
|
-
| `className` | ✅ Unchanged | Custom CSS class name |
|
|
46
|
-
| All other Ant Design Alert props | ✅ Unchanged | Passed through to underlying Alert component |
|
|
47
|
-
|
|
48
|
-
### API Changes
|
|
49
|
-
|
|
50
|
-
- **TypeScript Support:** Full TypeScript support with exported `CapAlertProps` interface
|
|
51
|
-
- **Ant Design Version:** Upgraded from Ant Design v3 to v5
|
|
52
|
-
- **Styling:** Migrated from styled-components to SCSS modules
|
|
53
|
-
|
|
54
|
-
### Behavioral Changes
|
|
55
|
-
|
|
56
|
-
- **Background Colors:** Alert types now have specific background colors:
|
|
57
|
-
- Success: `$cap-color-01` (light green)
|
|
58
|
-
- Info: `$cap-color-04` (light yellow)
|
|
59
|
-
- Warning: `$cap-color-02` (light orange)
|
|
60
|
-
- Error: `$cap-color-05` (light red)
|
|
61
|
-
- **Border:** Removed border styling for cleaner appearance
|
|
62
|
-
- **Font Size:** Uses `$font-size-s` (0.857rem / 12px)
|
|
63
|
-
- **Padding:** Horizontal padding of `$spacing-12` (0.857rem / 12px)
|
|
64
|
-
|
|
65
|
-
### Usage Examples
|
|
66
|
-
|
|
67
|
-
#### Basic Usage
|
|
68
|
-
|
|
69
|
-
```tsx
|
|
70
|
-
import { CapAlert } from '@capillarytech/blaze-ui';
|
|
71
|
-
|
|
72
|
-
// Success alert
|
|
73
|
-
<CapAlert type="success" title="Operation completed successfully" />
|
|
74
|
-
|
|
75
|
-
// Info alert (default)
|
|
76
|
-
<CapAlert title="This is an informational message" />
|
|
77
|
-
|
|
78
|
-
// Warning alert
|
|
79
|
-
<CapAlert type="warning" title="Please review this action" />
|
|
80
|
-
|
|
81
|
-
// Error alert
|
|
82
|
-
<CapAlert type="error" title="An error occurred" />
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
#### With Description
|
|
86
|
-
|
|
87
|
-
```tsx
|
|
88
|
-
<CapAlert
|
|
89
|
-
type="info"
|
|
90
|
-
title="Alert Title"
|
|
91
|
-
description="Additional detailed description text goes here"
|
|
92
|
-
/>
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
#### With Icon
|
|
96
|
-
|
|
97
|
-
```tsx
|
|
98
|
-
<CapAlert
|
|
99
|
-
type="success"
|
|
100
|
-
title="Success!"
|
|
101
|
-
showIcon
|
|
102
|
-
/>
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
#### Backward Compatibility
|
|
106
|
-
|
|
107
|
-
```tsx
|
|
108
|
-
// Old API still works (deprecated)
|
|
109
|
-
<CapAlert message="This still works but shows a warning in dev mode" />
|
|
110
|
-
|
|
111
|
-
// New API (recommended)
|
|
112
|
-
<CapAlert title="Use this instead" />
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
### Migration Steps for Consumers
|
|
116
|
-
|
|
117
|
-
1. **Replace `message` prop with `title`:**
|
|
118
|
-
```tsx
|
|
119
|
-
// Before
|
|
120
|
-
<CapAlert message="Alert text" />
|
|
121
|
-
|
|
122
|
-
// After
|
|
123
|
-
<CapAlert title="Alert text" />
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
2. **No other changes required** - All other props work exactly as before.
|
|
127
|
-
|
|
128
|
-
3. **Gradual Migration:** You can migrate at your own pace. The deprecated `message` prop will continue to work until the next major version.
|
|
129
|
-
|
|
130
|
-
### TypeScript
|
|
131
|
-
|
|
132
|
-
```tsx
|
|
133
|
-
import { CapAlert, CapAlertProps } from '@capillarytech/blaze-ui';
|
|
134
|
-
|
|
135
|
-
const props: CapAlertProps = {
|
|
136
|
-
type: 'success',
|
|
137
|
-
title: 'Success message',
|
|
138
|
-
description: 'Optional description',
|
|
139
|
-
showIcon: true,
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
<CapAlert {...props} />
|
|
143
|
-
```
|
|
144
|
-
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
# CapAppNotEnabled
|
|
2
|
-
|
|
3
|
-
A component that displays an empty state message when an app or feature is not enabled.
|
|
4
|
-
|
|
5
|
-
## Migration Notes (cap-ui-library → blaze-ui)
|
|
6
|
-
|
|
7
|
-
### Summary of Changes
|
|
8
|
-
|
|
9
|
-
This component has been migrated from cap-ui-library to blaze-ui with the following changes:
|
|
10
|
-
|
|
11
|
-
1. **TypeScript Conversion**: Converted from JavaScript to TypeScript with proper interfaces
|
|
12
|
-
2. **Functional Component**: Already a functional component, no conversion needed
|
|
13
|
-
3. **Styling**: Converted from styled-components to SCSS modules with rem units (1rem = 14px)
|
|
14
|
-
4. **Dependency Change**: Removed dependency on `CapHeader` component (not yet migrated)
|
|
15
|
-
|
|
16
|
-
### Breaking Changes
|
|
17
|
-
|
|
18
|
-
**None** - No breaking changes from cap-ui-library v8.x
|
|
19
|
-
|
|
20
|
-
### Prop Changes
|
|
21
|
-
|
|
22
|
-
All props remain the same:
|
|
23
|
-
|
|
24
|
-
| Prop | Type | Default | Description |
|
|
25
|
-
|------|------|---------|-------------|
|
|
26
|
-
| `headerText` | `string` | `undefined` | Text to display in the header section |
|
|
27
|
-
| `title` | `string` | `undefined` | Main title text for the empty state |
|
|
28
|
-
| `description` | `string` | `undefined` | Description text below the title |
|
|
29
|
-
| `className` | `string` | `undefined` | Additional CSS class name |
|
|
30
|
-
| `style` | `React.CSSProperties` | `undefined` | Inline styles |
|
|
31
|
-
|
|
32
|
-
### Behavioral Changes
|
|
33
|
-
|
|
34
|
-
1. **Header Rendering**: The header is now rendered using `CapHeading` directly instead of `CapHeader` component. The visual appearance and behavior remain the same.
|
|
35
|
-
2. **Layout**: Uses flexbox layout for better responsiveness
|
|
36
|
-
|
|
37
|
-
### CSS/Styling Changes
|
|
38
|
-
|
|
39
|
-
1. **px → rem conversion**: All pixel values converted to rem units (base: 14px = 1rem)
|
|
40
|
-
- Container width: `450px` → `32.143rem`
|
|
41
|
-
- Margin top: `75px` → `5.357rem`
|
|
42
|
-
- Title margin: `34px` → `2.429rem`
|
|
43
|
-
- Description margin: `8px` → `0.571rem`
|
|
44
|
-
|
|
45
|
-
2. **SCSS Modules**: Replaced styled-components with SCSS modules for better maintainability
|
|
46
|
-
|
|
47
|
-
### Migration Example
|
|
48
|
-
|
|
49
|
-
No code changes required! The component API is fully backward compatible:
|
|
50
|
-
|
|
51
|
-
**cap-ui-library (v8.x)**
|
|
52
|
-
```jsx
|
|
53
|
-
import CapAppNotEnabled from '@capillarytech/cap-ui-library/CapAppNotEnabled';
|
|
54
|
-
|
|
55
|
-
<CapAppNotEnabled
|
|
56
|
-
headerText="Settings"
|
|
57
|
-
title="This feature is not enabled"
|
|
58
|
-
description="Please contact your administrator to enable this feature"
|
|
59
|
-
/>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
**blaze-ui**
|
|
63
|
-
```jsx
|
|
64
|
-
import CapAppNotEnabled from '@capillarytech/blaze-ui/CapAppNotEnabled';
|
|
65
|
-
|
|
66
|
-
<CapAppNotEnabled
|
|
67
|
-
headerText="Settings"
|
|
68
|
-
title="This feature is not enabled"
|
|
69
|
-
description="Please contact your administrator to enable this feature"
|
|
70
|
-
/>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
### Dependencies
|
|
74
|
-
|
|
75
|
-
This component depends on the following blaze-ui components:
|
|
76
|
-
- `CapHeading` (migrated)
|
|
77
|
-
- `CapLabel` (migrated)
|
|
78
|
-
|
|
79
|
-
### Internal Implementation Notes
|
|
80
|
-
|
|
81
|
-
1. The original component used `CapHeader` which is not yet migrated to blaze-ui
|
|
82
|
-
2. For backward compatibility, the header section now uses `CapHeading` with type="h1" which provides the same visual appearance
|
|
83
|
-
3. All styling has been preserved to maintain visual consistency
|
|
84
|
-
4. The component uses SCSS variables from `components/styled/variables.scss` for maintainability
|
package/CapAskAira/README.md
DELETED
|
@@ -1,328 +0,0 @@
|
|
|
1
|
-
# CapAskAira
|
|
2
|
-
|
|
3
|
-
CapAskAira is a collection of AI-powered “Ask AiRA” bot components and shared logic built on Redux, Redux-Saga, and React. It lives in **blaze-ui** (published as `@capillarytech/cap-ui-library`) and is consumed by apps such as **cap-loyalty-ui**, **garuda-ui**, **cap-campaigns-v2**, **cap-creatives-ui**, and **reon-bi-webapp**.
|
|
4
|
-
|
|
5
|
-
This document describes the **technical architecture** of CapAskAira and how to **integrate and test** it in consuming repositories.
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Table of contents
|
|
10
|
-
|
|
11
|
-
1. [Overview](#overview)
|
|
12
|
-
2. [Technical architecture](#technical-architecture)
|
|
13
|
-
3. [Bot catalog](#bot-catalog)
|
|
14
|
-
4. [Integration guide](#integration-guide)
|
|
15
|
-
5. [Testing in consuming repos](#testing-in-consuming-repos)
|
|
16
|
-
|
|
17
|
-
---
|
|
18
|
-
|
|
19
|
-
## Overview
|
|
20
|
-
|
|
21
|
-
- **Purpose**: Reusable AI assistant UIs (rule writing, summarization, content generation, documentation chat, media generation, configuration, audience filters) that plug into existing Capillary apps.
|
|
22
|
-
- **Stack**: React, Redux (Immutable.js state), Redux-Saga, SCSS, react-intl.
|
|
23
|
-
- **Data sources**: REST APIs and/or WebSockets depending on the bot. APIs are called via a **request + getAPICallObject** contract supplied by the consuming app.
|
|
24
|
-
- **Publishing**: Built and exported from **blaze-ui**; consuming apps depend on `@capillarytech/cap-ui-library` and import from `@capillarytech/cap-ui-library/CapAskAira` (or deeper paths for sagas/selectors).
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
|
-
## Technical architecture
|
|
29
|
-
|
|
30
|
-
### Module layout
|
|
31
|
-
|
|
32
|
-
```
|
|
33
|
-
CapAskAira/
|
|
34
|
-
├── index.ts # Public API: default export (bot map) + reducer + domain + sagas
|
|
35
|
-
├── constants.ts # DOMAIN, WS_DOMAIN, AIRA_REDUCER_DOMAIN, rootClsPrefix
|
|
36
|
-
├── reducer.ts # askAiraReducer (combines all bot sub-reducers)
|
|
37
|
-
├── selector.ts # selectAskAiraDomain(state)
|
|
38
|
-
├── util.ts # getWebsocketConnection, popup positioning, name helpers
|
|
39
|
-
├── rootStyles.ts # Root SCSS entry
|
|
40
|
-
├── styles.scss # Shared styles ($clsPrefix: cap-ask-aira)
|
|
41
|
-
├── hooks/
|
|
42
|
-
│ └── useWebsocket.tsx # WebSocket hook used by ContentGenerationBot, DocumentationChatBot
|
|
43
|
-
├── UtilComponents/ # Shared UI: AiraContainer, Popup, InputBox, ErrorBar, Icons, etc.
|
|
44
|
-
├── RuleGenerationBot/ # Rule writing (single rule)
|
|
45
|
-
├── RuleSummarizationBot/ # Rule + summarization (write & explain)
|
|
46
|
-
├── ContentGenerationBot/ # Content suggestions over WebSocket
|
|
47
|
-
├── DocumentationBot/ # Documentation UI
|
|
48
|
-
├── DocumentationChatBot/ # Doc Q&A (WebSocket + optional REST feedback)
|
|
49
|
-
├── ConfigurationBot/ # Configuration copilot
|
|
50
|
-
├── CapAiMediaGeneration/ # Image/video generation
|
|
51
|
-
├── AudienceFilterBot/ # Audience filter suggestions
|
|
52
|
-
├── tests/ # Module-level tests and mock data
|
|
53
|
-
└── README.md # This file
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
### Redux state shape
|
|
57
|
-
|
|
58
|
-
- The **root** Redux key used by CapAskAira is **`ASK_AIRA`** (`AIRA_REDUCER_DOMAIN`).
|
|
59
|
-
- `askAiraReducer` is a **combined reducer** over four sub-domains:
|
|
60
|
-
|
|
61
|
-
| Sub-domain constant | Bot(s) | Role |
|
|
62
|
-
|----------------------------------|---------------------------|-------------------------------|
|
|
63
|
-
| `RULE_REDUCER_DOMAIN` | RuleGenerationBot | Rule generation state |
|
|
64
|
-
| `DOC_BOT_REDUCER_DOMAIN` | DocumentationChatBot | Doc chat messages state |
|
|
65
|
-
| `AI_MEDIA_GENERATION` | CapAiMediaGeneration | Media generation state |
|
|
66
|
-
| `RULE_SUMMARIZATION_REDUCER_DOMAIN` | RuleSummarizationBot | Rule + summarization state |
|
|
67
|
-
|
|
68
|
-
- State under `ASK_AIRA` is **Immutable.js** (e.g. `fromJS`). Selectors typically use `selectAskAiraDomain(state)` then bot-specific selectors (e.g. `makeSelectRuleGenData`) that read from the corresponding sub-domain and return plain JS where needed.
|
|
69
|
-
|
|
70
|
-
### Sagas
|
|
71
|
-
|
|
72
|
-
- **Saga per bot**: Each bot that uses Redux has its own saga module (e.g. `RuleSummarizationBot/saga.ts`, `CapAiMediaGeneration/saga.ts`). They export **watcher** generators (e.g. `watchGetRule`, `watchGetRuleSummarize`) and a **default export** array of watchers.
|
|
73
|
-
- **Exposed from CapAskAira**:
|
|
74
|
-
- `ruleGenSaga` — RuleGenerationBot
|
|
75
|
-
- `docChatBotSaga` — DocumentationChatBot
|
|
76
|
-
- `mediaGenSaga` — CapAiMediaGeneration
|
|
77
|
-
- `ruleSummarizationBotSaga` — RuleSummarizationBot
|
|
78
|
-
- **Consuming apps** do **not** use a single “root” CapAskAira saga. Instead they:
|
|
79
|
-
- **Inject** the relevant watchers into the component (or route) that mounts the bot, e.g. by importing watchers from `@capillarytech/cap-ui-library/CapAskAira/RuleSummarizationBot/saga` and composing them in the app’s own saga with `all([...localWatchers, watchGetRule(), watchGetRuleSummarize(), ...])`.
|
|
80
|
-
- Or add a saga that runs the default export array (e.g. `ruleSummarizationBotSaga`) if the app’s injector supports array-of-sagas.
|
|
81
|
-
- **Bots that don’t need a saga in the app**: ContentGenerationBot and DocumentationChatBot (for the chat stream) use **WebSockets** only; no Redux saga is required for the stream. DocumentationChatBot may still use Redux for feedback; if so, its saga must be run.
|
|
82
|
-
|
|
83
|
-
### Data flow (high level)
|
|
84
|
-
|
|
85
|
-
1. **REST-only bots** (e.g. RuleSummarizationBot, RuleGenerationBot):
|
|
86
|
-
Component is connected to Redux (state + actions). User action → dispatch → saga → API via `request` + `getAPICallObject` → dispatch success/failure → component reads from selector.
|
|
87
|
-
|
|
88
|
-
2. **WebSocket bots** (e.g. ContentGenerationBot):
|
|
89
|
-
Component uses `useWebsocket(WEBSOCKET_URL, onMessage, onError)`. Messages are processed in the component (or helper); no saga for the stream. Optional two-way binding with parent via `text` / `setText` props.
|
|
90
|
-
|
|
91
|
-
3. **Hybrid** (e.g. DocumentationChatBot):
|
|
92
|
-
WebSocket for streaming answers; optional REST for feedback, with state in Redux and saga for API calls.
|
|
93
|
-
|
|
94
|
-
### Shared utilities
|
|
95
|
-
|
|
96
|
-
- **`constants.ts`**
|
|
97
|
-
- `DOMAIN`: API base URL (dev: e.g. `http://localhost:2100`, prod: often `''` so app host is used).
|
|
98
|
-
- `WS_DOMAIN`: WebSocket base (prod: `wss://${window.location.host}`; dev can be `ws://localhost:2100`).
|
|
99
|
-
- `AIRA_REDUCER_DOMAIN = 'ASK_AIRA'`.
|
|
100
|
-
- `rootClsPrefix = 'cap-ask-aira'`.
|
|
101
|
-
- **`util.ts`**
|
|
102
|
-
- `getWebsocketConnection(websocketUrl)` — returns a `Promise<WebSocket>`; in dev can pass auth via subprotocol.
|
|
103
|
-
- `getAnchoredPopupPosition`, `getBottomRightPopupPosition` — for floating popup placement.
|
|
104
|
-
- `handleEmptyValue`, `getFullNameByFirstNameLastName` — display helpers.
|
|
105
|
-
- **`hooks/useWebsocket.tsx`**
|
|
106
|
-
- `(websocketUrl, onMessage?, onError?)` → `{ sendMessage, resetConnection }`. Used by ContentGenerationBot and DocumentationChatBot.
|
|
107
|
-
- **`UtilComponents/AiraContainer.tsx`**
|
|
108
|
-
- Wraps bot content with a floating/fixed Aira icon, popup, title, and optional tooltip. Handles `iconPlacement` (`float-br`, `fixed-br-beamer`), `popupPlacement`, and `rootStyle`. Used by most bots.
|
|
109
|
-
|
|
110
|
-
### API contract (consuming app)
|
|
111
|
-
|
|
112
|
-
Bots that call REST APIs expect the **page/container** to provide:
|
|
113
|
-
|
|
114
|
-
- **`request`**: function `(url: string, options?: unknown) => Promise<unknown>` (e.g. fetch wrapper).
|
|
115
|
-
- **`getAPICallObject`**: function `(method: string, payload: unknown) => unknown` that returns the body/options for the request (e.g. auth headers, JSON body).
|
|
116
|
-
|
|
117
|
-
URLs are built inside CapAskAira (e.g. RuleSummarizationBot uses `ASK_AIRA_ENDPOINT` from `constants.ts` plus paths like `/rule_expr/write_rule`, `/rule_expr/summarize_rule`). The app only needs to pass a generic `request` + `getAPICallObject` that work with the app’s auth and API layer.
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
## Bot catalog
|
|
122
|
-
|
|
123
|
-
| Bot | Description | Redux state | Saga required in app | Typical use case |
|
|
124
|
-
|-------------------------|--------------------------------------|------------------|----------------------|-------------------------------------------|
|
|
125
|
-
| RuleGenerationBot | Generate a single rule from query | Yes (ruleGen) | Yes (ruleGenSaga) | One-off rule writing |
|
|
126
|
-
| RuleSummarizationBot | Write rule + summarize/explain rule | Yes (rule summarization) | Yes (ruleSummarizationBotSaga) | Workflow/rule editors (e.g. cap-loyalty-ui, garuda-ui) |
|
|
127
|
-
| ContentGenerationBot | AI content suggestions (streaming) | No | No | Message/template authoring (e.g. cap-creatives-ui) |
|
|
128
|
-
| DocumentationBot | Documentation UI | No | No | In-app docs |
|
|
129
|
-
| DocumentationChatBot | Doc Q&A (streaming + feedback) | Yes (doc chat) | Yes (docChatBotSaga) if using feedback | Help / doc search |
|
|
130
|
-
| ConfigurationBot | Configuration copilot | No | No | Guided setup |
|
|
131
|
-
| CapAiMediaGeneration | Image/video generation | Yes (media) | Yes (mediaGenSaga) | Creatives (e.g. cap-creatives-ui) |
|
|
132
|
-
| AudienceFilterBot | Audience filter suggestions | No (props) | No | Audience builder UIs |
|
|
133
|
-
|
|
134
|
-
- **ContentGenerationBot** uses `WS_DOMAIN` and a path such as `/arya/api/v1/ask-aira-service/content_gen/get_ai_suggestions` (see `ContentGenerationBot/constants.ts`).
|
|
135
|
-
- **RuleSummarizationBot** uses REST endpoints under `ASK_AIRA_ENDPOINT` (e.g. `/rule_expr/write_rule`, `/rule_expr/summarize_rule`, like/dislike).
|
|
136
|
-
|
|
137
|
-
---
|
|
138
|
-
|
|
139
|
-
## Integration guide
|
|
140
|
-
|
|
141
|
-
### 1. Add the reducer
|
|
142
|
-
|
|
143
|
-
In the app’s root reducer (e.g. `initialReducer.js`):
|
|
144
|
-
|
|
145
|
-
```javascript
|
|
146
|
-
import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
|
|
147
|
-
|
|
148
|
-
export const initialReducer = {
|
|
149
|
-
// ...other reducers
|
|
150
|
-
[AIRA_REDUCER_DOMAIN]: askAiraReducer,
|
|
151
|
-
};
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
- Use the **exact** key `AIRA_REDUCER_DOMAIN` (`'ASK_AIRA'`) so CapAskAira selectors work.
|
|
155
|
-
|
|
156
|
-
### 2. Add sagas for the bots you use
|
|
157
|
-
|
|
158
|
-
Only add sagas for bots that use Redux and expose a saga (see table above).
|
|
159
|
-
|
|
160
|
-
**Option A – Inject into the same container that renders the bot**
|
|
161
|
-
|
|
162
|
-
Example: **RuleSummarizationBot** in a workflow config page. In that page’s saga (e.g. `ConfigureWorkflows/saga.js`):
|
|
163
|
-
|
|
164
|
-
```javascript
|
|
165
|
-
import {
|
|
166
|
-
watchGetRule,
|
|
167
|
-
watchGetRuleSummarize,
|
|
168
|
-
watchUpdateLikeResultRule,
|
|
169
|
-
watchUpdateLikeResultSummarize,
|
|
170
|
-
watchUpdateDislikeResultRule,
|
|
171
|
-
watchUpdateDislikeResultSummarize,
|
|
172
|
-
} from '@capillarytech/cap-ui-library/CapAskAira/RuleSummarizationBot/saga';
|
|
173
|
-
|
|
174
|
-
export default function* configureWorkflowSaga() {
|
|
175
|
-
yield all([
|
|
176
|
-
// ...your existing watchers
|
|
177
|
-
watchGetRule(),
|
|
178
|
-
watchGetRuleSummarize(),
|
|
179
|
-
watchUpdateLikeResultRule(),
|
|
180
|
-
watchUpdateLikeResultSummarize(),
|
|
181
|
-
watchUpdateDislikeResultRule(),
|
|
182
|
-
watchUpdateDislikeResultSummarize(),
|
|
183
|
-
]);
|
|
184
|
-
}
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
Then inject this saga with your existing `injectSaga` (e.g. key `'configureWorkflow'`). The component that renders `CapAskAira.RuleSummarizationBot` must be **connected** to Redux and pass `askAiraData` and `actions` from the store (see step 3).
|
|
188
|
-
|
|
189
|
-
**Option B – CapAiMediaGeneration**
|
|
190
|
-
|
|
191
|
-
Example: **cap-creatives-ui** BeeEditor. In `BeeEditor/sagas.js`:
|
|
192
|
-
|
|
193
|
-
```javascript
|
|
194
|
-
import { watchForMediaGeneration } from '@capillarytech/cap-ui-library/CapAskAira/CapAiMediaGeneration/saga';
|
|
195
|
-
|
|
196
|
-
export default [
|
|
197
|
-
watchCreateCustomRow,
|
|
198
|
-
watchForMediaGeneration,
|
|
199
|
-
];
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
Ensure this saga is injected where the media generation UI is used (e.g. same route or parent).
|
|
203
|
-
|
|
204
|
-
### 3. Render the bot and connect to Redux (when required)
|
|
205
|
-
|
|
206
|
-
**RuleSummarizationBot** (e.g. next to a rule editor):
|
|
207
|
-
|
|
208
|
-
- The container must be **connected** to Redux and map:
|
|
209
|
-
- `askAiraData`: from selector `makeSelectRuleGenData()` (or equivalent for rule summarization domain).
|
|
210
|
-
- `actions`: bound action creators for `getRule`, `getRuleSummarize`, `resetRule`, `updateLikeResultRule`, `updateDislikeResultRule`, `updateLikeResultSummarize`, `updateDislikeResultSummarize`.
|
|
211
|
-
- Pass **request** and **getAPICallObject** from your API layer (e.g. from `services/api` and a method that builds auth/body).
|
|
212
|
-
- Pass **activity** (e.g. event type) so the backend can scope the rule.
|
|
213
|
-
|
|
214
|
-
Example (conceptually, as in cap-loyalty-ui):
|
|
215
|
-
|
|
216
|
-
```jsx
|
|
217
|
-
import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
|
|
218
|
-
import { request, getAPICallObject } from '../../../services/api';
|
|
219
|
-
|
|
220
|
-
// In connected component:
|
|
221
|
-
<CapAskAira.RuleSummarizationBot
|
|
222
|
-
activity={eventType}
|
|
223
|
-
request={request}
|
|
224
|
-
getAPICallObject={getAPICallObject}
|
|
225
|
-
iconPlacement="float-br"
|
|
226
|
-
/>
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
`askAiraData` and `actions` are usually provided by the same `connect`/`createStructuredSelector` that wraps the page.
|
|
230
|
-
|
|
231
|
-
**ContentGenerationBot** (no Redux/saga):
|
|
232
|
-
|
|
233
|
-
- No reducer or saga needed. Just pass **text** and **setText** to bind to parent state, plus optional labels and layout:
|
|
234
|
-
|
|
235
|
-
```jsx
|
|
236
|
-
<CapAskAira.ContentGenerationBot
|
|
237
|
-
text={templateMessage || ''}
|
|
238
|
-
setText={(text) => onTemplateValueChange({ target: { value: text } }, MESSAGE_TEXT)}
|
|
239
|
-
iconPlacement="float-br"
|
|
240
|
-
iconSize="1.6rem"
|
|
241
|
-
rootStyle={{ bottom: '0.5rem', right: '1.2rem', left: 'auto' }}
|
|
242
|
-
/>
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
**CapAiMediaGeneration**:
|
|
246
|
-
|
|
247
|
-
- Reducer is already under `ASK_AIRA` via `askAiraReducer`. Inject `watchForMediaGeneration` as above. Connect the component so it receives `imageDetails` (and any other state) and bound actions from the CapAiMediaGeneration reducer/actions.
|
|
248
|
-
|
|
249
|
-
### 4. Environment / backend
|
|
250
|
-
|
|
251
|
-
- **DOMAIN** and **WS_DOMAIN** in CapAskAira `constants.ts` drive API and WebSocket URLs. In production they often rely on `window.location.host`. For local dev, point them to your backend (e.g. `http://localhost:2100` and `ws://localhost:2100`).
|
|
252
|
-
- Ensure the consuming app’s auth (e.g. token, org id) is passed through `request` and `getAPICallObject` so that CapAskAira’s API calls are authenticated. WebSocket auth in dev may use subprotocols (see `getWebsocketConnection` in `util.ts`).
|
|
253
|
-
|
|
254
|
-
### 5. Feature flags
|
|
255
|
-
|
|
256
|
-
Consuming apps often gate bots with a feature flag or permission (e.g. `!isAiRuleWritingDisabled`, `!isAiContentBotDisabled`). Render the bot only when the feature is enabled.
|
|
257
|
-
|
|
258
|
-
---
|
|
259
|
-
|
|
260
|
-
## Testing in consuming repos
|
|
261
|
-
|
|
262
|
-
### Unit tests
|
|
263
|
-
|
|
264
|
-
- **Reducer**: Ensure the root reducer includes `[AIRA_REDUCER_DOMAIN]: askAiraReducer`. You can snapshot the initial state or dispatch unknown actions and assert the Ask Aira slice still exists.
|
|
265
|
-
- **Selectors**: If you have selectors that depend on `ASK_AIRA`, build a minimal Immutable state with `fromJS({ ASK_AIRA: { ... } })` and test your selectors.
|
|
266
|
-
- **Containers that render a bot**: Mock the CapAskAira module and assert that the correct bot component is rendered with expected props (e.g. `request`, `getAPICallObject`, `activity` for RuleSummarizationBot).
|
|
267
|
-
|
|
268
|
-
Example pattern (mock default export and named exports):
|
|
269
|
-
|
|
270
|
-
```javascript
|
|
271
|
-
jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
|
|
272
|
-
__esModule: true,
|
|
273
|
-
default: {
|
|
274
|
-
RuleSummarizationBot: () => null,
|
|
275
|
-
ContentGenerationBot: () => null,
|
|
276
|
-
// ...other bots as needed
|
|
277
|
-
},
|
|
278
|
-
AIRA_REDUCER_DOMAIN: 'ASK_AIRA',
|
|
279
|
-
askAiraReducer: jest.fn((state = {}) => state),
|
|
280
|
-
}));
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
- **Saga tests**: For pages that compose CapAskAira watchers (e.g. RuleSummarizationBot watchers), either:
|
|
284
|
-
- Test your own saga and mock the CapAskAira saga imports, or
|
|
285
|
-
- Import the real watchers and run them in `expectSaga` (or similar) and assert on dispatched actions and API calls.
|
|
286
|
-
|
|
287
|
-
### Integration / E2E
|
|
288
|
-
|
|
289
|
-
- **Backend**: Point DOMAIN/WS_DOMAIN to a test or stub backend so that opening the bot and submitting a query doesn’t depend on production.
|
|
290
|
-
- **Auth**: Use test tokens/org so that `request` and `getAPICallObject` send valid auth headers; or stub `request`/`getAPICallObject` in tests to return fixed responses.
|
|
291
|
-
- **Feature flags**: Enable the relevant AiRA feature flag (or override) in the test environment so the bot is visible and clickable.
|
|
292
|
-
|
|
293
|
-
### Snapshot and visual
|
|
294
|
-
|
|
295
|
-
- **Snapshots**: If you snapshot a container that includes a bot, the snapshot will include the bot’s subtree. Keep snapshots updated when you change bot props or upgrade the library. Mocking the bot (as above) keeps snapshots stable if you only care about the parent layout.
|
|
296
|
-
- **Visual/regression**: Run visual tests against a build that includes the real CapAskAira; ensure the floating icon and popup don’t break layout (z-index, overflow, or positioning).
|
|
297
|
-
|
|
298
|
-
### Testing CapAskAira in Storybook
|
|
299
|
-
|
|
300
|
-
- **Storybook on nightly:** When Storybook is run or deployed on the nightly host, it uses the host origin and gets cookies/token automatically; no code change is needed.
|
|
301
|
-
- **Local Storybook against nightly (temporary change):** To test CapAskAira stories locally against a real backend (e.g. nightly), make a **temporary** change in `components/CapAskAira/constants.ts`:
|
|
302
|
-
- Set `DOMAIN` to your nightly API base (e.g. `'https://crm-nightly-new.cc.capillarytech.com'`).
|
|
303
|
-
- Set `WS_DOMAIN` to the matching WebSocket base (e.g. `'wss://crm-nightly-new.cc.capillarytech.com'`).
|
|
304
|
-
- Revert these before committing. Document locally if your team needs to repeat this.
|
|
305
|
-
|
|
306
|
-
### Running CapAskAira tests in blaze-ui
|
|
307
|
-
|
|
308
|
-
From the **blaze-ui** repo:
|
|
309
|
-
|
|
310
|
-
```bash
|
|
311
|
-
npm test -- components/CapAskAira
|
|
312
|
-
```
|
|
313
|
-
|
|
314
|
-
This runs the tests under `components/CapAskAira/tests` and per-bot test folders (e.g. `RuleSummarizationBot/tests`, `ContentGenerationBot/tests`). Use this to validate changes before publishing and consuming in other repos.
|
|
315
|
-
|
|
316
|
-
---
|
|
317
|
-
|
|
318
|
-
## Summary
|
|
319
|
-
|
|
320
|
-
| Step | Action |
|
|
321
|
-
|------|--------|
|
|
322
|
-
| Reducer | Add `[AIRA_REDUCER_DOMAIN]: askAiraReducer` to root reducer. |
|
|
323
|
-
| Saga | For RuleSummarizationBot, RuleGenerationBot, DocumentationChatBot, CapAiMediaGeneration: import their watchers and run them in the saga for the route/container that mounts the bot. |
|
|
324
|
-
| Connect | For bots that use Redux, connect the container and pass `askAiraData`, `actions`, `request`, `getAPICallObject` (and any bot-specific props like `activity`). |
|
|
325
|
-
| REST/WS | Provide `request` + `getAPICallObject`; ensure DOMAIN/WS_DOMAIN and auth work for your environment. |
|
|
326
|
-
| Tests | Mock CapAskAira in unit tests; use real or stubbed backend and auth in integration; run `npm test -- --testPathPattern=CapAskAira` in blaze-ui for library changes. |
|
|
327
|
-
|
|
328
|
-
For more detail on a specific bot, see its folder under `components/CapAskAira` (e.g. `RuleSummarizationBot/`, `ContentGenerationBot/`) for types, constants, API helpers, and selectors.
|
package/CapBanner/README.md
DELETED