218 lines
8.7 KiB
TypeScript
218 lines
8.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import type { PatchInstanceGeneralSettings } from "@paperclipai/shared";
|
|
import { SlidersHorizontal } from "lucide-react";
|
|
import { instanceSettingsApi } from "@/api/instanceSettings";
|
|
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import { cn } from "../lib/utils";
|
|
|
|
const FEEDBACK_TERMS_URL = import.meta.env.VITE_FEEDBACK_TERMS_URL?.trim() || "https://paperclip.ing/tos";
|
|
|
|
export function InstanceGeneralSettings() {
|
|
const { setBreadcrumbs } = useBreadcrumbs();
|
|
const queryClient = useQueryClient();
|
|
const [actionError, setActionError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
setBreadcrumbs([
|
|
{ label: "Instance Settings" },
|
|
{ label: "General" },
|
|
]);
|
|
}, [setBreadcrumbs]);
|
|
|
|
const generalQuery = useQuery({
|
|
queryKey: queryKeys.instance.generalSettings,
|
|
queryFn: () => instanceSettingsApi.getGeneral(),
|
|
});
|
|
|
|
const updateGeneralMutation = useMutation({
|
|
mutationFn: instanceSettingsApi.updateGeneral,
|
|
onSuccess: async () => {
|
|
setActionError(null);
|
|
await queryClient.invalidateQueries({ queryKey: queryKeys.instance.generalSettings });
|
|
},
|
|
onError: (error) => {
|
|
setActionError(error instanceof Error ? error.message : "Failed to update general settings.");
|
|
},
|
|
});
|
|
|
|
if (generalQuery.isLoading) {
|
|
return <div className="text-sm text-muted-foreground">Loading general settings...</div>;
|
|
}
|
|
|
|
if (generalQuery.error) {
|
|
return (
|
|
<div className="text-sm text-destructive">
|
|
{generalQuery.error instanceof Error
|
|
? generalQuery.error.message
|
|
: "Failed to load general settings."}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const censorUsernameInLogs = generalQuery.data?.censorUsernameInLogs === true;
|
|
const keyboardShortcuts = generalQuery.data?.keyboardShortcuts === true;
|
|
const feedbackDataSharingPreference = generalQuery.data?.feedbackDataSharingPreference ?? "prompt";
|
|
|
|
return (
|
|
<div className="max-w-4xl space-y-6">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<SlidersHorizontal className="h-5 w-5 text-muted-foreground" />
|
|
<h1 className="text-lg font-semibold">General</h1>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Configure instance-wide defaults that affect how operator-visible logs are displayed.
|
|
</p>
|
|
</div>
|
|
|
|
{actionError && (
|
|
<div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive">
|
|
{actionError}
|
|
</div>
|
|
)}
|
|
|
|
<section className="rounded-xl border border-border bg-card p-5">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-1.5">
|
|
<h2 className="text-sm font-semibold">Censor username in logs</h2>
|
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
|
Hide the username segment in home-directory paths and similar operator-visible log output. Standalone
|
|
username mentions outside of paths are not yet masked in the live transcript view. This is off by
|
|
default.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
data-slot="toggle"
|
|
aria-label="Toggle username log censoring"
|
|
disabled={updateGeneralMutation.isPending}
|
|
className={cn(
|
|
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60",
|
|
censorUsernameInLogs ? "bg-green-600" : "bg-muted",
|
|
)}
|
|
onClick={() =>
|
|
updateGeneralMutation.mutate({
|
|
censorUsernameInLogs: !censorUsernameInLogs,
|
|
})
|
|
}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
|
|
censorUsernameInLogs ? "translate-x-4.5" : "translate-x-0.5",
|
|
)}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-xl border border-border bg-card p-5">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-1.5">
|
|
<h2 className="text-sm font-semibold">Keyboard shortcuts</h2>
|
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
|
Enable app keyboard shortcuts, including inbox navigation and global shortcuts like creating issues or
|
|
toggling panels. This is off by default.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
data-slot="toggle"
|
|
aria-label="Toggle keyboard shortcuts"
|
|
disabled={updateGeneralMutation.isPending}
|
|
className={cn(
|
|
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60",
|
|
keyboardShortcuts ? "bg-green-600" : "bg-muted",
|
|
)}
|
|
onClick={() => updateGeneralMutation.mutate({ keyboardShortcuts: !keyboardShortcuts })}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
|
|
keyboardShortcuts ? "translate-x-4.5" : "translate-x-0.5",
|
|
)}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-xl border border-border bg-card p-5">
|
|
<div className="space-y-4">
|
|
<div className="space-y-1.5">
|
|
<h2 className="text-sm font-semibold">AI feedback sharing</h2>
|
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
|
Control whether thumbs up and thumbs down votes can send the voted AI output to
|
|
Paperclip Labs. Votes are always saved locally.
|
|
</p>
|
|
{FEEDBACK_TERMS_URL ? (
|
|
<a
|
|
href={FEEDBACK_TERMS_URL}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
|
|
>
|
|
Read our terms of service
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
{feedbackDataSharingPreference === "prompt" ? (
|
|
<div className="rounded-lg border border-border/70 bg-accent/20 px-3 py-2 text-sm text-muted-foreground">
|
|
No default is saved yet. The next thumbs up or thumbs down choice will ask once and
|
|
then save the answer here.
|
|
</div>
|
|
) : null}
|
|
<div className="flex flex-wrap gap-2">
|
|
{[
|
|
{
|
|
value: "allowed",
|
|
label: "Always allow",
|
|
description: "Share voted AI outputs automatically.",
|
|
},
|
|
{
|
|
value: "not_allowed",
|
|
label: "Don't allow",
|
|
description: "Keep voted AI outputs local only.",
|
|
},
|
|
].map((option) => {
|
|
const active = feedbackDataSharingPreference === option.value;
|
|
return (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
disabled={updateGeneralMutation.isPending}
|
|
className={cn(
|
|
"rounded-lg border px-3 py-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60",
|
|
active
|
|
? "border-foreground bg-accent text-foreground"
|
|
: "border-border bg-background hover:bg-accent/50",
|
|
)}
|
|
onClick={() =>
|
|
updateGeneralMutation.mutate({
|
|
feedbackDataSharingPreference: option.value as
|
|
| "allowed"
|
|
| "not_allowed",
|
|
})
|
|
}
|
|
>
|
|
<div className="text-sm font-medium">{option.label}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{option.description}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
To retest the first-use prompt in local dev, remove the{" "}
|
|
<code>feedbackDataSharingPreference</code> key from the{" "}
|
|
<code>instance_settings.general</code> JSON row for this instance, or set it back to{" "}
|
|
<code>"prompt"</code>. Unset and <code>"prompt"</code> both mean no default has been
|
|
chosen yet.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|