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 className="text-red-600">{logEntry.errorMessage}</span>
|
||||||
</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>
|
</div>
|
||||||
)}
|
)}
|
||||||
{expanded && !isFailed && uiItem && stream && components && (
|
{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 { useState, useRef, useEffect, useCallback, Component, type ReactNode } from "react";
|
||||||
import ComponentMap from "./agent-uis/index.tsx";
|
import ComponentMap from "./agent-uis/index.tsx";
|
||||||
import "./index.css";
|
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 { cn } from "@/lib/utils";
|
||||||
import { ThreadSidebar, type ThreadItem, updateThreadLastActive } from "@/components/ThreadSidebar.tsx";
|
import { ThreadSidebar, type ThreadItem, updateThreadLastActive } from "@/components/ThreadSidebar.tsx";
|
||||||
import { ThemeProvider } from "next-themes";
|
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() {
|
function App() {
|
||||||
const [input, setInput] = useState("");
|
const [input, setInput] = useState("");
|
||||||
const bottomRef = useRef<HTMLDivElement>(null);
|
const bottomRef = useRef<HTMLDivElement>(null);
|
||||||
@@ -285,6 +363,32 @@ function App() {
|
|||||||
};
|
};
|
||||||
}, [configOpen]);
|
}, [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
|
// Load threads on mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
client.threads
|
client.threads
|
||||||
@@ -484,7 +588,10 @@ function App() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (isFirstMessage && currentThreadId) {
|
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(() => {});
|
client.threads.update(currentThreadId, { metadata: { title: titleText } }).catch(() => {});
|
||||||
try { localStorage.setItem(`title_${currentThreadId}`, titleText); } catch { /* ignore */ }
|
try { localStorage.setItem(`title_${currentThreadId}`, titleText); } catch { /* ignore */ }
|
||||||
setThreads((prev) =>
|
setThreads((prev) =>
|
||||||
@@ -956,9 +1063,10 @@ function App() {
|
|||||||
{thread.isLoading && isLastAi && (
|
{thread.isLoading && isLastAi && (
|
||||||
<span className="typing-cursor" aria-hidden="true" />
|
<span className="typing-cursor" aria-hidden="true" />
|
||||||
)}
|
)}
|
||||||
{/* Copy button */}
|
{/* Action buttons: copy + feedback */}
|
||||||
<div className="flex justify-end mt-1">
|
<div className="flex justify-end mt-1 gap-1">
|
||||||
<CopyButton text={plainTextContent} />
|
<CopyButton text={plainTextContent} />
|
||||||
|
<FeedbackButtons messageId={message.id ?? `msg-${idx}`} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -1157,7 +1265,9 @@ function App() {
|
|||||||
: `${modelLabel} · ${activeToolLabels.length} 个工具`;
|
: `${modelLabel} · ${activeToolLabels.length} 个工具`;
|
||||||
return (
|
return (
|
||||||
<div className="shrink-0 border-t border-border px-4 pt-2 pb-0 max-w-3xl mx-auto w-full">
|
<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 */}
|
{/* Summary bar */}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -1304,7 +1414,7 @@ function App() {
|
|||||||
placeholder="输入消息…"
|
placeholder="输入消息…"
|
||||||
value={input}
|
value={input}
|
||||||
rows={1}
|
rows={1}
|
||||||
disabled={thread.isLoading}
|
disabled={false}
|
||||||
onChange={(e) => setInput(e.target.value)}
|
onChange={(e) => setInput(e.target.value)}
|
||||||
onCompositionStart={() => { isComposingRef.current = true; }}
|
onCompositionStart={() => { isComposingRef.current = true; }}
|
||||||
onCompositionEnd={() => { isComposingRef.current = false; }}
|
onCompositionEnd={() => { isComposingRef.current = false; }}
|
||||||
|
|||||||
Reference in New Issue
Block a user