484 行
12 KiB
Plaintext
484 行
12 KiB
Plaintext
<template>
|
|
<view class="ai-page" :style="pageTheme">
|
|
<view class="ai-sheet">
|
|
<view class="ai-handle"></view>
|
|
<text class="ai-title">{{ pageTitle }}</text>
|
|
<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-empty">
|
|
<text class="ai-empty-text">{{ t('empty') }}</text>
|
|
</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 }"
|
|
>
|
|
<text class="ai-lead-card-title">{{ item.cardPayload.title }}</text>
|
|
<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="item.cardPayload.errorMessage" class="ai-lead-error">{{ item.cardPayload.errorMessage }}</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">
|
|
<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'"
|
|
>
|
|
<text class="ai-bubble-text">{{ item.content }}</text>
|
|
</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">
|
|
<text class="ai-input-label">{{ t('inputLabel') }}</text>
|
|
<input
|
|
class="ai-input"
|
|
v-model="state.draft"
|
|
:placeholder="t('placeholder')"
|
|
:disabled="state.cardId === '' || state.sending"
|
|
confirm-type="send"
|
|
@confirm="handleSend"
|
|
/>
|
|
<button
|
|
class="primary-cta-btn"
|
|
:class="{ 'primary-cta-btn-disabled': !canSend }"
|
|
:disabled="!canSend"
|
|
@click="handleSend"
|
|
>
|
|
<text class="primary-cta-btn-text">{{ ctaLabel }}</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { getCurrentLocale, getOmniText } from '../../common/locale.uts';
|
|
import { utsLightColors, utsRadius, utsSpacing } from '../../common/tokens.uts';
|
|
import {
|
|
applyAiChatOptions,
|
|
createAiChatState,
|
|
resolveAiChatText,
|
|
sendStreamChat,
|
|
submitLeadCard,
|
|
AiChatCopyKey,
|
|
AiChatPageOptions,
|
|
ChatLeadPayload,
|
|
} from './useAiChat.uts';
|
|
|
|
const pageTheme: Record<string, string> = {
|
|
'--oc-primary': utsLightColors.primary,
|
|
'--oc-primary-soft': utsLightColors.primarySoft,
|
|
'--oc-ai': utsLightColors.ai,
|
|
'--oc-bg': utsLightColors.bg,
|
|
'--oc-surface': utsLightColors.surface,
|
|
'--oc-border': utsLightColors.border,
|
|
'--oc-text': utsLightColors.text,
|
|
'--oc-text-2': utsLightColors.text2,
|
|
'--oc-radius-btn': utsRadius.button,
|
|
'--oc-radius-card': utsRadius.card,
|
|
'--oc-radius-modal': utsRadius.modal,
|
|
'--oc-space-8': utsSpacing.space8,
|
|
'--oc-space-12': utsSpacing.space12,
|
|
'--oc-space-16': utsSpacing.space16,
|
|
'--oc-space-24': utsSpacing.space24,
|
|
};
|
|
|
|
const state = reactive(createAiChatState());
|
|
const pageTitle = ref(getOmniText(getCurrentLocale(), 'card.ai_chat'));
|
|
|
|
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 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);
|
|
}
|
|
|
|
onLoad((options: AiChatPageOptions) => {
|
|
applyAiChatOptions(state, options);
|
|
pageTitle.value = getOmniText(getCurrentLocale(), 'card.ai_chat');
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ai-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
height: 100%;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
}
|
|
|
|
.ai-sheet {
|
|
flex: 1;
|
|
margin-block-start: var(--oc-space-24, 24px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-modal, 20px) var(--oc-radius-modal, 20px) 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ai-handle {
|
|
width: 40px;
|
|
height: 4px;
|
|
margin-block-start: var(--oc-space-12, 12px);
|
|
margin-inline: auto;
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
background-color: var(--oc-ai, #7C5CFF);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.ai-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
margin-block-start: var(--oc-space-16, 16px);
|
|
margin-block-end: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.ai-missing {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
margin-block-end: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.ai-list {
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.ai-empty-item {
|
|
padding-block: var(--oc-space-24, 24px);
|
|
}
|
|
|
|
.ai-empty {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ai-empty-text {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.ai-row-item {
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.ai-bubble {
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px);
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 88%;
|
|
}
|
|
|
|
.ai-bubble-user {
|
|
margin-inline-start: auto;
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.ai-bubble-assistant {
|
|
margin-inline-end: auto;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-inline-start: 3px solid var(--oc-ai, #7C5CFF);
|
|
}
|
|
|
|
.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: var(--oc-bg, #FFFFFF);
|
|
}
|
|
|
|
.ai-lead-card {
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
padding: var(--oc-space-16, 16px);
|
|
margin-block: var(--oc-space-8, 8px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.ai-lead-card-submitted {
|
|
border-color: #12B76A;
|
|
background-color: #ECFDF3;
|
|
padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.ai-lead-card-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.ai-lead-card-desc {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.ai-lead-card-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ai-lead-field {
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ai-lead-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ai-lead-input {
|
|
height: 44px;
|
|
min-height: 44px;
|
|
padding-inline: 12px;
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
font-size: 14px;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.ai-lead-error {
|
|
font-size: 12px;
|
|
color: #F04438;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.ai-lead-submit-btn {
|
|
height: 44px;
|
|
min-height: 44px;
|
|
background-color: var(--oc-primary-soft, #EAF1FF);
|
|
border: 1px solid var(--oc-primary, #0B5CFF);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.ai-lead-submit-btn-disabled {
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border-color: var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
.ai-lead-submit-btn-text {
|
|
color: var(--oc-primary, #0B5CFF);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ai-lead-submit-btn-disabled .ai-lead-submit-btn-text {
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.ai-lead-success {
|
|
padding-block: var(--oc-space-12, 12px);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ai-lead-success-text {
|
|
font-size: 14px;
|
|
color: #12B76A;
|
|
line-height: 1.6;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ai-hint-item {
|
|
margin-bottom: 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, 12px);
|
|
background-color: var(--oc-primary-soft, #EAF1FF);
|
|
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) var(--oc-space-24, 24px);
|
|
border-top: 1px solid var(--oc-border, #E3E7ED);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ai-input-label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.ai-input {
|
|
height: 44px;
|
|
min-height: 44px;
|
|
padding-inline: 12px;
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
font-size: 14px;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.primary-cta-btn {
|
|
height: 48px;
|
|
min-height: 44px;
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.primary-cta-btn-disabled {
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
.primary-cta-btn-text {
|
|
color: var(--oc-bg, #FFFFFF);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.primary-cta-btn-disabled .primary-cta-btn-text {
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
@keyframes oc-ai-glow {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.2);
|
|
}
|
|
100% {
|
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ai-glow {
|
|
animation: none;
|
|
}
|
|
}
|
|
</style>
|