Skip to content

Commit e3080be

Browse files
tjtanjintjtanjin
committed
refactor: Minor code cleanup
1 parent b1b01c3 commit e3080be

File tree

5 files changed

+37
-20
lines changed

5 files changed

+37
-20
lines changed

‎README.md

+14-12
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,11 @@ As you may be able to tell from above, there are 5 configurable sections within
135135

136136
| Configuration Option | Type | Default Value | Description |
137137
|------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|
138-
| `autoConfig` | Boolean | `true` | Enables automatic configuration of required events for input validation. Recommended to keep as `true`. If set to `false`, you need to configure events manually. |
139-
| `promptBaseColors` | Object | `{ "info": "#007bff", "warning": "#ffc107", "error": "#dc3545", "success": "#28a745" }` | Maps prompt types to colors shown in toast notifications for validation results (success, error, etc.). Define custom prompt types and colors. |
140-
| `promptHoveredColors` | Object | `{ "info": "#0056b3", "warning": "#d39e00", "error": "#c82333", "success": "#218838" }` | Maps prompt types to colors shown when toast notifications are hovered over during validation. Define custom prompt types and colors. |
141-
| `textAreaHighlightColors` | Object | `{ "info": "#007bff", "warning": "#ffc107", "error": "#dc3545", "success": "#28a745" }` | Maps prompt types to colors shown in the text area according to validation results. Define custom prompt types and colors. |
142-
| `advancedStyles` | Object | `{}` | Customizes styles for different validation results across the chatbot (not just toast notifications). Each key is a prompt type with corresponding style properties. |
138+
| `autoConfig` | boolean | `true` | Enables automatic configuration of required events for input validation. Recommended to keep as `true`. If set to `false`, you need to configure events manually. |
139+
| `promptBaseColors` | object | `{ "info": "#007bff", "warning": "#ffc107", "error": "#dc3545", "success": "#28a745" }` | Maps prompt types to colors shown in toast notifications for validation results (success, error, etc.). Define custom prompt types and colors. |
140+
| `promptHoveredColors` | object | `{ "info": "#0056b3", "warning": "#d39e00", "error": "#c82333", "success": "#218838" }` | Maps prompt types to colors shown when toast notifications are hovered over during validation. Define custom prompt types and colors. |
141+
| `textAreaHighlightColors` | object | `{ "info": "#007bff", "warning": "#ffc107", "error": "#dc3545", "success": "#28a745" }` | Maps prompt types to colors shown in the text area according to validation results. Define custom prompt types and colors. |
142+
| `advancedStyles` | object | `{}` | Customizes styles for different validation results across the chatbot (not just toast notifications). Each key is a prompt type with corresponding style properties. |
143143

144144
#### Validating User Input
145145

@@ -175,15 +175,17 @@ const MyComponent = () => {
175175
}
176176
```
177177

178-
As you can see from the example above, `validateInput` takes in a `userInput` parameter and returns an object representing the validation result. The validation result contains a total of 5 fields described in the table below:
178+
As you can see from the example above, `validateInput` takes in a `userInput` parameter and returns an object representing the validation result. The validation result contains a total of 5 properties described in the table below:
179179

180-
| Field | Type | Required | Description |
180+
| Property | Type | Default Value | Description |
181181
|---------------------|----------|----------|---------------------------------------------------------------------------------------------------------------------------------------------|
182-
| `success` | Boolean | Yes | If `true`, validation passed and user input is allowed to be sent. If `false`, user input is blocked. |
183-
| `promptContent` | String | No | The message displayed to the user if validation fails (e.g., "Age must be a number!"). |
184-
| `promptDuration` | Number | No | The duration (in milliseconds) that the prompt message is shown. |
185-
| `promptType` | String | No | Defines the type of prompt to display (e.g., "error", "warning", etc.), which influences styling and colors set in plugin configurations. |
186-
| `highlightTextArea` | Boolean | No | If set to `true`, highlights the input text area according to validation result, providing more visual feedback. |
182+
| `success` | boolean | false | If `true`, validation passed and user input is allowed to be sent. If `false`, user input is blocked. |
183+
| `promptContent` | string | "" | The message displayed to the user if validation fails (e.g., "Age must be a number!"). |
184+
| `promptDuration` | number | 3000 | The duration (in milliseconds) that the prompt message is shown. |
185+
| `promptType` | string | "info" | Defines the type of prompt to display (e.g., "error", "warning", etc.), which influences styling and colors set in plugin configurations. |
186+
| `highlightTextArea` | boolean | true | If set to `true`, highlights the input text area according to validation result, providing more visual feedback. |
187+
188+
Note that all above properties have default values assigned to them. This means that if the `validateInput` attribute does not return an expected object, validation fails by default since `success` would be `false`.
187189

188190
### Team
189191

‎package.json

+17-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
{
22
"name": "@rcb-plugins/input-validator",
3+
"homepage": "https://github.com/React-ChatBotify-Plugins/input-validator",
4+
"keywords": [
5+
"react",
6+
"chat",
7+
"chatbot",
8+
"conversational-bot",
9+
"conversational-ui",
10+
"frontend-library",
11+
"plugins"
12+
],
313
"files": [
414
"./dist"
515
],
616
"version": "0.1.0",
7-
"description": "An example plugin for React ChatBotify.",
17+
"description": "A lightweight plugin to validate user input with visual feedbacks in React ChatBotify!",
818
"type": "module",
919
"main": "./dist/index.cjs",
1020
"module": "./dist/index.js",
@@ -26,6 +36,12 @@
2636
"preview": "vite preview",
2737
"prepack": "tsc && vite build"
2838
},
39+
"author": "tjtanjin",
40+
"license": "MIT",
41+
"repository": {
42+
"type": "git",
43+
"url": "https://github.com/React-ChatBotify-Plugins/input-validator"
44+
},
2945
"peerDependencies": {
3046
"react": "^18.3.1",
3147
"react-dom": "^18.3.1"

‎src/App.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const App = () => {
2020
}
2121
} as InputValidatorBlock,
2222
try_again : {
23-
message: "Look at how your message string is reversed! Try again!",
24-
path: "try_again",
23+
message: "Nice, you passed the input validation!",
24+
path: "start",
2525
}
2626
}
2727

@@ -30,7 +30,6 @@ const App = () => {
3030
id="chatbot-id"
3131
plugins={plugins}
3232
flow={flow}
33-
// settings={{event:{rcbUserSubmitText: true}}}
3433
></ChatBot>
3534
);
3635
}

‎src/core/useRcbPlugin.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const useRcbPlugin = (pluginConfig?: PluginConfig) => {
4646
const validationResult = validator(
4747
event.data.inputText
4848
) as ValidationResult;
49-
if (!validationResult.success) {
49+
if (!validationResult?.success) {
5050
event.preventDefault();
5151
}
5252

@@ -69,8 +69,8 @@ const useRcbPlugin = (pluginConfig?: PluginConfig) => {
6969

7070
// shows prompt toast to user
7171
showToast(
72-
validationResult.promptContent ?? "",
73-
validationResult.promptDuration
72+
validationResult.promptContent,
73+
validationResult.promptDuration ?? 3000
7474
);
7575

7676
// increases number of plugin toasts by 1

‎src/types/ValidationResult.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Defines the return result from validateInput.
33
*/
44
export type ValidationResult = {
5-
success: boolean;
5+
success?: boolean;
66
promptContent?: string;
77
promptType?: string;
88
promptDuration?: number;

0 commit comments

Comments
 (0)