isomtrik-quickchat
Version:
isomtrik-quickchat is a lightweight, real-time chat component built with Stencil JS. It is designed to be seamlessly integrated into web applications, offering customizable and responsive chat functionalities. The module supports both CommonJS and ES modu
224 lines (208 loc) • 8.79 kB
JavaScript
import { css, html, LitElement } from 'lit';
import '../Inputbox/Input';
import { Image } from '../Image/Image';
import { Button } from '../Buttons/Buttons';
import '../AttachmentBox/AttachmentBox';
class TestFooter extends LitElement {
constructor() {
super();
(this.isAttachmentMenuVisible = false), (this.inputBorderColor = 'transparent'), (this.inputBorderWidth = '1px');
(this.inputBorderStyle = 'dashed'),
(this.inputPlaceholder = 'Type in your message here'),
(this.sendButtonIcon = 'https://flexcrew.s3.us-west-1.amazonaws.com/Group_1171280804_28e21ab22f.svg'),
(this.attachmentIcon = 'https://flexcrew.s3.us-west-1.amazonaws.com/gallery_add_4272954ac0.svg'),
(this.attachmentIconHeight = '34px'),
(this.attachmentIconWidth = '34px'),
(this.sendButtonIconHeight = '50px'),
(this.sendButtonIconWidth = '50px'),
(this.sendButtonIconRadius = '50%'),
(this.inputFontSize = '16px'),
(this.containerPadding = '10px'),
(this.inputBorderRadius = '20px'),
(this.inputContainerBorderWidth = '1px'),
(this.inputContainerBorderRadius = '10px'),
(this.inputContainerBorderStyle = 'solid'),
(this.inputPlaceholderColor = '#D4D8EB'),
(this.inputContainerPadding = '0 10px'),
(this.onSendClick = null);
}
static properties = {
bgColor: { type: String },
inputBorderColor: { type: String },
inputBorderWidth: { type: String },
inputBorderStyle: { type: String },
inputPlaceholder: { type: String },
inputBgColor: { type: String },
inputFontSize: { type: String },
inputFontColor: { type: String },
inputBorderRadius: { type: String },
attachmentIcon: { type: String },
attachmentIconColor: { type: String },
sendButtonIcon: { type: String },
sendButtonIconHeight: { type: String },
sendButtonIconWidth: { type: String },
attachmentIconHeight: { type: String },
attachmentIconWidth: { type: String },
sendButtonIconRadius: { type: String },
containerPadding: { type: String },
containerBoxShadow: { type: String },
inputContainerBorderColor: { type: String },
inputContainerBorderWidth: { type: String },
inputContainerBorderRadius: { type: String },
inputPlaceholderColor: { type: String },
inputContainerPadding: { type: String },
isAttachmentMenuVisible: { type: Boolean },
onSendClick: { type: Function },
inputValue: { type: String },
onMediaIconClick: { type: Function },
onDocumentClick: { type: Function },
onFileUploaded: { type: Function },
};
static styles = css`
.footer-container {
display: flex;
align-items: end;
gap: 10px;
position: relative;
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}
.input-container {
flex: 1;
display: flex;
align-items: end;
}
.attachment-container {
width: fit-content;
margin-right: 10px;
cursor: pointer;
}
.input-box-container {
width: 100%;
}
.send-container {
width: fit-content;
}
.focused-input {
border: none ;
outline: none ;
}
.attachment-menu {
position: absolute;
background-color: white;
border: 1px solid #d4d8eb;
bottom: 65px;
left: 12px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 10px;
}
`;
toggleAttachmentMenu() {
this.isAttachmentMenuVisible = !this.isAttachmentMenuVisible;
}
handleInputChange(event) {
this.inputValue = event.target.value;
this.dispatchEvent(
new CustomEvent('input-change', {
detail: { value: this.inputValue },
bubbles: true,
composed: true,
}),
);
}
handleMediaIconClick() {
console.log('inputclicked');
}
resetInputHeight() {
const inputElement = this.shadowRoot.querySelector('my-input');
if (inputElement) {
inputElement.resetHeight();
}
}
fileUploadHandler(event) {
this.onFileUploaded(event);
this.isAttachmentMenuVisible = !this.isAttachmentMenuVisible;
}
render() {
return html`
<div class='footer-container'
style='padding: ${this.containerPadding};
box-shadow: ${this.containerBoxShadow};
background-color:${this.bgColor || '#000'}'
>
<div class='input-container'
style='border-color: ${this.inputContainerBorderColor || 'D4D8EB'};
border-width: ${this.inputContainerBorderWidth};
border-radius: ${this.inputContainerBorderRadius};
border-style: solid;
padding: ${this.inputContainerPadding}'
background-color: ${this.inputBgColor || '#ffffff'}
>
<div class='attachment-container' @click="${this.toggleAttachmentMenu}">
<svg width="36px" height="36px" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M13 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V11" stroke=${this.attachmentIconColor || '#000'} stroke-width="1.536" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4 16L8.29289 11.7071C8.68342 11.3166 9.31658 11.3166 9.70711 11.7071L13 15M13 15L15.7929 12.2071C16.1834 11.8166 16.8166 11.8166 17.2071 12.2071L20 15M13 15L15.25 17.25" stroke=${this.attachmentIconColor || '#000'} stroke-width="1.536" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M18.5 3V5.5M18.5 8V5.5M18.5 5.5H16M18.5 5.5H21" stroke=${this.attachmentIconColor || '#000'} stroke-width="1.536" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</div>
${
this.isAttachmentMenuVisible
? html`
<div class="attachment-menu">
<attachment-box
.documentIcon=${'https://flexcrew.s3.us-west-1.amazonaws.com/document_text_svgrepo_com_1_2583e4b5fc.svg'}
.mediaIcon=${'https://flexcrew.s3.us-west-1.amazonaws.com/image_svgrepo_com_2f478c0a9b.svg'}
.mediaIconHeight=${'25px'}
.mediaIconWidth=${'25px'}
.documentIconHeight=${'25px'}
.documentIconWidth=${'25px'}
.flexDirection=${'column'}
.bgColor=${'white'}
.onMediaIconClick="${this.mediaIconHandler}"
.onDocumentIconClick="${this.onDocumentClick}"
.onFileUploaded="${this.onFileUploaded}"
@file-uploaded="${event => this.fileUploadHandler(event)}"
>
</attachment-box>
</div>
`
: ''
}
<div class='input-box-container som'>
<my-input
.value="${this.inputValue}"
.borderColor="${this.inputBorderColor || 'gray'}"
.borderWidth="${this.inputBorderWidth || '1px'}"
.borderRadius="${this.inputBorderRadius} || "10px"
.backgroundColor=${this.inputBgColor || '#ffffff'}
.fontSize="${this.inputFontSize || '14px'}"
.padding="10px"
.placeholder="${this.inputPlaceholder || 'Type your message'}"
.color=${this.inputFontColor}
.placeholderColor=${this.inputPlaceholderColor || '#000'}
@input="${this.handleInputChange}"
></my-input>
</div>
</div>
<div class='send-container' >
${
this.sendButtonIcon
? Button({
backgroundImage: this.sendButtonIcon,
width: this.sendButtonIconWidth,
height: this.sendButtonIconHeight,
borderWidth: '0px',
borderColor: 'transparent',
borderRadius: this.sendButtonIconRadius,
onClick: () => {
this.onSendClick();
this.resetInputHeight();
},
})
: ''
}
</div>
</div>
`;
}
}
customElements.define('my-test-footer', TestFooter);