feat: Truncate long titles in PromptBody component and improve rendering of system and quick prompts

This commit is contained in:
n4ze3m 2024-07-23 11:14:45 +05:30
parent b12cf55a47
commit df3484bdeb

View File

@ -126,30 +126,31 @@ export const PromptBody = () => {
{ {
title: t("managePrompts.columns.title"), title: t("managePrompts.columns.title"),
dataIndex: "title", dataIndex: "title",
key: "title" key: "title",
render: (content) => (<span className="line-clamp-1">{content}</span>)
}, },
{ {
title: t("managePrompts.columns.prompt"), title: t("managePrompts.columns.prompt"),
dataIndex: "content", dataIndex: "content",
key: "content" key: "content",
render: (content) => (<span className="line-clamp-1">{content}</span>)
}, },
{ {
title: t("managePrompts.columns.type"), title: t("managePrompts.columns.type"),
dataIndex: "is_system", dataIndex: "is_system",
key: "is_system", key: "is_system",
render: (is_system) => render: (is_system) =>
is_system ? ( <span className="flex items-center gap-2 text-xs w-32">
<span className="flex items-center gap-2"> {is_system ? (
<Computer className="w-5 h-5 " /> <>
{t("managePrompts.systemPrompt")} <Computer className="size-4" /> {t("managePrompts.systemPrompt")}
</span> </>
) : ( ) : (
<span className="flex items-center gap-2"> <>
<Zap className="w-5 h-5" /> <Zap className="size-4" /> {t("managePrompts.quickPrompt")}
{t("managePrompts.quickPrompt")} </>
</span> )}
) </span> },
},
{ {
title: t("managePrompts.columns.actions"), title: t("managePrompts.columns.actions"),
render: (_, record) => ( render: (_, record) => (
@ -164,7 +165,7 @@ export const PromptBody = () => {
} }
}} }}
className="text-red-500 dark:text-red-400"> className="text-red-500 dark:text-red-400">
<Trash2 className="w-5 h-5" /> <Trash2 className="size-4" />
</button> </button>
</Tooltip> </Tooltip>
<Tooltip title={t("managePrompts.tooltip.edit")}> <Tooltip title={t("managePrompts.tooltip.edit")}>
@ -175,7 +176,7 @@ export const PromptBody = () => {
setOpenEdit(true) setOpenEdit(true)
}} }}
className="text-gray-500 dark:text-gray-400"> className="text-gray-500 dark:text-gray-400">
<Pen className="w-5 h-5" /> <Pen className="size-4" />
</button> </button>
</Tooltip> </Tooltip>
</div> </div>