Skip to content

Commit 238c864

Browse files
inikolovainikolova
committed
feat(chat): enhance component styles with improved and new features
BREAKING CHANGE: The Chat component's rendering and styles have been significantly updated to support modern conversational interfaces. This release introduces notable enhancements in the Chat rendering and adds new features such as a header, expandable and full-width messages, single and multiple file attachments, file pinning, interactive bubble states, an animated typing indicator, etc.
1 parent d6a06ed commit 238c864

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2249
-1154
lines changed

‎packages/bootstrap/scss/bubble/_index.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Dependencies
2+
@use "../core/_index.scss" as *;
3+
4+
// Component
5+
@forward "./_variables.scss";
6+
@use "./_layout.scss" as *;
7+
@use "./_theme.scss" as *;
8+
9+
// Expose
10+
@mixin kendo-bubble--styles() {
11+
@include import-once( "bubble" ) {
12+
@include core-styles();
13+
@include kendo-bubble--layout();
14+
@include kendo-bubble--theme();
15+
}
16+
}

‎packages/bootstrap/scss/bubble/_layout.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use "@progress/kendo-theme-core/scss/components/bubble/_layout.scss" as *;
2+
3+
4+
@mixin kendo-bubble--layout() {
5+
@include kendo-bubble--layout-base();
6+
}

‎packages/bootstrap/scss/bubble/_theme.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use "@progress/kendo-theme-core/scss/components/bubble/_theme.scss" as *;
2+
3+
4+
@mixin kendo-bubble--theme() {
5+
@include kendo-bubble--theme-base();
6+
}

‎packages/bootstrap/scss/bubble/_variables.scss‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@use "../core/_index.scss" as *;
2+
@use "../core/functions/index.import.scss" as *;
3+
4+
/// The border radius of the Bubble.
5+
/// @group bubble
6+
$kendo-bubble-border-radius: k-border-radius(xl) !default;
7+
/// The small border radius of the Bubble.
8+
/// @group bubble
9+
$kendo-bubble-border-radius-sm: k-border-radius(xs) !default;
10+
/// The vertical padding of the Bubble.
11+
/// @group bubble
12+
$kendo-bubble-padding-y: k-spacing(2) !default;
13+
/// The horizontal padding of the Bubble.
14+
/// @group bubble
15+
$kendo-bubble-padding-x: k-spacing(4) !default;
16+
/// The border width of the Bubble.
17+
/// @group bubble
18+
$kendo-bubble-border-width: 1px !default;
19+
/// The border style of the Bubble.
20+
/// @group bubble
21+
$kendo-bubble-border-style: solid !default;
22+
/// The line height of the Bubble.
23+
/// @group bubble
24+
$kendo-bubble-line-height: var( --kendo-line-height, normal ) !default;
25+
26+
/// The text color of the Bubble.
27+
/// @group bubble
28+
$kendo-bubble-text: k-color(base-on-subtle) !default;
29+
/// The background color of the Bubble.
30+
/// @group bubble
31+
$kendo-bubble-bg: k-color(base-subtle) !default;
32+
/// The border color of the Bubble.
33+
/// @group bubble
34+
$kendo-bubble-border: $kendo-bubble-bg !default;
35+
/// The shadow of the Bubble.
36+
/// @group bubble
37+
$kendo-bubble-shadow: none !default;
38+
39+
/// The background color of the hover Bubble.
40+
/// @group bubble
41+
$kendo-bubble-hover-bg: k-color(base-subtle-hover) !default;
42+
/// The border color of the active Bubble.
43+
/// @group bubble
44+
$kendo-bubble-hover-border: $kendo-bubble-hover-bg !default;
45+
/// The background color of the active Bubble.
46+
/// @group bubble
47+
$kendo-bubble-active-bg: k-color(base-subtle-active) !default;
48+
/// The border color of the active Bubble.
49+
/// @group bubble
50+
$kendo-bubble-active-border: $kendo-bubble-active-bg !default;
51+
/// The background color of the focused Bubble.
52+
/// @group bubble
53+
$kendo-bubble-focus-bg: k-color(base-subtle) !default;
54+
/// The border color of the focused Bubble.
55+
/// @group bubble
56+
$kendo-bubble-focus-border: $kendo-bubble-focus-bg !default;
57+
/// The box shadow of the focused Bubble.
58+
/// @group bubble
59+
$kendo-bubble-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
60+
61+
/// The spacing between content and icon in expandable Bubble.
62+
/// @group bubble
63+
$kendo-bubble-expandable-spacing: $kendo-bubble-padding-x !default;
64+
/// The horizontal padding of the expandable Bubble icon.
65+
/// @group bubble
66+
$kendo-bubble-expandable-icon-padding-x: k-spacing(2.5) !default;
67+
/// The vertical padding of the expandable Bubble icon.
68+
/// @group bubble
69+
$kendo-bubble-expandable-icon-padding-y: k-spacing(2.5) !default;
70+
71+
@forward "@progress/kendo-theme-core/scss/components/bubble/_variables.scss" with (
72+
$kendo-bubble-border-radius: $kendo-bubble-border-radius,
73+
$kendo-bubble-border-radius-sm: $kendo-bubble-border-radius-sm,
74+
$kendo-bubble-padding-y: $kendo-bubble-padding-y,
75+
$kendo-bubble-padding-x: $kendo-bubble-padding-x,
76+
$kendo-bubble-border-width: $kendo-bubble-border-width,
77+
$kendo-bubble-border-style: $kendo-bubble-border-style,
78+
$kendo-bubble-line-height: $kendo-bubble-line-height,
79+
80+
$kendo-bubble-text: $kendo-bubble-text,
81+
$kendo-bubble-bg: $kendo-bubble-bg,
82+
$kendo-bubble-border: $kendo-bubble-border,
83+
$kendo-bubble-shadow: $kendo-bubble-shadow,
84+
$kendo-bubble-hover-bg: $kendo-bubble-hover-bg,
85+
$kendo-bubble-hover-border: $kendo-bubble-hover-border,
86+
$kendo-bubble-active-bg: $kendo-bubble-active-bg,
87+
$kendo-bubble-active-border: $kendo-bubble-active-border,
88+
$kendo-bubble-focus-bg: $kendo-bubble-focus-bg,
89+
$kendo-bubble-focus-border: $kendo-bubble-focus-border,
90+
$kendo-bubble-focus-shadow: $kendo-bubble-focus-shadow,
91+
$kendo-bubble-expandable-spacing: $kendo-bubble-expandable-spacing,
92+
$kendo-bubble-expandable-icon-padding-x: $kendo-bubble-expandable-icon-padding-x,
93+
$kendo-bubble-expandable-icon-padding-y: $kendo-bubble-expandable-icon-padding-y,
94+
);

