Add contextual teacher help entry and simplify consultation panel
This commit is contained in:
鲨鱼辣椒
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { ArrowUp, ChevronDown, ChevronRight, FolderOpen, Maximize2, Plus, X } from 'lucide-react';
|
||||
import { ArrowUp, ChevronDown, ChevronRight, Loader2, Maximize2, Plus, X } from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import teacherAvatar from '@/assets/consultations/teacher.png';
|
||||
import friendAvatar from '@/assets/consultations/friend.png';
|
||||
@@ -24,7 +24,6 @@ export function TeacherChatPanel({
|
||||
draftRevision,
|
||||
sampleContext,
|
||||
role,
|
||||
projectName,
|
||||
expanded,
|
||||
onExpand,
|
||||
onReturnToWork,
|
||||
@@ -54,13 +53,15 @@ export function TeacherChatPanel({
|
||||
}, [draftKey]);
|
||||
const label = role === 'friend' ? '朋友' : '老师';
|
||||
const avatar = role === 'friend' ? friendAvatar : teacherAvatar;
|
||||
const [contextOpen, setContextOpen] = useState(false);
|
||||
const studentTeacher = role === 'teacher' && !draftRevision;
|
||||
const [historyOpen, setHistoryOpen] = useState(false);
|
||||
const [definition, setDefinition] = useState<TeacherDefinition | null>(null);
|
||||
const [topics, setTopics] = useState<TeacherTopicList>({ items: [], lastSelectedTopicId: null });
|
||||
const [topic, setTopic] = useState<TeacherTopic | null>(null);
|
||||
const [text, setText] = useState(saved.text ?? '');
|
||||
const [references, setReferences] = useState<TeacherReference[]>(quote ? [quote] : saved.references ?? []);
|
||||
const draftRef = useRef({ text, references });
|
||||
draftRef.current = { text, references };
|
||||
const [error, setError] = useState('');
|
||||
const [busy, setBusy] = useState(true);
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
@@ -77,11 +78,16 @@ export function TeacherChatPanel({
|
||||
if (pane) pane.scrollTop = pane.scrollHeight;
|
||||
}, [topic?.id, topic?.revision]);
|
||||
const consume = useCallback(
|
||||
(next: TeacherTopic) =>
|
||||
(next: TeacherTopic) => {
|
||||
if (pending.current && next.requests.some((request) => request.id === pending.current?.requestId)) {
|
||||
pending.current = null;
|
||||
persistDraft(draftRef.current.text, draftRef.current.references);
|
||||
}
|
||||
setTopic((current) =>
|
||||
current?.id === next.id && current.revision > next.revision ? current : next
|
||||
),
|
||||
[]
|
||||
);
|
||||
},
|
||||
[persistDraft]
|
||||
);
|
||||
useEffect(() => {
|
||||
if (quote) setReferences([quote]);
|
||||
@@ -108,7 +114,7 @@ export function TeacherChatPanel({
|
||||
if (listed.lastSelectedTopicId) {
|
||||
const current = await teacherApi.read(base, listed.lastSelectedTopicId);
|
||||
if (alive && (!draftRevision || current.draftRevision === draftRevision)) {
|
||||
setTopic(current);
|
||||
consume(current);
|
||||
setDefinition(current.definition);
|
||||
}
|
||||
}
|
||||
@@ -124,7 +130,7 @@ export function TeacherChatPanel({
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
generation.current++;
|
||||
};
|
||||
}, [base, draftRevision, role, label]);
|
||||
}, [base, draftRevision, role, label, consume]);
|
||||
useEffect(() => {
|
||||
if (!topic?.id) return;
|
||||
const streamTopicId = topic.id;
|
||||
@@ -200,8 +206,10 @@ export function TeacherChatPanel({
|
||||
if (version === generation.current) setBusy(false);
|
||||
}
|
||||
};
|
||||
const send = async () => {
|
||||
if (!text.trim() || busy || !enabled || topicRef.current?.requests.some((request) => ['preparing', 'running'].includes(request.status))) return;
|
||||
const send = async (action?: Pick<TeacherSend, 'text' | 'intent'>) => {
|
||||
const question = action?.text ?? text;
|
||||
const questionReferences = action ? [] : references;
|
||||
if (!question.trim() || busy || !enabled || topicRef.current?.requests.some((request) => ['preparing', 'running'].includes(request.status))) return;
|
||||
const version = generation.current;
|
||||
setBusy(true);
|
||||
setError('');
|
||||
@@ -212,22 +220,33 @@ export function TeacherChatPanel({
|
||||
if (version !== generation.current) return;
|
||||
consume(current);
|
||||
}
|
||||
const previous = pending.current;
|
||||
const previous = pending.current && !current.requests.some((request) => request.id === pending.current?.requestId)
|
||||
? pending.current
|
||||
: null;
|
||||
const input =
|
||||
previous &&
|
||||
previous.text === text &&
|
||||
JSON.stringify(previous.references) === JSON.stringify(references)
|
||||
previous.text === question &&
|
||||
(previous.intent ?? 'question') === (action?.intent ?? 'question') &&
|
||||
JSON.stringify(previous.references) === JSON.stringify(questionReferences)
|
||||
? previous
|
||||
: { requestId: crypto.randomUUID(), text, references, ...(role && sourceId ? { sourceConversationId: sourceId } : {}) };
|
||||
: {
|
||||
requestId: crypto.randomUUID(), text: question, references: questionReferences,
|
||||
...(action?.intent ? { intent: action.intent } : {}),
|
||||
...(role && sourceId ? { sourceConversationId: sourceId } : {}),
|
||||
};
|
||||
pending.current = input;
|
||||
persistDraft(text, references, input);
|
||||
const next = await teacherApi.send(base, current.id, input);
|
||||
if (version !== generation.current) return;
|
||||
consume(next);
|
||||
setText('');
|
||||
setReferences([]);
|
||||
persistDraft('', []);
|
||||
pending.current = null;
|
||||
if (action) {
|
||||
persistDraft(text, references);
|
||||
} else {
|
||||
setText('');
|
||||
setReferences([]);
|
||||
persistDraft('', []);
|
||||
}
|
||||
setTopics(await teacherApi.list(base));
|
||||
} catch (e) {
|
||||
if (version === generation.current)
|
||||
@@ -239,6 +258,9 @@ export function TeacherChatPanel({
|
||||
const running = topic?.requests.find(
|
||||
(request) => request.status === 'preparing' || request.status === 'running'
|
||||
);
|
||||
const helpUnavailable = busy || !enabled || Boolean(running);
|
||||
const askForSuggestions = () => void send({ text: '老师，帮我看看', intent: 'suggestions' });
|
||||
const askForGuidance = () => void send({ text: '我也说不清，你带我看看', intent: 'guided-help' });
|
||||
const changeText = (next: string) => { setText(next); persistDraft(next, references, pending.current); };
|
||||
const removeReferences = () => { setReferences([]); persistDraft(text, [], pending.current); };
|
||||
const questions = definition?.suggested_questions.length ? definition.suggested_questions : role === 'friend'
|
||||
@@ -254,11 +276,6 @@ export function TeacherChatPanel({
|
||||
{onExpand && <button className="consult-icon" aria-label={expanded ? '恢复咨询栏宽度' : '展开咨询栏'} onClick={onExpand}><Maximize2 className="h-4 w-4" /></button>}
|
||||
{onClose && <button className="consult-icon" aria-label={`关闭${label}`} onClick={onClose}><X className="h-4 w-4" /></button>}
|
||||
</header>
|
||||
{!draftRevision && <>
|
||||
<button className="consultation-context flex items-center gap-2 px-5 py-3 text-left text-xs" aria-expanded={contextOpen} onClick={() => setContextOpen(!contextOpen)}>
|
||||
<FolderOpen className="h-3.5 w-3.5" /><span className="min-w-0 flex-1 truncate">{projectName ?? '当前项目'}</span><span className="text-[10px] opacity-70">当前项目</span><ChevronDown className="h-3 w-3" /></button>
|
||||
{contextOpen && <p className="px-5 py-3 text-xs leading-6 text-muted-foreground">{role === 'friend' ? '结合你的描述和操作对话聊感受；还没有实际看到或试玩的地方，会先和你确认。' : '围绕你的项目一起思考，可以参考当前操作对话。由你决定接下来怎么做。'}</p>}
|
||||
</>}
|
||||
{(topics.items.length > 0 || draftRevision) && <div className="px-5 pt-2">
|
||||
<button className="text-[11px] text-muted-foreground" onClick={() => setHistoryOpen(!historyOpen)} aria-expanded={historyOpen}>以往讨论 <ChevronDown className="inline h-3 w-3" /></button>
|
||||
{(historyOpen || !role) && <div className="mt-2 flex gap-2">
|
||||
@@ -270,18 +287,35 @@ export function TeacherChatPanel({
|
||||
<div ref={scrollRef} className="consultation-messages min-h-0 flex-1 overflow-y-auto px-5 py-6">
|
||||
{!topic?.requests.length && <div className="flex min-h-full flex-col items-center justify-center pb-5 text-center">
|
||||
<img className="mb-6 h-[68px] w-[68px] rounded-3xl [image-rendering:pixelated]" src={avatar} alt="" />
|
||||
<h3 className="text-lg font-medium tracking-tight">{definition?.welcome_message || (role === 'friend' ? '一起看看你的作品' : '哪里需要一起想一想？')}</h3>
|
||||
<p className="mb-6 mt-3 text-xs leading-6 text-muted-foreground">{role === 'friend' ? <>好玩的地方、困惑的瞬间，<br />我们一起发现。</> : <>想法、做法，或遇到的困难，<br />都可以慢慢聊。</>}</p>
|
||||
<div className="flex w-full max-w-64 flex-col gap-2">{questions.map((question) => <button key={question} onClick={() => changeText(question)} className="consultation-suggestion flex items-center justify-between gap-2 rounded-lg border bg-white px-3 py-3 text-left text-xs">{question}<ChevronRight className="h-3 w-3 shrink-0 opacity-50" /></button>)}</div>
|
||||
<h3 className="text-lg font-medium tracking-tight">{studentTeacher ? '有问题，随时来找我' : definition?.welcome_message || (role === 'friend' ? '一起看看你的作品' : '哪里需要一起想一想？')}</h3>
|
||||
<p className="mb-6 mt-3 text-[13px] leading-6 text-muted-foreground">{studentTeacher
|
||||
? <>有问题可以直接问我。<br />还没想好问什么，也没关系。</>
|
||||
: role === 'friend' ? <>好玩的地方、困惑的瞬间，<br />我们一起发现。</> : <>想法、做法，或遇到的困难，<br />都可以慢慢聊。</>}</p>
|
||||
{studentTeacher ? <div className="w-full max-w-64">
|
||||
<button type="button" disabled={helpUnavailable} onClick={askForSuggestions} className="consultation-help-start flex min-h-11 w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-[13px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50">老师，帮我看看<ChevronRight className="h-3.5 w-3.5" /></button>
|
||||
<p className="mt-3 text-xs leading-6 text-muted-foreground">我会结合你做到的地方，<br />找几个可以一起聊的问题。</p>
|
||||
</div> : <div className="flex w-full max-w-64 flex-col gap-2">{questions.map((question) => <button key={question} onClick={() => changeText(question)} className="consultation-suggestion flex items-center justify-between gap-2 rounded-lg border bg-white px-3 py-3 text-left text-xs">{question}<ChevronRight className="h-3 w-3 shrink-0 opacity-50" /></button>)}</div>}
|
||||
</div>}
|
||||
{topic?.requests.map((request) => <div key={request.id} className="mb-7 space-y-4">
|
||||
<div className="flex justify-end"><p className="consultation-user max-w-[92%] whitespace-pre-wrap break-words rounded-2xl rounded-br-sm px-4 py-3 text-[13px] leading-7">{request.text}</p></div>
|
||||
{request.references.length > 0 && <details className="text-xs text-muted-foreground"><summary>本轮引用 {request.references.length} 项</summary>{request.references.map((ref, index) => <pre className="whitespace-pre-wrap" key={index}>{ref.text}</pre>)}</details>}
|
||||
<div className="flex items-center gap-2 text-[11px] text-muted-foreground"><img src={avatar} alt="" className="h-6 w-6 rounded-lg [image-rendering:pixelated]" />{definition?.name ?? label}</div>
|
||||
<div className="whitespace-pre-wrap break-words text-[13px] leading-7">{request.response || (['running', 'preparing'].includes(request.status) ? `${label}正在想…` : '')}</div>
|
||||
{request.intent === 'suggestions' ? <>
|
||||
{['running', 'preparing'].includes(request.status)
|
||||
? <p role="status" className="flex items-center gap-2 text-[13px] leading-7 text-muted-foreground"><Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />我看看你最近做到了哪里…</p>
|
||||
: request.status === 'completed' && <>
|
||||
<p className="whitespace-pre-wrap break-words text-[13px] leading-7">{request.response}</p>
|
||||
<div className="flex flex-col gap-2" aria-label="可以和老师聊的问题">
|
||||
{request.suggestedQuestions?.map((question) => <button key={question} type="button" disabled={helpUnavailable} onClick={() => void send({ text: question })} className="consultation-suggestion flex min-h-11 items-center justify-between gap-3 rounded-xl border bg-white px-3 py-3 text-left text-[13px] leading-6 transition-colors disabled:cursor-not-allowed disabled:opacity-50">{question}<ChevronRight className="h-3.5 w-3.5 shrink-0 opacity-60" /></button>)}
|
||||
</div>
|
||||
<button type="button" disabled={helpUnavailable} onClick={askForGuidance} className="consultation-guided-help min-h-10 text-left text-xs leading-6 underline decoration-current/30 underline-offset-4 disabled:cursor-not-allowed disabled:opacity-50">我也说不清，你带我看看</button>
|
||||
<p className="text-[11px] leading-5 text-muted-foreground">也可以直接在下面说说你的想法。</p>
|
||||
</>}
|
||||
{['failed', 'cancelled', 'interrupted'].includes(request.status) && <button type="button" disabled={helpUnavailable} onClick={askForSuggestions} className="consultation-guided-help min-h-10 text-xs underline underline-offset-4 disabled:opacity-50">再请老师看看</button>}
|
||||
</> : <div className="whitespace-pre-wrap break-words text-[13px] leading-7">{request.response || (['running', 'preparing'].includes(request.status) ? `${label}正在想…` : '')}</div>}
|
||||
{request.omittedMessages > 0 && <p className="text-[10px] text-muted-foreground">本轮参考了较近的讨论，省略了 {request.omittedMessages} 条较早内容。</p>}
|
||||
{request.error && <p className="text-xs text-destructive">{request.error}</p>}
|
||||
{request.response && <div className="flex flex-wrap gap-4 text-[11px] text-muted-foreground">
|
||||
{request.response && request.intent !== 'suggestions' && <div className="flex flex-wrap gap-4 text-[11px] text-muted-foreground">
|
||||
{onReturnToWork && request.status === 'completed' && <button onClick={onReturnToWork} className="hover:text-foreground">我去试一试 <ChevronRight className="inline h-3 w-3" /></button>}
|
||||
<button onClick={() => void navigator.clipboard.writeText(request.response).catch(() => setError('暂时无法复制，请选中文字复制。'))}>复制</button>
|
||||
{!role && onBringBack && request.status === 'completed' && <button onClick={() => onBringBack(request.response)}>带回主会话草稿</button>}
|
||||
@@ -292,6 +326,7 @@ export function TeacherChatPanel({
|
||||
{topic?.unsaved && <div className="px-5 py-2 text-xs text-destructive">回复尚未保存，请复制或重试保存。<button className="ml-2 underline" onClick={() => void teacherApi.save(base, topic.id).then(consume).catch(() => setError('保存失败，请先复制回复。'))}>重试保存</button></div>}
|
||||
{!enabled && !error && !busy && <p className="px-5 pb-2 text-xs text-muted-foreground">{label}暂未开放，历史仍可查看。</p>}
|
||||
<form className="px-4 pb-4 pt-2" onSubmit={(e) => { e.preventDefault(); void send(); }}>
|
||||
{studentTeacher && Boolean(topic?.requests.length) && <button type="button" disabled={helpUnavailable} onClick={askForSuggestions} className="consultation-help-again mb-2 flex min-h-9 items-center gap-1.5 rounded-lg px-2 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50">老师，帮我看看<ChevronRight className="h-3 w-3" /></button>}
|
||||
{references.length > 0 && <div className="mb-2 rounded-lg bg-white p-3 text-xs"><p className="line-clamp-3 whitespace-pre-wrap">{references.map((ref) => ref.text).join('\n')}</p><button type="button" className="mt-1 underline" onClick={removeReferences}>移除引用</button></div>}
|
||||
<div className="consultation-composer rounded-2xl border bg-white p-3 focus-within:ring-2 focus-within:ring-black/5">
|
||||
<textarea aria-label={`向${label}提问`} value={text} disabled={busy} maxLength={6000} onChange={(e) => changeText(e.target.value)} placeholder={`想和${label}聊些什么？`} rows={2}
|
||||
|
||||
@@ -17,7 +17,11 @@
|
||||
.classroom-consultation-resizer { position: absolute; inset: 0 auto 0 -4px; width: 8px; z-index: 2; cursor: col-resize; }
|
||||
.classroom-consultation-resizer:hover, .classroom-consultation-resizer:focus-visible { background: #82986733; }
|
||||
.consultation-pane { background: #fafbf7; color: #434f3a; }
|
||||
.consultation-context { background: #f2f5ec; border-top: 1px solid #edf0e6; border-bottom: 1px solid #e7ecdf; color: #79866c; }
|
||||
.consultation-help-start { background: #e7eddc; color: #435836; }
|
||||
.consultation-help-start:hover:not(:disabled) { background: #dce6cd; }
|
||||
.consultation-help-again, .consultation-guided-help { color: #536747; }
|
||||
.consultation-help-again:hover:not(:disabled) { background: #edf2e5; }
|
||||
.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; }
|
||||
.consultation-user { background: #eaf0e1; }
|
||||
@@ -26,7 +30,6 @@
|
||||
.consult-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: #8c9781; }
|
||||
.consult-icon:hover { background: #eaf0e1; color: #45563b; }
|
||||
.consultation-friend { background: #fcfaf6; color: #756347; }
|
||||
.consultation-friend .consultation-context { background: #f5f0e7; border-color: #eee7d9; color: #958162; }
|
||||
.consultation-friend .consultation-user { background: #f0e9db; }
|
||||
.consultation-friend .consultation-composer, .consultation-friend .consultation-suggestion { border-color: #e6ddca; }
|
||||
.consultation-friend .consultation-suggestion { color: #8b7657; }
|
||||
|
||||
Reference in New Issue
Block a user