@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/sio-conversation-view.ts

@@ -1,23 +1,18 @@
 import {
   DeesElement,
-  property,
   html,
+  property,
+  state,
   customElement,
-  type TemplateResult,
-  cssManager,
   css,
-  unsafeCSS,
-  state,
+  type TemplateResult,
 } 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';
+import { sioElementStyles, sioToolbarGlass } from './tokens.js';
 import { SioDropdownMenu, type IDropdownMenuItem } from './sio-dropdown-menu.js';
 import { SioMessageInput } from './sio-message-input.js';
-
-// Make sure components are loaded
+import './sio-icon.js';
+import './sio-avatar.js';
 SioDropdownMenu;
 SioMessageInput;
 
@@ -44,6 +39,12 @@ export interface IConversationData {
   id: string;
   title: string;
   messages: IMessage[];
+  /** agent initials for the header + bubble avatars (falls back to title initials) */
+  agentInitials?: string;
+  /** agent accent color (data-driven) */
+  agentTint?: string;
+  /** centered date stamp above the thread, e.g. "Today, 14:02" */
+  dateStamp?: string;
 }
 
 declare global {
@@ -52,245 +53,359 @@ declare global {
   }
 }
 
+const demoConversation: IConversationData = {
+  id: 'orbit-launch',
+  title: 'Lena · Orbit',
+  agentInitials: 'LP',
+  agentTint: '#FF2D55',
+  dateStamp: 'Today, 14:02',
+  messages: [
+    {
+      id: '1',
+      text: 'Hey! 👋 You wrote about the launch banner — what would you like to change?',
+      sender: 'support',
+      time: '14:02',
+    },
+    {
+      id: '2',
+      text: 'The headline is cut off on tablet. Can we shorten it before Thursday?',
+      sender: 'user',
+      time: '14:03',
+    },
+    {
+      id: '3',
+      text: "Good catch. We can ship the short variant today — I'll send a preview here in ~10 min.",
+      sender: 'support',
+      time: '14:04',
+    },
+    { id: '4', text: 'Perfect, thanks!', sender: 'user', time: '14:04' },
+  ],
+};
+
+/**
+ * sio-conversation-view — the widget's conversation state
+ * (v7 SocialIOWidget.jsx SIOWidgetChat).
+ *
+ * Glass header (back chevron in tint, 30px agent avatar, name 14/600,
+ * status line green "Online now" / orange "Away · replies by email",
+ * overflow dots), centered 11px date stamp, bubbles at max-width 76%
+ * (mine: solid tint right; theirs: grouped fill left with 24px avatar),
+ * typing indicator, the orange mail-fallback notice when away, and the
+ * composer via sio-message-input (email capture while away).
+ *
+ * Events (bubbles, composed):
+ *   back                                   — back chevron
+ *   send-message      { message }          — user sent a message
+ *   email-submitted   { email }            — away email capture
+ *   open-image / open-file { attachment }  — attachment click
+ *   conversation-action { action, conversationId } — overflow menu
+ */
 @customElement('sio-conversation-view')
 export class SioConversationView extends DeesElement {
   public static demo = () => html`
-    <sio-conversation-view style="width: 600px; height: 600px;"></sio-conversation-view>
+    <div style="display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;">
+      <div
+        style="width: 380px; height: 620px; border-radius: 20px; overflow: hidden; background: var(--sio-surface); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.08);"
+      >
+        <sio-conversation-view .conversation=${demoConversation} typing></sio-conversation-view>
+      </div>
+      <div
+        style="width: 380px; height: 620px; border-radius: 20px; overflow: hidden; background: var(--sio-surface); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.08);"
+      >
+        <sio-conversation-view
+          away
+          .conversation=${{
+            ...demoConversation,
+            dateStamp: 'Today, 18:36',
+            messages: [
+              {
+                id: '1',
+                text: 'Hi — my invoice from March still shows the old VAT ID. Can you re-issue it?',
+                sender: 'user',
+                time: '18:36',
+              },
+            ],
+          } satisfies IConversationData}
+        ></sio-conversation-view>
+      </div>
+    </div>
   `;
 
   @property({ type: Object })
   public accessor conversation: IConversationData | null = null;
 
-  @state()
-  private accessor isTyping: boolean = false;
+  /** team is away — orange status, mail-fallback notice, email composer */
+  @property({ type: Boolean, reflect: true })
+  public accessor away = false;
 
-  @state()
-  private accessor isDragging: boolean = false;
+  /** show the agent typing indicator */
+  @property({ type: Boolean })
+  public accessor typing = false;
 
   @state()
-  private accessor uploadingFiles: Map<string, { file: File; progress: number }> = new Map();
+  private accessor isDragging: boolean = false;
 
   @state()
   private accessor pendingAttachments: IAttachment[] = [];
 
   private dropdownMenuItems: IDropdownMenuItem[] = [
     { id: 'mute', label: 'Mute notifications', icon: 'bell-off' },
-    { id: 'pin', label: 'Pin conversation', icon: 'pin' },
     { id: 'search', label: 'Search in chat', icon: 'search' },
     { id: 'divider1', label: '', divider: true },
     { id: 'export', label: 'Export chat', icon: 'download' },
-    { id: 'archive', label: 'Archive conversation', icon: 'archive' },
     { id: 'divider2', label: '', divider: true },
-    { id: 'clear', label: 'Clear history', icon: 'trash-2', destructive: true }
+    { id: 'clear', label: 'Clear history', icon: 'trash-2', destructive: true },
   ];
 
   public static styles = [
-    cssManager.defaultStyles,
+    ...sioElementStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
         height: 100%;
-        background: ${bdTheme('background')};
-        font-family: ${unsafeCSS(fontFamilies.sans)};
+        background: var(--sio-surface);
+        font-family: var(--sio-font-sf);
+        overflow: hidden;
       }
 
+      /* ── glass header ────────────────────────────────────────── */
       .header {
-        padding: ${unsafeCSS(spacing["4"])};
-        border-bottom: 1px solid ${bdTheme('border')};
-        background: ${bdTheme('background')};
+        ${sioToolbarGlass}
+        flex-shrink: 0;
+        padding: 12px 16px;
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["3"])};
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
-        position: sticky;
-        top: 0;
+        gap: 10px;
+        position: relative;
         z-index: 10;
