update
This commit is contained in:
413
ts_web/elements/sio-conversation-view.ts
Normal file
413
ts_web/elements/sio-conversation-view.ts
Normal file
@@ -0,0 +1,413 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
// Import design tokens
|
||||
import { colors, bdTheme } from './00colors.js';
|
||||
import { spacing, radius, shadows, transitions } from './00tokens.js';
|
||||
import { fontFamilies, typography } from './00fonts.js';
|
||||
|
||||
// Types
|
||||
export interface IMessage {
|
||||
id: string;
|
||||
text: string;
|
||||
sender: 'user' | 'support';
|
||||
time: string;
|
||||
status?: 'sending' | 'sent' | 'delivered' | 'read';
|
||||
}
|
||||
|
||||
export interface IConversationData {
|
||||
id: string;
|
||||
title: string;
|
||||
messages: IMessage[];
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sio-conversation-view': SioConversationView;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sio-conversation-view')
|
||||
export class SioConversationView extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<sio-conversation-view style="width: 600px; height: 600px;"></sio-conversation-view>
|
||||
`;
|
||||
|
||||
@property({ type: Object })
|
||||
public conversation: IConversationData | null = null;
|
||||
|
||||
@state()
|
||||
private messageText: string = '';
|
||||
|
||||
@state()
|
||||
private isTyping: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: ${bdTheme('background')};
|
||||
font-family: ${unsafeCSS(fontFamilies.sans)};
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: ${unsafeCSS(spacing[4])};
|
||||
border-bottom: 1px solid ${bdTheme('border')};
|
||||
background: ${bdTheme('card')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing[3])};
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.back-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: ${bdTheme('foreground')};
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing[2])};
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: ${unsafeCSS(spacing[4])};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing[3])};
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: ${unsafeCSS(spacing[3])};
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: ${unsafeCSS(spacing[3])};
|
||||
border-radius: ${unsafeCSS(radius.lg)};
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message.support .message-bubble {
|
||||
background: ${bdTheme('muted')};
|
||||
color: ${bdTheme('foreground')};
|
||||
border-bottom-left-radius: ${unsafeCSS(spacing[1])};
|
||||
}
|
||||
|
||||
.message.user .message-bubble {
|
||||
background: ${bdTheme('primary')};
|
||||
color: ${bdTheme('primaryForeground')};
|
||||
border-bottom-right-radius: ${unsafeCSS(spacing[1])};
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
color: ${bdTheme('mutedForeground')};
|
||||
margin-top: ${unsafeCSS(spacing[1])};
|
||||
}
|
||||
|
||||
.message.user .message-time {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing[1])};
|
||||
padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])};
|
||||
background: ${bdTheme('muted')};
|
||||
border-radius: ${unsafeCSS(radius.lg)};
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.typing-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: ${bdTheme('mutedForeground')};
|
||||
border-radius: 50%;
|
||||
animation: typing 1.4s infinite;
|
||||
}
|
||||
|
||||
.typing-dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.typing-dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
padding: ${unsafeCSS(spacing[4])};
|
||||
border-top: 1px solid ${bdTheme('border')};
|
||||
background: ${bdTheme('card')};
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing[2])};
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
min-height: 40px;
|
||||
max-height: 120px;
|
||||
padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])};
|
||||
background: ${bdTheme('background')};
|
||||
border: 1px solid ${bdTheme('border')};
|
||||
border-radius: ${unsafeCSS(radius.md)};
|
||||
font-size: 14px;
|
||||
color: ${bdTheme('foreground')};
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: ${unsafeCSS(fontFamilies.sans)};
|
||||
line-height: 1.5;
|
||||
transition: ${unsafeCSS(transitions.all)};
|
||||
}
|
||||
|
||||
.message-input::placeholder {
|
||||
color: ${bdTheme('mutedForeground')};
|
||||
}
|
||||
|
||||
.message-input:focus {
|
||||
border-color: ${bdTheme('ring')};
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing[1])};
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing[4])};
|
||||
padding: ${unsafeCSS(spacing[8])};
|
||||
text-align: center;
|
||||
color: ${bdTheme('mutedForeground')};
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.messages-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-thumb {
|
||||
background: ${bdTheme('border')};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-thumb:hover {
|
||||
background: ${bdTheme('mutedForeground')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.conversation) {
|
||||
return html`
|
||||
<div class="empty-state">
|
||||
<sio-icon class="empty-icon" icon="message-square"></sio-icon>
|
||||
<h3>Select a conversation</h3>
|
||||
<p>Choose a conversation from the sidebar to start messaging</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="header">
|
||||
<sio-button
|
||||
class="back-button"
|
||||
type="ghost"
|
||||
size="sm"
|
||||
@click=${this.handleBack}
|
||||
>
|
||||
<sio-icon icon="arrow-left" size="16"></sio-icon>
|
||||
</sio-button>
|
||||
<h3 class="header-title">${this.conversation.title}</h3>
|
||||
<div class="header-actions">
|
||||
<sio-button type="ghost" size="sm">
|
||||
<sio-icon icon="phone" size="16"></sio-icon>
|
||||
</sio-button>
|
||||
<sio-button type="ghost" size="sm">
|
||||
<sio-icon icon="more-vertical" size="16"></sio-icon>
|
||||
</sio-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="messages-container" id="messages">
|
||||
${this.conversation.messages.map(msg => html`
|
||||
<div class="message ${msg.sender}">
|
||||
<div class="message-content">
|
||||
<div class="message-bubble">
|
||||
${msg.text}
|
||||
</div>
|
||||
<div class="message-time">${msg.time}</div>
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
|
||||
${this.isTyping ? html`
|
||||
<div class="message support">
|
||||
<div class="typing-indicator">
|
||||
<div class="typing-dot"></div>
|
||||
<div class="typing-dot"></div>
|
||||
<div class="typing-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<div class="input-wrapper">
|
||||
<textarea
|
||||
class="message-input"
|
||||
placeholder="Type a message..."
|
||||
.value=${this.messageText}
|
||||
@input=${this.handleInput}
|
||||
@keydown=${this.handleKeyDown}
|
||||
rows="1"
|
||||
></textarea>
|
||||
<div class="input-actions">
|
||||
<sio-button type="ghost" size="sm">
|
||||
<sio-icon icon="paperclip" size="16"></sio-icon>
|
||||
</sio-button>
|
||||
<sio-button
|
||||
type="primary"
|
||||
size="sm"
|
||||
?disabled=${!this.messageText.trim()}
|
||||
@click=${this.sendMessage}
|
||||
>
|
||||
<sio-icon icon="send" size="16"></sio-icon>
|
||||
</sio-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleBack() {
|
||||
this.dispatchEvent(new CustomEvent('back', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleInput(e: Event) {
|
||||
const textarea = e.target as HTMLTextAreaElement;
|
||||
this.messageText = textarea.value;
|
||||
|
||||
// Auto-resize textarea
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
|
||||
}
|
||||
|
||||
private handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
this.sendMessage();
|
||||
}
|
||||
}
|
||||
|
||||
private sendMessage() {
|
||||
if (!this.messageText.trim()) return;
|
||||
|
||||
const message: IMessage = {
|
||||
id: Date.now().toString(),
|
||||
text: this.messageText.trim(),
|
||||
sender: 'user',
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
status: 'sending'
|
||||
};
|
||||
|
||||
// Dispatch event for parent to handle
|
||||
this.dispatchEvent(new CustomEvent('send-message', {
|
||||
detail: { message },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
|
||||
// Clear input
|
||||
this.messageText = '';
|
||||
const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
|
||||
if (textarea) {
|
||||
textarea.style.height = 'auto';
|
||||
}
|
||||
|
||||
// Simulate typing indicator (remove in production)
|
||||
setTimeout(() => {
|
||||
this.isTyping = true;
|
||||
setTimeout(() => {
|
||||
this.isTyping = false;
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
public updated() {
|
||||
// Scroll to bottom when new messages arrive
|
||||
const container = this.shadowRoot?.querySelector('#messages');
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user