424 lines
12 KiB
TypeScript
424 lines
12 KiB
TypeScript
import {
|
||
Bell,
|
||
Bookmark,
|
||
ChevronRight,
|
||
Gamepad2,
|
||
Menu,
|
||
MessageCircle,
|
||
Moon,
|
||
Music,
|
||
PanelLeftClose,
|
||
Settings,
|
||
Sparkles,
|
||
UserRound,
|
||
} from 'lucide-react';
|
||
import { useMemo, useState } from 'react';
|
||
|
||
import type { CreativeAgentInputPart } from '../../../packages/shared/src/contracts/creativeAgent';
|
||
import type { CreationWorkShelfItem } from '../custom-world-home/creationWorkShelf';
|
||
import { RpgEntryBrandLogo } from '../rpg-entry/RpgEntryBrandLogo';
|
||
import { CreativeAgentInputComposer } from './CreativeAgentInputComposer';
|
||
import { createCreativeAgentClientMessageId } from './creativeAgentViewModel';
|
||
|
||
type CreativeAgentHomePrompt = {
|
||
id: string;
|
||
label: string;
|
||
prompt: string;
|
||
icon: typeof Sparkles;
|
||
tone: 'cool' | 'green' | 'warm' | 'purple' | 'rose';
|
||
badge?: string;
|
||
};
|
||
|
||
export type CreativeAgentHistoryItem = {
|
||
id: string;
|
||
title: string;
|
||
groupLabel: string;
|
||
source: CreationWorkShelfItem;
|
||
};
|
||
|
||
type CreativeAgentHomeProps = {
|
||
recentItems: CreativeAgentHistoryItem[];
|
||
isBusy: boolean;
|
||
error: string | null;
|
||
onStartNewChat: () => void;
|
||
onOpenHistoryItem: (item: CreationWorkShelfItem) => void;
|
||
onOpenDrafts: () => void;
|
||
onOpenAccount: () => void;
|
||
onOpenSettings: () => void;
|
||
onSubmitMessage: (payload: {
|
||
clientMessageId: string;
|
||
content: CreativeAgentInputPart[];
|
||
}) => void;
|
||
};
|
||
|
||
const PROMPT_SUGGESTIONS: CreativeAgentHomePrompt[] = [
|
||
{
|
||
id: 'identity',
|
||
label: '你是谁',
|
||
prompt: '介绍一下你能帮我创作什么。',
|
||
icon: Sparkles,
|
||
tone: 'cool',
|
||
},
|
||
{
|
||
id: 'flash-app',
|
||
label: '一句话生成闪应用',
|
||
prompt: '帮我把一个灵感做成可互动的小应用。',
|
||
icon: Moon,
|
||
tone: 'green',
|
||
},
|
||
{
|
||
id: 'mini-game',
|
||
label: '捏个小游戏',
|
||
prompt: '帮我做一个适合马上玩的创意小游戏。',
|
||
icon: Gamepad2,
|
||
tone: 'warm',
|
||
},
|
||
{
|
||
id: 'world-model',
|
||
label: '体验世界模型',
|
||
prompt: '用一个世界设定帮我生成可体验的互动内容。',
|
||
icon: Bookmark,
|
||
tone: 'purple',
|
||
badge: 'Beta',
|
||
},
|
||
{
|
||
id: 'music',
|
||
label: '音乐扭蛋',
|
||
prompt: '把一段音乐灵感做成互动拼图。',
|
||
icon: Music,
|
||
tone: 'rose',
|
||
},
|
||
];
|
||
|
||
function buildCreativeHomeInputParts(payload: {
|
||
text: string;
|
||
image: { imageUrl: string; thumbnailUrl: string } | null;
|
||
}): CreativeAgentInputPart[] {
|
||
const content: CreativeAgentInputPart[] = [];
|
||
if (payload.text) {
|
||
content.push({
|
||
type: 'input_text',
|
||
text: payload.text,
|
||
});
|
||
}
|
||
if (payload.image) {
|
||
content.push({
|
||
type: 'input_image',
|
||
imageUrl: payload.image.imageUrl,
|
||
thumbnailUrl: payload.image.thumbnailUrl,
|
||
assetId: null,
|
||
});
|
||
}
|
||
return content;
|
||
}
|
||
|
||
function groupRecentItemsByLabel(items: CreativeAgentHistoryItem[]) {
|
||
const groups: Array<{ label: string; items: CreativeAgentHistoryItem[] }> = [];
|
||
for (const item of items) {
|
||
const lastGroup = groups[groups.length - 1];
|
||
if (lastGroup?.label === item.groupLabel) {
|
||
lastGroup.items.push(item);
|
||
continue;
|
||
}
|
||
groups.push({
|
||
label: item.groupLabel,
|
||
items: [item],
|
||
});
|
||
}
|
||
return groups;
|
||
}
|
||
|
||
function CreativeAgentPromptButton({
|
||
item,
|
||
disabled,
|
||
onClick,
|
||
}: {
|
||
item: CreativeAgentHomePrompt;
|
||
disabled: boolean;
|
||
onClick: () => void;
|
||
}) {
|
||
const Icon = item.icon;
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
disabled={disabled}
|
||
onClick={onClick}
|
||
className={`creative-agent-home__prompt creative-agent-home__prompt--${item.tone}`}
|
||
>
|
||
<Icon className="h-5 w-5 shrink-0" />
|
||
<span className="truncate">{item.label}</span>
|
||
{item.badge ? (
|
||
<span className="creative-agent-home__prompt-badge">{item.badge}</span>
|
||
) : null}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function CreativeAgentDrawer({
|
||
open,
|
||
recentItems,
|
||
onClose,
|
||
onStartNewChat,
|
||
onOpenHistoryItem,
|
||
onOpenDrafts,
|
||
onOpenAccount,
|
||
onOpenSettings,
|
||
}: {
|
||
open: boolean;
|
||
recentItems: CreativeAgentHistoryItem[];
|
||
onClose: () => void;
|
||
onStartNewChat: () => void;
|
||
onOpenHistoryItem: (item: CreationWorkShelfItem) => void;
|
||
onOpenDrafts: () => void;
|
||
onOpenAccount: () => void;
|
||
onOpenSettings: () => void;
|
||
}) {
|
||
const groupedItems = useMemo(
|
||
() => groupRecentItemsByLabel(recentItems),
|
||
[recentItems],
|
||
);
|
||
|
||
return (
|
||
<>
|
||
<div
|
||
className={`creative-agent-drawer-backdrop ${open ? 'creative-agent-drawer-backdrop--open' : ''}`}
|
||
onClick={onClose}
|
||
/>
|
||
<aside
|
||
className={`creative-agent-drawer ${open ? 'creative-agent-drawer--open' : ''}`}
|
||
aria-hidden={!open}
|
||
>
|
||
<div className="flex h-full min-h-0 flex-col">
|
||
<header className="flex shrink-0 items-center justify-between gap-3 px-5 pb-5 pt-[max(1.1rem,env(safe-area-inset-top))]">
|
||
<RpgEntryBrandLogo decorative />
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="platform-icon-button"
|
||
aria-label="关闭侧边栏"
|
||
title="关闭"
|
||
>
|
||
<PanelLeftClose className="h-4 w-4" />
|
||
</button>
|
||
</header>
|
||
|
||
<div className="shrink-0 space-y-3 px-5">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onStartNewChat();
|
||
onClose();
|
||
}}
|
||
className="creative-agent-drawer__new-chat"
|
||
>
|
||
<MessageCircle className="h-5 w-5" />
|
||
<span>开启新对话</span>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onOpenDrafts();
|
||
onClose();
|
||
}}
|
||
className="creative-agent-drawer__nav-row"
|
||
>
|
||
<Bookmark className="h-5 w-5" />
|
||
<span>我的创作</span>
|
||
<ChevronRight className="ml-auto h-4 w-4 opacity-55" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-5 min-h-0 flex-1 overflow-y-auto px-5 pb-5">
|
||
{groupedItems.length > 0 ? (
|
||
groupedItems.map((group) => (
|
||
<section key={group.label} className="mb-6">
|
||
<div className="creative-agent-drawer__group-label">
|
||
{group.label}
|
||
</div>
|
||
<div className="mt-3 space-y-3">
|
||
{group.items.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
onClick={() => {
|
||
onOpenHistoryItem(item.source);
|
||
onClose();
|
||
}}
|
||
className="creative-agent-drawer__history-item"
|
||
>
|
||
{item.title}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
))
|
||
) : (
|
||
<div className="creative-agent-drawer__empty">暂无创作记录</div>
|
||
)}
|
||
</div>
|
||
|
||
<footer className="flex shrink-0 items-center justify-between gap-3 px-5 py-5 pb-[max(1.15rem,env(safe-area-inset-bottom))]">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onOpenAccount();
|
||
onClose();
|
||
}}
|
||
className="creative-agent-drawer__avatar"
|
||
aria-label="账号"
|
||
>
|
||
<UserRound className="h-5 w-5" />
|
||
</button>
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onOpenSettings();
|
||
onClose();
|
||
}}
|
||
className="platform-icon-button"
|
||
aria-label="外观"
|
||
title="外观"
|
||
>
|
||
<Moon className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onOpenSettings();
|
||
onClose();
|
||
}}
|
||
className="platform-icon-button"
|
||
aria-label="设置"
|
||
title="设置"
|
||
>
|
||
<Settings className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</aside>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export function CreativeAgentHome({
|
||
recentItems,
|
||
isBusy,
|
||
error,
|
||
onStartNewChat,
|
||
onOpenHistoryItem,
|
||
onOpenDrafts,
|
||
onOpenAccount,
|
||
onOpenSettings,
|
||
onSubmitMessage,
|
||
}: CreativeAgentHomeProps) {
|
||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||
const submitText = (text: string) => {
|
||
const trimmedText = text.trim();
|
||
if (!trimmedText || isBusy) {
|
||
return;
|
||
}
|
||
onSubmitMessage({
|
||
clientMessageId: createCreativeAgentClientMessageId(),
|
||
content: [
|
||
{
|
||
type: 'input_text',
|
||
text: trimmedText,
|
||
},
|
||
],
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="creative-agent-home platform-remap-surface">
|
||
<div className="creative-agent-home__backdrop" />
|
||
<header className="creative-agent-home__topbar">
|
||
<button
|
||
type="button"
|
||
onClick={() => setDrawerOpen(true)}
|
||
className="creative-agent-home__topbar-button"
|
||
aria-label="打开侧边栏"
|
||
title="菜单"
|
||
>
|
||
<Menu className="h-6 w-6" />
|
||
</button>
|
||
<RpgEntryBrandLogo className="creative-agent-home__brand" decorative />
|
||
<button
|
||
type="button"
|
||
onClick={onOpenAccount}
|
||
className="creative-agent-home__topbar-button"
|
||
aria-label="通知与账户"
|
||
title="通知与账户"
|
||
>
|
||
<Bell className="h-5 w-5" />
|
||
</button>
|
||
</header>
|
||
|
||
<main className="creative-agent-home__main">
|
||
<div className="creative-agent-home__hero">
|
||
<h1>Hi, 朋友</h1>
|
||
<p>让复杂，变简单</p>
|
||
</div>
|
||
|
||
<div className="creative-agent-home__prompt-grid">
|
||
{PROMPT_SUGGESTIONS.map((item) => (
|
||
<CreativeAgentPromptButton
|
||
key={item.id}
|
||
item={item}
|
||
disabled={isBusy}
|
||
onClick={() => submitText(item.prompt)}
|
||
/>
|
||
))}
|
||
<button
|
||
type="button"
|
||
className="creative-agent-home__reward"
|
||
disabled={isBusy}
|
||
onClick={() => submitText('帮我做一个能马上分享的创意拼图。')}
|
||
>
|
||
<Sparkles className="h-6 w-6" />
|
||
<span>搓闪应用 分1亿激励</span>
|
||
</button>
|
||
</div>
|
||
|
||
{error ? (
|
||
<div className="creative-agent-home__error">{error}</div>
|
||
) : null}
|
||
</main>
|
||
|
||
<div className="creative-agent-home__composer">
|
||
<CreativeAgentInputComposer
|
||
variant="floating"
|
||
isBusy={isBusy}
|
||
placeholder="问一问百梦"
|
||
onSubmit={(payload) => {
|
||
const content = buildCreativeHomeInputParts(payload);
|
||
if (content.length === 0) {
|
||
return;
|
||
}
|
||
onSubmitMessage({
|
||
clientMessageId: createCreativeAgentClientMessageId(),
|
||
content,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<CreativeAgentDrawer
|
||
open={drawerOpen}
|
||
recentItems={recentItems}
|
||
onClose={() => setDrawerOpen(false)}
|
||
onStartNewChat={onStartNewChat}
|
||
onOpenHistoryItem={onOpenHistoryItem}
|
||
onOpenDrafts={onOpenDrafts}
|
||
onOpenAccount={onOpenAccount}
|
||
onOpenSettings={onOpenSettings}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default CreativeAgentHome;
|