@social.io/catalog 1.3.0 → 2.0.0

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

@@ -1,21 +1,20 @@
 import {
   DeesElement,
-  property,
   html,
+  property,
   customElement,
-  type TemplateResult,
-  cssManager,
   css,
-  unsafeCSS,
-  state,
+  cssManager,
+  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 } from './tokens.js';
+import './sio-icon.js';
+import './sio-avatar.js';
 
 // Types
+export type TConversationStatus = 'new' | 'waiting' | 'needs-action' | 'resolved';
+
 export interface IConversation {
   id: string;
   title: string;
@@ -23,6 +22,17 @@ export interface IConversation {
   time: string;
   unread?: boolean;
   avatar?: string;
+  status?: TConversationStatus;
+  /** agent initials for the avatar circle (falls back to the title's initials) */
+  initials?: string;
+  /** agent accent color (data-driven, any CSS color) */
+  tint?: string;
+}
+
+/** team member shown in the welcome header's avatar stack */
+export interface ITeamMember {
+  initials: string;
+  tint: string;
 }
 
 declare global {
@@ -31,10 +41,40 @@ declare global {
   }
 }
 
+/**
+ * sio-conversation-selector — the widget's home / welcome state
+ * (v7 SocialIOWidget.jsx SIOWidgetHome).
+ *
+ * Gradient tint header (white text) with the 3-avatar team stack,
+ * "Hi there 👋 / How can we help?" greeting and the presence line;
+ * body cards on radius 14: recent-conversation resume rows, the solid
+ * tint "Send us a message" CTA and the FAQ list with 0.5px hairlines.
+ *
+ * Events (bubbles, composed):
+ *   conversation-selected { conversation } — resume a recent thread
+ *   new-conversation                       — CTA row click
+ *   faq-selected          { question }     — FAQ row click
+ *   close                                  — phablet close chevron
+ */
 @customElement('sio-conversation-selector')
 export class SioConversationSelector extends DeesElement {
   public static demo = () => html`
-    <sio-conversation-selector style="width: 320px; height: 600px;"></sio-conversation-selector>
+    <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-selector
+        .conversations=${[
+          {
+            id: 'orbit-launch',
+            title: 'Lena · Orbit',
+            lastMessage: 'Glad that sorted it — anything else, just write!',
+            time: '2d',
+            initials: 'LP',
+            tint: '#FF2D55',
+          } satisfies IConversation,
+        ]}
+      ></sio-conversation-selector>
+    </div>
   `;
 
   @property({ type: Array })
@@ -43,307 +83,389 @@ export class SioConversationSelector extends DeesElement {
   @property({ type: String })
   public accessor selectedConversationId: string | null = null;
 
-  @state()
-  private accessor searchQuery: string = '';
+  /** greeting headline, first line */
+  @property({ type: String })
+  public accessor greeting = 'Hi there 👋';
+
+  /** greeting headline, second line */
+  @property({ type: String })
+  public accessor tagline = 'How can we help?';
+
+  /** presence line next to the green dot */
+  @property({ type: String })
+  public accessor replyNote = 'We typically reply in a few minutes';
+
+  /** team members for the overlapping avatar stack in the header */
+  @property({ type: Array })
+  public accessor team: ITeamMember[] = [
+    { initials: 'LP', tint: '#FF2D55' },
+    { initials: 'MV', tint: '#0A84FF' },
+    { initials: 'PS', tint: '#30D158' },
+  ];
+
+  /** FAQ quick answers */
+  @property({ type: Array })
+  public accessor faqs: string[] = [
+    'Where is my order?',
+    'How do refunds work?',
+    'Talk to a human',
+  ];
 
   public static styles = [
-    cssManager.defaultStyles,
+    ...sioElementStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
         height: 100%;
-        background: ${bdTheme('card')};
-        border-right: 1px solid ${bdTheme('border')};
-        font-family: ${unsafeCSS(fontFamilies.sans)};
+        background: var(--sio-surface);
+        font-family: var(--sio-font-sf);
+        overflow: hidden;
       }
 
+      /* ── gradient header ─────────────────────────────────────── */
       .header {
-        padding: ${unsafeCSS(spacing["5"])} ${unsafeCSS(spacing["4"])};
-        border-bottom: 1px solid ${bdTheme('border')};
-        background: ${bdTheme('background')};
+        position: relative;
+        flex-shrink: 0;
+        padding: 24px 22px 20px;
+        background: linear-gradient(
+          160deg,
+          var(--sio-tint) 0%,
+          color-mix(in oklab, var(--sio-tint) 80%, black) 100%
+        );
+        color: #fff; /* on-tint constant across themes (v7 widget header) */
       }
 
-      .header-top {
+      .teamStack {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: ${unsafeCSS(spacing["4"])};
+        margin-bottom: 14px;
       }
 
-      .title {
-        font-size: 1.25rem;
-        line-height: 1.2;
-        font-weight: 600;
-        margin: 0;
-        color: ${bdTheme('foreground')};
-        letter-spacing: -0.025em;
+      .teamStack .member {
+        display: inline-flex;
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); /* white ring on gradient per v7 */
       }
 
-      .search-box {
-        position: relative;
+      .teamStack .member:not(:first-child) {
+        margin-left: -8px;
       }
 
-      .search-input {
-        width: 100%;
-        padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["10"])} ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["3"])};
-        background: ${bdTheme('background')};
-        border: 1px solid ${bdTheme('border')};
-        border-radius: ${unsafeCSS(radius.lg)};
-        font-size: 0.875rem;
-        color: ${bdTheme('foreground')};
-        outline: none;
-        transition: ${unsafeCSS(transitions.all)};
-        font-family: ${unsafeCSS(fontFamilies.sans)};
-        box-shadow: ${unsafeCSS(shadows.sm)};
+      .greeting {
+        font-size: 22px;
+        font-weight: 700;
+        letter-spacing: -0.4px;
+        line-height: 1.15;
       }
 
-      .search-input::placeholder {
-        color: ${bdTheme('mutedForeground')};
-        font-weight: 400;
+      .presence {
+        margin-top: 8px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12.5px;
+        color: rgba(255, 255, 255, 0.75); /* on-tint muted per v7 */
       }
 
-      .search-input:focus {
-        border-color: ${bdTheme('ring')};
-        box-shadow: 0 0 0 3px ${bdTheme('ring')}20;
-        background: ${bdTheme('background')};
+      .presence .dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 4px;
+        background: var(--sio-green);
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
+        flex-shrink: 0;
       }
 
-      .search-icon {
+      .closeButton {
+        display: none;
         position: absolute;
-        right: ${unsafeCSS(spacing["3"])};
-        top: 50%;
-        transform: translateY(-50%);
-        color: ${bdTheme('mutedForeground')};
+        top: 14px;
+        right: 14px;
+        width: 30px;
+        height: 30px;
+        border-radius: 15px;
+        border: none;
+        padding: 0;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.18); /* on-tint scrim per v7 */
+        color: #fff;
+        cursor: pointer;
       }
 
-      .conversation-list {
+      /* ── body cards ──────────────────────────────────────────── */
+      .body {
         flex: 1;
+        min-height: 0;
+        padding: 16px 16px 0;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
         overflow-y: auto;
-        padding: ${unsafeCSS(spacing["2"])};
       }
 
-      .conversation-item {
-        padding: ${unsafeCSS(spacing["3.5"])};
-        margin-bottom: ${unsafeCSS(spacing["1.5"])};
-        background: ${bdTheme('background')};
-        border: 1px solid transparent;
-        border-radius: ${unsafeCSS(radius.lg)};
-        cursor: pointer;
-        transition: ${unsafeCSS(transitions.all)};
-        position: relative;
+      .card {
+        flex-shrink: 0;
+        border-radius: var(--sio-radius-lg);
+        background: var(--sio-surface-2);
+        overflow: hidden;
       }
 
-      .conversation-item:hover {
-        background: ${bdTheme('accent')};
-        transform: translateX(2px);
-        box-shadow: ${unsafeCSS(shadows.sm)};
+      .recentCard {
+        padding: 12px 14px;
       }
 
-      .conversation-item.selected {
-        background: ${bdTheme('accent')};
-        border-color: ${bdTheme('border')};
-        box-shadow: ${unsafeCSS(shadows.sm)};
-      }
-      
-      .conversation-item.selected::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 3px;
-        height: 60%;
-        background: ${bdTheme('primary')};
-        border-radius: 0 3px 3px 0;
-        animation: slideIn 200ms ease-out;
-      }
-      
-      @keyframes slideIn {
-        from {
-          width: 0;
-          opacity: 0;
-        }
-        to {
-          width: 3px;
-          opacity: 1;
-        }
+      .cardLabel {
+        font-size: 11px;
+        font-weight: 700;
+        color: var(--sio-label-3);
+        text-transform: uppercase;
+        letter-spacing: 0.05px;
+        margin-bottom: 8px;
       }
 
-      .conversation-header {
+      .recentRow {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin-bottom: ${unsafeCSS(spacing["1"])};
+        gap: 10px;
+        cursor: pointer;
       }
 
-      .conversation-title {
-        font-weight: 500;
-        color: ${bdTheme('foreground')};
+      .recentRow + .recentRow {
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: var(--sio-hairline) solid var(--sio-separator);
+      }
+
+      .recentMain {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .recentTitle {
+        font-size: 13.5px;
+        font-weight: 600;
+        color: var(--sio-label);
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["2"])};
-        font-size: 0.9375rem;
-        letter-spacing: -0.01em;
+        gap: 6px;
       }
 
-      .conversation-time {
-        font-size: 0.75rem;
-        line-height: 1.5;
-        color: ${bdTheme('mutedForeground')};
-        opacity: 0.8;
+      .unreadDot {
+        width: 7px;
+        height: 7px;
+        border-radius: 4px;
+        background: var(--sio-tint);
+        flex-shrink: 0;
       }
 
-      .conversation-preview {
-        font-size: 0.8125rem;
-        line-height: 1.5;
-        color: ${bdTheme('mutedForeground')};
+      .recentPreview {
+        font-size: 12.5px;
+        color: var(--sio-label-3);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        margin-top: ${unsafeCSS(spacing["0.5"])};
       }
 
-      .unread-dot {
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        background: ${bdTheme('primary')};
-        border-radius: 50%;
-        animation: pulse 2s ease-in-out infinite;
-        box-shadow: 0 0 0 0 ${bdTheme('primary')};
-      }
-      
-      @keyframes pulse {
-        0% {
-          opacity: 1;
-          transform: scale(1);
-          box-shadow: 0 0 0 0 ${bdTheme('primary')}40;
-        }
-        50% {
-          opacity: 0.9;
-          transform: scale(1.05);
-          box-shadow: 0 0 0 4px ${bdTheme('primary')}00;
-        }
-        100% {
-          opacity: 1;
-          transform: scale(1);
-          box-shadow: 0 0 0 0 ${bdTheme('primary')}00;
-        }
+      .recentTime {
+        font-size: 11px;
+        color: var(--sio-label-3);
+        font-variant-numeric: tabular-nums;
+        flex-shrink: 0;
       }
 
-      .empty-state {
+      /* solid tint CTA row */
+      .cta {
+        flex-shrink: 0;
+        border-radius: var(--sio-radius-lg);
+        padding: 13px 14px;
+        background: var(--sio-tint);
+        color: #fff; /* on-tint constant (v7 CTA row) */
         display: flex;
-        flex-direction: column;
         align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: ${unsafeCSS(spacing["4"])};
-        text-align: center;
-        color: ${bdTheme('mutedForeground')};
-        gap: ${unsafeCSS(spacing["3"])};
+        gap: 10px;
+        cursor: pointer;
+        border: none;
+        width: 100%;
+        text-align: left;
+        font-family: inherit;
+        transition: background 120ms ease;
+      }
+
+      .cta:hover {
+        background: var(--sio-tint-hover);
       }
 
-      .empty-icon {
-        font-size: 48px;
-        opacity: 0.5;
+      .cta .ctaLabel {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: -0.1px;
       }
 
-      /* Scrollbar styling */
-      .conversation-list::-webkit-scrollbar {
-        width: 6px;
+      .cta .chevron {
+        color: rgba(255, 255, 255, 0.8);
       }
 
-      .conversation-list::-webkit-scrollbar-track {
-        background: transparent;
+      /* FAQ list card */
+      .faqRow {
+        padding: 11px 14px;
+        font-size: 13.5px;
+        color: var(--sio-label);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        transition: background 120ms ease;
       }
 
-      .conversation-list::-webkit-scrollbar-thumb {
-        background: ${bdTheme('border')};
-        border-radius: 3px;
+      .faqRow + .faqRow {
+        border-top: var(--sio-hairline) solid var(--sio-separator);
       }
 
-      .conversation-list::-webkit-scrollbar-thumb:hover {
-        background: ${bdTheme('mutedForeground')};
+      .faqRow:hover {
+        background: color-mix(in oklab, var(--sio-label) 4%, transparent);
+      }
+
+      .faqRow .question {
+        flex: 1;
+      }
+
+      .faqRow sio-icon {
+        color: var(--sio-label-3);
       }
     `,
+    // phablet full-screen: surface the close chevron
+    cssManager.cssForPhablet(css`
+      .closeButton {
+        display: flex;
+      }
+    `),
   ];
 
   public render(): TemplateResult {
-    const filteredConversations = this.conversations.filter(conv =>
-      conv.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
-      conv.lastMessage.toLowerCase().includes(this.searchQuery.toLowerCase())
-    );
-
     return html`
       <div class="header">
-        <div class="header-top">
-          <h2 class="title">Messages</h2>
-          <sio-button 
-            type="primary" 
-            size="sm"
-            @click=${() => this.startNewConversation()}
-          >
-            <sio-icon icon="plus" size="16"></sio-icon>
-            New
-          </sio-button>
+        <button class="closeButton" aria-label="Close messenger" @click=${this.handleClose}>
+          <sio-icon icon="chevron-down" size="18" .strokeWidth=${2.4}></sio-icon>
+        </button>
+        <div class="teamStack">
+          ${this.team.map(
+            (member) => html`
+              <span class="member">
+                <sio-avatar
+                  initials=${member.initials}
+                  tint=${member.tint}
+                  size="32"
+                ></sio-avatar>
+              </span>
+            `,
+          )}
         </div>
-        <div class="search-box">
-          <input
-            type="text"
-            class="search-input"
-            placeholder="Search conversations..."
-            .value=${this.searchQuery}
-            @input=${(e: Event) => this.searchQuery = (e.target as HTMLInputElement).value}
-          />
-          <sio-icon class="search-icon" icon="search" size="16"></sio-icon>
+        <div class="greeting">${this.greeting}<br />${this.tagline}</div>
+        <div class="presence">
+          <span class="dot"></span>
+          ${this.replyNote}
         </div>
       </div>
-      
-      ${filteredConversations.length > 0 ? html`
-        <div class="conversation-list">
-          ${filteredConversations.map(conv => html`
-            <div
-              class="conversation-item ${this.selectedConversationId === conv.id ? 'selected' : ''}"
-              @click=${() => this.selectConversation(conv)}
-            >
-              <div class="conversation-header">
-                <span class="conversation-title">
-                  ${conv.title}
-                  ${conv.unread ? html`<span class="unread-dot"></span>` : ''}
-                </span>
-                <span class="conversation-time">${conv.time}</span>
+
+      <div class="body">
+        ${this.conversations.length > 0
+          ? html`
+              <div class="card recentCard">
+                <div class="cardLabel">Recent</div>
+                ${this.conversations.map(
+                  (conversation) => html`
+                    <div class="recentRow" @click=${() => this.selectConversation(conversation)}>
+                      <sio-avatar
+                        initials=${conversation.initials || this.deriveInitials(conversation.title)}
+                        tint=${conversation.tint || 'var(--sio-tint)'}
+                        size="30"
+                      ></sio-avatar>
+                      <div class="recentMain">
+                        <div class="recentTitle">
+                          ${conversation.title}
+                          ${conversation.unread ? html`<span class="unreadDot"></span>` : ''}
+                        </div>
+                        <div class="recentPreview">${conversation.lastMessage}</div>
+                      </div>
+                      <span class="recentTime">${conversation.time}</span>
+                    </div>
+                  `,
+                )}
               </div>
-              <div class="conversation-preview">${conv.lastMessage}</div>
-            </div>
-          `)}
-        </div>
-      ` : html`
-        <div class="empty-state">
-          <sio-icon class="empty-icon" icon="message-square"></sio-icon>
-          <h3>${this.searchQuery ? 'No matching conversations' : 'No conversations yet'}</h3>
-          <p>${this.searchQuery ? 'Try a different search term' : 'Start a new conversation to get started'}</p>
-        </div>
-      `}
+            `
+          : ''}
+
+        <button class="cta" @click=${this.startNewConversation}>
+          <sio-icon icon="pencil" size="16" .strokeWidth=${1.8}></sio-icon>
+          <span class="ctaLabel">Send us a message</span>
+          <sio-icon class="chevron" icon="chevron-right" size="13" .strokeWidth=${2}></sio-icon>
+        </button>
+
+        ${this.faqs.length > 0
+          ? html`
+              <div class="card">
+                ${this.faqs.map(
+                  (question) => html`
+                    <div class="faqRow" @click=${() => this.selectFaq(question)}>
+                      <span class="question">${question}</span>
+                      <sio-icon icon="chevron-right" size="12" .strokeWidth=${2}></sio-icon>
+                    </div>
+                  `,
+                )}
+              </div>
+            `
+          : ''}
+      </div>
     `;
   }
 
+  private deriveInitials(title: string): string {
+    return title
+      .split(/[\s·]+/)
+      .filter((part) => part.length > 0)
+      .slice(0, 2)
+      .map((part) => part[0].toUpperCase())
+      .join('');
+  }
+
   private selectConversation(conversation: IConversation) {
     this.selectedConversationId = conversation.id;
-    
-    // Dispatch event for parent components
-    this.dispatchEvent(new CustomEvent('conversation-selected', {
-      detail: { conversation },
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent('conversation-selected', {
+        detail: { conversation },
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
 
-  private startNewConversation() {
-    // Dispatch event for parent components to handle new conversation creation
-    this.dispatchEvent(new CustomEvent('new-conversation', {
-      bubbles: true,
-      composed: true
-    }));
+  private startNewConversation = () => {
+    this.dispatchEvent(
+      new CustomEvent('new-conversation', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private selectFaq(question: string) {
+    this.dispatchEvent(
+      new CustomEvent('faq-selected', {
+        detail: { question },
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
-}
+
+  private handleClose = () => {
+    this.dispatchEvent(
+      new CustomEvent('close', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+}