‎packages/bootstrap/scss/chat/_index.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
// Dependencies
22
@use "../core/_index.scss" as *;
33
@use "../icons/_index.scss" as *;
4-
@use "../input/_index.scss" as *;
4+
@use "../textarea/_index.scss" as *;
55
@use "../card/_index.scss" as *;
6+
@use "../appbar/_index.scss" as *;
67
@use "../toolbar/_index.scss" as *;
8+
@use "../bubble/_index.scss" as *;
9+
@use "../upload/_index.scss" as *;
10+
@use "../dropzone/_index.scss" as *;
11+
@use "../avatar/_index.scss" as *;
12+
@use "../speech-to-text-button/_index.scss" as *;
13+
@use "../suggestion/_index.scss" as *;
14+
@use "../skeleton/_index.scss" as *;
715

816
// Component
917
@forward "./_variables.scss";
@@ -14,10 +22,18 @@
1422
@mixin kendo-chat--styles() {
1523
@include import-once( "chat" ) {
1624
@include core-styles();
17-
@include kendo-input--styles();
25+
@include kendo-textarea--styles();
1826
@include kendo-card--styles();
1927
@include kendo-icon--styles();
28+
@include kendo-appbar--styles();
2029
@include kendo-toolbar--styles();
30+
@include kendo-bubble--styles();
31+
@include kendo-suggestion--styles();
32+
@include kendo-skeleton--styles();
33+
@include kendo-upload--styles();
34+
@include kendo-dropzone--styles();
35+
@include kendo-avatar--styles();
36+
@include kendo-speech-to-text-button--styles();
2137
@include kendo-chat--layout();
2238
@include kendo-chat--theme();
2339
}

0 commit comments

Comments
 (0)