feat: interaction upgrades — feedback buttons, export, shortcuts, input unlock
- Add ThumbsUp/ThumbsDown feedback buttons on AI messages (hover reveal)
- Add ExportButton to export conversation as Markdown file
- Add global keyboard shortcuts: Ctrl+Shift+O (new thread), Ctrl+Shift+S (sidebar), / (focus input), Esc (stop)
- Unlock textarea during AI generation (remove disabled={thread.isLoading})
- Smart title truncation at word/punctuation boundary (30 chars)
- Show tool inputSummary in ToolCallStatus execution log
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
244a6d4a1f
commit
182f6e358c
@@ -232,6 +232,11 @@ function ToolCallRow({
|
||||
原因:<span className="text-red-600">{logEntry.errorMessage}</span>
|
||||
</span>
|
||||
)}
|
||||
{(logEntry as any).inputSummary && (
|
||||
<span className="text-xs text-muted-foreground w-full">
|
||||
查询:<span className="text-foreground font-medium">{(logEntry as any).inputSummary}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{expanded && !isFailed && uiItem && stream && components && (
|
||||
|
||||
+116
-6
@@ -9,7 +9,7 @@ type UIMsgLocal = { id: string; type: string; name: string; props: Record<string
|
||||
import { useState, useRef, useEffect, useCallback, Component, type ReactNode } from "react";
|
||||
import ComponentMap from "./agent-uis/index.tsx";
|
||||
import "./index.css";
|
||||
import { BookOpen, Search, Terminal, Ticket, Zap, Cpu, Bot, Menu, Copy, Check, RefreshCw, Square, Pencil, ChevronDown, Sparkles, Loader2, AlertTriangle, Plus } from "lucide-react";
|
||||
import { BookOpen, Search, Terminal, Ticket, Zap, Cpu, Bot, Menu, Copy, Check, RefreshCw, Square, Pencil, ChevronDown, Sparkles, Loader2, AlertTriangle, Plus, ThumbsUp, ThumbsDown, Download } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ThreadSidebar, type ThreadItem, updateThreadLastActive } from "@/components/ThreadSidebar.tsx";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
@@ -138,6 +138,84 @@ function CopyButton({ text }: { text: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Feedback buttons (thumbs up/down) for AI messages ─────────────────────
|
||||
function FeedbackButtons({ messageId }: { messageId: string }) {
|
||||
const [feedback, setFeedback] = useState<"up" | "down" | null>(null);
|
||||
const handleFeedback = (type: "up" | "down") => {
|
||||
setFeedback((prev) => (prev === type ? null : type));
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleFeedback("up")}
|
||||
className={cn(
|
||||
"inline-flex items-center text-xs px-1.5 py-0.5 rounded transition-colors",
|
||||
feedback === "up"
|
||||
? "text-green-600 bg-green-100 dark:bg-green-900/30"
|
||||
: "opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground hover:bg-accent",
|
||||
)}
|
||||
title="有帮助"
|
||||
>
|
||||
<ThumbsUp className="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleFeedback("down")}
|
||||
className={cn(
|
||||
"inline-flex items-center text-xs px-1.5 py-0.5 rounded transition-colors",
|
||||
feedback === "down"
|
||||
? "text-red-600 bg-red-100 dark:bg-red-900/30"
|
||||
: "opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground hover:bg-accent",
|
||||
)}
|
||||
title="无帮助"
|
||||
>
|
||||
<ThumbsDown className="size-3.5" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Export conversation as Markdown ────────────────────────────────────────
|
||||
function ExportButton({ messages }: { messages: Array<Record<string, unknown>> }) {
|
||||
const handleExport = () => {
|
||||
const lines: string[] = ["# 对话记录\n"];
|
||||
for (const msg of messages) {
|
||||
const isHuman =
|
||||
(msg as any).getType?.() === "human" || (msg as any).type === "human";
|
||||
const raw = (msg as any).content;
|
||||
const text =
|
||||
typeof raw === "string"
|
||||
? raw
|
||||
: Array.isArray(raw)
|
||||
? raw
|
||||
.filter((b: any) => b?.type === "text")
|
||||
.map((b: any) => b.text)
|
||||
.join("\n")
|
||||
: "";
|
||||
if (!text.trim()) continue;
|
||||
lines.push(isHuman ? `## 用户\n\n${text}\n` : `## AI\n\n${text}\n`);
|
||||
}
|
||||
const blob = new Blob([lines.join("\n")], { type: "text/markdown" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `对话记录_${new Date().toISOString().slice(0, 10)}.md`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExport}
|
||||
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded hover:bg-accent transition-colors"
|
||||
title="导出对话"
|
||||
>
|
||||
<Download className="size-3.5" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [input, setInput] = useState("");
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
@@ -285,6 +363,32 @@ function App() {
|
||||
};
|
||||
}, [configOpen]);
|
||||
|
||||
// ─── Global keyboard shortcuts ──────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
function handleGlobalKey(e: KeyboardEvent) {
|
||||
const t = e.target as HTMLElement;
|
||||
const isInput = t.tagName === "TEXTAREA" || t.tagName === "INPUT" || t.isContentEditable;
|
||||
// Ctrl/Cmd + Shift + O → new thread
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === "O" || e.key === "o")) {
|
||||
e.preventDefault(); handleNewThread(); return;
|
||||
}
|
||||
// Ctrl/Cmd + Shift + S → toggle sidebar
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === "S" || e.key === "s")) {
|
||||
e.preventDefault(); setSidebarOpen((v) => !v); return;
|
||||
}
|
||||
// "/" when not in input → focus textarea
|
||||
if (e.key === "/" && !isInput) {
|
||||
e.preventDefault(); textareaRef.current?.focus(); return;
|
||||
}
|
||||
// Escape while loading → stop generation
|
||||
if (e.key === "Escape" && thread.isLoading) {
|
||||
e.preventDefault(); thread.stop(); return;
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", handleGlobalKey);
|
||||
return () => document.removeEventListener("keydown", handleGlobalKey);
|
||||
}, [thread.isLoading]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Load threads on mount
|
||||
useEffect(() => {
|
||||
client.threads
|
||||
@@ -484,7 +588,10 @@ function App() {
|
||||
);
|
||||
|
||||
if (isFirstMessage && currentThreadId) {
|
||||
const titleText = text.slice(0, 20);
|
||||
// Smart title: truncate at word/punctuation boundary instead of mid-word
|
||||
const rawTitle = text.slice(0, 30);
|
||||
const boundaryMatch = rawTitle.match(/^(.{10,}?)[,。!?、;:\s,.!?;:]/);
|
||||
const titleText = boundaryMatch ? boundaryMatch[1] : rawTitle.replace(/\s+\S*$/, "") || rawTitle;
|
||||
client.threads.update(currentThreadId, { metadata: { title: titleText } }).catch(() => {});
|
||||
try { localStorage.setItem(`title_${currentThreadId}`, titleText); } catch { /* ignore */ }
|
||||
setThreads((prev) =>
|
||||
@@ -956,9 +1063,10 @@ function App() {
|
||||
{thread.isLoading && isLastAi && (
|
||||
<span className="typing-cursor" aria-hidden="true" />
|
||||
)}
|
||||
{/* Copy button */}
|
||||
<div className="flex justify-end mt-1">
|
||||
{/* Action buttons: copy + feedback */}
|
||||
<div className="flex justify-end mt-1 gap-1">
|
||||
<CopyButton text={plainTextContent} />
|
||||
<FeedbackButtons messageId={message.id ?? `msg-${idx}`} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -1157,7 +1265,9 @@ function App() {
|
||||
: `${modelLabel} · ${activeToolLabels.length} 个工具`;
|
||||
return (
|
||||
<div className="shrink-0 border-t border-border px-4 pt-2 pb-0 max-w-3xl mx-auto w-full">
|
||||
<div ref={configPanelRef} className="relative">
|
||||
<div ref={configPanelRef} className="relative flex items-center gap-2">
|
||||
{/* Export button */}
|
||||
<ExportButton messages={activeMessages} />
|
||||
{/* Summary bar */}
|
||||
<button
|
||||
type="button"
|
||||
@@ -1304,7 +1414,7 @@ function App() {
|
||||
placeholder="输入消息…"
|
||||
value={input}
|
||||
rows={1}
|
||||
disabled={thread.isLoading}
|
||||
disabled={false}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onCompositionStart={() => { isComposingRef.current = true; }}
|
||||
onCompositionEnd={() => { isComposingRef.current = false; }}
|
||||
|
||||
Reference in New Issue
Block a user