OmniCard/mpuniapp/pages/portal/ai-chat.uvue

<template>
  <view class="ai-page" :class="pageRtlClass" :style="pageTheme">
    <view class="ai-sheet">
      <view class="ai-handle"></view>

      <view class="ai-top-bar">
        <view class="ai-top-identity">
          <view class="ai-avatar-wrap">
            <text class="ai-avatar-text">OC</text>
            <view class="ai-online-dot"></view>
          </view>
          <view class="ai-top-meta">
            <text class="ai-title">{{ pageTitle }}</text>
            <text class="ai-status-pill">{{ t('statusOnline') }}</text>
          </view>
        </view>
      </view>

      <text v-if="state.cardId === ''" class="ai-missing">{{ t('missingCard') }}</text>

      <list-view class="ai-list">
        <list-item v-if="state.messages.length === 0" class="ai-empty-item">
          <view class="ai-welcome-card">
            <view class="ai-welcome-header">
              <view class="ai-concierge-avatar">
                <text class="ai-concierge-icon-text">OC</text>
              </view>
              <view class="ai-welcome-meta">
                <text class="ai-welcome-title">{{ t('empty') }}</text>
                <text class="ai-welcome-sub">{{ t('advisorSubtitle') }}</text>
              </view>
            </view>
            <view class="ai-quick-grid">
              <button
                class="ai-quick-capsule"
                :disabled="state.cardId === '' || state.sending"
                @click="handleSendQuick(t('quickPricing'))"
              >
                <text class="ai-quick-text">{{ t('quickPricing') }}</text>
              </button>
              <button
                class="ai-quick-capsule"
                :disabled="state.cardId === '' || state.sending"
                @click="handleSendQuick(t('quickCases'))"
              >
                <text class="ai-quick-text">{{ t('quickCases') }}</text>
              </button>
              <button
                class="ai-quick-capsule"
                :disabled="state.cardId === '' || state.sending"
                @click="handleSendQuick(t('quickServices'))"
              >
                <text class="ai-quick-text">{{ t('quickServices') }}</text>
              </button>
            </view>
          </view>
        </list-item>

        <list-item
          v-for="(item, index) in state.messages"
          :key="index"
          class="ai-row-item"
        >
          <view
            v-if="item.type === 'lead_card' && item.cardPayload != null"
            class="ai-lead-card"
            :class="{ 'ai-lead-card-submitted': item.cardPayload!.submitted }"
          >
            <view class="ai-lead-header">
              <view class="ai-lead-badge">
                <text class="ai-lead-badge-text">LEAD</text>
              </view>
              <text class="ai-lead-card-title">{{ item.cardPayload!.title }}</text>
            </view>
            <text class="ai-lead-card-desc">{{ item.cardPayload!.description }}</text>

            <view v-if="!item.cardPayload!.submitted" class="ai-lead-card-form">
              <view class="ai-lead-field">
                <text class="ai-lead-label">{{ t('nameLabel') }}</text>
                <input
                  class="ai-lead-input"
                  v-model="item.cardPayload!.name"
                  :placeholder="t('namePlaceholder')"
                  :disabled="item.cardPayload!.submitting"
                />
              </view>
              <view class="ai-lead-field">
                <text class="ai-lead-label">{{ t('contactLabel') }}</text>
                <input
                  class="ai-lead-input"
                  v-model="item.cardPayload!.contact"
                  :placeholder="t('contactPlaceholder')"
                  :disabled="item.cardPayload!.submitting"
                />
              </view>
              <text v-if="leadCardError(item) !== ''" class="ai-lead-error">{{ leadCardError(item) }}</text>
              <button
                class="ai-lead-submit-btn"
                :class="{ 'ai-lead-submit-btn-disabled': !canSubmitCard(item.cardPayload!) || item.cardPayload!.submitting }"
                :disabled="!canSubmitCard(item.cardPayload!) || item.cardPayload!.submitting"
                @click="handleSubmitCard(item.cardPayload!)"
              >
                <text class="ai-lead-submit-btn-text">{{ cardBtnText(item.cardPayload!) }}</text>
              </button>
            </view>

            <view v-else class="ai-lead-success">
              <view class="ai-success-check">
                <text class="ai-success-check-text">OK</text>
              </view>
              <text class="ai-lead-success-text">{{ t('submittedSuccess') }}</text>
            </view>
          </view>

          <view
            v-else
            class="ai-bubble"
            :class="item.role === 'assistant' ? 'ai-bubble-assistant ai-glow' : 'ai-bubble-user'"
          >
            <view v-if="item.role === 'assistant'" class="ai-msg-avatar">
              <text class="ai-msg-avatar-text">OC</text>
            </view>
            <view class="ai-bubble-content">
              <text class="ai-bubble-text">{{ item.content }}</text>
            </view>
          </view>
        </list-item>

        <list-item v-if="state.showLeadHint" class="ai-hint-item">
          <view class="ai-hint">
            <text class="ai-hint-text">{{ state.leadHint }}</text>
          </view>
        </list-item>
      </list-view>

      <view class="ai-composer">
        <view class="ai-input-wrap">
          <input
            class="ai-input"
            v-model="state.draft"
            :placeholder="t('placeholder')"
            :aria-label="t('inputLabel')"
            :disabled="state.cardId === '' || state.sending"
            confirm-type="send"
            @confirm="handleSend"
          />
        </view>
        <button
          class="primary-cta-btn"
          :class="{ 'primary-cta-btn-disabled': !canSend }"
          :disabled="!canSend"
          :aria-label="ctaLabel"
          @click="handleSend"
        >
          <text class="primary-cta-btn-text">{{ ctaLabel }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
// OmniCard AI Portal AI Concierge Chat (use askAiChat fallback and streaming dispatch)
import { getCurrentLocale, getOmniText, isRtl } from '../../common/locale.uts';
import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../common/tokens.uts';
import {
  applyAiChatOptions,
  createAiChatState,
  resolveAiChatText,
  sendStreamChat,
  submitLeadCard,
  AiChatCopyKey,
  AiChatPageOptions,
  ChatLeadPayload,
  ChatMessage,
} from './useAiChat.uts';

const pageTheme: Record<string, string> = {
  '--oc-primary': utsLightColors.primary,
  '--oc-primary-gradient': utsLightColors.primaryGradient,
  '--oc-primary-soft': utsLightColors.primarySoft,
  '--oc-aurora': utsLightColors.aurora,
  '--oc-ai': '#7C5CFF',
  '--oc-bg': utsLightColors.bg,
  '--oc-surface': utsLightColors.surface,
  '--oc-border': utsLightColors.border,
  '--oc-text': utsLightColors.text,
  '--oc-text-2': utsLightColors.text2,
  '--oc-success': utsLightColors.success,
  '--oc-warning': utsLightColors.warning,
  '--oc-error': utsLightColors.error,
  '--oc-radius-btn': utsRadius.button,
  '--oc-radius-card': utsRadius.card,
  '--oc-radius-modal': utsRadius.modal,
  '--oc-radius-pill': utsRadius.pill,
  '--oc-shadow-card': utsTypography.shadowCard,
  '--oc-shadow-cta': utsTypography.shadowCta,
  '--oc-shadow': utsTypography.shadow,
  '--oc-space-4': utsSpacing.space4,
  '--oc-space-8': utsSpacing.space8,
  '--oc-space-12': utsSpacing.space12,
  '--oc-space-16': utsSpacing.space16,
  '--oc-space-20': utsSpacing.space20,
  '--oc-space-24': utsSpacing.space24,
};

const state = reactive(createAiChatState());
const pageTitle = ref(getOmniText(getCurrentLocale(), 'card.ai_chat'));

const pageRtlClass = computed((): string => {
  return isRtl(state.locale) ? 'ai-rtl' : '';
});

const canSend = computed((): boolean => {
  if (state.cardId === '' || state.sending) {
    return false;
  }
  return state.draft.trim() !== '';
});

const ctaLabel = computed((): string => {
  if (state.sending) {
    return resolveAiChatText('sending');
  }
  return resolveAiChatText('send');
});

function t(key: AiChatCopyKey): string {
  return resolveAiChatText(key);
}

function leadCardError(item: ChatMessage): string {
  if (item.cardPayload == null) {
    return '';
  }
  const message = item.cardPayload.errorMessage;
  return message != null ? message : '';
}

function canSubmitCard(payload: ChatLeadPayload | null): boolean {
  if (payload == null) {
    return false;
  }
  return payload.name.trim() !== '' && payload.contact.trim() !== '';
}

function cardBtnText(payload: ChatLeadPayload | null): string {
  if (payload != null && payload.submitting === true) {
    return resolveAiChatText('submitting');
  }
  return resolveAiChatText('submitLead');
}

async function handleSubmitCard(payload: ChatLeadPayload | null): Promise<void> {
  if (payload == null) {
    return;
  }
  await submitLeadCard(state.cardId, payload);
}

async function handleSend(): Promise<void> {
  await sendStreamChat(state);
}

async function handleSendQuick(prompt: string): Promise<void> {
  if (state.sending || state.cardId === '') {
    return;
  }
  await sendStreamChat(state, prompt);
}

onLoad((options: AiChatPageOptions) => {
  applyAiChatOptions(state, options);
  pageTitle.value = getOmniText(getCurrentLocale(), 'card.ai_chat');
});
</script>

<style scoped>
/* Color token backward compatibility fallbacks: #F7F8FA, #0B5CFF, #7C5CFF */
.ai-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  background-color: var(--oc-bg, #F7F8FA);
}

.ai-rtl {
  direction: rtl;
}

.ai-sheet {
  flex: 1;
  margin-block-start: var(--oc-space-16, 16px);
  background-color: var(--oc-surface, #FFFFFF);
  border: 1px solid var(--oc-border, #EBF1F7);
  border-radius: var(--oc-radius-modal, 24px) var(--oc-radius-modal, 24px) 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
  overflow: hidden;
}

.ai-handle {
  width: 40px;
  height: 4px;
  margin-block-start: var(--oc-space-8, 8px);
  margin-inline: auto;
  border-radius: var(--oc-radius-pill, 9999px);
  background-color: var(--oc-border, #EBF1F7);
}

.ai-top-bar {
  padding-inline: var(--oc-space-16, 16px);
  padding-block: var(--oc-space-12, 12px);
  border-bottom: 1px solid var(--oc-border, #EBF1F7);
  background-color: var(--oc-surface, #FFFFFF);
}

.ai-top-identity {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ai-avatar-wrap {
  width: 38px;
  height: 38px;
  border-radius: var(--oc-radius-pill, 9999px);
  background-color: var(--oc-primary-soft, #EBF5FF);
  border: 1px solid rgba(0, 136, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-inline-end: var(--oc-space-12, 12px);
}

.ai-avatar-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--oc-primary, #0B5CFF);
}

.ai-online-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: var(--oc-success, #12B76A);
  border: 2px solid #FFFFFF;
}

.ai-top-meta {
  display: flex;
  flex-direction: column;
}

.ai-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--oc-text, #101828);
  line-height: 1.25;
}

.ai-status-pill {
  font-size: 12px;
  font-weight: 500;
  color: var(--oc-text-2, #64748B);
  line-height: 1.4;
  margin-block-start: 2px;
}

.ai-missing {
  font-size: 14px;
  color: var(--oc-warning, #F79009);
  line-height: 1.6;
  padding-inline: var(--oc-space-16, 16px);
  padding-block: var(--oc-space-8, 8px);
  background-color: #FFF9F0;
  border-bottom: 1px solid #FFE7BA;
}

.ai-list {
  flex: 1;
  padding-inline: var(--oc-space-16, 16px);
  padding-block: var(--oc-space-12, 12px);
}

.ai-empty-item {
  padding-block: var(--oc-space-12, 12px);
}

.ai-welcome-card {
  background-color: var(--oc-bg, #F7F8FA);
  border: 1px solid var(--oc-border, #EBF1F7);
  border-radius: var(--oc-radius-card, 20px);
  padding: var(--oc-space-16, 16px);
  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
}

.ai-welcome-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-block-end: var(--oc-space-16, 16px);
}

.ai-concierge-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--oc-radius-pill, 9999px);
  background-color: var(--oc-surface, #FFFFFF);
  border: 1px solid rgba(0, 136, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--oc-space-12, 12px);
}

.ai-concierge-icon-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--oc-primary, #0B5CFF);
}

.ai-welcome-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ai-welcome-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--oc-text, #101828);
  line-height: 1.4;
}

.ai-welcome-sub {
  font-size: 12px;
  color: var(--oc-text-2, #64748B);
  line-height: 1.5;
  margin-block-start: 2px;
}

.ai-quick-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-quick-capsule {
  min-height: 44px;
  height: 44px;
  background-color: var(--oc-surface, #FFFFFF);
  border: 1px solid var(--oc-border, #EBF1F7);
  border-radius: var(--oc-radius-btn, 14px);
  display: flex;
  align-items: center;
  padding-inline: var(--oc-space-12, 12px);
  transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-quick-capsule:active {
  background-color: var(--oc-primary-soft, #EBF5FF);
  border-color: rgba(0, 136, 255, 0.3);
}

.ai-quick-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--oc-text, #101828);
}

.ai-row-item {
  margin-block-end: var(--oc-space-12, 12px);
}

.ai-bubble {
  border-radius: var(--oc-radius-card, 20px);
  padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px);
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 88%;
}

.ai-bubble-user {
  margin-inline-start: auto;
  background-color: var(--oc-primary, #0B5CFF);
  border-bottom-right-radius: 4px;
}

.ai-bubble-assistant {
  margin-inline-end: auto;
  background-color: var(--oc-surface, #FFFFFF);
  border: 1px solid var(--oc-border, #EBF1F7);
  border-inline-start: 3px solid var(--oc-ai, #7C5CFF);
  border-bottom-left-radius: 4px;
  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
}

.ai-msg-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--oc-radius-pill, 9999px);
  background-color: var(--oc-primary-soft, #EBF5FF);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--oc-space-8, 8px);
  flex-shrink: 0;
  margin-block-start: 2px;
}

.ai-msg-avatar-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--oc-primary, #0B5CFF);
}

.ai-bubble-content {
  flex: 1;
}

.ai-glow {
  animation: oc-ai-glow 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-bubble-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--oc-text, #101828);
}

.ai-bubble-user .ai-bubble-text {
  color: #FFFFFF;
}

.ai-lead-card {
  background-color: var(--oc-surface, #FFFFFF);
  border: 1px solid var(--oc-border, #EBF1F7);
  border-radius: var(--oc-radius-card, 20px);
  padding: var(--oc-space-16, 16px);
  margin-block: var(--oc-space-8, 8px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
  transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-lead-card-submitted {
  background-color: var(--oc-bg, #F7F8FA);
  border-color: var(--oc-border, #EBF1F7);
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--oc-success, #12B76A);
  box-shadow: none;
  padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px);
}

.ai-lead-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-block-end: var(--oc-space-8, 8px);
}

.ai-lead-badge {
  padding-inline: var(--oc-space-8, 8px);
  padding-block: 2px;
  border-radius: var(--oc-radius-pill, 9999px);
  background-color: var(--oc-primary-soft, #EBF5FF);
  margin-inline-end: var(--oc-space-8, 8px);
}

.ai-lead-badge-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--oc-primary, #0B5CFF);
}

.ai-lead-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--oc-text, #101828);
  line-height: 1.25;
}

.ai-lead-card-desc {
  font-size: 14px;
  color: var(--oc-text-2, #64748B);
  line-height: 1.6;
  margin-block-end: var(--oc-space-12, 12px);
}

.ai-lead-card-form {
  display: flex;
  flex-direction: column;
}

.ai-lead-field {
  margin-block-end: var(--oc-space-12, 12px);
  display: flex;
  flex-direction: column;
}

.ai-lead-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--oc-text-2, #64748B);
  margin-block-end: var(--oc-space-4, 4px);
}

.ai-lead-input {
  height: 44px;
  min-height: 44px;
  padding-inline: var(--oc-space-12, 12px);
  background-color: var(--oc-bg, #F7F8FA);
  border: 1px solid var(--oc-border, #EBF1F7);
  border-radius: var(--oc-radius-btn, 14px);
  font-size: 16px;
  color: var(--oc-text, #101828);
}

.ai-lead-error {
  font-size: 12px;
  color: var(--oc-error, #F04438);
  margin-block-end: var(--oc-space-8, 8px);
}

.ai-lead-submit-btn {
  height: 44px;
  min-height: 44px;
  background-color: var(--oc-surface, #FFFFFF);
  border: 1px solid var(--oc-primary, #0B5CFF);
  border-radius: var(--oc-radius-btn, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-lead-submit-btn:active {
  opacity: 0.85;
}

.ai-lead-submit-btn-disabled {
  background-color: var(--oc-bg, #F7F8FA);
  border-color: var(--oc-border, #EBF1F7);
}

.ai-lead-submit-btn-text {
  color: var(--oc-primary, #0B5CFF);
  font-size: 16px;
  font-weight: 600;
}

.ai-lead-submit-btn-disabled .ai-lead-submit-btn-text {
  color: var(--oc-text-2, #64748B);
}

.ai-lead-success {
  padding-block: var(--oc-space-12, 12px);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ai-success-check {
  width: 24px;
  height: 24px;
  border-radius: var(--oc-radius-pill, 9999px);
  background-color: rgba(18, 183, 106, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--oc-space-8, 8px);
}

.ai-success-check-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--oc-success, #12B76A);
}

.ai-lead-success-text {
  font-size: 14px;
  color: var(--oc-success, #12B76A);
  line-height: 1.6;
  font-weight: 600;
}

.ai-hint-item {
  margin-block-end: var(--oc-space-12, 12px);
}

.ai-hint {
  min-height: 44px;
  padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px);
  border-radius: var(--oc-radius-btn, 14px);
  background-color: var(--oc-primary-soft, #EBF5FF);
  display: flex;
  align-items: center;
}

.ai-hint-text {
  font-size: 14px;
  color: var(--oc-primary, #0B5CFF);
  line-height: 1.6;
}

.ai-composer {
  padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--oc-border, #EBF1F7);
  background-color: var(--oc-surface, #FFFFFF);
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}

.ai-input-wrap {
  flex: 1;
  min-width: 0;
  margin-inline-end: var(--oc-space-8, 8px);
}

.ai-input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding-inline: var(--oc-space-12, 12px);
  background-color: var(--oc-bg, #F7F8FA);
  border: 1px solid var(--oc-border, #EBF1F7);
  border-radius: var(--oc-radius-btn, 14px);
  font-size: 16px;
  color: var(--oc-text, #101828);
  box-sizing: border-box;
}

.primary-cta-btn {
  height: 48px;
  min-height: 44px;
  min-width: 72px;
  padding-inline: var(--oc-space-16, 16px);
  background-color: var(--oc-primary, #0B5CFF);
  border-radius: var(--oc-radius-btn, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-width: 0;
  box-shadow: var(--oc-shadow-cta, 0 8px 20px rgba(0, 136, 255, 0.22));
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.primary-cta-btn:active {
  opacity: 0.85;
}

.primary-cta-btn-disabled {
  background-color: var(--oc-border, #EBF1F7);
  box-shadow: none;
}

.primary-cta-btn-text {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}

.primary-cta-btn-disabled .primary-cta-btn-text {
  color: var(--oc-text-2, #64748B);
}

@keyframes oc-ai-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 136, 255, 0.25);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 136, 255, 0.15);
  }
  100% {
    box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-glow {
    animation: none;
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}
</style>