Skip to content

Commit dc2f3bc

Browse files
igdmdimitrovigdmdimitrov
committed
Merge branch 'thristodorova/add-chat-component' into dmdimitrov/chat-ai-component
2 parents 594e5df + 6c27d41 commit dc2f3bc

File tree

7 files changed

+153
-142
lines changed

7 files changed

+153
-142
lines changed

‎src/components/chat/chat-header.ts‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/components/chat/chat.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { LitElement, html } from 'lit';
22
import { property } from 'lit/decorators.js';
3+
import IgcButtonComponent from '../button/button.js';
34
import { registerComponent } from '../common/definitions/register.js';
45
import type { Constructor } from '../common/mixins/constructor.js';
56
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
6-
import IgcChatHeaderComponent from './chat-header.js';
77
import IgcChatInputComponent from './chat-input.js';
88
import IgcChatMessageListComponent from './chat-message-list.js';
99
import { styles } from './themes/chat.base.css.js';
@@ -31,9 +31,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
3131
public static register() {
3232
registerComponent(
3333
IgcChatComponent,
34-
IgcChatHeaderComponent,
3534
IgcChatInputComponent,
36-
IgcChatMessageListComponent
35+
IgcChatMessageListComponent,
36+
IgcButtonComponent
3737
);
3838
}
3939

