feat(i18n): 附件删除按钮国际化
- 调整 prompt-input 附件删除按钮样式,默认隐藏,hover 时显示
This commit is contained in:
parent
da2023b42b
commit
d2d3b73f53
|
|
@ -8,6 +8,7 @@ import {
|
||||||
TooltipProvider,
|
TooltipProvider,
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from "@/components/ui/tooltip";
|
} from "@/components/ui/tooltip";
|
||||||
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import type { FileUIPart, UIMessage } from "ai";
|
import type { FileUIPart, UIMessage } from "ai";
|
||||||
import {
|
import {
|
||||||
|
|
@ -333,6 +334,7 @@ export function MessageAttachment({
|
||||||
onRemove,
|
onRemove,
|
||||||
...props
|
...props
|
||||||
}: MessageAttachmentProps) {
|
}: MessageAttachmentProps) {
|
||||||
|
const { t } = useI18n();
|
||||||
const filename = data.filename || "";
|
const filename = data.filename || "";
|
||||||
const mediaType =
|
const mediaType =
|
||||||
data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
|
data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
|
||||||
|
|
@ -358,7 +360,7 @@ export function MessageAttachment({
|
||||||
/>
|
/>
|
||||||
{onRemove && (
|
{onRemove && (
|
||||||
<Button
|
<Button
|
||||||
aria-label="Remove attachment"
|
aria-label={t.common.removeAttachment}
|
||||||
className="bg-background/80 hover:bg-background absolute top-2 right-2 size-6 rounded-full p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 [&>svg]:size-3"
|
className="bg-background/80 hover:bg-background absolute top-2 right-2 size-6 rounded-full p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 [&>svg]:size-3"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
@ -368,7 +370,7 @@ export function MessageAttachment({
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
>
|
>
|
||||||
<XIcon />
|
<XIcon />
|
||||||
<span className="sr-only">Remove</span>
|
<span className="sr-only">{t.common.removeAttachment}</span>
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
@ -386,7 +388,7 @@ export function MessageAttachment({
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
{onRemove && (
|
{onRemove && (
|
||||||
<Button
|
<Button
|
||||||
aria-label="Remove attachment"
|
aria-label={t.common.removeAttachment}
|
||||||
className="hover:bg-accent size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100 [&>svg]:size-3"
|
className="hover:bg-accent size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100 [&>svg]:size-3"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
@ -396,6 +398,7 @@ export function MessageAttachment({
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
>
|
>
|
||||||
<XIcon />
|
<XIcon />
|
||||||
|
<span className="sr-only">{t.common.removeAttachment}</span>
|
||||||
<span className="sr-only">Remove</span>
|
<span className="sr-only">Remove</span>
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -290,6 +290,7 @@ export function PromptInputAttachment({
|
||||||
...props
|
...props
|
||||||
}: PromptInputAttachmentProps) {
|
}: PromptInputAttachmentProps) {
|
||||||
const attachments = usePromptInputAttachments();
|
const attachments = usePromptInputAttachments();
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
const filename = data.filename || "";
|
const filename = data.filename || "";
|
||||||
|
|
||||||
|
|
@ -348,7 +349,7 @@ export function PromptInputAttachment({
|
||||||
</svg>
|
</svg>
|
||||||
{/* 删除按钮 - 右上角 */}
|
{/* 删除按钮 - 右上角 */}
|
||||||
<button
|
<button
|
||||||
aria-label="Remove attachment"
|
aria-label={t.common.removeAttachment}
|
||||||
className="absolute top-1.5 right-1.5 z-10 flex size-4 cursor-pointer items-center justify-center rounded-sm transition-colors hover:bg-white/20"
|
className="absolute top-1.5 right-1.5 z-10 flex size-4 cursor-pointer items-center justify-center rounded-sm transition-colors hover:bg-white/20"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
@ -389,8 +390,8 @@ export function PromptInputAttachment({
|
||||||
</div>
|
</div>
|
||||||
{/* 关闭按钮 - 右上角 */}
|
{/* 关闭按钮 - 右上角 */}
|
||||||
<button
|
<button
|
||||||
aria-label="Remove attachment"
|
aria-label={t.common.removeAttachment}
|
||||||
className="absolute top-1 right-1 z-10 flex size-5 cursor-pointer items-center justify-center rounded bg-white/90 transition-colors hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800"
|
className="absolute top-1 right-1 z-10 flex size-5 cursor-pointer items-center justify-center rounded bg-white/90 opacity-0 transition-opacity hover:bg-white group-hover:opacity-100 dark:bg-gray-800/90 dark:hover:bg-gray-800"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
attachments.remove(data.id);
|
attachments.remove(data.id);
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@ export const enUS: Translations = {
|
||||||
save: "Save",
|
save: "Save",
|
||||||
install: "Install",
|
install: "Install",
|
||||||
create: "Create",
|
create: "Create",
|
||||||
|
removeAttachment: "Remove attachment",
|
||||||
},
|
},
|
||||||
|
|
||||||
// Welcome
|
// Welcome
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ export interface Translations {
|
||||||
save: string;
|
save: string;
|
||||||
install: string;
|
install: string;
|
||||||
create: string;
|
create: string;
|
||||||
|
removeAttachment: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Welcome
|
// Welcome
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@ export const zhCN: Translations = {
|
||||||
save: "保存",
|
save: "保存",
|
||||||
install: "安装",
|
install: "安装",
|
||||||
create: "创建",
|
create: "创建",
|
||||||
|
removeAttachment: "移除附件",
|
||||||
},
|
},
|
||||||
|
|
||||||
// Welcome
|
// Welcome
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue