Dhanesh1/codegenius-your-ai-code-wizard

1class CustomChatBubble extends HTMLElement {2    connectedCallback() {3        const type = this.getAttribute('type') || 'bot';4        const content = this.innerHTML.trim() || this.textContent;5        6        this.attachShadow({ mode: 'open' });7        this.shadowRoot.innerHTML = `8            <style>9                .bubble {10                    max-width: 80%;11                    padding: 0.75rem 1rem;12                    border-radius: 1.125rem;13                    margin-bottom: 0.5rem;14                    position: relative;15                    word-wrap: break-word;16                }17                18                .user {19                    align-self: flex-end;20                    background-color: #6366F1;21                    color: white;22                    border-bottom-right-radius: 0.25rem;23                }24                25                .bot {26                    align-self: flex-start;27                    background-color: white;28                    color: #374151;29                    border: 1px solid #E5E7EB;30                    border-bottom-left-radius: 0.25rem;31                }32                33                .container {34                    display: flex;35                    flex-direction: column;36                }37                38                pre {39                    background-color: #2d2d2d;40                    color: #f8f8f2;41                    padding: 1rem;42                    border-radius: 0.5rem;43                    overflow-x: auto;44                    font-family: 'Courier New', Courier, monospace;45                    margin: 0.5rem 0;46                    tab-size: 4;47                }48                49                code {50                    font-family: 'Courier New', Courier, monospace;51                }52            </style>53            <div class="container">54                <div class="bubble ${type}">55                    ${content}56                </div>57            </div>58        `;59    }60}61 62customElements.define('custom-chat-bubble', CustomChatBubble);