60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
import { $getNodeByKey, type NodeKey } from 'lexical';
|
|
import { X } from 'lucide-react';
|
|
|
|
import type { ChatReference } from './resourceReferences';
|
|
|
|
function chipTitle(reference: ChatReference) {
|
|
if (reference.type === 'resource') {
|
|
return `${reference.label} · ${reference.kind}`;
|
|
}
|
|
if (reference.type === 'skill') {
|
|
return `${reference.name} · Skill`;
|
|
}
|
|
return `${reference.label} · 运行区域`;
|
|
}
|
|
|
|
export function ResourceReferenceChip({
|
|
reference,
|
|
nodeKey,
|
|
}: {
|
|
reference: ChatReference;
|
|
nodeKey: NodeKey;
|
|
}) {
|
|
const [editor] = useLexicalComposerContext();
|
|
return (
|
|
<span
|
|
className="resource-reference-chip"
|
|
data-resource-reference-id={
|
|
reference.type === 'resource' ? reference.resourceId : undefined
|
|
}
|
|
data-runtime-region-reference={
|
|
reference.type === 'runtime-region' ? 'true' : undefined
|
|
}
|
|
data-skill-reference-name={
|
|
reference.type === 'skill' ? reference.name : undefined
|
|
}
|
|
contentEditable={false}
|
|
title={chipTitle(reference)}
|
|
>
|
|
<span aria-hidden="true">{reference.type === 'skill' ? '$' : '@'}</span>
|
|
<span className="resource-reference-chip-label">
|
|
{reference.type === 'skill' ? reference.name : reference.label}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
aria-label={`移除引用 ${reference.type === 'skill' ? reference.name : reference.label}`}
|
|
onMouseDown={(event) => event.preventDefault()}
|
|
onClick={() => {
|
|
editor.update(() => {
|
|
const node = $getNodeByKey(nodeKey);
|
|
node?.remove();
|
|
});
|
|
}}
|
|
>
|
|
<X size={11} aria-hidden="true" />
|
|
</button>
|
|
</span>
|
|
);
|
|
}
|