michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[CHORE] Consistent table styling across settings pages (#3597)

Browse Source 
make all tables styling consistent across settings pages

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield 2025-04-07 12:32:32 -07:00 committed by GitHub
parent 56eb74c664
commit a5e7d87bed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 153 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
View File

@ -42,38 +42,34 @@ export default function InviteRow({ invite }) {
<>
<tr
ref={rowRef}
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
>
<td scope="row" className="px-6 py-4 whitespace-nowrap">
<td scope="row" className="px-6 whitespace-nowrap">
{titleCase(status)}
</td>
<td className="px-6 py-4">
<td className="px-6">
{invite.claimedBy
? invite.claimedBy?.username || "deleted user"
: "--"}
</td>
<td className="px-6 py-4">
{invite.createdBy?.username || "deleted user"}
</td>
<td className="px-6 py-4">{invite.createdAt}</td>
<td className="px-6 py-4 flex items-center gap-x-6">
<td className="px-6">{invite.createdBy?.username || "deleted user"}</td>
<td className="px-6">{invite.createdAt}</td>
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
{status === "pending" && (
<>
<button
onClick={copyInviteLink}
disabled={copied}
className="border-none font-medium text-blue-300 rounded-lg hover:text-blue-400 hover:underline"
className="text-xs font-medium text-blue-300 rounded-lg hover:text-blue-400 hover:underline"
>
{copied ? "Copied" : "Copy Invite Link"}
</button>
<td className="px-6 py-4 flex items-center gap-x-6">
<button
onClick={handleDelete}
className="border-none font-medium text-theme-text-primary hover:text-red-500 px-2 py-1 rounded-lg"
>
<Trash className="h-5 w-5" />
</button>
</td>
<button
onClick={handleDelete}
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
<Trash className="h-5 w-5" />
</button>
</>
)}
</td>

2
frontend/src/pages/Admin/Invitations/index.jsx
View File

@ -84,7 +84,7 @@ function InvitationsContainer() {
}
return (
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">

18
frontend/src/pages/Admin/Logging/LogRow/index.jsx
View File

@ -27,35 +27,35 @@ export default function LogRow({ log }) {
<>
<tr
onClick={handleRowClick}
className={`bg-transparent text-white text-opacity-80 text-sm font-medium ${
className={`bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10 ${
hasMetadata ? "cursor-pointer hover:bg-white/5" : ""
}`}
>
<EventBadge event={log.event} />
<td className="px-6 py-4 border-transparent transform transition-transform duration-200">
<td className="px-6 border-transparent transform transition-transform duration-200">
{log.user.username}
</td>
<td className="px-6 py-4 border-transparent transform transition-transform duration-200">
<td className="px-6 border-transparent transform transition-transform duration-200">
{log.occurredAt}
</td>
{hasMetadata && (
<>
<div className="mt-1">
{expanded ? (
<td
className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200 hover:scale-105`}
className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200`}
>
<CaretUp weight="bold" size={20} />
<p className="text-xs text-white/50 w-[20px]">hide</p>
</td>
) : (
<td
className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200 hover:scale-105`}
className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200`}
>
<CaretDown weight="bold" size={20} />
<p className="text-xs text-white/50 w-[20px]">show</p>
</td>
)}
</>
</div>
)}
</tr>
<EventMetadata metadata={metadata} expanded={expanded} />
@ -106,9 +106,9 @@ const EventBadge = ({ event }) => {
};
return (
<td className="px-6 py-4 font-medium whitespace-nowrap text-white flex items-center">
<td className="px-6 py-2 font-medium whitespace-nowrap text-white flex items-center">
<span
className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-sm font-medium ${colorTheme.text} shadow-sm`}
className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-xs font-medium ${colorTheme.text} shadow-sm`}
>
{event}
</span>

2
frontend/src/pages/Admin/Logging/index.jsx
View File

@ -120,7 +120,7 @@ function LogsContainer({
return (
<>
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">

19
frontend/src/pages/Admin/SystemPromptVariables/VariableRow/index.jsx
View File

@ -6,6 +6,7 @@ import ModalWrapper from "@/components/ModalWrapper";
import EditVariableModal from "./EditVariableModal";
import { titleCase } from "text-case";
import truncate from "truncate";
import { Trash } from "@phosphor-icons/react";
/**
* A row component for displaying a system prompt variable
@ -63,40 +64,40 @@ export default function VariableRow({ variable, onRefresh }) {
<>
<tr
ref={rowRef}
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
>
<th scope="row" className="px-6 py-4 whitespace-nowrap">
<th scope="row" className="px-4 py-2 whitespace-nowrap">
{variable.key}
</th>
<td className="px-6 py-4">
<td className="px-4 py-2">
{typeof variable.value === "function"
? variable.value()
: truncate(variable.value, 50)}
</td>
<td className="px-6 py-4">
<td className="px-4 py-2">
{truncate(variable.description || "-", 50)}
</td>
<td className="px-6 py-4">
<td className="px-4 py-2">
<span
className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-xs leading-5 font-semibold ${colorTheme.text} shadow-sm`}
>
{titleCase(variable.type)}
</span>
</td>
<td className="px-6 py-4 flex items-center justify-end gap-x-6">
<td className="px-4 py-2 flex items-center justify-end gap-x-4">
{variable.type === "static" && (
<>
<button
onClick={openModal}
className="text-sm font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
className="text-xs font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
>
Edit
</button>
<button
onClick={handleDelete}
className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
Delete
<Trash className="h-4 w-4" />
</button>
</>
)}

8
frontend/src/pages/Admin/SystemPromptVariables/index.jsx
View File

@ -83,16 +83,16 @@ export default function SystemPromptVariables() {
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">
<th scope="col" className="px-4 py-2 rounded-tl-lg">
Key
</th>
<th scope="col" className="px-6 py-3">
<th scope="col" className="px-4 py-2">
Value
</th>
<th scope="col" className="px-6 py-3">
<th scope="col" className="px-4 py-2">
Description
</th>
<th scope="col" className="px-6 py-3">
<th scope="col" className="px-4 py-2">
Type
</th>
</tr>

16
frontend/src/pages/Admin/Users/UserRow/index.jsx
View File

@ -57,18 +57,18 @@ export default function UserRow({ currUser, user }) {
<>
<tr
ref={rowRef}
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
>
<th scope="row" className="px-6 py-4 whitespace-nowrap">
<th scope="row" className="px-6 whitespace-nowrap">
{user.username}
</th>
<td className="px-6 py-4">{titleCase(user.role)}</td>
<td className="px-6 py-4">{user.createdAt}</td>
<td className="px-6 py-4 flex items-center gap-x-6">
<td className="px-6">{titleCase(user.role)}</td>
<td className="px-6">{user.createdAt}</td>
<td className="px-6 flex items-center gap-x-6 h-full mt-2">
{canModify && (
<button
onClick={openModal}
className="text-sm font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
className="text-xs font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
>
Edit
</button>
@ -77,13 +77,13 @@ export default function UserRow({ currUser, user }) {
<>
<button
onClick={handleSuspend}
className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-orange-500 hover:text-orange-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-orange-50 hover:bg-opacity-10"
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-orange-500 hover:text-orange-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-orange-50 hover:bg-opacity-10"
>
{suspended ? "Unsuspend" : "Suspend"}
</button>
<button
onClick={handleDelete}
className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
Delete
</button>

2
frontend/src/pages/Admin/Users/index.jsx
View File

@ -84,7 +84,7 @@ function UsersContainer() {
}
return (
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">

16
frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
View File

@ -20,22 +20,22 @@ export default function WorkspaceRow({ workspace, users }) {
<>
<tr
ref={rowRef}
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
>
<th scope="row" className="px-6 py-4 whitespace-nowrap">
<th scope="row" className="px-6 whitespace-nowrap">
{workspace.name}
</th>
<td className="px-6 py-4 flex items-center">
<td className="px-6 flex items-center">
<a
href={paths.workspace.chat(workspace.slug)}
target="_blank"
rel="noreferrer"
className="text-white flex items-center hover:underline"
>
<LinkSimple className="mr-2 w-5 h-5" /> {workspace.slug}
<LinkSimple className="mr-2 w-4 h-4" /> {workspace.slug}
</a>
</td>
<td className="px-6 py-4">
<td className="px-6">
<a
href={paths.workspace.settings.members(workspace.slug)}
className="text-white flex items-center underline"
@ -43,11 +43,11 @@ export default function WorkspaceRow({ workspace, users }) {
{workspace.userIds?.length}
</a>
</td>
<td className="px-6 py-4">{workspace.createdAt}</td>
<td className="px-6 py-4 flex items-center gap-x-6">
<td className="px-6">{workspace.createdAt}</td>
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
<button
onClick={handleDelete}
className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
<Trash className="h-5 w-5" />
</button>

2
frontend/src/pages/Admin/Workspaces/index.jsx
View File

@ -84,7 +84,7 @@ function WorkspacesContainer() {
}
return (
<table className="w-full text-sm text-left rounded-lg mt-6 min-w-[640px]">
<table className="w-full text-xs text-left rounded-lg mt-6 min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">

16
frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
View File

@ -46,26 +46,24 @@ export default function ApiKeyRow({ apiKey }) {
<>
<tr
ref={rowRef}
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
>
<td scope="row" className="px-6 py-4 whitespace-nowrap">
<td scope="row" className="px-6 whitespace-nowrap">
{apiKey.secret}
</td>
<td className="px-6 py-4 text-center">
{apiKey.createdBy?.username || "--"}
</td>
<td className="px-6 py-4">{apiKey.createdAt}</td>
<td className="px-6 py-4 flex items-center gap-x-6">
<td className="px-6 text-left">{apiKey.createdBy?.username || "--"}</td>
<td className="px-6">{apiKey.createdAt}</td>
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
<button
onClick={copyApiKey}
disabled={copied}
className="border-none font-medium text-blue-300 rounded-lg hover:text-white hover:light:text-blue-500 hover:text-opacity-60 hover:underline"
className="text-xs font-medium text-blue-300 rounded-lg hover:text-white hover:light:text-blue-500 hover:text-opacity-60 hover:underline"
>
{copied ? "Copied" : "Copy API Key"}
</button>
<button
onClick={handleDelete}
className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
<Trash className="h-5 w-5" />
</button>

2
frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
View File

@ -96,7 +96,7 @@ function ApiKeysContainer() {
}
return (
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">

60
frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx
View File

@ -58,48 +58,50 @@ export default function BrowserExtensionApiKeyRow({
return (
<tr
ref={rowRef}
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
>
<td scope="row" className="px-6 py-4 whitespace-nowrap flex items-center">
<span className="mr-2 font-mono">{connectionString}</span>
<div className="flex items-center space-x-2">
<button
onClick={handleCopy}
data-tooltip-id="copy-connection-text"
data-tooltip-content="Copy connection string"
className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
>
{copied ? (
<Check className="h-5 w-5 text-green-500" />
) : (
<Copy className="h-5 w-5" />
)}
</button>
<td scope="row" className="px-6 py-2 whitespace-nowrap">
<div className="flex items-center">
<span className="mr-2 font-mono">{connectionString}</span>
<div className="flex items-center space-x-2">
<button
onClick={handleCopy}
data-tooltip-id="copy-connection-text"
data-tooltip-content="Copy connection string"
className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
>
{copied ? (
<Check className="h-4 w-4 text-green-500" />
) : (
<Copy className="h-4 w-4" />
)}
</button>
<button
onClick={handleConnect}
data-tooltip-id="auto-connection"
data-tooltip-content="Automatically connect to extension"
className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
>
<Plug className="h-5 w-5" />
</button>
<button
onClick={handleConnect}
data-tooltip-id="auto-connection"
data-tooltip-content="Automatically connect to extension"
className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
>
<Plug className="h-4 w-4" />
</button>
</div>
</div>
</td>
{isMultiUser && (
<td className="px-6 py-4">
<td className="px-6 py-2">
{apiKey.user ? apiKey.user.username : "N/A"}
</td>
)}
<td className="px-6 py-4">
<td className="px-6 py-2">
{new Date(apiKey.createdAt).toLocaleString()}
</td>
<td className="px-6 py-4">
<td className="px-6 py-2">
<button
onClick={handleRevoke}
className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
<Trash className="h-5 w-5" />
<Trash className="h-4 w-4" />
</button>
</td>
</tr>

10
frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
View File

@ -81,21 +81,21 @@ export default function BrowserExtensionApiKeys() {
) : error ? (
<div className="text-red-500 mt-6">Error: {error}</div>
) : (
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0 md:mt-6 mt-0">
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0 md:mt-6 mt-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">
<th scope="col" className="px-6 py-2 rounded-tl-lg">
Extension Connection String
</th>
{isMultiUser && (
<th scope="col" className="px-6 py-3">
<th scope="col" className="px-6 py-2">
Created By
</th>
)}
<th scope="col" className="px-6 py-3">
<th scope="col" className="px-6 py-2">
Created At
</th>
<th scope="col" className="px-6 py-3 rounded-tr-lg">
<th scope="col" className="px-6 py-2 rounded-tr-lg">
Actions
</th>
</tr>

18
frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
View File

@ -45,31 +45,31 @@ export default function ChatRow({ chat, onDelete }) {
return (
<>
<tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
<td className="px-6 py-4 font-medium whitespace-nowrap text-white">
<tr className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10">
<td className="px-6 font-medium whitespace-nowrap text-white">
{chat.id}
</td>
<td className="px-6 py-4 font-medium whitespace-nowrap text-white">
<td className="px-6 font-medium whitespace-nowrap text-white">
{chat.user?.username}
</td>
<td className="px-6 py-4">{chat.workspace?.name}</td>
<td className="px-6">{chat.workspace?.name}</td>
<td
onClick={openPromptModal}
className="px-6 py-4 border-transparent cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
className="px-6 border-transparent cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
>
{truncate(chat.prompt, 40)}
</td>
<td
onClick={openResponseModal}
className="px-6 py-4 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
className="px-6 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
>
{truncate(parseText(chat.response), 40)}
</td>
<td className="px-6 py-4">{chat.createdAt}</td>
<td className="px-6 py-4 flex items-center gap-x-6">
<td className="px-6">{chat.createdAt}</td>
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
<button
onClick={handleDelete}
className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
<Trash className="h-5 w-5" />
</button>

6
frontend/src/pages/GeneralSettings/Chats/index.jsx
View File

@ -175,7 +175,7 @@ export default function WorkspaceChats() {
{t("recorded.description")}
</p>
</div>
<div className="overflow-x-auto mt-6">
<div className="overflow-x-auto">
<ChatsContainer
loading={loading}
chats={chats}
@ -230,8 +230,8 @@ function ChatsContainer({
return (
<>
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase light:border-theme-sidebar-border border-white/10 border-b">
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">
{t("recorded.table.id")}

19
frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
View File

@ -35,8 +35,8 @@ export default function ChatRow({ chat, onDelete }) {
return (
<>
<tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
<td className="px-6 py-4 font-medium whitespace-nowrap text-white">
<tr className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10">
<td className="px-6 font-medium whitespace-nowrap text-white">
<a
href={paths.settings.embedSetup()}
target="_blank"
@ -49,32 +49,29 @@ export default function ChatRow({ chat, onDelete }) {
</td>
<td
onClick={openConnectionDetailsModal}
className="px-6 py-4 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
className="px-6 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
>
<div className="flex flex-col">
<p>{truncate(chat.session_id, 20)}</p>
<ConnectionDetails
connection_information={chat.connection_information}
/>
</div>
</td>
<td
onClick={openPromptModal}
className="px-6 py-4 border-transparent cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
className="px-6 border-transparent cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
>
{truncate(chat.prompt, 40)}
</td>
<td
onClick={openResponseModal}
className="px-6 py-4 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
className="px-6 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
>
{truncate(JSON.parse(chat.response)?.text, 40)}
</td>
<td className="px-6 py-4">{chat.createdAt}</td>
<td className="px-6 py-4 flex items-center gap-x-6">
<td className="px-6">{chat.createdAt}</td>
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
<button
onClick={handleDelete}
className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
<Trash className="h-5 w-5" />
</button>

2
frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
View File

@ -194,7 +194,7 @@ function ChatsContainer() {
return (
<>
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">

60
frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx
View File

@ -1,5 +1,5 @@
import { useRef, useState } from "react";
import { DotsThreeOutline, LinkSimple } from "@phosphor-icons/react";
import { DotsThreeOutline, LinkSimple, Trash } from "@phosphor-icons/react";
import showToast from "@/utils/toast";
import { useModal } from "@/hooks/useModal";
import ModalWrapper from "@/components/ModalWrapper";
@ -63,11 +63,11 @@ export default function EmbedRow({ embed }) {
<>
<tr
ref={rowRef}
className="bg-transparent text-white text-opacity-80 text-sm"
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
>
<th
scope="row"
className="px-6 py-4 whitespace-nowrap flex item-center gap-x-1"
className="px-6 whitespace-nowrap flex item-center gap-x-1"
>
<a
href={paths.workspace.chat(embed.workspace.slug)}
@ -78,39 +78,37 @@ export default function EmbedRow({ embed }) {
<LinkSimple className="mr-2 w-5 h-5" /> {embed.workspace.name}
</a>
</th>
<th scope="row" className="px-6 py-4 whitespace-nowrap">
<th scope="row" className="px-6 whitespace-nowrap">
{nFormatter(embed._count.embed_chats)}
</th>
<th scope="row" className="px-6 py-4 whitespace-nowrap">
<th scope="row" className="px-6 whitespace-nowrap">
<ActiveDomains domainList={embed.allowlist_domains} />
</th>
<td className="px-6 py-4 flex items-center gap-x-6">
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
<button
onClick={openSettingsModal}
className="font-medium text-white text-opacity-80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:text-opacity-60 hover:bg-white hover:bg-opacity-10"
className="text-xs font-medium text-white text-opacity-80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:text-opacity-60 hover:bg-white hover:bg-opacity-10"
>
<DotsThreeOutline weight="fill" className="h-5 w-5" />
</button>
<>
<button
onClick={openSnippetModal}
className="font-medium text-blue-600 dark:text-blue-300 px-2 py-1 rounded-lg hover:bg-blue-50 hover:dark:bg-blue-800 hover:dark:bg-opacity-20"
>
Show Code
</button>
<button
onClick={handleSuspend}
className="font-medium text-orange-600 dark:text-orange-300 px-2 py-1 rounded-lg hover:bg-orange-50 hover:dark:bg-orange-800 hover:dark:bg-opacity-20"
>
{enabled ? "Disable" : "Enable"}
</button>
<button
onClick={handleDelete}
className="font-medium text-red-600 dark:text-red-300 px-2 py-1 rounded-lg hover:bg-red-50 hover:dark:bg-red-800 hover:dark:bg-opacity-20"
>
Delete
</button>
</>
<button
onClick={openSnippetModal}
className="text-xs font-medium text-blue-600 dark:text-blue-300 px-2 py-1 rounded-lg hover:bg-blue-50 hover:dark:bg-blue-800 hover:dark:bg-opacity-20"
>
Show Code
</button>
<button
onClick={handleSuspend}
className="text-xs font-medium text-orange-600 dark:text-orange-300 px-2 py-1 rounded-lg hover:bg-orange-50 hover:dark:bg-orange-800 hover:dark:bg-opacity-20"
>
{enabled ? "Disable" : "Enable"}
</button>
<button
onClick={handleDelete}
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
>
<Trash className="h-5 w-5" />
</button>
</td>
</tr>
<ModalWrapper isOpen={isSettingsOpen}>
@ -129,8 +127,12 @@ function ActiveDomains({ domainList }) {
const domains = JSON.parse(domainList);
return (
<div className="flex flex-col gap-y-2">
{domains.map((domain) => {
return <p className="font-mono !font-normal">{domain}</p>;
{domains.map((domain, index) => {
return (
<p key={index} className="font-mono !font-normal">
{domain}
</p>
);
})}
</div>
);

2
frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
View File

@ -83,7 +83,7 @@ function EmbedContainer() {
}
return (
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg">