nntrivi2001
d0889d5250
The status chips' row needs ~340 px; the window was 320 and its body's overflow-y:auto made x scrollable too, so a horizontal scrollbar showed and Clear alerts was cut. 22rem wide (capped to the viewport), x hidden.
63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
/**
|
|
* @file PetPanel.tsx
|
|
* @description The pet's window — clicking the pet opens it: its name (which
|
|
* the user can rename), a pat button, and what the pet knows (`info`: live /
|
|
* waiting / errored, the sessions that need you, Mute, Clear alerts —
|
|
* `SagiInfo.tsx`). The pet no longer chats: it started a full AI session per
|
|
* question, a heavy process on a shared server, so the chat was removed
|
|
* (v2.8.68); this window is where the pet's own care comes next.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import type { ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { X } from "lucide-react";
|
|
|
|
export function PetPanel({
|
|
name,
|
|
title,
|
|
headerActions,
|
|
info,
|
|
onClose,
|
|
}: {
|
|
name: string;
|
|
/** The name line (a rename button); plain text without it. */
|
|
title?: ReactNode;
|
|
/** Buttons before Close (the pat). */
|
|
headerActions?: ReactNode;
|
|
/** What the pet knows (`SagiInfo`). */
|
|
info: ReactNode;
|
|
onClose: () => void;
|
|
}) {
|
|
const { t } = useTranslation("settings");
|
|
return (
|
|
<div
|
|
className="pet-chat flex max-h-[calc(100vh-6rem)] w-[22rem] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-3xl border border-border-light shadow-2xl animate-slide-up"
|
|
role="dialog"
|
|
aria-label={t("sagi.panel.label", { name })}
|
|
>
|
|
<div className="pet-chat-head flex items-center gap-1 px-2 py-2">
|
|
<span className="pl-1.5 text-base leading-none" aria-hidden>
|
|
🐾
|
|
</span>
|
|
<div className="min-w-0 flex-1 px-1">
|
|
{title ?? <div className="truncate text-sm font-semibold text-fg-primary">{name}</div>}
|
|
</div>
|
|
{headerActions}
|
|
<button
|
|
type="button"
|
|
className="rounded-full p-1.5 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary"
|
|
onClick={onClose}
|
|
aria-label={t("sagi.panel.close", { name })}
|
|
title={t("sagi.panel.close", { name })}
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
{/* Vertical only: an auto overflow-y makes x scrollable too, and the
|
|
status chips' row then showed a horizontal scrollbar. */}
|
|
<div className="min-w-0 overflow-y-auto overflow-x-hidden">{info}</div>
|
|
</div>
|
|
);
|
|
}
|