@gooddata/sdk-ui-gen-ai 11.45.0-alpha.0 → 11.45.0-alpha.2

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.
@@ -0,0 +1,84 @@
1
+ @keyframes ai-flip-y {
2
+ 0% {
3
+ transform: rotateY(0deg);
4
+ animation-timing-function: cubic-bezier(0.55, 0, 0.2, 1);
5
+ }
6
+ 14% {
7
+ transform: rotateY(180deg);
8
+ }
9
+ 100% {
10
+ transform: rotateY(180deg);
11
+ }
12
+ }
13
+
14
+ @keyframes gd-gen-ai-heading-old {
15
+ 0% {
16
+ opacity: 1;
17
+ transform: translateY(0);
18
+ }
19
+ 100% {
20
+ opacity: 0;
21
+ transform: translateY(-100%);
22
+ }
23
+ }
24
+
25
+ @keyframes gd-gen-ai-heading-new {
26
+ 0% {
27
+ opacity: 0;
28
+ transform: translateY(100%);
29
+ }
30
+ 100% {
31
+ opacity: 1;
32
+ transform: translateY(0);
33
+ }
34
+ }
35
+
36
+ .gd-gen-ai-chat__animations--loader {
37
+ position: relative;
38
+
39
+ &--inner {
40
+ position: absolute;
41
+ left: 50%;
42
+ top: 50%;
43
+ transform: translate(-50%, -50%);
44
+ }
45
+
46
+ &--flip {
47
+ transform-origin: center center;
48
+ animation: ai-flip-y 4s linear infinite;
49
+ }
50
+
51
+ &--svg {
52
+ display: block;
53
+ }
54
+
55
+ &--sparkle {
56
+ position: absolute;
57
+ transform-origin: center center;
58
+ transform: translate(-50%, -50%);
59
+ }
60
+ }
61
+
62
+ .gd-gen-ai-chat__animations--headings {
63
+ display: grid;
64
+ grid-template-columns: 1fr;
65
+ grid-template-rows: 1fr;
66
+ height: 22px;
67
+ overflow: hidden;
68
+
69
+ &--heading {
70
+ grid-column: 1;
71
+ grid-row: 1;
72
+ white-space: nowrap;
73
+ overflow: hidden;
74
+ text-overflow: ellipsis;
75
+
76
+ &--old {
77
+ animation: gd-gen-ai-heading-old 0.5s ease-in-out forwards;
78
+ }
79
+
80
+ &--new {
81
+ animation: gd-gen-ai-heading-new 0.5s ease-in-out forwards;
82
+ }
83
+ }
84
+ }
@@ -10,6 +10,7 @@
10
10
  @use "messages";
11
11
  @use "window";
12
12
  @use "conversations";
13
+ @use "animation";
13
14
 
14
15
  .gd-gen-ai-chat {
15
16
  display: flex;
@@ -1127,9 +1127,20 @@
1127
1127
 
1128
1128
  &--duration {
1129
1129
  font-size: 0.8rem;
1130
+ line-height: 22px;
1130
1131
  color: kit-variables.$gd-color-state-blank;
1131
1132
  margin-left: 10px;
1132
1133
  }
1134
+
1135
+ &--thinking {
1136
+ display: flex;
1137
+ align-items: center;
1138
+ color: kit-variables.$gd-color-link;
1139
+ font-size: 14px;
1140
+ font-style: normal;
1141
+ font-weight: 400;
1142
+ line-height: 22px;
1143
+ }
1133
1144
  }
1134
1145
 
1135
1146
  // Reasoning content
@@ -1187,29 +1198,6 @@
1187
1198
  animation: pulsate-opacity 1s infinite ease-in-out;
1188
1199
  }
1189
1200
  }
1190
-
1191
- &--content--loading {
1192
- position: relative;
1193
- padding-left: 15px;
1194
-
1195
- &::before {
1196
- content: "";
1197
- position: absolute;
1198
- left: 5px;
1199
- top: 0;
1200
- bottom: 16px;
1201
- width: 1px;
1202
- background-color: kit-variables.$gd-color-state-blank;
1203
- opacity: 0.3;
1204
- }
1205
-
1206
- &--spinner {
1207
- svg {
1208
- width: 16px;
1209
- height: 16px;
1210
- }
1211
- }
1212
- }
1213
1201
  }
1214
1202
 
1215
1203
  .gd-gen-ai-chat__messages__conversation {