feat: chat
This commit is contained in:
gosangam
@@ -0,0 +1,240 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* /settings/chat — chat preferences.
|
||||
*
|
||||
* Each control saves on change rather than behind a Save button: these are
|
||||
* independent switches, and a half-applied form is worse than an immediate
|
||||
* write that can be toggled back.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
import { SettingsShell, Section } from "@/components/settings/settings-ui";
|
||||
import { SettingRow, ToggleSwitch } from "@/components/settings/setting-row";
|
||||
import { chat, type ChatSettings } from "@/lib/chat";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const AGE_CHOICES = [1, 3, 6, 12] as const;
|
||||
|
||||
export default function ChatSettingsPage() {
|
||||
const [settings, setSettings] = useState<ChatSettings | null>(null);
|
||||
const [state, setState] = useState<"loading" | "ready" | "error">("loading");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
chat
|
||||
.settings()
|
||||
.then((s) => {
|
||||
if (cancelled) return;
|
||||
setSettings(s);
|
||||
setState("ready");
|
||||
})
|
||||
.catch(() => !cancelled && setState("error"));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const save = useCallback(
|
||||
async (patch: Partial<Omit<ChatSettings, "gender_set">>) => {
|
||||
setBusy(true);
|
||||
try {
|
||||
setSettings(await chat.updateSettings(patch));
|
||||
} catch (err) {
|
||||
// The BFF explains *why* — notably "add your gender in profile
|
||||
// settings" — so surface its message rather than a generic failure.
|
||||
toast.error(
|
||||
err instanceof Error && err.message
|
||||
? err.message
|
||||
: "Could not save that setting",
|
||||
);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<SettingsShell
|
||||
backHref="/settings"
|
||||
backLabel="Back to settings"
|
||||
title="Chat"
|
||||
>
|
||||
{state === "error" ? (
|
||||
<p className="text-sm text-destructive">
|
||||
Could not load your chat settings.
|
||||
</p>
|
||||
) : state === "loading" || !settings ? (
|
||||
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||
) : (
|
||||
<div className="space-y-8">
|
||||
<Section
|
||||
title="Read receipts"
|
||||
description="If you turn these off, you won't see when others have read your messages either."
|
||||
>
|
||||
<SettingRow
|
||||
label="Send read receipts"
|
||||
description="People you chat with can see when you've read their messages. Delivery ticks are unaffected."
|
||||
control={
|
||||
<ToggleSwitch
|
||||
label="Send read receipts"
|
||||
checked={settings.read_receipts}
|
||||
disabled={busy}
|
||||
onToggle={() =>
|
||||
save({ read_receipts: !settings.read_receipts })
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title="Who can message you"
|
||||
description="This applies to new conversations. People you're already chatting with can still reach you."
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Choice
|
||||
active={settings.who_can_message === "anyone"}
|
||||
disabled={busy}
|
||||
onClick={() => save({ who_can_message: "anyone" })}
|
||||
title="Anyone"
|
||||
description="No restriction."
|
||||
/>
|
||||
<Choice
|
||||
active={settings.who_can_message === "friends"}
|
||||
disabled={busy}
|
||||
onClick={() => save({ who_can_message: "friends" })}
|
||||
title="Your friends"
|
||||
description="Only people you follow, or who follow you."
|
||||
/>
|
||||
<Choice
|
||||
active={settings.who_can_message === "account_age"}
|
||||
disabled={busy}
|
||||
onClick={() => save({ who_can_message: "account_age" })}
|
||||
title="Established accounts"
|
||||
description="Only accounts older than a chosen age."
|
||||
>
|
||||
{settings.who_can_message === "account_age" && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{AGE_CHOICES.map((months) => (
|
||||
<button
|
||||
key={months}
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
void save({ min_account_age_months: months });
|
||||
}}
|
||||
className={cn(
|
||||
"rounded-full border px-3 py-1 text-xs transition-colors",
|
||||
settings.min_account_age_months === months
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{months} {months === 1 ? "month" : "months"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Choice>
|
||||
<Choice
|
||||
active={settings.who_can_message === "same_gender"}
|
||||
disabled={busy || !settings.gender_set}
|
||||
onClick={() => save({ who_can_message: "same_gender" })}
|
||||
title="Only accounts of your gender"
|
||||
description={
|
||||
settings.gender_set
|
||||
? "Only accounts whose gender matches yours."
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{!settings.gender_set && (
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Add your gender in{" "}
|
||||
<Link
|
||||
href="/settings/profile"
|
||||
className="underline underline-offset-2 hover:text-foreground"
|
||||
>
|
||||
profile settings
|
||||
</Link>{" "}
|
||||
to use this option.
|
||||
</p>
|
||||
)}
|
||||
</Choice>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title="Kautilya"
|
||||
description="Kautilya is the AI study companion, tuned on Śrīla Prabhupāda's books, letters, and lectures."
|
||||
>
|
||||
<SettingRow
|
||||
label="Use your chats to train Kautilya"
|
||||
description="Your conversations may help improve the assistant's answers. Turning this off excludes them."
|
||||
control={
|
||||
<ToggleSwitch
|
||||
label="Use your chats to train Kautilya"
|
||||
checked={settings.train_kautilya}
|
||||
disabled={busy}
|
||||
onToggle={() =>
|
||||
save({ train_kautilya: !settings.train_kautilya })
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Section>
|
||||
</div>
|
||||
)}
|
||||
</SettingsShell>
|
||||
);
|
||||
}
|
||||
|
||||
function Choice({
|
||||
active,
|
||||
disabled,
|
||||
onClick,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
}: {
|
||||
active: boolean;
|
||||
disabled?: boolean;
|
||||
onClick: () => void;
|
||||
title: string;
|
||||
description?: string;
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-xl border p-3 transition-colors",
|
||||
active ? "border-primary bg-primary/5" : "border-border",
|
||||
disabled && !active && "opacity-60",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={active}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
className="w-full text-left disabled:cursor-default"
|
||||
>
|
||||
<span className="block text-sm font-medium text-foreground">
|
||||
{title}
|
||||
</span>
|
||||
{description && (
|
||||
<span className="block text-xs text-muted-foreground">
|
||||
{description}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
DownloadCloud,
|
||||
LogOut,
|
||||
MessageSquareText,
|
||||
MessagesSquare,
|
||||
Scale,
|
||||
ShieldCheck,
|
||||
UserRound,
|
||||
@@ -49,6 +50,12 @@ export default function SettingsPage() {
|
||||
label="Reading preferences"
|
||||
description="Theme, palette, font, and size — synced across devices."
|
||||
/>
|
||||
<NavRow
|
||||
href="/settings/chat"
|
||||
icon={<MessagesSquare className="size-5" />}
|
||||
label="Chat"
|
||||
description="Read receipts, who can message you, and Kautilya training."
|
||||
/>
|
||||
<NavRow
|
||||
href="/settings/notifications"
|
||||
icon={<Bell className="size-5" />}
|
||||
|
||||
Reference in New Issue
Block a user