mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-29 08:33:20 +00:00
Merge pull request #1645 from ManishMadan2882/main
Settings: Improving table layout
This commit is contained in:
Alex
@@ -81,7 +81,8 @@
|
||||
"sourceDoc": "Source Document",
|
||||
"createNew": "Create New",
|
||||
"noData": "No existing Chatbots",
|
||||
"deleteConfirmation": "Are you sure you want to delete the API key '{{name}}'?"
|
||||
"deleteConfirmation": "Are you sure you want to delete the API key '{{name}}'?",
|
||||
"description": "Here you can create and manage your chatbots. Chatbots can be deployed to websites as widgets or used inside your applications."
|
||||
},
|
||||
"analytics": {
|
||||
"label": "Analytics",
|
||||
|
||||
@@ -81,7 +81,8 @@
|
||||
"sourceDoc": "Documento Fuente",
|
||||
"createNew": "Crear Nuevo",
|
||||
"noData": "No hay chatbots existentes",
|
||||
"deleteConfirmation": "¿Estás seguro de que quieres eliminar la clave API '{{name}}'?"
|
||||
"deleteConfirmation": "¿Estás seguro de que quieres eliminar la clave API '{{name}}'?",
|
||||
"description": "Aquí puede crear y gestionar sus chatbots. Los chatbots se pueden implementar en sitios web como widgets o utilizarse dentro de sus aplicaciones."
|
||||
},
|
||||
"analytics": {
|
||||
"label": "Analítica",
|
||||
|
||||
@@ -80,7 +80,8 @@
|
||||
"sourceDoc": "ソースドキュメント",
|
||||
"createNew": "新規作成",
|
||||
"noData": "既存のチャットボットはありません",
|
||||
"deleteConfirmation": "APIキー '{{name}}' を削除してもよろしいですか？"
|
||||
"deleteConfirmation": "APIキー '{{name}}' を削除してもよろしいですか？",
|
||||
"description": "ここでチャットボットを作成・管理できます。チャットボットはウィジェットとしてウェブサイトに導入したり、アプリケーション内で使用したりすることができます。"
|
||||
},
|
||||
"analytics": {
|
||||
"label": "分析",
|
||||
|
||||
@@ -81,7 +81,8 @@
|
||||
"sourceDoc": "Источник документа",
|
||||
"createNew": "Создать новый",
|
||||
"noData": "Нет существующих чатботов",
|
||||
"deleteConfirmation": "Вы уверены, что хотите удалить API ключ '{{name}}'?"
|
||||
"deleteConfirmation": "Вы уверены, что хотите удалить API ключ '{{name}}'?",
|
||||
"description": "Здесь вы можете создавать и управлять чат-ботами. Чат-боты могут быть развернуты на веб-сайтах в виде виджетов или использоваться внутри ваших приложений."
|
||||
},
|
||||
"analytics": {
|
||||
"label": "Аналитика",
|
||||
|
||||
@@ -81,7 +81,8 @@
|
||||
"sourceDoc": "來源文件",
|
||||
"createNew": "建立新的",
|
||||
"noData": "沒有現有的聊天機器人",
|
||||
"deleteConfirmation": "您確定要刪除 API 金鑰 '{{name}}' 嗎？"
|
||||
"deleteConfirmation": "您確定要刪除 API 金鑰 '{{name}}' 嗎？",
|
||||
"description": "在這裡，您可以創建和管理您的聊天機器人。聊天機器人可以作為小部件部署到網站上，或在您的應用程序中使用。"
|
||||
},
|
||||
"analytics": {
|
||||
"label": "分析",
|
||||
|
||||
@@ -81,7 +81,8 @@
|
||||
"sourceDoc": "源文档",
|
||||
"createNew": "创建新的",
|
||||
"noData": "没有现有的聊天机器人",
|
||||
"deleteConfirmation": "您确定要删除 API 密钥 '{{name}}' 吗？"
|
||||
"deleteConfirmation": "您确定要删除 API 密钥 '{{name}}' 吗？",
|
||||
"description": "在这里，您可以创建和管理您的聊天机器人。聊天机器人可以作为小部件部署到网站上，或在您的应用程序中使用。"
|
||||
},
|
||||
"analytics": {
|
||||
"label": "分析",
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function ConfirmationModal({
|
||||
>
|
||||
<div className="relative">
|
||||
<div>
|
||||
<p className="font-base mb-1 w-[90%] text-lg text-jet dark:text-bright-gray">
|
||||
<p className="font-base mb-1 w-[90%] text-lg break-words text-jet dark:text-bright-gray">
|
||||
{message}
|
||||
</p>
|
||||
<div>
|
||||
|
||||
@@ -98,111 +98,132 @@ export default function APIKeys() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="mt-8">
|
||||
<div className="flex flex-col max-w-[876px]">
|
||||
<div className="flex justify-end">
|
||||
<div className="flex flex-col w-full mt-8 max-w-full overflow-hidden">
|
||||
<div className="flex flex-col relative flex-grow">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-base font-medium text-sonic-silver">
|
||||
{t('settings.apiKeys.description')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 flex flex-col sm:flex-row justify-end items-start sm:items-center gap-3">
|
||||
<button
|
||||
onClick={() => setCreateModal(true)}
|
||||
className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
|
||||
className="rounded-full w-full sm:w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
|
||||
title={t('settings.apiKeys.createNew')}
|
||||
>
|
||||
{t('settings.apiKeys.createNew')}
|
||||
</button>
|
||||
</div>
|
||||
{isCreateModalOpen && (
|
||||
<CreateAPIKeyModal
|
||||
createAPIKey={handleCreateKey}
|
||||
close={() => setCreateModal(false)}
|
||||
/>
|
||||
)}
|
||||
{isSaveKeyModalOpen && (
|
||||
<SaveAPIKeyModal
|
||||
apiKey={newKey}
|
||||
close={() => setSaveKeyModal(false)}
|
||||
/>
|
||||
)}
|
||||
{keyToDelete && (
|
||||
<ConfirmationModal
|
||||
message={t('settings.apiKeys.deleteConfirmation', {
|
||||
name: keyToDelete.name,
|
||||
})}
|
||||
modalState="ACTIVE"
|
||||
setModalState={() => setKeyToDelete(null)}
|
||||
submitLabel={t('modals.deleteConv.delete')}
|
||||
handleSubmit={() => handleDeleteKey(keyToDelete.id)}
|
||||
handleCancel={() => setKeyToDelete(null)}
|
||||
/>
|
||||
)}
|
||||
<div className="mt-[27px] w-full">
|
||||
<div className="w-full overflow-x-auto">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex-grow">
|
||||
<div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
|
||||
<table className="min-w-full divide-y divide-silver dark:divide-silver/40">
|
||||
<thead>
|
||||
<tr className="text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
|
||||
<th scope="col" className="p-2">
|
||||
{t('settings.apiKeys.name')}
|
||||
</th>
|
||||
<th scope="col" className="p-2">
|
||||
{t('settings.apiKeys.sourceDoc')}
|
||||
</th>
|
||||
<th scope="col" className="p-2">
|
||||
{t('settings.apiKeys.key')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="p-2"
|
||||
aria-label="Actions"
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
|
||||
{loading ? (
|
||||
<SkeletonLoader component="chatbot" />
|
||||
) : !apiKeys?.length ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="!p-4 text-gray-800 dark:text-neutral-200 text-center"
|
||||
>
|
||||
{t('settings.apiKeys.noData')}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
Array.isArray(apiKeys) &&
|
||||
apiKeys.map((element, index) => (
|
||||
<tr
|
||||
key={element.id}
|
||||
className="text-nowrap whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200 p-2"
|
||||
>
|
||||
<td className="p-2">{element.name}</td>
|
||||
<td className="p-2">{element.source}</td>
|
||||
<td className="p-2">{element.key}</td>
|
||||
<td className="p-2">
|
||||
|
||||
<div className="relative w-full">
|
||||
<div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
|
||||
<div className="overflow-x-auto table-scroll">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-300 dark:border-silver/40">
|
||||
<th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[35%]">
|
||||
{t('settings.apiKeys.name')}
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[35%]">
|
||||
{t('settings.apiKeys.sourceDoc')}
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[25%]">
|
||||
<span className="hidden sm:inline">
|
||||
{t('settings.apiKeys.key')}
|
||||
</span>
|
||||
<span className="sm:hidden">
|
||||
{t('settings.apiKeys.key')}
|
||||
</span>
|
||||
</th>
|
||||
<th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[5%]">
|
||||
<span className="sr-only">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-300 dark:divide-silver/40">
|
||||
{loading ? (
|
||||
<SkeletonLoader component="table" />
|
||||
) : !apiKeys?.length ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
|
||||
>
|
||||
{t('settings.apiKeys.noData')}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
Array.isArray(apiKeys) &&
|
||||
apiKeys.map((element) => (
|
||||
<tr
|
||||
key={element.id}
|
||||
className="group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
>
|
||||
<td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] min-w-48 max-w-0">
|
||||
<div className="truncate" title={element.name}>
|
||||
{element.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] min-w-48 max-w-0">
|
||||
<div className="truncate" title={element.source}>
|
||||
{element.source}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-sm font-mono text-gray-700 dark:text-[#E0E0E0] w-[25%]">
|
||||
<div className="truncate" title={element.key}>
|
||||
{element.key}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right w-[5%]">
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() =>
|
||||
setKeyToDelete({
|
||||
id: element.id,
|
||||
name: element.name,
|
||||
})
|
||||
}
|
||||
className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
|
||||
>
|
||||
<img
|
||||
src={Trash}
|
||||
alt={`Delete ${element.name}`}
|
||||
className="h-4 w-4 cursor-pointer hover:opacity-50 mx-auto"
|
||||
id={`img-${index}`}
|
||||
onClick={() =>
|
||||
setKeyToDelete({
|
||||
id: element.id,
|
||||
name: element.name,
|
||||
})
|
||||
}
|
||||
alt={t('convTile.delete')}
|
||||
className="h-4 w-4 opacity-60 hover:opacity-100"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isCreateModalOpen && (
|
||||
<CreateAPIKeyModal
|
||||
createAPIKey={handleCreateKey}
|
||||
close={() => setCreateModal(false)}
|
||||
/>
|
||||
)}
|
||||
{isSaveKeyModalOpen && (
|
||||
<SaveAPIKeyModal apiKey={newKey} close={() => setSaveKeyModal(false)} />
|
||||
)}
|
||||
{keyToDelete && (
|
||||
<ConfirmationModal
|
||||
message={t('settings.apiKeys.deleteConfirmation', {
|
||||
name: keyToDelete.name,
|
||||
})}
|
||||
modalState="ACTIVE"
|
||||
setModalState={() => setKeyToDelete(null)}
|
||||
submitLabel={t('modals.deleteConv.delete')}
|
||||
handleSubmit={() => handleDeleteKey(keyToDelete.id)}
|
||||
handleCancel={() => setKeyToDelete(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -176,14 +176,14 @@ export default function Documents({
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col mt-8">
|
||||
<div className="flex flex-col mt-8 w-full max-w-full overflow-hidden">
|
||||
<div className="flex flex-col relative flex-grow">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-base font-medium text-sonic-silver">
|
||||
{t('settings.documents.title')}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="my-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
|
||||
<div className="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
|
||||
<div className="w-full sm:w-auto">
|
||||
<label htmlFor="document-search-input" className="sr-only">
|
||||
{t('settings.documents.searchPlaceholder')}
|
||||
@@ -213,117 +213,121 @@ export default function Documents({
|
||||
{t('settings.documents.addNew')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col flex-grow">
|
||||
{' '}
|
||||
<div className="relative w-full">
|
||||
<div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
|
||||
<table className="w-full min-w-[640px] table-auto">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-300 dark:border-silver/40">
|
||||
<th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
|
||||
{t('settings.documents.name')}
|
||||
</th>
|
||||
<th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[20%]">
|
||||
<div className="flex justify-center items-center">
|
||||
{t('settings.documents.date')}
|
||||
<img
|
||||
className="cursor-pointer ml-2"
|
||||
onClick={() => refreshDocs('date')}
|
||||
src={caretSort}
|
||||
alt="sort"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[25%]">
|
||||
<div className="flex justify-center items-center">
|
||||
<span className="hidden sm:inline">
|
||||
{t('settings.documents.tokenUsage')}
|
||||
<div className="overflow-x-auto table-scroll">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-300 dark:border-silver/40">
|
||||
<th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
|
||||
{t('settings.documents.name')}
|
||||
</th>
|
||||
<th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[20%]">
|
||||
<div className="flex justify-center items-center">
|
||||
{t('settings.documents.date')}
|
||||
<img
|
||||
className="cursor-pointer ml-2"
|
||||
onClick={() => refreshDocs('date')}
|
||||
src={caretSort}
|
||||
alt="sort"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[25%]">
|
||||
<div className="flex justify-center items-center">
|
||||
<span className="hidden sm:inline">
|
||||
{t('settings.documents.tokenUsage')}
|
||||
</span>
|
||||
<span className="sm:hidden">
|
||||
{t('settings.documents.tokenUsage')}
|
||||
</span>
|
||||
<img
|
||||
className="cursor-pointer ml-2"
|
||||
onClick={() => refreshDocs('tokens')}
|
||||
src={caretSort}
|
||||
alt="sort"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[10%]">
|
||||
<span className="sr-only">
|
||||
{t('settings.documents.actions')}
|
||||
</span>
|
||||
<span className="sm:hidden">
|
||||
{t('settings.documents.tokenUsage')}
|
||||
</span>
|
||||
<img
|
||||
className="cursor-pointer ml-2"
|
||||
onClick={() => refreshDocs('tokens')}
|
||||
src={caretSort}
|
||||
alt="sort"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[10%]">
|
||||
<span className="sr-only">
|
||||
{t('settings.documents.actions')}
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-300 dark:divide-silver/40">
|
||||
{loading ? (
|
||||
<SkeletonLoader component="table" />
|
||||
) : !currentDocuments?.length ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
|
||||
>
|
||||
{t('settings.documents.noData')}
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
) : (
|
||||
currentDocuments.map((document, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="group transition-colors"
|
||||
onClick={() => setShowDocumentChunks(document)}
|
||||
>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-300 dark:divide-silver/40">
|
||||
{loading ? (
|
||||
<SkeletonLoader component="table" />
|
||||
) : !currentDocuments?.length ? (
|
||||
<tr>
|
||||
<td
|
||||
className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
|
||||
title={document.name}
|
||||
colSpan={4}
|
||||
className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
|
||||
>
|
||||
{document.name}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
|
||||
{document.date ? formatDate(document.date) : ''}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
|
||||
{document.tokens ? formatTokens(+document.tokens) : ''}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
{!document.syncFrequency && (
|
||||
<div className="w-8"></div>
|
||||
)}
|
||||
{document.syncFrequency && (
|
||||
<DropdownMenu
|
||||
name={t('settings.documents.sync')}
|
||||
options={syncOptions}
|
||||
onSelect={(value: string) => {
|
||||
handleManageSync(document, value);
|
||||
}}
|
||||
defaultValue={document.syncFrequency}
|
||||
icon={SyncIcon}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
handleDeleteConfirmation(index, document);
|
||||
}}
|
||||
className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
|
||||
>
|
||||
<img
|
||||
src={Trash}
|
||||
alt={t('convTile.delete')}
|
||||
className="h-4 w-4 opacity-60 hover:opacity-100"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{t('settings.documents.noData')}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
currentDocuments.map((document, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="group transition-colors cursor-pointer"
|
||||
onClick={() => setShowDocumentChunks(document)}
|
||||
>
|
||||
<td
|
||||
className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] min-w-48 max-w-0 truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
|
||||
title={document.name}
|
||||
>
|
||||
{document.name}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
|
||||
{document.date ? formatDate(document.date) : ''}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
|
||||
{document.tokens
|
||||
? formatTokens(+document.tokens)
|
||||
: ''}
|
||||
</td>
|
||||
<td
|
||||
className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
|
||||
onClick={(e) => e.stopPropagation()} // Stop event propagation for the entire actions cell
|
||||
>
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
{!document.syncFrequency && (
|
||||
<div className="w-8"></div>
|
||||
)}
|
||||
{document.syncFrequency && (
|
||||
<DropdownMenu
|
||||
name={t('settings.documents.sync')}
|
||||
options={syncOptions}
|
||||
onSelect={(value: string) => {
|
||||
handleManageSync(document, value);
|
||||
}}
|
||||
defaultValue={document.syncFrequency}
|
||||
icon={SyncIcon}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
handleDeleteConfirmation(index, document);
|
||||
}}
|
||||
className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
|
||||
>
|
||||
<img
|
||||
src={Trash}
|
||||
alt={t('convTile.delete')}
|
||||
className="h-4 w-4 opacity-60 hover:opacity-100"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user