-        overflow: visible;
       }
 
-      .back-button {
-        display: none;
+      .backButton {
+        border: none;
+        background: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        color: var(--sio-tint);
+        cursor: pointer;
       }
 
-      @media (max-width: 600px) {
-        .back-button {
-          display: block;
-        }
+      .backButton:hover {
+        color: var(--sio-tint-hover);
       }
 
-      .header-title {
-        font-size: 1.125rem;
-        line-height: 1.5;
-        font-weight: 600;
-        margin: 0;
-        color: ${bdTheme('foreground')};
+      .headerMain {
         flex: 1;
+        min-width: 0;
       }
 
-      .header-actions {
-        display: flex;
-        gap: ${unsafeCSS(spacing["2"])};
-        position: relative;
-        overflow: visible;
+      .headerName {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--sio-label);
+        letter-spacing: -0.2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      .messages-container {
-        flex: 1;
-        overflow-y: auto;
-        padding: ${unsafeCSS(spacing["4"])};
-        display: flex;
-        flex-direction: column;
-        gap: ${unsafeCSS(spacing["3"])};
+      .headerStatus {
+        font-size: 11.5px;
+        font-weight: 500;
+        color: var(--sio-green);
       }
 
-      .message {
+      :host([away]) .headerStatus {
+        color: var(--sio-orange);
+      }
+
+      .overflowButton {
+        border: none;
+        background: none;
+        padding: 4px;
+        margin: 0;
         display: flex;
-        align-items: flex-start;
-        gap: ${unsafeCSS(spacing["3"])};
-        max-width: 70%;
+        align-items: center;
+        color: var(--sio-label-3);
+        cursor: pointer;
       }
 
-      .message.user {
-        align-self: flex-end;
-        flex-direction: row-reverse;
+      .overflowButton:hover {
+        color: var(--sio-label-2);
       }
 
-      .message-bubble {
-        padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["3.5"])};
-        border-radius: ${unsafeCSS(radius["2xl"])};
-        font-size: 0.9375rem;
-        line-height: 1.6;
+      /* ── messages ────────────────────────────────────────────── */
+      .messages {
+        flex: 1;
+        min-height: 0;
         position: relative;
-        box-shadow: ${unsafeCSS(shadows.sm)};
-        max-width: 100%;
-        word-wrap: break-word;
+        padding: 14px 14px 6px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        overflow-y: auto;
+      }
+
+      .dateStamp {
+        text-align: center;
+        font-size: 11px;
+        color: var(--sio-label-3);
+        margin-bottom: 2px;
+        font-variant-numeric: tabular-nums;
+        flex-shrink: 0;
       }
 
-      .message.support .message-bubble {
-        background: ${bdTheme('secondary')};
-        color: ${bdTheme('secondaryForeground')};
-        border-bottom-left-radius: ${unsafeCSS(spacing["1"])};
-        border: 1px solid ${bdTheme('border')};
+      .row {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-end;
+        gap: 8px;
+        flex-shrink: 0;
       }
 
-      .message.user .message-bubble {
-        background: ${bdTheme('primary')};
-        color: ${bdTheme('primaryForeground')};
-        border-bottom-right-radius: ${unsafeCSS(spacing["1"])};
+      .row.mine {
+        justify-content: flex-end;
       }
 
-      .message-time {
-        font-size: 0.75rem;
-        line-height: 1.5;
-        color: ${bdTheme('mutedForeground')};
-        margin-top: ${unsafeCSS(spacing["1"])};
+      .bubble {
+        max-width: 76%;
+        padding: 8px 12px;
+        border-radius: 16px;
+        font-size: 13.5px;
+        line-height: 1.4;
+        letter-spacing: -0.1px;
+        background: var(--sio-surface-2);
+        color: var(--sio-label);
+        word-wrap: break-word;
       }
 
-      .message.user .message-time {
-        text-align: right;
+      .row.mine .bubble {
+        background: var(--sio-tint);
+        color: #fff; /* on-tint constant (v7 outgoing bubble) */
       }
 
-      .typing-indicator {
+      /* typing indicator bubble */
+      .typingBubble {
+        padding: 10px 13px;
+        border-radius: 16px;
+        background: var(--sio-surface-2);
         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;
+        gap: 4px;
       }
 
-      .typing-dot {
-        width: 8px;
-        height: 8px;
-        background: ${bdTheme('mutedForeground')};
-        border-radius: 50%;
-        animation: typing 1.4s infinite;
+      .typingBubble .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 3px;
+        background: var(--sio-label-3);
+        animation: typingPulse 1.2s ease-in-out infinite;
       }
 
-      .typing-dot:nth-child(2) {
-        animation-delay: 0.2s;
+      .typingBubble .dot:nth-child(1) {
+        opacity: 0.5;
       }
-
-      .typing-dot:nth-child(3) {
-        animation-delay: 0.4s;
+      .typingBubble .dot:nth-child(2) {
+        opacity: 0.7;
+        animation-delay: 0.15s;
+      }
+      .typingBubble .dot:nth-child(3) {
+        opacity: 0.9;
+        animation-delay: 0.3s;
       }
 
-      @keyframes typing {
-        0%, 60%, 100% {
-          opacity: 0.3;
-          transform: scale(0.8);
+      @keyframes typingPulse {
+        0%,
+        60%,
+        100% {
+          transform: translateY(0);
         }
         30% {
-          opacity: 1;
-          transform: scale(1);
+          transform: translateY(-2px);
         }
       }
 
-      .input-container {
-        padding: ${unsafeCSS(spacing["4"])};
-        border-top: 1px solid ${bdTheme('border')};
-        background: ${bdTheme('background')};
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
+      /* mail-fallback notice — the social.io magic moment */
+      .awayNotice {
+        flex-shrink: 0;
+        margin-top: 4px;
+        padding: 10px 12px;
+        border-radius: var(--sio-radius-md);
+        background: color-mix(in oklab, var(--sio-orange) 10%, transparent);
+        display: flex;
+        gap: 9px;
+        align-items: flex-start;
       }
 
-      .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')};
-        animation: fadeIn 500ms ease-out;
+      .awayNotice sio-icon {
+        margin-top: 1px;
+        flex-shrink: 0;
+        color: var(--sio-orange);
       }
-      
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
+
+      .awayNotice .noticeText {
+        font-size: 12px;
+        line-height: 1.45;
+        color: var(--sio-label);
       }
 
-      .empty-icon {
-        font-size: 64px;
-        opacity: 0.5;
+      .awayNotice .noticeText b {
+        font-weight: 600;
       }
 
-      /* Scrollbar styling */
-      .messages-container::-webkit-scrollbar {
-        width: 6px;
+      /* ── attachments in bubbles ──────────────────────────────── */
+      .attachments {
+        margin-top: 6px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
       }
 
-      .messages-container::-webkit-scrollbar-track {
-        background: transparent;
+      .attachmentImage {
+        max-width: 180px;
+        border-radius: var(--sio-radius-md);
+        overflow: hidden;
+        cursor: pointer;
       }
 
-      .messages-container::-webkit-scrollbar-thumb {
-        background: ${bdTheme('border')};
-        border-radius: 3px;
+      .attachmentImage img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .attachmentFile {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 7px 10px;
+        background: color-mix(in oklab, var(--sio-label) 6%, transparent);
+        border-radius: var(--sio-radius);
+        font-size: 12px;
+        cursor: pointer;
       }
 
-      .messages-container::-webkit-scrollbar-thumb:hover {
-        background: ${bdTheme('mutedForeground')};
+      .row.mine .attachmentFile {
+        background: rgba(255, 255, 255, 0.16); /* on-tint scrim */
+        color: #fff;
       }
 
-      /* File drop zone */
-      .messages-container {
-        position: relative;
+      .attachmentName {
+        font-weight: 500;
       }
-      
-      .drop-overlay {
+
+      .attachmentSize {
+        font-size: 11px;
+        opacity: 0.7;
+        font-variant-numeric: tabular-nums;
+      }
+
+      /* ── drop overlay ────────────────────────────────────────── */
+      .dropOverlay {
         position: absolute;
         inset: 0;
-        background: ${bdTheme('background')}95;
+        background: color-mix(in oklab, var(--sio-surface) 88%, transparent);
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         display: flex;
@@ -299,147 +414,110 @@ export class SioConversationView extends DeesElement {
         z-index: 100;
         pointer-events: none;
         opacity: 0;
-        transition: opacity 200ms ease;
+        transition: opacity 160ms ease;
       }
 
-      .drop-overlay.active {
+      .dropOverlay.active {
         opacity: 1;
         pointer-events: all;
       }
 
-      .drop-zone {
-        padding: ${unsafeCSS(spacing["8"])};
-        border: 2px dashed ${bdTheme('border')};
-        border-radius: ${unsafeCSS(radius.xl)};
-        background: ${bdTheme('card')};
+      .dropZone {
+        padding: 24px 28px;
+        border: 1.5px dashed var(--sio-tint);
+        border-radius: var(--sio-radius-lg);
+        background: var(--sio-tint-soft);
         text-align: center;
-        transition: ${unsafeCSS(transitions.all)};
+        color: var(--sio-tint);
       }
 
-      .drop-overlay.active .drop-zone {
-        border-color: ${bdTheme('primary')};
-        background: ${bdTheme('accent')};
-        transform: scale(1.02);
-      }
-
-      .drop-icon {
-        font-size: 48px;
-        color: ${bdTheme('primary')};
-        margin-bottom: ${unsafeCSS(spacing["4"])};
+      .dropText {
+        margin-top: 8px;
+        font-size: 13.5px;
+        font-weight: 600;
+        color: var(--sio-label);
       }
 
-      .drop-text {
-        font-size: 1.125rem;
-        font-weight: 500;
-        color: ${bdTheme('foreground')};
-        margin-bottom: ${unsafeCSS(spacing["2"])};
+      .dropHint {
+        margin-top: 2px;
+        font-size: 11.5px;
+        color: var(--sio-label-3);
       }
 
-      .drop-hint {
-        font-size: 0.875rem;
-        color: ${bdTheme('mutedForeground')};
+      /* ── composer area ───────────────────────────────────────── */
+      .composerArea {
+        flex-shrink: 0;
       }
 
-      /* File attachments */
-      .message-attachments {
-        margin-top: ${unsafeCSS(spacing["2"])};
+      .pendingAttachments {
+        padding: 8px 14px 0;
         display: flex;
-        flex-wrap: wrap;
-        gap: ${unsafeCSS(spacing["2"])};
-      }
-
-      .attachment-image {
-        max-width: 200px;
-        max-height: 200px;
-        border-radius: ${unsafeCSS(radius.lg)};
-        overflow: hidden;
-        cursor: pointer;
-        transition: ${unsafeCSS(transitions.all)};
-        box-shadow: ${unsafeCSS(shadows.sm)};
-      }
-
-      .attachment-image:hover {
-        transform: scale(1.02);
-        box-shadow: ${unsafeCSS(shadows.md)};
-      }
-
-      .attachment-image img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+        flex-direction: column;
+        gap: 6px;
       }
 
-      .attachment-file {
+      .pendingAttachment {
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["2"])};
-        padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
-        background: ${bdTheme('secondary')};
-        border: 1px solid ${bdTheme('border')};
-        border-radius: ${unsafeCSS(radius.md)};
-        font-size: 0.875rem;
-        cursor: pointer;
-        transition: ${unsafeCSS(transitions.all)};
+        gap: 8px;
+        padding: 6px 10px;
+        border-radius: var(--sio-radius);
+        background: var(--sio-surface-2);
+        color: var(--sio-label-2);
+        font-size: 12px;
       }
 
-      .attachment-file:hover {
-        background: ${bdTheme('accent')};
+      .pendingAttachment .info {
+        flex: 1;
+        min-width: 0;
       }
 
-      .attachment-name {
+      .pendingAttachment .name {
         font-weight: 500;
-        color: ${bdTheme('foreground')};
-      }
-
-      .attachment-size {
-        color: ${bdTheme('mutedForeground')};
-        font-size: 0.75rem;
+        color: var(--sio-label);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      /* Pending attachments */
-      .pending-attachments {
-        padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
-        background: ${bdTheme('secondary')};
-        border: 1px solid ${bdTheme('border')};
-        border-radius: ${unsafeCSS(radius.lg)};
-        margin-bottom: ${unsafeCSS(spacing["2"])};
+      .pendingAttachment .size {
+        font-size: 11px;
+        color: var(--sio-label-3);
+        font-variant-numeric: tabular-nums;
       }
 
-      .pending-attachment {
+      .pendingAttachment .remove {
         display: flex;
-        align-items: center;
-        gap: ${unsafeCSS(spacing["2"])};
-        padding: ${unsafeCSS(spacing["1"])} 0;
-      }
-
-      .pending-attachment-info {
-        flex: 1;
-        min-width: 0;
+        padding: 2px;
+        color: var(--sio-label-3);
+        cursor: pointer;
       }
 
-      .pending-attachment-name {
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: ${bdTheme('foreground')};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+      .pendingAttachment .remove:hover {
+        color: var(--sio-red);
       }
 
-      .pending-attachment-size {
-        font-size: 0.75rem;
-        color: ${bdTheme('mutedForeground')};
+      /* ── empty state ─────────────────────────────────────────── */
+      .emptyState {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        padding: 32px;
+        text-align: center;
+        color: var(--sio-label-3);
       }
 
-      .remove-attachment {
-        padding: ${unsafeCSS(spacing["1"])};
-        cursor: pointer;
-        color: ${bdTheme('mutedForeground')};
-        transition: ${unsafeCSS(transitions.all)};
+      .emptyState .emptyTitle {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--sio-label);
       }
 
-      .remove-attachment:hover {
-        color: ${bdTheme('destructive')};
+      .emptyState .emptyText {
+        font-size: 12.5px;
       }
     `,
   ];
@@ -447,123 +525,159 @@ export class SioConversationView extends DeesElement {
   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 class="emptyState">
+          <sio-icon icon="message-circle" size="40"></sio-icon>
+          <div class="emptyTitle">No conversation selected</div>
+          <div class="emptyText">Pick a recent thread or send us a new message.</div>
         </div>
       `;
     }
 
+    const initials =
+      this.conversation.agentInitials || this.deriveInitials(this.conversation.title);
+    const tint = this.conversation.agentTint || 'var(--sio-tint)';
+    const showTyping = !this.away && this.typing;
+
     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-dropdown-menu 
-            .items=${this.dropdownMenuItems}
-            @item-selected=${this.handleDropdownAction}
-          >
-            <sio-button type="ghost" size="sm">
-              <sio-icon icon="more-vertical" size="16"></sio-icon>
-            </sio-button>
-          </sio-dropdown-menu>
+        <button class="backButton" aria-label="Back" @click=${this.handleBack}>
+          <sio-icon icon="chevron-left" size="18" .strokeWidth=${2.2}></sio-icon>
+        </button>
+        <sio-avatar initials=${initials} tint=${tint} size="30"></sio-avatar>
+        <div class="headerMain">
+          <div class="headerName">${this.conversation.title}</div>
+          <div class="headerStatus">
+            ${this.away ? 'Away · replies by email' : 'Online now'}
+          </div>
         </div>
+        <sio-dropdown-menu .items=${this.dropdownMenuItems} @item-selected=${this.handleDropdownAction}>
+          <button class="overflowButton" aria-label="Conversation actions">
+            <sio-icon icon="ellipsis" size="16"></sio-icon>
+          </button>
+        </sio-dropdown-menu>
       </div>
 
-      <div class="messages-container" id="messages"
+      <div
+        class="messages"
+        id="messages"
         @dragover=${this.handleDragOver}
+        @dragenter=${this.handleDragOver}
         @dragleave=${this.handleDragLeave}
         @drop=${this.handleDrop}
-        @dragenter=${this.handleDragOver}
       >
-        <div class="drop-overlay ${this.isDragging ? 'active' : ''}" 
+        <div
+          class="dropOverlay ${this.isDragging ? 'active' : ''}"
           @drop=${this.handleDrop}
           @dragover=${(e: DragEvent) => e.preventDefault()}
         >
-          <div class="drop-zone">
-            <sio-icon class="drop-icon" icon="upload-cloud"></sio-icon>
-            <div class="drop-text">Drop files here</div>
-            <div class="drop-hint">Images and documents up to 10MB</div>
+          <div class="dropZone">
+            <sio-icon icon="upload-cloud" size="28"></sio-icon>
+            <div class="dropText">Drop files here</div>
+            <div class="dropHint">Images and documents up to 10MB</div>
           </div>
         </div>
-        ${this.conversation.messages.map((msg, index) => html`
-          <div class="message ${msg.sender}" style="animation-delay: ${index * 50}ms">
-            <div class="message-content">
-              <div class="message-bubble">
-                ${msg.text}
-              </div>
-              ${msg.attachments && msg.attachments.length > 0 ? html`
-                <div class="message-attachments">
-                  ${msg.attachments.map(attachment => 
-                    this.isImage(attachment.type) ? html`
-                      <div class="attachment-image" @click=${() => this.openImage(attachment)}>
-                        <img src="${attachment.url}" alt="${attachment.name}" />
-                      </div>
-                    ` : attachment.type?.includes('pdf') || attachment.name?.toLowerCase().endsWith('.pdf') ? html`
-                      <div class="attachment-file" @click=${() => this.openImage(attachment)}>
-                        <sio-icon icon="file-text" size="16"></sio-icon>
-                        <div>
-                          <div class="attachment-name">${attachment.name}</div>
-                          <div class="attachment-size">${this.formatFileSize(attachment.size)}</div>
-                        </div>
-                      </div>
-                    ` : html`
-                      <div class="attachment-file" @click=${() => this.downloadFile(attachment)}>
-                        <sio-icon icon="file" size="16"></sio-icon>
-                        <div>
-                          <div class="attachment-name">${attachment.name}</div>
-                          <div class="attachment-size">${this.formatFileSize(attachment.size)}</div>
-                        </div>
+
+        ${this.conversation.dateStamp
+          ? html`<div class="dateStamp">${this.conversation.dateStamp}</div>`
+          : ''}
+        ${this.conversation.messages.map(
+          (message) => html`
+            <div class="row ${message.sender === 'user' ? 'mine' : ''}">
+              ${message.sender === 'support'
+                ? html`<sio-avatar initials=${initials} tint=${tint} size="24"></sio-avatar>`
+                : ''}
+              <div class="bubble">
+                ${message.text}
+                ${message.attachments && message.attachments.length > 0
+                  ? html`
+                      <div class="attachments">
+                        ${message.attachments.map((attachment) =>
+                          this.isImage(attachment.type)
+                            ? html`
+                                <div
+                                  class="attachmentImage"
+                                  @click=${() => this.openAttachment(attachment)}
+                                >
+                                  <img src="${attachment.url}" alt="${attachment.name}" />
+                                </div>
+                              `
+                            : html`
+                                <div
+                                  class="attachmentFile"
+                                  @click=${() =>
+                                    this.isPdf(attachment)
+                                      ? this.openAttachment(attachment)
+                                      : this.downloadFile(attachment)}
+                                >
+                                  <sio-icon
+                                    icon=${this.isPdf(attachment) ? 'file-text' : 'file'}
+                                    size="15"
+                                  ></sio-icon>
+                                  <div>
+                                    <div class="attachmentName">${attachment.name}</div>
+                                    <div class="attachmentSize">
+                                      ${this.formatFileSize(attachment.size)}
+                                    </div>
+                                  </div>
+                                </div>
+                              `,
+                        )}
                       </div>
                     `
-                  )}
-                </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>
-
-      <div class="input-container">
-        ${this.pendingAttachments.length > 0 ? html`
-          <div class="pending-attachments">
-            ${this.pendingAttachments.map(attachment => html`
-              <div class="pending-attachment">
-                <sio-icon icon="${this.getFileIcon(attachment.type)}" size="16"></sio-icon>
-                <div class="pending-attachment-info">
-                  <div class="pending-attachment-name">${attachment.name}</div>
-                  <div class="pending-attachment-size">${this.formatFileSize(attachment.size)}</div>
+          `,
+        )}
+        ${showTyping
+          ? html`
+              <div class="row">
+                <sio-avatar initials=${initials} tint=${tint} size="24"></sio-avatar>
+                <div class="typingBubble">
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                  <span class="dot"></span>
                 </div>
-                <div class="remove-attachment" @click=${() => this.removeAttachment(attachment.id)}>
-                  <sio-icon icon="x" size="16"></sio-icon>
+              </div>
+            `
+          : ''}
+        ${this.away
+          ? html`
+              <div class="awayNotice">
+                <sio-icon icon="envelope" size="14" .strokeWidth=${1.7}></sio-icon>
+                <div class="noticeText">
+                  <b>The team is away.</b> Leave your email and your message continues there —
+                  same thread, no repeats.
                 </div>
               </div>
-            `)}
-          </div>
-        ` : ''}
+            `
+          : ''}
+      </div>
+
+      <div class="composerArea">
+        ${this.pendingAttachments.length > 0
+          ? html`
+              <div class="pendingAttachments">
+                ${this.pendingAttachments.map(
+                  (attachment) => html`
+                    <div class="pendingAttachment">
+                      <sio-icon icon=${this.getFileIcon(attachment.type)} size="15"></sio-icon>
+                      <div class="info">
+                        <div class="name">${attachment.name}</div>
+                        <div class="size">${this.formatFileSize(attachment.size)}</div>
+                      </div>
+                      <span class="remove" @click=${() => this.removeAttachment(attachment.id)}>
+                        <sio-icon icon="x" size="14"></sio-icon>
+                      </span>
+                    </div>
+                  `,
+                )}
+              </div>
+            `
+          : ''}
         <sio-message-input
+          variant=${this.away ? 'email' : 'message'}
+          placeholder=${this.away ? 'you@email.com' : 'Write a message…'}
           @send-message=${this.handleMessageSend}
           @files-selected=${this.handleFilesSelected}
         ></sio-message-input>
@@ -571,62 +685,80 @@ export class SioConversationView extends DeesElement {
     `;
   }
 
-  private handleBack() {
-    this.dispatchEvent(new CustomEvent('back', {
-      bubbles: true,
-      composed: true
-    }));
+  public updated() {
+    // keep the thread pinned to the latest message
+    const container = this.shadowRoot?.querySelector('#messages');
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+    }
+  }
+
+  private deriveInitials(title: string): string {
+    return title
+      .split(/[\s·]+/)
+      .filter((part) => part.length > 0)
+      .slice(0, 2)
+      .map((part) => part[0].toUpperCase())
+      .join('');
   }
 
-  private handleMessageSend(event: CustomEvent) {
-    const { text, attachments } = event.detail;
-    
-    if (!text.trim() && attachments.length === 0) return;
+  private handleBack = () => {
+    this.dispatchEvent(
+      new CustomEvent('back', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private handleMessageSend = (event: CustomEvent<{ text: string; attachments: File[] }>) => {
+    event.stopPropagation();
+    const text = event.detail.text.trim();
+
+    if (this.away) {
+      if (!text) {
+        return;
+      }
+      this.dispatchEvent(
+        new CustomEvent('email-submitted', {
+          detail: { email: text },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+      return;
+    }
+
+    if (!text && this.pendingAttachments.length === 0) {
+      return;
+    }
 
     const message: IMessage = {
       id: Date.now().toString(),
-      text: text.trim(),
+      text,
       sender: 'user',
       time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
       status: 'sending',
-      attachments: [...this.pendingAttachments]
+      attachments: [...this.pendingAttachments],
     };
 
-    // Dispatch event for parent to handle
-    this.dispatchEvent(new CustomEvent('send-message', {
-      detail: { message },
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent('send-message', {
+        detail: { message },
+        bubbles: true,
+        composed: true,
+      }),
+    );
 
-    // Clear pending attachments
     this.pendingAttachments = [];
+  };
 
-    // Simulate typing indicator (remove in production)
-    setTimeout(() => {
-      this.isTyping = true;
-      setTimeout(() => {
-        this.isTyping = false;
-      }, 2000);
-    }, 1000);
-  }
-
-  private handleFilesSelected(event: CustomEvent) {
-    const { files } = event.detail;
-    // Handle files if needed
-    // For now, we're handling attachments separately in the parent component
-  }
-
-
-  public updated() {
-    // Scroll to bottom when new messages arrive
-    const container = this.shadowRoot?.querySelector('#messages');
-    if (container) {
-      container.scrollTop = container.scrollHeight;
-    }
-  }
+  private handleFilesSelected = (event: CustomEvent<{ files: File[] }>) => {
+    event.stopPropagation();
+    this.processFiles(event.detail.files);
+  };
 
-  // File handling methods
+  // File handling
   private handleDragOver(e: DragEvent) {
     e.preventDefault();
     e.stopPropagation();
@@ -636,11 +768,10 @@ export class SioConversationView extends DeesElement {
   private handleDragLeave(e: DragEvent) {
     e.preventDefault();
     e.stopPropagation();
-    
-    // Check if we're actually leaving the messages container
+
     const relatedTarget = e.relatedTarget as Node;
     const container = e.currentTarget as HTMLElement;
-    
+
     if (!container.contains(relatedTarget)) {
       this.isDragging = false;
     }
@@ -657,23 +788,9 @@ export class SioConversationView extends DeesElement {
     }
   }
 
-  private openFileSelector() {
-    const fileInput = this.shadowRoot?.querySelector('#fileInput') as HTMLInputElement;
-    if (fileInput) {
-      fileInput.click();
-    }
-  }
-
-  private handleFileSelect(e: Event) {
-    const input = e.target as HTMLInputElement;
-    const files = Array.from(input.files || []);
-    this.processFiles(files);
-    input.value = ''; // Clear input for re-selection
-  }
-
   private async processFiles(files: File[]) {
     const maxSize = 10 * 1024 * 1024; // 10MB
-    const validFiles = files.filter(file => {
+    const validFiles = files.filter((file) => {
       if (file.size > maxSize) {
         console.warn(`File ${file.name} exceeds 10MB limit`);
         return false;
@@ -684,14 +801,14 @@ export class SioConversationView extends DeesElement {
     for (const file of validFiles) {
       const id = `${Date.now()}-${Math.random()}`;
       const url = await this.fileToDataUrl(file);
-      
+
       const attachment: IAttachment = {
         id,
         name: file.name,
         size: file.size,
         type: file.type,
         url,
-        thumbnailUrl: this.isImage(file.type) ? url : undefined
+        thumbnailUrl: this.isImage(file.type) ? url : undefined,
       };
 
       this.pendingAttachments = [...this.pendingAttachments, attachment];
@@ -708,13 +825,19 @@ export class SioConversationView extends DeesElement {
   }
 
   private removeAttachment(id: string) {
-    this.pendingAttachments = this.pendingAttachments.filter(a => a.id !== id);
+    this.pendingAttachments = this.pendingAttachments.filter((a) => a.id !== id);
   }
 
   private isImage(type: string): boolean {
     return type.startsWith('image/');
   }
 
+  private isPdf(attachment: IAttachment): boolean {
+    return (
+      attachment.type?.includes('pdf') || attachment.name?.toLowerCase().endsWith('.pdf') || false
+    );
+  }
+
   private formatFileSize(bytes: number): string {
     if (bytes === 0) return '0 Bytes';
     const k = 1024;
@@ -731,20 +854,23 @@ export class SioConversationView extends DeesElement {
     return 'file';
   }
 
-  private openImage(attachment: IAttachment) {
-    // Check if it's actually a PDF
-    if (attachment.type?.includes('pdf') || attachment.name?.toLowerCase().endsWith('.pdf')) {
-      this.dispatchEvent(new CustomEvent('open-file', {
-        detail: { attachment },
-        bubbles: true,
-        composed: true
-      }));
+  private openAttachment(attachment: IAttachment) {
+    if (this.isPdf(attachment)) {
+      this.dispatchEvent(
+        new CustomEvent('open-file', {
+          detail: { attachment },
+          bubbles: true,
+          composed: true,
+        }),
+      );
     } else {
-      this.dispatchEvent(new CustomEvent('open-image', {
-        detail: { attachment },
-        bubbles: true,
-        composed: true
-      }));
+      this.dispatchEvent(
+        new CustomEvent('open-image', {
+          detail: { attachment },
+          bubbles: true,
+          composed: true,
+        }),
+      );
     }
   }
 
@@ -757,44 +883,34 @@ export class SioConversationView extends DeesElement {
     document.body.removeChild(a);
   }
 
-  private handleDropdownAction(event: CustomEvent) {
-    const { item } = event.detail as { item: IDropdownMenuItem };
-    
-    // Dispatch event for parent to handle these actions
-    this.dispatchEvent(new CustomEvent('conversation-action', {
-      detail: { 
-        action: item.id,
-        conversationId: this.conversation?.id 
-      },
-      bubbles: true,
-      composed: true
-    }));
-
-    // Log action for demo purposes
-    console.log('Conversation action:', item.id, item.label);
-    
-    // Handle some actions locally for demo
-    switch (item.id) {
-      case 'search':
-        // Could open a search overlay
-        console.log('Opening search...');
-        break;
-      case 'export':
-        // Export conversation as JSON/text
-        this.exportConversation();
-        break;
+  private handleDropdownAction = (event: CustomEvent<{ item: IDropdownMenuItem }>) => {
+    const { item } = event.detail;
+
+    this.dispatchEvent(
+      new CustomEvent('conversation-action', {
+        detail: {
+          action: item.id,
+          conversationId: this.conversation?.id,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    if (item.id === 'export') {
+      this.exportConversation();
     }
-  }
+  };
 
   private exportConversation() {
     if (!this.conversation) return;
-    
+
     const exportData = {
       conversation: this.conversation.title,
       exportDate: new Date().toISOString(),
-      messages: this.conversation.messages
+      messages: this.conversation.messages,
     };
-    
+
     const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -805,4 +921,4 @@ export class SioConversationView extends DeesElement {
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   }
-}
+}