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

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

@ -42,38 +42,34 @@ export default function InviteRow({ invite }) {
<> <>
<tr <tr
ref={rowRef} 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)} {titleCase(status)}
</td> </td>
<td className="px-6 py-4"> <td className="px-6">
{invite.claimedBy {invite.claimedBy
? invite.claimedBy?.username || "deleted user" ? invite.claimedBy?.username || "deleted user"
: "--"} : "--"}
</td> </td>
<td className="px-6 py-4"> <td className="px-6">{invite.createdBy?.username || "deleted user"}</td>
{invite.createdBy?.username || "deleted user"} <td className="px-6">{invite.createdAt}</td>
</td> <td className="px-6 flex items-center gap-x-6 h-full mt-1">
<td className="px-6 py-4">{invite.createdAt}</td>
<td className="px-6 py-4 flex items-center gap-x-6">
{status === "pending" && ( {status === "pending" && (
<> <>
<button <button
onClick={copyInviteLink} onClick={copyInviteLink}
disabled={copied} 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"} {copied ? "Copied" : "Copy Invite Link"}
</button> </button>
<td className="px-6 py-4 flex items-center gap-x-6">
<button <button
onClick={handleDelete} onClick={handleDelete}
className="border-none font-medium text-theme-text-primary hover:text-red-500 px-2 py-1 rounded-lg" 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-5 w-5" />
</button> </button>
</td>
</> </>
)} )}
</td> </td>

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

