@social.io/catalog 1.3.0 → 2.1.0

package/dist_ts_web/elements/sio-conversation-selector.js

@@ -1,311 +1,499 @@
-import { DeesElement, property, html, customElement, 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';
-@customElement('sio-conversation-selector')
-export class SioConversationSelector extends DeesElement {
-    static demo = () => html `
-    <sio-conversation-selector style="width: 320px; height: 600px;"></sio-conversation-selector>
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, property, customElement, css, cssManager, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+import './sio-avatar.js';
+/**
+ * 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
+ */
+let SioConversationSelector = (() => {
+    let _classDecorators = [customElement('sio-conversation-selector')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _conversations_decorators;
+    let _conversations_initializers = [];
+    let _conversations_extraInitializers = [];
+    let _selectedConversationId_decorators;
+    let _selectedConversationId_initializers = [];
+    let _selectedConversationId_extraInitializers = [];
+    let _greeting_decorators;
+    let _greeting_initializers = [];
+    let _greeting_extraInitializers = [];
+    let _tagline_decorators;
+    let _tagline_initializers = [];
+    let _tagline_extraInitializers = [];
+    let _replyNote_decorators;
+    let _replyNote_initializers = [];
+    let _replyNote_extraInitializers = [];
+    let _team_decorators;
+    let _team_initializers = [];
+    let _team_extraInitializers = [];
+    let _faqs_decorators;
+    let _faqs_initializers = [];
+    let _faqs_extraInitializers = [];
+    var SioConversationSelector = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _conversations_decorators = [property({ type: Array })];
+            _selectedConversationId_decorators = [property({ type: String })];
+            _greeting_decorators = [property({ type: String })];
+            _tagline_decorators = [property({ type: String })];
+            _replyNote_decorators = [property({ type: String })];
+            _team_decorators = [property({ type: Array })];
+            _faqs_decorators = [property({ type: Array })];
+            __esDecorate(this, null, _conversations_decorators, { kind: "accessor", name: "conversations", static: false, private: false, access: { has: obj => "conversations" in obj, get: obj => obj.conversations, set: (obj, value) => { obj.conversations = value; } }, metadata: _metadata }, _conversations_initializers, _conversations_extraInitializers);
+            __esDecorate(this, null, _selectedConversationId_decorators, { kind: "accessor", name: "selectedConversationId", static: false, private: false, access: { has: obj => "selectedConversationId" in obj, get: obj => obj.selectedConversationId, set: (obj, value) => { obj.selectedConversationId = value; } }, metadata: _metadata }, _selectedConversationId_initializers, _selectedConversationId_extraInitializers);
+            __esDecorate(this, null, _greeting_decorators, { kind: "accessor", name: "greeting", static: false, private: false, access: { has: obj => "greeting" in obj, get: obj => obj.greeting, set: (obj, value) => { obj.greeting = value; } }, metadata: _metadata }, _greeting_initializers, _greeting_extraInitializers);
+            __esDecorate(this, null, _tagline_decorators, { kind: "accessor", name: "tagline", static: false, private: false, access: { has: obj => "tagline" in obj, get: obj => obj.tagline, set: (obj, value) => { obj.tagline = value; } }, metadata: _metadata }, _tagline_initializers, _tagline_extraInitializers);
+            __esDecorate(this, null, _replyNote_decorators, { kind: "accessor", name: "replyNote", static: false, private: false, access: { has: obj => "replyNote" in obj, get: obj => obj.replyNote, set: (obj, value) => { obj.replyNote = value; } }, metadata: _metadata }, _replyNote_initializers, _replyNote_extraInitializers);
+            __esDecorate(this, null, _team_decorators, { kind: "accessor", name: "team", static: false, private: false, access: { has: obj => "team" in obj, get: obj => obj.team, set: (obj, value) => { obj.team = value; } }, metadata: _metadata }, _team_initializers, _team_extraInitializers);
+            __esDecorate(this, null, _faqs_decorators, { kind: "accessor", name: "faqs", static: false, private: false, access: { has: obj => "faqs" in obj, get: obj => obj.faqs, set: (obj, value) => { obj.faqs = value; } }, metadata: _metadata }, _faqs_initializers, _faqs_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioConversationSelector = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <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',
+            },
+        ]}
+      ></sio-conversation-selector>
+    </div>
   `;
-    @property({ type: Array })
-    accessor conversations = [];
-    @property({ type: String })
-    accessor selectedConversationId = null;
-    @state()
-    accessor searchQuery = '';
-    static styles = [
-        cssManager.defaultStyles,
-        css `
+        #conversations_accessor_storage = __runInitializers(this, _conversations_initializers, []);
+        get conversations() { return this.#conversations_accessor_storage; }
+        set conversations(value) { this.#conversations_accessor_storage = value; }
+        #selectedConversationId_accessor_storage = (__runInitializers(this, _conversations_extraInitializers), __runInitializers(this, _selectedConversationId_initializers, null));
+        get selectedConversationId() { return this.#selectedConversationId_accessor_storage; }
+        set selectedConversationId(value) { this.#selectedConversationId_accessor_storage = value; }
+        #greeting_accessor_storage = (__runInitializers(this, _selectedConversationId_extraInitializers), __runInitializers(this, _greeting_initializers, 'Hi there 👋'));
+        /** greeting headline, first line */
+        get greeting() { return this.#greeting_accessor_storage; }
+        set greeting(value) { this.#greeting_accessor_storage = value; }
+        #tagline_accessor_storage = (__runInitializers(this, _greeting_extraInitializers), __runInitializers(this, _tagline_initializers, 'How can we help?'));
+        /** greeting headline, second line */
+        get tagline() { return this.#tagline_accessor_storage; }
+        set tagline(value) { this.#tagline_accessor_storage = value; }
+        #replyNote_accessor_storage = (__runInitializers(this, _tagline_extraInitializers), __runInitializers(this, _replyNote_initializers, 'We typically reply in a few minutes'));
+        /** presence line next to the green dot */
+        get replyNote() { return this.#replyNote_accessor_storage; }
+        set replyNote(value) { this.#replyNote_accessor_storage = value; }
+        #team_accessor_storage = (__runInitializers(this, _replyNote_extraInitializers), __runInitializers(this, _team_initializers, [
+            { initials: 'LP', tint: '#FF2D55' },
+            { initials: 'MV', tint: '#0A84FF' },
+            { initials: 'PS', tint: '#30D158' },
+        ]));
+        /** team members for the overlapping avatar stack in the header */
+        get team() { return this.#team_accessor_storage; }
+        set team(value) { this.#team_accessor_storage = value; }
+        #faqs_accessor_storage = (__runInitializers(this, _team_extraInitializers), __runInitializers(this, _faqs_initializers, [
+            'Where is my order?',
+            'How do refunds work?',
+            'Talk to a human',
+        ]));
+        /** FAQ quick answers */
+        get faqs() { return this.#faqs_accessor_storage; }
+        set faqs(value) { this.#faqs_accessor_storage = value; }
+        static styles = [
+            ...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;
+      }
+
+      .cta .chevron {
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      /* 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;
       }
 
-      /* Scrollbar styling */
-      .conversation-list::-webkit-scrollbar {
-        width: 6px;
+      .faqRow + .faqRow {
+        border-top: var(--sio-hairline) solid var(--sio-separator);
       }
 
-      .conversation-list::-webkit-scrollbar-track {
-        background: transparent;
+      .faqRow:hover {
+        background: color-mix(in oklab, var(--sio-label) 4%, transparent);
       }
 
-      .conversation-list::-webkit-scrollbar-thumb {
-        background: ${bdTheme('border')};
-        border-radius: 3px;
+      .faqRow .question {
+        flex: 1;
       }
 
-      .conversation-list::-webkit-scrollbar-thumb:hover {
-        background: ${bdTheme('mutedForeground')};
+      .faqRow sio-icon {
+        color: var(--sio-label-3);
       }
     `,
-    ];
-    render() {
-        const filteredConversations = this.conversations.filter(conv => conv.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
-            conv.lastMessage.toLowerCase().includes(this.searchQuery.toLowerCase()));
-        return html `
+            // phablet full-screen: surface the close chevron
+            cssManager.cssForPhablet(css `
+      .closeButton {
+        display: flex;
+      }
+    `),
+        ];
+        render() {
+            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) => this.searchQuery = e.target.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>
     `;
-    }
-    selectConversation(conversation) {
-        this.selectedConversationId = conversation.id;
-        // Dispatch event for parent components
-        this.dispatchEvent(new CustomEvent('conversation-selected', {
-            detail: { conversation },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    startNewConversation() {
-        // Dispatch event for parent components to handle new conversation creation
-        this.dispatchEvent(new CustomEvent('new-conversation', {
-            bubbles: true,
-            composed: true
-        }));
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWNvbnZlcnNhdGlvbi1zZWxlY3Rvci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tY29udmVyc2F0aW9uLXNlbGVjdG9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsUUFBUSxFQUNSLElBQUksRUFDSixhQUFhLEVBRWIsVUFBVSxFQUNWLEdBQUcsRUFDSCxTQUFTLEVBQ1QsS0FBSyxHQUNOLE1BQU0sNkJBQTZCLENBQUM7QUFFckMsdUJBQXVCO0FBQ3ZCLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEUsT0FBTyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFrQnhELENBQUMsYUFBYSxDQUFDLDJCQUEyQixDQUFDO0FBQzNDLE1BQU0sT0FBTyx1QkFBd0IsU0FBUSxXQUFXO0lBQy9DLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOztHQUU5QixDQUFDO0lBRUYsQ0FBQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUM7SUFDbkIsUUFBUSxDQUFDLGFBQWEsR0FBb0IsRUFBRSxDQUFDO0lBRXBELENBQUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO0lBQ3BCLFFBQVEsQ0FBQyxzQkFBc0IsR0FBa0IsSUFBSSxDQUFDO0lBRTdELENBQUMsS0FBSyxFQUFFO0lBQ0EsUUFBUSxDQUFDLFdBQVcsR0FBVyxFQUFFLENBQUM7SUFFbkMsTUFBTSxDQUFDLE1BQU0sR0FBRztRQUNyQixVQUFVLENBQUMsYUFBYTtRQUN4QixHQUFHLENBQUE7Ozs7O3NCQUtlLE9BQU8sQ0FBQyxN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
+        }
+        deriveInitials(title) {
+            return title
+                .split(/[\s·]+/)
+                .filter((part) => part.length > 0)
+                .slice(0, 2)
+                .map((part) => part[0].toUpperCase())
+                .join('');
+        }
+        selectConversation(conversation) {
+            this.selectedConversationId = conversation.id;
+            this.dispatchEvent(new CustomEvent('conversation-selected', {
+                detail: { conversation },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        startNewConversation = (__runInitializers(this, _faqs_extraInitializers), () => {
+            this.dispatchEvent(new CustomEvent('new-conversation', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        selectFaq(question) {
+            this.dispatchEvent(new CustomEvent('faq-selected', {
+                detail: { question },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        handleClose = () => {
+            this.dispatchEvent(new CustomEvent('close', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioConversationSelector = _classThis;
+})();
+export { SioConversationSelector };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWNvbnZlcnNhdGlvbi1zZWxlY3Rvci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tY29udmVyc2F0aW9uLXNlbGVjdG9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsRUFDSCxVQUFVLEdBRVgsTUFBTSw2QkFBNkIsQ0FBQztBQUVyQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDL0MsT0FBTyxlQUFlLENBQUM7QUFDdkIsT0FBTyxpQkFBaUIsQ0FBQztBQStCekI7Ozs7Ozs7Ozs7Ozs7O0dBY0c7SUFFVSx1QkFBdUI7NEJBRG5DLGFBQWEsQ0FBQywyQkFBMkIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3VDQUFuQixTQUFRLFdBQVc7Ozs7eUNBb0JyRCxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUM7a0RBR3pCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FJMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO21DQUkxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7cUNBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FJMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO2dDQVF6QixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUM7WUExQjFCLDRMQUFnQixhQUFhLDZCQUFiLGFBQWEscUdBQXVCO1lBR3BELHVOQUFnQixzQkFBc0IsNkJBQXRCLHNCQUFzQix1SEFBdUI7WUFJ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