Method renderThanksStep

chat/components/ThanksPanel.js:271–434

()

    }

    renderThanksStep() {
        const hasError = !!this.redeemError;
        const hasInfo = !!this.redeemInfo;
        const inputKind = this.getInputKind(this.accessInput);
        const submitButton = this.getSubmitButtonConfig(inputKind);
        const hintText = this.isRedeeming && this.redeemProgress?.message
            ? this.redeemProgress.message
            : this.getInputHint(inputKind);
        const submitToneClass = inputKind === 'inviteCode'
            ? 'invite-submit-redeem'
            : 'invite-submit-email';
        const isSubmitDisabled = this.isRedeeming || !this.accessInput.trim();
        const feedbackText = hasError ? this.redeemError : this.redeemInfo;
        const feedbackClass = hasError ? 'text-red-500' : 'text-emerald-600 dark:text-emerald-400';
        const modalClass = this.animateOnNextRender
            ? `${MODAL_CLASSES} welcome-modal-enter`
            : MODAL_CLASSES;

        return `
            <div id="welcome-theme-toggle" class="theme-toggle-container" role="radiogroup" aria-label="Theme selection" data-theme="${themeManager.getPreference()}" style="position:fixed;top:12px;right:12px;z-index:9999">
                <div class="theme-toggle-indicator"></div>
                <button type="button" class="theme-toggle-btn" data-theme-option="light" aria-checked="${themeManager.getPreference() === 'light'}" title="Light">
                    <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1.5m0 15V21m9-9h-1.5M4.5 12H3m15.364-6.364-1.06 1.06M6.697 17.303l-1.06 1.06m0-12.728 1.06 1.06m9.607 9.607 1.06 1.06M12 8.25a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5z"></path>
                    </svg>
                </button>
                <button type="button" class="theme-toggle-btn" data-theme-option="dark" aria-checked="${themeManager.getPreference() === 'dark'}" title="Dark">
                    <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 12.79A9 9 0 0 1 11.21 3 7.5 7.5 0 1 0 21 12.79z"></path>
                    </svg>
                </button>
                <button type="button" class="theme-toggle-btn" data-theme-option="system" aria-checked="${themeManager.getPreference() === 'system'}" title="System">
                    <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 17v2h6v-2m2 0h.75A2.25 2.25 0 0 0 20 14.75V7.25A2.25 2.25 0 0 0 17.75 5H6.25A2.25 2.25 0 0 0 4 7.25v7.5A2.25 2.25 0 0 0 6.25 17H7.5"></path>
                    </svg>
                </button>
            </div>

            <div role="dialog" aria-modal="true" class="${modalClass}" style="padding:28px 28px 20px">
                <style>
                    @keyframes welcomeModalIn {
                        from { opacity: 0; transform: scale(0.97) translateY(6px); }
                        to { opacity: 1; transform: scale(1) translateY(0); }
                    }
                    .welcome-modal-enter {
                        animation: welcomeModalIn 0.2s ease-out;
                    }
                    .welcome-modal-glass {
                        background: hsl(var(--color-background) / 0.72);
                        backdrop-filter: blur(20px) saturate(1.2);
                        -webkit-backdrop-filter: blur(20px) saturate(1.2);
                    }
                    #welcome-panel {
                        background: rgba(0,0,0,0.35) !important;
                        backdrop-filter: blur(4px) !important;
                        -webkit-backdrop-filter: blur(4px) !important;
                    }
                    .invite-input-wrapper {