@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.
Files changed (189) hide show
  1. package/CapAskAira/CapAiMediaGeneration/saga.js +1446 -0
  2. package/CapAskAira/CapAiMediaGeneration/saga.js.map +1 -0
  3. package/CapCollapsibleLeftNavigation/saga.js +1441 -0
  4. package/CapCollapsibleLeftNavigation/saga.js.map +1 -0
  5. package/CapLanguageProvider/actions.js +125 -0
  6. package/CapLanguageProvider/actions.js.map +1 -0
  7. package/CapLanguageProvider/constants.js +37 -0
  8. package/CapLanguageProvider/constants.js.map +1 -0
  9. package/CapLanguageProvider/reducer.js +130 -0
  10. package/CapLanguageProvider/reducer.js.map +1 -0
  11. package/CapLanguageProvider/saga.js +1457 -0
  12. package/CapLanguageProvider/saga.js.map +1 -0
  13. package/CapLanguageProvider/selector.js +186 -0
  14. package/CapLanguageProvider/selector.js.map +1 -0
  15. package/CapSupportVideosWrapper/utils.js +34 -0
  16. package/CapSupportVideosWrapper/utils.js.map +1 -0
  17. package/package.json +1 -1
  18. package/CapActionBar/README.md +0 -11
  19. package/CapAdvancedIcon/README.md +0 -185
  20. package/CapAdvancedIcon/use-cases.md +0 -44
  21. package/CapAlert/README.md +0 -144
  22. package/CapAppNotEnabled/README.md +0 -84
  23. package/CapAskAira/README.md +0 -328
  24. package/CapBanner/README.md +0 -4
  25. package/CapBlock/README.md +0 -175
  26. package/CapBorderedBox/Status.md +0 -40
  27. package/CapCSVFileUploader/README.md +0 -124
  28. package/CapCSVFileUploader/Status.md +0 -47
  29. package/CapCard/README.md +0 -85
  30. package/CapCard/Status.md +0 -41
  31. package/CapCardBox/README.md +0 -169
  32. package/CapCardBox/Status.md +0 -52
  33. package/CapCarousel/README.md +0 -190
  34. package/CapCarousel/Status.md +0 -73
  35. package/CapCheckbox/README.md +0 -254
  36. package/CapCheckbox/Status.md +0 -41
  37. package/CapColorPicker/README.md +0 -112
  38. package/CapColorPicker/Status.md +0 -52
  39. package/CapColorPicker/tests/USE_CASES_ANALYSIS.md +0 -92
  40. package/CapColoredTag/README.md +0 -167
  41. package/CapColoredTag/Status.md +0 -49
  42. package/CapConditionPreview/MIGRATION_ANALYSIS.md +0 -70
  43. package/CapConditionPreview/README.md +0 -40
  44. package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md +0 -65
  45. package/CapCustomCard/README.md +0 -182
  46. package/CapCustomCard/Status.md +0 -40
  47. package/CapCustomCarousel/Status.md +0 -69
  48. package/CapCustomCheckboxList/README.md +0 -178
  49. package/CapCustomCheckboxList/Status.md +0 -52
  50. package/CapCustomCheckboxList/tests/USE_CASES_ANALYSIS.md +0 -174
  51. package/CapCustomList/README.md +0 -117
  52. package/CapCustomList/Status.md +0 -77
  53. package/CapCustomList/tests/USE_CASES_ANALYSIS.md +0 -124
  54. package/CapCustomSelect/README.md +0 -38
  55. package/CapDatePicker/README.md +0 -139
  56. package/CapDateRangePicker/README.md +0 -159
  57. package/CapDateTimePicker/README.md +0 -136
  58. package/CapDateTimeRangePicker/README.md +0 -243
  59. package/CapDivider/README.md +0 -122
  60. package/CapDrawer/README.md +0 -207
  61. package/CapDrawer/Status.md +0 -52
  62. package/CapDrawer/tests/MISSING_USE_CASES.md +0 -170
  63. package/CapDropdown/README.md +0 -515
  64. package/CapDropdown/Status.md +0 -45
  65. package/CapDropdown/tests/USE_CASES_ANALYSIS.md +0 -137
  66. package/CapError/README.md +0 -88
  67. package/CapErrorBoundary/CapErrorBoundary-use-cases.md +0 -89
  68. package/CapErrorBoundary/README.md +0 -150
  69. package/CapErrorStateIllustration/README.md +0 -222
  70. package/CapErrorStateIllustration/USE_CASES.md +0 -33
  71. package/CapExpressionEditor/README.md +0 -32
  72. package/CapForm/README.md +0 -132
  73. package/CapForm/Status.md +0 -40
  74. package/CapForm/tests/PHASE1_UNFULFILLED_USE_CASES.md +0 -113
  75. package/CapForm/tests/USE_CASES_ANALYSIS.md +0 -119
  76. package/CapFormItem/README.md +0 -320
  77. package/CapFormItem/Status.md +0 -73
  78. package/CapFormItem/tests/USE_CASES_ANALYSIS.md +0 -84
  79. package/CapGraph/README.md +0 -69
  80. package/CapGraph/USE_CASES.md +0 -66
  81. package/CapHamburgerMenu/README.md +0 -234
  82. package/CapHamburgerMenu/USE_CASES.md +0 -48
  83. package/CapHeader/Status.md +0 -41
  84. package/CapHeading/README.md +0 -220
  85. package/CapHeading/Status.md +0 -41
  86. package/CapIcon/README.md +0 -207
  87. package/CapIllustration/Status.md +0 -41
  88. package/CapImage/README.md +0 -50
  89. package/CapImportMFEComponent/README.md +0 -121
  90. package/CapInfoNote/Status.md +0 -40
  91. package/CapInfoNote/tests/USE_CASES_ANALYSIS.md +0 -114
  92. package/CapInput/README.md +0 -196
  93. package/CapInput/Status.md +0 -123
  94. package/CapInput/tests/USE_CASES_ANALYSIS.md +0 -169
  95. package/CapLanguageProvider/CapLanguageProvider-use-cases.md +0 -56
  96. package/CapLanguageProvider/README.md +0 -206
  97. package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md +0 -50
  98. package/CapLevelGraphRenderer/README.md +0 -123
  99. package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md +0 -120
  100. package/CapLink/README.md +0 -203
  101. package/CapLink/Status.md +0 -32
  102. package/CapLink/tests/CapLink.missingUseCases.md +0 -95
  103. package/CapList/README.md +0 -129
  104. package/CapList/Status.md +0 -69
  105. package/CapListLayout/README.md +0 -7
  106. package/CapLogin/README.md +0 -7
  107. package/CapMenu/README.md +0 -86
  108. package/CapModal/README.md +0 -357
  109. package/CapModal/Status.md +0 -52
  110. package/CapModal/tests/USE_CASES_GAPS.md +0 -207
  111. package/CapMultiSelect/README.md +0 -170
  112. package/CapMultiSelect/tests/USE_CASES_ANALYSIS.md +0 -29
  113. package/CapMultiSelectDatePicker/README.md +0 -11
  114. package/CapNavigation/README.md +0 -72
  115. package/CapNotification/README.md +0 -228
  116. package/CapNotificationDropdown/README.md +0 -5
  117. package/CapPopover/README.md +0 -234
  118. package/CapProgress/Status.md +0 -40
  119. package/CapRadio/Status.md +0 -54
  120. package/CapRadioButton/README.md +0 -152
  121. package/CapRadioButton/Status.md +0 -70
  122. package/CapRadioButton/tests/USE_CASES_ANALYSIS.md +0 -120
  123. package/CapRadioCard/README.md +0 -161
  124. package/CapRadioCard/Status.md +0 -78
  125. package/CapRadioGroup/README.md +0 -141
  126. package/CapRadioGroup/Status.md +0 -59
  127. package/CapReorderComponent/README.md +0 -179
  128. package/CapReorderComponent/Status.md +0 -41
  129. package/CapRoadMap/README.md +0 -126
  130. package/CapRoadMap/Status.md +0 -53
  131. package/CapRoadMap/tests/USE_CASE_GAPS.md +0 -92
  132. package/CapRow/README.md +0 -424
  133. package/CapSKUUploader/README.md +0 -189
  134. package/CapSKUUploader/Status.md +0 -66
  135. package/CapSecondaryTopBar/README.md +0 -7
  136. package/CapSelect/README.md +0 -243
  137. package/CapSelectFilter/README.md +0 -121
  138. package/CapShape/README.md +0 -96
  139. package/CapShape/Status.md +0 -36
  140. package/CapShape/tests/USE_CASES_ANALYSIS.md +0 -120
  141. package/CapSideBar/README.md +0 -298
  142. package/CapSideBar/Status.md +0 -5
  143. package/CapSlideBox/README.md +0 -68
  144. package/CapSlider/README.md +0 -423
  145. package/CapSlider/Status.md +0 -48
  146. package/CapSlider/tests/TEST_COVERAGE.md +0 -118
  147. package/CapSnackBar/README.md +0 -222
  148. package/CapSnackBar/Status.md +0 -41
  149. package/CapSomethingWentWrong/README.md +0 -97
  150. package/CapSplit/README.md +0 -19
  151. package/CapStatisticCard/README.md +0 -138
  152. package/CapStatus/README.md +0 -148
  153. package/CapStatus/Status.md +0 -40
  154. package/CapSteps/Status.md +0 -40
  155. package/CapStepsAccordian/README.md +0 -305
  156. package/CapStepsAccordian/Status.md +0 -48
  157. package/CapSupportVideosWrapper/README.md +0 -14
  158. package/CapSwitch/README.md +0 -351
  159. package/CapTab/README.md +0 -406
  160. package/CapTab/Status.md +0 -104
  161. package/CapTab/tests/USE_CASE_GAPS.md +0 -143
  162. package/CapTabV3/ANALYSIS.md +0 -60
  163. package/CapTabV3/README.md +0 -156
  164. package/CapTabV3/Status.md +0 -52
  165. package/CapTabV3/tests/USE_CASE_GAPS.md +0 -149
  166. package/CapTable/README.md +0 -160
  167. package/CapTable/Status.md +0 -41
  168. package/CapTag/README.md +0 -16
  169. package/CapTagDropdown/README.md +0 -171
  170. package/CapTagDropdown/Status.md +0 -55
  171. package/CapTimePicker/README.md +0 -170
  172. package/CapTooltip/README.md +0 -336
  173. package/CapTooltipWithInfo/Status.md +0 -75
  174. package/CapTopBar/README.md +0 -146
  175. package/CapTree/README.md +0 -124
  176. package/CapTree/Status.md +0 -48
  177. package/CapTree/tests/STATUS.md +0 -154
  178. package/CapTreeSelect/README.md +0 -217
  179. package/CapTreeSelect/Status.md +0 -52
  180. package/CapTruncateList/README.md +0 -13
  181. package/CapUnifiedSelect/README.md +0 -40
  182. package/CapUploader/README.md +0 -313
  183. package/CapUploader/Status.md +0 -76
  184. package/CapUploader/tests/USE_CASES_ANALYSIS.md +0 -225
  185. package/CapUserProfile/README.md +0 -105
  186. package/CapUserProfile/Status.md +0 -95
  187. package/CapVirtualList/README.md +0 -162
  188. package/CapVirtualList/Status.md +0 -71
  189. package/assets/HOCs/ComponentWithLabelHOC/README.md +0 -230
@@ -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
@@ -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.
@@ -1,4 +0,0 @@
1
- # CapBanner Migration (v3→v6)
2
-
3
- ## Breaking Changes from cap-ui-library v8.x
4
- **No breaking changes from cap-ui-library v8.x**