55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { BotIcon } from "lucide-react";
|
|
|
|
import { type Agent } from "@/core/agents";
|
|
import { desensitize } from "@/lib/desensitize";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Landing (home) hero shown above the input box before the first message of an
|
|
* agent conversation: centered avatar, a "Hi，我是{name}" greeting and the
|
|
* agent's description as a slogan. The description is clamped to two lines
|
|
* (full text on hover) so a long blurb can never push the input box below the
|
|
* fold. The agent's 常用问题 are rendered by the page as a list beside the
|
|
* input box, not here.
|
|
*/
|
|
export function AgentWelcome({
|
|
className,
|
|
agent,
|
|
agentName,
|
|
}: {
|
|
className?: string;
|
|
agent: Agent | null | undefined;
|
|
agentName: string;
|
|
}) {
|
|
const displayName = desensitize(agent?.name ?? agentName);
|
|
const description = agent?.description
|
|
? desensitize(agent.description)
|
|
: undefined;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"mx-auto flex w-full max-w-2xl flex-col items-center justify-center gap-3 px-6 text-center",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="agent-avatar bg-primary/10 ring-primary/15 mb-2 flex h-[72px] w-[72px] items-center justify-center rounded-3xl ring-1">
|
|
<BotIcon className="text-primary h-9 w-9" />
|
|
</div>
|
|
<div className="text-3xl font-bold tracking-tight">
|
|
Hi，我是{displayName}
|
|
</div>
|
|
{description && (
|
|
<p
|
|
className="text-muted-foreground line-clamp-2 max-w-xl text-base leading-relaxed"
|
|
title={description}
|
|
>
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|