style(teacher): make the retry action a playful sticker
This commit is contained in:
@@ -404,7 +404,7 @@ export function TeacherChatPanel({
|
||||
{request.suggestedQuestions?.map((question, index) => <button key={`${request.id}:${index}`} type="button" disabled={helpUnavailable} onClick={() => void send({ text: question })} className="consultation-follow-up"><span className="min-w-0 flex-1">{question}</span><ChevronRight className="h-4 w-4 shrink-0 opacity-70" aria-hidden="true" /></button>)}
|
||||
</div>
|
||||
</>}
|
||||
{['failed', 'cancelled', 'interrupted'].includes(request.status) && <button type="button" disabled={helpUnavailable} onClick={askForSuggestions} className="consultation-retry min-h-10 text-xs underline underline-offset-4 disabled:opacity-50">再请智能体看看</button>}
|
||||
{['failed', 'cancelled', 'interrupted'].includes(request.status) && <button type="button" disabled={helpUnavailable} onClick={askForSuggestions} className="consultation-retry">继续看看👀</button>}
|
||||
</> : request.response ? <TeacherReply text={request.response} /> : <div className="text-[13px] leading-7">{['running', 'preparing'].includes(request.status) ? <span role="status" className="inline-flex items-center gap-2 text-muted-foreground"><Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />{label}正在想…</span> : ['cancelled', 'interrupted'].includes(request.status) ? '这次先停在这里。想继续时可以再说说。' : ''}</div>}
|
||||
{request.intent !== 'suggestions' && request.status === 'completed' && Boolean(request.suggestedQuestions?.length) && <div className="consultation-follow-ups" aria-label="接着聊">
|
||||
{request.suggestedQuestions?.map((question, index) => <button type="button" key={`${request.id}:${index}`} disabled={helpUnavailable} onClick={() => void send({ text: question })} className="consultation-follow-up"><span className="min-w-0 flex-1">{question}</span><ChevronRight className="h-4 w-4 shrink-0 opacity-70" aria-hidden="true" /></button>)}
|
||||
|
||||
@@ -51,7 +51,11 @@
|
||||
.consultation-pane { background: #fffdf8; color: #30465f; }
|
||||
.consultation-hint { color: #5c7087; background: transparent; border: 0; text-underline-offset: 4px; text-decoration: underline transparent; }
|
||||
.consultation-hint:hover:not(:disabled) { color: #30465f; text-decoration-color: #a9bbce; }
|
||||
.consultation-retry { color: #536747; }
|
||||
.consultation-retry { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; max-width: 100%; padding: 8px 16px; border: 1.5px solid #e3ce8f; border-radius: 16px 16px 16px 6px; background: #fff2c9; color: #6f5127; box-shadow: 0 3px 0 #e7d7a6, inset 0 1px 0 #fff9e8; font-size: 14px; font-weight: 600; line-height: 24px; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
|
||||
.consultation-retry:hover:not(:disabled) { background: #ffe9a9; border-color: #d6b76f; }
|
||||
.consultation-retry:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #e7d7a6, inset 0 1px 0 #fff9e8; }
|
||||
.consultation-retry:disabled { cursor: not-allowed; opacity: 0.5; }
|
||||
@media (prefers-reduced-motion: reduce) { .consultation-retry { transition: none; } .consultation-retry:active:not(:disabled) { transform: none; } }
|
||||
.consultation-pane button:focus-visible { outline: 2px solid #71845f; outline-offset: 3px; }
|
||||
.consultation-suggestion { border-color: #e0e6d6; color: #718163; }
|
||||
.consultation-suggestion:hover { border-color: #bac9aa; background: #f4f7ee; }
|
||||
|
||||
Reference in New Issue
Block a user