Skip to content

Commit 599f9e2

Browse files
igdmdimitrovigdmdimitrov
committed
Merge branch 'dmdimitrov/chat-ai-component' of https://github.com/IgniteUI/igniteui-webcomponents into dmdimitrov/chat-ai-component
2 parents 8794409 + 5ecce9c commit 599f9e2

File tree

13 files changed

+134
-77
lines changed

13 files changed

+134
-77
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
"globby": "^14.1.0",
8282
"husky": "^9.1.7",
8383
"ig-typedoc-theme": "^6.2.3",
84-
"igniteui-theming": "^19.3.0-beta.4",
84+
"igniteui-theming": "^19.3.0",
8585
"keep-a-changelog": "^2.6.2",
8686
"lint-staged": "^16.1.5",
8787
"lit-analyzer": "^2.0.3",

‎src/components/chat/message-attachments.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@ import { consume } from '@lit/context';
22
import { html, LitElement, nothing } from 'lit';
33
import { property } from 'lit/decorators.js';
44
import { until } from 'lit/directives/until.js';
5+
import { addThemingController } from '../../theming/theming-controller.js';
56
import IgcIconButtonComponent from '../button/icon-button.js';
67
import { chatContext } from '../common/context.js';
78
import { registerComponent } from '../common/definitions/register.js';
89
import { partMap } from '../common/part-map.js';
910
import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
1011
import IgcIconComponent from '../icon/icon.js';
1112
import type { ChatState } from './chat-state.js';
13+
import { all } from './themes/attachments.js';
1214
import { styles } from './themes/message-attachments.base.css.js';
13-
import { styles as shared } from './themes/shared/message-attachments.common.css.js';
15+
import { styles as shared } from './themes/shared/message-attachments/message-attachments.common.css.js';
1416
import type {
1517
ChatTemplateRenderer,
1618
IgcMessage,
@@ -66,6 +68,11 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
6668
@property({ attribute: false })
6769
public message?: IgcMessage;
6870

71+
constructor() {
72+
super();
73+
addThemingController(this, all);
74+
}
75+
6976
private readonly _defaults: Readonly<DefaultAttachmentRenderers> =
7077
Object.freeze({
7178
attachment: (ctx: any) => this.renderAttachment(ctx.param),
@@ -93,7 +100,7 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
93100
this.message?.sender === this._chatState?.currentUserId;
94101
const iconName =
95102
attachment.type === 'image' || attachment.file?.type.startsWith('image/')
96-
? 'image_thumbnail'
103+
? 'attach_image'
97104
: 'document_thumbnail';
98105

99106
return html`

‎src/components/chat/themes/attachments.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { css } from 'lit';
2+
3+
import type { Themes } from '../../../theming/types.js';
4+
// Shared Styles
5+
import { styles as indigo } from './shared/message-attachments/message-attachments.indigo.css.js';
6+
7+
const light = {
8+
indigo: css`
9+
${indigo}
10+
`,
11+
};
12+
13+
const dark = {
14+
indigo: css`
15+
${indigo}
16+
`,
17+
};
18+
19+
export const all: Themes = { light, dark };

‎src/components/chat/themes/chat.base.scss‎

Lines changed: 73 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
@use 'styles/common/component';
22
@use 'styles/utilities' as *;
33

4-
$inline-inset: rem(16px);
4+
$inline-inset: rem(24px);
55

66
:host {
7-
--igc-chat-height: 100%;
7+
--igc-chat-height: 100%;
88

9-
width: 100%;
10-
height: var(--igc-chat-height);
11-
overflow: hidden;
12-
display: flex;
13-
flex-direction: column;
9+
width: 100%;
10+
height: var(--igc-chat-height);
11+
overflow: hidden;
12+
display: flex;
13+
flex-direction: column;
14+
container-type: inline-size;
1415
}
1516

1617
[part='chat-container'] {
17-
display: grid;
18-
grid-template-columns: 1fr minmax(rem(320px), #{calc(rem(760px) + $inline-inset * 2)}) 1fr;
19-
grid-template-rows: auto 1fr auto;
20-
height: 100%;
18+
display: grid;
19+
grid-template-columns: 1fr minmax(rem(320px), #{calc(rem(760px) + $inline-inset * 2)}) 1fr;
20+
grid-template-rows: auto 1fr auto;
21+
height: 100%;
2122
}
2223

2324
[part='chat-wrapper'] {
@@ -32,30 +33,30 @@ $inline-inset: rem(16px);
3233
[part='message-list'],
3334
[part='empty-state'],
3435
[part='suggestions-container'] {
35-
grid-column: 2 / 3;
36-
display: grid;
37-
grid-template-columns: subgrid;
38-
width: 100%;
39-
padding-inline: $inline-inset;
36+
grid-column: 2 / 3;
37+
display: grid;
38+
grid-template-columns: subgrid;
39+
width: 100%;
40+
padding-inline: $inline-inset;
4041
}
4142

4243
[part='message-list'] {
43-
padding-block: rem(16px) rem(24px);
44-
gap: rem(24px);
44+
padding-block: rem(16px) rem(24px);
45+
gap: rem(24px);
4546
}
4647

4748
[part='empty-state'] {
4849
height: 100%;
4950
}
5051

5152
[part='header'] {
52-
display: flex;
53-
align-items: center;
54-
min-height: rem(56px);
55-
padding-inline: $inline-inset;
56-
box-shadow: var(--ig-elevation-4);
57-
width: 100%;
58-
z-index: 1;
53+
display: flex;
54+
align-items: center;
55+
min-height: rem(56px);
56+
padding-inline: rem(16px);
57+
box-shadow: var(--ig-elevation-4);
58+
width: 100%;
59+
z-index: 1;
5960
grid-column: 1 / -1;
6061
grid-row: 1 / 2;
6162
}
@@ -98,50 +99,68 @@ $inline-inset: rem(16px);
9899
}
99100
}
100101

101-
@keyframes blink {
102-
0%, 100% {
103-
transform: scale(0.9);
104-
}
105-
106-
25%, 75% {
107-
transform: scale(1.05);
108-
}
109-
110-
50% {
111-
transform: scale(1.1);
112-
}
113-
}
114-
115102
[part='title'] {
116-
@include type-style('h6') {
117-
margin: 0;
118-
};
103+
@include type-style('h6') {
104+
margin: 0;
105+
};
119106
}
120107

121108
[part='actions'] {
122-
display: flex;
123-
margin-inline-start: auto;
124-
gap: rem(16px);
109+
display: flex;
110+
margin-inline-start: auto;
111+
gap: rem(16px);
125112
}
126113

127114
[part='prefix'] {
128-
display: block;
129-
margin-inline-end: rem(32px);
115+
display: block;
116+
margin-inline-end: rem(32px);
130117
}
131118

132119
igc-list {
133-
--ig-size: 3;
120+
--ig-size: 3;
134121

135-
padding-block-end: rem(24px);
136-
min-height: fit-content;
137-
width: fit-content;
138-
max-width: rem(576px);
122+
padding-block-end: rem(24px);
123+
min-height: fit-content;
124+
width: fit-content;
125+
max-width: rem(576px);
139126
}
140127

141128
igc-list-item {
142-
cursor: pointer;
129+
cursor: pointer;
130+
}
131+
132+
igc-list,
133+
igc-list-item:not(:hover),
134+
igc-list-header {
135+
background: initial;
143136
}
144137

145138
igc-list-item::part(title) {
146-
@include line-clamp(2, true, true);
139+
@include line-clamp(2, true, true);
140+
}
141+
142+
@container (max-width: 400px) {
143+
[part='message-list'],
144+
[part='empty-state'],
145+
[part='suggestions-container'] {
146+
padding-inline: rem(16px);
147+
}
148+
149+
[part='message-list'] {
150+
padding-block: rem(12px);
151+
}
152+
}
153+
154+
@keyframes blink {
155+
0%, 100% {
156+
transform: scale(0.9);
157+
}
158+
159+
25%, 75% {
160+
transform: scale(1.05);
161+
}
162+
163+
50% {
164+
transform: scale(1.1);
165+
}
147166
}

‎src/components/chat/themes/input.base.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
display: flex;
1515
flex-direction: column;
1616
width: 100%;
17-
margin-inline: rem(16px);
17+
margin-inline: rem(24px);
1818
border-radius: rem(4px);
1919
padding: rem(16px);
2020
gap: rem(12px);
@@ -67,3 +67,9 @@ igc-textarea::part(input) {
6767
igc-icon-button {
6868
--ig-size: 2;
6969
}
70+
71+
@container (max-width: 400px) {
72+
[part~='input-container'] {
73+
margin-inline: rem(12px);
74+
}
75+
}

‎src/components/chat/themes/message-attachments.base.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@
5858
object-fit: cover;
5959
}
6060

61+
[part~='attachment-icon'] {
62+
--ig-size: 1;
63+
}
64+
6165
[part='file-attachment'] {
6266
--size: #{rem(32px)};
6367
}

‎src/components/chat/themes/shared/chat.bootstrap.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,3 @@ $theme: $bootstrap;
1111
igc-list {
1212
border: none;
1313
}
14-
15-
igc-list,
16-
igc-list-item:not(:hover),
17-
igc-list-header {
18-
background: initial;
19-
}

src/components/chat/themes/shared/message-attachments.common.scss renamed to src/components/chat/themes/shared/message-attachments/message-attachments.common.scss

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'styles/utilities' as *;
2-
@use '../light/themes' as *;
2+
@use '../../light/themes' as *;
33

44
$theme: $material;
55

@@ -15,15 +15,18 @@ $theme: $material;
1515
}
1616

1717
[part~='attachment-content'] {
18-
// background: var-get($theme, 'file-background');
19-
background: white;
18+
background: var-get($theme, 'file-background');
2019
}
2120

2221
[part='attachment-content'] {
2322
border-block-start: none;
2423
}
2524

25+
[part~='attachment-icon'] {
26+
color: var-get($theme, 'image-attachment-icon');
27+
}
28+
2629
[part="file-attachment"] {
27-
--color: var(--ig-gray-500);
28-
--accent-color: var(--ig-secondary-500);
30+
--color: #{var-get($theme, 'file-icon-color')};
31+
--accent-color: #{var-get($theme, 'file-icon-accent-color')};
2932
}

‎src/components/chat/themes/shared/message-attachments/message-attachments.indigo.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use 'styles/utilities' as *;
2+
3+
[part~='attachment-icon'] {
4+
--ig-size: 2;
5+
}

0 commit comments

Comments
 (0)