@@ -95,7 +95,15 @@ export default class IgcChatComponent extends EventEmitterMixin<
9595
protected override render() {
9696
return html`
9797
<div class="chat-container">
98-
<igc-chat-header .text=${this.headerText}></igc-chat-header>
98+
<div class="header" part="header">
99+
<div class="info">
100+
<slot name="prefix" part="prefix"></slot>
101+
<slot name="title" part="title">${this.headerText}</slot>
102+
</div>
103+
<slot name="actions" class="actions">
104+
<igc-button variant="flat">⋯</igcbutton>
105+
</slot>
106+
</div>
99107
<igc-chat-message-list
100108
.messages=${this.messages}
101109
.disableAutoScroll=${this.disableAutoScroll}

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

Lines changed: 66 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,18 @@ import { LitElement, html } from 'lit';
22
import { property } from 'lit/decorators.js';
33
import IgcIconButtonComponent from '../button/icon-button.js';
44
import { registerComponent } from '../common/definitions/register.js';
5+
import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
56
import IgcIconComponent from '../icon/icon.js';
67
import { registerIconFromText } from '../icon/icon.registry.js';
78
import { styles } from './themes/message-attachments.base.css';
8-
import { type IgcMessageAttachment, closeIcon, fileIcon } from './types.js';
9+
import {
10+
type IgcMessageAttachment,
11+
closeIcon,
12+
fileIcon,
13+
imageIcon,
14+
moreIcon,
15+
previewIcon,
16+
} from './types.js';
917

1018
/**
1119
*
@@ -23,7 +31,8 @@ export class IgcMessageAttachmentsComponent extends LitElement {
2331
registerComponent(
2432
IgcMessageAttachmentsComponent,
2533
IgcIconComponent,
26-
IgcIconButtonComponent
34+
IgcIconButtonComponent,
35+
IgcExpansionPanelComponent
2736
);
2837
}
2938
@property({ type: Array })
@@ -36,6 +45,9 @@ export class IgcMessageAttachmentsComponent extends LitElement {
3645
super();
3746
registerIconFromText('close', closeIcon, 'material');
3847
registerIconFromText('file', fileIcon, 'material');
48+
registerIconFromText('image', imageIcon, 'material');
49+
registerIconFromText('preview', previewIcon, 'material');
50+
registerIconFromText('more', moreIcon, 'material');
3951
}
4052

4153
private formatFileSize(bytes = 0): string {
@@ -52,41 +64,64 @@ export class IgcMessageAttachmentsComponent extends LitElement {
5264
this.previewImage = '';
5365
}
5466

67+
private preventToggle(e: CustomEvent) {
68+
e.preventDefault();
69+
}
70+
5571
protected override render() {
5672
return html`
5773
<div class="attachments-container">
58-
${this.attachments.map((attachment) =>
59-
attachment.type === 'image'
60-
? html`
61-
<div class="attachment-preview">
62-
<img
74+
${this.attachments.map(
75+
(attachment) => html`
76+
<igc-expansion-panel
77+
indicator-position="none"
78+
.open=${attachment.type === 'image'}
79+
@igcClosing=${this.preventToggle}
80+
@igcOpening=${this.preventToggle}
81+
>
82+
<div slot="title" class="attachment">
83+
<div class="details">
84+
${attachment.type === 'image'
85+
? html`<igc-icon
86+
name="image"
87+
collection="material"
88+
class="medium"
89+
></igc-icon>`
90+
: html`<igc-icon
91+
name="file"
92+
collection="material"
93+
class="medium"
94+
></igc-icon>`}
95+
<span class="file-name">${attachment.name}</span>
96+
</div>
97+
<div class="actions">
98+
${attachment.type === 'image'
99+
? html` <igc-icon-button
100+
name="preview"
101+
collection="material"
102+
variant="flat"
103+
class="small"
104+
@click=${() => this.openImagePreview(attachment.url)}
105+
></igc-icon-button>`
106+
: ''}
107+
<igc-icon-button
108+
name="more"
109+
collection="material"
110+
variant="flat"
111+
class="small"
112+
></igc-icon-button>
113+
</div>
114+
</div>
115+
116+
${attachment.type === 'image'
117+
? html` <img
63118
class="image-attachment"
64119
src=${attachment.url}
65120
alt=${attachment.name}
66-
@click=${() => this.openImagePreview(attachment.url)}
67-
/>
68-
</div>
69-
`
70-
: html`
71-
<a
72-
class="file-attachment"
73-
href=${attachment.url}
74-
target="_blank"
75-
download=${attachment.name}
76-
>
77-
<igc-icon
78-
name="file"
79-
collection="material"
80-
class="large"
81-
></igc-icon>
82-
<div class="file-info">
83-
<div class="file-name">${attachment.name}</div>
84-
<div class="file-size">
85-
${this.formatFileSize(attachment.size)}
86-
</div>
87-
</div>
88-
</a>
89-
`
121+
/>`
122+
: ''}
123+
</igc-expansion-panel>
124+
`
90125
)}
91126
</div>
92127

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,63 @@
1515
display: flex;
1616
flex-direction: column;
1717
height: 100%;
18+
}
19+
20+
.header {
21+
display: flex;
22+
align-items: center;
23+
justify-content: space-between;
24+
padding: 10px;
25+
}
26+
27+
.info {
28+
display: flex;
29+
align-items: center;
30+
gap: 12px;
31+
}
32+
33+
.avatar {
34+
width: 40px;
35+
height: 40px;
36+
border-radius: 50%;
37+
object-fit: cover;
38+
}
39+
40+
.avatar-container {
41+
position: relative;
42+
}
43+
44+
.status-indicator {
45+
position: absolute;
46+
bottom: 0;
47+
right: 0;
48+
width: 12px;
49+
height: 12px;
50+
border-radius: 50%;
51+
background-color: #30D158;
52+
border: 2px solid white;
53+
}
54+
55+
.actions {
56+
display: flex;
57+
gap: 16px;
58+
}
59+
60+
.action-button {
61+
background: none;
62+
border: none;
63+
color: #0A84FF;
64+
cursor: pointer;
65+
font-size: 1.2rem;
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
width: 40px;
70+
height: 40px;
71+
border-radius: 50%;
72+
transition: white 0.2s;
73+
}
74+
75+
.action-button:hover {
76+
background-color: #E5E5EA;
1877
}

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

Lines changed: 0 additions & 68 deletions
This file was deleted.

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,14 @@
9696

9797
.large {
9898
--ig-size: var(--ig-size-large);
99+
}
100+
101+
.actions {
102+
display: flex;
103+
}
104+
105+
.attachment {
106+
display: flex;
107+
justify-content: space-between;
108+
gap: 2rem;
99109
}

‎src/components/chat/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,9 @@ export const closeIcon =
2525
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
2626
export const fileIcon =
2727
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>';
28+
export const imageIcon =
29+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>';
30+
export const moreIcon =
31+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/></svg>';
32+
export const previewIcon =
33+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>';

0 commit comments

Comments
 (0)