Add AssistantIdentity component to AssistantPage for assistant ID display and copy functionality

- Introduce the AssistantIdentity component to show the current assistant ID and provide a copy-to-clipboard feature.
- Update multiple sections of AssistantPage to include the AssistantIdentity component, enhancing user interaction with assistant IDs.
- Ensure the component handles the display of the assistant ID and provides feedback when copied successfully.
This commit is contained in:
Xin Wang
2026-06-09 16:48:40 +08:00
parent b3fbfac5df
commit 6e83396d64

View File

@@ -1146,6 +1146,7 @@ export function AssistantPage() {
value={difyForm.name}
onChange={(value) => updateDifyForm("name", value)}
/>
<AssistantIdentity assistantId={editingId} />
</div>
<div className="flex shrink-0 gap-2">
@@ -1244,6 +1245,7 @@ export function AssistantPage() {
value={fastGptForm.name}
onChange={(value) => updateFastGptForm("name", value)}
/>
<AssistantIdentity assistantId={editingId} />
</div>
<div className="flex shrink-0 gap-2">
@@ -1348,6 +1350,7 @@ export function AssistantPage() {
value={openCodeForm.name}
onChange={(value) => updateOpenCodeForm("name", value)}
/>
<AssistantIdentity assistantId={editingId} />
</div>
<div className="flex shrink-0 gap-2">
@@ -1465,6 +1468,7 @@ export function AssistantPage() {
value={form.name}
onChange={(value) => updateForm("name", value)}
/>
<AssistantIdentity assistantId={editingId} />
</div>
<div className="flex shrink-0 gap-2">
@@ -1879,6 +1883,37 @@ function EditorBackButton({ onClick }: { onClick: () => void }) {
);
}
function AssistantIdentity({ assistantId }: { assistantId: string | null }) {
const [copied, setCopied] = useState(false);
async function copyId() {
if (!assistantId) return;
await navigator.clipboard.writeText(assistantId);
setCopied(true);
window.setTimeout(() => setCopied(false), 1600);
}
return (
<div className="ml-1 flex shrink-0 items-center rounded-full border border-hairline bg-canvas-soft pl-2.5 text-[11px] text-muted-foreground">
<span className="font-mono">
{assistantId ? `ID · ${assistantId}` : "ID · 保存后生成"}
</span>
{assistantId && (
<button
type="button"
onClick={() => void copyId()}
className="ml-1 flex h-7 w-7 items-center justify-center rounded-full text-muted-soft transition-colors hover:bg-surface-strong hover:text-foreground"
aria-label={copied ? "助手 ID 已复制" : "复制助手 ID"}
title={copied ? "已复制" : "复制 ID"}
>
{copied ? <Check size={13} /> : <Copy size={13} />}
</button>
)}
{!assistantId && <span className="h-7 w-2" aria-hidden />}
</div>
);
}
function EditableTitle({
value,
onChange,