@patternfly/chatbot 2.2.0-prerelease.14 → 2.2.0-prerelease.16
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/dist/cjs/Message/Message.js +13 -3
- package/dist/cjs/Message/Message.test.js +38 -3
- package/dist/cjs/Message/TextMessage/TextMessage.d.ts +2 -1
- package/dist/cjs/Message/TextMessage/TextMessage.js +2 -2
- package/dist/css/main.css +72 -68
- package/dist/css/main.css.map +1 -1
- package/dist/esm/Message/Message.js +14 -4
- package/dist/esm/Message/Message.test.js +38 -3
- package/dist/esm/Message/TextMessage/TextMessage.d.ts +2 -1
- package/dist/esm/Message/TextMessage/TextMessage.js +3 -3
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +142 -13
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +182 -12
- package/src/ChatbotHeader/ChatbotHeader.scss +2 -2
- package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +3 -3
- package/src/Message/ListMessage/ListMessage.scss +5 -5
- package/src/Message/Message.scss +3 -11
- package/src/Message/Message.test.tsx +40 -3
- package/src/Message/Message.tsx +23 -4
- package/src/Message/MessageLoading.scss +2 -2
- package/src/Message/TextMessage/TextMessage.scss +8 -11
- package/src/Message/TextMessage/TextMessage.tsx +3 -3
- package/src/MessageBar/AttachButton.scss +19 -3
- package/src/MessageBar/MessageBar.scss +3 -2
- package/src/MessageBar/MicrophoneButton.scss +8 -8
- package/src/MessageBar/StopButton.scss +17 -3
- package/src/MessageBox/JumpButton.scss +6 -6
- package/src/SourcesCard/SourcesCard.scss +2 -2
- package/src/main.scss +0 -4
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
// Need to inline shorter text
|
|
14
14
|
.pf-chatbot__message-text {
|
|
15
15
|
width: fit-content;
|
|
16
|
-
padding: var(--pf-t--
|
|
17
|
-
border-radius: var(--pf-t--
|
|
16
|
+
padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
|
|
17
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
|
18
18
|
|
|
19
19
|
.pf-v6-c-content,
|
|
20
20
|
.pf-v6-c-content--small,
|
|
@@ -25,27 +25,24 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
code {
|
|
28
|
-
background-color: var(--pf-t--
|
|
28
|
+
background-color: var(--pf-t--global--background--color--tertiary--default);
|
|
29
29
|
font-size: var(--pf-t--global--font--size--body--default);
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
.pf-chatbot__message--user {
|
|
34
34
|
.pf-chatbot__message-text {
|
|
35
|
-
background-color: var(--pf-t--
|
|
36
|
-
color: var(--pf-t--
|
|
37
|
-
|
|
35
|
+
background-color: var(--pf-t--global--color--brand--default);
|
|
36
|
+
color: var(--pf-t--global--text--color--on-brand--default);
|
|
37
|
+
--pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
|
|
38
|
+
padding: var(--pf-t--global--spacer--sm);
|
|
38
39
|
|
|
39
40
|
.pf-v6-c-content,
|
|
40
41
|
.pf-v6-c-content--small,
|
|
41
42
|
.pf-v6-c-content--blockquote,
|
|
42
43
|
p,
|
|
43
44
|
a {
|
|
44
|
-
color: var(--pf-t--
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
code {
|
|
48
|
-
background-color: initial;
|
|
45
|
+
color: var(--pf-t--global--text--color--on-brand--default);
|
|
49
46
|
}
|
|
50
47
|
}
|
|
51
48
|
}
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { ExtraProps } from 'react-markdown';
|
|
7
|
-
import { Content,
|
|
7
|
+
import { Content, ContentProps } from '@patternfly/react-core';
|
|
8
8
|
|
|
9
|
-
const TextMessage = ({ children, ...props }:
|
|
9
|
+
const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
|
|
10
10
|
<span className="pf-chatbot__message-text">
|
|
11
|
-
<Content component={
|
|
11
|
+
<Content component={component} {...props}>
|
|
12
12
|
{children}
|
|
13
13
|
</Content>
|
|
14
14
|
</span>
|
|
@@ -8,13 +8,29 @@
|
|
|
8
8
|
height: 3rem;
|
|
9
9
|
|
|
10
10
|
.pf-v6-c-button__icon {
|
|
11
|
-
color: var(--pf-t--
|
|
11
|
+
color: var(--pf-t--global--icon--color--subtle);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
// Interactive states
|
|
15
|
-
&:hover
|
|
15
|
+
&:hover {
|
|
16
16
|
.pf-v6-c-button__icon {
|
|
17
|
-
color: var(--pf-t--
|
|
17
|
+
color: var(--pf-t--global--icon--color--regular);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&:active,
|
|
22
|
+
&:focus {
|
|
23
|
+
background-color: var(--pf-t--global--color--brand--clicked);
|
|
24
|
+
|
|
25
|
+
.pf-v6-c-button__icon {
|
|
26
|
+
color: var(--pf-t--global--icon--color--inverse);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:hover,
|
|
30
|
+
&:focus {
|
|
31
|
+
.pf-v6-c-button__icon {
|
|
32
|
+
color: var(--pf-t--global--icon--color--inverse);
|
|
33
|
+
}
|
|
18
34
|
}
|
|
19
35
|
}
|
|
20
36
|
}
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
justify-content: flex-end;
|
|
22
22
|
background-color: var(--pf-t--global--background--color--primary--default);
|
|
23
23
|
border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
|
|
24
|
-
transition: box-shadow var(--pf-t--
|
|
24
|
+
transition: box-shadow var(--pf-t--global--motion--timing-function--accelerate)
|
|
25
|
+
var(--pf-t--global--motion--duration--sm);
|
|
25
26
|
|
|
26
27
|
overflow: hidden;
|
|
27
28
|
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
justify-content: end;
|
|
39
40
|
padding-block-start: var(--pf-t--global--spacer--xs);
|
|
40
41
|
padding-block-end: var(--pf-t--global--spacer--xs);
|
|
41
|
-
gap: var(--pf-t--global--spacer--
|
|
42
|
+
gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
&-input {
|
|
@@ -8,31 +8,31 @@
|
|
|
8
8
|
height: 3rem;
|
|
9
9
|
|
|
10
10
|
.pf-v6-c-button__icon {
|
|
11
|
-
color: var(--pf-t--
|
|
11
|
+
color: var(--pf-t--global--icon--color--subtle);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
// Interactive states
|
|
15
15
|
&:hover,
|
|
16
16
|
&:focus {
|
|
17
17
|
.pf-v6-c-button__icon {
|
|
18
|
-
color: var(--pf-t--
|
|
18
|
+
color: var(--pf-t--global--icon--color--regular);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
// Active state (while recording voice)
|
|
23
23
|
&--active {
|
|
24
|
-
background-color: var(--pf-t--color--
|
|
25
|
-
animation: motionMicButton var(--pf-t--
|
|
26
|
-
infinite;
|
|
24
|
+
background-color: var(--pf-t--global--color--brand--clicked);
|
|
25
|
+
animation: motionMicButton var(--pf-t--global--motion--timing-function--accelerate)
|
|
26
|
+
calc(var(--pf-t--global--motion--duration--md) * 8) infinite;
|
|
27
27
|
|
|
28
28
|
.pf-v6-c-button__icon {
|
|
29
|
-
color: var(--pf-t--color--
|
|
29
|
+
color: var(--pf-t--global--icon--color--on-brand--default);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
&:hover,
|
|
33
33
|
&:focus {
|
|
34
34
|
.pf-v6-c-button__icon {
|
|
35
|
-
color: var(--pf-t--color--
|
|
35
|
+
color: var(--pf-t--global--icon--color--on-brand--default);
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
@keyframes motionMicButton {
|
|
42
42
|
0% {
|
|
43
|
-
box-shadow: 0 0 0 0 rgba(0,
|
|
43
|
+
box-shadow: 0 0 0 0 rgba(0, 77, 153, 1);
|
|
44
44
|
}
|
|
45
45
|
100% {
|
|
46
46
|
box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
|
|
@@ -12,11 +12,25 @@
|
|
|
12
12
|
align-items: center;
|
|
13
13
|
|
|
14
14
|
.pf-v6-c-button__icon {
|
|
15
|
-
color: var(--pf-t--global--icon--color--
|
|
15
|
+
color: var(--pf-t--global--icon--color--on-brand--default);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
&:hover
|
|
19
|
-
&:focus {
|
|
18
|
+
&:hover {
|
|
20
19
|
background-color: var(--pf-t--global--color--brand--hover);
|
|
21
20
|
}
|
|
21
|
+
|
|
22
|
+
&:focus {
|
|
23
|
+
background-color: var(--pf-t--global--color--brand--clicked);
|
|
24
|
+
|
|
25
|
+
.pf-v6-c-button__icon {
|
|
26
|
+
color: var(--pf-t--global--icon--color--on-brand--default);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:hover,
|
|
30
|
+
&:focus {
|
|
31
|
+
.pf-v6-c-button__icon {
|
|
32
|
+
color: var(--pf-t--global--icon--color--on-brand--default);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
22
36
|
}
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
background-color: var(--pf-t--global--background--color--primary--default) !important;
|
|
17
17
|
border: 1px solid var(--pf-t--chatbot--border) !important;
|
|
18
18
|
box-shadow: var(--pf-t--global--box-shadow--sm);
|
|
19
|
-
color: var(--pf-t--
|
|
19
|
+
color: var(--pf-t--global--icon--color--subtle) !important;
|
|
20
20
|
transform: translate3d(-50%, 0, 0) !important;
|
|
21
21
|
transition:
|
|
22
|
-
background-color var(--pf-t--
|
|
23
|
-
box-shadow var(--pf-t--
|
|
24
|
-
transform var(--pf-t--
|
|
25
|
-
opacity var(--pf-t--
|
|
22
|
+
background-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
|
|
23
|
+
box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
|
|
24
|
+
transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md),
|
|
25
|
+
opacity var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md) !important;
|
|
26
26
|
z-index: var(--pf-t--global--z-index--md) !important;
|
|
27
27
|
|
|
28
28
|
.pf-v6-c-button__text {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
&:focus {
|
|
34
34
|
background-color: var(--pf-t--global--background--color--primary--hover) !important;
|
|
35
35
|
box-shadow: var(--pf-t--global--box-shadow--md) !important;
|
|
36
|
-
color: var(--pf-t--
|
|
36
|
+
color: var(--pf-t--global--icon--color--regular) !important;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
&--top {
|
|
@@ -63,11 +63,11 @@
|
|
|
63
63
|
.pf-v6-c-button:hover,
|
|
64
64
|
.pf-v6-c-button:focus {
|
|
65
65
|
.pf-v6-c-button__icon {
|
|
66
|
-
color: var(--pf-t--
|
|
66
|
+
color: var(--pf-t--global--icon--color--regular);
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
.pf-v6-c-button__icon {
|
|
70
|
-
color: var(--pf-t--
|
|
70
|
+
color: var(--pf-t--global--icon--color--subtle);
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
}
|
package/src/main.scss
CHANGED
|
@@ -50,8 +50,6 @@
|
|
|
50
50
|
|
|
51
51
|
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
|
|
52
52
|
|
|
53
|
-
--pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
|
|
54
|
-
|
|
55
53
|
--pf-t--chatbot--blue-icon--background--color--hover: rgba(
|
|
56
54
|
146,
|
|
57
55
|
197,
|
|
@@ -69,8 +67,6 @@
|
|
|
69
67
|
--pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
|
|
70
68
|
--pf-t--chatbot--border: var(--pf-t--global--border--color--default);
|
|
71
69
|
|
|
72
|
-
--pf-t--chatbot--icon--fill: var(--pf-t--global--icon--color--subtle);
|
|
73
|
-
--pf-t--chatbot--icon--fill--hover: var(--pf-t--global--icon--color--regular);
|
|
74
70
|
--pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
|
|
75
71
|
|
|
76
72
|
--pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
|