blixify-ui-web-mcp 0.1.2 → 0.1.3
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/lib/components/chart/ganttChart/README.md +96 -110
- package/lib/components/chart/ganttChart/ganttChart.stories.tsx +132 -116
- package/lib/components/chart/heatmapChart/README.md +93 -82
- package/lib/components/chart/heatmapChart/heatmapChart.stories.tsx +118 -74
- package/lib/components/chat/chatAnchor/README.md +61 -79
- package/lib/components/chat/chatBase/README.md +166 -199
- package/lib/components/chat/chatBase/chatBase.stories.tsx +243 -265
- package/lib/components/chat/chatDashboard/README.md +87 -129
- package/lib/components/chat/chatDashboard/chatDashboard.stories.tsx +84 -107
- package/lib/components/data/dataGraph/README.md +135 -1
- package/lib/components/data/dataGraph/dataGraph.stories.tsx +86 -67
- package/lib/components/data/dataReference/README.md +141 -43
- package/lib/components/data/dataReference/dataReference.stories.tsx +107 -35
- package/lib/components/data/dataWrapper/README.md +2 -1
- package/lib/components/display/table/README.md +1 -1
- package/lib/components/navigation/bars/README.md +90 -17
- package/lib/components/navigation/bars/bars.stories.tsx +125 -51
- package/lib/components/navigation/breadcrumb/README.md +40 -20
- package/lib/components/navigation/breadcrumb/breadcrumb.stories.tsx +30 -4
- package/lib/components/navigation/header/README.md +67 -108
- package/lib/components/navigation/header/header.stories.tsx +143 -39
- package/lib/components/navigation/leftNav/README.md +121 -66
- package/lib/components/navigation/leftNav/leftNav.stories.tsx +176 -83
- package/lib/components/navigation/tabs/tabs.stories.tsx +53 -29
- package/package.json +1 -1
|
@@ -4,220 +4,187 @@
|
|
|
4
4
|
|
|
5
5
|
<hr>
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
A chat window component with message bubbles, markdown rendering for received messages, message search, file upload (image/video), a loading reply indicator, and customisable header/footer/body slots.
|
|
8
8
|
|
|
9
9
|
##### Import
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
|
-
import {
|
|
12
|
+
import {
|
|
13
|
+
ChatBase,
|
|
14
|
+
Conversation,
|
|
15
|
+
Message,
|
|
16
|
+
User,
|
|
17
|
+
} from "blixify-ui-web/components/chat/chatBase";
|
|
13
18
|
```
|
|
14
19
|
|
|
15
20
|
##### Usage
|
|
16
21
|
|
|
17
|
-
|
|
22
|
+
Basic chat:
|
|
23
|
+
|
|
24
|
+
```jsx
|
|
18
25
|
const [message, setMessage] = useState("");
|
|
19
|
-
const [
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
id: "1",
|
|
24
|
-
members: [currentUser, botUser],
|
|
25
|
-
messageList: [
|
|
26
|
-
{
|
|
27
|
-
sender: botUser,
|
|
28
|
-
messageBody: "Hi! How can I help you? 🤖",
|
|
29
|
-
createdAt: moment(
|
|
30
|
-
"Fri Nov 03 2023 12:21:14 GMT+0800 (Malaysia Time)"
|
|
31
|
-
).toDate(),
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
sender: currentUser,
|
|
35
|
-
messageBody: "Yo, my computer's acting up.",
|
|
36
|
-
createdAt: moment(
|
|
37
|
-
"Fri Nov 03 2023 13:21:14 GMT+0800 (Malaysia Time)"
|
|
38
|
-
).toDate(),
|
|
39
|
-
},
|
|
40
|
-
],
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
const handleOnSendMessage = (conversation: Conversation) => {
|
|
44
|
-
setConversation(conversation);
|
|
45
|
-
setMessage("");
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
const handleOnSearch = (searchMessage: string) => {
|
|
49
|
-
if (searchMessage.length === 0) {
|
|
50
|
-
setSearch("");
|
|
51
|
-
setFilteredConversation(null);
|
|
52
|
-
} else {
|
|
53
|
-
const dupMessageList = conversation.messageList.filter((eachMessage) => {
|
|
54
|
-
return eachMessage.messageBody
|
|
55
|
-
.toLowerCase()
|
|
56
|
-
.includes(searchMessage.toLowerCase());
|
|
57
|
-
});
|
|
58
|
-
const dupConversation = {
|
|
59
|
-
id: conversation.id,
|
|
60
|
-
members: [...conversation.members],
|
|
61
|
-
messageList: [...dupMessageList],
|
|
62
|
-
};
|
|
63
|
-
setFilteredConversation(dupConversation);
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
const handleOnClearMessage = () => {
|
|
68
|
-
setFilteredConversation(null);
|
|
69
|
-
setConversation({
|
|
26
|
+
const [conversation, setConversation] =
|
|
27
|
+
useState <
|
|
28
|
+
Conversation >
|
|
29
|
+
{
|
|
70
30
|
id: "1",
|
|
71
31
|
members: [currentUser, botUser],
|
|
72
|
-
messageList: [
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
{
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
32
|
+
messageList: [
|
|
33
|
+
{
|
|
34
|
+
sender: botUser,
|
|
35
|
+
messageBody: "Hi! How can I help?",
|
|
36
|
+
createdAt: new Date(),
|
|
37
|
+
},
|
|
38
|
+
],
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
<ChatBase
|
|
42
|
+
open
|
|
43
|
+
value={message}
|
|
44
|
+
currentUser={currentUser}
|
|
45
|
+
conversation={conversation}
|
|
46
|
+
onSendMessage={(updated) => {
|
|
47
|
+
setConversation(updated);
|
|
48
|
+
setMessage("");
|
|
49
|
+
}}
|
|
50
|
+
onChangeMessage={(e) => setMessage(e.target.value)}
|
|
51
|
+
sizeClassName="h-[500px] w-96"
|
|
52
|
+
disableMobileResize
|
|
53
|
+
/>;
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
With search:
|
|
57
|
+
|
|
58
|
+
```jsx
|
|
59
|
+
<ChatBase
|
|
60
|
+
open
|
|
61
|
+
value={message}
|
|
62
|
+
currentUser={currentUser}
|
|
63
|
+
conversation={filteredConversation ?? conversation}
|
|
64
|
+
searchMessage={search}
|
|
65
|
+
onSearch={(q) => { /* filter conversation.messageList */ }}
|
|
66
|
+
onChangeSearch={(e) => setSearch(e.target.value)}
|
|
67
|
+
onSendMessage={...}
|
|
68
|
+
onChangeMessage={...}
|
|
69
|
+
/>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
With file upload:
|
|
73
|
+
|
|
74
|
+
```jsx
|
|
75
|
+
<ChatBase
|
|
76
|
+
open
|
|
77
|
+
value={message}
|
|
78
|
+
currentUser={currentUser}
|
|
79
|
+
conversation={conversation}
|
|
80
|
+
fileUpload={{
|
|
81
|
+
allowFileUpload: true,
|
|
82
|
+
file,
|
|
83
|
+
acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm",
|
|
84
|
+
onChangeUpload: (e) => setFile(e.target.files[0]),
|
|
85
|
+
onSendUpload: (conversation) => { /* append file message */ },
|
|
86
|
+
}}
|
|
87
|
+
onSendMessage={...}
|
|
88
|
+
onChangeMessage={...}
|
|
89
|
+
/>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
With loading reply indicator:
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
<ChatBase
|
|
96
|
+
open
|
|
97
|
+
value={message}
|
|
98
|
+
currentUser={currentUser}
|
|
99
|
+
conversation={conversation}
|
|
100
|
+
isLoadingReply={waitingForBot}
|
|
101
|
+
onSendMessage={...}
|
|
102
|
+
onChangeMessage={...}
|
|
103
|
+
/>
|
|
132
104
|
```
|
|
133
105
|
|
|
134
106
|
##### Required props
|
|
135
107
|
|
|
136
|
-
| Name
|
|
137
|
-
|
|
|
138
|
-
| open | `boolean` |
|
|
139
|
-
| value | `string` |
|
|
140
|
-
| currentUser | `User` |
|
|
141
|
-
| conversation | `Conversation` | Conversation
|
|
108
|
+
| Name | Type | Description |
|
|
109
|
+
| -------------- | -------------- | -------------------------------------------------------------------- |
|
|
110
|
+
| `open` | `boolean` | When `false`, the component renders nothing |
|
|
111
|
+
| `value` | `string` | Current message input value |
|
|
112
|
+
| `currentUser` | `User` | The logged-in user — used to determine which side messages appear on |
|
|
113
|
+
| `conversation` | `Conversation` | The conversation to display — see Conversation below |
|
|
142
114
|
|
|
143
115
|
##### Optional props
|
|
144
116
|
|
|
145
|
-
| Name
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
|
151
|
-
|
|
|
152
|
-
|
|
|
153
|
-
|
|
|
154
|
-
|
|
|
155
|
-
|
|
|
156
|
-
|
|
|
157
|
-
| disableMobileResize
|
|
158
|
-
|
|
|
159
|
-
|
|
|
160
|
-
|
|
|
161
|
-
|
|
|
162
|
-
|
|
|
163
|
-
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
| `
|
|
173
|
-
| `
|
|
174
|
-
| `
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
|
190
|
-
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
|
198
|
-
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
| Name | Type | Description |
|
|
220
|
-
| --------- | ------------- | ------------------------- |
|
|
221
|
-
| `text` | `string` | Required text |
|
|
222
|
-
| `onClick` | `() => void` | Required onClick function |
|
|
223
|
-
| `icon` | `JSX.Element` | Required icon |
|
|
117
|
+
| Name | Type | Default | Description |
|
|
118
|
+
| ---------------------- | -------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------- |
|
|
119
|
+
| `fileUpload` | `FileUpload` | — | Enables file upload — see FileUpload below |
|
|
120
|
+
| `searchMessage` | `string` | — | Current search input value. Pass the filtered conversation to `conversation` to show results. |
|
|
121
|
+
| `headerElement` | `ReactElement` | — | Replaces the default blue "Chat" header bar |
|
|
122
|
+
| `bodyElement` | `ReactElement` | — | Replaces the default message list. Useful for loading states. |
|
|
123
|
+
| `footerElement` | `ReactElement` | — | Rendered above the message input. Useful for limit warnings or disclaimers. |
|
|
124
|
+
| `additionalAction` | `ChatBaseAction[]` | — | Extra items added to the ⋮ actions dropdown — see ChatBaseAction below |
|
|
125
|
+
| `hideAdditionalAction` | `boolean` | `false` | Hides the ⋮ actions dropdown entirely |
|
|
126
|
+
| `disableMessageInput` | `boolean` | `false` | Disables the message text input |
|
|
127
|
+
| `isLoadingReply` | `boolean` | `false` | Shows an animated typing indicator above the input and disables the input |
|
|
128
|
+
| `onHiddenChatText` | `boolean` | `false` | Hides the text input and paperclip icon. Useful when the input is managed externally. |
|
|
129
|
+
| `disableMobileResize` | `boolean` | `false` | Prevents the component from expanding to full screen on mobile |
|
|
130
|
+
| `sizeClassName` | `string` | `h-full w-full sm:h-[75vh] sm:w-96` | Tailwind classes controlling the component dimensions |
|
|
131
|
+
| `className` | `string` | — | Additional Tailwind classes applied to the outer container |
|
|
132
|
+
| `paddingTop` | `number` | `0` | Top padding in pixels. Used to offset the actions menu in mobile app layouts. |
|
|
133
|
+
| `onSendMessage` | `(conversation: Conversation) => void` | — | Called with the updated conversation (including the new message) when send is triggered |
|
|
134
|
+
| `onChangeMessage` | `(event: any) => void` | — | Called on every keystroke in the message input |
|
|
135
|
+
| `onSearch` | `(searchMessage: string) => void` | — | Called when the search form is submitted |
|
|
136
|
+
| `onChangeSearch` | `(event: any) => void` | — | Called on every keystroke in the search input |
|
|
137
|
+
| `onClose` | `() => void` | — | Called when the mobile close (✕) button is tapped |
|
|
138
|
+
| `lib` | `{ axios?: any }` | — | Pass axios for file upload operations |
|
|
139
|
+
|
|
140
|
+
##### FileUpload
|
|
141
|
+
|
|
142
|
+
| Name | Type | Description |
|
|
143
|
+
| ----------------- | -------------------------------------- | ----------------------------------------------------------------------------------------- |
|
|
144
|
+
| `allowFileUpload` | `boolean` | Shows the paperclip button to trigger file selection |
|
|
145
|
+
| `file` | `string \| File \| any` | Currently selected file |
|
|
146
|
+
| `maxFileSize` | `number` | Maximum file size in MB. Defaults to `15`. |
|
|
147
|
+
| `acceptFileType` | `string` | Comma-separated accepted extensions, e.g. `".jpg,.png,.mp4"` |
|
|
148
|
+
| `onChangeUpload` | `(event: any) => void` | Called when a file is selected via the file input |
|
|
149
|
+
| `onSendUpload` | `(conversation: Conversation) => void` | Called with the current conversation when the send button is clicked with a file selected |
|
|
150
|
+
|
|
151
|
+
##### ChatBaseAction
|
|
152
|
+
|
|
153
|
+
| Name | Type | Description |
|
|
154
|
+
| --------- | ------------- | ---------------------------------------- |
|
|
155
|
+
| `text` | `string` | Label shown in the dropdown item |
|
|
156
|
+
| `onClick` | `() => void` | Called when the dropdown item is clicked |
|
|
157
|
+
| `icon` | `JSX.Element` | Icon rendered to the left of the label |
|
|
158
|
+
|
|
159
|
+
##### Conversation
|
|
160
|
+
|
|
161
|
+
| Name | Type | Description |
|
|
162
|
+
| ------------- | ----------- | -------------------------------- |
|
|
163
|
+
| `id` | `string` | Unique conversation identifier |
|
|
164
|
+
| `members` | `User[]` | Participants in the conversation |
|
|
165
|
+
| `messageList` | `Message[]` | Ordered list of messages |
|
|
166
|
+
|
|
167
|
+
##### Message
|
|
168
|
+
|
|
169
|
+
| Name | Type | Description |
|
|
170
|
+
| -------------- | ------------------- | ---------------------------------------------------------------------------------------------- |
|
|
171
|
+
| `sender` | `User` | The user who sent the message |
|
|
172
|
+
| `messageBody` | `string \| FileObj` | Text content (supports markdown for received messages) or a `FileObj` for image/video messages |
|
|
173
|
+
| `reactElement` | `ReactElement` | Optional — replaces `messageBody` rendering with a custom element |
|
|
174
|
+
| `createdAt` | `Date` | Timestamp shown below the message bubble |
|
|
175
|
+
|
|
176
|
+
##### User
|
|
177
|
+
|
|
178
|
+
| Name | Type | Description |
|
|
179
|
+
| ---------- | -------- | -------------------------------------------------- |
|
|
180
|
+
| `id` | `string` | Unique user identifier |
|
|
181
|
+
| `name` | `string` | Display name shown above received message bubbles |
|
|
182
|
+
| `imageUrl` | `string` | Optional avatar URL. Falls back to a default icon. |
|
|
183
|
+
|
|
184
|
+
##### FileObj
|
|
185
|
+
|
|
186
|
+
| Name | Type | Description |
|
|
187
|
+
| ---------- | -------- | ---------------------------------------------- |
|
|
188
|
+
| `fileName` | `string` | File URL or path |
|
|
189
|
+
| `token` | `string` | Unique file token |
|
|
190
|
+
| `type` | `string` | MIME type, e.g. `"image/png"` or `"video/mp4"` |
|