@ -84,7 +84,7 @@ function InvitationsContainer() {
} }
return ( 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"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <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 <tr
onClick={handleRowClick} 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" : "" hasMetadata ? "cursor-pointer hover:bg-white/5" : ""
}`} }`}
> >
<EventBadge event={log.event} /> <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} {log.user.username}
</td> </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} {log.occurredAt}
</td> </td>
{hasMetadata && ( {hasMetadata && (
<> <div className="mt-1">
{expanded ? ( {expanded ? (
<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`}
> >
<CaretUp weight="bold" size={20} /> <CaretUp weight="bold" size={20} />
<p className="text-xs text-white/50 w-[20px]">hide</p> <p className="text-xs text-white/50 w-[20px]">hide</p>
</td> </td>
) : ( ) : (
<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} /> <CaretDown weight="bold" size={20} />
<p className="text-xs text-white/50 w-[20px]">show</p> <p className="text-xs text-white/50 w-[20px]">show</p>
</td> </td>
)} )}
</> </div>
)} )}
</tr> </tr>
<EventMetadata metadata={metadata} expanded={expanded} /> <EventMetadata metadata={metadata} expanded={expanded} />
@ -106,9 +106,9 @@ const EventBadge = ({ event }) => {
}; };
return ( 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 <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} {event}
</span> </span>

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

@ -120,7 +120,7 @@ function LogsContainer({
return ( 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"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <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 EditVariableModal from "./EditVariableModal";
import { titleCase } from "text-case"; import { titleCase } from "text-case";
import truncate from "truncate"; import truncate from "truncate";
import { Trash } from "@phosphor-icons/react";
/** /**
* A row component for displaying a system prompt variable * A row component for displaying a system prompt variable
@ -63,40 +64,40 @@ export default function VariableRow({ variable, onRefresh }) {
<> <>
<tr <tr
ref={rowRef} 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} {variable.key}
</th> </th>
<td className="px-6 py-4"> <td className="px-4 py-2">
{typeof variable.value === "function" {typeof variable.value === "function"
? variable.value() ? variable.value()
: truncate(variable.value, 50)} : truncate(variable.value, 50)}
</td> </td>
<td className="px-6 py-4"> <td className="px-4 py-2">
{truncate(variable.description || "-", 50)} {truncate(variable.description || "-", 50)}
</td> </td>
<td className="px-6 py-4"> <td className="px-4 py-2">
<span <span
className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-xs leading-5 font-semibold ${colorTheme.text} shadow-sm`} className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-xs leading-5 font-semibold ${colorTheme.text} shadow-sm`}
> >
{titleCase(variable.type)} {titleCase(variable.type)}
</span> </span>
</td> </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" && ( {variable.type === "static" && (
<> <>
<button <button
onClick={openModal} 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 Edit
</button> </button>
<button <button
onClick={handleDelete} 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> </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"> <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"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <th scope="col" className="px-4 py-2 rounded-tl-lg">
Key Key
</th> </th>
<th scope="col" className="px-6 py-3"> <th scope="col" className="px-4 py-2">
Value Value
</th> </th>
<th scope="col" className="px-6 py-3"> <th scope="col" className="px-4 py-2">
Description Description
</th> </th>
<th scope="col" className="px-6 py-3"> <th scope="col" className="px-4 py-2">
Type Type
</th> </th>
</tr> </tr>

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

@ -57,18 +57,18 @@ export default function UserRow({ currUser, user }) {
<> <>
<tr <tr
ref={rowRef} 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} {user.username}
</th> </th>
<td className="px-6 py-4">{titleCase(user.role)}</td> <td className="px-6">{titleCase(user.role)}</td>
<td className="px-6 py-4">{user.createdAt}</td> <td className="px-6">{user.createdAt}</td>
<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-2">
{canModify && ( {canModify && (
<button <button
onClick={openModal} 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 Edit
</button> </button>
@ -77,13 +77,13 @@ export default function UserRow({ currUser, user }) {
<> <>
<button <button
onClick={handleSuspend} 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"} {suspended ? "Unsuspend" : "Suspend"}
</button> </button>
<button <button
onClick={handleDelete} 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 Delete
</button> </button>

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

@ -84,7 +84,7 @@ function UsersContainer() {
} }
return ( 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"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <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 <tr
ref={rowRef} 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} {workspace.name}
</th> </th>
<td className="px-6 py-4 flex items-center"> <td className="px-6 flex items-center">
<a <a
href={paths.workspace.chat(workspace.slug)} href={paths.workspace.chat(workspace.slug)}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-white flex items-center hover:underline" 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> </a>
</td> </td>
<td className="px-6 py-4"> <td className="px-6">
<a <a
href={paths.workspace.settings.members(workspace.slug)} href={paths.workspace.settings.members(workspace.slug)}
className="text-white flex items-center underline" className="text-white flex items-center underline"
@ -43,11 +43,11 @@ export default function WorkspaceRow({ workspace, users }) {
{workspace.userIds?.length} {workspace.userIds?.length}
</a> </a>
</td> </td>
<td className="px-6 py-4">{workspace.createdAt}</td> <td className="px-6">{workspace.createdAt}</td>
<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 <button
onClick={handleDelete} 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" /> <Trash className="h-5 w-5" />
</button> </button>

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

@ -84,7 +84,7 @@ function WorkspacesContainer() {
} }
return ( 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"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <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 <tr
ref={rowRef} 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} {apiKey.secret}
</td> </td>
<td className="px-6 py-4 text-center"> <td className="px-6 text-left">{apiKey.createdBy?.username || "--"}</td>
{apiKey.createdBy?.username || "--"} <td className="px-6">{apiKey.createdAt}</td>
</td> <td className="px-6 flex items-center gap-x-6 h-full mt-1">
<td className="px-6 py-4">{apiKey.createdAt}</td>
<td className="px-6 py-4 flex items-center gap-x-6">
<button <button
onClick={copyApiKey} onClick={copyApiKey}
disabled={copied} 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"} {copied ? "Copied" : "Copy API Key"}
</button> </button>
<button <button
onClick={handleDelete} 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" /> <Trash className="h-5 w-5" />
</button> </button>

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

@ -96,7 +96,7 @@ function ApiKeysContainer() {
} }
return ( 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"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <th scope="col" className="px-6 py-3 rounded-tl-lg">

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

@ -58,9 +58,10 @@ export default function BrowserExtensionApiKeyRow({
return ( return (
<tr <tr
ref={rowRef} 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"> <td scope="row" className="px-6 py-2 whitespace-nowrap">
<div className="flex items-center">
<span className="mr-2 font-mono">{connectionString}</span> <span className="mr-2 font-mono">{connectionString}</span>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<button <button
@ -70,9 +71,9 @@ export default function BrowserExtensionApiKeyRow({
className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded" className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
> >
{copied ? ( {copied ? (
<Check className="h-5 w-5 text-green-500" /> <Check className="h-4 w-4 text-green-500" />
) : ( ) : (
<Copy className="h-5 w-5" /> <Copy className="h-4 w-4" />
)} )}
</button> </button>
@ -82,24 +83,25 @@ export default function BrowserExtensionApiKeyRow({
data-tooltip-content="Automatically connect to extension" 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" 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" /> <Plug className="h-4 w-4" />
</button> </button>
</div> </div>
</div>
</td> </td>
{isMultiUser && ( {isMultiUser && (
<td className="px-6 py-4"> <td className="px-6 py-2">
{apiKey.user ? apiKey.user.username : "N/A"} {apiKey.user ? apiKey.user.username : "N/A"}
</td> </td>
)} )}
<td className="px-6 py-4"> <td className="px-6 py-2">
{new Date(apiKey.createdAt).toLocaleString()} {new Date(apiKey.createdAt).toLocaleString()}
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-2">
<button <button
onClick={handleRevoke} 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> </button>
</td> </td>
</tr> </tr>

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

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

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

@ -45,31 +45,31 @@ export default function ChatRow({ chat, onDelete }) {
return ( return (
<> <>
<tr className="bg-transparent text-white text-opacity-80 text-sm font-medium"> <tr className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10">
<td className="px-6 py-4 font-medium whitespace-nowrap text-white"> <td className="px-6 font-medium whitespace-nowrap text-white">
{chat.id} {chat.id}
</td> </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} {chat.user?.username}
</td> </td>
<td className="px-6 py-4">{chat.workspace?.name}</td> <td className="px-6">{chat.workspace?.name}</td>
<td <td
onClick={openPromptModal} 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)} {truncate(chat.prompt, 40)}
</td> </td>
<td <td
onClick={openResponseModal} 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)} {truncate(parseText(chat.response), 40)}
</td> </td>
<td className="px-6 py-4">{chat.createdAt}</td> <td className="px-6">{chat.createdAt}</td>
<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 <button
onClick={handleDelete} 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" /> <Trash className="h-5 w-5" />
</button> </button>

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

@ -175,7 +175,7 @@ export default function WorkspaceChats() {
{t("recorded.description")} {t("recorded.description")}
</p> </p>
</div> </div>
<div className="overflow-x-auto mt-6"> <div className="overflow-x-auto">
<ChatsContainer <ChatsContainer
loading={loading} loading={loading}
chats={chats} chats={chats}
@ -230,8 +230,8 @@ function ChatsContainer({
return ( 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 light:border-theme-sidebar-border border-white/10 border-b"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <th scope="col" className="px-6 py-3 rounded-tl-lg">
{t("recorded.table.id")} {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 ( return (
<> <>
<tr className="bg-transparent text-white text-opacity-80 text-sm font-medium"> <tr className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10">
<td className="px-6 py-4 font-medium whitespace-nowrap text-white"> <td className="px-6 font-medium whitespace-nowrap text-white">
<a <a
href={paths.settings.embedSetup()} href={paths.settings.embedSetup()}
target="_blank" target="_blank"
@ -49,32 +49,29 @@ export default function ChatRow({ chat, onDelete }) {
</td> </td>
<td <td
onClick={openConnectionDetailsModal} 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"> <div className="flex flex-col">
<p>{truncate(chat.session_id, 20)}</p> <p>{truncate(chat.session_id, 20)}</p>
<ConnectionDetails
connection_information={chat.connection_information}
/>
</div> </div>
</td> </td>
<td <td
onClick={openPromptModal} 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)} {truncate(chat.prompt, 40)}
</td> </td>
<td <td
onClick={openResponseModal} 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)} {truncate(JSON.parse(chat.response)?.text, 40)}
</td> </td>
<td className="px-6 py-4">{chat.createdAt}</td> <td className="px-6">{chat.createdAt}</td>
<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 <button
onClick={handleDelete} 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" /> <Trash className="h-5 w-5" />
</button> </button>

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

@ -194,7 +194,7 @@ function ChatsContainer() {
return ( 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"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <th scope="col" className="px-6 py-3 rounded-tl-lg">

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

@ -1,5 +1,5 @@
import { useRef, useState } from "react"; 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 showToast from "@/utils/toast";
import { useModal } from "@/hooks/useModal"; import { useModal } from "@/hooks/useModal";
import ModalWrapper from "@/components/ModalWrapper"; import ModalWrapper from "@/components/ModalWrapper";
@ -63,11 +63,11 @@ export default function EmbedRow({ embed }) {
<> <>
<tr <tr
ref={rowRef} 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 <th
scope="row" 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 <a
href={paths.workspace.chat(embed.workspace.slug)} 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} <LinkSimple className="mr-2 w-5 h-5" /> {embed.workspace.name}
</a> </a>
</th> </th>
<th scope="row" className="px-6 py-4 whitespace-nowrap"> <th scope="row" className="px-6 whitespace-nowrap">
{nFormatter(embed._count.embed_chats)} {nFormatter(embed._count.embed_chats)}
</th> </th>
<th scope="row" className="px-6 py-4 whitespace-nowrap"> <th scope="row" className="px-6 whitespace-nowrap">
<ActiveDomains domainList={embed.allowlist_domains} /> <ActiveDomains domainList={embed.allowlist_domains} />
</th> </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 <button
onClick={openSettingsModal} 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" /> <DotsThreeOutline weight="fill" className="h-5 w-5" />
</button> </button>
<>
<button <button
onClick={openSnippetModal} 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" 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 Show Code
</button> </button>
<button <button
onClick={handleSuspend} 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" 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"} {enabled ? "Disable" : "Enable"}
</button> </button>
<button <button
onClick={handleDelete} 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" 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-5 w-5" />
</button> </button>
</>
</td> </td>
</tr> </tr>
<ModalWrapper isOpen={isSettingsOpen}> <ModalWrapper isOpen={isSettingsOpen}>
@ -129,8 +127,12 @@ function ActiveDomains({ domainList }) {
const domains = JSON.parse(domainList); const domains = JSON.parse(domainList);
return ( return (
<div className="flex flex-col gap-y-2"> <div className="flex flex-col gap-y-2">
{domains.map((domain) => { {domains.map((domain, index) => {
return <p className="font-mono !font-normal">{domain}</p>; return (
<p key={index} className="font-mono !font-normal">
{domain}
</p>
);
})} })}
</div> </div>
); );

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

@ -83,7 +83,7 @@ function EmbedContainer() {
} }
return ( 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"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <th scope="col" className="px-6 py-3 rounded-tl-lg">